/*
 * Homa Media — sitio estático.
 * Diseño heredado del sitio anterior: lienzo casi negro, rojo de la marca, texto blanco.
 * Títulos: compacta ExtraBold (PP Talisman Compact; mientras tanto, Archivo). Texto: Clash Grotesk.
 */

/* ---------- Tokens ---------- */
:root {
  --radius: 1rem;
  --background: oklch(0.13 0.005 285);
  --foreground: oklch(0.97 0.005 285);
  --card: oklch(0.17 0.006 285);
  --primary: oklch(0.62 0.24 18);
  --primary-foreground: oklch(0.98 0.005 285);
  --muted: oklch(0.22 0.008 285);
  --muted-foreground: oklch(0.68 0.01 285);
  --border: oklch(1 0 0 / 10%);
  --surface: oklch(0.155 0.005 285);
  --homa-red: oklch(0.62 0.24 18);

  /* Tres niveles de luz para el texto: el ojo sabe qué leer primero sin cambiar tamaños */
  --texto-principal: oklch(0.93 0.004 285);
  --texto-secundario: oklch(0.74 0.008 285);
  --texto-micro: oklch(0.58 0.01 285);

  /* Tipografía de marca (reglas en el bloque "Tipografía de marca", al final de este archivo) */
  --font-display: "PP Talisman", "Archivo", "Arial Narrow", sans-serif;
  --font-sans: "Clash Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ancho-display: 82%;

  --max-width: 72rem;
  --gutter: 1.25rem;
  --header-height: 5rem;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1;
  padding-top: var(--header-height);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
}

p {
  margin: 0;
}

.contenedor {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.boton--primario {
  background: var(--primary);
  color: var(--primary-foreground);
}

.boton--primario:hover {
  filter: brightness(1.06);
}

.boton--grande {
  padding: 0.75rem 1.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.boton--secundario {
  color: var(--foreground);
}

.boton--secundario:hover {
  border-color: oklch(0.62 0.24 18 / 50%);
}

.texto-rojo {
  color: var(--primary);
}

/* ---------- Encabezado ----------
   En reposo es parte del hero: sin fondo, sin bordes, sin sombra.
   Al hacer scroll (.encabezado--activo) gana presencia de forma casi imperceptible. */
.encabezado {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background-color: oklch(0.13 0.005 285 / 0);
  box-shadow: 0 18px 48px -32px oklch(0 0 0 / 0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition:
    background-color 500ms ease,
    opacity 700ms ease-in-out;
}

.encabezado--activo {
  background-color: oklch(0.13 0.005 285 / 0.88);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.encabezado__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  transition: height 500ms ease;
}

/* Al bajar se compacta apenas, sin perder la sensación de aire */
.encabezado--activo .encabezado__barra {
  height: calc(var(--header-height) - 0.75rem);
}

.encabezado__logo {
  display: block;
  flex: none;
}

.encabezado__logo img {
  height: 1.875rem;
  width: auto;
}

/* Logo a la izquierda; enlaces y acción juntos a la derecha */
.encabezado__acciones {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.encabezado__enlace,
.encabezado__cta {
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--texto-principal);
  transition: opacity 300ms ease;
}

.encabezado__enlace {
  opacity: 0.62;
}

.encabezado__enlace:hover,
.encabezado__enlace:focus-visible {
  opacity: 1;
}

.encabezado__enlace--escritorio {
  display: none;
}

/* "Hablemos": texto con el punto de la marca, no un botón de plantilla */
.encabezado__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  opacity: 0.92;
}

.encabezado__cta::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 999px;
  background: var(--primary);
}

.encabezado__cta:hover,
.encabezado__cta:focus-visible {
  opacity: 1;
}

@media (min-width: 768px) {
  .encabezado__acciones {
    gap: 2.25rem;
  }

  .encabezado__enlace--escritorio {
    display: inline;
  }

  .encabezado__logo img {
    height: 2rem;
  }
}

/* ---------- 1. Hero ----------
   Una escena en capas, como el primer plano de una pieza audiovisual:
   1) atmósfera: luz del propio reel y grano fino · 2) el reel · 3) texto e interfaz.
   En escritorio la escena queda fija mientras se hace scroll por el hero y una sola "cámara" avanza:
   zoom mínimo → el reel ocupa la pantalla → el hero se desarma y entra la siguiente sección.
   script.js escribe el avance de la cámara en --e1, --e2 y --e3 (0 a 1). */
.hero {
  --hero-video-opacity: 0.4;
  --hero-transicion: 700ms ease-in-out;
  --borde-reel: max(var(--gutter), calc((100vw - var(--max-width)) / 2 + var(--gutter)));
  --e1: 0;
  --e2: 0;
  --e3: 0;
  position: relative;
  /* El fondo sube por debajo del encabezado fijo */
  margin-top: calc(var(--header-height) * -1);
  /* Negro fotográfico: casi negro con una zona que se vuelve gris de forma casi imperceptible */
  background: radial-gradient(
    75% 65% at 66% 42%,
    oklch(0.19 0.006 285) 0%,
    oklch(0.13 0.004 285) 55%,
    oklch(0.1 0.003 285) 100%
  );
}

.hero__escena {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--header-height);
  overflow: hidden;
}

/* Capa 1 · atmósfera */
.hero__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Primer cuadro del reel: se ve de inmediato, antes que el video */
.hero__fondo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("media/hero-poster-v.jpg") center / cover no-repeat;
  opacity: var(--hero-video-opacity);
}

/* Cuando el reel ya corre, el poster se retira: si no, los dos cuadros se ven superpuestos */
.hero__fondo::before {
  transition: opacity 0.6s ease;
}

.hero--reproduciendo .hero__fondo::before {
  opacity: 0;
}

.hero__ambiente,
.hero__eco {
  display: none;
}

/* Piezas solo de escritorio: ocultas aquí, se muestran en el bloque de escritorio más abajo */
.hero__filos,
.hero__reel-play {
  display: none;
}

/* Capa 2 · el reel (en celular llena la pantalla) */
.hero__reel {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero__loop {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--hero-video-opacity);
  transition: opacity var(--hero-transicion);
}

/* Velo del texto: la imagen respira arriba y se apaga hacia el texto, abajo */
.hero__velo {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    oklch(0.13 0.005 285 / 0.05) 0%,
    oklch(0.13 0.005 285 / 0.35) 25%,
    oklch(0.13 0.005 285 / 0.7) 45%,
    oklch(0.13 0.005 285 / 0.88) 65%,
    oklch(0.13 0.005 285 / 0.98) 100%
  );
  pointer-events: none;
  transition: opacity var(--hero-transicion);
}

/* Velo de escena: se oscurece cuando el reel llena la pantalla y al salir del hero */
.hero__velo-escena {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: oklch(0.1 0.003 285);
  opacity: calc(var(--e2) * 0.5 + var(--e3) * 0.45);
  pointer-events: none;
}

/* Grano fino de película: textura fotográfica, no efecto */
.hero__grano {
  position: absolute;
  inset: -50%;
  z-index: 4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  opacity: 0.055;
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: hero-grano 0.9s steps(5) infinite;
}

@keyframes hero-grano {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* Capa 3 · texto e interfaz */
.hero__contenido {
  position: relative;
  z-index: 3;
  padding-block: 1.25rem 2.25rem;
  opacity: calc(1 - var(--e3));
  transform: translateY(calc(var(--e3) * -6vh));
}

.hero__bloque {
  max-width: 36rem;
  transition:
    opacity var(--hero-transicion),
    transform var(--hero-transicion);
}

/* Pastilla (hero y supratítulos de sección): editorial, no de interfaz */
.pastilla {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.25rem;
  padding: 0.4375rem 1rem 0.4375rem 0.75rem;
  border: 1px solid oklch(1 0 0 / 5%);
  border-radius: 999px;
  background: oklch(1 0 0 / 4%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--texto-secundario);
}

.pastilla__punto {
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 999px;
  background: var(--primary);
}

.hero__etiqueta {
  opacity: calc(1 - var(--e1) * 1.4);
}

.hero__titulo {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.01em;
  transform: translateY(calc(var(--e1) * -14px));
}

.hero__titulo-a,
.hero__titulo-b {
  display: block;
}

/* "contenido.": en el primer scroll se desplaza y crece apenas */
.hero__titulo-b {
  transform: translateX(calc(var(--e1) * 10px)) scale(calc(1 + var(--e1) * 0.04));
  transform-origin: left center;
}

.hero__palabra {
  display: inline-block;
}

.hero__subtitulo {
  max-width: 30rem;
  margin-top: 1.5rem;
  font-size: 1rem;
  line-height: 1.625;
  color: var(--texto-secundario);
}

/* Lo secundario se va cuando el reel ocupa la pantalla; el titular se queda */
.hero__secundario {
  opacity: calc(1 - var(--e2) * 1.6);
}

.hero--avanzado .hero__secundario,
.hero--avanzado .hero__ver-video {
  pointer-events: none;
}

.hero__botones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

/* Créditos (celular: en párrafo, como la versión que funcionaba) */
.hero__creditos {
  display: grid;
  gap: 0.25rem;
  margin-top: 1.75rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--texto-secundario);
}

.hero__credito-nombre {
  font-weight: 500;
  color: oklch(0.84 0.006 285);
}

/* Foto de Harry (img/harry.jpg): pequeña y redonda, al lado de su crédito */
.hero__credito:has(.hero__foto) {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  column-gap: 0.75rem;
  align-items: center;
}

.hero__credito:has(.hero__foto) > span {
  grid-column: 2;
}

.hero__foto {
  grid-row: 1 / span 3;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid oklch(1 0 0 / 18%);
  border-radius: 999px;
  object-fit: cover;
}

/* "Cómo usamos la IA →": puerta secundaria, no un CTA */
.hero__enlace-ia {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.25rem;
  color: var(--texto-principal);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: oklch(1 0 0 / 45%);
  text-underline-offset: 3px;
  transition: text-decoration-color 200ms ease;
}

.hero__enlace-flecha {
  display: inline-block;
  transition: transform 200ms ease;
}

.hero__enlace-ia:hover,
.hero__enlace-ia:focus-visible {
  text-decoration-color: currentColor;
}

.hero__enlace-ia:hover .hero__enlace-flecha,
.hero__enlace-ia:focus-visible .hero__enlace-flecha {
  transform: translateX(3px);
}

/* Franja de logos (oculta mientras no haya logos activos) */
.hero__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.hero__logos[hidden] {
  display: none;
}

.hero__logos img {
  height: 1.75rem;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.6;
}

/* "Ver el video" (celular: enlace discreto subrayado, como la versión que funcionaba) */
.hero__ver-video {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1.25rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--texto-secundario);
  cursor: pointer;
  opacity: calc(1 - var(--e1) * 1.2);
  transition: color 200ms ease;
}

.hero__ver-video:hover,
.hero__ver-video:focus-visible {
  color: var(--texto-principal);
}

.hero__ver-video-circulo {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
}

.hero__ver-video-icono {
  width: 0.75rem;
  height: 0.75rem;
}

.hero__ver-video-texto {
  position: relative;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: oklch(1 0 0 / 35%);
  text-underline-offset: 3px;
}

/* =========================================================
   Abrir el video: animación con movimiento, nunca disolvencia
   ---------------------------------------------------------
   Escritorio: las dos líneas del reel se abren hacia los bordes de la pantalla y el video
   completo se revela entre ellas (telón diagonal); la línea izquierda empuja el texto fuera
   del cuadro con desenfoque de movimiento. Al cerrar, todo regresa con un rebote suave.
   Celular: el video se revela en un círculo que crece desde donde se tocó; los textos caen
   fuera de la pantalla y al cerrar vuelven a subir con rebote.
   script.js mide la geometría (--rv-*) en el momento del clic.
   ========================================================= */
.hero {
  /* Abrir y cerrar usan la MISMA curva y la MISMA duración, en escritorio y en celular:
     lo único que cambia entre los dos es la forma (telón diagonal / círculo). Sin rebote. */
  --ease-abrir: var(--ease-revelado);
  --ease-rebote: var(--ease-revelado);
  --dur-revelado: 1000ms; /* igual a DURACION_TRANSICION en script.js */
}

/* Lo que se mueve durante el revelado va en su propia capa: sin saltos de cuadro */
.hero-video__filo,
.hero__contenido {
  will-change: transform;
}

.hero--abierto .hero__bloque,
.hero--abierto .hero__ver-video {
  pointer-events: none;
}

html.video-abierto,
html.video-abierto body {
  overflow: hidden;
}

/* El encabezado sale hacia arriba (y vuelve bajando), sin desvanecerse */
.encabezado {
  transition:
    background-color 500ms ease,
    box-shadow 500ms ease,
    backdrop-filter 500ms ease,
    -webkit-backdrop-filter 500ms ease,
    transform 700ms var(--ease-revelado);
}

html.video-abierto .encabezado {
  transform: translateY(-120%);
  pointer-events: none;
  transition-timing-function: ease, ease, ease, ease, var(--ease-revelado);
}

/* Reproductor del video completo */
.hero-video {
  position: fixed;
  inset: 0;
  z-index: 60;
}

.hero-video[hidden] {
  display: none;
}

/* Telón diagonal (escritorio): script.js mueve cuadro a cuadro, con un solo reloj, el recorte,
   las dos líneas y el texto. Así la línea es siempre el borde exacto de la ventana del video.
   Nada de transiciones CSS aquí: dos transiciones separadas se desfasan y la línea cruza el video. */
.hero-video[data-revelado="panel"] {
  transition: none;
}

/* Círculo desde el punto tocado (celular) */
.hero-video[data-revelado="circulo"] {
  clip-path: circle(0 at var(--rv-x) var(--rv-y));
  transition: clip-path var(--dur-revelado) var(--ease-revelado);
}

.hero-video[data-revelado="circulo"].hero-video--abriendo {
  clip-path: circle(var(--rv-r, 150vmax) at var(--rv-x) var(--rv-y));
  transition: clip-path var(--dur-revelado) var(--ease-abrir);
}

/* El video ya está ahí: lo revela el telón. Sin fundidos */
.hero-video__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Celular vertical: el video llena la pantalla, sin franjas negras (recorta apenas los costados) */
@media (orientation: portrait) and (max-aspect-ratio: 9 / 16) {
  .hero-video__video {
    object-fit: cover;
  }
}

/* Ambiente del reproductor: en celular el video vertical ya llena la pantalla */
.hero-video__ambiente {
  display: none;
}

@media (orientation: landscape) {
  .hero-video__ambiente {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(48px) brightness(0.45) saturate(1.2);
    transform: scale(1.15);
  }

  .hero-video__video {
    background: transparent;
  }
}

/* Las líneas del telón: viven fuera del recorte para verse completas mientras se abren */
.hero-video__filos {
  display: none;
}

.hero--revelando-panel .hero-video__filos {
  position: fixed;
  inset: 0;
  z-index: 61;
  display: block;
  pointer-events: none;
}

/* Cada línea se dibuja centrada sobre el borde del recorte (left 0; script.js pone el transform) */
.hero-video__filo {
  position: absolute;
  top: 0;
  left: -1px;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, #ff1a41 12%, #ff1a41 70%, transparent 100%);
  box-shadow:
    0 0 16px 1px oklch(0.62 0.24 18 / 0.7),
    0 0 70px 6px oklch(0.62 0.24 18 / 0.3);
  transform-origin: 0 0;
}

/* Mientras el telón está abierto, sus líneas reemplazan a los filos del reel */
.hero--revelando-panel .hero__filos {
  visibility: hidden;
}

/* Celular: los textos caen fuera de la pantalla (de abajo hacia arriba) y al cerrar suben con rebote */
@media not all and (orientation: landscape) and (min-width: 1024px) {
  .hero--abierto :is(.hero__etiqueta, .hero__titulo-a, .hero__palabra, .hero__subtitulo, .hero__botones, .hero__creditos, .hero__ver-video) {
    animation: hero-caer 700ms cubic-bezier(0.5, 0, 0.75, 0.2) forwards;
  }

  .hero--abierto .hero__creditos { animation-delay: 35ms; }
  .hero--abierto .hero__botones { animation-delay: 70ms; }
  .hero--abierto .hero__subtitulo { animation-delay: 105ms; }
  .hero--abierto .hero__palabra { animation-delay: 140ms; }
  .hero--abierto .hero__titulo-a { animation-delay: 175ms; }
  .hero--abierto .hero__etiqueta { animation-delay: 210ms; }

  .hero--volviendo :is(.hero__etiqueta, .hero__titulo-a, .hero__palabra, .hero__subtitulo, .hero__botones, .hero__creditos, .hero__ver-video) {
    animation: hero-subir 850ms var(--ease-rebote) backwards;
  }

  .hero--volviendo .hero__titulo-a { animation-delay: 30ms; }
  .hero--volviendo .hero__palabra { animation-delay: 60ms; }
  .hero--volviendo .hero__subtitulo { animation-delay: 90ms; }
  .hero--volviendo .hero__botones { animation-delay: 120ms; }
  .hero--volviendo .hero__creditos { animation-delay: 150ms; }
  .hero--volviendo .hero__ver-video { animation-delay: 180ms; }
}

@keyframes hero-caer {
  to {
    transform: translateY(75vh);
    filter: blur(8px);
  }
}

@keyframes hero-subir {
  from {
    transform: translateY(75vh);
    filter: blur(8px);
  }
}

.hero-video__cerrar {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid oklch(1 0 0 / 50%);
  border-radius: 999px;
  background: oklch(0 0 0 / 55%);
  color: #fff;
  font: inherit;
  font-size: 1.125rem;
  cursor: pointer;
}

.hero-video__cerrar:hover {
  border-color: #fff;
}

/* Indicador de carga: solo si a los 4 s el video todavía no puede reproducirse */
.hero-video__cargando {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.25rem;
  height: 2.25rem;
  margin: -1.125rem 0 0 -1.125rem;
  border: 2px solid oklch(1 0 0 / 20%);
  border-top-color: oklch(1 0 0 / 80%);
  border-radius: 999px;
  animation: hero-girar 1s linear infinite;
}

.hero-video__cargando[hidden] {
  display: none;
}

@keyframes hero-girar {
  to {
    transform: rotate(360deg);
  }
}

