/* ============================================================
   CROWDS — Landing (reference redesign)
   Estructura base: header · hero · marquees · impacto ·
   features · soluciones (franjas) · footer.
   Imágenes = placeholders halftone/gris CLARAMENTE reemplazables.
   Tipografía: se reutiliza el Typekit del proyecto
   (snug-sharp-variable para titulares, grtsk-vf/Helvetica para texto).
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --black:  #000000;
  --cream:  #E2E3DC;   /* blanco cálido / crema */
  --text:   #E2E3DC;   /* blanco texto sobre negro */
  --pink:   #ff78c8;   /* rosado CROWDS */
  --lila:   #c38bd8;   /* lila */
  --blue:   #1598e5;   /* azul */
  --green:  #9cff7f;   /* verde */
  --gray:   #b4b4b4;   /* gris placeholder */
  --ink:    #0a0a0a;   /* texto sobre colores planos */

  --line:   rgba(226, 227, 220, 0.22);  /* borde fino sobre negro */

  --maxw:   1280px;
  --pad-x:  clamp(16px, 4vw, 56px);
  --rail-x: clamp(28px, 4vw, 48px);   /* riel izquierdo: header + bloque impacto */

  /* alturas fijas usadas para calzar hero + cinta en una pantalla completa */
  --header-h:  69px;   /* .header__inner min-height 68 + borde 1 */
  --marquee-h: 40px;   /* 20 line-height + 14 padding + 6 de trazos */

  --font-display: "snug-sharp-variable", "Arial Black", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Familias específicas por elemento */
  --font-title: "Archivo", "area-normal", "Helvetica Neue", Arial, sans-serif;   /* extrabold 800 */
  --font-black: "Archivo", "area-normal", "Helvetica Neue", Arial, sans-serif;   /* black 900 */
  --font-deck:  "area-normal", "Archivo", "Helvetica Neue", Arial, sans-serif;   /* bold 700 */
  --font-anek:  "Anek Gujarati", "anek-gujarati-variable", "Arial Narrow", sans-serif; /* wdth 125 / 700 */
}

/* ---------- Reset base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;            /* evita overflow accidental (marquees son intencionales) */
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Glow rosado arriba de la home: se pinta en el fondo de la página, detrás de la
   barra (transparente) y del hero; se desvanece al negro y hace scroll con la página. */
body.page-home {
  background-color: var(--black);
  background-image: radial-gradient(120% 100% at 50% 0%,
                     rgba(255, 120, 200, 0.24), rgba(255, 120, 200, 0) 68%);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 640px;
}

/* Peso pesado para la tipografía variable de titulares */
.display {
  font-family: var(--font-display);
  font-variation-settings: "wght" 850, "wdth" 100, "XHGT" 100;
  font-weight: 800;
}

/* ============================================================
   1 · HEADER / NAVBAR
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--black);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
/* En la home la barra arranca transparente (se ve el glow) y se vuelve negra al scrollear */
.page-home .header {
  background-color: transparent;
  border-bottom-color: transparent;
}
.header.is-solid {
  background-color: var(--black);
  border-bottom-color: var(--line);
}
.header__inner {
  /* a todo el ancho: el logo queda alineado con el borde izquierdo del
     bloque "Creamos impacto…" (mismo padding que .impact__title) */
  max-width: none;
  margin: 0;
  min-height: 68px;
  padding: 12px var(--rail-x);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
/* Logo = wordmark SVG inline (símbolo #crowds-logo), teñido con currentColor */
.header__logo {
  justify-self: start;
  display: inline-flex;
  color: var(--pink);
}
.header__logo svg {
  display: block;
  height: clamp(16px, 1.9vw, 24px);
  width: auto;
}
.header__nav {
  justify-self: center;
  display: flex;
  gap: clamp(8px, 1.4vw, 16px);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.08em;
}
/* Links = píldoras con trazo + flecha; hover rellena la píldora desde abajo */
.header__nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 7px 15px;
  border: 1px solid rgba(226, 227, 220, 0.4);
  border-radius: 999px;
  color: rgba(226, 227, 220, 0.85);
  background-image: linear-gradient(var(--cream), var(--cream));
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 0%;
  transition: background-size 0.35s cubic-bezier(0.7, 0, 0.2, 1),
              color 0.3s ease, border-color 0.3s ease;
}
.header__nav a:hover,
.header__nav a:focus-visible {
  color: var(--ink);
  border-color: var(--cream);
  background-size: 100% 100%;
  outline: none;
}
.header__nav a svg { width: 0.9em; height: 0.9em; flex: 0 0 auto; }

.header__lang {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(226, 227, 220, 0.7);
}
.header__lang a { transition: color 0.2s ease; }
.header__lang a:hover { color: var(--text); }
.header__lang a.is-active { color: var(--text); }
.header__lang .sep { opacity: 0.4; }

/* Menú hamburguesa (mobile) */
.header__burger {
  display: none;
  justify-self: end;
  appearance: none; background: none; border: 0; cursor: pointer;
  width: 40px; height: 34px; padding: 8px 4px;
  flex-direction: column; justify-content: space-between;
}
.header__burger span {
  display: block; height: 2px; width: 100%;
  background: var(--text); border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.2s ease;
}
.header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Menú desplegable mobile */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  background: var(--black);
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(14px, 2.8vw, 22px);
  /* deja aire arriba (bajo el logo/X) y reserva abajo para el selector de idioma */
  padding: 76px var(--pad-x) clamp(92px, 17vh, 140px);
  animation: fadeIn 0.28s ease both;
}
.mobile-menu[hidden] { display: none; }
/* Links del menú móvil = píldoras con trazo + flecha; hover/tap rellena la píldora */
.mobile-menu a {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  border: 1.5px solid rgba(226, 227, 220, 0.4);
  border-radius: 999px;
  padding: 0.22em 0.7em;
  font-family: var(--font-title);   /* Archivo */
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text);
  font-size: clamp(20px, 6.2vw, 40px);
  line-height: 1.1;
  white-space: nowrap;
  max-width: 100%;
  background-image: linear-gradient(var(--cream), var(--cream));
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 0%;
  transition: background-size 0.35s cubic-bezier(0.7, 0, 0.2, 1),
              color 0.3s ease, border-color 0.3s ease;
}
.mobile-menu a.is-pink { color: var(--pink); }
.mobile-menu a:hover,
.mobile-menu a:active,
.mobile-menu a:focus-visible {
  color: var(--ink);
  border-color: var(--cream);
  background-size: 100% 100%;
  outline: none;
}
.mobile-menu a svg { width: 0.68em; height: 0.68em; flex: 0 0 auto; }
.mobile-menu__lang {
  position: absolute; left: var(--pad-x); bottom: clamp(30px, 6vh, 54px);
  margin-top: 0; display: flex; align-items: center; gap: 10px;
  font-size: 16px; letter-spacing: 0.08em;
}
.mobile-menu__lang a { font-family: var(--font-body); font-size: 16px; text-transform: uppercase; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 720px) {
  .header__nav { display: none; }
  .header__lang { display: none; }
  .header__burger { display: flex; }
  /* en mobile el header vuelve al margen general de la página */
  .header__inner { grid-template-columns: 1fr auto; padding-inline: var(--pad-x); }
}

