/* Pro · el diseño.
   Blanco y negro básico con un acento (rosa bebé en la paleta original), un
   carril de iconos que hace de menú, y etiquetas/números en monoespaciada.
   Ni un color a pelo aquí: todo sale de los tokens (tokens.css), que es lo que
   hace que las paletas de tres colores funcionen.

   Regla de oro del encargo: NADA se solapa en ningún tamaño. El carril de iconos
   reserva SU carril (padding del body), así el contenido nunca queda debajo. */

/* ── Base ─────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
/* scrollbar-gutter: reserva SIEMPRE el hueco de la barra de scroll, así el ancho
   no salta cuando el contenido cruza el alto del viewport → sin titileo en la
   banda y con el centro geométrico estable. */
html { scroll-behavior: smooth; scroll-padding-top: var(--s-5); scrollbar-gutter: stable; }

body {
  margin: 0;
  font-family: var(--f-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* El carril de iconos vive abajo en móvil: se le reserva su alto. */
  padding-bottom: calc(var(--rail) + env(safe-area-inset-bottom, 0px));
}

img, video { display: block; max-width: 100%; }
svg { max-width: 100%; }
/* BLINDAJE ANTI-SOLAPAMIENTO (la regla de oro del encargo: nada se solapa en
   ningún tamaño). El culpable habitual es el `min-width:auto` por defecto de los
   hijos de rejilla/flex, que se niegan a encoger y desbordan sobre el vecino.
   Con :where() la especificidad es 0, así que cualquier min-width explícito sigue
   mandando; y con `max-width:100%` en la media, nada desborda su caja. */
:where(*) { min-width: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; }
ul { list-style: none; padding: 0; }

/* El contenedor centrado donde vive el contenido. */
.env {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* ── Piezas comunes ───────────────────────────────────────────────────────── */

/* Etiqueta pequeña en monoespaciada (el "eyebrow"/kicker). */
.kick {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tenue);
}

/* Cabecera de sección: número · kicker · título. */
.seccion { padding-block: var(--s-7); }

.cab { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-5); }
.cab__fila { display: flex; align-items: baseline; gap: var(--s-3); }
.cab__num {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--tenue);
}
.cab__titulo {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.cab__intro { color: var(--tenue); max-width: 62ch; }
.cab--centro { align-items: center; text-align: center; }
.cab--centro .cab__fila { justify-content: center; }
.cab--centro .cab__intro { margin-inline: auto; }
.titulo-centro { text-align: center; font-size: clamp(1.8rem, 3.6vw, 2.7rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.subtitulo-centro { text-align: center; font-size: 0.92rem; color: var(--tenue); margin-top: 0.35rem; }

/* Botón. El primario invierte (tinta llena, papel encima); el claro es de línea. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.8em 1.4em;
  border-radius: var(--r-btn, var(--r-pill));
  border: 1px solid var(--tinta);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn--fuerte { background: var(--tinta); color: var(--papel); }
.btn--claro  { background: transparent; color: var(--tinta); }
.btn:hover { transform: translateY(-2px); }
.btn--fuerte:hover { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
.btn--claro:hover  { background: var(--suave); }
.btn__f { font-family: var(--f-mono); }

/* Marcador cuando una sección aún no tiene contenido: enseña QUÉ va ahí. */
.vacio {
  border: 1px dashed var(--media);
  border-radius: var(--r-m);
  padding: var(--s-5);
  text-align: center;
  color: var(--tenue);
  font-family: var(--f-mono);
  font-size: 0.85rem;
  background: var(--suave);
}

/* ── El carril de iconos (nav) · una PASTILLA rosa flotante ────────────────── */
/* La barra del dibujo de Ana: una cápsula redondeada, rosa (el acento), con los
   iconos dentro. SIN línea que la separe del contenido. Reserva su sitio (padding
   del body) para no solaparse nunca.
   Móvil: pastilla horizontal abajo, centrada. Escritorio: pastilla vertical a la
   derecha, centrada en alto. */
.rail {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  background: var(--acento);
  border-radius: var(--r-pill);
  padding: 0.3rem;
  box-shadow: 0 8px 26px color-mix(in srgb, var(--tinta) 18%, transparent);
}
.rail__lista {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  max-width: 92vw;
  overflow-x: auto;
  scrollbar-width: none;
}
.rail__lista::-webkit-scrollbar { display: none; }

.rail__link {
  --d: 42px;
  position: relative;
  flex: 0 0 auto;
  width: var(--d); height: var(--d);
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: none; border: 0; padding: 0; cursor: pointer;
  color: color-mix(in srgb, var(--sobre-acento) 60%, transparent);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.rail__link svg { width: 20px; height: 20px; }
.rail__link:hover { color: var(--tinta); background: color-mix(in srgb, var(--papel) 55%, transparent); }
.rail__link.is-current { color: var(--tinta); background: var(--papel); }

/* Etiqueta emergente con el nombre de la sección (accesible y para ratón). */
.rail__link .rail__tip {
  position: absolute;
  pointer-events: none;
  white-space: nowrap;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--tinta);
  color: var(--papel);
  padding: 0.3em 0.6em;
  border-radius: var(--r-s);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  bottom: calc(100% + 8px);
}
.rail__link:hover .rail__tip { opacity: 1; transform: none; }

/* Selector de idioma · SUELTO, fuera de la pastilla, arriba a la derecha. */
.lang {
  position: fixed;
  z-index: 51;
  top: calc(0.8rem + env(safe-area-inset-top, 0px));
  right: 0.9rem;
  display: flex;
  gap: 2px;
  background: color-mix(in srgb, var(--papel) 82%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--linea);
  border-radius: var(--r-pill);
  padding: 3px;
}
.lang button {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tenue);
  background: none; border: 0; cursor: pointer;
  padding: 0.35em 0.6em;
  border-radius: var(--r-pill);
}
.lang button.is-on { color: var(--papel); background: var(--tinta); }

/* Móvil: pastilla más ajustada — iconos algo más pequeños para que el círculo
   blanco del activo no abarque más espacio del debido. */
@media (max-width: 767px) {
  .rail__link { --d: 37px; }
  .rail__link svg { width: 17px; height: 17px; }
}

@media (min-width: 768px) {
  /* Carril a la derecha: se reserva su carril en AMBOS lados (simétrico) para que
     el centro del contenido sea el centro GEOMÉTRICO de la página, no el centro
     del hueco que deja el carril. Así nada queda descentrado ni bajo la pastilla. */
  body { padding-bottom: 0; padding-inline: var(--rail); }
  /* El pie va NEGRO de lado a lado (a sangre): rompe el hueco del carril. */
  .pie { margin-inline: calc(-1 * var(--rail)); }
  .rail {
    left: auto; bottom: auto;
    right: clamp(0.6rem, 1.4vw, 1.1rem);
    top: 50%;
    transform: translateY(-50%);
    padding: 0.35rem 0.3rem;
  }
  .rail__lista { flex-direction: column; gap: 0.1rem; overflow: visible; }
  .rail__link .rail__tip { bottom: auto; right: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(4px); }
  .rail__link:hover .rail__tip { transform: translateY(-50%); }
}

/* ── HOME · hero ──────────────────────────────────────────────────────────── */
.seccion--hero { padding-top: calc(var(--s-8) + var(--s-6)); padding-bottom: var(--s-8); }   /* más aire en la cabecera */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.15fr);   /* foto ~15% mayor en desktop */
  gap: clamp(2rem, 6vw, var(--s-8));
  align-items: center;
}