/* Móvil: botones apilados a ancho completo */
@media (max-width: 639px) {
  .hero__botones {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__botones .boton {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .hero__titulo {
    font-size: 3.25rem;
  }

  .hero__subtitulo {
    font-size: 1.125rem;
  }

  .pastilla {
    font-size: 0.75rem;
    letter-spacing: 0.16em;
  }
}

/* Horizontal sin espacio para el reel enmarcado (celular acostado, tablet): texto al centro, reel de fondo */
@media (orientation: landscape) {
  .hero__escena {
    align-items: center;
  }

  .hero__contenido {
    padding-block: 3rem;
  }

  .hero__velo {
    background:
      linear-gradient(180deg, oklch(0.13 0.005 285 / 0.1) 0%, oklch(0.13 0.005 285 / 0.85) 100%),
      linear-gradient(90deg, oklch(0.13 0.005 285 / 0.85) 0%, oklch(0.13 0.005 285 / 0.4) 60%, oklch(0.13 0.005 285 / 0) 100%);
  }
}

/* ---------- Celular: pie del video y cámara vertical ---------- */
@media not all and (orientation: landscape) and (min-width: 1024px) {
  /* "Ver el video" en celular: el mismo pie del escritorio (círculo del logo + qué se está viendo) */
  .hero__ver-video {
    gap: 0.75rem;
    margin-top: 1.5rem;
    text-align: left;
    color: inherit;
  }

  .hero__ver-video .hero__play {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: #ff1a41; /* rojo exacto del logo */
    color: #fff;
  }

  .hero__ver-video .hero__play svg {
    width: 0.75rem;
    height: 0.75rem;
    margin-left: 0.12rem;
  }

  .hero__ver-video .hero__reel-texto {
    display: grid;
    gap: 0.15rem;
  }

  .hero__ver-video .hero__reel-titulo {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    color: oklch(1 0 0 / 85%);
  }

  .hero__ver-video .hero__reel-meta {
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: oklch(1 0 0 / 50%);
  }
}

/* Cámara vertical (celular con movimiento): la escena queda fija mientras se baja.
   El reel se acerca y se ilumina hasta ocupar la escena, el texto secundario se va,
   el titular se queda y al final entra la siguiente sección. */
@media (prefers-reduced-motion: no-preference) {
  @media not all and (orientation: landscape) and (min-width: 1024px) {
    .hero__escena {
      position: sticky;
      top: 0;
      height: 100vh;
      height: 100svh;
      min-height: 0;
    }

    .hero__reel {
      transform: scale(calc(1 + var(--e1) * 0.06 + var(--e2) * 0.08));
      transform-origin: 50% 40%;
    }

    .hero__loop {
      opacity: calc(var(--hero-video-opacity) + var(--e2) * 0.5);
    }

    .hero__velo {
      opacity: calc(1 - var(--e2) * 0.6);
    }

    .hero__velo-escena {
      opacity: calc(var(--e3) * 0.6);
    }

    /* Lo que sigue al scroll no se retrasa con transiciones (solo al abrir el video) */
    .hero:not(.hero--abierto) :is(.hero__loop, .hero__velo) {
      transition: none;
    }
  }
}

/* ---------- Escritorio: la escena cinematográfica ---------- */
@media (orientation: landscape) and (min-width: 1024px) {
  /* Menos aire a los lados: el encabezado y el hero usan casi todo el ancho de la pantalla
     (el resto de las secciones conserva su ancho de lectura de 72rem). */
  :root {
    --borde-lateral: max(clamp(1.25rem, 6vw, 9rem), calc((100vw - 120rem) / 2));
  }

  .encabezado__barra {
    max-width: none;
    padding-inline: var(--borde-lateral);
  }

  .hero {
    --borde-reel: var(--borde-lateral);
    /* Panel del reel: sangra de arriba a abajo, inclinado 12° (tan 12° = 0.2126) */
    --reel-alto: 100svh;
    --inclinacion: calc(var(--reel-alto) * 0.2126);
    --reel-ancho: min(46vw, calc(var(--reel-alto) * 0.95));
    --reel-der: 9vw;
    --rojo: oklch(0.62 0.24 18);
    /* El reel se endereza y ocupa la pantalla al avanzar la escena */
    --camara-reel: translate(
        calc(var(--e2) * var(--llenar-x, 0px)),
        calc(-50% + var(--e2) * var(--llenar-y, 0px))
      )
      scale(calc(1 + var(--e1) * 0.05 + var(--e2) * (var(--llenar-s, 1) - 1.05)));
    /* --u: la unidad de todo el texto del hero. Vale 1rem en una pantalla alta y se reduce sola
       cuando la ventana es baja (zoom del navegador, laptop chica), para que el texto, los botones
       y "Ver el video" siempre quepan sin encimarse ni cortarse. */
    --u: clamp(0.5rem, calc((100svh - var(--header-height)) / 50), 1rem);
  }

  /* Fondo: el primer cuadro ya desenfocado (16 KB) mientras llega el ambiente en video */
  /* En escritorio el poster ya está desenfocado: se queda como base de la atmósfera */
  .hero__fondo::before,
  .hero--reproduciendo .hero__fondo::before {
    background-image: url("media/hero-poster-h.jpg");
    opacity: 0.5;
  }

  /* Rendimiento: el grano de película pasa a ser una capa fija y normal. Animado y con mezcla "overlay"
     obligaba a recomponer toda la pantalla en cada fotograma del video. */
  .hero__grano {
    inset: 0;
    opacity: 0.025;
    mix-blend-mode: normal;
    animation: none;
  }

  /* Luz ambiental: un mismo plano mantiene continuidad entre el video y el fondo */
  .hero__ambiente {
    position: absolute;
    inset: -6%;
    display: block;
    width: 112%;
    height: 112%;
    object-fit: cover;
    filter: brightness(0.48) saturate(1.1);
    opacity: 0.85;
    transform: translateY(calc(var(--e1) * -18px));
  }

  /* Eco: otra toma del reel, muy desenfocada, vive detrás del titular */
  .hero__eco {
    position: absolute;
    top: 0;
    right: -3vw;
    display: block;
    width: 24vw;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.5) saturate(1.25);
    opacity: 0.8;
    -webkit-mask-image: linear-gradient(270deg, #000 25%, transparent 100%);
    mask-image: linear-gradient(270deg, #000 25%, transparent 100%);
  }

  /* El reel: grande, sin aspecto de tarjeta. Sus bordes se funden con el fondo.
     --llenar-s/x/y los calcula script.js: escala y desplazamiento para ocupar la pantalla */
  .hero__reel {
    --inclinacion-actual: calc(var(--inclinacion) * (1 - var(--e2)));
    inset: auto;
    top: 50%;
    right: var(--reel-der);
    width: var(--reel-ancho);
    height: var(--reel-alto);
    transform-origin: center;
    will-change: transform;
    /* Panel inclinado; al hacer scroll la inclinación se endereza y el reel llena la pantalla */
    clip-path: polygon(
      var(--inclinacion-actual) 0,
      100% 0,
      calc(100% - var(--inclinacion-actual)) 100%,
      0 100%
    );
    opacity: calc(1 - var(--e3) * 0.6);
    transform: var(--camara-reel);
  }

  .hero__loop {
    opacity: 1;
    object-position: 50% 42%;
    transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Cursor sobre el reel: el video baja de opacidad para que el ▶ y las líneas tomen el protagonismo */
  .hero:has(.hero__reel-play:hover) .hero__reel .hero__loop,
  .hero:has(.hero__reel-play:focus-visible) .hero__reel .hero__loop {
    opacity: 0.3;
  }

  /* Viñeta dentro del panel: oscurece los bordes y el pie para que la imagen se vea cinematográfica */
  .hero__reel::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(95% 80% at 52% 38%, transparent 52%, oklch(0.08 0.003 285 / 0.62) 100%),
      linear-gradient(180deg, transparent 62%, oklch(0.08 0.003 285 / 0.55) 100%);
    pointer-events: none;
  }

  /* Filos de luz roja en los dos lados inclinados del panel */
  .hero__filos {
    position: absolute;
    top: 50%;
    right: var(--reel-der);
    z-index: 1;
    display: block;
    width: var(--reel-ancho);
    height: var(--reel-alto);
    transform-origin: center;
    transform: var(--camara-reel);
    opacity: calc(1 - var(--e2) * 2.2);
    pointer-events: none;
  }

  .hero__filos::before,
  .hero__filos::after {
    content: "";
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, var(--rojo) 16%, var(--rojo) 64%, transparent 100%);
    background: linear-gradient(180deg, transparent 0%, var(--rojo) 16%, var(--rojo) 64%, transparent 100%);
    opacity: 0.56;
    transform-origin: 0 0;
    transform: skewX(-12deg);
    transition: opacity 600ms ease;
  }

  .hero__filos::before {
    left: var(--inclinacion);
  }

  .hero__filos::after {
    right: 0;
  }

  /* El velo oscurece el lado del texto y el pie; el reel conserva su luz */
  .hero__velo {
    background:
      linear-gradient(
        90deg,
        oklch(0.12 0.004 285 / 0.88) 0%,
        oklch(0.12 0.004 285 / 0.5) 30%,
        oklch(0.12 0.004 285 / 0) 48%
      ),
      linear-gradient(
        270deg,
        oklch(0.1 0.003 285 / 0.92) 0%,
        oklch(0.1 0.003 285 / 0.5) 7%,
        oklch(0.1 0.003 285 / 0) 20%
      ),
      linear-gradient(180deg, oklch(0.12 0.004 285 / 0.55) 0%, oklch(0.12 0.004 285 / 0) 18%),
      linear-gradient(180deg, oklch(0.12 0.004 285 / 0) 74%, oklch(0.1 0.003 285 / 0.8) 100%);
  }

  /* Al abrir el video, la línea izquierda empuja el texto fuera del cuadro con desenfoque de movimiento
     (script.js lo mueve junto con la línea; el desenfoque depende de la velocidad) */

  /* El contenido deja de ser contenedor de posición: "Ver el video" se ancla al pie de la escena */
  .hero__contenido {
    position: static;
    max-width: none;
    padding-inline: var(--borde-lateral);
    padding-block: calc(2 * var(--u)) calc(2.5 * var(--u));
    transform: none; /* sin transform: así "Ver el video" se ancla a la escena */
  }

  .hero__bloque {
    position: relative;
    z-index: 3;
    max-width: 62rem;
    font-size: var(--u);
    transform: translateY(calc(var(--e3) * -6vh));
  }

  .hero__bloque .hero__etiqueta {
    margin-bottom: 1.667em;
    padding: 0.583em 1.333em 0.583em 1em;
    gap: 0.833em;
    font-size: 0.75em;
  }

  .hero__bloque .pastilla__punto {
    width: 0.583em;
    height: 0.583em;
  }

  /* El titular domina el cuadro */
  .hero__titulo {
    font-size: clamp(3.25rem, min(5.5vw, calc(7.4 * var(--u))), 8rem);
    line-height: 0.98;
    letter-spacing: -0.02em;
  }

  /* Dos líneas: "Tu equipo" en blanco y "de contenido." en rojo.
     El "de" del HTML (el que usa el celular) se oculta aquí y se dibuja dentro de la palabra roja;
     el texto del HTML sigue siendo "Tu equipo de contenido." para buscadores y lectores de pantalla. */
  .hero__de {
    display: none;
  }

  .hero__palabra {
    white-space: nowrap;
  }

  .hero__palabra::before {
    content: "de\00a0";
  }

  .hero__subtitulo {
    max-width: 31em;
    margin-top: 1.55em;
    font-size: 1.125em;
  }

  .hero__botones {
    gap: 1em;
    margin-top: 2em;
  }

  .hero__botones .boton {
    font-size: 0.875em;
  }

  .hero__botones .boton--grande {
    padding: 0.857em 2em;
  }

  /* Íconos de los botones (flecha y WhatsApp): ahora valen para todas las pantallas, ver el final del archivo */

  /* Créditos: una firma sobria bajo los botones, en texto corrido (sin columnas ni divisores) */
  .hero__creditos {
    display: block;
    max-width: 31em;
    margin-top: 2.25em;
    padding-top: 1.4em;
    border-top: 1px solid oklch(1 0 0 / 10%);
    font-size: 0.9375em;
    line-height: 1.65;
  }

  .hero__creditos > .hero__credito:first-child {
    margin-bottom: 0.5em;
  }

  .hero__credito:has(.hero__foto) {
    grid-template-columns: 2.5em 1fr;
    column-gap: 0.75em;
  }

  .hero__foto {
    width: 2.5em;
    height: 2.5em;
  }

  .hero__credito-nombre,
  .hero__credito-linea {
    display: inline;
  }

  /* La segunda frase y el enlace a la IA corren en la misma línea de texto */
  .hero__creditos > .hero__credito:nth-child(2),
  .hero__credito-enlace {
    display: inline;
  }

  /* "Cómo usamos la IA →": se lee como una frase más de los créditos, sin peso propio.
     Mismo tono y grosor que el texto de al lado; solo el subrayado tenue avisa que es un enlace. */
  .hero__enlace-ia {
    margin-top: 0;
    font-size: 1em;
    font-weight: 400;
    color: inherit;
    text-decoration-color: oklch(1 0 0 / 28%);
    transition:
      color 200ms ease,
      text-decoration-color 200ms ease;
  }

  .hero__enlace-ia:hover,
  .hero__enlace-ia:focus-visible {
    opacity: 1;
    color: var(--texto-principal);
    text-decoration-color: currentColor;
  }

  /* En escritorio "Ver el video" vive dentro del reel; el enlace de celular no se muestra */
  .hero__ver-video {
    display: none;
  }

  /* El reel es el botón: todo el panel inclinado se puede pulsar */
  .hero__reel-play {
    position: absolute;
    top: 50%;
    right: var(--reel-der);
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    width: var(--reel-ancho);
    height: var(--reel-alto);
    /* El pie va abajo a la izquierda, como el de una foto: no tapa la imagen ni compite con ella */
    padding: 0 0 calc(2.25 * var(--u, 1rem)) calc(2 * var(--u, 1rem));
    text-align: left;
    border: 0;
    background: none;
    color: #fff;
    font: inherit;
    cursor: pointer;
    clip-path: polygon(var(--inclinacion) 0, 100% 0, calc(100% - var(--inclinacion)) 100%, 0 100%);
    transform-origin: center;
    transform: var(--camara-reel);
    opacity: calc(1 - var(--e2) * 2.5);
  }

  /* El botón habla el idioma del logo de HOMA MEDIA: figuras planas, blanco y rojo, sin contornos.
     El círculo rojo es la "O" del logo; el ▶ es su triángulo, en blanco como la "M". */
  .hero__play {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: #ff1a41; /* rojo exacto del logo */
    color: #fff;
    transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .hero__play svg {
    width: 0.85rem;
    height: 0.85rem;
    margin-left: 0.15rem; /* centro óptico del triángulo */
    transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Pie del video: el nivel más bajo de la jerarquía del hero */
  .hero__reel-pie {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    /* Legible aunque la toma de fondo sea clara, sin cajas ni fondos */
    text-shadow:
      0 1px 3px oklch(0 0 0 / 65%),
      0 0 18px oklch(0 0 0 / 75%);
  }

  .hero__reel-texto {
    display: grid;
    gap: 0.2rem;
  }

  .hero__reel-titulo {
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.3;
    color: oklch(1 0 0 / 82%);
    transition: color 900ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Espaciado como el "M E D I A" del logo */
  .hero__reel-meta {
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: oklch(1 0 0 / 52%);
    transition: color 900ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .hero__reel-play:hover .hero__reel-titulo,
  .hero__reel-play:focus-visible .hero__reel-titulo {
    color: #fff;
  }

  .hero__reel-play:hover .hero__reel-meta,
  .hero__reel-play:focus-visible .hero__reel-meta {
    color: oklch(1 0 0 / 75%);
  }

  .hero__reel-play:hover .hero__play,
  .hero__reel-play:focus-visible .hero__play {
    transform: scale(1.08);
  }

  .hero__reel-play:hover .hero__play svg,
  .hero__reel-play:focus-visible .hero__play svg {
    transform: translateX(2px);
  }

  .hero__reel-play:focus-visible {
    outline: none;
  }

  .hero__reel-play:focus-visible .hero__play {
    outline: 2px solid #fff;
    outline-offset: 4px;
  }

  .hero--avanzado .hero__reel-play,
  .hero--abierto .hero__reel-play {
    pointer-events: none;
  }

  /* El bloque de texto se monta sobre el borde del reel: deja pasar los clics al reel,
     salvo en sus propios botones y enlaces */
  .hero__contenido,
  .hero__bloque {
    pointer-events: none;
  }

  .hero__contenido a,
  .hero__contenido button {
    pointer-events: auto;
  }

}

/* Escritorio con movimiento: el hero mide más que la pantalla y la escena queda fija mientras la cámara avanza */
@media (orientation: landscape) and (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  /* El alto del hero está en "De la escena a Historias que contamos" (al final del archivo) */
  .hero__escena {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    min-height: 0;
  }
}

/* Entrada secuencial y editorial: atmósfera → etiqueta → titular (dos tiempos) → acción → créditos */
@media (prefers-reduced-motion: no-preference) {
  .hero__fondo {
    animation: hero-luz 1.6s ease-out backwards;
  }

  .hero__reel .hero__loop {
    animation: hero-luz 1.4s 0.1s ease-out backwards;
  }

  .hero__filos {
    animation: hero-luz 1.8s 0.6s ease-out backwards;
  }

  .hero__reel-pie {
    animation: hero-aparecer 0.8s 1.2s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

  .hero__etiqueta {
    animation: hero-aparecer 0.8s 0.2s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

  .hero__titulo-a {
    animation: hero-aparecer 0.9s 0.35s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

  .hero__palabra {
    animation: hero-enfocar 1.1s 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

  .hero__subtitulo {
    animation: hero-aparecer 0.8s 0.85s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

  .hero__botones {
    animation: hero-aparecer 0.8s 1s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

  .hero__creditos {
    animation: hero-aparecer 0.8s 1.15s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

  .hero__ver-video {
    animation: hero-aparecer 0.8s 1.3s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
}

@keyframes hero-luz {
  from {
    opacity: 0;
  }
}

@keyframes hero-aparecer {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* "contenido." entra con un cambio de foco */
@keyframes hero-enfocar {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(10px);
  }
}

/* Sin movimiento: poster fijo, sin grano animado y cambios inmediatos */
@media (prefers-reduced-motion: reduce) {
  .hero {
    --dur-revelado: 0ms;
  }

  .hero-video,
  .hero-video__filo,
  .hero__contenido,
  .encabezado {
    transition: none !important;
  }

  /* Salida y regreso del texto al abrir/cerrar el video: inmediatos */
  .hero :is(.hero__etiqueta, .hero__titulo-a, .hero__palabra, .hero__subtitulo, .hero__botones, .hero__creditos, .hero__ver-video, .hero__reel-pie) {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
  }

  .hero {
    --hero-transicion: 0s linear;
  }

  .hero__grano,
  .hero-video__cargando {
    animation: none;
  }

  .encabezado {
    transition: none;
  }
}

/* ---------- Secciones ---------- */
.seccion {
  border-top: 1px solid var(--border);
  padding-block: 5rem;
}

.seccion__titulo {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.15;
}

@media (min-width: 768px) {
  .seccion {
    padding-block: 7rem;
  }

  .seccion__titulo {
    font-size: 2.25rem;
  }
}

/* ---------- 2. Clientes: historias que contamos ---------- */
/* Sin línea arriba: el hero se funde en esta sección */
.clientes {
  border-top: 0;
}

.clientes__encabezado {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.clientes__titulo {
  font-size: 1.875rem;
}

.clientes__nota {
  max-width: 20rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--texto-secundario);
}

@media (min-width: 768px) {
  .clientes__encabezado {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2.5rem;
  }

  .clientes__titulo {
    font-size: 3rem;
  }
}

/* Fila de tarjetas: scroll con snap, sin scrollbar nativa. Arranca alineada con el contenedor */
.clientes__fila {
  --borde-fila: max(var(--gutter), calc((100vw - var(--max-width)) / 2 + var(--gutter)));
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0.25rem var(--borde-fila) 0.75rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--borde-fila);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.clientes__fila::-webkit-scrollbar {
  display: none;
}

.clientes__item {
  flex: none;
  scroll-snap-align: start;
}

/* Tarjeta: ~78 % del ancho en móvil (asoma la siguiente); ~70 % del alto visible en escritorio */
.tarjeta-cliente {
  position: relative;
  display: block;
  width: 78vw;
  max-width: 22rem;
  aspect-ratio: 9 / 16;
  max-height: 72svh;
  padding: 0;
  overflow: hidden;
  border: 1px solid oklch(1 0 0 / 7%);
  border-radius: 1.75rem;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

@media (min-width: 768px) {
  .tarjeta-cliente {
    width: auto;
    height: min(70svh, 36rem);
    max-height: none;
  }
}

.tarjeta-cliente:focus-visible,
.clientes__flecha:focus-visible,
.panel-cliente__cerrar:focus-visible,
.pieza__sonido:focus-visible,
.pieza__enlace:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* Degradados de respaldo: se ven mientras no exista el video (o si falla) */
.respaldo--rojo {
  background: linear-gradient(160deg, #ed1b41 0%, #5c0a1c 100%);
}
.respaldo--azul {
  background: linear-gradient(160deg, #1f7ae0 0%, #0b1c45 100%);
}
.respaldo--morado {
  background: linear-gradient(160deg, #8b3fd9 0%, #261046 100%);
}
.respaldo--magenta {
  background: linear-gradient(160deg, #e0218a 0%, #45082c 100%);
}
.respaldo--naranja {
  background: linear-gradient(160deg, #ff7a2f 0%, #571c05 100%);
}
.respaldo--ocre {
  background: linear-gradient(160deg, #d9a33a 0%, #463007 100%);
}
.respaldo--verde {
  background: linear-gradient(160deg, #22a06b 0%, #08382a 100%);
}

.tarjeta-cliente__video,
.pieza__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Viñeta negra hacia abajo para que el texto se lea sobre cualquier cuadro */
.tarjeta-cliente__vineta {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    oklch(0 0 0 / 5%) 0%,
    oklch(0 0 0 / 20%) 45%,
    oklch(0 0 0 / 88%) 100%
  );
}

.tarjeta-cliente__info {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  padding: 1.25rem;
}

.iniciales {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.375rem;
  border: 2px solid oklch(1 0 0 / 40%);
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.tarjeta-cliente__nombre {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
}

.tarjeta-cliente__estrella {
  color: var(--primary);
}

.tarjeta-cliente__categoria {
  font-size: 0.75rem;
  line-height: 1.4;
  color: oklch(0.85 0.006 285);
}

.tarjeta-cliente__cifra,
.panel-cliente__cifra {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
}

.tarjeta-cliente__cifra[hidden],
.panel-cliente__cifra[hidden] {
  display: none;
}

/* Navegación editorial: ← línea de progreso → y contador */
.clientes__navegacion {
  margin-top: 1.25rem;
}

.clientes__controles {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.clientes__flecha {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--texto-principal);
  cursor: pointer;
  transition: opacity 0.2s;
}

.clientes__flecha svg {
  width: 1.25rem;
  height: 1.25rem;
}

.clientes__flecha:disabled {
  opacity: 0.25;
  cursor: default;
}

/* Panel del cliente: pantalla completa en móvil, centrado en escritorio */
.panel-cliente {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-cliente[hidden] {
  display: none;
}

.panel-cliente__fondo {
  position: absolute;
  inset: 0;
  background: oklch(0 0 0 / 80%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.panel-cliente__caja {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 1.25rem 0 2rem;
  background: var(--background);
}

@media (min-width: 768px) {
  .panel-cliente__caja {
    width: min(64rem, 92vw);
    height: auto;
    max-height: 90vh;
    padding: 2rem 0;
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    background: var(--card);
  }
}

html.panel-abierto,
html.panel-abierto body {
  overflow: hidden;
}

.panel-cliente__cerrar {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid oklch(1 0 0 / 25%);
  border-radius: 999px;
  background: oklch(0 0 0 / 50%);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.panel-cliente__encabezado {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 4rem 1.5rem 1.25rem;
}

.panel-cliente__encabezado .iniciales {
  margin: 0;
}

.panel-cliente__nombre {
  font-size: 1.125rem;
  line-height: 1.25;
}

.panel-cliente__categoria {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--texto-secundario);
}

.panel-cliente__proximamente {
  padding: 3rem 1.25rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  text-align: center;
  color: var(--texto-secundario);
}

/* Piezas: una a la vez, deslizando en horizontal (celular y escritorio).
   Cada pieza ocupa todo el ancho: escenario + información. Lo de afuera (navegación) no se mueve. */
.panel-cliente__piezas {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  counter-reset: pieza;
}

.panel-cliente__piezas::-webkit-scrollbar {
  display: none;
}

.pieza {
  flex: 0 0 100%;
  min-width: 0;
  padding-inline: 1.25rem;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  counter-increment: pieza;
}

@media (min-width: 768px) {
  .panel-cliente__encabezado {
    padding-inline: 2rem 4.5rem;
  }

  /* Escritorio: escenario a la izquierda, información a la derecha, siempre en el mismo lugar */
  .pieza {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(14rem, 1fr);
    grid-template-rows: 1fr auto auto auto auto auto auto auto auto auto 1fr; /* la información queda centrada junto al escenario */
    column-gap: 2.25rem;
    padding-inline: 2rem;
  }

  .pieza__media {
    grid-column: 1;
    grid-row: 1 / -1;
  }

  .pieza > :not(.pieza__media) {
    grid-column: 2;
  }

  .pieza__tipo { grid-row: 2; }
  .pieza__credito { grid-row: 3; }
  .pieza__etiqueta { grid-row: 4; }
  .pieza__titulo { grid-row: 5; }
  .pieza__indicador { grid-row: 6; }
  .pieza__contexto { grid-row: 7; }
  .pieza__comentarios-titulo { grid-row: 8; }
  .pieza__comentarios { grid-row: 9; }
  .pieza__chips { grid-row: 10; }
  .pieza__enlace { grid-row: 11; }
}

/* Cierre del panel: la intención está en su punto más alto justo después de ver */
.panel-cliente__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.25rem;
  margin: 1.75rem 1.25rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  text-align: center;
}

.panel-cliente__cta p {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
}

/* El escenario: igual para todas las piezas (tamaño, posición, radio y fondo).
   Es un contenedor de tamaño: el marco de adentro se calcula con sus unidades (cqw / cqh). */
.pieza__media {
  --ar: 0.5625; /* proporción del medio (ancho / alto); script.js la pone desde los datos o el video */
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 60svh;
  overflow: hidden;
  border-radius: 1rem;
  isolation: isolate;
  container-type: size;
}

@media (min-width: 768px) {
  .pieza__media {
    aspect-ratio: auto;
    height: min(62vh, 32rem);
    max-height: none;
  }
}

/* Fondo del escenario: el degradado de la marca, oscurecido, mientras no hay video */
.pieza__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 45%, oklch(0.12 0.004 285 / 0.35) 0%, oklch(0.08 0.003 285 / 0.82) 100%),
    linear-gradient(180deg, oklch(0 0 0 / 0.25) 0%, transparent 30%, transparent 70%, oklch(0 0 0 / 0.35) 100%);
  pointer-events: none;
}

/* Fondo ambiental: el cuadro actual del video, enorme y muy desenfocado. Así el espacio que sobra
   alrededor de un video horizontal (o vertical) se lee como dirección de arte, no como barras negras */
.pieza__ambiente {
  position: absolute;
  inset: -20%;
  z-index: 0;
  width: 140%;
  height: 140%;
  object-fit: cover;
  filter: blur(36px) saturate(1.35) brightness(0.62);
  opacity: 0;
  transition: opacity 700ms ease;
}

.pieza__media--ambiente .pieza__ambiente {
  opacity: 1;
}

/* El marco: tiene la proporción exacta del medio y es lo más grande posible dentro del escenario
   (vertical: alto completo; horizontal: ancho completo). Nunca se estira ni se recorta */
.pieza__marco {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: min(100cqw, 100cqh * var(--ar));
  height: min(100cqh, 100cqw / var(--ar));
  margin: auto;
  overflow: hidden;
  box-shadow: 0 24px 60px -24px oklch(0 0 0 / 0.8);
  transition:
    width 500ms cubic-bezier(0.22, 1, 0.36, 1),
    height 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Cuando el marco no ocupa todo el escenario, sus bordes libres se redondean apenas */
.pieza__media[data-formato="horizontal"] .pieza__marco,
.pieza__media[data-formato="cuadrado"] .pieza__marco {
  border-radius: 0.5rem;
}

.pieza__media[data-formato="vertical"] .pieza__marco {
  border-radius: 0.5rem;
}

.pieza__marco .pieza__video,
.pieza__youtube,
.pieza__portada {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

.pieza__portada {
  object-fit: cover;
}

/* Carrusel de imágenes: se desliza dentro del marco, sin arrastrar la pieza siguiente */
.pieza__carrusel {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.pieza__carrusel::-webkit-scrollbar {
  display: none;
}

.pieza__diapositiva {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.pieza__carrusel-flecha {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-top: -1.125rem;
  border: 0;
  border-radius: 999px;
  background: oklch(0 0 0 / 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: oklch(1 0 0 / 0.92);
  cursor: pointer;
  transition: opacity 200ms;
}

.pieza__carrusel-flecha svg {
  width: 1.125rem;
  height: 1.125rem;
}

.pieza__carrusel-flecha--anterior {
  left: 0.5rem;
}

.pieza__carrusel-flecha--siguiente {
  right: 0.5rem;
}

.pieza__carrusel-flecha:disabled {
  opacity: 0;
  pointer-events: none;
}

.pieza__carrusel-contador {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: oklch(0 0 0 / 0.45);
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: oklch(1 0 0 / 0.85);
}

/* Sin archivo todavía: el marco muestra el degradado de respaldo con la forma del formato */
.pieza__marco--vacio {
  background: inherit;
  box-shadow:
    0 24px 60px -24px oklch(0 0 0 / 0.8),
    inset 0 0 0 1px oklch(1 0 0 / 0.08);
}

.pieza__media:has(.pieza__marco--vacio)::before {
  background: oklch(0.08 0.003 285 / 0.72);
}

/* Etiqueta de formato: discreta, arriba a la izquierda ("9:16", "16:9") */
.pieza__formato {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 3;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  background: oklch(0 0 0 / 0.4);
  font-size: 0.625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  color: oklch(1 0 0 / 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.pieza__formato:empty {
  display: none;
}

.pieza__sonido {
  z-index: 3;
}

/* ▶ de YouTube: el círculo rojo del logo, como en el hero */
.pieza__play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: oklch(0 0 0 / 0.15);
  color: #fff;
  cursor: pointer;
}

.pieza__play svg {
  box-sizing: content-box;
  width: 1.1rem;
  height: 1.1rem;
  padding: 1.1rem 1rem 1.1rem 1.2rem;
  border-radius: 999px;
  background: #ff1a41;
  transition: transform 300ms cubic-bezier(0.34, 1.32, 0.64, 1);
}

.pieza__play:hover svg,
.pieza__play:focus-visible svg {
  transform: scale(1.08);
}

/* Navegación entre piezas: flechas y contador, fija debajo del escenario */
.panel-cliente__navegacion {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 1.25rem 1.25rem 0;
}

.panel-cliente__contador {
  flex: none;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--texto-secundario);
}

.panel-cliente__contador span {
  color: var(--texto-principal);
  font-weight: 600;
}

.panel-cliente__flecha {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid oklch(1 0 0 / 0.18);
  border-radius: 999px;
  background: transparent;
  color: var(--texto-principal);
  cursor: pointer;
  transition:
    border-color 200ms ease,
    opacity 200ms ease;
}

.panel-cliente__flecha svg {
  width: 1.125rem;
  height: 1.125rem;
}

.panel-cliente__flecha:hover:not(:disabled) {
  border-color: oklch(1 0 0 / 0.5);
}

.panel-cliente__flecha:disabled {
  opacity: 0.3;
  cursor: default;
}

@media (min-width: 768px) {
  .panel-cliente__navegacion {
    margin-inline: 2rem;
  }
}

/* Número de la pieza delante de su tipo: "01 — Creativo para Ads" */
.pieza__tipo::before {
  content: counter(pieza, decimal-leading-zero) " — ";
  color: var(--texto-secundario);
}

@media (min-width: 768px) {
  .pieza .pieza__tipo {
    margin-top: 0;
    font-size: 0.75rem;
  }

  .pieza .pieza__contexto {
    margin-top: 0.75rem;
    font-size: 1.375rem;
    line-height: 1.35;
    text-wrap: balance;
  }

  .pieza .pieza__chips {
    margin-top: 1.25rem;
  }
}

/* Sin video (archivo pendiente o pieza de YouTube): no hay sonido que activar */
.pieza__sonido[hidden] {
  display: none;
}

.pieza__sonido {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid oklch(1 0 0 / 30%);
  border-radius: 999px;
  background: oklch(0 0 0 / 55%);
  color: #fff;
  cursor: pointer;
}

.pieza__icono {
  width: 1.125rem;
  height: 1.125rem;
}

.pieza__icono--sonido,
.pieza__sonido[aria-pressed="true"] .pieza__icono--mudo {
  display: none;
}

.pieza__sonido[aria-pressed="true"] .pieza__icono--sonido {
  display: block;
}

.pieza__tipo {
  margin-top: 0.875rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--primary);
}

.pieza__contexto {
  margin-top: 0.375rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--texto-principal);
}

.pieza__comentarios-titulo {
  margin-top: 0.875rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-secundario);
}

.pieza__comentarios {
  display: grid;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.pieza__comentarios blockquote {
  margin: 0;
  padding: 0.625rem 0.75rem;
  border-left: 2px solid var(--primary);
  border-radius: 0 0.5rem 0.5rem 0;
  background: oklch(1 0 0 / 5%);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--texto-principal);
}

.pieza__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.pieza__chips li {
  padding: 0.25rem 0.625rem;
  border: 1px solid oklch(1 0 0 / 14%);
  border-radius: 999px;
  font-size: 0.6875rem;
  color: var(--texto-secundario);
}

.pieza__enlace {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--texto-principal);
}

.pieza__enlace:hover {
  color: #fff;
}

/* ---------- Pie de página ---------- */
.pie {
  border-top: 1px solid var(--border);
}

.pie__barra {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 1.5rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  text-align: center;
}

.pie__paginas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1rem;
}

.pie__paginas a {
  color: var(--texto-secundario);
  text-decoration: none;
}

.pie__paginas a:hover {
  color: var(--texto-principal);
}

.pie a:hover {
  color: var(--foreground);
}

@media (min-width: 768px) {
  .pie__barra {
    flex-direction: row;
    text-align: left;
  }
}

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

/* =====================================================================
   Párrafo de apoyo del hero (debajo del titular)
   Antes: Light 300 + gris medio + letras sin aire + un solo bloque de tres líneas parejas.
   Ahora: peso Regular, color más claro, un poco de aire entre letras, dos frases separadas
   y los datos concretos (qué entregamos y cómo se contrata) en blanco y peso Medium,
   para que se pueda leer de un vistazo. Las palabras son las mismas.
   ===================================================================== */
.hero__subtitulo {
  color: oklch(1 0 0 / 80%);
  letter-spacing: 0.012em;
  text-wrap: pretty;
  text-shadow: 0 1px 14px oklch(0.13 0.005 285 / 0.75);
}

.hero__subtitulo strong {
  font-weight: 500;
  color: oklch(0.99 0.002 285);
}

/* "por proyecto o mes a mes" es una sola idea: no se parte entre renglones */
.hero__sub-junto {
  white-space: nowrap;
}

@media (orientation: landscape) and (min-width: 1024px) {
  .hero__subtitulo {
    max-width: 29em;
    font-size: 1.2em;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.015em;
  }

  .hero__sub-linea {
    display: block;
    text-wrap: balance;
  }

  .hero__sub-linea + .hero__sub-linea {
    margin-top: 0.6em;
  }
}

/* =====================================================================
   Jerarquía del hero · control "Ver el video"
   Es el nivel más bajo del hero: después del titular, el subtítulo, los botones y los créditos.
   El rojo se reserva para el botón principal y la palabra clave del titular; aquí aparece solo
   cuando alguien se acerca (cursor o foco). En reposo: círculo pequeño, blanco translúcido,
   texto más chico y apagado.
   ===================================================================== */
@media (orientation: landscape) and (min-width: 1024px) {
  .hero__reel-pie {
    opacity: 0.8;
    transition: opacity 600ms ease;
  }

  .hero__reel-play:hover .hero__reel-pie,
  .hero__reel-play:focus-visible .hero__reel-pie {
    opacity: 1;
  }

  .hero__play {
    width: 1.75rem;
    height: 1.75rem;
    background: oklch(1 0 0 / 14%);
    color: oklch(1 0 0 / 85%);
    transition:
      transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
      background-color 600ms ease,
      color 600ms ease;
  }

  .hero__play svg {
    width: 0.6rem;
    height: 0.6rem;
    margin-left: 0.1rem;
  }

  .hero__reel-play:hover .hero__play,
  .hero__reel-play:focus-visible .hero__play {
    background: #ff1a41;
    color: #fff;
  }

  .hero__reel-titulo {
    font-size: 0.8125rem;
    color: oklch(1 0 0 / 68%);
  }

  .hero__reel-meta {
    color: oklch(1 0 0 / 42%);
  }
}

@media not all and (orientation: landscape) and (min-width: 1024px) {
  .hero__ver-video .hero__play {
    width: 1.75rem;
    height: 1.75rem;
    background: oklch(1 0 0 / 14%);
    color: oklch(1 0 0 / 85%);
    transition:
      background-color 400ms ease,
      color 400ms ease;
  }

  .hero__ver-video .hero__play svg {
    width: 0.6rem;
    height: 0.6rem;
    margin-left: 0.1rem;
  }

  .hero__ver-video:active .hero__play {
    background: #ff1a41;
    color: #fff;
  }

  .hero__ver-video .hero__reel-titulo {
    font-size: 0.8125rem;
    color: oklch(1 0 0 / 68%);
  }

  .hero__ver-video .hero__reel-meta {
    color: oklch(1 0 0 / 42%);
  }
}

/* =====================================================================
   Tipografía de marca
   Display · PP Talisman Compact ExtraBold (licencia de pago). Mientras no esté cargada,
            el sitio usa Archivo ExtraBold semicondensada (Google Fonts, gratis).
   Texto   · Clash Grotesk (Fontshare, gratis): Light para leer, Medium y Semibold para énfasis.
            Extralight (200) solo en tamaños grandes: en pantalla oscura se pierde bajo ~20 px.
   Esta fuente es mucho más estrecha que la anterior, así que los títulos suben de tamaño
   para conservar su presencia. Todo el bloque vive aquí para poder ajustarlo en un solo lugar.
   ===================================================================== */
h1,
h2,
h3 {
  font-stretch: var(--ancho-display);
  font-weight: 800;
}

.tarjeta-cliente__nombre,
.panel-cliente__cta p,
.ia__cierre,
.iniciales,
.panel-cliente__proximamente {
  font-stretch: var(--ancho-display);
  font-weight: 700;
}

/* Titular del hero */
.hero__titulo {
  font-size: 3.25rem;
  line-height: 0.92;
  letter-spacing: 0;
}

@media (min-width: 768px) {
  .hero__titulo {
    font-size: 4.5rem;
  }
}

@media (orientation: landscape) and (min-width: 1024px) {
  .hero__titulo {
    font-size: clamp(3.5rem, min(7.9vw, calc(8.4 * var(--u))), 12rem);
    line-height: 0.9;
    letter-spacing: -0.01em;
  }

  /* Contraste de ancho, con el mismo peso y la misma familia: "Tu equipo" extendida y
     "de contenido." compacta, las dos ExtraBold. Es el mismo contraste de tus dos referencias
     (la ancha y la compacta), pero en un solo titular y sin perder fuerza.
     Solo escritorio: en celular el título sigue igual. */
  .hero__titulo-a {
    font-stretch: 125%;
    font-size: 0.82em;
    letter-spacing: -0.02em;
  }
}

/* Títulos de sección y nombres */
.seccion__titulo,
.clientes__titulo {
  font-size: 2.5rem;
  line-height: 1;
}

.editorial__titulo {
  font-size: 2.25rem;
  line-height: 1.04;
}

.panel-cliente__nombre {
  font-size: 1.5rem;
  line-height: 1.1;
}

.tarjeta-cliente__nombre,
.panel-cliente__cta p {
  font-size: 1.25rem;
  line-height: 1.15;
}

.ia__cierre,
.panel-cliente__proximamente {
  font-size: 1.375rem;
}

@media (min-width: 768px) {
  .seccion__titulo {
    font-size: 3.5rem;
  }

  .clientes__titulo {
    font-size: 4.25rem;
  }

  .editorial__titulo {
    font-size: 4.25rem;
  }
}

/* =====================================================================
   Movimiento suave · salida del hero y anillo del círculo
   ===================================================================== */
:root {
  --ease-revelado: cubic-bezier(0.65, 0, 0.15, 1);
}

/* Salida del hero: al terminar, la escena queda EXACTAMENTE del color de la página.
   Así no queda ni rectángulo ni borde cuando la escena se va y entra Clientes. */
.hero__velo-escena {
  background: var(--background);
}

@media (orientation: landscape) and (min-width: 1024px) {
  .hero__velo-escena {
    opacity: calc(var(--e2) * 0.5 + var(--e3) * 0.5);
  }
}

@media (prefers-reduced-motion: no-preference) {
  @media not all and (orientation: landscape) and (min-width: 1024px) {
    .hero__velo-escena {
      opacity: var(--e3);
    }
  }
}

/* Con movimiento: Clientes empieza a subir mientras el final del hero todavía se apaga.
   Solapa una franja que ya es del color de la página, así no queda un tramo vacío entre una cosa y otra. */
@media (prefers-reduced-motion: no-preference) {
  .tras-hero {
    position: relative;
    z-index: 1;
  }
}

/* Sin movimiento el hero es una pantalla normal: su borde de abajo se funde con la página
   (antes terminaba en un corte duro: un rectángulo gris y luego el hueco antes de Clientes) */
@media (prefers-reduced-motion: reduce) {
  .hero__escena::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2; /* encima del reel y de los brillos rojos, debajo del texto y de "Ver el video" */
    height: clamp(5rem, 18svh, 10rem);
    background: linear-gradient(180deg, transparent 0%, var(--background) 100%);
    pointer-events: none;
  }

  .hero__reel-play {
    z-index: 3;
  }
}

/* Celular: el círculo del video lleva una línea roja en su borde (el equivalente de las dos líneas del
   telón de escritorio). Crece con la misma duración y la misma curva que el círculo. */
.hero-video__anillo {
  display: none;
}

.hero--revelando-circulo .hero-video__filos {
  position: fixed;
  inset: 0;
  z-index: 61;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

.hero--revelando-circulo .hero-video__filo {
  display: none;
}

.hero--revelando-circulo .hero-video__anillo {
  position: absolute;
  left: var(--rv-x);
  top: var(--rv-y);
  display: block;
  box-sizing: border-box;
  width: 0;
  height: 0;
  border: 2px solid #ff1a41;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition:
    width var(--dur-revelado) var(--ease-revelado),
    height var(--dur-revelado) var(--ease-revelado),
    opacity 240ms ease calc(var(--dur-revelado) - 240ms);
}

.hero--revelando-circulo.hero--abierto .hero-video__anillo {
  width: calc(var(--rv-r) * 2);
  height: calc(var(--rv-r) * 2);
  opacity: 1;
  transition:
    width var(--dur-revelado) var(--ease-revelado),
    height var(--dur-revelado) var(--ease-revelado),
    opacity 160ms ease;
}

/* =====================================================================
   De la escena a "Historias que contamos": corte directo, sin pantalla vacía
   El hero se queda quieto y Clientes sube encima desde el primer movimiento de la rueda,
   con borde recto (sin diagonal). Mientras sube, la escena se oscurece y el texto se queda
   un poco atrás (script.js, --e3). Al terminar, Clientes llena la pantalla.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .hero {
    /* 1 pantalla de escena + 1 pantalla en la que Clientes la cubre; script.js usa la misma cuenta */
    height: 200vh;
    height: 200svh;
    margin-bottom: -100vh;
    margin-bottom: -100svh;
  }

  .tras-hero {
    background: var(--background);
    /* Sombra hacia arriba: la sección se lee como una hoja que pasa por encima del video */
    box-shadow: 0 -30px 80px -10px oklch(0 0 0 / 0.55);
  }
}

@media (orientation: landscape) and (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .tras-hero {
    padding-top: calc(var(--header-height) + 3rem);
  }
}

/* =====================================================================
   Visor del proyecto · panel de pantalla completa en móvil y lienzo amplio en escritorio
   En celular entra desde la derecha, conserva el gesto para salir y responde al botón "atrás".
   En escritorio aparece mientras el fondo se oscurece.
   ===================================================================== */
.panel-cliente {
  --curva-ios: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Los paneles viven dentro de Clientes, que forma su propia capa: mientras uno está abierto,
   la sección pasa por encima del encabezado para que el panel ocupe la pantalla completa */
html.panel-abierto #clientes,
html.composicion-abierta #clientes {
  z-index: 80;
}

.panel-cliente__fondo {
  opacity: 0;
  transition: opacity 460ms ease;
}

.panel-cliente__caja {
  transform: translate3d(0, 2rem, 0);
  transition: transform 460ms var(--curva-ios);
}

.panel-cliente--visible .panel-cliente__fondo {
  opacity: 1;
}

.panel-cliente--visible .panel-cliente__caja {
  transform: none;
}

/* Mientras el dedo arrastra, el panel sigue al dedo sin retraso */
.panel-cliente--arrastrando :is(.panel-cliente__caja, .panel-cliente__fondo) {
  transition: none;
}

@media (max-width: 767px) {
  .panel-cliente__caja {
    padding-top: 0;
    transform: translate3d(100%, 0, 0);
    box-shadow: -24px 0 48px oklch(0 0 0 / 0.45);
    overscroll-behavior: contain;
    will-change: transform;
  }

  /* El ✕ pasa a ser el botón de volver: círculo arriba a la izquierda, fijo al hacer scroll */
  .panel-cliente__cerrar {
    position: sticky;
    top: 0.75rem;
    right: auto;
    left: 0;
    margin: 0.75rem 0 0.75rem 1rem;
    width: 2.75rem;
    height: 2.75rem;
    border-color: oklch(1 0 0 / 18%);
    background: oklch(0.2 0.005 285 / 0.75);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-size: 0;
  }

  .panel-cliente__cerrar::before {
    content: "";
    width: 0.7rem;
    height: 0.7rem;
    margin-left: 0.25rem;
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: rotate(45deg);
  }

  .panel-cliente__encabezado {
    padding-right: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel-cliente__fondo,
  .panel-cliente__caja {
    transition: none;
  }
}

/* =====================================================================
   Video completo · dos reproductores apilados y controles propios
   Las 3 partes se encadenan en dos <video> en el mismo lugar: el activo va encima y el de reserva
   debajo (sigue pintado, nunca display:none). Una sola barra para todo el video: abajo, discreta,
   en el rojo de la marca, y se esconde a los 2,5 s sin actividad (script.js).
   ===================================================================== */
.hero-video__video {
  z-index: 0;
}

.hero-video__video--activo {
  z-index: 1;
}

.hero-video__cargando {
  z-index: 2;
}

.hero-video__controles {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 2.5rem max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  background: linear-gradient(180deg, transparent 0%, oklch(0 0 0 / 0.55) 100%);
  transition:
    opacity 400ms ease,
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Sin actividad: los controles bajan y se apagan; el cursor también se esconde */
.hero-video--sin-controles .hero-video__controles {
  opacity: 0;
  transform: translateY(0.75rem);
  pointer-events: none;
}

.hero-video__play {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  transition: transform 300ms cubic-bezier(0.34, 1.32, 0.64, 1);
}

.hero-video__play:active {
  transform: scale(0.92);
}

.hero-video__play:focus-visible,
.hero-video__barra:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.hero-video__icono {
  grid-area: 1 / 1;
  width: 1.125rem;
  height: 1.125rem;
}

.hero-video__icono--play,
.hero-video--pausado .hero-video__icono--pausa {
  visibility: hidden;
}

.hero-video--pausado .hero-video__icono--play {
  visibility: visible;
}

/* La barra: línea fina blanca translúcida con el avance en rojo */
.hero-video__barra {
  --progreso: 0%;
  flex: 1;
  min-width: 0;
  height: 1.5rem; /* área táctil cómoda; la línea se dibuja fina */
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.hero-video__barra::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary) var(--progreso), oklch(1 0 0 / 0.28) var(--progreso));
}

.hero-video__barra::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary) var(--progreso), oklch(1 0 0 / 0.28) var(--progreso));
}

.hero-video__barra::-webkit-slider-thumb {
  width: 0.875rem;
  height: 0.875rem;
  margin-top: calc((3px - 0.875rem) / 2);
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 3px oklch(0.62 0.24 18 / 0.45);
  -webkit-appearance: none;
  appearance: none;
}

.hero-video__barra::-moz-range-thumb {
  width: 0.875rem;
  height: 0.875rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 3px oklch(0.62 0.24 18 / 0.45);
}

.hero-video__tiempo {
  flex: none;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: oklch(1 0 0 / 0.8);
}

@media (prefers-reduced-motion: reduce) {
  .hero-video__controles {
    transition: none;
  }
}

/* =====================================================================
   Celular con la misma tipografía y diagramación que escritorio
   Íconos de los botones (flecha en el principal, WhatsApp en el secundario): todas las pantallas.
   ===================================================================== */
.hero__botones .boton--primario::after {
  content: "→";
  margin-left: 0.75em;
  font-size: 1.3em;
  line-height: 1;
  font-weight: 500;
  transition: transform 200ms ease;
}

.hero__botones .boton--primario:hover::after {
  transform: translateX(3px);
}

.hero__botones .boton--secundario::before {
  content: "";
  width: 1.35em;
  height: 1.35em;
  margin-right: 0.7em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%2001-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%2001-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%20012.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%20005.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%2000-3.48-8.413Z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M17.472%2014.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94%201.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198%200-.52.074-.792.372-.272.297-1.04%201.016-1.04%202.479%200%201.462%201.065%202.875%201.213%203.074.149.198%202.096%203.2%205.077%204.487.709.306%201.262.489%201.694.625.712.227%201.36.195%201.871.118.571-.085%201.758-.719%202.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421%207.403h-.004a9.87%209.87%200%2001-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86%209.86%200%2001-1.51-5.26c.001-5.45%204.436-9.884%209.888-9.884%202.64%200%205.122%201.03%206.988%202.898a9.825%209.825%200%20012.893%206.994c-.003%205.45-4.437%209.884-9.885%209.884m8.413-18.297A11.815%2011.815%200%200012.05%200C5.495%200%20.16%205.335.157%2011.892c0%202.096.547%204.142%201.588%205.945L.057%2024l6.305-1.654a11.882%2011.882%200%20005.683%201.448h.005c6.554%200%2011.89-5.335%2011.893-11.893a11.821%2011.821%200%2000-3.48-8.413Z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* Celular (y tablet vertical): el mismo titular, subtítulo y créditos que escritorio */
@media not all and (orientation: landscape) and (min-width: 1024px) {
  /* Dos líneas: "Tu equipo" en blanco, ancha, y "de contenido." en rojo, compacta.
     Igual que en escritorio: el "de" del HTML se oculta y se dibuja dentro de la palabra roja;
     el texto del HTML sigue siendo "Tu equipo de contenido." para buscadores y lectores de pantalla. */
  .hero__titulo {
    font-size: min(3.25rem, 14.5vw);
  }

  .hero__titulo-a {
    font-stretch: 125%;
    font-size: 0.82em;
    letter-spacing: -0.02em;
  }

  .hero__de {
    display: none;
  }

  .hero__palabra {
    white-space: nowrap;
  }

  .hero__palabra::before {
    content: "de\00a0";
  }

  /* Subtítulo en dos frases, como en escritorio */
  .hero__subtitulo {
    font-weight: 400;
    letter-spacing: 0.015em;
  }

  .hero__sub-linea {
    display: block;
    text-wrap: balance;
  }

  .hero__sub-linea + .hero__sub-linea {
    margin-top: 0.6em;
  }

  /* Créditos: la misma firma sobria de escritorio, con línea fina arriba y texto corrido */
  .hero__creditos {
    display: block;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid oklch(1 0 0 / 10%);
    line-height: 1.65;
  }

  .hero__creditos > .hero__credito:first-child {
    margin-bottom: 0.5em;
  }

  .hero__credito-nombre,
  .hero__credito-linea {
    display: inline;
  }

  .hero__creditos > .hero__credito:nth-child(2),
  .hero__credito-enlace {
    display: inline;
  }

  /* "Cómo usamos la IA →" se lee como una frase más: mismo tono y grosor, solo el subrayado tenue */
  .hero__enlace-ia {
    margin-top: 0;
    font-size: 1em;
    font-weight: 400;
    color: inherit;
    text-decoration-color: oklch(1 0 0 / 28%);
  }
}

/* Pieza de Instagram: la portada es un enlace al reel (no se reproduce dentro del sitio) */
.pieza__reel {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  color: #fff;
}

.pieza__reel .pieza__portada {
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pieza__reel:hover .pieza__portada {
  transform: scale(1.03);
}

.pieza__reel-etiqueta {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.85rem 0.55rem 0.7rem;
  border: 1px solid oklch(1 0 0 / 30%);
  border-radius: 999px;
  background: oklch(0 0 0 / 62%);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 200ms ease, border-color 200ms ease;
}

.pieza__reel-etiqueta svg {
  width: 0.8rem;
  height: 0.8rem;
}

.pieza__reel:hover .pieza__reel-etiqueta,
.pieza__reel:focus-visible .pieza__reel-etiqueta {
  border-color: var(--primary);
  background: var(--primary);
}

.pieza__reel:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .pieza__reel .pieza__portada {
    transition: none;
  }

  .pieza__reel:hover .pieza__portada {
    transform: none;
  }
}

/* Crédito de la pieza cuando el video fue con otra marca: "Sebas Vélez × Robin House" */
.pieza__credito {
  margin-top: 0.375rem;
  font-family: var(--font-display);
  font-stretch: var(--ancho-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--texto-principal);
}

@media (min-width: 768px) {
  .pieza .pieza__credito {
    margin-top: 0.5rem;
    font-size: 1.5rem;
  }
}

/* Indicador destacado de una pieza (mismo lenguaje que la cifra roja del encabezado del panel):
   arriba la etiqueta pequeña, abajo el dato en grande */
.pieza__indicador {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.875rem;
  padding: 0.75rem 0.875rem;
  border-left: 2px solid var(--primary);
  background: oklch(0.62 0.24 18 / 0.08);
  font-family: var(--font-display);
  font-stretch: var(--ancho-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--texto-principal);
}

.pieza__indicador span {
  font-family: var(--font-sans);
  font-stretch: 100%;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--primary);
}

/* El resultado, dentro de la descripción, con un poco más de peso */
.pieza__resultado {
  font-weight: 600;
  color: var(--texto-principal);
}

@media (min-width: 768px) {
  .pieza .pieza__indicador {
    margin-top: 1rem;
    font-size: 1.375rem;
  }
}

/* =====================================================================
   Galería de Clientes · interacción
   Tarjeta (preview) → composición de piezas → visor del video.
   Un solo lenguaje de movimiento, con jerarquía:
     hover            → inercia física (script.js, sin transición CSS)
     click            → compresión inmediata
     despliegue       → resorte "asentar" (rebote corto del 8 %)
     visor y estados  → resorte "firme" (rebote del 1,5 %)
     cierres          → salida rápida, sin rebote
   ===================================================================== */
:root {
  /* Resortes amortiguados (curvas generadas a partir de un resorte físico) */
  --resorte-asentar: linear(0, 0.0693, 0.2302, 0.4259, 0.6176, 0.7823, 0.9097, 0.9982, 1.0519, 1.0777, 1.0834, 1.0762, 1.062, 1.0456, 1.0298, 1.0165, 1.0063, 0.9993, 0.9952, 0.9934, 0.9931, 0.9938, 0.995, 0.9964, 0.9977, 0.9988, 0.9996, 1.0001, 1.0004, 1.0006, 1.0006, 1.0005, 1);
  --resorte-firme: linear(0, 0.0575, 0.1875, 0.3438, 0.4982, 0.6354, 0.7488, 0.8372, 0.9028, 0.949, 0.9796, 0.9986, 1.0091, 1.014, 1.0152, 1.0142, 1.0122, 1.0099, 1.0075, 1.0055, 1.0038, 1.0024, 1.0014, 1.0008, 1.0003, 1, 0.9999, 0.9998, 0.9998, 0.9998, 0.9998, 0.9999, 1);
  --salida-rapida: cubic-bezier(0.4, 0, 0.9, 0.6);
}

@supports not (transition-timing-function: linear(0, 1)) {
  :root {
    --resorte-firme: cubic-bezier(0.22, 1.08, 0.36, 1);
  }
}

/* --- Composición: rail horizontal de piezas del proyecto --- */
html.composicion-abierta,
html.composicion-abierta body {
  overflow: hidden;
}

.composicion {
  position: fixed;
  inset: 0;
  z-index: 65; /* vive dentro de Clientes, debajo del visor (70) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.composicion[hidden] {
  display: none;
}

.composicion__fondo {
  position: absolute;
  inset: 0;
  background: oklch(0.07 0.003 285 / 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 300ms ease;
}

.composicion--abierta .composicion__fondo {
  opacity: 1;
}

.composicion__cabeza {
  position: relative;
  z-index: 1;
  margin: 0 0 0.5rem;
  padding-inline: 1.5rem;
  text-align: center;
  font-family: var(--font-display);
  font-stretch: var(--ancho-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--texto-principal);
  opacity: 0;
  translate: 0 10px;
  transition:
    opacity 220ms ease,
    translate 220ms var(--salida-rapida);
}

.composicion--abierta .composicion__cabeza {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 220ms ease 80ms,
    translate 220ms ease-out 80ms;
}

.composicion__fila {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 100vw;
  padding: 2.5rem 1.5rem 3.5rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.composicion__fila::-webkit-scrollbar {
  display: none;
}

.composicion__pieza {
  position: relative;
  z-index: 1;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  scroll-snap-align: center;
  transform: translateY(var(--y, 0px));
}

.composicion__pieza--horizontal-entre-verticales {
  z-index: 0;
  margin-inline: -1.75rem;
}

.composicion__marco {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow:
    0 28px 60px -28px oklch(0 0 0 / 0.9),
    0 0 0 1px oklch(1 0 0 / 0.07);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.composicion__marco img,
.composicion__marco video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.composicion__marco video {
  opacity: 0;
  transition: opacity 260ms ease;
}

.composicion__marco video.composicion__preview--lista {
  opacity: 1;
}

/* El hover ayuda a identificar la pieza sin desplazar ni reducir el resto de la rail. */
.composicion__pieza:hover .composicion__marco,
.composicion__pieza:focus-visible .composicion__marco {
  transform: translateY(-2px);
  box-shadow:
    0 32px 64px -28px oklch(0 0 0 / 0.92),
    0 0 0 1px oklch(1 0 0 / 0.12);
}

.composicion__pieza:focus-visible {
  outline: none;
}

.composicion__pieza:focus-visible .composicion__marco {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* El play aparece sin cambiar de tamaño ni desplazar la imagen. */
.composicion__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: #ff1a41;
  color: #fff;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition:
    opacity 180ms ease;
  pointer-events: none;
}

.composicion__play svg {
  width: 0.95rem;
  height: 0.95rem;
  margin-left: 0.15rem;
}

.composicion__pieza:hover .composicion__play,
.composicion__pieza:focus-visible .composicion__play {
  opacity: 1;
}

/* En pantallas táctiles el play de cada pieza se ve siempre (no hay hover) */
@media (hover: none) {
  .composicion__play {
    width: 2.5rem;
    height: 2.5rem;
    opacity: 0.95;
    transform: translate(-50%, -50%);
  }
}

/* Pie de cada pieza: número y tipo, pequeño, como metadata */
.composicion__pie {
  position: absolute;
  top: calc(100% + 0.875rem);
  left: 0;
  right: 0;
  overflow: hidden;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: left;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--texto-secundario);
  transition: color 200ms ease;
}

.composicion__pie b {
  color: var(--texto-principal);
  font-weight: 600;
}

.composicion__pieza:hover .composicion__pie {
  color: var(--texto-principal);
}

/* La pieza que se convirtió en el reproductor queda reservada mientras el visor está abierto */
.composicion__pieza--en-visor {
  visibility: hidden;
}

.composicion__cerrar {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid oklch(1 0 0 / 0.22);
  border-radius: 999px;
  background: oklch(0 0 0 / 0.4);
  color: #fff;
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 200ms ease;
}

.composicion__cerrar:hover {
  border-color: oklch(1 0 0 / 0.55);
}

@media (max-width: 767px) {
  .composicion__pie {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.35;
    letter-spacing: 0.06em;
    text-overflow: clip;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@media (min-width: 768px) {
  .composicion__cabeza {
    font-size: 2rem;
  }

  .composicion__fila {
    gap: 1.75rem;
  }

  .composicion__pieza--horizontal-entre-verticales {
    margin-inline: -2rem;
  }

  .composicion__cerrar {
    top: 1.5rem;
    right: 1.5rem;
  }
}

/* --- Vuelo: la pieza elegida "se convierte" en el reproductor (y vuelve al cerrar) --- */
.vuelo {
  position: fixed;
  z-index: 95;
  overflow: hidden;
  border-radius: 0.75rem;
  transform-origin: 0 0;
  box-shadow: 0 40px 90px -30px oklch(0 0 0 / 0.9);
  pointer-events: none;
  will-change: transform;
}

.vuelo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Visor abierto desde una pieza: la caja no se desliza; su contenido entra alrededor del video */
.panel-cliente--vuelo:not(.panel-cliente--arrastrando) .panel-cliente__caja {
  transform: none !important;
  opacity: 0;
  translate: 0 10px;
  transition:
    opacity 260ms ease 90ms,
    translate 560ms var(--resorte-firme) 60ms;
}

.panel-cliente--vuelo.panel-cliente--visible:not(.panel-cliente--arrastrando) .panel-cliente__caja {
  opacity: 1;
  translate: 0 0;
}

.panel-cliente--vuelo:not(.panel-cliente--visible) .panel-cliente__caja {
  transition:
    opacity 160ms ease,
    translate 220ms var(--salida-rapida);
}

/* Metadata editorial de la pieza en el visor: "Fragmento del video original · Muestra sin audio" */
.pieza__meta {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 3;
  max-width: calc(100% - 4.5rem);
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: oklch(0 0 0 / 0.42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: oklch(1 0 0 / 0.78);
}

/* Reducir movimiento: sin inclinación, sin resortes ni vuelos; todo sigue funcionando */
@media (prefers-reduced-motion: reduce) {
  .tarjeta-cliente {
    transform: none;
    box-shadow: none;
  }

  .tarjeta-cliente__video,
  .tarjeta-cliente__info {
    transform: none;
  }

  .tarjeta-cliente__play {
    opacity: 0.94;
    transform: none;
  }

  .composicion__fondo,
  .composicion__cabeza,
  .composicion__marco,
  .composicion__play {
    transition: none;
  }

  .composicion__pieza:hover .composicion__marco,
  .composicion__pieza:focus-visible .composicion__marco {
    transform: none;
  }
}

/* =====================================================================
   Ficha de la pieza: número y tipo (con el año), cliente, categoría, titular, texto y chips.
   El titular lleva el peso; cliente y categoría son etiquetas pequeñas.
   ===================================================================== */
.pieza__anio {
  color: var(--texto-secundario);
}

.pieza__anio::before {
  content: "· ";
}

.pieza .pieza__credito {
  margin-top: 0.875rem;
  font-family: var(--font-sans);
  font-stretch: 100%;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-principal);
}

.pieza__etiqueta {
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-secundario);
}

.pieza__titulo {
  margin: 0.875rem 0 0;
  font-family: var(--font-display);
  font-stretch: var(--ancho-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.08;
  text-wrap: balance;
  color: var(--texto-principal);
}

.pieza__titulo + .pieza__contexto {
  margin-top: 0.625rem;
}

@media (min-width: 768px) {
  .pieza .pieza__credito {
    margin-top: 1rem;
    font-size: 0.75rem;
  }

  .pieza__titulo {
    margin: 1rem 0 0;
    font-size: 2rem;
  }

  .pieza .pieza__titulo + .pieza__contexto {
    margin-top: 0.75rem;
    font-size: 1.0625rem;
    line-height: 1.5;
  }
}

/* WhatsApp sin número confirmado: los enlaces llevan "hidden" y no se muestran,
   aunque su clase (.boton, .camino) les dé otro display */
[data-whatsapp][hidden] {
  display: none !important;
}
/* ---------- Botón fijo de celular ---------- */
.cta-fija {
  position: fixed;
  right: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: 1rem;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 18px 40px -14px oklch(0.62 0.24 18 / 0.7);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  opacity: 0;
  translate: 0 140%;
  pointer-events: none;
  transition:
    translate 520ms var(--resorte-firme, ease),
    opacity 300ms ease;
}

.cta-fija--visible {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

.cta-fija__punto {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #fff;
}

/* En escritorio el menú ya tiene "Hablemos" siempre a la vista */
@media (min-width: 900px) {
  .cta-fija {
    display: none;
  }
}

/* Con un visor o un panel abierto, el botón no estorba */
html.video-abierto .cta-fija,
html.panel-abierto .cta-fija,
html.composicion-abierta .cta-fija {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .pregunta summary::after,
  .plan__cta::after,
  .cta-fija {
    transition: none;
  }
}

/* Ajustes del visor que venían con la dirección visual anterior */
.panel-cliente__caja {
  border-radius: 0.25rem;
}

.pieza__media {
  border-radius: 0.125rem;
}

.pieza__media.respaldo--rojo,
.pieza__media.respaldo--azul,
.pieza__media.respaldo--morado,
.pieza__media.respaldo--magenta,
.pieza__media.respaldo--naranja,
.pieza__media.respaldo--ocre,
.pieza__media.respaldo--verde {
  background: #111113;
}

.pieza__chips li {
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--texto-secundario);
}

.pieza__chips li + li::before {
  content: "·";
  margin-inline: 0.45rem;
  color: var(--texto-micro);
}

/* Visor editorial: el material ocupa el lienzo; navegación y metadatos quedan en segundo plano. */
.panel-cliente__fondo {
  background: oklch(0 0 0 / 94%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.panel-cliente__caja {
  width: min(82rem, 96vw);
  max-height: 92vh;
  padding-block: 1.5rem;
  border: 0;
  border-radius: 0;
  background: #09090a;
  box-shadow: none;
}

.panel-cliente__encabezado .iniciales {
  display: none;
}

.panel-cliente__cifra {
  color: var(--texto-secundario);
}

.panel-cliente__cerrar {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.pieza__media {
  border-radius: 0;
}

.panel-cliente .pieza__media .pieza__marco {
  border-radius: 0;
  box-shadow: none;
}

.pieza__formato {
  top: 1rem;
  left: 1rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
  letter-spacing: 0.08em;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.pieza__sonido {
  border: 0;
  border-radius: 0;
  background: oklch(0 0 0 / 55%);
}

.pieza__tipo {
  color: var(--texto-secundario);
}

.panel-cliente__navegacion {
  gap: 0.625rem;
  margin-top: 0.75rem;
}

.panel-cliente__contador {
  min-width: 3.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

.panel-cliente__flecha {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 0;
}

.panel-cliente__flecha:hover:not(:disabled) {
  border-color: transparent;
  color: #fff;
}

@media (max-width: 767px) {
  .panel-cliente__caja {
    width: 100%;
    max-height: none;
    padding-block: 0 1.5rem;
  }

  .panel-cliente__cerrar {
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .panel-cliente__navegacion {
    margin-inline: 1.25rem;
  }
}

/* =====================================================================
   PORTADA · sistema de secciones (reconstrucción de octubre de 2026)
   El recorrido es una conversación: necesidad (hero) → reconocimiento (¿Qué te está frenando?)
   → prueba (Clientes) → solución, forma de trabajo e inversión (Cómo podemos ayudarte)
   → confianza (Quién dirige) → conversación (Hablemos + chat).
   Todas las secciones usan la misma cabeza (.eyebrow + .seccion__titulo + .cabeza__texto),
   el mismo margen lateral que el texto del hero y el mismo ritmo vertical.
   ===================================================================== */
:root {
  --corte: cubic-bezier(0.65, 0, 0.15, 1);
  --suave: cubic-bezier(0.22, 1, 0.36, 1);
  --linea: oklch(1 0 0 / 10%);
  --fondo-alterno: #0f0f12;
  --panel: #131316;

  /* Escala tipográfica: pocos tamaños, bien separados */
  --t-display: clamp(2.75rem, 1.5rem + 4.6vw, 6rem);
  --t-titular: clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem);
  --t-precio: clamp(2.25rem, 1.7rem + 1.6vw, 3.25rem);
  --t-lead: 1.125rem;
  --t-cuerpo: 1rem;
  --t-micro: 0.875rem;
  --t-meta: 0.6875rem;
}

/* Margen lateral: en computador, el mismo del texto del hero (antes, todo vivía en 72rem centrados) */
@media (min-width: 768px) {
  :root {
    --gutter: clamp(2rem, 5vw, 3rem);
  }
}

@media (min-width: 1024px) {
  :root {
    --max-width: 120rem;
    --gutter: clamp(1.25rem, 6vw, 9rem);
  }
}

/* ---------- Base de sección ---------- */
.seccion {
  border-top: 0;
  padding-block: clamp(5rem, 9vw, 8.5rem);
}

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* La cabeza de cada sección: marca de corte, titular y una frase */
.cabeza {
  display: grid;
  gap: 1.25rem;
  max-width: 48rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.eyebrow,
.pastilla,
.hero__bloque .hero__etiqueta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--texto-secundario);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 1px;
  background: var(--primary);
}

/* En el hero el supratítulo usa el mismo trazo rojo */
.pastilla__punto,
.hero__bloque .pastilla__punto {
  width: 1.75rem;
  height: 1px;
  border-radius: 0;
  background: var(--primary);
  box-shadow: none;
}

.hero__bloque .hero__etiqueta {
  margin-bottom: 1.5em;
  text-wrap: balance;
}

.seccion__titulo,
.clientes__titulo {
  max-width: 16ch;
  font-size: var(--t-display);
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.cabeza__texto {
  max-width: 36rem;
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--texto-secundario);
  text-wrap: pretty;
}

/* La frase que conecta una sección con la siguiente */
.puente {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-size: var(--t-micro);
  color: var(--texto-secundario);
}

.puente a {
  font-weight: 600;
  color: var(--texto-principal);
  border-bottom: 1px solid var(--primary);
  padding-bottom: 0.1em;
}

/* Encabezado: al bajar, la imagen se oscurece hacia arriba; no aparece una barra pegada */
.encabezado--activo {
  background: linear-gradient(180deg, oklch(0.12 0.004 285 / 0.9) 0%, oklch(0.12 0.004 285 / 0.55) 60%, oklch(0.12 0.004 285 / 0) 100%);
  box-shadow: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

/* Aparición al entrar en pantalla: sube un poco, una sola vez (script.js pone .aparecido) */
html.aparecer-js [data-aparecer] {
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity 600ms ease,
    translate 800ms var(--suave);
  transition-delay: calc(var(--orden, 0) * 70ms);
}

html.aparecer-js [data-aparecer].aparecido {
  opacity: 1;
  translate: 0 0;
}

/* =====================================================================
   2. Problema + solución + ordenar la idea
   Una sola escena que cambia de estado: lo que te pasa → lo que hace Homa → un ejemplo real.
   Mismo ADN del hero y de Clientes: tipografía grande, asimetría, la línea roja encendida del telón,
   video real. Sin tarjetas: el índice es texto y la situación elegida domina la composición.
   Sin JavaScript, las situaciones se leen una debajo de otra.
   ===================================================================== */
.situaciones-seccion {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

/* Un resplandor rojo muy bajo detrás de la escena: la sección deja de ser negro plano */
.situaciones-seccion::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -25%;
  top: 20%;
  width: min(70rem, 150vw);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, oklch(0.62 0.24 18 / 0.13), transparent 70%);
  pointer-events: none;
}

.situaciones {
  display: grid;
  gap: 2rem;
}

/* ---------- Índice: las situaciones como texto, no como botones de aplicación ---------- */
.situaciones__indice {
  position: relative;
  display: flex;
  gap: 1.5rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--linea);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 2.5rem), transparent);
}

.situaciones__indice::-webkit-scrollbar {
  display: none;
}

.situaciones__indice[hidden] {
  display: none;
}

.situaciones__opcion {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.85rem 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--t-micro);
  font-weight: 600;
  white-space: nowrap;
  color: var(--texto-micro);
  cursor: pointer;
  transition: color 300ms ease;
}

.situaciones__num {
  font-size: var(--t-meta);
  letter-spacing: 0.18em;
  color: var(--texto-micro);
  transition: color 300ms ease;
}

.situaciones__opcion:hover {
  color: var(--texto-principal);
}

.situaciones__opcion[aria-pressed="true"] {
  color: var(--texto-principal);
}

.situaciones__opcion[aria-pressed="true"] .situaciones__num {
  color: var(--primary);
}

/* La elegida se marca con la línea encendida del telón del hero */
.situaciones__opcion::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: #ff1a41;
  box-shadow: 0 0 12px 1px oklch(0.62 0.24 18 / 0.7);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 450ms var(--suave);
}

.situaciones__opcion[aria-pressed="true"]::after {
  transform: scaleX(1);
}

.situaciones__opcion:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---------- La escena ---------- */
.situaciones__escena {
  position: relative;
}

.situacion {
  display: grid;
  gap: 2rem;
}

.situacion[hidden] {
  display: none;
}

/* Sin JavaScript: una debajo de otra, separadas por aire y una línea */
.situacion + .situacion {
  margin-top: 3.5rem;
  padding-top: 3.5rem;
  border-top: 1px solid var(--linea);
}

.situaciones--una .situacion + .situacion {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.situacion__num {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 0 0 1rem;
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary);
}

.situacion__num span {
  color: var(--texto-micro);
}

.situacion__problema {
  max-width: 18ch;
  margin: 0;
  font-family: var(--font-display);
  font-stretch: var(--ancho-display);
  font-size: clamp(2.125rem, 1.25rem + 3.6vw, 4.5rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.01em;
  color: var(--texto-principal);
  text-wrap: balance;
}

.situacion__problema span {
  color: var(--texto-secundario);
}

.situacion__problema:focus {
  outline: none;
}

/* Lo que hace Homa: segundo nivel, entra en diagonal desde la frase */
.situacion__respuesta {
  display: grid;
  gap: 0.85rem;
  max-width: 36rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  margin-left: clamp(0rem, 4vw, 4rem);
}

.situacion__etiqueta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--texto-secundario);
}

/* Trazo diagonal encendido: el mismo filo rojo del hero, en corto */
.situacion__etiqueta::before {
  content: "";
  flex: none;
  width: 2px;
  height: 1.6rem;
  background: linear-gradient(180deg, transparent, #ff1a41 25%, #ff1a41 75%, transparent);
  box-shadow: 0 0 10px 1px oklch(0.62 0.24 18 / 0.6);
  rotate: 35deg;
}

.situacion__solucion {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: var(--ancho-display);
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.375rem);
  font-weight: 700;
  line-height: 1.04;
  color: var(--texto-principal);
  text-wrap: balance;
}

.situacion__detalle {
  margin: 0;
  font-size: var(--t-cuerpo);
  line-height: 1.55;
  color: var(--texto-secundario);
  text-wrap: pretty;
}

.situacion__fuentes {
  margin: 0;
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--texto-principal);
}

.situacion__fuentes span {
  color: var(--primary);
}

.situacion__accion {
  justify-self: start;
  margin-top: 0.35rem;
  padding-bottom: 0.15em;
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--texto-principal);
  border-bottom: 1px solid var(--primary);
}

.situacion__accion span {
  display: inline-block;
  color: var(--primary);
  transition: transform 400ms var(--suave);
}

.situacion__accion:hover span,
.situacion__accion:focus-visible span {
  transform: translateX(4px);
}

/* WhatsApp: secundario, un tono más bajo que la respuesta */
.situacion__accion--wa {
  color: var(--texto-secundario);
  border-bottom-color: oklch(1 0 0 / 25%);
}

.situacion__accion--wa:hover {
  color: var(--texto-principal);
  border-bottom-color: var(--primary);
}

/* ---------- Ejemplo real: video vertical, desplazado, con el filo encendido a su lado ---------- */
.situacion__ejemplo {
  position: relative;
  justify-self: end;
  width: min(64%, 15rem);
  margin: 0 0.5rem 0 0;
}

.situacion__ejemplo::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -10%;
  left: -1rem;
  width: 2px;
  height: 120%;
  background: linear-gradient(180deg, transparent 0%, #ff1a41 15%, #ff1a41 70%, transparent 100%);
  box-shadow:
    0 0 16px 1px oklch(0.62 0.24 18 / 0.7),
    0 0 60px 4px oklch(0.62 0.24 18 / 0.25);
  rotate: 9deg;
  pointer-events: none;
}

.situacion__marco {
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 0.5rem;
  background: var(--panel);
}

.situacion__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.situacion__pie {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.9rem;
  font-size: var(--t-micro);
  line-height: 1.45;
  color: var(--texto-secundario);
}

.situacion__pie-etiqueta {
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary);
}

.situacion__caso {
  justify-self: start;
  font-weight: 600;
  color: var(--texto-principal);
}

.situacion__caso span {
  color: var(--primary);
}

.situacion__caso:hover {
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-underline-offset: 0.2em;
}

/* Al cambiar de situación: la frase sube, la respuesta la sigue y el video se abre como el telón */
.situacion--entra .situacion__num,
.situacion--entra .situacion__problema {
  animation: situacion-texto 600ms var(--suave) both;
}

.situacion--entra .situacion__respuesta {
  animation: situacion-texto 650ms var(--suave) 120ms both;
}

.situacion--entra .situacion__marco {
  animation: situacion-telon 700ms var(--corte) 60ms both;
}

.situacion--entra .situacion__ejemplo::before {
  animation: situacion-filo 700ms var(--corte) both;
}

@keyframes situacion-texto {
  from {
    opacity: 0;
    translate: 0 14px;
  }
}

@keyframes situacion-telon {
  from {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

@keyframes situacion-filo {
  from {
    opacity: 0;
    translate: 3rem 0;
  }
}

.situaciones__siguiente {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 2.25rem;
  padding: 0.6rem 0;
  border: 0;
  border-bottom: 1px solid oklch(1 0 0 / 25%);
  background: none;
  font: inherit;
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--texto-principal);
  cursor: pointer;
}

.situaciones__siguiente[hidden] {
  display: none;
}

.situaciones__siguiente span {
  color: var(--primary);
  transition: transform 400ms var(--suave);
}

.situaciones__siguiente:hover span {
  transform: translateX(4px);
}

/* ---------- Computador: índice a la izquierda, la escena ocupa el resto, el video desplazado ---------- */
@media (min-width: 1024px) {
  .situaciones {
    grid-template-columns: 14rem minmax(0, 1fr);
    column-gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }

  .situaciones__indice {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    border-bottom: 0;
    border-left: 1px solid var(--linea);
    -webkit-mask-image: none;
    mask-image: none;
  }

  .situaciones__opcion {
    padding: 0.7rem 0 0.7rem 1.25rem;
    white-space: normal;
    text-align: left;
  }

  .situaciones__opcion::after {
    top: 0;
    bottom: 0;
    left: -1px;
    right: auto;
    width: 2px;
    height: auto;
    transform: scaleY(0);
    transform-origin: top;
  }

  .situaciones__opcion[aria-pressed="true"]::after {
    transform: scaleY(1);
  }

  .situacion {
    grid-template-columns: minmax(0, 1fr) clamp(14rem, 20vw, 18rem);
    column-gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
    min-height: 34rem;
  }

  .situacion--sin-ejemplo {
    grid-template-columns: minmax(0, 1fr);
  }

  .situacion__ejemplo {
    width: 100%;
    margin: 4.5rem 0 0;
  }

  .situacion__ejemplo::before {
    left: -1.75rem;
  }
}

/* ---------- Ordenemos la idea: la conversación sigue, sin formulario a la vista ---------- */
.ordenar {
  position: relative;
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(4.5rem, 10vw, 8rem);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}

/* Un filo diagonal largo marca el cambio de ritmo */
.ordenar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: min(22rem, 60%);
  height: 2px;
  background: linear-gradient(90deg, #ff1a41, transparent);
  box-shadow: 0 0 14px 1px oklch(0.62 0.24 18 / 0.5);
}

.ordenar__titulo {
  max-width: 14ch;
  margin: 0;
  font-family: var(--font-display);
  font-stretch: var(--ancho-display);
  font-size: clamp(2.5rem, 1.5rem + 4vw, 5.25rem);
  font-weight: 800;
  line-height: 0.94;
  color: var(--texto-principal);
  text-wrap: balance;
}

.ordenar__texto {
  max-width: 30rem;
  margin: 0;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--texto-secundario);
}

.ordenar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  justify-self: start;
  min-height: 3.5rem;
  margin-top: 0.5rem;
  padding: 1rem 1.75rem;
  border-radius: 999px;
  background: var(--primary);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary-foreground);
  box-shadow: 0 10px 40px -12px oklch(0.62 0.24 18 / 0.7);
  transition:
    transform 400ms var(--suave),
    box-shadow 400ms ease;
}

.ordenar__cta span {
  transition: transform 400ms var(--suave);
}

.ordenar__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 48px -10px oklch(0.62 0.24 18 / 0.85);
}

.ordenar__cta:hover span {
  transform: translateX(4px);
}

.ordenar__cta:focus-visible {
  outline: 2px solid var(--texto-principal);
  outline-offset: 3px;
}

@media (max-width: 599.98px) {
  .ordenar__cta {
    justify-self: stretch;
  }
}

@media (min-width: 1024px) {
  .ordenar {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    column-gap: clamp(3rem, 6vw, 6rem);
    align-items: end;
    margin-left: calc(14rem + clamp(3rem, 6vw, 6rem));
  }

  .ordenar__titulo {
    grid-row: span 2;
  }
}

/* =====================================================================
   3. Clientes — prueba
   Una biblioteca ordenada: todas las tarjetas con la misma proporción, la misma estructura y la
   misma línea de base. Flechas en los bordes cuando hay tarjetas fuera de pantalla.
   ===================================================================== */
.clientes {
  background: var(--fondo-alterno);
}

.clientes__encabezado {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.clientes__encabezado > div {
  display: grid;
  gap: 1.25rem;
}

.clientes__nota {
  max-width: 18rem;
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--texto-secundario);
}

@media (min-width: 768px) {
  .clientes__encabezado {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .clientes__nota {
    text-align: right;
  }
}

.clientes__rail {
  position: relative;
}

.clientes__fila {
  --borde-fila: max(var(--gutter), calc((100vw - var(--max-width)) / 2 + var(--gutter)));
  display: flex;
  align-items: stretch;
  gap: clamp(0.75rem, 1.2vw, 1.25rem);
  margin: 0;
  padding: 0.75rem var(--borde-fila) 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--borde-fila);
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.clientes__item {
  flex: 0 0 auto;
  margin: 0;
  scroll-snap-align: start;
}

/* Misma forma para todas: 2:3, mismo ancho, mismo texto abajo */
.tarjeta-cliente {
  width: clamp(13rem, 64vw, 17rem);
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: 2 / 3;
  border: 0;
  border-radius: 0.375rem;
  background: #16161a;
  color: var(--texto-principal);
  transform: none;
  box-shadow: none;
  transition: transform 500ms var(--suave);
}

@media (min-width: 1024px) {
  .tarjeta-cliente {
    width: clamp(14rem, 16.5vw, 20rem);
  }
}

.tarjeta-cliente.respaldo--rojo,
.tarjeta-cliente.respaldo--azul,
.tarjeta-cliente.respaldo--morado,
.tarjeta-cliente.respaldo--magenta,
.tarjeta-cliente.respaldo--naranja,
.tarjeta-cliente.respaldo--ocre,
.tarjeta-cliente.respaldo--verde {
  background: #16161a;
}

.tarjeta-cliente__video {
  filter: saturate(0.85) brightness(0.9);
  transform: none;
  transition:
    filter 500ms ease,
    transform 900ms var(--suave);
}

.tarjeta-cliente__vineta {
  background: linear-gradient(180deg, oklch(0 0 0 / 0) 40%, oklch(0 0 0 / 0.5) 68%, oklch(0 0 0 / 0.9) 100%);
}

.tarjeta-cliente__info {
  inset: auto 0 0 0;
  gap: 0.4rem;
  padding: 1.125rem;
  transform: none;
}

.tarjeta-cliente__tipo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: oklch(1 0 0 / 0.8);
}

.tarjeta-cliente__tipo::before {
  content: "";
  width: 1rem;
  height: 1px;
  background: var(--primary);
}

.tarjeta-cliente__nombre {
  max-width: none;
  font-size: 1.375rem;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.tarjeta-cliente__estrella,
.tarjeta-cliente .iniciales {
  display: none;
}

.tarjeta-cliente__categoria {
  font-size: 0.75rem;
  line-height: 1.4;
  color: oklch(1 0 0 / 0.65);
}

.tarjeta-cliente__cifra {
  font-size: var(--t-meta);
  color: oklch(1 0 0 / 0.72);
}

/* Sin video todavía: tarjeta oscura con las iniciales en contorno, igual en todas */
.tarjeta-cliente--sin-medio .tarjeta-cliente__info .iniciales {
  position: absolute;
  top: 1.25rem;
  left: 1.125rem;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: clamp(5rem, 9vw, 7.5rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px oklch(1 0 0 / 22%);
}

/* Al acercarse: sube apenas, la imagen gana luz y aparece el ▶ */
.tarjeta-cliente::after {
  content: "";
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 100'%3E%3Cpolygon points='0,0 104,50 0,100' fill='white'/%3E%3C/svg%3E") 56% 50% / 0.7rem no-repeat,
    var(--primary);
  opacity: 0;
  scale: 0.85;
  transition:
    opacity 300ms ease,
    scale 400ms var(--suave);
}

@media (hover: hover) {
  .tarjeta-cliente:hover,
  .tarjeta-cliente:focus-visible {
    transform: translateY(-6px);
  }

  .tarjeta-cliente:hover .tarjeta-cliente__video,
  .tarjeta-cliente:focus-visible .tarjeta-cliente__video {
    filter: saturate(1) brightness(1);
    transform: scale(1.03);
  }

  .tarjeta-cliente:hover::after,
  .tarjeta-cliente:focus-visible::after {
    opacity: 1;
    scale: 1;
  }
}

@media (hover: none) {
  .tarjeta-cliente::after {
    opacity: 0.9;
    scale: 1;
  }
}

/* Flechas: sobre los bordes de la fila, con un velo que indica que hay más */
.clientes__navegacion {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  margin: 0;
  pointer-events: none;
}

.clientes__flecha,
.clientes__flecha:disabled {
  display: grid;
  place-items: center;
  width: max(3rem, var(--gutter));
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #fff;
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
  transition: background-color 300ms ease;
}

.clientes__flecha[data-carrusel-anterior] {
  background: linear-gradient(90deg, var(--fondo-alterno) 10%, transparent);
}

.clientes__flecha[data-carrusel-siguiente] {
  margin-left: auto;
  background: linear-gradient(270deg, var(--fondo-alterno) 10%, transparent);
}

.clientes__flecha svg {
  width: 1.75rem;
  height: 1.75rem;
  transition: transform 300ms var(--suave);
}

.clientes__flecha:hover svg {
  transform: scale(1.15);
}

.clientes__flecha[hidden] {
  display: none;
}

@media (hover: none) {
  .clientes__navegacion {
    display: none;
  }
}

/* =====================================================================
   5. Cómo trabajar con Homa — hablemos de lo que tu negocio necesita
   Sin precios públicos (decisión de octubre de 2026). Dos formas de trabajar: mes a mes (la protagonista:
   más grande, con el rojo de la marca y el botón lleno) y producción puntual; qué define el alcance;
   qué pasa cuando escribes.
   ===================================================================== */
.formas {
  display: grid;
  gap: 1rem;
}

.forma {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--linea);
  border-radius: 1rem;
  background: var(--panel);
}

.forma--mensual {
  border-color: oklch(0.62 0.24 18 / 0.55);
  background:
    radial-gradient(120% 120% at 100% 0%, oklch(0.62 0.24 18 / 0.2), transparent 55%),
    var(--panel);
}

/* Las anclas de siempre (#sin-material, #plan-edicion, #plan-campana) viven en marcadores vacíos */
.ancla {
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

.forma__etiqueta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0;
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary);
}

.forma__sello {
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--primary);
  letter-spacing: 0.12em;
  color: var(--primary-foreground);
}

.forma__titulo {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: var(--ancho-display);
  font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem);
  font-weight: 800;
  line-height: 0.98;
  color: var(--texto-principal);
  text-wrap: balance;
}

.forma--puntual .forma__titulo {
  font-size: clamp(1.6rem, 1.15rem + 1.4vw, 2.25rem);
}

.forma__texto {
  max-width: 38rem;
  margin: 0;
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  color: var(--texto-secundario);
  text-wrap: pretty;
}

.forma--mensual .forma__texto {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--texto-principal);
}

.forma__lista {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.forma__lista li {
  position: relative;
  padding-left: 1.2rem;
  font-size: var(--t-cuerpo);
  line-height: 1.5;
  color: var(--texto-principal);
}

.forma__lista li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--primary);
}

.forma__nota {
  max-width: 38rem;
  margin: 0;
  font-size: var(--t-micro);
  line-height: 1.55;
  color: var(--texto-secundario);
}

/* El botón de cada forma queda al pie de su tarjeta */
.forma .forma__cta {
  margin-top: auto;
}

.forma--mensual .forma__nota + .forma__cta {
  margin-top: 0.5rem;
}

@media (min-width: 900px) {
  .formas {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 1.25rem;
  }
}

.propuesta__alcance {
  max-width: 52rem;
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  font-size: var(--t-micro);
  line-height: 1.6;
  color: var(--texto-secundario);
}

.propuesta__alcance strong {
  color: var(--texto-principal);
}

/* Así empezamos: tres frases cortas, no una fila de pasos de plantilla */
.propuesta__pasos {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--linea);
}

.propuesta__titulo {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: var(--ancho-display);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  color: var(--texto-principal);
}

.pasos {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

.pasos li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: baseline;
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--texto-principal);
}

.pasos li::before {
  content: counter(paso) ".";
  font-size: var(--t-micro);
  font-weight: 700;
  color: var(--primary);
}

.propuesta__pasos .propuesta__cta {
  justify-self: start;
  margin-top: 0.25rem;
}

@media (min-width: 900px) {
  .propuesta__pasos {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }

  .propuesta__titulo {
    grid-row: span 2;
  }
}

/* Quién está detrás (portada): tres personas, tres líneas, y el enlace a /homa */
.quien__equipo {
  display: grid;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linea);
}

.quien__equipo li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--linea);
}

.quien__equipo strong {
  font-family: var(--font-display);
  font-stretch: var(--ancho-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 800;
  line-height: 1;
  color: var(--texto-principal);
}

.quien__equipo span {
  font-size: var(--t-micro);
  color: var(--texto-secundario);
}

.quien__nota {
  max-width: 34rem;
  margin: 1.25rem 0 0;
  font-size: var(--t-cuerpo);
  line-height: 1.55;
  color: var(--texto-secundario);
}

.quien__cta {
  display: inline-block;
  margin-top: 1.5rem;
  padding-bottom: 0.15em;
  font-weight: 600;
  color: var(--texto-principal);
  border-bottom: 1px solid var(--primary);
}

.quien__cta span {
  display: inline-block;
  color: var(--primary);
  transition: transform 400ms var(--suave);
}

.quien__cta:hover span {
  transform: translateX(4px);
}

/* =====================================================================
   4. Quién está detrás de Homa — confianza
   El loop real de Harry en rodaje a la izquierda; qué significa trabajar con él a la derecha.
   ===================================================================== */
.quien {
  background: var(--fondo-alterno);
}

.quien__grilla {
  display: grid;
  gap: 2.5rem;
}

.quien__medio {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 0.5rem;
  background: #16161a url("portafolio/homa/harry-rodaje.jpg") center / cover;
}

.quien__medio video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.04);
}

.quien__medio::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, oklch(0 0 0 / 0.6) 100%);
  pointer-events: none;
}