/* ============================================================
   2 · HERO
   ============================================================ */
.hero {
  background: transparent;   /* el glow rosado lo pinta el fondo de la home */
  min-height: min(80vh, 820px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(48px, 9vh, 120px) var(--pad-x) clamp(40px, 7vh, 96px);
}
/* Home: hero + cinta ocupan exactamente la primera pantalla, de modo que la
   cinta cierre al borde inferior y el bloque de impacto no asome. */
@media (min-width: 601px) {
  .page-home .hero {
    min-height: calc(100vh - var(--header-h) - var(--marquee-h));
    min-height: calc(100svh - var(--header-h) - var(--marquee-h));
  }
}
.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  color: rgba(226, 227, 220, 0.4);
  margin: 0 0 clamp(24px, 4vh, 48px);
}
.hero__title {
  font-family: var(--font-title);   /* Archivo ExtraBold */
  font-variation-settings: "wght" 800;
  font-weight: 800;
  margin: 0;
  max-width: 1000px;
  color: var(--cream);
  font-size: clamp(50px, 6.4vw, 100px);
  line-height: 0.94;
  letter-spacing: -0.02em;
}
.hero__title .hl { color: var(--pink); }
.hero__deck {
  margin: clamp(24px, 4vh, 40px) auto 0;
  max-width: 68ch;          /* ancho pensado para que la bajada caiga en 2 líneas */
  text-wrap: balance;
  font-family: var(--font-deck);   /* Area Normal Bold */
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.5;
  color: rgba(226, 227, 220, 0.72);
}
/* "CROWDS" en la bajada = wordmark rosado, a la altura de las mayúsculas */
.hero__deck-logo {
  display: inline-block;
  height: 0.82em;
  width: auto;
  aspect-ratio: 1860 / 281;
  vertical-align: baseline;
  transform: translateY(0.055em);
  margin-right: 0.14em;
  color: var(--pink);
}
/* CTA: píldora rosada plana, texto en una línea, sin flecha (ver referencia) */
.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(32px, 5vh, 52px);
  padding: 0.58em 1.3em;
  background: var(--pink);
  color: var(--ink);
  border-radius: 999px;
  font-family: var(--font-title);     /* Archivo Bold */
  font-variation-settings: "wght" 700;
  font-weight: 700;
  font-size: clamp(15px, 1.45vw, 20px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
  /* glow rosado suave alrededor de la píldora */
  box-shadow: 0 0 42px rgba(255, 120, 200, 0.38);
  transition: transform 0.25s cubic-bezier(0.7, 0, 0.2, 1), box-shadow 0.25s ease;
}
.hero__cta-text { display: block; text-align: center; }
.hero__cta:hover {
  transform: scale(1.04);
  box-shadow: 0 0 64px rgba(255, 120, 200, 0.6);
}

@media (max-width: 600px) {
  .hero { min-height: auto; padding: 40px var(--pad-x) 56px; }
  /* mobile: título más grande y bajada un poco más pequeña */
  .hero__title { font-size: clamp(34px, 10.5vw, 52px); letter-spacing: -0.03em; }
  .hero__deck { font-size: clamp(13px, 3.6vw, 15px); margin-top: clamp(18px, 3vh, 28px); }
  .hero__cta { font-size: clamp(14px, 4vw, 17px); padding: 0.56em 1.15em; }
}

/* ============================================================
   3 · MARQUEE / CINTA (base reutilizable)
   ============================================================ */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  text-transform: uppercase;
  font-family: var(--font-anek);   /* Anek Gujarati, ancho máx */
  font-variation-settings: "wdth" 125, "wght" 700;
  font-weight: 700;
  user-select: none;
  /* Tamaños normalizados para todas las cintas: mismo cuerpo, mismo alto de
     línea, mismo padding y mismo grosor de trazo. Cada cinta sólo define sus
     colores (y, si corresponde, su velocidad y separación de palabras).
     Alto resultante = 22 + 12 + 6 = 40px = --marquee-h. */
  font-size: 19px;
  line-height: 22px;
  letter-spacing: 0.05em;
  padding: 6px 0;
  border-top: var(--marquee-stroke, 3px) solid var(--marquee-line, var(--line));
  border-bottom: var(--marquee-stroke, 3px) solid var(--marquee-line, var(--line));
}
/* pista siempre llena: el JS repite y duplica el contenido; anima a -50% (sin huecos en blanco) */
.marquee__track {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  will-change: transform;
  animation: marquee var(--marquee-dur, 22s) linear infinite;
}
/* cada palabra y cada separador es un item con el mismo padding:
   el espaciado queda idéntico a lo largo de toda la cinta */
.marquee__track span { padding: 0 var(--marquee-gap, 0.95em); }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Cinta features (negra) — sólo color. El alto (--marquee-h) lo usa el hero
   de la home para que la cinta cierre justo al borde del viewport. */