.hero__media { display: flex; flex-direction: column; gap: var(--s-4); }
.hero__foto {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--papel);
  border: 1px solid var(--linea);
}
.hero__foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}
.hero__foto img.is-on { opacity: 1; }
/* Marcador cuando aún no hay foto: caja de línea discontinua con su etiqueta. */
.hero__foto--vacia {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem;
  border-style: dashed;
  color: var(--media);
}
.hero__foto--vacia svg { width: 46px; height: 46px; }
.hero__foto--vacia span { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* Etiquetas: centradas y contenidas en el ANCHO de la foto (viven en su columna),
   en rosa —línea y letra—, sin fondo. Si hay muchas, envuelven a la línea de abajo. */
.hero__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.hero__tag {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 0.42em 0.85em;
  border: 1px solid var(--acento);
  border-radius: var(--r-pill);
  color: var(--tenue);
  background: none;
}

.hero__texto { min-width: 0; }
.hero__saludo {
  display: block;
  font-size: 1rem;
  color: var(--tenue);
  margin-bottom: var(--s-2);
}
.hero__nombre {
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.hero__rol {
  margin-top: var(--s-3);
  font-family: var(--f-mono);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tenue);
}
.hero__bio { margin-top: var(--s-4); color: var(--tenue); max-width: 54ch; }
.hero__ubi {
  margin-top: var(--s-4);
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.95rem;
}
.hero__ubi svg { width: 17px; height: 17px; color: var(--acento); }
.hero__acciones { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Marquee (banda de marcas). VELOCIDAD CONSTANTE: el app.js mide, rellena y fija
   el desplazamiento (--shift = ancho de un juego) y la duración. Solo con JS. */
.marquee { display: flex; width: max-content; will-change: transform; }
/* Solo gira cuando el app.js ya midió y fijó --shift (marca `is-ready`). Así
   NUNCA arranca con el valor de reserva y por tanto nunca da el salto/reinicio. */
.has-js .marquee.is-ready { animation: marquee-x 30s linear infinite; }
@keyframes marquee-x { to { transform: translateX(calc(-1 * var(--shift, 0px))); } }
.has-js .banda:hover .marquee { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .has-js .marquee { animation: none; } .marquee { flex-wrap: wrap; width: auto; justify-content: center; } }

/* ── PHOTOS · MISMA MECÁNICA QUE VÍDEOS: ventana FIJADA en la que las fotos pasan
   de UNA EN UNA con el scroll (split editorial: foto + marca + descripción + logo
   opcional). El botón «Ver todo» las abre TODAS en rejilla. ─────────────────── */
.seccion--photos { padding-bottom: 0; }
.photos-scroll { position: relative; }
.photos-pin { overflow: hidden; display: flex; flex-direction: column; }
.has-js .seccion--photos:not(.ver-todo) .photos-pin { position: sticky; top: 0; height: 100vh; }
.photos-head { position: relative; z-index: 2; background: var(--papel); padding: var(--s-6) 0 var(--s-3); }

/* Botón pequeño «Ver todo» centrado bajo el título. */
/* display:flex + width:fit-content para que `margin:auto` SÍ lo centre bajo el
   título (con inline-flex los márgenes automáticos no centran, quedaba a la izq.). */
.ph-vertodo { margin: var(--s-4) auto 0; display: flex; width: fit-content; align-items: center; gap: 0.5em; padding: 0.5em 1em; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--tinta); background: none; border: 1px solid var(--linea); border-radius: var(--r-pill); cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.ph-vertodo:hover { border-color: var(--media); }
.ph-vertodo__ico { width: 15px; height: 15px; }
.seccion--photos.ver-todo .ph-vertodo { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }

/* Escenario: cada ficha ocupa la ventana; el app.js funde de una a la siguiente. */
.photos-stage { position: relative; flex: 1; min-height: 0; }
.ph-item { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--s-5), 5vw, var(--s-8)); align-items: center; max-width: var(--ancho); margin-inline: auto; width: 100%; padding: var(--s-4) var(--pad-x); }
.has-js .seccion--photos:not(.ver-todo) .ph-item { position: absolute; inset: 0; margin: auto; height: max-content; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.has-js .seccion--photos:not(.ver-todo) .ph-item.is-on { opacity: 1; transform: none; pointer-events: auto; }

.split-foto { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-l); overflow: hidden; background: var(--suave); border: 1px solid var(--linea); }
.has-js .seccion--photos:not(.ver-todo) .split-foto { height: min(58vh, 540px); width: auto; max-width: 100%; margin-inline: auto; }
/* Que ninguna de las dos columnas se niegue a encoger (evita el solapamiento). */
.has-js .seccion--photos:not(.ver-todo) .split-foto,
.has-js .seccion--photos:not(.ver-todo) .split-texto { min-width: 0; }
.split-foto img { width: 100%; height: 100%; object-fit: cover; }
.split-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--media); }
.split-ph svg { width: 40px; height: 40px; opacity: 0.5; }
.split-badge { position: absolute; z-index: 1; top: 0.9rem; left: 0.9rem; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; background: var(--acento); color: var(--sobre-acento); padding: 0.32em 0.7em; border-radius: var(--r-pill); }

