/* ============================================================
   We Grow NYC — Design System (prototipo)
   Paleta oficial Color Guide 2026. Cada sección = futuro block
   pattern de Gutenberg; mantener estilos por componente.
   ============================================================ */

:root {
  /* Brand tokens */
  --c-accent: #00bf63;
  --c-accent-dark: #00a355;
  --c-dark: #006838;
  --c-darker: #00522c;
  --c-olive: #8c9c67;
  --c-olive-soft: #eef1e6;
  --c-ink: #221e1f;
  --c-bg: #faf9f6;
  --c-white: #ffffff;
  --c-line: #e6e3dc;

  /* Type */
  --f-head: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-tag: "Archivo Narrow", "Arial Narrow", sans-serif;
  --f-body: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --fs-hero: clamp(2.4rem, 6vw, 4.4rem);
  --fs-h2: clamp(1.8rem, 3.6vw, 2.7rem);
  --fs-h3: 1.25rem;
  --fs-body: 1.0625rem;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 10px 30px rgba(34, 30, 31, 0.10);
  --shadow-lg: 0 22px 60px rgba(0, 82, 44, 0.18);
  --wrap: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--c-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2rem); }

h1, h2, h3, h4 { font-family: var(--f-head); line-height: 1.08; letter-spacing: -0.01em; font-weight: 800; }
h1 { font-size: var(--fs-hero); text-transform: uppercase; }
h2 { font-size: var(--fs-h2); text-transform: uppercase; }
h3 { font-size: var(--fs-h3); }

.eyebrow {
  font-family: var(--f-tag);
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.85rem;
  color: var(--c-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--c-accent); }
.on-dark .eyebrow { color: var(--c-accent); }

.lead { font-size: 1.15rem; max-width: 46ch; }
/* Texto largo (historia en About): aire entre párrafos, también para los que se añadan desde el editor. */
.story-body p + p { margin-top: 1.1em; }
.muted { color: rgba(34, 30, 31, 0.68); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 0.98rem;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s, color 0.25s;
}
.btn .arr { transition: transform 0.25s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn-primary { background: var(--c-accent); color: var(--c-ink); }
.btn-primary:hover { background: var(--c-accent-dark); color: var(--c-white); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 191, 99, 0.35); }
.btn-dark { background: var(--c-dark); color: var(--c-white); }
.btn-dark:hover { background: var(--c-darker); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-ghost { border-color: currentColor; color: var(--c-dark); background: transparent; }
.btn-ghost:hover { background: var(--c-dark); color: var(--c-white); transform: translateY(-2px); }
.on-dark .btn-ghost { color: var(--c-white); }
.on-dark .btn-ghost:hover { background: var(--c-white); color: var(--c-dark); }
/* Héroe: el ghost verde oscuro (#006838) sobre la foto oscura daba ~2.1:1. Variante clara solo aquí. */
.hero .btn-ghost { color: var(--c-white); border-color: rgba(255, 255, 255, 0.85); }
.hero .btn-ghost:hover { background: var(--c-white); border-color: var(--c-white); color: var(--c-dark); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(250, 249, 246, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.site-header.scrolled { border-color: var(--c-line); box-shadow: 0 6px 24px rgba(34, 30, 31, 0.06); }
/* padding-block (no `padding`): conserva el padding-inline de .wrap; con `padding: 0.7rem 0` la cabecera
   quedaba pegada a los bordes por debajo de 1180 px (logo en x=0 y botón de menú en x=innerWidth). */
.nav-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.7rem; }
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--c-ink); }
.brand img { height: 56px; width: auto; }
.brand-name { font-family: var(--f-head); font-weight: 800; font-size: 1.05rem; letter-spacing: 0.01em; line-height: 1.05; text-transform: uppercase; }
.brand-name small { display: block; font-family: var(--f-tag); font-style: italic; font-weight: 700; font-size: 0.62rem; color: var(--c-dark); letter-spacing: 0.06em; text-transform: none; }