.quien__pie {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 1;
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(1 0 0 / 0.85);
}

.quien__presentacion {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem 0.6rem 0.6rem;
  border: 0;
  border-radius: 999px;
  background: oklch(0 0 0 / 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font: inherit;
  font-size: var(--t-micro);
  font-weight: 600;
  cursor: pointer;
}

.quien__presentacion[hidden] {
  display: none;
}

.quien__play {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--primary);
}

.quien__play svg {
  width: 0.65rem;
  height: 0.65rem;
  margin-left: 0.1rem;
}

.quien .cabeza {
  margin-bottom: 1.5rem;
}

.quien__entrada {
  max-width: 34rem;
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--texto-principal);
}

.quien__puntos {
  display: grid;
  gap: 0.6rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.quien__puntos li {
  position: relative;
  max-width: 34rem;
  padding-left: 1.1rem;
  font-size: var(--t-cuerpo);
  line-height: 1.55;
  color: var(--texto-secundario);
}

.quien__puntos li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 0.375rem;
  height: 0.375rem;
  background: var(--primary);
}

.quien__puntos strong {
  font-weight: 600;
  color: var(--texto-principal);
}

.quien__trayectoria {
  max-width: 34rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linea);
  font-size: var(--t-micro);
  line-height: 1.6;
  color: var(--texto-micro);
}