/* Los tres espacios: logo (opcional), marca y descripción. */
.split-logo { height: 34px; width: auto; max-width: 150px; object-fit: contain; display: block; margin-bottom: var(--s-3); filter: grayscale(1) contrast(0.9); opacity: 0.85; }
.split-marca { font-size: clamp(1.5rem, 2.8vw, 2.2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.split-desc { color: var(--tenue); margin-top: 0.7rem; font-size: 1.05rem; line-height: 1.55; }
/* Vista INDIVIDUAL (foto fijada, una a una): logo + línea de descripción, SIN nombre.
   En la rejilla "Ver todo" pasa al revés (se oculta el logo y aparece el nombre). */
.has-js .seccion--photos:not(.ver-todo) .split-marca { display: none; }

/* «Ver todo» · rejilla en calma (opción Grid): tres columnas 4:5, marca + pie. */
.seccion--photos.ver-todo { padding-bottom: var(--s-7); }
.seccion--photos.ver-todo .photos-pin { position: static; height: auto; overflow: visible; }
.seccion--photos.ver-todo .photos-stage { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6) var(--s-4); width: 100%; margin: var(--s-6) auto 0; max-width: var(--ancho); padding-inline: var(--pad-x); }
.seccion--photos.ver-todo .ph-item { position: static; display: block; opacity: 1; pointer-events: auto; padding: 0; max-width: none; width: 100%; min-width: 0; transform: none; transition: none; }
.seccion--photos.ver-todo .split-foto { width: 100%; height: auto; aspect-ratio: 4 / 5; }   /* todas iguales, 4:5 */
.seccion--photos.ver-todo .split-logo { display: none; }
.seccion--photos.ver-todo .split-marca { font-size: 0.95rem; margin-top: 0.7rem; }
.seccion--photos.ver-todo .split-desc { font-size: 0.85rem; margin-top: 0.1rem; }

/* ── BRANDS · banda de logos SUELTOS en movimiento (velocidad constante) ────── */
/* Sin caja ni píldora alrededor: solo los logos, a la misma altura, separados. */
.banda { overflow: hidden; margin: var(--s-6) auto 0; max-width: var(--ancho); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.banda__titulo { text-align: center; font-size: 0.9rem; font-weight: 500; color: var(--tenue); letter-spacing: 0.01em; }
/* +10 % de separación entre logos respecto a la versión anterior. */
.banda__pista { gap: clamp(2.42rem, 6.6vw, 4.4rem); align-items: center; }
.marca { flex: 0 0 auto; display: grid; place-items: center; }
.marca img { height: 30px; width: auto; object-fit: contain; filter: grayscale(1) contrast(0.9); opacity: 0.7; transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.banda--color .marca img, .marca:hover img { filter: none; opacity: 1; }
.marca__txt { font-weight: 600; font-size: 1.05rem; color: var(--tenue); white-space: nowrap; }

/* ── VIDEOS · apertura (columnas) → coverflow con categorías ──────────────── */
.seccion--videos { padding-bottom: 0; }
.videos-scroll { position: relative; }
.videos-pin { overflow: hidden; display: flex; flex-direction: column; }
.has-js .videos-pin { position: sticky; top: 0; height: 100vh; }

/* Cabecera persistente: título + subtítulo + chips (aparecen en fase 2). */
.videos-head { position: relative; z-index: 2; background: var(--papel); padding: var(--s-6) 0 var(--s-3); }
.v-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 3vw, 1.8rem); margin-top: var(--s-4); opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); pointer-events: none; }
.videos-pin.fase2 .v-chips { opacity: 1; transform: none; pointer-events: auto; }
/* Estilo por defecto: pestañas con subrayado. El creador podrá elegir otros dos
   en el editor. El acento del activo es el ROSA BEBÉ (no el rosa oscuro). */
.v-chip { font-size: 0.95rem; font-weight: 600; color: var(--tenue); background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 0 0 0.4em; cursor: pointer; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.v-chip:hover { color: var(--tinta); }
.v-chip.is-on { color: var(--acento); border-bottom-color: var(--acento); font-weight: 700; }

/* Escenario: apertura y coverflow superpuestos, con cross-fade. */
.videos-stage { position: relative; flex: 1; min-height: 0; }

/* Fase 1 · columnas (apertura). El nº de columnas lo pone --vcols (adaptado). */
.v-open { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--vcols, 4), 1fr); gap: var(--s-4); align-items: start; width: 100%; max-width: var(--ancho); margin-inline: auto; padding: var(--s-4) var(--pad-x) 0; transition: opacity 0.4s var(--ease); }
.videos-pin.fase2 .v-open { opacity: 0; pointer-events: none; }
.reel__col { display: flex; flex-direction: column; gap: var(--s-4); will-change: transform; }

/* Fase 2 · coverflow */
.v-flow { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start; overflow: hidden; opacity: 0; transition: opacity 0.5s var(--ease); pointer-events: none; perspective: 1500px; }
.videos-pin.fase2 .v-flow { opacity: 1; pointer-events: auto; }
.v-flow__track { display: flex; align-items: center; transform-style: preserve-3d; will-change: transform; }

/* Tarjeta de vídeo (9:16). En apertura vive en la columna; en coverflow, ancho fijo. */
.v-card { position: relative; border-radius: var(--r-m); overflow: hidden; background: var(--suave); border: 1px solid var(--linea); color: inherit; }
.v-card--open { aspect-ratio: 9 / 16; }
.v-card--flow { flex: 0 0 auto; width: clamp(216px, 26.6vw, 317px); aspect-ratio: 9 / 16; margin: 0 clamp(0.5rem, 1.4vw, 1rem); will-change: transform, opacity; }
.v-card--flow[data-video] { cursor: pointer; }
.v-card img, .v-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--media); }
.clip__ph svg { width: 30px; height: 30px; opacity: 0.5; }
/* Tarjetas/fotos FANTASMA: demo del formato en el editor cuando aún no hay nada.
   Se ven como marcos vacíos punteados; nunca salen en la web publicada. */