.marquee--features {
  background: var(--black);
  color: var(--cream);
  --marquee-line: var(--cream);   /* trazo blanco a opacidad completa */
}
/* Cinta soluciones (blanca) — sólo color, velocidad y separación de palabras */
.marquee--solutions {
  background: #ffffff;
  color: var(--ink);
  --marquee-line: var(--black);   /* trazo negro, sólo arriba */
  border-bottom-width: 0;
  --marquee-dur: 26s;
  --marquee-gap: 1.5em;   /* palabras más separadas entre sí */
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ============================================================
   4 + 5 · BLOQUE IMPACTO + LISTA DE FEATURES
   Grilla 2×2: [titulo | img verde] / [lista | img rosa]
   ============================================================ */
.impact {
  background: var(--black);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* al llegar por ancla (#how / #solutions) la sección queda justo bajo la barra */
.impact, .solutions, .roles { scroll-margin-top: var(--header-h); }
.impact__grid {
  position: relative;        /* ancla la capa de foto "full" (imagen única) */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);   /* las líneas finas se ven a través del gap */
}
.impact__cell { background: var(--black); color: var(--cream); }

/* La celda del título va cambiando de color de fondo entre los de la paleta.
   El texto acompaña con el mismo fundido: crema sobre los fondos oscuros
   (negro, azul) y negro sobre los claros (lila, rosa, verde). */
@media (prefers-reduced-motion: no-preference) {
  .impact__grid > .impact__cell:first-child {
    animation: impactTone 30s ease-in-out infinite;
  }
}
@keyframes impactTone {
  0%,  16%  { background-color: var(--black); color: var(--cream); }
  20%, 36%  { background-color: var(--blue);  color: var(--cream); }
  40%, 56%  { background-color: var(--lila);  color: var(--ink); }
  60%, 76%  { background-color: var(--pink);  color: var(--ink); }
  80%, 96%  { background-color: var(--green); color: var(--ink); }
  100%      { background-color: var(--black); color: var(--cream); }
}

.impact__title {
  margin: 0;
  padding: var(--rail-x);
  color: inherit;   /* lo define la celda (ciclo de color) */
  font-family: var(--font-black);   /* Archivo Black */
  font-variation-settings: "wght" 900;
  font-weight: 900;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  height: 100%;
  /* reparte el texto en líneas parejas en cualquier ancho (sin viudas) */
  text-wrap: balance;
}

/* Lista de features: las filas se reparten el alto de la columna (sin hueco final) */
.impact__list { display: flex; flex-direction: column; height: 100%; }
.feat-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 auto;      /* cada fila crece para llenar la columna a la par de la imagen */
  min-height: 46px;
  padding: 8px clamp(20px, 2.5vw, 32px);
  border-bottom: 1px solid var(--line);
  color: var(--cream);
  text-transform: uppercase;
  font-family: var(--font-anek);   /* Anek Gujarati, ancho máx */
  font-variation-settings: "wdth" 125, "wght" 700;
  font-weight: 700;
  font-size: clamp(14px, 1.3vw, 19px);
  letter-spacing: 0.01em;
}
.feat-row:last-child { border-bottom: 0; }
/* hover: la barra se llena con el color de su punto y el texto pasa a negro,
   sin transición: el cambio es instantáneo */
.feat-row:hover { background: var(--dot, var(--pink)); color: var(--ink); }
.feat-row .dot {
  flex: 0 0 auto;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--dot, var(--pink));
}
/* en hover la barra ya se pinta con su color: el punto desaparece (sin dejar
   el círculo negro), manteniendo el espacio para que el texto no se mueva */
.feat-row:hover .dot { background: transparent; }

/* --------- Placeholders de imagen (REEMPLAZABLES) --------- */
/* Halftone duotono simulado con CSS: base oscura + puntos de color.
   TODO: reemplazar por <img>/<video> reales del evento. */