@media (min-width: 900px) {
  .quien__grilla {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    column-gap: clamp(3rem, 7vw, 7rem);
  }

  .quien__medio {
    max-height: 82svh;
  }
}

/* La presentación en video (cuando exista), en un diálogo */
.presentacion {
  width: min(64rem, 92vw);
  padding: 0;
  border: 0;
  background: #000;
  color: #fff;
}

.presentacion::backdrop {
  background: oklch(0 0 0 / 0.88);
}

.presentacion video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.presentacion__cerrar {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 999px;
  background: oklch(0 0 0 / 0.6);
  color: #fff;
  font: inherit;
  cursor: pointer;
}

/* =====================================================================
   6. Hablemos — la conversación
   A la izquierda, qué va a pasar y por qué preguntamos. A la derecha, el chat.
   ===================================================================== */
.hablemos {
  background:
    radial-gradient(60% 45% at 85% 10%, oklch(0.62 0.24 18 / 0.08) 0%, transparent 70%),
    var(--background);
}

.hablemos__grilla {
  display: grid;
  gap: 2.5rem;
}

.hablemos__cabeza {
  margin-bottom: 0;
}

.hablemos__por-que {
  max-width: 34rem;
  font-size: var(--t-micro);
  line-height: 1.6;
  color: var(--texto-micro);
}

@media (min-width: 1024px) {
  .hablemos__grilla {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(3rem, 6vw, 7rem);
    align-items: start;
  }

  .hablemos__cabeza {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
  }
}

/* El chat */
.chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--linea);
  border-radius: 0.75rem;
  background: #111114;
}

.chat__mensajes {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 14rem;
  max-height: min(62svh, 36rem);
  margin: 0;
  padding: 1.25rem;
  overflow-y: auto;
  list-style: none;
  scroll-behavior: smooth;
}

.chat__msg {
  max-width: 88%;
  padding: 0.8rem 1rem;
  border-radius: 0.9rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  animation: chat-entra 380ms var(--suave) both;
}

.chat__msg--homa {
  align-self: flex-start;
  border-bottom-left-radius: 0.25rem;
  background: #1c1c21;
  color: var(--texto-principal);
}

.chat__msg--tu {
  align-self: flex-end;
  border-bottom-right-radius: 0.25rem;
  background: var(--primary);
  color: #fff;
}

@keyframes chat-entra {
  from {
    opacity: 0;
    translate: 0 8px;
  }
}

/* "Esto es lo que entendí de tu proyecto" */
.chat__msg--resumen {
  max-width: 100%;
  width: 100%;
  padding: 1.25rem;
  border: 1px solid oklch(0.62 0.24 18 / 0.55);
  border-radius: 0.6rem;
  background: #16161a;
}

.chat__resumen {
  display: grid;
  gap: 1rem;
}

.chat__resumen-titulo {
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--primary);
}

.chat__resumen-frase {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--texto-principal);
}

.chat__resumen dl {
  display: grid;
  gap: 0.4rem;
  margin: 0;
}

.chat__resumen dl > div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0.75rem;
  font-size: var(--t-micro);
  line-height: 1.45;
}

.chat__resumen dt {
  color: var(--texto-micro);
}

.chat__resumen dd {
  margin: 0;
  color: var(--texto-secundario);
}

.chat__ruta {
  display: grid;
  gap: 0.2rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linea);
}

.chat__ruta span:first-child {
  font-size: var(--t-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto-micro);
}

.chat__ruta strong {
  font-family: var(--font-display);
  font-stretch: var(--ancho-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.05;
  color: var(--texto-principal);
}

.chat__ruta span:last-child {
  font-size: var(--t-micro);
  color: var(--texto-secundario);
}

.chat__aviso,
.chat__nota {
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--texto-secundario);
}