.v-card--ghost, .ph-item--ghost .split-foto { outline: 1.5px dashed color-mix(in srgb, var(--media) 55%, transparent); outline-offset: -1.5px; }
.v-card--ghost .clip__ph svg, .ph-item--ghost .split-ph svg { opacity: 0.32; }
.clip__play { position: absolute; inset: 0; margin: auto; width: 48px; height: 48px; display: grid; place-items: center; background: color-mix(in srgb, var(--papel) 82%, transparent); border-radius: var(--r-pill); color: var(--tinta); cursor: pointer; }
.clip__play svg { width: 18px; height: 18px; margin-left: 2px; }
/* Coverflow: se OCULTA el botón de play GIGANTE nativo (se ve mal en las tarjetas
   pequeñas y no recibe el toque en las transformadas del abanico). Usamos el
   .clip__play propio, pequeño. Los controles de ABAJO se mantienen. */
.v-card--flow video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.v-card--flow video::-webkit-media-controls-overlay-play-button { display: none !important; }
.v-card--flow .clip__play { width: 44px; height: 44px; }
.v-card--flow .clip__play svg { width: 16px; height: 16px; }
.v-card.reproduciendo .clip__play, .v-card.reproduciendo .clip__meta { display: none; }

/* Etiqueta: marca (izq.) + visualizaciones con ▷ (der.), sobre degradado. */
.clip__meta { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem; padding: 0.7rem 0.75rem; background: none; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55); }
.clip__meta b { font-size: 0.85rem; font-weight: 600; }
.clip__views { display: inline-flex; align-items: center; gap: 0.3em; font-size: 0.72rem; white-space: nowrap; }
.clip__views svg { width: 11px; height: 11px; }

/* Sin JS: sin apertura ni fijado; el coverflow como fila con scroll horizontal. */
html:not(.has-js) .v-open { display: none; }
html:not(.has-js) .v-flow { position: static; opacity: 1; overflow-x: auto; padding-bottom: var(--s-4); }

/* ── MEDIA KIT (Equipo) · índice editorial: nº grande en rosa + pieza en titular */
.equipo { display: flex; flex-direction: column; gap: clamp(1.5rem, 3.5vw, var(--s-6)); }
.equipo__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1rem, 3.5vw, var(--s-6)); align-items: baseline; }
.equipo__idx { font-family: var(--f-mono); font-weight: 600; font-size: clamp(2rem, 5.5vw, 3.4rem); line-height: 0.9; color: var(--acento); }
.equipo__main { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.equipo__cat { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tenue); }
.equipo__nom { font-size: clamp(1.3rem, 2.8vw, 2rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; overflow-wrap: anywhere; }
.equipo__nota { font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.03em; color: var(--tenue); }
.equipo__desc { margin-top: 0.25rem; color: var(--tenue); font-size: 0.95rem; max-width: 60ch; overflow-wrap: anywhere; }

/* ── ABOUT · retrato + frase grande, sin cabecera de sección ───────────────── */
.sobre { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(1.75rem, 5vw, var(--s-8)); align-items: center; }
.sobre__foto { border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--linea); background: var(--suave); }
.sobre__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.sobre__ph { display: grid; place-items: center; aspect-ratio: 4 / 5; color: var(--media); }
.sobre__ph svg { width: 52px; height: 52px; opacity: 0.5; }
.sobre__panel { min-width: 0; }
.sobre__lead { font-size: clamp(1.55rem, 3.1vw, 2.35rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.16; overflow-wrap: anywhere; }
.sobre__cierre { display: block; margin-top: 0.35em; color: var(--acento); font-style: italic; font-weight: 600; }
.sobre__parrafos { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); color: var(--tenue); font-size: 1.02rem; }
.sobre__parrafos p { max-width: 60ch; overflow-wrap: anywhere; }

/* ── FEEDBACK (Reseñas) ───────────────────────────────────────────────────── */
.resenas-wrap { position: relative; }
.marca-agua {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 0.1em;
  pointer-events: none; overflow: hidden;
}
.marca-agua span {
  font-size: clamp(3rem, 13vw, 9rem); font-weight: 700; letter-spacing: -0.04em; line-height: 0.9;
  color: color-mix(in srgb, var(--tinta) 5%, transparent);
  text-transform: uppercase;
}
/* Rejilla de tarjetas: las de una misma fila igualan su alto (la más alta manda,
   stretch por defecto) y el contenido más corto se CENTRA dentro de su tarjeta. */
.resenas { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.resena {
  border-radius: var(--r-l); padding: var(--s-5); background: var(--papel);
  display: flex; flex-direction: column; justify-content: center; gap: var(--s-3);
  border: 1px solid var(--linea);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--tinta) 6%, transparent),
              0 14px 32px -16px color-mix(in srgb, var(--tinta) 32%, transparent);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.resena:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--tinta) 8%, transparent),
              0 24px 48px -18px color-mix(in srgb, var(--tinta) 40%, transparent);
}
.resena__stars { display: flex; gap: 3px; }
.resena__star { width: 15px; height: 15px; fill: var(--linea); }
.resena__star.is-on { fill: var(--acento); }
.resena blockquote { font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.resena blockquote::before { content: "“"; color: var(--tenue); font-family: var(--f-mono); margin-right: 0.05em; }
.resena__pie { display: flex; align-items: center; gap: 0.6rem; }
.resena__avatar { flex: none; width: 38px; height: 38px; border-radius: var(--r-pill); overflow: hidden; background: var(--suave); border: 1px solid var(--linea); display: grid; place-items: center; }
.resena__avatar img { width: 100%; height: 100%; object-fit: cover; }
.resena__avatar span { font-family: var(--f-mono); font-weight: 600; font-size: 0.78rem; color: var(--tenue); }
.resena__quien { min-width: 0; display: flex; flex-direction: column; }
.resena__quien b { font-weight: 600; font-size: 0.9rem; overflow-wrap: anywhere; }
.resena__rol { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.03em; color: var(--tenue); overflow-wrap: anywhere; }
.resena__marca { flex: none; margin-left: auto; padding-left: 0.5rem; display: flex; align-items: center; }
.resena__marca img { height: 20px; width: auto; max-width: 92px; object-fit: contain; }
.resena__marca-txt { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tenue); }
.resena.is-shot { padding: 0; overflow: hidden; gap: 0; }
.resena.is-shot img { width: 100%; }

/* ── RATES (Tarifas) · 3 maquetas seleccionables (cards | matrix | bands) ────
   Color: SOLO el rosa del acento (checks, insignias, destacado); las etiquetas
   pequeñas van en tinta/tenue (nada de tono café intermedio). */
.tarifas { --tn: 3; }
.t-nota { margin-top: var(--s-4); color: var(--tenue); font-size: 0.9rem; text-align: center; }