.nav-links { display: flex; align-items: center; gap: 1.5rem; list-style: none; }
.nav-links a { font-weight: 600; font-size: 0.95rem; text-decoration: none; color: var(--c-ink); position: relative; padding: 0.3rem 0; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-cta { margin-left: 0.5rem; }
/* La píldora del menú no lleva subrayado animado. Su padding lo fija cada tramo (escritorio abajo, móvil en ≤920). */
.nav-links a.btn::after { content: none; }
/* `.nav-links a { padding: 0.3rem 0 }` (0,1,1) pisaba el padding de `.btn` (0,1,0): texto pegado al borde de la píldora. */
@media (min-width: 921px) { .nav-links a.btn { padding: 0.55rem 1.15rem; } }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 0.4rem; }
.nav-toggle span { display: block; width: 26px; height: 3px; background: var(--c-ink); margin: 5px 0; border-radius: 2px; transition: transform 0.3s, opacity 0.3s; }

/* 921–1060 px: con el padding lateral de .wrap ya respetado, «Get Involved» y «Take a Course» partían en dos líneas
   hasta ~1010 px (antes del arreglo ya pasaba entre 921 y ~950). Menú algo más compacto solo en ese tramo.
   Ronda 3: la píldora «Take a Course» recuperó su padding (+37 px) y el tramo se amplía a 1060 px con hueco y padding más justos.
   Medido sin salto de línea de 921 a 1600 px con Archivo cargada Y con la fuente de reserva (Google Fonts bloqueado). */
@media (min-width: 921px) and (max-width: 1060px) {
  .nav-links { gap: 0.6rem; }
  .nav-links a { font-size: 0.88rem; }
  .nav-links a.btn { padding: 0.5rem 0.8rem; gap: 0.4rem; }
  .nav-cta { margin-left: 0; }
}

@media (max-width: 920px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--c-bg); border-bottom: 1px solid var(--c-line);
    max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease);
  }
  .nav-links.open { max-height: 480px; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 0.9rem clamp(1.1rem, 4vw, 2rem); }
  .nav-cta { margin: 0.6rem clamp(1.1rem, 4vw, 2rem) 1rem; }
  /* width:auto + stretch: el 100% de `.nav-links li` más el margen lateral sacaba la pastilla por la derecha. */
  .nav-links li.nav-cta { width: auto; align-self: stretch; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 82vh; display: flex; align-items: flex-end; color: var(--c-white); overflow: hidden; }
.hero-media { position: absolute; inset: -8% 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(0, 82, 44, 0.15) 0%, rgba(34, 30, 31, 0.72) 78%); }
.hero-inner { position: relative; z-index: 1; width: 100%; padding-top: 6rem; padding-bottom: 4.5rem; }
.hero .tagline { font-family: var(--f-tag); font-style: italic; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-accent); font-size: clamp(0.85rem, 1.6vw, 1.05rem); margin-bottom: 1rem; }
.hero h1 { max-width: 15ch; margin-bottom: 1.3rem; }
.hero p { max-width: 52ch; font-size: 1.12rem; margin-bottom: 2rem; color: rgba(255, 255, 255, 0.92); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.hero-page { min-height: 48vh; }
.hero-page .hero-inner { padding-top: 5rem; padding-bottom: 3.2rem; }

/* ---------- Sections ---------- */
.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section-dark { background: var(--c-dark); color: var(--c-white); }
.section-dark .muted { color: rgba(255, 255, 255, 0.72); }
.section-olive { background: var(--c-olive-soft); }
.section-head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .eyebrow::before { display: none; }

/* ---------- Stats band ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.2rem; }
.stat { text-align: center; padding: 1.8rem 1rem; border-radius: var(--radius); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); }
.stat .num { font-family: var(--f-head); font-weight: 800; font-size: clamp(2.2rem, 4.5vw, 3.2rem); color: var(--c-accent); line-height: 1; }
.stat .lbl { font-size: 0.92rem; margin-top: 0.5rem; color: rgba(255, 255, 255, 0.85); }
/* Fecha de corte de las cifras de impacto («As of August 2026»): visible y discreta */
.stats-asof { margin: 1.1rem 0 0; text-align: center; font-size: 0.85rem; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.78); }

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.card {
  background: var(--c-white); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 4px 18px rgba(34, 30, 31, 0.07);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.card-media { aspect-ratio: 16 / 10; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.card:hover .card-media img { transform: scale(1.05); }
.card-body { padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.card-body h3 { color: var(--c-dark); }
.card-body .card-link { margin-top: auto; font-weight: 700; text-decoration: none; color: var(--c-dark); }
.card-body .card-link:hover { color: var(--c-accent-dark); }
.pill { align-self: flex-start; font-family: var(--f-tag); font-style: italic; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--c-olive-soft); color: var(--c-dark); padding: 0.3rem 0.75rem; border-radius: 999px; }
.pill-accent { background: rgba(0, 191, 99, 0.14); }

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); position: relative; }
.split-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3.4; }
.split-media .badge-float { position: absolute; right: 1.2rem; bottom: 1.2rem; width: clamp(84px, 9vw, 120px); filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.3)); }
.split-body p + p { margin-top: 1rem; }
.split-body .btn { margin-top: 1.6rem; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split.rev .split-media { order: 2; }
@media (max-width: 860px) { .split.rev .split-media { order: 0; } }

/* ---------- Course CTA banner ---------- */
.course-cta { border-radius: var(--radius-lg); overflow: hidden; position: relative; color: var(--c-white); }
.course-cta .cc-bg { position: absolute; inset: 0; }
.course-cta .cc-bg img { width: 100%; height: 100%; object-fit: cover; }
.course-cta .cc-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(0, 82, 44, 0.94) 22%, rgba(0, 104, 56, 0.65) 60%, rgba(0, 104, 56, 0.25)); }
.course-cta .cc-body { position: relative; padding: clamp(2.2rem, 5vw, 4rem); max-width: 620px; }
.course-cta h2 { margin-bottom: 0.9rem; }
.course-cta p { margin-bottom: 1.8rem; color: rgba(255, 255, 255, 0.9); }