.chat__aviso {
  padding-left: 0.75rem;
  border-left: 2px solid var(--primary);
}

/* Respuestas para tocar */
.chat__opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 1.25rem 1.25rem;
}

.chat__opciones:empty {
  display: none;
}

.chat__opcion,
.chat__boton {
  padding: 0.65rem 1rem;
  border: 1px solid oklch(1 0 0 / 22%);
  border-radius: 999px;
  background: transparent;
  color: var(--texto-principal);
  font: inherit;
  font-size: var(--t-micro);
  cursor: pointer;
  transition:
    border-color 250ms ease,
    background-color 250ms ease,
    scale 200ms var(--suave);
}

.chat__opcion:hover,
.chat__boton:hover {
  border-color: var(--primary);
  background: oklch(0.62 0.24 18 / 0.12);
}

.chat__opcion:active,
.chat__boton:active {
  scale: 0.97;
}

.chat__boton {
  border-radius: 0.25rem;
}

.chat__boton--principal {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}

.chat__boton--principal:hover {
  background: oklch(0.66 0.24 18);
}

/* Datos de contacto, dentro del chat */
.chat__contacto {
  display: grid;
  gap: 0.75rem;
  width: 100%;
}

.chat__contacto label {
  display: grid;
  gap: 0.35rem;
  font-size: var(--t-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-micro);
}

.chat__contacto input {
  padding: 0.75rem 0.9rem;
  border: 1px solid oklch(1 0 0 / 14%);
  border-radius: 0.375rem;
  background: var(--background);
  color: var(--texto-principal);
  font: inherit;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
}

.chat__contacto input:focus {
  border-color: var(--primary);
  outline: none;
}

.chat__contacto .chat__boton {
  justify-self: start;
}

@media (min-width: 640px) {
  .chat__contacto {
    grid-template-columns: 1fr 1fr;
  }

  .chat__contacto label:nth-child(3),
  .chat__contacto .chat__boton {
    grid-column: 1 / -1;
  }
}

/* Lo que escribe el visitante */
.chat__entrada {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--linea);
}

.chat__entrada[hidden] {
  display: none;
}

.chat__entrada textarea {
  flex: 1;
  min-width: 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid oklch(1 0 0 / 12%);
  border-radius: 0.5rem;
  background: var(--background);
  color: var(--texto-principal);
  font: inherit;
  font-size: 1rem;
  line-height: 1.45;
  resize: none;
}

.chat__entrada textarea:focus {
  border-color: var(--primary);
  outline: none;
}

.chat__enviar {
  flex: none;
  width: 2.875rem;
  height: 2.875rem;
  border: 0;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 1.125rem;
  cursor: pointer;
  transition: scale 200ms var(--suave);
}

.chat__enviar:active {
  scale: 0.94;
}

.chat__sin-js {
  padding: 1.25rem;
  font-size: var(--t-micro);
  color: var(--texto-secundario);
}

.chat__sin-js a {
  color: var(--texto-principal);
  text-decoration: underline;
}

/* Preguntas: debajo del chat, como interfaz mínima */
.preguntas {
  display: grid;
  gap: 1.75rem;
  margin-top: clamp(4rem, 8vw, 7rem);
}

.preguntas__titulo {
  max-width: 14ch;
  font-size: var(--t-titular);
  line-height: 1.02;
}

.preguntas__lista {
  margin: 0;
  border-top: 1px solid var(--linea);
}

.pregunta {
  border-bottom: 1px solid var(--linea);
}

.pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--texto-principal);
  cursor: pointer;
  list-style: none;
  transition: padding-left 400ms var(--suave);
}

.pregunta summary::-webkit-details-marker {
  display: none;
}

.pregunta summary::after {
  content: "";
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  color: var(--texto-secundario);
  transition:
    transform 400ms var(--corte),
    color 300ms ease;
}

.pregunta[open] summary::after {
  transform: rotate(45deg);
  color: var(--primary);
}

@media (hover: hover) {
  .pregunta summary:hover {
    padding-left: 0.4rem;
  }
}

.pregunta p {
  max-width: 40rem;
  padding-bottom: 1.25rem;
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  color: var(--texto-secundario);
}

@media (min-width: 1024px) {
  .preguntas {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(3rem, 6vw, 7rem);
    align-items: start;
  }
}

/* ---------- Sin movimiento: todo quieto y visible ---------- */
@media (prefers-reduced-motion: reduce) {
  html.aparecer-js [data-aparecer] {
    opacity: 1;
    translate: none;
    transition: none;
  }

  .chat__msg,
  .situacion--entra .situacion__num,
  .situacion--entra .situacion__problema,
  .situacion--entra .situacion__respuesta,
  .situacion--entra .situacion__marco,
  .situacion--entra .situacion__ejemplo::before {
    animation: none;
  }

  .situaciones__opcion,
  .situaciones__opcion::after,
  .situacion__accion span,
  .ordenar__cta,
  .ordenar__cta span,
  .tarjeta-cliente,
  .tarjeta-cliente__video,
  .tarjeta-cliente::after,
  .forma__cta,
  .propuesta__cta,
  .pregunta summary,
  .pregunta summary::after {
    transition: none;
  }
}

/* Tarjetas sin video: el texto abajo y las iniciales arriba, en todo el alto de la tarjeta */
.tarjeta-cliente--sin-medio .tarjeta-cliente__info {
  inset: 0;
  justify-content: flex-end;
}

.tarjeta-cliente--con-portada .tarjeta-cliente__info .iniciales {
  display: none;
}

/* Titulares de sección: hasta tres renglones en escritorio */
.seccion__titulo {
  max-width: 19ch;
}

/* Tarjetas de Clientes: el nicho primero (es lo que se busca) y el nombre del cliente debajo */
.tarjeta-cliente__nicho {
  font-family: var(--font-display);
  font-stretch: var(--ancho-display);
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--texto-principal);
}

.tarjeta-cliente .tarjeta-cliente__nombre {
  font-family: var(--font-sans);
  font-stretch: 100%;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  color: oklch(1 0 0 / 0.9);
}

/* Panel de cada cliente: título SEO "[Marca] | [Servicio] para [Nicho]" (la barra solo la leen buscadores
   y lectores de pantalla) y una descripción de 2 a 3 líneas con lo que hizo Homa y para qué */
.panel-cliente__nombre .panel-cliente__marca {
  display: block;
}

.panel-cliente__servicio {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-sans);
  font-stretch: 100%;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--texto-secundario);
}

.panel-cliente__descripcion {
  max-width: 68rem;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--texto-secundario);
}

/* El visor de cada cliente gana una descripción arriba: en pantallas bajas el video cede ese espacio
   para que el botón "Hablemos" quede siempre a la vista */
@media (min-width: 768px) {
  .panel-cliente .pieza__media {
    height: min(calc(90vh - 21rem), 32rem);
  }
}

/* =====================================================================
   Llamados a la acción con presencia (octubre 2026)
   Los botones de la portada no se leen como notas: altura cómoda para el dedo (mín. 3 rem),
   texto de 1 rem y peso 600–700, contraste claro. Principal = rojo lleno; secundario = contorno claro.
   ===================================================================== */
.situacion__accion,
.ordenar__wa,
.quien__cta,
.forma__cta,
.propuesta__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  justify-self: start;
  min-height: 3.25rem;
  margin-top: 0.75rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid oklch(1 0 0 / 38%);
  border-radius: 999px;
  background: oklch(1 0 0 / 4%);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--texto-principal);
  transition:
    background-color 300ms ease,
    border-color 300ms ease,
    color 300ms ease;
}

.situacion__accion:hover,
.ordenar__wa:hover,
.quien__cta:hover,
.forma__cta:hover,
.propuesta__cta:hover {
  border-color: var(--primary);
  background: oklch(0.62 0.24 18 / 0.14);
  color: #fff;
}

.situacion__accion span,
.ordenar__wa span,
.quien__cta span,
.forma__cta span,
.propuesta__cta span {
  display: inline-block;
  color: var(--primary);
  transition: transform 400ms var(--suave);
}

.situacion__accion:hover span,
.ordenar__wa:hover span,
.quien__cta:hover span,
.forma__cta:hover span,
.propuesta__cta:hover span {
  transform: translateX(4px);
}

/* La acción principal de una situación (fotografía), "Conoce Homa", "Quiero contenido cada mes" y
   "Cuéntanos qué necesitas": rojo lleno */
.situacion__accion--principal,
.quien__cta,
.forma__cta--principal,
.propuesta__cta {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}

.situacion__accion--principal span,
.quien__cta span,
.forma__cta--principal span,
.propuesta__cta span {
  color: inherit;
}

.situacion__accion--principal:hover,
.quien__cta:hover,
.forma__cta--principal:hover,
.propuesta__cta:hover {
  background: oklch(0.66 0.24 18);
}

.situacion__accion:focus-visible,
.ordenar__wa:focus-visible,
.quien__cta:focus-visible,
.forma__cta:focus-visible,
.propuesta__cta:focus-visible {
  outline: 2px solid var(--texto-principal);
  outline-offset: 3px;
}

/* Ordenemos la idea: el principal domina; WhatsApp es la alternativa visible */
.ordenar__cta {
  min-height: 3.75rem;
  padding: 1.1rem 2rem;
  font-size: 1rem;
}

.ordenar__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 0.5rem;
}

.ordenar__acciones .ordenar__cta,
.ordenar__acciones .ordenar__wa {
  margin-top: 0;
}

@media (max-width: 599.98px) {
  .ordenar__acciones {
    flex-direction: column;
    align-items: stretch;
  }

  .situacion__accion,
  .quien__cta,
  .forma__cta,
  .propuesta__cta {
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .ordenar__acciones {
    grid-column: 2;
  }
}

/* Índice y "Siguiente": legibles, no diminutos */
.situaciones__opcion {
  font-size: 0.9375rem;
}

.situaciones__siguiente {
  min-height: 3rem;
  font-size: 1rem;
}

/* =====================================================================
   PORTADA · cuatro escenas comerciales (octubre de 2026)
   Inicio → Trabajo real → Oferta → Hablemos. Fondo claro de productora: papel, tinta y el rojo del logo.
   El video real es el protagonista; los visores y las tarjetas de video conservan su fondo oscuro.
   Scroll nativo: el encabezado es el mapa del recorrido y cada capítulo es un ancla normal.
   Todo lo de aquí vale solo con <html class="portada"> (la portada); las otras páginas no cambian.
   ===================================================================== */
html.portada {
  /* LIENZO OSCURO (17 oct. 2026). Un solo fondo continuo para las cuatro escenas; nada de campos de color
     que se turnan. Los nombres se conservan para no reescribir 2.600 lineas: "papel" es ahora el lienzo y
     "tinta" es la luz. Las superficies suben en pequenos escalones, no en bloques de otro color. */
  --papel: #0e0e10;         /* el lienzo: unico fondo de la portada */
  --papel-2: #15151a;       /* un escalon arriba, para separar sin cambiar de color */
  --blanco: #1a1a21;        /* tarjetas y paneles */
  --superficie: #16161c;
  --superficie-2: #1c1c23;
  --sobre-oscuro: #f7f4ee;  /* la tinta clara cuando hace falta nombrarla aparte */
  --tinta: #f2efe9;         /* la tinta, ahora clara */
  --tinta-2: #b7b3ab;
  --tinta-3: #8b867e;
  --regla: oklch(1 0 0 / 11%);
  --regla-fuerte: oklch(1 0 0 / 20%);
  /* El rojo del logo para formas y titulares grandes; los otros dos, para texto y botones legibles sobre papel */
  --rojo: oklch(0.62 0.24 18);
  --rojo-texto: #ff5c73;    /* sobre oscuro el rojo se aclara, no se hunde */
  --rojo-accion: #ff1a41;
  --ancho: 84rem;
  --gutter: 1rem;
  --header-height: calc(6.5rem + 2px);
  scroll-padding-top: var(--header-height);
  background: var(--papel);
}

@media (min-width: 640px) {
  html.portada {
    --gutter: 1.5rem;
  }
}

@media (min-width: 1024px) {
  html.portada {
    --gutter: 2.5rem;
    --header-height: calc(4.75rem + 1px);
  }
}

html.portada body {
  --background: var(--papel);
  --foreground: var(--tinta);
  --texto-principal: var(--tinta);
  --texto-secundario: var(--tinta-2);
  --texto-micro: var(--tinta-3);
  --linea: var(--regla);
  --border: var(--regla);
  --panel: var(--blanco);
  --muted-foreground: var(--tinta-3);
  background: var(--papel);
  color: var(--tinta);
}

/* Islas oscuras: el visor de casos, el video completo, las tarjetas de video y el pie */
html.portada :is(.panel-cliente, .composicion, .hero-video, .tarjeta-cliente, .presentacion, .pie) {
  --background: var(--superficie);
  --foreground: var(--sobre-oscuro);
  --texto-principal: oklch(0.93 0.004 285);
  --texto-secundario: oklch(0.74 0.008 285);
  --texto-micro: oklch(0.58 0.01 285);
  --linea: oklch(1 0 0 / 10%);
  --border: oklch(1 0 0 / 10%);
  --panel: #131316;
  --muted-foreground: oklch(0.68 0.01 285);
  color: var(--foreground);
}

html.portada :where(a, button, textarea, input, summary):focus-visible {
  outline: 2px solid var(--rojo-texto);
  outline-offset: 3px;
}

html.portada .ancla {
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

/* ---------- Encabezado: el mapa del recorrido ---------- */
html.portada .encabezado,
html.portada .encabezado--activo {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  border-bottom: 1px solid var(--regla);
  background: color-mix(in oklab, var(--papel) 93%, transparent);
  box-shadow: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.barra__fila {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "logo . homa"
    "mapa mapa mapa";
  align-items: center;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.barra__logo {
  grid-area: logo;
  display: flex;
  align-items: center;
  min-height: 3.5rem;
}

.barra__logo img {
  display: block;
  width: 6.25rem;
  height: auto;
}

.barra__homa {
  grid-area: homa;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: 2.75rem;
  padding-inline: 1rem;
  border: 1px solid var(--regla-fuerte);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
  transition: border-color 200ms ease, background-color 200ms ease;
}

.barra__homa:hover {
  border-color: var(--tinta);
}

.barra__homa-largo {
  display: none;
}

.mapa {
  grid-area: mapa;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  border-top: 1px solid var(--regla);
}

.mapa__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.mapa__paso {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 3rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tinta-3);
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms ease;
}

.mapa__num {
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}

.mapa__paso::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  bottom: -1px;
  left: 0.35rem;
  height: 3px;
  background: var(--rojo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 350ms var(--suave, ease);
}

.mapa__paso:hover {
  color: var(--tinta);
}

.mapa__paso[aria-current] {
  color: var(--tinta);
}

.mapa__paso[aria-current] .mapa__num {
  color: var(--rojo-texto);
}

.mapa__paso[aria-current]::after {
  transform: scaleX(1);
}

/* Hablemos se distingue siempre: es la acción */
.mapa__paso--contacto {
  color: var(--rojo-texto);
}

.mapa__paso--contacto .mapa__num {
  display: none;
}

.mapa__paso--contacto::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--rojo);
}

@media (max-width: 359px) {
  .mapa__num {
    display: none;
  }
}

@media (min-width: 1024px) {
  .barra__fila {
    grid-template-areas: "logo mapa homa";
    column-gap: 2rem;
    min-height: var(--header-height);
  }

  .barra__logo img {
    width: 7.25rem;
  }

  .barra__homa-largo {
    display: inline;
  }

  .mapa {
    justify-self: center;
    margin: 0;
    padding: 0;
    border-top: 0;
  }

  .mapa__lista {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .mapa__paso {
    min-height: var(--header-height);
    padding-inline: 1rem;
    font-size: 0.9375rem;
  }

  .mapa__paso::after {
    right: 1rem;
    left: 1rem;
  }

  .mapa__paso--contacto {
    min-height: 2.75rem;
    margin-left: 0.75rem;
    padding-inline: 1.25rem;
    border-radius: 999px;
    background: var(--rojo-accion);
    color: #fff;
  }

  .mapa__paso--contacto::before {
    background: #fff;
  }

  .mapa__paso--contacto:hover {
    color: #fff;
    background: var(--superficie-2);
  }

  .mapa__paso--contacto::after {
    right: 1.25rem;
    left: 1.25rem;
    bottom: -0.85rem;
  }

  .mapa__paso--contacto[aria-current] {
    color: #fff;
  }
}

/* ---------- 01 · Impacto ---------- */
/* main ya deja el espacio del encabezado fijo (padding-top: var(--header-height)) */
html.portada .impacto {
  position: relative;
  padding-top: 0;
  background: var(--papel);
}

.impacto__escena {
  display: grid;
  gap: 1rem;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 0 var(--gutter) 2.5rem;
}

/* Celular: el reel de borde a borde, con el titular encima */
.impacto__marco {
  position: relative;
  isolation: isolate;
  height: clamp(16rem, 41svh, 30rem);
  margin-inline: calc(var(--gutter) * -1);
  overflow: hidden;
  background: #111 url("media/hero-poster-v.jpg") center 35% / cover;
}

.impacto__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.impacto__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.3) 0%, transparent 26%, transparent 42%, rgb(0 0 0 / 0.8) 100%);
  pointer-events: none;
}

.impacto__cabeza {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  bottom: 1.1rem;
  left: var(--gutter);
  color: #fff;
}

.impacto__etiqueta {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.88);
}

.impacto__titulo {
  margin: 0;
  max-width: 9ch;
  font-family: var(--font-display);
  font-stretch: 78%;
  font-size: clamp(2.9rem, 13.5vw, 4.5rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.impacto__titulo span {
  color: var(--rojo);
}

.impacto__play {
  position: absolute;
  z-index: 2;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0 1rem 0 0.6rem;
  border: 0;
  border-radius: 999px;
  background: rgb(255 253 249 / 0.94);
  color: var(--tinta);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 200ms ease, transform 200ms ease;
}

.impacto__play:hover {
  background: #fff;
}

.impacto__play-icono {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--rojo-accion);
  color: #fff;
}

.impacto__play-icono svg {
  width: 0.6rem;
  margin-left: 2px;
}

.impacto__bajada {
  max-width: 38rem;
  margin: 0.4rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--tinta-2);
  text-wrap: pretty;
}

.impacto__bajada strong {
  font-weight: 600;
  color: var(--tinta);
}

.impacto__rutas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.ruta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--tinta);
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tinta);
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.ruta:hover {
  background: var(--superficie-2);
  color: var(--sobre-oscuro);
}

.ruta--principal {
  grid-column: 1 / -1;
  border-color: var(--rojo-accion);
  background: var(--rojo-accion);
  font-size: 1rem;
  color: #fff;
}

.ruta--principal:hover {
  border-color: var(--tinta);
}

.impacto__credito {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--tinta-2);
}

.impacto__credito strong {
  color: var(--tinta);
}

.impacto__credito a {
  display: inline-block;
  padding-block: 0.3rem;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: var(--rojo);
  text-underline-offset: 0.22em;
}

.impacto__foto {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  object-fit: cover;
}

/* Pantallas bajas (navegador de Instagram o WhatsApp): las tres rutas siguen en la primera pantalla */
@media (max-width: 1023px) and (max-height: 720px) {
  .impacto__escena {
    gap: 0.75rem;
  }

  .impacto__marco {
    height: clamp(13rem, 33svh, 30rem);
  }

  .impacto__bajada {
    font-size: 1rem;
  }

  .ruta {
    min-height: 3rem;
  }
}

@media (max-width: 1023px) and (max-height: 600px) {
  .impacto__marco {
    height: 10.5rem;
  }

  .impacto__titulo {
    font-size: 2.6rem;
  }
}

/* Escritorio: titular y rutas a la izquierda, el reel grande a la derecha */
@media (min-width: 1024px) {
  .impacto__escena {
    grid-template-columns: minmax(0, 1.2fr) minmax(19rem, 0.8fr);
    grid-template-rows: 1fr auto auto auto auto 1fr;
    column-gap: clamp(2.5rem, 5vw, 5.5rem);
    row-gap: 1.75rem;
    min-height: calc(100svh - var(--header-height));
    padding-block: 2.5rem 3rem;
  }

  .impacto__marco {
    display: contents;
  }

  .impacto__video {
    position: relative;
    z-index: 0;
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: stretch;
    height: 100%;
    min-height: 30rem;
    max-height: calc(100svh - var(--header-height) - 5.5rem);
    border-radius: 0.75rem;
    background: #111 url("media/hero-poster-v.jpg") center 35% / cover;
    box-shadow: 0 40px 80px -48px rgb(0 0 0 / 0.55);
  }

  .impacto__velo {
    display: none;
  }

  .impacto__cabeza {
    position: static;
    grid-column: 1;
    grid-row: 2;
    color: var(--tinta);
  }

  .impacto__etiqueta {
    margin-bottom: 1.25rem;
    color: var(--tinta-3);
  }

  .impacto__titulo {
    font-size: clamp(4.75rem, 8.4vw, 9rem);
    line-height: 0.88;
  }

  .impacto__play {
    position: relative;
    top: auto;
    right: auto;
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: end;
    justify-self: start;
    margin: 0 0 1rem 1rem;
  }

  .impacto__bajada {
    grid-column: 1;
    grid-row: 3;
    margin: 0;
    font-size: 1.1875rem;
  }

  .impacto__rutas {
    grid-column: 1;
    grid-row: 4;
    display: flex;
    flex-wrap: wrap;
  }

  .ruta,
  .ruta--principal {
    min-width: 13rem;
  }

  .proceso {
    grid-column: 1;
    grid-row: 5;
  }

  .impacto__credito {
    grid-column: 1;
    grid-row: 6;
    align-self: end;
    margin: 0;
  }
}

/* ---------- Escenas: cabecera de capítulo y titulares ---------- */
html.portada .escena:not(.impacto) {
  position: relative;
  padding-block: clamp(4rem, 9vw, 7.5rem);
  border-top: 1px solid var(--regla);
}

html.portada .escena > .contenedor {
  max-width: var(--ancho);
  padding-inline: var(--gutter);
}

.escena__capitulo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

.escena__capitulo > span {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--superficie-2);
  font-size: 0.75rem;
  letter-spacing: 0;
  color: var(--sobre-oscuro);
}

.escena__capitulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--regla);
}

html.portada :is(.escena__titulo, .clientes .clientes__titulo, .hablemos .seccion__titulo) {
  max-width: 14ch;
  margin: 0;
  font-family: var(--font-display);
  font-stretch: 78%;
  font-size: clamp(2.6rem, 1.5rem + 4.8vw, 5.5rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.01em;
  color: var(--tinta);
  text-wrap: balance;
}

html.portada .texto-rojo {
  color: var(--rojo);
}

.escena__texto {
  max-width: 40rem;
  margin: 1.25rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinta-2);
}

/* ---------- 02 · Trabajo real ---------- */
html.portada .clientes {
  overflow: clip;
  background: var(--papel-2);
}

html.portada .clientes__encabezado {
  display: grid;
  gap: 1rem;
  max-width: var(--ancho);
  margin: 0 auto 2rem;
  padding-inline: var(--gutter);
}

html.portada .clientes__encabezado > div {
  display: block;
}

html.portada .clientes__nota {
  max-width: 26rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  text-align: left;
  color: var(--tinta-2);
}

@media (min-width: 900px) {
  html.portada .clientes__encabezado {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 26rem);
    align-items: end;
  }
}

/* La fila: scroll táctil normal; el carril es el que se desplaza (script.js mide sobre él) */
html.portada .clientes__rail {
  --borde: max(var(--gutter), calc((100vw - var(--ancho)) / 2 + var(--gutter)));
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--borde);
  /* Sin "scroll-behavior: smooth": hacia que cada reordenamiento de la costura
     se ANIMARA en vez de saltar, y eso es lo que se sentia como un tiron. Las
     flechas no lo necesitan (llaman a scrollTo con behavior "smooth") y los
     reinicios de los filtros se quieren instantaneos. */
  scrollbar-width: none;
}

html.portada .clientes__rail::-webkit-scrollbar {
  display: none;
}

html.portada .clientes__fila {
  display: flex;
  gap: 0.875rem;
  width: max-content;
  margin: 0;
  padding: 0.5rem var(--borde) 1.25rem;
  overflow: visible;
  scroll-snap-type: none;
  list-style: none;
}

html.portada .clientes__item {
  flex: 0 0 auto;
  margin: 0;
  scroll-snap-align: start;
}

html.portada .tarjeta-cliente {
  width: clamp(15rem, 70vw, 19rem);
  aspect-ratio: 2 / 3;
  border: 0;
  border-radius: 0.5rem;
  box-shadow: 0 24px 44px -30px rgb(0 0 0 / 0.55);
  transition: transform 300ms var(--suave, ease), box-shadow 300ms ease;
}

html.portada .tarjeta-cliente:hover {
  transform: translateY(-4px);
}

html.portada .tarjeta-cliente:focus-visible {
  outline: 3px solid var(--rojo-texto);
  outline-offset: 3px;
}

/* "Ver todos los casos": la colección completa, en grilla */
html.portada .clientes--todo .clientes__rail {
  overflow: visible;
  scroll-snap-type: none;
}

html.portada .clientes--todo .clientes__fila {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: 1rem;
  width: auto;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

html.portada .clientes--todo .tarjeta-cliente {
  width: 100%;
}

@media (min-width: 420px) and (max-width: 639px) {
  html.portada .clientes--todo .clientes__fila {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.biblioteca__controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  max-width: var(--ancho);
  margin: 0.25rem auto 0;
  padding-inline: var(--gutter);
}

.biblioteca__flechas {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

html.portada .clientes__flecha {
  position: static;
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--tinta);
  border-radius: 50%;
  background: transparent;
  color: var(--tinta);
  opacity: 1;
  transform: none;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, opacity 200ms ease;
}

html.portada .clientes__flecha[hidden] {
  display: inline-grid;
}

html.portada .clientes__flecha:disabled {
  opacity: 0.3;
  cursor: default;
}

html.portada .clientes__flecha:not(:disabled):hover {
  background: var(--superficie-2);
  color: var(--sobre-oscuro);
}

html.portada .clientes__flecha svg {
  width: 1.25rem;
  height: 1.25rem;
}

.biblioteca__cuenta {
  min-width: 4.5rem;
  margin: 0 0 0 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-2);
}

.biblioteca__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.biblioteca__boton {
  min-height: 3rem;
  padding: 0 1.15rem;
  border: 1px solid var(--tinta);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tinta);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}

.biblioteca__boton:hover,
.biblioteca__boton[aria-pressed="true"] {
  background: var(--superficie-2);
  color: var(--sobre-oscuro);
}

.biblioteca__boton[hidden] {
  display: none;
}

html.portada .clientes--todo .biblioteca__flechas .clientes__flecha {
  display: none;
}

html.portada .puente {
  max-width: var(--ancho);
  margin: 2.5rem auto 0;
  padding-inline: var(--gutter);
  font-size: 1rem;
  color: var(--tinta-2);
}

html.portada .puente a {
  display: inline-block;
  padding-block: 0.4rem;
  font-weight: 700;
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: var(--rojo);
  text-underline-offset: 0.22em;
}

/* ---------- 03 · Oferta ---------- */
html.portada .oferta {
  background: var(--papel);
}

.escena__cabeza {
  display: grid;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

@media (min-width: 900px) {
  .escena__cabeza {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    column-gap: 4rem;
    align-items: end;
  }

  .escena__cabeza .escena__capitulo {
    grid-column: 1 / -1;
  }

  .escena__cabeza .escena__texto {
    margin: 0;
  }
}

.modalidades {
  display: grid;
  gap: 1rem;
}

.modalidad {
  position: relative;
  display: grid;
  align-content: start;
  gap: 1.5rem;
  min-width: 0;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid var(--regla);
  border-radius: 0.75rem;
  background: var(--superficie);
  color: var(--tinta);
}

/* Las anclas de siempre (#sin-material, #plan-campana, #plan-edicion) no ocupan lugar en la grilla */
.modalidad > .ancla {
  position: absolute;
  top: 0;
  left: 0;
}

/* Mes a mes, la protagonista: el bloque en tinta */
.modalidad--principal {
  border-color: var(--regla-fuerte);
  background: var(--superficie-2);
  color: var(--sobre-oscuro);
}

.modalidad__etiqueta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rojo-texto);
}

.modalidad__etiqueta > span:first-child {
  font-variant-numeric: tabular-nums;
  color: var(--tinta-3);
}

.modalidad--principal .modalidad__etiqueta {
  color: #ff5c73;
}

.modalidad--principal .modalidad__etiqueta > span:first-child {
  color: rgb(244 241 235 / 0.6);
}

.modalidad__sello {
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--rojo-accion);
  letter-spacing: 0.06em;
  color: #fff;
}