.ph {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background-color: #050505;
}
.ph::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--dot-color, var(--green)) 34%, transparent 36%);
  background-size: 9px 9px;
  opacity: 0.9;
  /* variación de densidad para simular una foto en duotono */
  -webkit-mask-image: radial-gradient(120% 90% at 70% 30%, #000 20%, rgba(0,0,0,0.15) 85%);
  mask-image: radial-gradient(120% 90% at 70% 30%, #000 20%, rgba(0,0,0,0.15) 85%);
}
.ph--green { --dot-color: var(--green); }
.ph--pink  { --dot-color: var(--pink); }

/* Capa de foto sobre el placeholder: aparece al hacer hover en una barra
   (el JS setea la imagen). cover = recorta al tamaño del bloque. */
.ph__photo {
  position: absolute; inset: 0; z-index: 1;
  background-color: var(--black);   /* evita ver el patrón de puntos mientras carga */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.ph__photo.on { opacity: 1; }

/* Capa de foto "full": una sola imagen ocupando el tamaño de los 2 bloques.
   Se posiciona por CSS sobre la columna derecha de la grilla (2 col · gap 1px),
   así sigue cualquier cambio de alto sin depender de medidas de JS. */
.ph__photo--full {
  position: absolute; z-index: 3;
  top: 0; bottom: 0; right: 0; left: calc(50% + 0.5px);
  background-color: var(--black);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.ph__photo--full.on { opacity: 1; }

/* Panel de texto (bloque inferior derecho): acompaña a la foto de arriba.
   Fondo = color del punto de la barra, tipografía negra. */
.ph__info {
  position: absolute; inset: 0; z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 1.1vw, 16px);
  padding: clamp(24px, 3vw, 48px);
  background: var(--info-bg, var(--pink));
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.ph__info.on { opacity: 1; }
.ph__info-title {
  text-transform: uppercase;
  font-family: var(--font-anek);   /* Anek Gujarati, ancho máx */
  font-variation-settings: "wdth" 125, "wght" 700;
  font-weight: 700;
  font-size: clamp(20px, 2.3vw, 34px);
  line-height: 1.04;
  letter-spacing: 0.01em;
  max-width: 22ch;
}
.ph__info-text {
  margin: 0;
  font-family: var(--font-deck);   /* Area Normal Bold */
  font-weight: 700;
  font-size: clamp(15px, 1.3vw, 21px);
  line-height: 1.45;
  max-width: 46ch;
}

/* Variante "split" (QR y Desafíos): el bloque derecho se divide en dos mitades,
   la imagen a la izquierda (contain: no se recorta el QR) y la info al lado. */
.ph__split {
  position: absolute; z-index: 5;
  top: 0; bottom: 0; right: 0; left: calc(50% + 0.5px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.ph__split.on { opacity: 1; }
/* variante espejada: imagen a la derecha y texto a la izquierda */
.ph__split--flip .ph__split-img  { grid-column: 2; grid-row: 1; }
.ph__split--flip .ph__split-info { grid-column: 1; grid-row: 1; }
/* variante horizontal: imagen arriba, texto abajo (dos mitades apiladas) */
.ph__split--h {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
}
.ph__split-img {
  background-color: var(--black);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;   /* llena su mitad completa; recorta lo que sobra */
}
.ph__split-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(8px, 1.4cqh, 16px);
  padding: clamp(16px, min(3vw, 4.6cqh), 48px);
  background: var(--info-bg, var(--pink));
  color: var(--ink);
}

/* Variante "recap": la foto ocupa el frame completo (sin dividir la pantalla)
   y el texto va en una tarjeta de color al centro. */
.ph__card {
  position: absolute; z-index: 4;
  top: 0; bottom: 0; right: 0; left: calc(50% + 0.5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 2.5vw, 40px);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.ph__card.on { opacity: 1; }
.ph__card-in {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.3vw, 20px);
  width: min(520px, 76%);
  padding: clamp(24px, 2.6vw, 42px);
  background: var(--info-bg, var(--pink));
  color: var(--ink);
}
.ph__card-in .ph__info-title { max-width: none; }
.ph--green.impact__cell,
.ph--pink.impact__cell { min-height: clamp(260px, 30vw, 420px); }

/* Placeholder gris plano con etiqueta IMAGEN (bloque Everything) */
.ph--gray {
  background: var(--gray);
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(240px, 32vw, 420px);
}
.ph--gray span {
  color: rgba(0, 0, 0, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 13px;
}

@media (max-width: 760px) {
  .impact__grid { grid-template-columns: 1fr; }
  /* mobile: título · UN solo bloque de imagen · lista (se oculta el 2º bloque y la capa full) */
  .impact__title { font-size: clamp(24px, 6vw, 46px); letter-spacing: -0.025em; }
  .impact .ph--pink { display: none; }
  .impact .ph__photo--full,
  .impact .ph__card,
  .impact .ph__split { display: none !important; }
}

/* Desktop: el bloque entero entra en una pantalla (alto de viewport menos la barra),
   así se puede recorrer sin que se corte arriba ni abajo en notebooks chicos.
   Los tamaños se limitan también por altura (vh) además de por ancho (vw). */
@media (min-width: 761px) {
  .impact__grid {
    height: calc(100vh - var(--header-h) - 2px);
    height: calc(100svh - var(--header-h) - 2px);
    grid-template-rows: 1fr 1fr;
    /* el bloque es el contenedor de referencia: los tamaños en cqh (1% de su
       alto) mantienen la misma proporción tipográfica en cualquier pantalla.
       Cada propiedad va con un fallback en vh para navegadores sin cq units. */
    container-type: size;
    container-name: impact;
  }
  .impact__cell { min-height: 0; overflow: hidden; }
  .ph--green.impact__cell,
  .ph--pink.impact__cell { min-height: 0; }

  .impact__title {
    padding: clamp(14px, min(4vw, 4.7vh), 48px);
    padding: clamp(14px, min(4vw, 5.2cqh), 48px);
    font-size: clamp(22px, min(5vw, 7.1vh), 72px);
    font-size: clamp(22px, min(5vw, 7.8cqh), 72px);
  }
  .impact .feat-row {
    min-height: 0;
    padding-block: clamp(3px, 0.85vh, 10px);
    padding-block: clamp(3px, 0.95cqh, 10px);
    font-size: clamp(13px, min(1.6vw, 2.28vh), 24px);
    font-size: clamp(13px, min(1.6vw, 2.5cqh), 24px);
    gap: clamp(9px, 1.6cqh, 18px);
  }
  .impact .feat-row .dot {
    width: clamp(9px, 1.45vh, 17px);
    height: clamp(9px, 1.45vh, 17px);
    width: clamp(9px, 1.6cqh, 17px);
    height: clamp(9px, 1.6cqh, 17px);
  }
  .ph__info {
    padding: clamp(16px, min(3vw, 4.2vh), 48px);
    padding: clamp(16px, min(3vw, 4.6cqh), 48px);
    gap: clamp(8px, 1.4cqh, 16px);
  }
  .ph__info-title {
    font-size: clamp(15px, min(2.3vw, 3.3vh), 34px);
    font-size: clamp(15px, min(2.3vw, 3.6cqh), 34px);
  }
  .ph__info-text {
    /* algo más grande y con tope más alto: en pantallas muy grandes ya no se pierde */
    font-size: clamp(13px, min(1.4vw, 2.05vh), 24px);
    font-size: clamp(13px, min(1.4vw, 2.25cqh), 24px);
  }
  .ph__card-in {
    padding: clamp(16px, min(2.6vw, 4.1vh), 42px);
    padding: clamp(16px, min(2.6vw, 4.5cqh), 42px);
    gap: clamp(8px, 1.4cqh, 20px);
  }
}

/* ============================================================
   9 · TODOS GANAN · beneficios por rol (pestañas)
   ============================================================ */
.roles {
  background: var(--black);
  border-bottom: 1px solid var(--line);
  padding: clamp(32px, 4vw, 64px) var(--rail-x) clamp(40px, 5vw, 80px);
}
/* Fila de pestañas: tres píldoras a lo ancho */
.roles__tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.2vw, 18px);
  margin-bottom: clamp(28px, 3.4vw, 56px);
}
.roles__tab {
  appearance: none;
  cursor: pointer;
  border: 1px solid rgba(226, 227, 220, 0.35);
  border-radius: 999px;
  padding: clamp(12px, 1.3vw, 20px) clamp(14px, 1.6vw, 24px);
  background: transparent;
  color: rgba(226, 227, 220, 0.65);
  font-family: var(--font-title);   /* Archivo Bold */
  font-variation-settings: "wght" 700;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(12px, 1.15vw, 17px);
  line-height: 1;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.roles__tab:hover { color: var(--cream); border-color: rgba(226, 227, 220, 0.7); }
.roles__tab.is-active {
  background: var(--cat, var(--lila));
  border-color: var(--cat, var(--lila));
  color: var(--ink);
}
.roles__tab:focus-visible { outline: 2px solid var(--cat, var(--pink)); outline-offset: 3px; }

/* Panel: texto a la izquierda · foto a la derecha */
.roles__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  animation: rolesIn 0.4s cubic-bezier(0.7, 0, 0.2, 1) both;
}
.roles__panel[hidden] { display: none; }
@keyframes rolesIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.roles__title {
  margin: 0 0 clamp(20px, 2.4vw, 36px);
  color: var(--cream);
  font-family: var(--font-title);   /* Archivo ExtraBold */
  font-variation-settings: "wght" 800;
  font-weight: 800;
  font-size: clamp(26px, 3.2vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
  max-width: 20ch;
}
.roles__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(8px, 0.9vw, 14px);
  color: rgba(226, 227, 220, 0.85);
  font-family: var(--font-deck);   /* Area Normal Bold */
  font-weight: 700;
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.4;
  max-width: 46ch;
}
.roles__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.75em;
}
.roles__list li::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--cat, var(--pink));
  transform: translateY(-0.15em);
}
/* Alto fijo: las tres fotos ocupan lo mismo, así el panel no salta al cambiar
   de pestaña (y una foto vertical no se dispara de alto). */