/* ---------- Tabs ---------- */
.tabs-nav { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2rem; }
.tab-btn {
  font-family: var(--f-head); font-weight: 700; font-size: 0.95rem;
  padding: 0.65rem 1.4rem; border-radius: 999px; border: 2px solid var(--c-line);
  background: var(--c-white); color: var(--c-ink); cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s var(--ease);
}
.tab-btn:hover { border-color: var(--c-accent); transform: translateY(-1px); }
.tab-btn[aria-selected="true"] { background: var(--c-dark); border-color: var(--c-dark); color: var(--c-white); }
.tab-panel[hidden], .tab-panel.is-hidden { display: none; }
.tab-panel { animation: tabIn 0.45s var(--ease); }
@keyframes tabIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Accordion ---------- */
.accordion { border-top: 1px solid var(--c-line); }
.acc-item { border-bottom: 1px solid var(--c-line); }
.acc-head {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--f-head); font-weight: 700; font-size: 1.05rem; color: var(--c-ink);
  padding: 1.15rem 0.2rem;
}
.acc-head .ic { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--c-dark); color: var(--c-dark); display: grid; place-items: center; font-size: 1.1rem; transition: transform 0.3s var(--ease), background 0.3s, color 0.3s; }
.acc-item.open .ic { transform: rotate(45deg); background: var(--c-dark); color: var(--c-white); }
.acc-panel { overflow: hidden; max-height: 0; transition: max-height 0.4s var(--ease); }
.acc-panel-inner { padding: 0 0.2rem 1.3rem; max-width: 65ch; color: rgba(34, 30, 31, 0.8); }

/* ---------- Slider (testimonios) ---------- */
.slider { position: relative; }
.slider-track { display: flex; transition: transform 0.55s var(--ease); }
.slide { flex: 0 0 100%; padding: 0 0.2rem; }
.quote-card { max-width: 720px; margin: 0 auto; text-align: center; padding: 2.4rem 1.5rem; }
.quote-card blockquote { font-family: var(--f-head); font-weight: 600; font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.4; }
.quote-card blockquote::before { content: "“"; display: block; font-size: 3.4rem; line-height: 1; color: var(--c-accent); font-weight: 800; }
.quote-card cite { display: block; margin-top: 1.2rem; font-style: normal; font-weight: 700; color: var(--c-dark); }
.quote-card cite small { display: block; font-weight: 400; color: rgba(34, 30, 31, 0.6); }
.slider-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1rem; }
.slider-dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; background: var(--c-line); cursor: pointer; transition: background 0.25s, transform 0.25s; }
.slider-dots button[aria-current="true"] { background: var(--c-accent); transform: scale(1.25); }