/* Plan (compartido por CARDS y MATRIX: mismo contenido, distinto envoltorio) */
.tplan { position: relative; display: flex; flex-direction: column; gap: 0.85rem; padding: clamp(1.4rem, 2.5vw, 1.9rem); background: var(--papel); }
.tplan__badge { position: absolute; top: -0.8rem; left: 50%; transform: translateX(-50%); background: var(--acento); color: var(--sobre-acento); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.35em 0.8em; border-radius: var(--r-pill); white-space: nowrap; }
.tplan__head { display: flex; flex-direction: column; gap: 0.1rem; }
.t-scope { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tenue); }
.t-name { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.t-price { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--acento); font-variant-numeric: tabular-nums; margin-top: 0.25rem; }
.t-feats { display: flex; flex-direction: column; gap: 0.5rem; }
.t-feats li { display: flex; align-items: flex-start; gap: 0.55em; font-size: 0.92rem; }
.tic { width: 1em; height: 1em; flex: none; }
.t-feats .tic { margin-top: 0.28em; color: var(--acento); width: 0.95em; height: 0.95em; }
.t-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.t-tag { font-size: 0.72rem; font-weight: 600; color: var(--tinta); border: 1px solid var(--acento); border-radius: var(--r-pill); padding: 0.3em 0.7em; }
.t-extras { display: flex; flex-direction: column; gap: 0.35rem; border-top: 1px solid var(--linea); padding-top: 0.7rem; }
.t-extras li { display: flex; align-items: center; gap: 0.5em; font-size: 0.8rem; color: var(--tenue); }
.t-extras .tic { color: var(--acento); width: 0.85em; height: 0.85em; }
.t-extras b { color: var(--tinta); font-weight: 700; margin-left: auto; }
.t-cta { align-self: stretch; justify-content: center; }
/* Pie del plan (extras + CTA) pegado ABAJO: así los CTA y los extras quedan al
   mismo nivel en todas las columnas (mismo alto por grid). */
.tplan__foot { margin-top: auto; display: flex; flex-direction: column; gap: 0.85rem; }

/* CARDS · tarjetas separadas con sombra; el destacado se llena de rosa */
.tarifas--cards { display: grid; grid-template-columns: repeat(var(--tn), minmax(0, 1fr)); gap: clamp(0.9rem, 2vw, 1.4rem); align-items: stretch; }
.tarifas--cards .tplan { border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: 0 1px 2px color-mix(in srgb, var(--tinta) 5%, transparent), 0 16px 34px -20px color-mix(in srgb, var(--tinta) 26%, transparent); }
/* Destacada: MISMO rosa claro que en matrix/bands (no el rosa fuerte). */
.tarifas--cards .tplan--pop { background: color-mix(in srgb, var(--acento) 22%, var(--papel)); border-color: var(--acento); transform: translateY(-12px); box-shadow: 0 20px 44px -18px color-mix(in srgb, var(--acento) 55%, var(--tinta)); }

/* MATRIX (por defecto) · tabla unida; columnas con filete; destacada tintada */
.tarifas--matrix { display: grid; grid-template-columns: repeat(var(--tn), minmax(0, 1fr)); border: 1px solid var(--linea); border-radius: var(--r-l); overflow: hidden; }
.tarifas--matrix .tplan { border-left: 1px solid var(--linea); }
.tarifas--matrix .tplan:first-child { border-left: none; }
.tarifas--matrix .tplan--pop { background: color-mix(in srgb, var(--acento) 20%, var(--papel)); }
/* Hueco reservado arriba en TODAS las columnas → las cabeceras (scope/nombre/
   precio) empiezan al mismo nivel, con o sin badge. El badge va absoluto. */
.tarifas--matrix .tplan { padding-top: 2.6rem; }
.tarifas--matrix .tplan__badge { position: absolute; top: var(--s-3); left: 50%; transform: translateX(-50%); }

/* BANDS · bandas anchas apiladas; precio grande en rosa a un lado */
.tarifas--bands { display: flex; flex-direction: column; gap: 1rem; }
.tband { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.7fr) auto; gap: clamp(1rem, 3vw, 2.5rem); align-items: center; padding: clamp(1.3rem, 2.5vw, 1.9rem); border: 1px solid var(--linea); border-radius: var(--r-l); background: var(--suave); }
.tband--pop { background: color-mix(in srgb, var(--acento) 24%, var(--papel)); border-color: var(--acento); }
.tband__lead { display: flex; flex-direction: column; gap: 0.1rem; }
.tband__price { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--acento); font-variant-numeric: tabular-nums; margin-top: 0.25rem; }
.tband__body { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.t-feats--inline { flex-direction: row; flex-wrap: wrap; gap: 0.5rem 1.1rem; }
.t-feats--inline li { align-items: center; }
.t-extras--chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.t-addon { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.74rem; color: var(--tenue); background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-pill); padding: 0.3em 0.7em; }
.t-addon .tic { width: 0.8em; height: 0.8em; color: var(--acento); }
.t-addon b { color: var(--tinta); font-weight: 700; }
.tband__cta { display: flex; justify-content: flex-end; }

@media (max-width: 860px) {
  .tarifas--cards, .tarifas--matrix { grid-template-columns: 1fr; }
  .tarifas--cards .tplan--pop { transform: none; }
  .tarifas--matrix { overflow: visible; }
  .tarifas--matrix .tplan { border-left: none; border-top: 1px solid var(--linea); }
  .tarifas--matrix .tplan:first-child { border-top: none; }
  .tband { grid-template-columns: 1fr; align-items: start; gap: 1.1rem; }
  .tband__cta { justify-content: flex-start; }
}