.modalidad__titulo {
  max-width: 16ch;
  margin: 0.75rem 0 0;
  font-family: var(--font-display);
  font-stretch: 80%;
  font-size: clamp(1.9rem, 1.35rem + 2.2vw, 3.25rem);
  font-weight: 800;
  line-height: 0.98;
  color: inherit;
  text-wrap: balance;
}

.modalidad__resumen {
  max-width: 36rem;
  margin: 1rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: rgb(244 241 235 / 0.84);
}

.modalidad__datos {
  display: grid;
  margin: 0;
}

.modalidad__datos > div {
  display: grid;
  gap: 0.25rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--regla);
}

.modalidad--principal .modalidad__datos > div {
  border-top-color: rgb(255 255 255 / 0.16);
}

.modalidad__datos dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.modalidad--principal .modalidad__datos dt {
  color: rgb(244 241 235 / 0.62);
}

.modalidad__datos dd {
  margin: 0;
  font-size: 0.975rem;
  line-height: 1.55;
  color: var(--tinta);
}

.modalidad--principal .modalidad__datos dd {
  color: var(--sobre-oscuro);
}

@media (min-width: 640px) {
  .modalidad__datos > div {
    grid-template-columns: 9.5rem minmax(0, 1fr);
    gap: 1rem;
  }
}

.modalidad__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
}

.caso-mini {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
  max-width: 26rem;
  color: inherit;
  text-decoration: none;
}

.caso-mini img {
  flex: none;
  width: 3.75rem;
  height: 5rem;
  border-radius: 0.375rem;
  background: #222;
  object-fit: cover;
}

.caso-mini__texto {
  display: grid;
  gap: 0.1rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--tinta-2);
}

.caso-mini__texto strong {
  color: var(--tinta);
}

.caso-mini:hover strong {
  text-decoration: underline;
  text-decoration-color: var(--rojo);
  text-underline-offset: 0.2em;
}

.caso-mini__etiqueta {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rojo-texto);
}

.modalidad--principal .caso-mini__texto {
  color: rgb(244 241 235 / 0.78);
}

.modalidad--principal .caso-mini__texto strong {
  color: var(--sobre-oscuro);
}

.modalidad--principal .caso-mini__etiqueta {
  color: #ff5c73;
}

.modalidad__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.8rem 1.5rem;
  border: 1px solid var(--tinta);
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tinta);
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.modalidad__cta:hover {
  background: var(--superficie-2);
  color: var(--sobre-oscuro);
}

.modalidad__cta--principal {
  border-color: var(--rojo-accion);
  background: var(--rojo-accion);
  color: #fff;
}

.modalidad__cta--principal:hover {
  border-color: var(--sobre-oscuro);
  background: var(--papel);
  color: var(--tinta);
}

.oferta__guia .modalidad__cta--principal:hover {
  border-color: var(--tinta);
  background: var(--superficie-2);
  color: var(--sobre-oscuro);
}

@media (max-width: 639px) {
  .modalidad__cta {
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .modalidades {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .modalidad--principal {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
  }

  .modalidad--principal .modalidad__pie {
    grid-column: 1 / -1;
  }

  .modalidad:not(.modalidad--principal) {
    grid-template-rows: auto 1fr auto;
  }
}

.oferta__guia {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
  padding: clamp(1.25rem, 4vw, 2.25rem);
  border-left: 4px solid var(--rojo);
  border-radius: 0.75rem;
  background: var(--papel-2);
}

.oferta__guia h3 {
  max-width: 24ch;
  margin: 0;
  font-family: var(--font-display);
  font-stretch: 80%;
  font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.25rem);
  font-weight: 800;
  line-height: 1;
}

.oferta__guia p {
  max-width: 42rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tinta-2);
}

@media (min-width: 900px) {
  .oferta__guia {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 3rem;
    align-items: center;
  }

  .oferta__guia h3,
  .oferta__guia p {
    grid-column: 1;
  }

  .oferta__guia .modalidad__cta {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* ---------- 04 · Hablemos ---------- */
html.portada .hablemos {
  background: var(--papel-2);
}

html.portada .hablemos__grilla {
  display: grid;
  gap: 2rem;
}

html.portada .hablemos__cabeza {
  position: static;
}

html.portada .hablemos .seccion__titulo {
  font-size: clamp(2.6rem, 1.5rem + 4vw, 4.75rem);
}

html.portada .hablemos .cabeza__texto {
  max-width: 34rem;
  margin: 1.25rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinta-2);
}

.hablemos__despues p {
  max-width: 34rem;
  margin: 1rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--tinta-2);
}

.hablemos__despues strong {
  color: var(--tinta);
}

@media (min-width: 1024px) {
  html.portada .hablemos__grilla {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
}

html.portada .chat {
  border: 1px solid var(--regla);
  border-radius: 0.75rem;
  background: var(--superficie);
  box-shadow: 0 30px 60px -44px rgb(0 0 0 / 0.45);
}

html.portada .chat__msg--homa {
  background: var(--papel);
  color: var(--tinta);
}

html.portada .chat__msg--tu {
  background: var(--rojo-accion);
  color: #fff;
}

html.portada .chat__msg--resumen {
  border: 1px solid var(--regla-fuerte);
  border-top: 3px solid var(--rojo);
  background: var(--superficie);
  color: var(--tinta);
}

html.portada .chat__resumen-titulo {
  color: var(--rojo-texto);
}

html.portada .chat__resumen dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.75rem;
  align-items: center;
}

html.portada .chat__resumen dt,
html.portada .chat__resumen dd {
  grid-column: 1;
}

.chat__cambiar {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 2.5rem;
  padding: 0 0.85rem;
  border: 1px solid var(--regla-fuerte);
  border-radius: 999px;
  background: var(--superficie);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tinta);
  cursor: pointer;
}

.chat__cambiar:hover {
  border-color: var(--tinta);
}

html.portada .chat__nota--revisa {
  font-weight: 600;
  color: var(--tinta);
}

.chat__por-que {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--tinta-3);
}

html.portada :is(.chat__opcion, .chat__boton) {
  min-height: 2.75rem;
  border-color: var(--tinta);
  color: var(--tinta);
}

html.portada :is(.chat__opcion, .chat__boton):hover {
  border-color: var(--tinta);
  background: var(--papel);
}

html.portada .chat__boton--principal {
  border-color: var(--rojo-accion);
  background: var(--rojo-accion);
  color: #fff;
}

html.portada .chat__boton--principal:hover {
  background: var(--superficie-2);
  border-color: var(--tinta);
}

html.portada :is(.chat__contacto input, .chat__entrada textarea) {
  border-color: var(--regla-fuerte);
  background: #fff;
  color: var(--tinta);
}

@media (max-width: 639px) {
  html.portada .chat__opciones .chat__boton {
    width: 100%;
    justify-content: center;
    min-height: 3rem;
  }
}

html.portada .chat__enviar {
  background: var(--rojo-accion);
}

html.portada #preguntas {
  margin-top: clamp(3.5rem, 7vw, 6rem);
}

/* Pie: la única franja en tinta, para cerrar */
html.portada .pie {
  border-top: 0;
  background: var(--superficie-2);
}

/* Proceso en cuatro etapas (hero): ideas, grabación, edición y publicación (adicional) */
.proceso {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
  margin: 0.25rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--regla);
  list-style: none;
}

.proceso li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.55rem;
  align-items: baseline;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta);
}

.proceso__num {
  display: inline-grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--superficie-2);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--sobre-oscuro);
  transform: translateY(0.1rem);
}

.proceso__nota {
  grid-column: 2;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--tinta-3);
}

@media (min-width: 640px) {
  .proceso {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.impacto__credito a.impacto__harry {
  padding: 0;
  color: inherit;
}

/* Filtros de la biblioteca */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: var(--ancho);
  margin: 0 auto 1.25rem;
  padding-inline: var(--gutter);
}

.filtros[hidden] {
  display: none;
}

.filtros__opcion {
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--regla-fuerte);
  border-radius: 999px;
  background: var(--superficie);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tinta);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.filtros__opcion:hover {
  border-color: var(--tinta);
}

.filtros__opcion[aria-pressed="true"] {
  border-color: var(--tinta);
  background: var(--superficie-2);
  color: var(--sobre-oscuro);
}

@media (max-width: 639px) {
  .filtros {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .filtros::-webkit-scrollbar {
    display: none;
  }

  .filtros__opcion {
    flex: none;
  }
}

html.portada .clientes__item[hidden] {
  display: none;
}

.modalidad__sello--claro {
  border: 1px solid var(--regla-fuerte);
  background: transparent;
  color: var(--tinta-2);
}

/* Chat: inicio rápido */
.chat__rapidos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 1rem 1rem;
}

.chat__rapidos[hidden] {
  display: none;
}

.chat__rapido {
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--tinta);
  border-radius: 999px;
  background: var(--superficie);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--tinta);
  text-align: left;
  cursor: pointer;
}

.chat__rapido:hover {
  background: var(--papel);
}

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

  html.portada .clientes__rail {
    scroll-behavior: auto;
  }

  .mapa__paso::after,
  .ruta,
  .impacto__play,
  html.portada .tarjeta-cliente {
    transition: none;
  }

  html.portada .tarjeta-cliente:hover {
    transform: none;
  }
}

/* =====================================================================
   PORTADA C3 · "cartela en color" (octubre de 2026). Dirección aprobada por Harry.
   Base clara (papel) para diferenciar Homa Media de la página oscura de Harry Homa. Los tres colores del logo
   (negro, blanco y el rosa #ff1a41) se usan como campos completos que se turnan por momento. Se aplica sección por
   sección: por ahora, encabezado e Inicio. Una sola familia (Clash Grotesk), con el contraste light / semibold.
   Contraste medido: sobre rosa, tinta negra (5,5:1) y blanco solo en tamaño grande (3,8:1); sobre papel, el rosa solo
   en tamaños grandes y marcas, y el texto pequeño de acento en #c8102e (5,2:1).
   ===================================================================== */
html.portada {
  --rosa: #ff1a41;          /* el del logo, ahora solo como acento */
  --rojo-texto: #ff5c73;    /* el rojo aclarado, legible sobre el lienzo oscuro */
  --negro: #0e0e10;         /* igual al lienzo: las franjas negras ya no cortan la pagina */
  --header-height: 3.25rem;
}

@media (min-width: 900px) {
  html.portada {
    --header-height: 4.25rem;
  }
}

/* ---------- Encabezado: una fila sobre papel; el círculo del logo marca el capítulo ---------- */
html.portada .encabezado,
html.portada .encabezado--activo {
  border-bottom: 0;
  background: var(--papel);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html.portada .barra__fila {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: var(--header-height);
  min-height: 0;
  max-width: none;
  padding: 0 var(--gutter);
}

html.portada .barra__logo {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
}

html.portada .barra__logo img {
  width: 4.75rem;
}

html.portada .mapa {
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
}

html.portada .mapa__lista {
  display: flex;
  gap: 0.15rem;
}

html.portada .mapa__paso {
  justify-content: flex-start;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0 0.45rem;
  border-radius: 0;
  background: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tinta-2);
}

html.portada .mapa__paso::before,
html.portada .mapa__paso::after {
  content: none;
}

html.portada .mapa__paso[aria-current],
html.portada .mapa__paso:hover {
  color: var(--tinta);
}

html.portada .mapa__paso--contacto,
html.portada .mapa__paso--contacto:hover,
html.portada .mapa__paso--contacto[aria-current] {
  background: none;
  color: var(--rojo-texto);
}

html.portada .mapa__num {
  display: none;
}

.mapa__punto {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.mapa__paso[aria-current] .mapa__punto {
  border-color: var(--rosa);
  background: var(--rosa);
}

/* En celular el logo hace de "Inicio" y "Homa y el equipo" se reserva para escritorio */
html.portada .mapa__lista li:first-child,
html.portada .barra__homa {
  display: none;
}

@media (min-width: 900px) {
  html.portada .barra__logo img {
    width: 6.5rem;
  }

  html.portada .mapa__lista {
    gap: 0.5rem;
  }

  html.portada .mapa__lista li:first-child {
    display: list-item;
  }

  html.portada .barra__homa {
    display: inline-flex;
    margin-left: 1rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--tinta-2);
  }

  html.portada .barra__homa:hover {
    color: var(--tinta);
  }
}

/* ---------- 01 · Inicio: campo rosa, titular grande, el reel a sangre ---------- */
html.portada .inicio {
  position: relative;
  background: var(--papel);
}

.inicio__rosa {
  padding: 1.1rem var(--gutter) 1.5rem;
  background: transparent;
  color: var(--tinta);
}

.inicio__etiqueta {
  margin: 0 0 0.6rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

html.portada .inicio__titulo {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(2.9rem, 13.4vw, 10rem);
  font-weight: 300;
  line-height: 0.88;
  letter-spacing: -0.05em;
  color: var(--tinta);
}

html.portada .inicio__titulo span {
  display: block;
  font-weight: 600;
  color: var(--rosa);
}

.inicio__reel {
  position: relative;
  height: clamp(12rem, 34svh, 36rem);
  margin: 1rem calc(var(--gutter) * -1) 0;
  overflow: hidden;
  background: var(--negro) url("media/hero-poster-v.jpg") center 30% / cover;
}

.inicio__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.inicio__ver {
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0 var(--gutter);
  border: 0;
  background: #000;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: #f2efea;
  cursor: pointer;
}

.inicio__ver-icono {
  display: inline-flex;
  color: var(--rosa);
}

.inicio__ver-icono svg {
  width: 0.7rem;
  height: auto;
}

.inicio__ver:hover {
  color: #fff;
}

.inicio__bajada {
  max-width: 36rem;
  margin: 1rem 0 0;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--tinta-2);
}

.inicio__bajada strong {
  font-weight: 600;
}

.inicio__rutas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.25rem;
  margin-top: 1rem;
}

.inicio__cta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.25rem;
  padding: 0 1.1rem;
  background: var(--rosa);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: transform 120ms ease;
}

.inicio__cta:hover {
  color: #fff;
  background: #d81236;
}

.inicio__cta:active {
  transform: translateY(1px);
}

.inicio__ir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.55);
}

.inicio__ir:hover {
  box-shadow: inset 0 -3px 0 var(--rosa);
}

.inicio__rosa :focus-visible {
  outline-color: var(--rosa);
}

/* Debajo del rosa, en papel: el proceso y el crédito */
.inicio__papel {
  padding: 2.75rem 0 0.5rem;
  background: var(--papel);
  color: var(--tinta);
}

.inicio__proceso {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1.25rem;
  margin: 0 var(--gutter);
  padding: 0;
  list-style: none;
}

.inicio__proceso li {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
}

.inicio__num {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 0.85;
  color: var(--rosa);
}

.inicio__nota {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--tinta-2);
}

.inicio__credito {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 2.25rem var(--gutter) 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--tinta-2);
}

.inicio__foto {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
}

.inicio__credito strong {
  font-weight: 600;
  color: var(--tinta);
}

/* Enlaces en línea: el área táctil crece con el relleno sin separar los renglones */
.inicio__credito a {
  padding-block: 0.75rem;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: var(--rosa);
  text-underline-offset: 0.2em;
}

/* Pantallas bajas (navegador de Instagram o WhatsApp): el botón principal sigue en la primera pantalla */
@media (max-height: 700px) and (max-width: 767px) {
  .inicio__reel {
    height: clamp(10rem, 27svh, 18rem);
  }

  html.portada .inicio__titulo {
    font-size: 12vw;
  }

  .inicio__bajada {
    margin-top: 0.7rem;
    font-size: 0.875rem;
  }
}

/* Escritorio: el campo rosa ocupa la pantalla; el titular a la izquierda y el reel vertical a la derecha, a sangre */
@media (min-width: 900px) {
  .inicio__rosa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.42fr);
    grid-template-rows: 1fr auto auto auto auto;
    column-gap: 3.5rem;
    min-height: calc(100svh - var(--header-height));
    padding: 0 0 0 var(--gutter);
  }

  .inicio__etiqueta {
    grid-column: 1;
    grid-row: 2;
    margin-top: 3rem;
  }

  html.portada .inicio__titulo {
    grid-column: 1;
    grid-row: 3;
    font-size: clamp(5rem, 9vw, 10rem);
  }

  .inicio__reel {
    grid-column: 2;
    grid-row: 1 / -1;
    height: auto;
    margin: 0;
  }

  .inicio__bajada {
    grid-column: 1;
    grid-row: 4;
    font-size: 1.0625rem;
  }

  .inicio__rutas {
    grid-column: 1;
    grid-row: 5;
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 1.5rem 0 3rem;
  }

  .inicio__cta {
    min-width: 20rem;
  }

  .inicio__ir {
    min-width: 11rem;
  }

  .inicio__papel {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    align-items: center;
    column-gap: 3rem;
    padding: 3rem var(--gutter);
  }

  .inicio__proceso {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
  }

  .inicio__credito {
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inicio__cta {
    transition: none;
  }
}

/* ---------- C3 · Franja de credibilidad (negro), justo debajo del rosa ---------- */
.inicio__confianza {
  padding: 1.5rem var(--gutter) 1.75rem;
  background: var(--negro);
  color: #f2efea;
}

.confianza__rotulo {
  margin: 0 0 0.6rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rosa);
}

.confianza__nombres {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.45;
}

.confianza__nombres li:not(:last-child)::after {
  content: "·";
  margin: 0 0.5rem;
  color: var(--rosa);
}

.confianza__datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  box-shadow: inset 0 1px 0 rgb(242 239 234 / 0.16);
}

.confianza__datos p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #c9c4bc;
}

.confianza__datos strong {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.1;
  color: #f2efea;
}

.confianza__datos span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  color: #8c877f;
}

@media (min-width: 900px) {
  .inicio__confianza {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.8fr);
    align-items: baseline;
    column-gap: 2.5rem;
    padding-block: 1.5rem;
  }

  .confianza__rotulo {
    margin: 0;
  }

  .confianza__datos {
    margin: 0;
    padding: 0;
    box-shadow: none;
  }
}

/* ---------- C3 · 02 · Encontremos el punto (papel): orienta antes de mostrar el trabajo ---------- */
.claqueta {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  font-size: 0.9375rem;
  font-weight: 600;
}

.claqueta span {
  color: var(--rojo-texto);
  font-variant-numeric: tabular-nums;
}

html.portada .punto {
  padding: 4.5rem 0 4rem;
  background: var(--papel);
  color: var(--tinta);
}

.punto__cabeza {
  padding: 0 var(--gutter);
}

html.portada .punto__titulo {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(2.1rem, 8.6vw, 6.5rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--tinta);
}

html.portada .punto__titulo b {
  display: block;
  font-weight: 600;
}

.punto__intro {
  max-width: 32rem;
  margin: 1rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--tinta-2);
}

/* El collage: material real, composición irregular pero deliberada; nada encima */
.punto__collage {
  position: relative;
  height: clamp(15rem, 64vw, 30rem);
  margin: 2rem var(--gutter) 0;
}

.punto__pieza {
  position: absolute;
  display: block;
  object-fit: cover;
  background: var(--papel-2);
}

.punto__pieza--a { top: 4%; left: 0; width: 36%; height: 92%; }
.punto__pieza--b { top: 0; left: 39%; width: 27%; height: 52%; }
.punto__pieza--c { top: 8%; left: 69%; width: 31%; height: 56%; }
.punto__pieza--d { top: 57%; left: 39%; width: 34%; height: 34%; }
.punto__pieza--e { top: 68%; left: 76%; width: 24%; height: 32%; }

/* Las cuatro necesidades: filas amplias, una abierta a la vez */
.punto__elegir {
  margin: 2.5rem var(--gutter) 0;
}

.punto__pregunta {
  margin: 0 0 0.75rem;
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.punto__opcion > summary {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 4rem;
  padding: 0.9rem 0;
  box-shadow: inset 0 1.5px 0 var(--regla);
  list-style: none;
  cursor: pointer;
}

.punto__opcion > summary::-webkit-details-marker {
  display: none;
}

.punto__num {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--rosa);
  font-variant-numeric: tabular-nums;
}

.punto__frase {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
}

.punto__marca {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--tinta-3);
  border-radius: 50%;
}

.punto__opcion[open] > summary .punto__marca {
  border-color: var(--rosa);
  background: var(--rosa);
}

.punto__opcion > summary:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 2px;
}

.punto__respuesta {
  padding: 0.25rem 0 1.75rem 3rem;
}

.punto__etiqueta {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rojo-texto);
}

.punto__modalidad {
  margin: 0.25rem 0 0;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.punto__texto {
  max-width: 36rem;
  margin: 0.6rem 0 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tinta-2);
}

.punto__caso {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  max-width: 28rem;
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--tinta-2);
  text-decoration: none;
}

.punto__caso img {
  flex: none;
  width: 3.5rem;
  height: 4.5rem;
  object-fit: cover;
}

.punto__caso strong {
  display: block;
  font-weight: 600;
  color: var(--tinta);
}

.punto__caso:hover strong {
  text-decoration: underline;
  text-decoration-color: var(--rosa);
  text-underline-offset: 0.2em;
}

.punto__salidas {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.punto__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.25rem;
  padding: 0 1.1rem;
  background: var(--rosa);
  font-size: 1rem;
  font-weight: 600;
  color: #000;
  text-decoration: none;
  transition: transform 120ms ease;
}

.punto__cta:hover {
  background: #000;
  color: #f2efea;
}

.punto__cta:active {
  transform: translateY(1px);
}

.punto__ver {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: var(--rosa);
  text-underline-offset: 0.25em;
}

.punto__otro {
  padding-top: 1.5rem;
  box-shadow: inset 0 1.5px 0 var(--regla);
}

.punto__otro p {
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  color: var(--tinta-2);
}

@media (min-width: 900px) {
  html.portada .punto {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(2.5rem, 5vw, 5rem);
    padding: 7rem var(--gutter) 6rem;
  }

  .punto__cabeza {
    grid-column: 1;
    padding: 0;
  }

  html.portada .punto__titulo {
    font-size: clamp(3.25rem, 5vw, 6rem);
  }

  .punto__collage {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    height: min(70svh, 40rem);
    margin: 0;
  }

  .punto__elegir {
    grid-column: 1;
    margin: 2.5rem 0 0;
  }

  .punto__salidas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
  }

  .punto__cta {
    min-width: 18rem;
  }
}

/* ---------- C3 · 02 · Trabajo real: la sala oscura donde corren los videos ---------- */
html.portada .clientes--sala {
  padding-block: 5rem 4rem;
  border-top: 0;
  background: var(--negro);
  color: #f2efea;
}

html.portada .clientes--sala .escena__capitulo {
  margin-bottom: 0.9rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rosa);
}

html.portada .clientes--sala .escena__capitulo > span,
html.portada .clientes--sala .escena__capitulo::after {
  display: none;
}

html.portada .clientes--sala .clientes__titulo {
  max-width: none;
  font-family: var(--font-sans);
  font-size: clamp(2.3rem, 10.4vw, 6.5rem);
  font-weight: 300;
  font-stretch: 100%;
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: #f2efea;
}

html.portada .clientes--sala .clientes__titulo .texto-rojo {
  display: block;
  font-weight: 600;
  color: var(--rosa);
}

html.portada .clientes--sala .clientes__nota {
  color: #a9a49c;
}

/* Filtros: palabras con el círculo del logo, sin cajas */
html.portada .clientes--sala .filtros {
  gap: 0.25rem 1.25rem;
}

html.portada .clientes--sala .filtros__opcion {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #a9a49c;
}

html.portada .clientes--sala .filtros__opcion::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

html.portada .clientes--sala .filtros__opcion[aria-pressed="true"] {
  background: none;
  color: #f2efea;
}

html.portada .clientes--sala .filtros__opcion[aria-pressed="true"]::before {
  border-color: var(--rosa);
  background: var(--rosa);
}

/* Tarjetas: el video con su cuadro completo y el texto debajo, nunca encima */
html.portada .clientes--sala .tarjeta-cliente,
html.portada .clientes--sala .tarjeta-cliente:hover {
  display: flex;
  flex-direction: column;
  width: min(84vw, 22rem);
  height: auto;
  aspect-ratio: auto;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
  color: #f2efea;
}

html.portada .clientes--sala .tarjeta-cliente__video {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  background: #000;
  filter: none;
}

html.portada .clientes--sala .tarjeta-cliente__vineta {
  display: none;
}

html.portada .clientes--sala .tarjeta-cliente__info {
  position: static;
  gap: 0.1rem;
  padding: 0.85rem 0 0;
}

html.portada .clientes--sala .tarjeta-cliente__tipo {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rosa);
}

html.portada .clientes--sala .tarjeta-cliente__tipo::before {
  content: none;
}

html.portada .clientes--sala .tarjeta-cliente__nicho {
  font-family: var(--font-sans);
  font-stretch: 100%;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #f2efea;
}

html.portada .clientes--sala .tarjeta-cliente .tarjeta-cliente__nombre {
  font-size: 1rem;
  font-weight: 500;
  color: #f2efea;
}

html.portada .clientes--sala .tarjeta-cliente__categoria {
  font-size: 0.9375rem;
  color: #a9a49c;
}

html.portada .clientes--sala .tarjeta-cliente__cifra {
  margin-top: 0.3rem;
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-transform: none;
  color: #f2efea;
}

html.portada .clientes--sala .tarjeta-cliente:focus-visible {
  outline: 2px solid var(--rosa);
  outline-offset: 4px;
}

html.portada .clientes--sala.clientes--todo .tarjeta-cliente {
  width: 100%;
}

/* Controles: flechas en círculo y acciones como enlaces subrayados */
html.portada .clientes--sala .clientes__flecha {
  border: 1.5px solid #f2efea;
  color: #f2efea;
}

html.portada .clientes--sala .clientes__flecha:not(:disabled):hover {
  background: #f2efea;
  color: #000;
}

html.portada .clientes--sala .biblioteca__cuenta {
  color: #a9a49c;
}

html.portada .clientes--sala .biblioteca__boton,
html.portada .clientes--sala .biblioteca__boton[aria-pressed="true"],
html.portada .clientes--sala .biblioteca__boton:hover {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-weight: 500;
  color: #f2efea;
  text-decoration: underline;
  text-decoration-color: var(--rosa);
  text-underline-offset: 0.25em;
}

html.portada .clientes--sala .puente {
  color: #a9a49c;
}

html.portada .clientes--sala .puente a {
  color: #f2efea;
}

html.portada .clientes--sala :focus-visible {
  outline-color: var(--rosa);
}

@media (min-width: 900px) {
  html.portada .clientes--sala {
    padding-block: 8rem 6rem;
  }

  html.portada .clientes--sala .clientes__titulo {
    font-size: clamp(3.5rem, 5.6vw, 6.5rem);
  }

  html.portada .clientes--sala .tarjeta-cliente,
  html.portada .clientes--sala .tarjeta-cliente:hover {
    width: clamp(18rem, 26vw, 25rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .punto__cta {
    transition: none;
  }
}


/* =====================================================================
   LIENZO OSCURO · bloques nuevos del 17 de octubre de 2026
   El proceso de cinco pasos, el bloque del equipo de la escena 2, el
   "¿Cómo trabajamos?" que reemplazó las tablas de cinco filas, y el
   título de las preguntas frecuentes, que no tenía regla propia y por eso
   se montaba con el texto de alrededor.
   ===================================================================== */

/* ---------- El proceso: cinco pasos, no cuatro ---------- */
@media (min-width: 900px) {
  html.portada .inicio__proceso {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ---------- Escena 2 · el equipo detrás del trabajo ---------- */
html.portada .equipo {
  display: grid;
  gap: 1.75rem;
  margin-top: 4.5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--regla);
}

@media (min-width: 900px) {
  html.portada .equipo {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
  }
}

html.portada .equipo__toma {
  margin: 0;
  overflow: hidden;
  background: var(--superficie);
}

html.portada .equipo__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

html.portada .equipo__rotulo {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rojo-texto);
}

html.portada .equipo__titulo {
  margin: 0.5rem 0 0;
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 4.4vw, 2.75rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--tinta);
}

html.portada .equipo__intro {
  max-width: 34rem;
  margin: 1rem 0 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tinta-2);
}

html.portada .equipo__gente {
  display: grid;
  gap: 0.8rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

html.portada .equipo__gente li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--tinta-2);
}

html.portada .equipo__gente img {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  object-fit: cover;
}

html.portada .equipo__gente strong {
  display: block;
  font-weight: 600;
  color: var(--tinta);
}

html.portada .equipo__enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.75rem;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--rosa);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
}

html.portada .equipo__enlace:hover {
  color: var(--rojo-texto);
}

/* ---------- Escena 3 · "¿Cómo trabajamos?" (reemplaza las tablas) ---------- */
html.portada .modalidad__como {
  margin-top: 1.5rem;
}

html.portada .modalidad--principal .modalidad__como {
  margin-top: 0;
}

html.portada .modalidad__como-titulo {
  margin: 0 0 0.9rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rojo-texto);
}

html.portada .modalidad__como > p {
  max-width: 38rem;
  margin: 0 0 0.75rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tinta-2);
}

html.portada .modalidad__como > p:last-child {
  margin-bottom: 0;
}