/* ---------- Get involved options ---------- */
.involve-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.involve-card {
  border-radius: var(--radius-lg); padding: 2.1rem 1.8rem; background: var(--c-white);
  border: 1px solid var(--c-line); display: flex; flex-direction: column; gap: 0.8rem;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s;
}
.involve-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--c-accent); }
.involve-card .ico { width: 54px; height: 54px; border-radius: 14px; background: var(--c-olive-soft); display: grid; place-items: center; font-size: 1.5rem; }
.involve-card h3 { color: var(--c-dark); }
.involve-card .btn { margin-top: auto; align-self: flex-start; }

/* ---------- Partners strip ---------- */
.partners-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.5rem, 5vw, 3.5rem); opacity: 0.85; }
.partner-ph {
  font-family: var(--f-head); font-weight: 800; letter-spacing: 0.04em; font-size: 1rem;
  color: rgba(34, 30, 31, 0.45); border: 2px dashed var(--c-line); border-radius: 10px; padding: 0.8rem 1.4rem;
}


/* ---------- Logos de partners ---------- */
.logo-strip, .logo-grid { display: grid; align-items: center; justify-items: center; }
.logo-strip {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: clamp(1.2rem, 3vw, 2.6rem);
}
.logo-grid {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: clamp(1.4rem, 3vw, 2.4rem);
}
.logo-strip img, .logo-grid img {
  max-height: 62px; max-width: 100%; width: auto; object-fit: contain;
  opacity: 0.9;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.logo-strip img:hover, .logo-grid img:hover { opacity: 1; transform: scale(1.06); }
.logo-grid img { max-height: 70px; }

@media (prefers-reduced-motion: reduce) {
  .logo-strip img, .logo-grid img { transition: none; }
}

/* ---------- Event list ---------- */
.event-row {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 1.4rem; align-items: center;
  background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 1.3rem 1.5rem; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.event-row + .event-row { margin-top: 1rem; }
.event-row:hover { transform: translateX(6px); box-shadow: var(--shadow); }
.event-date { text-align: center; font-family: var(--f-head); color: var(--c-dark); }
.event-date .d { font-size: 2rem; font-weight: 800; line-height: 1; }
.event-date .m { font-family: var(--f-tag); font-style: italic; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; }
.event-meta { font-size: 0.9rem; color: rgba(34, 30, 31, 0.6); }
@media (max-width: 640px) { .event-row { grid-template-columns: 80px 1fr; } .event-row .btn { grid-column: 2; justify-self: start; } }

/* ---------- Bio cards ---------- */
.bio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.5rem; }
.bio-card { text-align: center; }
.bio-card .bio-ph {
  aspect-ratio: 1; border-radius: var(--radius-lg); background: var(--c-olive-soft);
  display: grid; place-items: center; font-size: 3rem; color: var(--c-olive); margin-bottom: 1rem;
  transition: transform 0.3s var(--ease);
  overflow: hidden;
}
.bio-card .bio-ph img { width: 100%; height: 100%; object-fit: cover; }
.bio-card:hover .bio-ph { transform: translateY(-5px); }
.bio-card h3 { font-size: 1.05rem; }
.bio-card .role { font-family: var(--f-tag); font-style: italic; font-weight: 700; font-size: 0.82rem; color: var(--c-dark); text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.35rem; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; padding: 0.8rem 1rem; border-radius: 10px;
  border: 1.5px solid var(--c-line); background: var(--c-white); color: var(--c-ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(0, 191, 99, 0.18); }
/* Formulario de contacto: campo trampa invisible para bots y aviso tras enviar. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { margin: 0 0 1.1rem; padding: 0.85rem 1rem; border-radius: 10px; border-left: 4px solid var(--c-accent); background: var(--c-olive-soft); color: var(--c-dark); font-weight: 600; font-size: 0.95rem; }
.form-msg.is-error { border-left-color: #c0392b; }
.contact-info { display: flex; flex-direction: column; gap: 1.3rem; }
.info-row { display: flex; gap: 0.9rem; align-items: flex-start; }
.info-row .ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--c-olive-soft); display: grid; place-items: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-ink); color: rgba(255, 255, 255, 0.82); padding: 3.5rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: var(--c-white); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.9rem; }
.site-footer ul { list-style: none; }
.site-footer li + li { margin-top: 0.5rem; }
.site-footer a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.site-footer a:hover { color: var(--c-accent); }
.footer-brand img { height: 74px; margin-bottom: 1rem; }
.footer-brand p { font-size: 0.92rem; max-width: 34ch; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); }

/* Newsletter del footer */
.footer-news { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.14); padding-bottom: 2.2rem; margin-bottom: 2.5rem; }
.footer-news h4 { color: var(--c-white); font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.3rem; }
.footer-news .fn-copy p { font-size: 0.95rem; }
.news-form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.news-form input {
  font: inherit; color: var(--c-white); min-width: 260px;
  padding: 0.8rem 1.2rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.08);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.news-form input::placeholder { color: rgba(255, 255, 255, 0.45); }
.news-form input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(0, 191, 99, 0.25); }
.news-msg { flex-basis: 100%; font-size: 0.88rem; color: var(--c-accent); }
.news-msg.is-error { color: #ff9e8f; }
.news-msg a { color: inherit; }
.news-form button[disabled] { opacity: 0.6; cursor: progress; }
/* Honeypot de Mailchimp: fuera de pantalla, nunca display:none */
.news-hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

/* Sello Candid oficial */
.candid-seal { display: inline-block; }
.candid-seal img { height: 92px; width: auto; transition: transform 0.25s var(--ease); }
.candid-seal:hover img { transform: translateY(-2px); }

/* Redes sociales */
.social-row { display: flex; gap: 0.7rem; margin-top: 1.1rem; }
.social-row a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.85);
  display: grid; place-items: center;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s var(--ease);
}
.social-row a:hover { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-ink); transform: translateY(-2px); }
.social-row svg { width: 18px; height: 18px; fill: currentColor; }
.candid-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--f-tag); font-style: italic; font-weight: 700; font-size: 0.8rem; color: var(--c-accent); border: 1px solid rgba(0, 191, 99, 0.4); padding: 0.35rem 0.8rem; border-radius: 999px; }