.roles__img {
  border-radius: clamp(14px, 1.6vw, 22px);
  width: 100%;
  max-width: none;
  height: clamp(280px, 32vw, 460px);
  min-height: 0;
  object-fit: cover;
  object-position: center;
  background: #111;   /* mientras carga */
}

@media (max-width: 760px) {
  .roles__panel { grid-template-columns: 1fr; }
  .roles__title { max-width: none; }
  .roles__img { height: clamp(200px, 56vw, 320px); }
}
@media (max-width: 560px) {
  .roles__tabs { grid-template-columns: 1fr; }
}

/* ============================================================
   7 · SOLUCIONES / CATEGORÍAS (franjas)
   ============================================================ */
.solutions { background: var(--black); }

.band {
  position: relative;
  /* separación entre franjas: trazo oscuro marcado (ver referencia) */
  border-bottom: var(--band-stroke, 3px) solid rgba(0, 0, 0, 0.85);
}
.solutions .band:first-child { border-top: var(--band-stroke, 3px) solid rgba(0, 0, 0, 0.85); }
/* --cat = color de la categoría: pinta la franja y el punto del botón */
.band--cultura      { --cat: var(--lila);  background: var(--cat); }
.band--deportes     { --cat: var(--blue);  background: var(--cat); }
.band--corporativo  { --cat: var(--green); background: var(--cat); }
.band--activaciones { --cat: var(--pink);  background: var(--cat); }
.band--everything   { --cat: var(--cream); background: var(--cat); }

/* Franja = grilla 2 columnas: izquierda (título + desc + ver más) · derecha (imagen).
   Retraída se ve solo el título; al pasar el cursor se abren desc/ver más e imagen. */
.band__inner {
  display: grid;
  /* la imagen ocupa algo más de la mitad derecha */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: stretch;
  color: var(--ink);
}
/* El aire vive en la columna de texto (no en .band__inner) para que la imagen
   pueda ocupar el alto completo de la franja, de trazo a trazo.
   El padding superior es mayor que el inferior: compensa ópticamente el hueco
   de las descendentes y baja un poco el título respecto de la barra de color. */
.band__left {
  min-width: 0;
  padding: var(--band-pad-t, clamp(10px, 1.15vw, 18px)) 0 clamp(3px, 0.4vw, 6px) var(--pad-x);
  transition: padding-top 0.5s cubic-bezier(0.7, 0, 0.2, 1);
}
.band:hover .band__left,
.band:focus-within .band__left { --band-pad-t: clamp(20px, 2.4vw, 38px); }
.band__label {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-anek);   /* Anek Gujarati, ancho máx */
  font-variation-settings: "wdth" 125, "wght" 800;
  font-weight: 800;
  text-transform: none;            /* "Cultura": primera mayúscula, resto minúscula */
  font-size: clamp(40px, 5.5vw, 76px);
  line-height: 0.82;
  letter-spacing: 0;
  transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}
.band:hover .band__label,
.band:focus-within .band__label { transform: translateX(10px); }

/* Bloque desc + ver más: se despliega (grid-template-rows 0fr -> 1fr) */
.band__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.7, 0, 0.2, 1);
}
.band:hover .band__reveal,
.band:focus-within .band__reveal { grid-template-rows: 1fr; }
/* El aire va en márgenes del contenido, no en padding: con grid-template-rows: 0fr
   el padding no colapsa y dejaría asomar la primera línea con la franja cerrada. */
.band__reveal-in { overflow: hidden; padding-right: clamp(24px, 4vw, 48px); }
.band__desc {
  margin: clamp(20px, 2.4vw, 38px) 0 0;
  color: var(--ink);
  font-family: var(--font-deck);   /* Area Normal Bold */
  font-weight: 700;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.5;
  max-width: 42ch;
}
/* Listado de tipos de evento por categoría */
.band__list {
  margin: clamp(20px, 2.4vw, 38px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(6px, 0.7vw, 11px);
  color: var(--ink);
  font-family: var(--font-deck);   /* Area Normal Bold */
  font-weight: 700;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.3;
  max-width: 42ch;
}
/* viñeta: punto negro, igual que el texto sobre el color de la franja */
.band__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.7em;
}
.band__list li::before {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-0.15em);
}
/* Botón: píldora negra, texto en caps y punto del color de la categoría */
.band__more {
  display: inline-flex;
  align-items: center;
  gap: 0.95em;
  margin: clamp(20px, 2.4vw, 34px) 0 clamp(16px, 2vw, 30px);
  border-radius: 999px;
  padding: 0.85em 1.3em;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-title);   /* Archivo Bold */
  font-variation-settings: "wght" 700;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1;
  transition: transform 0.25s cubic-bezier(0.7, 0, 0.2, 1);
}
.band__more::after {
  content: "";
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  background: var(--cat, var(--pink));
}
.band__inner:hover .band__more { transform: translateY(-2px); }