/* Los pasos van numerados en cifras pequeñas, no en círculos: nada de "01 · 02 · 03" de plantilla */
html.portada .modalidad__pasos {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

html.portada .modalidad__pasos li {
  position: relative;
  padding-left: 1.9rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tinta-2);
  counter-increment: paso;
}

html.portada .modalidad__pasos li::before {
  content: counter(paso);
  position: absolute;
  top: 0.15rem;
  left: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rojo-texto);
  font-variant-numeric: tabular-nums;
}

html.portada .modalidad__pasos strong {
  font-weight: 600;
  color: var(--tinta);
}

/* ---------- Escena 4 · el título de las preguntas frecuentes ---------- */
html.portada .preguntas {
  margin-top: 3.5rem;
}

html.portada .preguntas__titulo {
  position: static;
  margin: 0 0 1.25rem;
  padding: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--tinta);
}


/* =====================================================================
   PLANES · revelación progresiva (17 de octubre de 2026)
   Cada modalidad se presenta compacta y amplía el detalle por niveles.
   El alto se anima con grid-template-rows (0fr → 1fr), no con max-height:
   así no hay saltos de maquetación ni alturas inventadas a ojo.
   ===================================================================== */
html.portada .modalidad__ampliar {
  display: flex;
  flex-direction: column;
  margin-top: 1.5rem;
}

html.portada .modalidad--principal .modalidad__ampliar {
  margin-top: 0;
}

/* El control: ancho completo y cómodo de tocar, con el estado siempre visible */
html.portada .modalidad__mas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0;
  border: 0;
  border-top: 1px solid var(--regla);
  background: none;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tinta);
  text-align: left;
  cursor: pointer;
  transition: color 180ms ease;
}

html.portada .modalidad__mas:hover {
  color: var(--rojo-texto);
}

html.portada .modalidad__mas-icono {
  display: inline-flex;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--rojo-texto);
  transition: transform 280ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

html.portada .modalidad__mas-icono svg {
  width: 100%;
  height: 100%;
}

html.portada .modalidad[data-abierto] .modalidad__mas-icono {
  transform: rotate(180deg);
}

/* El panel: cerrado ocupa 0fr y queda fuera del foco y de los lectores de pantalla */
html.portada .modalidad__detalle {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

html.portada .modalidad__detalle > * {
  overflow: hidden;
  min-height: 0;
  visibility: hidden;
  transition: visibility 0s linear 280ms;
}

html.portada .modalidad[data-abierto] .modalidad__detalle {
  grid-template-rows: 1fr;
}

html.portada .modalidad[data-abierto] .modalidad__detalle > * {
  visibility: visible;
  transition-delay: 0s;
}

html.portada .modalidad__detalle-caja > :first-child {
  padding-top: 0.5rem;
}

html.portada .modalidad__detalle .modalidad__como {
  margin-top: 0;
}

html.portada .modalidad__inversion {
  margin-top: 1.5rem;
}

html.portada .modalidad__inversion p:not(.modalidad__como-titulo) {
  max-width: 38rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tinta-2);
}

@media (prefers-reduced-motion: reduce) {
  html.portada .modalidad__detalle,
  html.portada .modalidad__mas-icono,
  html.portada .modalidad__mas {
    transition: none;
  }
}


/* =====================================================================
   PORTADA · el lenguaje del 10 de octubre, en oscuro (17 oct. 2026)
   Harry eligió el diseño de aquella portada (commit c039dc7) como lenguaje de
   las dos marcas. /harry ya lo tiene en papel; aquí va el mismo en oscuro:
   misma familia y mismo ancho de display, la toma a sangre detrás del hero,
   los rótulos con su filete y los botones en píldora.
   Lo que no se toca: el contenido, que ya responde al enfoque de manejo de redes.
   ===================================================================== */

/* ---------- 1. El display real es Archivo ----------
   La portada pedía "PP Talisman", que no se carga en ninguna parte: Harry la ve
   porque la tiene instalada en Windows y el público veía Archivo de respaldo.
   Se nombra lo que de verdad llega, con el mismo ancho extendido que /harry. */
html.portada {
  --font-display: "Archivo", "Arial Narrow", sans-serif;
  --ancho-display: 112%;
}

html.portada :is(
  .inicio__titulo,
  .seccion__titulo,
  .escena__titulo,
  .clientes__titulo,
  .modalidad__titulo,
  .equipo__titulo
) {
  font-family: var(--font-display);
  font-stretch: var(--ancho-display);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.025em;
}

html.portada .inicio__titulo {
  font-weight: 800;
}

html.portada .inicio__titulo span {
  font-weight: 800;
}

/* ---------- 2. Rótulos con el filete corto delante ---------- */
html.portada :is(.escena__capitulo, .inicio__etiqueta, .equipo__rotulo, .confianza__rotulo) {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

html.portada :is(.escena__capitulo, .inicio__etiqueta, .equipo__rotulo, .confianza__rotulo)::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 2px;
  background: var(--rosa);
}

/* ---------- 3. Botones en píldora ---------- */
html.portada :is(.inicio__cta, .inicio__ir, .modalidad__cta, .chat__rapido, .boton, .biblioteca__boton) {
  border-radius: 999px;
}

/* ---------- 4. El hero: la toma a sangre, con velo ----------
   Al revés que en /harry, aquí el velo oscurece para que la tinta clara se lea. */
html.portada .inicio {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

html.portada .inicio__rosa {
  position: relative;
  min-height: min(82svh, 44rem);
  align-content: end;
}

html.portada .inicio__reel {
  position: absolute;
  inset: 0;
  z-index: -2;
  height: 100%;
  margin: 0;
  border-radius: 0;
}

html.portada .inicio__reel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgb(14 14 16 / 0.78) 0%,
    rgb(14 14 16 / 0.45) 28%,
    rgb(14 14 16 / 0.82) 62%,
    var(--papel) 94%
  );
}

html.portada .inicio__rosa > :not(.inicio__reel) {
  position: relative;
  z-index: 1;
}

/* El botón del reel se queda por encima del velo, abajo a la derecha */
html.portada .inicio__ver {
  z-index: 2;
}

@media (min-width: 900px) {
  html.portada .inicio__rosa {
    grid-template-columns: minmax(0, 1fr);
  }

  html.portada .inicio__reel {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
  }

  /* En escritorio el velo se vuelve horizontal: papel sólido donde va el texto,
     la toma respirando a la derecha */
  html.portada .inicio__reel::after {
    background:
      linear-gradient(180deg, rgb(14 14 16 / 0.3) 0%, transparent 30%, rgb(14 14 16 / 0.45) 100%),
      linear-gradient(90deg, var(--papel) 0%, var(--papel) 38%, rgb(14 14 16 / 0.94) 58%, rgb(14 14 16 / 0.66) 82%, rgb(14 14 16 / 0.35) 100%);
  }

  /* La tinta no cae sobre la toma */
  html.portada .inicio__rosa > :not(.inicio__reel) {
    max-width: 40rem;
  }
}


/* =====================================================================
   PORTADA · Escena 03 y selección de proyectos (17 oct. 2026)
   El equipo pasó a escena propia y los trabajos adicionales salieron del
   carrusel: no son el caso 06, son una selección más ligera.
   ===================================================================== */

/* ---------- Escena 03 · Quién hace el trabajo ---------- */
html.portada .escena-equipo {
  padding-block: clamp(3rem, 8vw, 6rem) 0;
}

html.portada .escena__cabeza--sola {
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

html.portada .escena-equipo .equipo {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ---------- Selección de proyectos ---------- */
html.portada .seleccion {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--regla);
}

html.portada .seleccion__rotulo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rojo-texto);
}

html.portada .seleccion__rotulo::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 2px;
  background: var(--rosa);
}

html.portada .seleccion__fila {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

@media (min-width: 820px) {
  html.portada .seleccion__fila {
    grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
    gap: clamp(2rem, 5vw, 3.5rem);
  }
}

html.portada .seleccion__titulo {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: var(--ancho-display);
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.5rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--tinta);
}

html.portada .seleccion__texto p {
  max-width: 38rem;
  margin: 0.9rem 0 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tinta-2);
}

/* La tarjeta va más pequeña que las del carrusel: es una selección, no un caso */
html.portada .seleccion .tarjeta-cliente {
  width: 100%;
  max-width: 15rem;
  margin-inline: auto;
}


/* =====================================================================
   PORTADA · texto final de Harry (17 oct. 2026)
   El titular pasó de dos palabras a una frase, así que baja de tamaño;
   y entran el rótulo del proceso, la pregunta del chat y el cierre.
   ===================================================================== */

/* El titular ya no es "Tu equipo de contenido.": con una frase entera,
   13.4vw se desbordaba. */
html.portada .inicio__titulo--frase {
  font-size: clamp(1.9rem, 5.6vw, 4.25rem);
  line-height: 1;
}

@media (min-width: 900px) {
  html.portada .inicio__titulo--frase {
    font-size: clamp(2.5rem, 4.4vw, 4.5rem);
  }
}

html.portada .inicio__proceso-rotulo {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rojo-texto);
}

html.portada .chat__pregunta-rapidos {
  margin: 1.25rem 0 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tinta);
}

/* ---------- Cierre ---------- */
html.portada .cierre {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: clamp(2.5rem, 6vw, 3.5rem);
  border-top: 1px solid var(--regla);
  text-align: center;
}

html.portada .cierre__titulo {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: var(--ancho-display);
  font-size: clamp(1.75rem, 1rem + 3vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--tinta);
}

html.portada .cierre__texto {
  max-width: 34rem;
  margin: 1rem auto 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--tinta-2);
}

html.portada .cierre__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  margin-top: 1.75rem;
  padding: 0 1.6rem;
  border-radius: 999px;
  background: var(--rosa);
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: background-color 160ms ease;
}

html.portada .cierre__cta:hover {
  background: #d81236;
}

@media (prefers-reduced-motion: reduce) {
  html.portada .cierre__cta {
    transition: none;
  }
}


/* ---------- Arreglos de maqueta del texto final (17 oct. 2026) ----------
   El proceso en cinco columnas se aplastaba y los numerales gigantes se comían
   las palabras. Harry lo escribió con flechas, así que se lee como una línea. */
html.portada .inicio__proceso {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.85rem;
  grid-template-columns: none;
}

@media (min-width: 900px) {
  html.portada .inicio__proceso {
    grid-template-columns: none;
  }
}

html.portada .inicio__proceso li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.85rem;
  font-size: clamp(0.9375rem, 0.9rem + 0.3vw, 1.0625rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta);
}

html.portada .inicio__proceso li:not(:last-child)::after {
  content: "→";
  font-weight: 400;
  color: var(--rojo-texto);
}

/* Los numerales sobran cuando la secuencia ya se lee con flechas */
html.portada .inicio__proceso .inicio__num {
  display: none;
}

/* Los dos datos de autoridad necesitaban aire: a 97 px se partían en cuatro líneas */
html.portada .confianza__datos {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

@media (min-width: 900px) {
  html.portada .inicio__confianza {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }

  html.portada .confianza__rotulo {
    grid-column: 1 / -1;
  }
}


/* La pregunta que antecede al botón del hero (texto final de Harry, 17 oct. 2026) */
html.portada .inicio__pregunta {
  max-width: 32rem;
  margin: 1.75rem 0 0;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--tinta);
}

html.portada .inicio__rutas {
  margin-top: 1rem;
}


/* La pregunta del mes a mes salió del hero (17 oct. 2026): la responde la
   tarjeta mensual. Los botones recuperan su fila. */
html.portada .inicio__rosa .inicio__rutas {
  grid-row: 5;
}

/* Con la frase nueva el titular pedía tres líneas: algo más de caja y un punto menos */
@media (min-width: 900px) {
  html.portada .inicio__rosa > :not(.inicio__reel) {
    max-width: 44rem;
  }

  html.portada .inicio__titulo--frase {
    font-size: clamp(2.25rem, 3.9vw, 3.9rem);
  }
}


/* El botón del reel vivía abajo a la izquierda y, con la pregunta nueva, se
   montaba con el texto. Se va al lado del video, que es lo que reproduce. */
@media (min-width: 900px) {
  html.portada .inicio__ver {
    left: auto;
    right: var(--gutter);
    bottom: clamp(2rem, 5vw, 4rem);
  }
}


/* En pantallas anchas la frase partía "gestionadas" sola. Con más caja y un
   punto menos de cuerpo entra en dos líneas, que es como se lee. */
@media (min-width: 1200px) {
  html.portada .inicio__rosa > :not(.inicio__reel) {
    max-width: 56rem;
  }

  html.portada .inicio__titulo--frase {
    font-size: clamp(2.25rem, 3.1vw, 2.9rem);
  }

  html.portada .inicio__bajada,
  html.portada .inicio__pregunta {
    max-width: 40rem;
  }
}


/* En celular el botón del reel se apoya en el borde inferior del hero y rozaba
   con "Ver proyectos reales": el contenido termina más arriba. */
@media (max-width: 899px) {
  html.portada .inicio__rosa {
    padding-bottom: 4.75rem;
  }
}


/* =====================================================================
   HERO · abrir el video tocando la pantalla (17 oct. 2026)
   El revelado circular ya existía en script.js pero su animación de salida
   apuntaba a las clases del hero viejo (.hero__titulo-a, .hero__bloque…),
   que ya no existen: el círculo se abría y el texto se quedaba quieto.
   Aquí se conecta a las clases actuales, escalonada de abajo hacia arriba.
   ===================================================================== */

/* El área del video invita a tocarse; el texto conserva su cursor */
html.portada .inicio__rosa,
html.portada .inicio__reel {
  cursor: pointer;
}

html.portada .inicio__rosa > :not(.inicio__reel) {
  cursor: auto;
}

html.portada .inicio__rosa :is(a, button) {
  cursor: pointer;
}

/* El contenido del hero cae mientras el círculo descubre el video */
html.portada .hero--abierto
  :is(
    .inicio__etiqueta,
    .inicio__titulo,
    .inicio__bajada,
    .inicio__pregunta,
    .inicio__rutas,
    .inicio__ver,
    .inicio__confianza,
    .inicio__papel
  ) {
  animation: hero-caer 620ms cubic-bezier(0.5, 0, 0.75, 0.2) forwards;
  pointer-events: none;
}

/* De abajo hacia arriba: lo último que se leyó es lo primero que se va */
html.portada .hero--abierto .inicio__papel { animation-delay: 0ms; }
html.portada .hero--abierto .inicio__confianza { animation-delay: 40ms; }
html.portada .hero--abierto .inicio__rutas { animation-delay: 80ms; }
html.portada .hero--abierto .inicio__pregunta { animation-delay: 120ms; }
html.portada .hero--abierto .inicio__bajada { animation-delay: 160ms; }
html.portada .hero--abierto .inicio__titulo { animation-delay: 200ms; }
html.portada .hero--abierto .inicio__etiqueta { animation-delay: 240ms; }
html.portada .hero--abierto .inicio__ver { animation-delay: 0ms; }

/* ---------- "Ver el reel" baja de jerarquía ----------
   Ahora la invitación es la pantalla entera; el botón solo recuerda que hay
   un video y cuánto dura. */
html.portada .inicio__ver {
  padding: 0.5rem 0.9rem;
  background: rgb(14 14 16 / 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  opacity: 0.68;
  transition: opacity 220ms ease, background-color 220ms ease;
}

html.portada .inicio__ver:hover,
html.portada .inicio__ver:focus-visible {
  opacity: 1;
  background: rgb(14 14 16 / 0.72);
}

html.portada .inicio__ver-icono {
  transform: scale(0.85);
}

@media (prefers-reduced-motion: reduce) {
  html.portada .hero--abierto
    :is(.inicio__etiqueta, .inicio__titulo, .inicio__bajada, .inicio__pregunta, .inicio__rutas, .inicio__ver, .inicio__confianza, .inicio__papel) {
    animation: none;
    opacity: 0;
  }

  html.portada .inicio__ver {
    transition: none;
  }
}


/* =====================================================================
   BARRA DE MARCAS · una línea que gira sin fin (17 oct. 2026)
   Los logos venían en jpg, png y webp, a color y con fondos distintos. Se
   procesaron a silueta blanca sobre transparente, así que aquí basta con
   bajarles la opacidad: la barra se lee de un solo tono y no compite con
   el titular. Se detiene al pasar por encima y con "reducir movimiento".
   ===================================================================== */
html.portada .marcas {
  overflow: hidden;
  margin-top: 0.75rem;
  /* Los extremos se desvanecen para que no haya un corte seco */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

html.portada .marcas {
  --marcas-hueco: clamp(2.25rem, 5vw, 4rem);
  --marcas-copias: 6;
}

html.portada .marcas__pista {
  display: flex;
  align-items: center;
  /* Sin hueco propio: el hueco entre copias lo pone el padding del grupo, y
     así una copia mide siempre lo mismo y la cuenta de abajo es exacta. */
  gap: 0;
  width: max-content;
  animation: marcas-correr 48s linear infinite;
}

html.portada .marcas__grupo {
  display: flex;
  align-items: center;
  gap: var(--marcas-hueco);
  padding-right: var(--marcas-hueco);
}

html.portada .marcas:hover .marcas__pista,
html.portada .marcas:focus-within .marcas__pista {
  animation-play-state: paused;
}

html.portada .marcas img {
  width: auto;
  height: clamp(1.5rem, 1.3rem + 0.6vw, 2.125rem);
  opacity: 0.42;
  transition: opacity 260ms ease;
}

html.portada .marcas img:hover {
  opacity: 0.85;
}

/* La pista lleva seis copias idénticas y corre exactamente una: al terminar,
   lo que se ve es la copia siguiente en la misma posición y el salto no existe.
   Seis y no dos porque lo que queda a la derecha para tapar la pantalla son las
   copias que aún no han pasado: con dos solo quedaba una (unos 640 px) y en
   cualquier escritorio se abría el vacío. */
@keyframes marcas-correr {
  to {
    transform: translateX(calc(-100% / var(--marcas-copias)));
  }
}

@media (prefers-reduced-motion: reduce) {
  html.portada .marcas__pista {
    animation: none;
    flex-wrap: wrap;
    width: auto;
  }

  /* Quieta, las copias sobran: se muestra una sola, envuelta en varias líneas */
  html.portada .marcas__grupo {
    flex-wrap: wrap;
    padding-right: 0;
  }

  html.portada .marcas__grupo[aria-hidden="true"] {
    display: none;
  }

  html.portada .marcas {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---------- El titular gana contraste de peso ----------
   "por un mismo equipo." es lo que diferencia a Homa: va más pesado que el
   resto de la frase, que baja un escalón. */
html.portada .inicio__titulo--frase {
  font-weight: 700;
}

html.portada .inicio__titulo--frase span {
  font-weight: 900;
}


/* El proceso se mudó del hero a Servicios: ahí explica cómo se trabaja sin
   competir con el titular ni alargar la primera pantalla. */
html.portada .escena__cabeza .inicio__proceso-rotulo {
  margin: 2rem 0 0.75rem;
}

html.portada .proceso--servicios {
  margin: 0;
  padding: 0;
  list-style: none;
}


/* =====================================================================
   QUÉ HACEMOS · tres columnas, no una lista que alarga la página
   (17 oct. 2026) Las tres modalidades iban una debajo de otra ocupando
   todo el ancho: la sección medía 2.029 px de alto con el centro vacío.
   Ahora van lado a lado. No son tarjetas con borde: son superficies que
   se levantan un escalón de tono, y el número es el que ordena.
   ===================================================================== */
@media (min-width: 1000px) {
  html.portada .modalidades {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    align-items: stretch;
  }

  html.portada .modalidad--principal,
  html.portada .modalidad:not(.modalidad--principal) {
    grid-column: auto;
    grid-template-columns: none;
    grid-template-rows: none;
  }

  html.portada .modalidad--principal .modalidad__pie {
    grid-column: auto;
  }

  html.portada .modalidad--principal .modalidad__ampliar {
    margin-top: 1.5rem;
  }
}

html.portada .modalidad {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 0;
  border-radius: 8px;
  background: var(--superficie);
}

/* La mensual es el servicio principal: se levanta un escalón más */
html.portada .modalidad--principal {
  border: 0;
  background: var(--superficie-2);
}

/* El número ordena la sección: grande, no una etiqueta diminuta */
html.portada .modalidad__etiqueta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin: 0 0 0.75rem;
  font-family: var(--font-sans);
  font-size: var(--t-ui, 0.9375rem);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta-2);
}

html.portada .modalidad__etiqueta > span:first-child {
  flex: none;
  width: 100%;
  font-family: var(--font-display);
  font-stretch: var(--ancho-display);
  font-size: clamp(2.75rem, 2rem + 2.4vw, 4rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--rosa);
}

/* El sello es una píldora que resume, no otra línea de texto suelta */
html.portada .modalidad__sello {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--rosa);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}

html.portada .modalidad__sello--claro {
  background: rgb(242 239 233 / 0.12);
  color: var(--tinta);
}

html.portada .modalidad__titulo {
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  line-height: 1.05;
}

html.portada .modalidad__resumen {
  font-size: 1rem;
  line-height: 1.55;
}

html.portada .modalidad__pie {
  margin-top: auto;
  padding-top: 1.5rem;
}

/* El caso real, más compacto dentro de la columna */
@media (min-width: 1000px) {
  html.portada .modalidad .caso-mini img {
    width: 3.25rem;
  }

  html.portada .modalidad__cta {
    width: 100%;
    justify-content: space-between;
  }
}


/* En un carrusel que gira sin fin, "1-3 de 6" ya no dice nada: se retira y
   quedan las flechas, que es lo que de verdad se usa. */
html.portada .biblioteca__cuenta {
  display: none;
}


/* El rojo del logo (#ff1a41) con texto blanco da 3,8:1 y hace falta 4,5:1.
   Los rellenos usan el rojo hondo, que es el mismo de /harry y sí pasa;
   el #ff1a41 se queda para texto y acentos sobre el lienzo oscuro. */
html.portada :is(.inicio__cta, .modalidad__cta--principal, .modalidad__sello, .cierre__cta) {
  background: #c8102e;
  color: #fff;
}

html.portada :is(.inicio__cta, .modalidad__cta--principal, .cierre__cta):hover {
  background: #a50d26;
  color: #fff;
}


/* La escena se llama "El equipo": su enlace principal es la página del equipo.
   El de Harry queda al lado, en segundo plano. */
html.portada .equipo__enlaces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
  margin-top: 1.75rem;
}

html.portada .equipo__enlaces .equipo__enlace {
  margin-top: 0;
}

html.portada .equipo__enlace--harry {
  border-bottom-color: transparent;
  font-weight: 500;
  color: var(--tinta-2);
}

html.portada .equipo__enlace--harry:hover {
  color: var(--rojo-texto);
}


/* =====================================================================
   QUÉ HACEMOS · tres pliegues y el hueco aprovechado (17 oct. 2026)
   Entre el control y el caso real quedaba un vacío grande. Ahí va ahora la
   línea que ayuda a elegir, y el caso real es un segundo pliegue cuyo enlace
   abre las piezas a pantalla completa.
   ===================================================================== */

/* La marca de abierto pasó del artículo al panel: cada pliegue es suyo */
html.portada .modalidad__detalle[data-abierto] {
  grid-template-rows: 1fr;
}

html.portada .modalidad__detalle[data-abierto] > * {
  visibility: visible;
  transition-delay: 0s;
}

html.portada .modalidad__mas[aria-expanded="true"] .modalidad__mas-icono {
  transform: rotate(180deg);
}

/* La línea que ayuda a decidir: es lo primero que se lee tras el resumen */
html.portada .modalidad__para {
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tinta);
}

html.portada .modalidad__ampliar--caso {
  margin-top: 0;
}

html.portada .modalidad__mas--caso {
  font-weight: 500;
  color: var(--tinta-2);
}

html.portada .modalidad__mas--caso:hover {
  color: var(--tinta);
}

/* El caso dentro del pliegue: la imagen manda y el texto se lee */
html.portada .modalidad__ampliar--caso .caso-mini {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: center;
  padding: 0.25rem 0 0.75rem;
  text-decoration: none;
}

html.portada .modalidad__ampliar--caso .caso-mini img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 4px;
}

html.portada .modalidad__ampliar--caso .caso-mini__etiqueta {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rojo-texto);
}

html.portada .modalidad__ampliar--caso .caso-mini strong {
  display: block;
  font-size: 1.0625rem;
  line-height: 1.2;
  color: var(--tinta);
}

html.portada .modalidad__ampliar--caso .caso-mini__texto > span:last-child {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--tinta-2);
}

/* El tercer pliegue: el enlace abre las piezas a pantalla completa */
html.portada .modalidad__ampliar--caso .caso-mini::after {
  content: "Ver las piezas →";
  grid-column: 2;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--rojo-texto);
}

/* Invitación a seguir el recorrido hacia la sección de proyectos. */
html.portada .confianza__datos {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  box-shadow: inset 0 1px 0 rgb(242 239 234 / 0.16);
}

html.portada .confianza__siguiente {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  max-width: 100%;
  min-height: 2.25rem;
  margin: 0.1rem 0 0;
  padding-block: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: #d8d3cc;
  text-decoration: none;
  transition: color 180ms ease;
}

html.portada .confianza__siguiente span {
  color: var(--rosa);
  transition: transform 180ms ease;
}

html.portada .confianza__siguiente:hover {
  color: #f2efea;
}

html.portada .confianza__siguiente:hover span {
  transform: translateY(3px);
}

html.portada .confianza__siguiente:focus-visible {
  outline: 2px solid var(--rosa);
  outline-offset: 4px;
}

@media (min-width: 900px) {
  html.portada .marcas,
  html.portada .confianza__datos {
    grid-column: 1 / -1;
  }

  html.portada .confianza__datos {
    margin-top: 0.75rem;
    padding-top: 0.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.portada .confianza__siguiente,
  html.portada .confianza__siguiente span {
    transition: none;
  }
}


/* =====================================================================
   HERO v4 · "Tu equipo de contenido." (17 oct. 2026)
   El titular habia ido encogiendo hasta 2.9rem porque la frase anterior
   ("Tus redes, pensadas y gestionadas por un mismo equipo") pedia tres
   lineas. Con tres palabras el hero vuelve a tener titular de portada:
   dos lineas en escritorio, dos en celular, y el acento en "contenido".
   ===================================================================== */
html.portada .inicio__titulo--frase {
  font-size: clamp(2.75rem, 11vw, 4.5rem);
  letter-spacing: -0.03em;
}

@media (min-width: 900px) {
  html.portada .inicio__titulo--frase {
    font-size: clamp(3.5rem, 7vw, 6rem);
  }
}

@media (min-width: 1200px) {
  html.portada .inicio__titulo--frase {
    font-size: clamp(4.5rem, 6.4vw, 7rem);
  }
}

/* La frase descriptiva es una sola: cabe en una caja mas corta y se lee de
   un tiron en lugar de cruzar toda la pantalla. */
html.portada .inicio__bajada {
  max-width: 34rem;
}


/* =====================================================================
   CARRUSEL · control con el dedo (17 oct. 2026)
   El bucle infinito se queda tal cual (script.js reordena la fila en la
   costura). Lo que fallaba en celular: el carril tenia
   "scroll-snap-type: x mandatory" pero no "scroll-snap-stop", asi que un
   impulso corto pasaba por encima de varios puntos de anclaje y aterrizaba
   tres proyectos mas alla. Con "always" cada gesto avanza un proyecto y para.
   Solo en pantallas de dedo: en escritorio las flechas y el trackpad siguen
   pudiendo recorrer varias tarjetas de una.
   ===================================================================== */
@media (hover: none) and (pointer: coarse) {
  html.portada .clientes__item {
    scroll-snap-stop: always;
  }

  /* El bucle no debe arrastrar la pagina ni rebotar contra los extremos */
  html.portada .clientes__rail {
    overscroll-behavior-x: contain;
  }
}


/* =====================================================================
   FORMAS DE TRABAJAR CON HOMA (17 oct. 2026)
   Sustituye a las tarjetas de modalidad. Cero cajas, cero sombras, cero
   contenedores: tres piezas de la misma pagina separadas por un filete.
   Lo que organiza la lectura es el numero grande, el filete y el aire.
   Celular: una columna, de arriba abajo. Escritorio: el numero se va a su
   propia columna y la jornada abre una tercera con el rodaje.
   ===================================================================== */
html.portada .trabajos__cabeza {
  margin-bottom: clamp(2rem, 6vw, 3.5rem);
}

html.portada .trabajo {
  padding-block: clamp(2.5rem, 9vw, 4.5rem);
  border-top: 1px solid var(--linea);
}

html.portada .trabajo:first-child {
  border-top: 0;
  padding-top: 0;
}

/* ---------- El indice: numero grande y rotulo ---------- */
html.portada .trabajo__indice {
  display: flex;
  align-items: baseline;
  gap: 0.875rem;
  margin: 0 0 0.75rem;
}

html.portada .trabajo__numero {
  font-family: var(--font-display);
  font-stretch: var(--ancho-display);
  font-weight: 800;
  font-size: clamp(3.25rem, 15vw, 5rem);
  line-height: 0.78;
  letter-spacing: -0.04em;
  color: var(--rojo);
}

html.portada .trabajo__rotulo {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

/* ---------- Titular ---------- */
html.portada .trabajo__titulo {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-stretch: var(--ancho-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 10.5vw, 3.25rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
}

html.portada .trabajo__titulo em {
  display: block;
  font-style: normal;
  color: var(--rojo);
}

html.portada .trabajo--jornada .trabajo__titulo {
  font-size: clamp(2.75rem, 13vw, 4.25rem);
}

/* ---------- El rodaje: la unica imagen de la seccion ---------- */
html.portada .trabajo__rodaje {
  margin: 0 0 1.75rem;
}

html.portada .trabajo__rodaje video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #17171a;
}

html.portada .trabajo__rodaje figcaption {
  margin-top: 0.625rem;
  font-size: 0.8125rem;
  color: var(--tinta-2);
}

/* ---------- Cuerpo ---------- */
html.portada .trabajo__cuerpo > p {
  max-width: 46ch;
  margin: 0 0 1rem;
  line-height: 1.55;
}

html.portada .trabajo__entrada {
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.25rem);
  line-height: 1.45;
}

html.portada .trabajo__hechos {
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  max-width: 46ch;
  list-style: none;
}

html.portada .trabajo__hechos li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* El filete corto delante, el mismo gesto que los rotulos de la portada */
html.portada .trabajo__hechos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.625rem;
  height: 1px;
  background: var(--rojo);
}