/* ---------- Reveal-on-scroll ----------
   Solo se oculta si hay JS (clase .js que pone un script en línea del <head>). Sin JS, o si
   main.js no llega a ejecutarse (p. ej. un bundle concatenado roto), el contenido se ve. */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal-l { transform: translateX(-34px); }
.js .reveal-r { transform: translateX(34px); }
.js .reveal-l.in, .js .reveal-r.in { transform: none; }
/* Mientras .reveal-l/.reveal-r esperan su entrada están desplazados 34 px: en móvil daban
   16 px de scroll horizontal recién cargada la página (medido 21-oct a 375 px). Se recorta
   en cada <section> (en body se propagaría al viewport como «hidden» y seguiría habiendo
   scroll programático). «clip» no crea contenedor de scroll ni toca el eje vertical. */
section { overflow-x: clip; }
.js [data-stagger] > *, .js .is-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js [data-stagger].in > *, .js .is-stagger.in > * { opacity: 1; transform: none; }
[data-stagger].in > *:nth-child(2), .is-stagger.in > *:nth-child(2) { transition-delay: 0.1s; }
[data-stagger].in > *:nth-child(3), .is-stagger.in > *:nth-child(3) { transition-delay: 0.2s; }
[data-stagger].in > *:nth-child(4), .is-stagger.in > *:nth-child(4) { transition-delay: 0.3s; }
[data-stagger].in > *:nth-child(5), .is-stagger.in > *:nth-child(5) { transition-delay: 0.4s; }
[data-stagger].in > *:nth-child(6), .is-stagger.in > *:nth-child(6) { transition-delay: 0.5s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, [data-stagger] > *, .is-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-media { inset: 0 !important; }
  .hero-media img, .card-media img, .tab-panel { transition: none !important; animation: none !important; transform: none !important; }
}

/* ---------- Modo captura (screenshots full-page) ---------- */
.capture .hero { min-height: 780px; }
.capture .hero-page { min-height: 460px; }