/* Imagen (derecha): sangra al borde derecho. Lo que se anima es el recorte,
   no la imagen: la franja se abre de arriba hacia abajo y va descubriendo la
   foto, que se mantiene fija a su tamaño final (nunca se estira ni aparece). */
.band__media {
  display: grid;
  grid-template-rows: 0fr;
  height: 100%;
  transition: grid-template-rows 0.5s cubic-bezier(0.7, 0, 0.2, 1);
}
.band:hover .band__media,
.band:focus-within .band__media { grid-template-rows: 1fr; }
.band__media-in { overflow: hidden; height: 100%; }
/* La imagen no escala con el despliegue: mantiene su alto y queda anclada
   arriba, así se va descubriendo (como una cortina) mientras baja la franja.
   max(100%, …) evita que quede hueco si la franja abierta es más alta. */
/* Alto fijo (no porcentual: dentro de la columna el % no resuelve y la imagen
   tomaría su alto intrínseco). Define el alto de la franja abierta, así nunca
   queda hueco ni se deforma la foto. */
.band__img {
  min-height: 0;
  width: 100%;
  max-width: none;
  height: clamp(440px, 33vw, 520px);
  object-fit: cover;
  object-position: center;
  background: #111;   /* mientras carga */
}

/* Dispositivos táctiles (sin hover): contenido siempre visible */
@media (hover: none) {
  .band__reveal,
  .band__media { grid-template-rows: 1fr; }
  .band__label { transform: none !important; }
  .band__left { --band-pad-t: clamp(20px, 2.4vw, 38px); }
}

@media (max-width: 760px) {
  .band__inner { grid-template-columns: 1fr; }
  .band__left { padding-bottom: 0; }
  .band__label { font-size: clamp(36px, 10vw, 60px); }
  .band__reveal-in { padding-right: var(--pad-x); }
  .band__desc, .band__list { max-width: none; }
  /* imagen full-bleed bajo el texto */
  .band__media { margin: 16px 0 0; height: auto; }
  .band__img { height: clamp(240px, 62vw, 380px); min-height: 0; }
}

/* ============================================================
   8 · FOOTER
   ============================================================ */
.footer {
  background: var(--black);
  color: var(--text);
  border-top: 1px solid var(--line);
  padding: clamp(40px, 5vw, 56px) var(--pad-x);
}
.footer__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1px 1fr 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.footer__divider { background: var(--line); align-self: stretch; }

.footer__brand-logo {
  display: block;
  color: var(--cream);
}
.footer__brand-logo svg {
  display: block;
  height: clamp(32px, 4vw, 52px);
  width: auto;
}
/* Línea legal / copyright — dentro de la grilla, ocupa todo el ancho al pie */
.footer__legal {
  grid-column: 1 / -1;
  margin-top: clamp(8px, 1.5vw, 20px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  opacity: 0.55;
}

.footer__col-title {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 16px;
  opacity: 0.7;
}
.footer__links { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.footer__links a, .footer__links span { position: relative; width: fit-content; }
.footer__links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}
.footer__links a:hover::after { transform: scaleX(1); }
/* ============================================================
   Botón flotante "volver arriba" (abajo a la derecha)
   ============================================================ */
.to-top {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 90;
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--pink);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3), 0 0 26px rgba(255, 120, 200, 0.45);
  /* oculto hasta hacer scroll */
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.3s ease,
              transform 0.3s cubic-bezier(0.7, 0, 0.2, 1),
              box-shadow 0.25s ease;
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 36px rgba(255, 120, 200, 0.65);
}
.to-top:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.to-top svg { width: 22px; height: 22px; display: block; }

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__divider { display: none; }
}
@media (max-width: 520px) {
  /* mobile: 2 columnas (marca centrada a todo el ancho, estilo encabezado) */
  .footer__grid { grid-template-columns: 1fr 1fr; gap: clamp(20px, 5vw, 30px) clamp(16px, 5vw, 28px); }
  .footer__brand { grid-column: 1 / -1; text-align: center; }
  .footer__brand-logo svg { margin: 0 auto; }
  /* reordenar: PLATAFORMA y CONTACTO lado a lado (sin hueco), luego SOLUCIONES + legal */
  .footer__grid > *:nth-child(3) { order: 1; } /* Plataforma */
  .footer__grid > *:nth-child(5) { order: 2; } /* Contacto */
  .footer__grid > *:nth-child(4) { order: 3; } /* Soluciones */
  .footer__legal {
    grid-column: auto; order: 4;
    margin-top: 0; padding-top: 0; border-top: none;
    flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px;
  }
}