/* ── CONTACT · cierre que hace pareja con el hero (mismo dos-columnas) ─────── */
.contacto { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 6vw, var(--s-8)); align-items: center; }
.contacto__texto { min-width: 0; }
.contacto__titulo { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; }
.contacto__intro { margin-top: var(--s-3); color: var(--tenue); max-width: 46ch; }
/* El correo, protagonista: subrayado rosa que crece al pasar por encima. */
.contacto__email {
  display: inline-block;
  margin-top: var(--s-5);
  font-size: clamp(1.35rem, 3.4vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  background: linear-gradient(var(--acento), var(--acento)) 0 100% / 0% 2px no-repeat;
  padding-bottom: 3px;
  transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
}
.contacto__email:hover { background-size: 100% 2px; color: var(--tinta); }
/* Las redes, en píldoras de línea rosa (mismo lenguaje que las etiquetas). */
.contacto__redes { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pildora {
  display: inline-flex; align-items: baseline; gap: 0.5em;
  padding: 0.5em 1em;
  border: 1px solid var(--acento);
  border-radius: var(--r-pill);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pildora__red { color: var(--tenue); font-weight: 600; font-size: 0.82rem; }
.pildora__val { color: var(--tenue); font-size: 0.9rem; }
.pildora:hover { background: var(--acento); }
.pildora:hover .pildora__red, .pildora:hover .pildora__val { color: var(--sobre-acento); }
/* Retrato (o su marcador): mismo marco que el hero, del otro lado. */
.contacto__foto { aspect-ratio: 4 / 5; border-radius: var(--r-l); overflow: hidden; background: var(--papel); border: 1px solid var(--linea); }
.contacto__foto img { width: 100%; height: 100%; object-fit: cover; }
.contacto__foto--vacia { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem; border-style: dashed; color: var(--media); }
.contacto__foto--vacia svg { width: 46px; height: 46px; }
.contacto__foto--vacia span { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }

/* Cabecera de sección centrada (eyebrow pequeño + título grande), compartida. */
.sec-cab { margin-bottom: var(--s-6); }

/* ── CASOS (nueva) · tarjetas de estudio de caso ──────────────────────────── */
.casos-cab { margin-bottom: var(--s-6); }
.casos { display: flex; flex-direction: column; gap: var(--s-5); }
.caso {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);   /* la media manda su ancho por su formato */
  column-gap: clamp(1.5rem, 3.5vw, var(--s-7));  /* aire entre la media y el texto */
  align-items: center;                            /* texto centrado vertical con la media */
  border: 1px solid var(--linea);
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--papel);
}
/* La media del lateral: ancho según formato. El reel (9:16) va MÁS GRANDE porque
   suele ser el protagonista; la foto (4:5) algo menor. */
.caso__media {
  position: relative;
  background: var(--suave);
  width: auto;
  cursor: default;
}
.caso__media--reel { aspect-ratio: 9 / 16; height: min(72vh, 620px); }
.caso__media--foto { aspect-ratio: 4 / 5; height: min(56vh, 500px); }
.caso__media--play { cursor: pointer; }
.caso__media img, .caso__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.caso__media .clip__play { position: absolute; inset: 0; margin: auto; }
.caso__ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--media); }
.caso__ph svg { width: 40px; height: 40px; opacity: 0.5; }
.reproduciendo .clip__play { display: none; }   /* al reproducir, se oculta el play (tarjeta y pop-up) */
.caso__cuerpo { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.caso__top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.caso__marca { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; }
.caso__marca img { height: 23px; width: auto; filter: grayscale(1); }
.caso__tipo {
  font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.3em 0.6em; border-radius: var(--r-pill);
  background: var(--acento); color: var(--sobre-acento);
}
.caso__cat { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.05em; color: var(--tenue); }
.caso__titulo { font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: 600; letter-spacing: -0.01em; }
.caso__desc { color: var(--tenue); }
/* Deliverables en la TARJETA (antes de abrir el caso completo). */
.caso__entrega { font-size: 0.9rem; color: var(--tenue); line-height: 1.5; margin-top: 0.1rem; }
.caso__entrega-cap { font-weight: 600; color: var(--tinta); }
.caso__lugar { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--media); display: flex; gap: 0.8em; flex-wrap: wrap; margin-top: 0.6rem; }

/* Cifras COMPARTIDAS · cada una con TEXTO o con su ICONO (según .casos--text /
   .casos--icon en la sección). Se pinta la que exista. */
.cifras { display: grid; grid-template-columns: repeat(var(--cc, 3), minmax(0, 1fr)); gap: var(--s-4) var(--s-3); border-top: 1px solid var(--linea); padding-top: var(--s-4); }
.cifra { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.1rem; }
.cifra__ico { width: 20px; height: 20px; color: var(--tenue); margin-bottom: 0.25rem; }   /* SIEMPRE visible; en GRIS (no rosa) por decisión de Ana */
.cifra b { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.05; }
.cifra__lbl { font-size: 0.72rem; color: var(--tenue); }
.casos--icon .cifra__lbl { display: none; }   /* modo icono: el icono ya etiqueta, sin texto */