html.portada .trabajo__cuerpo > .trabajo__subtitulo {
  margin: 1.5rem 0 0;
  font-size: 0.875rem;
  color: var(--tinta-2);
}

html.portada .trabajo__subtitulo + .trabajo__hechos {
  margin-top: 0.625rem;
}

/* Los 3 formatos del pack: el nombre arriba, la descripcion debajo */
html.portada .trabajo__formatos {
  gap: 0.875rem;
}

html.portada .trabajo__formatos strong {
  display: block;
  font-weight: 700;
  color: var(--tinta);
}

/* El "desde" de cada modalidad: cifra en display, la condicion en pequeño */
html.portada .trabajo__cuerpo > .trabajo__precio {
  margin: 1.75rem 0 0;
  font-family: var(--font-display);
  font-stretch: var(--ancho-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 6vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--tinta);
}

html.portada .trabajo__precio span {
  font-family: inherit;
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--tinta-2);
}

html.portada .trabajo__prueba {
  margin: 1.5rem 0 0;
  font-size: 0.875rem;
  color: var(--tinta-2);
}

html.portada .trabajo__prueba a {
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--rojo);
}

/* ---------- Acciones: enlaces de texto, no botones con caja ---------- */
html.portada .trabajo__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.75rem;
  margin: 1.75rem 0 0;
}

html.portada .trabajo__cta,
html.portada .trabajo__enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px; /* objetivo tactil comodo en celular */
}

html.portada .trabajo__cta {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--tinta);
  box-shadow: inset 0 -2px 0 0 var(--rojo);
  transition: box-shadow 200ms var(--suave, ease), color 200ms ease;
}

html.portada .trabajo__cta:hover {
  color: var(--rojo);
  box-shadow: inset 0 -2px 0 0 var(--rojo);
}

html.portada .trabajo__enlace {
  font-size: 0.9375rem;
  color: var(--rojo);
}

html.portada .trabajo__enlace:hover {
  color: var(--tinta);
}

/* ---------- El proceso cierra la seccion ---------- */
html.portada .trabajos__proceso {
  margin-top: clamp(2.5rem, 8vw, 4rem);
  padding-top: clamp(1.75rem, 5vw, 2.5rem);
  border-top: 1px solid var(--linea);
}

html.portada .trabajos__proceso .inicio__proceso-rotulo {
  margin: 0 0 1rem;
}

/* =====================================================================
   Escritorio: composicion asimetrica. El numero sale a su propia columna
   y cada pieza entra distinto: la jornada abre una tercera columna con el
   rodaje, la mensual ocupa el ancho del texto, y la edicion se corre a la
   derecha para que las tres no caigan en la misma retícula.
   ===================================================================== */
@media (min-width: 900px) {
  html.portada .trabajo {
    display: grid;
    grid-template-columns: clamp(6rem, 11vw, 10rem) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
  }

  html.portada .trabajo__indice {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: block;
    margin: 0;
  }

  html.portada .trabajo__numero {
    display: block;
    font-size: clamp(4rem, 7vw, 6.5rem);
  }

  html.portada .trabajo__rotulo {
    display: block;
    margin-top: 0.75rem;
    max-width: 9ch;
    line-height: 1.35;
  }

  html.portada .trabajo__titulo {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 1.5rem;
  }

  html.portada .trabajo__cuerpo {
    grid-column: 2;
    grid-row: 2;
  }

  /* 01 · la jornada: el rodaje ocupa su propia columna, a la altura del titular */
  html.portada .trabajo--jornada {
    grid-template-columns: clamp(6rem, 11vw, 10rem) minmax(0, 1.05fr) minmax(0, 0.9fr);
  }

  html.portada .trabajo--jornada .trabajo__titulo {
    grid-column: 2 / -1;
    font-size: clamp(3.5rem, 6.4vw, 6rem);
  }

  html.portada .trabajo--jornada .trabajo__titulo em {
    display: inline;
  }

  html.portada .trabajo--jornada .trabajo__rodaje {
    grid-column: 3;
    grid-row: 2;
    margin: 0;
  }

  html.portada .trabajo--jornada .trabajo__rodaje video {
    aspect-ratio: 3 / 4;
  }

  html.portada .trabajo--jornada .trabajo__cuerpo {
    grid-column: 2;
  }

  /* 03 · la produccion dedicada entra corrida a la derecha: rompe la retícula de las otras dos */
  html.portada .trabajo:last-child .trabajo__titulo,
  html.portada .trabajo:last-child .trabajo__cuerpo {
    margin-left: clamp(0rem, 6vw, 5rem);
  }

  html.portada .trabajos__proceso {
    margin-left: calc(clamp(6rem, 11vw, 10rem) + clamp(1.5rem, 4vw, 3.5rem));
  }
}

/* Entre 900 y 1100 px la jornada no tiene sitio para tres columnas: el texto se
   quedaba en una tira de ~200 px. Ahi el rodaje baja a ancho completo bajo el
   texto y la pieza vuelve a dos columnas, como las otras dos. */
@media (min-width: 900px) and (max-width: 1099px) {
  html.portada .trabajo--jornada {
    grid-template-columns: clamp(6rem, 11vw, 10rem) minmax(0, 1fr);
  }

  html.portada .trabajo--jornada .trabajo__titulo {
    grid-column: 2;
  }

  html.portada .trabajo--jornada .trabajo__cuerpo {
    grid-column: 2;
    grid-row: 2;
  }

  html.portada .trabajo--jornada .trabajo__rodaje {
    grid-column: 2;
    grid-row: 3;
    margin-top: 2rem;
  }

  html.portada .trabajo--jornada .trabajo__rodaje video {
    aspect-ratio: 16 / 9;
  }
}

/* =====================================================================
   TRABAJA CON HOMA · filtro conversacional (22 oct. 2026)
   Reemplaza a .trabajo/.trabajos (que quedan arriba sin uso). Tres niveles con <details>:
   la valla (.camino) -> los casos (.situacion) -> el detalle con el boton a WhatsApp.
   Sin tarjetas: se separa con aire y una linea muy suave; la profundidad la marca el tamaño de letra.
   ===================================================================== */
html.portada .caminos__cabeza {
  margin-bottom: clamp(1.75rem, 5vw, 2.5rem);
}

html.portada .caminos__titulo {
  margin: 0;
  max-width: 14ch;
  font-family: var(--font-display);
  font-stretch: var(--ancho-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 12vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
}

html.portada .caminos__titulo em {
  font-style: normal;
  color: var(--rojo-accion);
}

html.portada .caminos__guia {
  margin: 1rem 0 0;
  max-width: 38ch;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tinta-2);
}

html.portada .camino {
  border-top: 1px solid oklch(1 0 0 / 8%);
}

html.portada .camino:last-child {
  border-bottom: 1px solid oklch(1 0 0 / 8%);
}

html.portada .caminos summary {
  list-style: none;
  cursor: pointer;
}

html.portada .caminos summary::-webkit-details-marker {
  display: none;
}

html.portada .caminos summary:focus-visible {
  outline: 2px solid var(--rojo-texto);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ---------- Nivel 1: la valla ---------- */
html.portada .camino__cabeza {
  position: relative;
  display: grid;
  gap: 0.375rem;
  padding: 1.375rem 3.5rem 1.375rem 0;
}

/* La voz del cliente va primero: su situacion, no el nombre del servicio */
html.portada .camino__situacion {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--rojo-texto);
}

/* La frase de valla: la idea fuerte en el display ancho y la promesa en Clash light, el mismo contraste
   bold contra light que manda en toda la portada */
html.portada .camino__frase {
  font-size: clamp(1.625rem, 7.2vw, 3.25rem);
  line-height: 0.98;
}

html.portada .camino__fuerte {
  font-family: var(--font-display);
  font-stretch: var(--ancho-display);
  font-weight: 800;
  letter-spacing: -0.025em;
}

html.portada .camino__suave {
  font-family: var(--font-sans);
  font-weight: 300;
  letter-spacing: -0.02em;
}

/* El precio como en una valla: la cifra manda, lo demás la acompaña en pequeño */
html.portada .camino__precio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  margin-top: 0.25rem;
  color: var(--tinta-2);
}

html.portada .camino__modalidad {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tinta);
}

html.portada .camino__desde,
html.portada .camino__unidad {
  font-size: 0.8125rem;
}

html.portada .camino__cifra {
  font-family: var(--font-display);
  font-stretch: var(--ancho-display);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  color: var(--tinta);
}

/* El "+" que se vuelve "×": el unico signo de que se puede abrir */
html.portada .caminos__signo {
  position: absolute;
  right: 0;
  top: 1.5rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--papel);
  transition: transform 250ms ease, background 200ms ease;
}

html.portada .caminos__signo::before,
html.portada .caminos__signo::after {
  content: "";
  position: absolute;
  width: 0.875rem;
  height: 2px;
  background: currentColor;
}

html.portada .caminos__signo::after {
  transform: rotate(90deg);
}

html.portada .camino[open] > summary .caminos__signo {
  transform: rotate(45deg);
  background: #c8102e;
  color: #fff;
}

/* ---------- Nivel 2: los casos ---------- */
html.portada .camino__cuerpo {
  padding: 0 0 1.75rem;
}

html.portada .camino__intro {
  margin: 0 0 0.75rem;
  max-width: 44ch;
  font-size: 0.9375rem;
  color: var(--tinta-2);
}

html.portada .situacion,
html.portada .situacion--directa {
  border-top: 1px dashed oklch(1 0 0 / 10%);
}

html.portada .situacion__cabeza {
  position: relative;
  display: grid;
  gap: 0.125rem;
  padding: 0.875rem 3rem 0.875rem 0;
}

html.portada .situacion__frase {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}

html.portada .situacion__nombre {
  font-size: 0.8125rem;
  color: var(--tinta-3);
}

html.portada .situacion .caminos__signo {
  top: 50%;
  margin-top: -1rem;
  width: 2rem;
  height: 2rem;
  background: transparent;
  color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--tinta-3);
}

html.portada .situacion[open] > summary .caminos__signo {
  transform: rotate(45deg);
  color: var(--rojo-texto);
  box-shadow: inset 0 0 0 1px var(--rojo-texto);
}

/* ---------- Nivel 3: el detalle que convence y el paso a WhatsApp ---------- */
html.portada .situacion__detalle {
  max-width: 48ch;
  padding: 0.25rem 0 1.5rem;
}

html.portada .situacion__detalle p {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--tinta-2);
}

html.portada .situacion__detalle strong {
  font-weight: 600;
  color: var(--tinta);
}

/* "Para ti si…": la frase que hace que el cliente se reconozca, en Clash light grande */
html.portada .situacion__detalle .situacion__para {
  margin-bottom: 1.25rem;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.1875rem;
  line-height: 1.35;
  color: var(--tinta);
}

/* Las cifras: lo que se lleva, legible de un vistazo, sin cajas */
html.portada .situacion__cifras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 1.5rem;
}

html.portada .situacion__cifras dt {
  font-family: var(--font-display);
  font-stretch: var(--ancho-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 7vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--rojo-accion);
}

html.portada .situacion__cifras dd {
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--tinta-2);
}

html.portada .situacion__detalle .situacion__sub {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tinta);
}

html.portada .situacion__lista {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

/* Delante de cada punto, el triángulo del logo (la "A" de HOMA) */
html.portada .situacion__lista li {
  position: relative;
  padding-left: 1.125rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--tinta-2);
}

html.portada .situacion__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.5rem;
  height: 0.45rem;
  background: var(--rojo-accion);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

html.portada .situacion__detalle .situacion__resultado {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--tinta);
}

/* Nivel 4: "más detalles", para quien todavía no se convence */
html.portada .situacion__mas {
  margin-top: 1rem;
}

html.portada .situacion__mas > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--tinta-3);
}

html.portada .situacion__mas > summary::after {
  content: "+";
  font-weight: 400;
  color: var(--rojo-texto);
}

html.portada .situacion__mas[open] > summary::after {
  content: "−";
}

html.portada .situacion__mas-cuerpo {
  padding: 0.25rem 0 0.5rem;
}

html.portada .situacion__mas-cuerpo .situacion__sub:first-child {
  margin-top: 0.5rem;
}

html.portada .caminos__wpp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  margin-top: 0.5rem;
  padding: 0 1.125rem;
  border-radius: 999px;
  background: #c8102e;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}

html.portada .caminos__wpp:hover {
  background: var(--rojo-accion);
}

/* Los casos de la produccion dedicada van directo a WhatsApp */
html.portada .situacion--directa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: 0.875rem 0;
  color: var(--tinta);
  text-decoration: none;
}

html.portada .situacion__ir {
  flex: none;
  font-weight: 700;
  color: var(--rojo-texto);
}

html.portada .camino__nota {
  max-width: 46ch;
  margin: 1rem 0 0;
  font-size: 0.875rem;
  color: var(--tinta-2);
}

html.portada .camino__nota strong {
  color: var(--tinta);
}

/* ---------- La salida: lo que no esta escrito ---------- */
html.portada .caminos__otro {
  display: block;
  padding-top: 1.5rem;
  color: var(--tinta);
  text-decoration: none;
}

html.portada .caminos__otro-situacion {
  display: block;
  font-size: 0.9375rem;
  color: var(--tinta-2);
}

html.portada .caminos__otro-frase {
  display: inline;
  font-family: var(--font-display);
  font-stretch: var(--ancho-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 6.5vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  box-shadow: inset 0 -0.12em 0 var(--rojo-accion);
}

/* ---------- Escritorio: la voz del cliente sale a su propia columna ---------- */
@media (min-width: 900px) {
  html.portada .caminos__cabeza {
    display: grid;
    grid-template-columns: 1fr 22rem;
    align-items: end;
    gap: 3rem;
  }

  html.portada .caminos__guia {
    margin: 0 0 0.5rem;
  }

  html.portada .camino__cabeza {
    grid-template-columns: 15rem 1fr auto;
    align-items: baseline;
    column-gap: 2rem;
    padding: 1.75rem 4.5rem 1.75rem 0;
  }

  html.portada .camino__precio {
    justify-content: flex-end;
    white-space: nowrap;
  }

  html.portada .camino__cifra {
    font-size: 1.75rem;
  }

  html.portada .camino__cabeza > .caminos__signo {
    top: 50%;
    margin-top: -1.25rem;
  }

  html.portada .camino__cuerpo {
    padding: 0 4.5rem 2.25rem 17rem;
  }

  html.portada .situacion__cabeza {
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.portada .caminos__signo {
    transition: none;
  }
}

/* =====================================================================
   SEÑALÉTICA HOMA (22 oct. 2026, segunda versión). Cada capítulo de la portada lleva una letra del logo
   como señal, en el mismo orden en que se lee la marca: H · Proyectos reales, O · El equipo,
   M · Trabaja con Homa, A · Hablemos. Bajando por la página se deletrea HOMA, y el mapa del encabezado
   usa las mismas cuatro formas, así que el encabezado es la leyenda.
   Las formas salen medidas del logo (logo-homa-claro.png); a la H se le abren un poco las ranuras para que
   se lea como H a 12 px. El color es el del logo: H y M en tinta, O y A en el rojo.
   La sección pone la letra (--glifo); el rótulo, los puntos de las listas y el mapa la usan.
   ===================================================================== */
:root {
  --glifo-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 134 135'%3E%3Cpath d='M0 0H58V28H76V0H134V135H76V107H58V135H0Z'/%3E%3C/svg%3E");
  --glifo-o: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'%3E%3Ccircle cx='70' cy='70' r='70'/%3E%3C/svg%3E");
  --glifo-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 176 126'%3E%3Cpath d='M0 126L64 0L88 50L112 0L176 126Z'/%3E%3C/svg%3E");
  --glifo-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 123 129'%3E%3Cpath d='M61.5 0L123 129H0Z'/%3E%3C/svg%3E");
}

html.portada :is(#clientes, .confianza__rotulo, .mapa__lista > li:nth-child(1)) {
  --glifo: var(--glifo-h);
  --glifo-ratio: 1;
  --glifo-color: var(--tinta);
}

html.portada :is(#equipo, body.pagina--homa main, .mapa__lista > li:nth-child(2)) {
  --glifo: var(--glifo-o);
  --glifo-ratio: 1;
  --glifo-color: var(--rojo-accion);
}

html.portada :is(#inversion, body.pagina--homa #siguiente-paso, .mapa__lista > li:nth-child(3)) {
  --glifo: var(--glifo-m);
  --glifo-ratio: 1.4;
  --glifo-color: var(--tinta);
}

html.portada :is(#hablemos, .mapa__lista > li:nth-child(4)) {
  --glifo: var(--glifo-a);
  --glifo-ratio: 0.95;
  --glifo-color: var(--rojo-accion);
}

/* El rótulo: la letra de su capítulo y el texto en frase normal, sin mayúsculas espaciadas */
html.portada :is(.escena__capitulo, .inicio__etiqueta, .equipo__rotulo, .confianza__rotulo, .seleccion__rotulo) {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

html.portada :is(.escena__capitulo, .equipo__rotulo, .confianza__rotulo, .seleccion__rotulo)::before {
  content: "";
  flex: none;
  width: calc(0.78em * var(--glifo-ratio, 0.95));
  height: 0.78em;
  background: var(--glifo-color, var(--rojo-accion));
  clip-path: none;
  -webkit-mask: var(--glifo, var(--glifo-a)) center / contain no-repeat;
  mask: var(--glifo, var(--glifo-a)) center / contain no-repeat;
}

/* El rótulo del hero va antes de los cuatro capítulos: sin letra, la leyenda ya está en el encabezado */
html.portada .inicio__etiqueta::before {
  content: none;
}

html.portada .escena__capitulo::after {
  display: none;
}

/* El mapa del encabezado: las cuatro letras apagadas, y la del capítulo en el que estás, en su color */
html.portada .mapa__punto {
  width: calc(0.6rem * var(--glifo-ratio, 1));
  height: 0.6rem;
  border: 0;
  border-radius: 0;
  background: currentColor;
  opacity: 0.55;
  -webkit-mask: var(--glifo, var(--glifo-o)) center / contain no-repeat;
  mask: var(--glifo, var(--glifo-o)) center / contain no-repeat;
  transition: opacity 200ms ease, background-color 200ms ease;
}

html.portada .mapa__paso[aria-current] .mapa__punto,
html.portada .mapa__paso:hover .mapa__punto {
  opacity: 1;
  background: var(--glifo-color, currentColor);
}

html.portada .mapa__paso--contacto .mapa__punto {
  opacity: 1;
}

/* Los puntos de las listas llevan la letra de su capítulo, en rojo y más pequeña */
html.portada .situacion__lista li::before {
  width: calc(0.5rem * var(--glifo-ratio, 0.95));
  height: 0.5rem;
  top: 0.55em;
  clip-path: none;
  background: var(--rojo-accion);
  -webkit-mask: var(--glifo, var(--glifo-a)) center / contain no-repeat;
  mask: var(--glifo, var(--glifo-a)) center / contain no-repeat;
}

/* "Trabaja con Homa" recupera su rótulo encima del titular */
html.portada .caminos__cabeza > .escena__capitulo {
  margin: 0 0 1rem;
}

@media (min-width: 900px) {
  html.portada .caminos__cabeza > .escena__capitulo {
    grid-column: 1 / -1;
    margin: 0 0 -1.5rem;
  }
}

/* =====================================================================
   TRABAJA CON HOMA · ABRIR SIN HUECOS (22 oct. 2026). Los casos heredaban reglas de un componente viejo
   que también se llamaba .situacion (rejilla con 2rem de hueco, 3.5rem de margen y relleno entre casos y
   34rem de alto mínimo en escritorio): cada caso cerrado ocupaba hasta tres veces lo que mide.
   ===================================================================== */
html.portada .caminos .situacion,
html.portada .caminos .situacion + .situacion {
  display: block;
  gap: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
}

/* Abrir se siente como entrar: el contenido se despliega en vez de aparecer de golpe (navegadores que lo
   soportan) y cada pieza sube en orden */
html.portada .caminos {
  interpolate-size: allow-keywords;
}

html.portada .caminos details::details-content {
  height: 0;
  overflow: clip;
  transition: height 420ms cubic-bezier(0.22, 1, 0.36, 1), content-visibility 420ms allow-discrete;
}

html.portada .caminos details[open]::details-content {
  height: auto;
}

@keyframes caminos-entrar {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

html.portada .camino[open] > .camino__cuerpo > *,
html.portada .situacion[open] > .situacion__detalle > *,
html.portada .camino[open] > .camino__cuerpo > .situacion__detalle > * {
  animation: caminos-entrar 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.portada :is(.camino__cuerpo, .situacion__detalle) > :nth-child(2) { animation-delay: 50ms; }
html.portada :is(.camino__cuerpo, .situacion__detalle) > :nth-child(3) { animation-delay: 100ms; }
html.portada :is(.camino__cuerpo, .situacion__detalle) > :nth-child(4) { animation-delay: 150ms; }
html.portada :is(.camino__cuerpo, .situacion__detalle) > :nth-child(n + 5) { animation-delay: 200ms; }

/* Foco: con una valla abierta, las otras se apagan para que la que elegiste sea la escena */
html.portada .camino {
  transition: opacity 300ms ease;
}

html.portada .caminos__lista:has(> .camino[open]) > .camino:not([open]) {
  opacity: 0.4;
}

html.portada .caminos__lista:has(> .camino[open]) > .camino:not([open]):is(:hover, :focus-within) {
  opacity: 1;
}

/* La valla abierta se ilumina como un set: un foco rojo muy suave desde arriba, a todo el ancho */
html.portada .camino[open] {
  background:
    radial-gradient(70% 22rem at 15% 0, oklch(0.63 0.25 22 / 9%), transparent 70%);
  box-shadow: 0 0 0 100vmax oklch(1 0 0 / 1.5%);
  clip-path: inset(0 -100vmax);
}

/* Al pasar por encima, la valla y el caso responden antes del toque */
@media (hover: hover) {
  html.portada .camino__cabeza:hover .caminos__signo {
    transform: scale(1.08);
  }

  html.portada .camino[open] > .camino__cabeza:hover .caminos__signo {
    transform: rotate(45deg) scale(1.08);
  }

  html.portada .situacion__cabeza:hover .situacion__frase {
    color: var(--rojo-texto);
  }

  html.portada .situacion__cabeza:hover .caminos__signo {
    box-shadow: inset 0 0 0 1px var(--tinta);
  }
}

html.portada .situacion__frase {
  transition: color 200ms ease;
}

/* El caso abierto se marca en la frase, no con una caja */
html.portada .situacion[open] > summary .situacion__frase {
  color: var(--rojo-texto);
}

/* Las cifras: una línea fina encima de cada una, como en una ficha técnica de rodaje */
html.portada .situacion__cifras > div {
  padding-top: 0.75rem;
  border-top: 1px solid oklch(1 0 0 / 12%);
}

/* El botón a WhatsApp: la flecha avanza al pasar por encima */
html.portada .caminos__wpp span[aria-hidden] {
  transition: transform 200ms ease;
}

html.portada .caminos__wpp:hover span[aria-hidden] {
  transform: translateX(0.2rem);
}

@media (prefers-reduced-motion: reduce) {
  html.portada .caminos details::details-content {
    transition: none;
  }

  html.portada .camino[open] > .camino__cuerpo > *,
  html.portada .situacion[open] > .situacion__detalle > *,
  html.portada .camino[open] > .camino__cuerpo > .situacion__detalle > * {
    animation: none;
  }

  html.portada .camino,
  html.portada .caminos__wpp span[aria-hidden] {
    transition: none;
  }
}

/* =====================================================================
   TRABAJA CON HOMA · JERARQUÍA DE LECTURA (22 oct. 2026). Al abrir una valla todo salía en el mismo blanco
   y casi el mismo peso, y no se sabía qué leer primero. Ahora hay tres tintas con un papel cada una:
     tinta    → lo que se lee primero: la frase de la valla, la pregunta, cada caso, "Para ti si…"
     tinta-2  → lo que explica: la promesa de la valla y los puntos de cada lista
     tinta-3  → lo que acompaña: el nombre del servicio, los subtítulos, las notas y el detalle fino
   El orden de lectura de una valla abierta queda: frase → promesa → pregunta → los casos para tocar.
   ===================================================================== */

/* La promesa: en Clash light y un poco más grande, como bajada de la valla, no como párrafo */
html.portada .camino__intro {
  margin: 0 0 1.25rem;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--tinta-2);
}

/* La pregunta va en su propia línea y en tinta: avisa que lo de abajo son opciones para tocar */
html.portada .camino__pregunta {
  display: block;
  margin-top: 0.75rem;
  font-weight: 600;
  color: var(--tinta);
}

/* Cada caso: la frase manda (es lo que se toca) y el nombre del servicio acompaña */
html.portada .situacion__frase {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tinta);
}

html.portada .situacion__nombre {
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  color: var(--tinta-3);
}

/* Con un caso abierto, los otros casos de la valla se apagan, igual que las vallas */
html.portada .situacion {
  transition: opacity 300ms ease;
}

html.portada .camino__cuerpo:has(> .situacion[open]) > .situacion:not([open]) {
  opacity: 0.45;
}

html.portada .camino__cuerpo:has(> .situacion[open]) > .situacion:not([open]):is(:hover, :focus-within) {
  opacity: 1;
}

/* La nota del final es un aparte: más pequeña y apagada, con su pregunta apenas más clara */
html.portada .camino__nota {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--tinta-3);
}

html.portada .camino__nota strong {
  font-weight: 600;
  color: var(--tinta-2);
}

/* Dentro del caso: "Para ti si…" es la frase que se lee primero; lo demás baja de tinta */
html.portada .situacion__detalle .situacion__para {
  color: var(--tinta);
}

html.portada .situacion__cifras dd {
  color: var(--tinta-3);
}

html.portada .situacion__detalle .situacion__sub {
  margin: 1.5rem 0 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tinta-3);
}

html.portada .situacion__lista li {
  color: var(--tinta-2);
}

/* El cierre del caso explica (tinta-2); solo su arranque va en tinta: "Sales con…" o "Si quieres sumar…" */
html.portada .situacion__detalle .situacion__resultado {
  margin: 0.25rem 0 1.25rem;
  font-weight: 400;
  color: var(--tinta-2);
}

/* El cuarto nivel es letra pequeña: su enlace en tinta-2 y su contenido en tinta-3 */
html.portada .situacion__mas > summary {
  color: var(--tinta-2);
}

html.portada .situacion__mas-cuerpo p {
  font-size: 0.875rem;
  color: var(--tinta-3);
}

html.portada .situacion__mas-cuerpo .situacion__sub {
  color: var(--tinta-2);
}

@media (prefers-reduced-motion: reduce) {
  html.portada .situacion {
    transition: none;
  }
}

/* =====================================================================
   CARGA VISUAL (22 oct. 2026). El rojo marca lo que se hace (el botón) y la palabra que importa del titular;
   no los rótulos. Por eso todos los rótulos van en tinta-2 con su letra del logo en su color, y el rótulo de
   la barra de marcas, que es un pie de foto, va pequeño, apagado y sin letra: antes, en rojo justo debajo
   del botón del hero, se llevaba toda la atención.
   ===================================================================== */
html.portada .escena__capitulo,
html.portada .clientes--sala .escena__capitulo {
  color: var(--tinta-2);
}

html.portada .confianza__rotulo {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--tinta-3);
}

html.portada .confianza__rotulo::before {
  content: none;
}

/* "Cuéntanos qué necesitas" usaba la display estrecha de una versión anterior: ahora es la misma display
   ancha de los demás titulares de la portada */
html.portada #hablemos .seccion__titulo {
  font-family: var(--font-display);
  font-stretch: var(--ancho-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 10vw, 5rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
}