/* ============================================================
   Animaciones de entrada (fade + translateY, sin librerías)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(24px); }
  .reveal.in {
    opacity: 1; transform: none;
    transition: opacity 0.7s cubic-bezier(0.7, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.7, 0, 0.2, 1);
    transition-delay: var(--reveal-delay, 0s);
  }
  /* Hero entra al cargar */
  .hero__eyebrow, .hero__title, .hero__deck, .hero__cta {
    animation: heroIn 0.8s cubic-bezier(0.7, 0, 0.2, 1) both;
  }
  .hero__title { animation-delay: 0.08s; }
  .hero__deck  { animation-delay: 0.2s; }
  .hero__cta   { animation-delay: 0.34s; }
  @keyframes heroIn {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ============================================================
   PÁGINAS DE CATEGORÍA (culture / sports / corporative / …)
   Comparten tokens y tipografías con la landing.
   El color se define por página con .theme-* (variable --cat).
   ============================================================ */
.theme-culture      { --cat: var(--lila); }
.theme-sports       { --cat: var(--blue); }
.theme-corporative  { --cat: var(--green); }
.theme-activations  { --cat: var(--pink); }
.theme-everything   { --cat: var(--cream); }

/* Hero de categoría: texto a la izquierda · imagen a la derecha, sobre color plano */
.cat-hero {
  background: var(--cat);
  color: var(--ink);
  padding: clamp(48px, 6vw, 96px) var(--pad-x) clamp(48px, 6vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.cat-hero__text { min-width: 0; }
.cat-hero__img {
  width: 100%;
  max-width: none;
  height: clamp(300px, 34vw, 520px);
  object-fit: cover;
  object-position: center;
  border-radius: clamp(14px, 1.6vw, 22px);
  background: #111;   /* mientras carga */
}
.cat-hero__name {
  margin: 0;
  font-family: var(--font-anek);
  font-variation-settings: "wdth" 125, "wght" 800;
  font-weight: 800;
  font-size: clamp(48px, 6.4vw, 120px);
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cat-hero__desc {
  margin: clamp(20px, 3vw, 40px) 0 0;
  max-width: 54ch;
  font-family: var(--font-deck);   /* Area Normal Bold */
  font-weight: 700;
  font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1.5;
  color: var(--ink);
}
.cat-hero__cta {
  margin-top: clamp(26px, 3vw, 42px);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  background: var(--ink);
  color: var(--cream);
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(12px, 1vw, 14px);
  padding: 1em 1.7em;
  transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}
.cat-hero__cta:hover { transform: translateY(-2px); }
.cat-hero__cta span { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--cat); }

/* Galería marquee (imágenes reales + tarjetas de texto) */
.cat-gallery {
  background: var(--black);
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.gtrack {
  display: flex;
  width: max-content;
  animation: gmarquee 55s linear infinite;
}
.cat-gallery:hover .gtrack { animation-play-state: paused; }
@keyframes gmarquee { to { transform: translateX(-50%); } }
.gcard {
  flex: 0 0 auto;
  margin: 0;
  width: clamp(230px, 26vw, 430px);
  height: clamp(320px, 44vw, 620px);
  position: relative;
  overflow: hidden;
}
.gcard img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  display: block;
}
.gcard::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--cat);
  mix-blend-mode: multiply;
  opacity: 0.55;
}
.gcard__cap {
  position: absolute;
  top: clamp(14px, 1.4vw, 22px);
  left: clamp(14px, 1.4vw, 22px);
  right: 14px;
  z-index: 2;
  color: var(--cream);
  text-transform: uppercase;
  font-family: var(--font-anek);
  font-variation-settings: "wdth" 125, "wght" 700;
  font-size: clamp(14px, 1.3vw, 20px);
}
.gcard--text {
  background: var(--cat);
  display: flex;
  align-items: center;
  padding: clamp(22px, 2.2vw, 44px);
}
.gcard--text::after { display: none; }
.gcard--text p {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-anek);
  font-variation-settings: "wdth" 125, "wght" 700;
  font-size: clamp(20px, 2vw, 34px);
  line-height: 1.06;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) { .gtrack { animation: none; } }

@media (max-width: 860px) {
  /* una columna: texto arriba, imagen abajo */
  .cat-hero { grid-template-columns: 1fr; }
  .cat-hero__name { font-size: clamp(44px, 9vw, 96px); }
  .cat-hero__img { height: clamp(220px, 54vw, 340px); }
}
@media (max-width: 600px) {
  .cat-hero__name { font-size: clamp(38px, 10.5vw, 84px); }
}

/* ============================================================
   PÁGINAS DE CONTENIDO: Cómo funciona / Soluciones
   ============================================================ */
.page-hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(64px, 10vw, 140px) var(--pad-x) clamp(34px, 5vw, 60px);
}
.page-hero__eyebrow {
  margin: 0 0 clamp(14px, 2vw, 22px);
  text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 12px; color: var(--pink);
}
.page-hero__title {
  margin: 0; color: var(--cream);
  font-family: var(--font-black); font-variation-settings: "wght" 900; font-weight: 900;
  font-size: clamp(48px, 8vw, 116px); line-height: 0.95; letter-spacing: -0.02em;
}
.page-hero__intro {
  margin: clamp(20px, 3vw, 32px) 0 0; max-width: 60ch;
  font-family: var(--font-deck); font-weight: 700;
  font-size: clamp(16px, 1.5vw, 21px); line-height: 1.5;
  color: rgba(226, 227, 220, 0.8);
}

.section {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--pad-x);
  border-top: 1px solid var(--line);
}
.section__head {
  margin: 0 0 clamp(22px, 3vw, 36px);
  text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 12px; color: rgba(226, 227, 220, 0.55);
}
.big-statement {
  margin: 0; color: var(--cream);
  font-family: var(--font-black); font-variation-settings: "wght" 900; font-weight: 900;
  font-size: clamp(30px, 4.6vw, 62px); line-height: 1.02; letter-spacing: -0.015em;
}