/* ---------- Placeholder marker (solo prototipo) ---------- */
.ph-note { font-family: var(--f-tag); font-style: italic; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #b48a00; background: #fff6da; border: 1px dashed #e3c65a; border-radius: 6px; padding: 0.15rem 0.5rem; display: inline-block; margin-bottom: 0.6rem; }

/* ---- Bloques nativos ----
   El bloque de imagen envuelve el <img> en un <figure>. Estas reglas lo hacen
   transparente al layout. Van en :where() para que NO ganen a las reglas del
   diseño (p. ej. .split-media .badge-float, que necesita su propio ancho). ---- */
:where(.hero-media, .card-media, .split-media, .bio-ph, .cc-bg) > .wp-block-image { width: 100%; height: 100%; margin: 0; }
:where(.hero-media, .card-media, .split-media, .bio-ph, .cc-bg) > .wp-block-image > img { width: 100%; height: 100%; object-fit: cover; }
:where(.wp-block-image) { margin: 0; }



/* ---------- Resto del sitio: entrada, archivo, buscador y 404 ----------
   Las 16 páginas del rediseño tienen su propio diseño; esto es lo que ve el
   visitante en el blog, las categorías, el buscador y los enlaces rotos. */
.entry-wrap { max-width: 760px; }
.entry-wrap .eyebrow { display: block; margin-bottom: 0.6rem; }
.post-meta { color: rgba(34, 30, 31, 0.6); font-size: 0.9rem; margin: 0.6rem 0 1.6rem; }
.entry-media img { border-radius: var(--radius-lg); margin-bottom: 1.8rem; }
.entry > * + * { margin-top: 1.1em; }
.entry h2 { margin-top: 1.8em; }
.entry h3 { margin-top: 1.4em; }
.entry ul, .entry ol { padding-left: 1.2rem; }
.entry li + li { margin-top: 0.4em; }
.entry img { border-radius: var(--radius-lg); }
.entry blockquote { border-left: 4px solid var(--c-accent); padding-left: 1rem; font-style: italic; }
.post-nav { margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid var(--c-line); font-weight: 700; }
.post-nav a { text-decoration: none; }
.wp-block-query-pagination { margin-top: 2.4rem; gap: 0.5rem; font-weight: 700; }
.wp-block-query-pagination .page-numbers { padding: 0.35rem 0.75rem; border: 1px solid var(--c-line); border-radius: 8px; text-decoration: none; }
.wp-block-query-pagination .page-numbers.current { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-ink); }
.site-search .wp-block-search__inside-wrapper { max-width: 440px; gap: 0.5rem; }
.site-search .wp-block-search__input { border: 1px solid var(--c-line); border-radius: 10px; padding: 0.7rem 0.9rem; font: inherit; }
.site-search .wp-block-search__button { border: 0; border-radius: 999px; padding: 0.7rem 1.3rem; background: var(--c-accent); color: var(--c-ink); font-weight: 700; cursor: pointer; }
.btn-row { margin-top: 1.6rem; gap: 0.8rem; }
.btn-row .wp-block-button__link { border-radius: 999px; padding: 0.8rem 1.4rem; background: var(--c-accent); color: var(--c-ink); font-weight: 700; }
/* 404 y búsqueda: aire entre el titular, el párrafo y el buscador (antes iban pegados) */
.error404 main .wrap > * + *, .search main .section-head > * + * { margin-top: 1rem; }
.btn-row .is-style-outline .wp-block-button__link { background: transparent; color: var(--c-dark); border: 1px solid var(--c-line); }
.u-narrow { max-width: 640px; }
/* En WordPress la cabecera va dentro del envoltorio <header class="wp-block-template-part">,
   que mide lo mismo que ella: el sticky de .site-header no tenía recorrido y la cabecera se
   iba con el scroll. Se hace sticky el envoltorio (en el prototipo no existe y no aplica). */
.wp-block-template-part:has(> .site-header) { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 60; }

/* ---------- Compatibilidad con las páginas antiguas del cliente ----------
   Sus páginas de 2023 se maquetaron con bloques de WordPress y el relleno lateral
   del tema anterior; sin él, el texto queda pegado al borde. Nuestro diseño lleva
   su propio contenedor (.wrap), así que esto se aplica SOLO a las páginas que no
   son nuestras, marcadas con .wegrow-legacy en el body desde functions.php. */