/* En el pop-up las cifras van como TARJETAS (aire de panel), engagement resaltado. */
.cifras--todas { border-top: 0; padding-top: 0; margin-top: var(--s-5); gap: var(--s-3); }
@media (max-width: 560px) { .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cifras--todas .cifra { background: var(--suave); border-radius: var(--r-m); padding: var(--s-3); }
.cifras--todas .cifra--eng { background: color-mix(in srgb, var(--acento) 45%, var(--papel)); }

/* Enlace "Ver caso completo" (abre el pop-up). Botón sin caja, con flecha, en el
   ROSA del sistema (--acento), como los chips activos. */
.caso__cta { margin-top: var(--s-2); align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5em; font: inherit; font-weight: 700; color: var(--acento); background: none; border: 0; padding: 0; cursor: pointer; }
.caso__cta::after { content: "→"; transition: transform var(--dur) var(--ease); }
.caso__cta:hover::after { transform: translateX(3px); }

/* Bloques del pop-up (plataformas, entregables, derechos de uso) + desgloses. */
.caso__bloque { margin-top: var(--s-4); }
.plataformas { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.plataformas span { font-size: 0.72rem; padding: 0.35em 0.75em; border: 1px solid var(--linea); border-radius: var(--r-pill); color: var(--tenue); }
.audiencia-grupo { margin-top: var(--s-4); }
.audiencia-cap { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--media); margin-bottom: 0.6rem; }
.audiencia { display: flex; flex-direction: column; gap: 0.5rem; }
.audiencia__it { display: grid; grid-template-columns: 58px 1fr 46px; gap: 0.6rem; align-items: center; }
.audiencia__et { font-size: 0.74rem; color: var(--tenue); }
.audiencia__barra { height: 7px; border-radius: var(--r-pill); background: var(--suave); overflow: hidden; }
.audiencia__barra i { display: block; height: 100%; background: var(--acento); border-radius: var(--r-pill); }
.audiencia__pc { font-size: 0.74rem; text-align: right; }

/* Pop-up de caso: la media manda formato; botón al post real si lo hay. */
.modal__panel--caso .modal__visual { background: var(--suave); }
.modal__panel--caso .modal__visual .caso__ph svg { width: 46px; height: 46px; }
/* Sin portada: en vez de un hueco gris, panel con el color de acento y el LOGO de
   la marca centrado, para que la columna izquierda nunca se vea vacía. */
.modal__visual--marca { background: color-mix(in srgb, var(--acento) 24%, var(--papel)); display: grid; place-items: center; }
.modal__marca { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; padding: var(--s-5); text-align: center; }
.modal__marca-logo { max-width: 62%; max-height: 44%; width: auto; height: auto; object-fit: contain; }
.modal__marca-txt { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; }
.caso__post { margin-top: var(--s-5); align-self: flex-start; }
/* Al reproducir, el vídeo se ve COMPLETO (sin recortar) sobre negro. */
.modal__visual.reproduciendo { background: #000; }
/* Al reproducir, el reel LLENA su hueco (cover), sin franja negra a los lados. */
.modal__visual.reproduciendo video { object-fit: cover; }
/* Reel en el pop-up: la columna izquierda se ajusta al 9:16, así el reel LLENA
   su hueco (sin franjas negras) y las cifras van al lado. Escritorio. */
@media (min-width: 768px) {
  /* El reel MANDA la altura del pop-up y su columna es 9:16 EXACTO: ancho fijo =
     alto × 9/16 (48.4vh ~ 86vh×9/16; tope 405px ~ 720px×9/16). Así el reel LLENA
     sin franjas ni huecos; las cifras scrollean al lado. */
  .modal__panel:has(.modal__visual--reel) { grid-template-columns: min(48.4vh, 405px) minmax(0, 1fr); height: min(86vh, 720px); }
  .modal__panel:has(.modal__visual--reel) .modal__cuerpo { max-height: 100%; }
  .modal__visual--reel { height: 100%; }
}

/* ── Pie · bloque en color invertido + redes en iconos ────────────────────── */
.pie { background: var(--tinta); color: var(--papel); padding: var(--s-7) 0 var(--s-5); }
.pie__grid { display: grid; grid-template-columns: 1fr auto; gap: var(--s-5); align-items: end; }
.pie__marca { font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; }
.pie__legal { color: color-mix(in srgb, var(--papel) 58%, transparent); font-size: 0.85rem; margin-top: 0.3rem; }
.pie__contacto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
.pie__email { font-weight: 600; font-size: clamp(1.1rem, 2.4vw, 1.5rem); letter-spacing: -0.01em; color: var(--papel); background: linear-gradient(var(--acento), var(--acento)) 0 100% / 0% 2px no-repeat; padding-bottom: 2px; transition: background-size var(--dur) var(--ease); }
.pie__email:hover { background-size: 100% 2px; }
.pie__acciones { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3) var(--s-4); }
.pie__redes { display: flex; align-items: center; gap: 0.45rem; }
.pie__ico { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-pill); color: var(--papel); background: color-mix(in srgb, var(--papel) 10%, transparent); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.pie__ico svg { width: 19px; height: 19px; }
.pie__ico:hover { background: var(--acento); color: var(--sobre-acento); }
.pie__cta { font-weight: 600; font-size: 0.9rem; color: var(--sobre-acento); background: var(--acento); border: 0; cursor: pointer; padding: 0.6em 1.1em; border-radius: var(--r-pill); transition: filter var(--dur) var(--ease); }
.pie__cta:hover { filter: brightness(1.06); }
.pie__base { margin-top: var(--s-6); text-align: center; }
.pie__firma { color: color-mix(in srgb, var(--papel) 55%, transparent); font-size: 0.85rem; }
.pie__firma a { color: var(--acento); }

/* ── Formulario de contacto en ventana emergente ──────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--s-4); }
.modal[hidden] { display: none; }
/* Fondo: el color de acento con efecto cristal (glass) encima. */
.modal__fondo { position: absolute; inset: 0; background: color-mix(in srgb, var(--acento) 72%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.modal__panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 960px; max-height: 92vh;
  display: grid; grid-template-columns: 1.15fr 1fr;   /* imagen más ancha, no solo alta */
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: 0 30px 80px color-mix(in srgb, var(--tinta) 26%, transparent);
}
.modal__visual { position: relative; overflow: hidden; }
.modal__visual img, .modal__visual video { width: 100%; height: 100%; object-fit: cover; }
.modal__visual--vacia { display: grid; place-items: center; background: var(--suave); color: var(--media); }
.modal__visual--vacia svg { width: 54px; height: 54px; }
.modal__cuerpo { padding: clamp(1.5rem, 3vw, 2.4rem); overflow-y: auto; min-height: 0; max-height: 92vh; }
.modal__x { position: absolute; top: 1rem; right: 1rem; z-index: 3; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-pill); border: 0; background: var(--papel); color: var(--tinta); cursor: pointer; box-shadow: 0 2px 8px color-mix(in srgb, var(--tinta) 20%, transparent); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.modal__x:hover { background: var(--acento); color: var(--sobre-acento); }
.modal__x svg { width: 18px; height: 18px; }
.modal__titulo { font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 700; letter-spacing: -0.02em; padding-right: 2.5rem; }
.modal__intro { color: var(--tenue); margin-top: 0.4rem; }
.form { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.form__fila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.campo { display: flex; flex-direction: column; gap: 0.35rem; }
.campo > span { font-size: 0.8rem; font-weight: 600; color: var(--tenue); }
.campo input, .campo textarea { font: inherit; color: var(--tinta); background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-s); padding: 0.7em 0.85em; width: 100%; transition: border-color var(--dur) var(--ease); }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--acento); }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: var(--error); }
.campo textarea { resize: vertical; min-height: 90px; }
.form__enviar { margin-top: var(--s-2); align-self: flex-start; }
.form__aviso { color: var(--error); font-size: 0.85rem; }
.form__ok { margin-top: var(--s-5); padding: var(--s-5); text-align: center; background: var(--suave); border-radius: var(--r-m); font-weight: 500; }
body.modal-abierto { overflow: hidden; }
@media (max-width: 700px) {
  /* En móvil el pop-up se apila y scrollea COMO UN TODO (media arriba + cuerpo). */
  .modal__panel { grid-template-columns: 1fr; max-height: 94vh; overflow-y: auto; }
  .modal__cuerpo { max-height: none; overflow: visible; }
  .modal__visual { max-height: 150px; }
  .modal__visual--acento { justify-content: center; min-height: 120px; }
  /* La media del caso (sobre todo un reel/vídeo) va más alta para verla bien y
     poder pulsar el play; al reproducir se AMPLÍA para verse completo. */
  .modal__panel--caso .modal__visual { max-height: 52vh; }
  .modal__panel--caso .modal__visual.reproduciendo { max-height: 82vh; }
}
/* Tablet: el pop-up de un caso con FOTO (4:5) al lado de los datos se volvía una
   tira alta y casi vacía (la columna estiraba al alto del contenido). Se apila
   (imagen arriba como banda, datos debajo, todo scrollea). El reel (9:16) sí cabe
   al lado, así que ese se deja como está. */