/* Pasos (3) */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin-top: clamp(28px, 4vw, 48px);
}
.step { background: var(--black); padding: clamp(22px, 2.5vw, 36px); }
.step__num {
  font-family: var(--font-anek); font-variation-settings: "wdth" 125, "wght" 800;
  font-size: clamp(28px, 3vw, 46px); color: var(--pink); line-height: 1;
}
.step__title {
  margin: 0.45em 0 0.3em; text-transform: uppercase;
  font-family: var(--font-title); font-weight: 700;
  font-size: clamp(17px, 1.5vw, 22px); color: var(--cream);
}
.step__desc {
  margin: 0; font-family: var(--font-deck); font-weight: 700;
  font-size: clamp(14px, 1.1vw, 16px); line-height: 1.45;
  color: rgba(226, 227, 220, 0.75);
}
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* Soluciones — tarjetas */
.sol-list {
  margin-top: clamp(20px, 3vw, 36px);
  display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.sol-card {
  background: var(--black);
  display: grid; grid-template-columns: minmax(220px, 1fr) 1.5fr auto;
  gap: clamp(16px, 3vw, 40px); align-items: center;
  padding: clamp(24px, 3vw, 40px) var(--pad-x);
}
.sol-card__name {
  margin: 0; min-width: 0;
  font-family: var(--font-anek); font-variation-settings: "wdth" 125, "wght" 800;
  font-weight: 800; font-size: clamp(28px, 3.1vw, 44px); line-height: 1.0; color: var(--cat);
}
.sol-card__desc {
  margin: 0; min-width: 0; font-family: var(--font-deck); font-weight: 700;
  font-size: clamp(15px, 1.2vw, 17px); line-height: 1.5; color: rgba(226, 227, 220, 0.8);
}
.sol-card__link {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.5em; white-space: nowrap;
  border: 1px solid rgba(226, 227, 220, 0.4); border-radius: 999px;
  padding: 9px 18px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(226, 227, 220, 0.9);
  background-image: linear-gradient(var(--cream), var(--cream));
  background-repeat: no-repeat; background-position: center bottom; background-size: 100% 0%;
  transition: background-size 0.35s cubic-bezier(0.7, 0, 0.2, 1), color 0.3s, border-color 0.3s;
}
.sol-card__link:hover { color: var(--ink); border-color: var(--cream); background-size: 100% 100%; }
.sol-card__link svg { width: 0.9em; height: 0.9em; flex: 0 0 auto; }
@media (max-width: 820px) {
  .sol-card { grid-template-columns: 1fr; gap: clamp(10px, 2vw, 16px); }
  .sol-card__link { justify-self: start; }
}

/* Fila CTA en páginas de contenido */
.cta-row { max-width: var(--maxw); margin: 0 auto; padding: clamp(20px, 3vw, 40px) var(--pad-x) clamp(56px, 8vw, 100px); }

/* CTA-panel: banner grande y llamativo (distinto al botón del hero) */
.cta-panel {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 3vw, 44px);
  background: var(--pink); color: var(--ink);
  border-radius: clamp(22px, 2.6vw, 34px);
  padding: clamp(28px, 4vw, 56px);
  box-shadow: 0 0 60px rgba(255, 120, 200, 0.32);
  transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1), box-shadow 0.3s ease;
}
.cta-panel:hover { transform: translateY(-3px); box-shadow: 0 0 110px rgba(255, 120, 200, 0.6); }
.cta-panel__text {
  font-family: var(--font-black); font-variation-settings: "wght" 900; font-weight: 900;
  font-size: clamp(26px, 4vw, 54px); line-height: 0.98; letter-spacing: -0.01em; max-width: 16ch;
}
.cta-panel__arrow {
  flex: 0 0 auto;
  width: clamp(54px, 6vw, 88px); height: clamp(54px, 6vw, 88px);
  border-radius: 50%; background: var(--ink); color: var(--pink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}
.cta-panel:hover .cta-panel__arrow { transform: scale(1.08) translate(2px, -2px); }
.cta-panel__arrow svg { width: 46%; height: 46%; }
/* Variante compacta (p. ej. en Soluciones) */
.cta-panel--compact {
  max-width: 620px;
  margin-left: auto;   /* centrado horizontal */
  margin-right: auto;
  padding: clamp(22px, 3vw, 38px);
  border-radius: clamp(18px, 2.2vw, 26px);
}
.cta-panel--compact .cta-panel__text { font-size: clamp(22px, 2.8vw, 38px); max-width: 12ch; }
.cta-panel--compact .cta-panel__arrow { width: clamp(46px, 5vw, 64px); height: clamp(46px, 5vw, 64px); }
@media (max-width: 600px) {
  /* variante grande (no usada ahora): apila */
  .cta-panel:not(.cta-panel--compact) { flex-direction: column; align-items: flex-start; }
  /* compacto: flecha a la derecha alineada con el texto, más acotado */
  .cta-panel--compact {
    align-items: center; gap: 16px;
    padding: clamp(18px, 5vw, 26px);
  }
  .cta-panel--compact .cta-panel__text { font-size: clamp(21px, 6.4vw, 30px); max-width: none; }
  .cta-panel--compact .cta-panel__arrow { width: clamp(44px, 11vw, 54px); height: clamp(44px, 11vw, 54px); }
}

/* Estado activo: cuando estás en esa sección, la píldora del nav queda rellena */
.header__nav a.is-current,
.mobile-menu a.is-current {
  color: var(--ink);
  border-color: var(--cream);
  background-size: 100% 100%;
}
.mobile-menu a.is-current.is-pink { color: var(--ink); }

/* ============================================================
   Aviso de cookies (sutil, abajo a la izquierda) — inyectado por JS
   ============================================================ */
.cookie-bar {
  position: fixed;
  left: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  z-index: 95;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  background: rgba(12, 12, 12, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--text);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  /* oculto hasta que el JS lo muestre */
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);
}
.cookie-bar.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.cookie-bar__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(226, 227, 220, 0.85);
}
.cookie-bar__text a { text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.cookie-bar__text a:hover { color: var(--pink); }
.cookie-bar__actions { display: flex; align-items: center; gap: 12px; }
.cookie-bar__btn {
  appearance: none; border: none; cursor: pointer;
  background: var(--pink); color: var(--ink);
  border-radius: 999px; padding: 8px 20px;
  font-family: var(--font-title); font-weight: 600; font-size: 13px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cookie-bar__btn:hover { transform: translateY(-1px); box-shadow: 0 0 24px rgba(255, 120, 200, 0.4); }
.cookie-bar__dismiss {
  appearance: none; background: none; border: none; cursor: pointer;
  color: rgba(226, 227, 220, 0.6);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
  transition: color 0.2s ease;
}
.cookie-bar__dismiss:hover { color: var(--text); }
@media (max-width: 480px) {
  /* deja espacio a la derecha para el botón "volver arriba" */
  .cookie-bar { left: 12px; bottom: 12px; max-width: calc(100vw - 90px); }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-bar { transition: opacity 0.2s ease; transform: none; }
}