.wegrow-legacy .wp-block-post-content { --wg-pad: clamp(1.25rem, 5vw, 3rem); padding-left: var(--wg-pad); padding-right: var(--wg-pad); }
.wegrow-legacy .wp-block-post-content > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.wegrow-legacy .wp-block-post-content > .alignfull { max-width: none; margin-left: calc(-1 * var(--wg-pad)); margin-right: calc(-1 * var(--wg-pad)); }
.wegrow-legacy .has-global-padding { padding-left: clamp(1.25rem, 5vw, 3rem); padding-right: clamp(1.25rem, 5vw, 3rem); }
.wegrow-legacy .has-global-padding > .alignfull { margin-left: calc(-1 * clamp(1.25rem, 5vw, 3rem)); margin-right: calc(-1 * clamp(1.25rem, 5vw, 3rem)); }
.wegrow-legacy .wp-block-columns { gap: clamp(1.2rem, 3vw, 2rem); }
.wegrow-legacy .wp-block-post-content > * + * { margin-top: 1.2rem; }

/* ---------- Capa .wegrow-legacy (2): arreglos de T5, 20-oct-2026 ----------
   Integrado desde launch/legacy/legacy-fixes.css. Solo actúa en páginas antiguas
   (body.wegrow-legacy) y entradas (.single); 0 elementos afectados en las 16
   páginas del rediseño (medido por T5). */
/* 1) Vídeos de YouTube incrustados con width="560" fijo (24 guías de estado + entradas):
      a 375 px provocan 185–225 px de scroll horizontal. Pasa también HOY en su web.
      Se escalan al ancho disponible manteniendo 16:9. */
.wegrow-legacy .wp-block-post-content iframe,
.single .wp-block-post-content iframe {
	max-width: 100%;
}
.wegrow-legacy .wp-block-post-content iframe[src*="youtube"],
.single .wp-block-post-content iframe[src*="youtube"] {
	width: 100%;
	max-width: 760px;
	height: auto;
	aspect-ratio: 16 / 9;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* 2) Grupos a sangre (alignfull) con layout constrained: en su tema llevaban relleno
      lateral (useRootPaddingAwareAlignments); en el nuestro el texto quedaba pegado al
      borde del móvil. Se les da el mismo relleno que al resto del contenido antiguo.
      El relleno en línea que traigan sus bloques sigue mandando. */
.wegrow-legacy .wp-block-post-content .alignfull.is-layout-constrained:not(.has-global-padding),
.wegrow-legacy .wp-block-post-content .wp-block-group.alignfull:not(.has-global-padding) {
	padding-left: clamp(1.25rem, 5vw, 3rem);
	padding-right: clamp(1.25rem, 5vw, 3rem);
}

/* 3) Presets que usa su contenido y que nuestro theme.json no declara (valores leídos
      de los estilos globales de su web viva). Mejor sería añadirlos a theme.json
      (settings.color.palette / typography.fontSizes / spacing.spacingSizes); mientras
      tanto, aquí. */
.wegrow-legacy,
.single {
	--wp--preset--color--button-hover-color: #2F479F;
	--wp--preset--font-size--mdm-large: clamp(1.188rem, 1.188rem + ((1vw - 0.2rem) * 0.204), 1.313rem);
	--wp--preset--spacing--10: 1rem;
}
.has-button-hover-color-background-color { background-color: var(--wp--preset--color--button-hover-color) !important; }
/* sobre ese azul nuestro botón dejaba el texto oscuro (contraste insuficiente): texto blanco
   salvo que el bloque traiga su propio color de texto */
.wp-block-button__link.has-button-hover-color-background-color:not(.has-text-color) { color: #fff; }
.has-button-hover-color-color { color: var(--wp--preset--color--button-hover-color) !important; }
.has-mdm-large-font-size { font-size: var(--wp--preset--font-size--mdm-large) !important; }

/* 4) Imágenes con width fijo en línea (p. ej. style="width:791px") dentro de figuras:
      nunca más anchas que su contenedor. */
.wegrow-legacy .wp-block-post-content img,
.single .wp-block-post-content img {
	max-width: 100%;
	height: auto;
}

/* == UTILIDADES GENERADAS POR html-to-blocks.py — no editar a mano == */
.u-06fa12 { max-width:760px; }
.u-070c2b { display:flex; flex-wrap:wrap; gap:0.8rem; }
.u-10efee { max-width:900px; }
.u-13076d { text-align:center; }
.u-345ba5 { border-color:var(--c-line); }
.u-3e3b3e { overflow:hidden; }
.u-b995c8 { max-width:860px; }
.u-c88589 { display:flex; flex-wrap:wrap; gap:0.9rem; }
.u-unwrap { display:contents; }
/* == FIN UTILIDADES == */