@media (min-width: 768px) and (max-width: 1023px) {
  .modal__panel--caso:has(.modal__visual--foto) { grid-template-columns: 1fr; height: auto; max-height: 90vh; overflow-y: auto; }
  /* Banda de la media (foto/vídeo del caso) arriba: min-height para que NO se vea
     como una tira fina cuando está vacía (marcador de marca); la foto/vídeo real
     la llena hasta 44vh. */
  .modal__panel--caso:has(.modal__visual--foto) .modal__visual { min-height: 200px; max-height: 44vh; }
  .modal__panel--caso:has(.modal__visual--foto) .modal__cuerpo { max-height: none; overflow: visible; }
}
@media (max-width: 560px) {
  .form__fila { grid-template-columns: 1fr; }
  .pie__grid { grid-template-columns: 1fr; }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
/* Tablet */
@media (max-width: 1023px) {
  .reel { grid-template-columns: repeat(3, 1fr); }
  .reel__col:nth-child(4) { display: none; }
  .resenas { grid-template-columns: repeat(2, 1fr); }
  .seccion--photos.ver-todo .photos-stage { grid-template-columns: repeat(3, 1fr); }
  /* Casos: en tablet la media (sobre todo el reel 9:16) es tan alta que, al lado,
     dejaba el texto en una columna de ~150px. Se apila desde aquí (media arriba
     centrada + cuerpo debajo), no solo en móvil. */
  .caso { grid-template-columns: 1fr; }
  .caso__media { height: min(52vh, 420px); justify-self: center; }
}
/* Tablet (768–1023): en tablet vertical las ventanas fijadas (100vh) dejaban la
   tarjeta pequeña perdida con un hueco enorme. NO se acota el stage (la apertura
   de vídeos necesita el alto completo; acotarla la rompía). En su lugar la tarjeta
   se AGRANDA para llenar el alto, así centrada apenas deja hueco:
   · Vídeos: el coverflow (fase 2) usa tarjetas más grandes. La apertura (fase 1)
     no se toca, su stage sigue a alto completo.
   · Fotos: la ficha se APILA (foto grande arriba + texto debajo, centrado); llena
     mucho mejor que las dos columnas y evita la tira estrecha. */
@media (min-width: 768px) and (max-width: 1023px) {
  .v-card--flow { width: min(48vw, 400px); }
  .ph-item { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--s-4); align-content: center; }
  .has-js .seccion--photos:not(.ver-todo) .split-foto { height: auto; width: min(52vw, 430px); }
  .has-js .seccion--photos:not(.ver-todo) .split-texto { width: min(52vw, 430px); }
  .has-js .seccion--photos:not(.ver-todo) .split-logo { margin-inline: auto; }
}
/* Tablet estrecho / móvil grande */
@media (max-width: 767px) {
  /* La holgura para la pastilla de navegación (abajo, fija) estaba como
     padding-bottom del BODY → se veía una franja BLANCA bajo el pie. Se pasa esa
     holgura al PIE como padding-bottom, así queda en NEGRO (color del pie) y la
     pastilla se apoya sobre negro, no sobre blanco. */
  body { padding-bottom: 0; }
  .pie { padding-bottom: calc(var(--s-5) + var(--rail) + env(safe-area-inset-bottom, 0px)); }
  .seccion--hero { padding-top: var(--s-7); }   /* en móvil, algo menos de aire arriba */
  .hero { grid-template-columns: 1fr; gap: var(--s-5); }
  /* Móvil: foto ~30% más pequeña y centrada, para que "Hola, soy Ana…" entre en
     el viewport sin tener que hacer scroll. width (no max-width) para que el item
     flex conserve su alto por aspect-ratio. */
  .hero__foto { aspect-ratio: 3 / 4; width: 70%; max-height: 44vh; align-self: center; }
  .sobre { grid-template-columns: 1fr; }
  .contacto { grid-template-columns: 1fr; }
  /* (El apilado de Casos se sube a ≤1023px: ver el bloque de tablet de arriba.) */
  /* Fotos (carrusel fijado): la ficha se apila — foto arriba, palabras debajo,
     centradas bajo la foto y SIN pasar de su ancho. La foto pasa a mandar por
     ANCHO (no por alto) para que el bloque de texto pueda igualarlo. */
  .ph-item { grid-template-columns: 1fr; justify-items: center; gap: var(--s-4); align-content: center; padding: var(--s-3) var(--pad-x); }
  .has-js .seccion--photos:not(.ver-todo) .split-foto { height: auto; width: min(80vw, 340px); }
  /* El bloque de texto: mismo ancho máximo que la foto, centrado. El logo va
     centrado; marca y descripción quedan a la izquierda (por defecto). */
  .has-js .seccion--photos:not(.ver-todo) .split-texto { width: min(80vw, 340px); }
  .has-js .seccion--photos:not(.ver-todo) .split-logo { margin-inline: auto; }
  .split-marca { font-size: clamp(1.35rem, 5vw, 1.8rem); }
  .split-desc { font-size: 0.98rem; }
  .seccion--photos.ver-todo .photos-stage { grid-template-columns: repeat(2, 1fr); }
}
/* Móvil */
@media (max-width: 560px) {
  .reel { grid-template-columns: repeat(2, 1fr); }
  .reel__col:nth-child(3) { display: none; }
  .resenas { grid-template-columns: 1fr; }
  .resena--movil-oculta { display: none; }   /* mobileVisible: menos scroll en el móvil */
  /* Pie centrado en móvil (una sola columna): marca, contacto y firma al centro. */
  .pie__grid { justify-items: center; text-align: center; }
  .pie__contacto { align-items: center; }
  .pie__acciones { justify-content: center; }
}