/* =====================================================================
   VALENTI STUDIO · HOJA DE ESTILOS
   ---------------------------------------------------------------------
   CÓMO CAMBIAR COLORES
   1. PALETA ......... los colores de la marca, definidos una sola vez.
   2. COLORES POR SECCIÓN ... cada sección tiene sus propias variables.
      Si cambia --metodologia-texto, solo cambia la Metodología.
   3. CONEXIÓN ....... cada sección "enchufa" sus variables a los
      componentes. Normalmente no necesita tocar esta parte.

   ÍNDICE
    1. Paleta
    2. Colores por sección
    3. Tipografías y medidas
    4. Conexión de colores por sección
    5. Base
    6. Tipografía y utilidades
    7. Botones y enlaces
    8. Header y menú móvil
    9. Hero
   10. Frases en movimiento
   11. Preguntas (chips)
   12. Estructura de secciones
   13. Manifiesto
   14. Metodología
   15. Servicios
   16. Paquetes
   17. Diagnóstico
   18. Portafolio
   19. Testimonios
   20. Nosotros
   21. Contacto
   22. Cierre y footer
   23. Movimiento reducido
   ===================================================================== */


/* =====================================================================
   1. PALETA DE MARCA
   Solo estos cinco colores. Todo lo demás se arma con ellos.
   ===================================================================== */
:root {
  --vanilla-silk: #EEE2D4;    /* claro: fondo principal */
  --alpine-oat: #D7C6B5;      /* claro cálido: botones y resaltados */
  --warm-greige: #B19B90;     /* medio: textos suaves sobre fondos oscuros */
  --cherry-velvet: #481D1F;   /* vino: header, frases, acentos */
  --bordeaux-noir: #31181E;   /* oscuro: textos y secciones oscuras */

  /* Líneas: los mismos colores con transparencia */
  --linea-oscura: rgba(49, 24, 30, .18);
  --linea-clara: rgba(238, 226, 212, .18);

  /* Textura de cuero (grano fino), generada con SVG.
     Se usa encima de cualquier color de fondo. */
  --textura-cuero: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
  /* Brillo suave del cuero (manchas de luz grandes, sin cortes) */
  --brillo-cuero: radial-gradient(60% 50% at 20% 15%, rgba(238, 226, 212, .07), transparent 70%), radial-gradient(50% 60% at 85% 70%, rgba(0, 0, 0, .18), transparent 70%), radial-gradient(40% 40% at 60% 30%, rgba(238, 226, 212, .04), transparent 70%);
}


/* =====================================================================
   2. COLORES POR SECCIÓN
   Cada bloque es independiente. Cambie aquí sin miedo.
   ===================================================================== */
:root {
  /* --- Página (lo que no está dentro de ninguna sección) --- */
  --pagina-fondo: var(--vanilla-silk);
  --pagina-texto: var(--bordeaux-noir);

  /* --- Header --- */
  --header-fondo: var(--frases-fondo);   /* mismo color que las frases en movimiento */
  --header-texto: var(--frases-texto);
  --header-lineas: var(--linea-clara);
  --header-subrayado: var(--alpine-oat);
  --header-boton-fondo: var(--alpine-oat);
  --header-boton-texto: var(--bordeaux-noir);

  /* --- Menú móvil (pantalla completa) --- */
  --menu-movil-fondo: var(--bordeaux-noir);
  --menu-movil-texto: var(--vanilla-silk);
  --menu-movil-lineas: var(--linea-clara);
  --menu-movil-boton-fondo: var(--alpine-oat);
  --menu-movil-boton-texto: var(--bordeaux-noir);

  /* --- Botón flotante del celular --- */
  --flotante-fondo: var(--alpine-oat);
  --flotante-texto: var(--bordeaux-noir);

  /* --- Botón flotante de WhatsApp --- */
  --whatsapp-fondo: var(--cherry-velvet);        /* círculo del botón */
  --whatsapp-icono: var(--vanilla-silk);         /* ícono */
  --whatsapp-borde: var(--alpine-oat);           /* aro fino alrededor */
  --whatsapp-pulso: rgba(177, 155, 144, .45);    /* ondas que palpitan (Warm Greige: se ven en fondos claros y oscuros) */
  --whatsapp-etiqueta-fondo: var(--vanilla-silk);
  --whatsapp-etiqueta-texto: var(--bordeaux-noir);

  /* --- Hero --- */
  --hero-fondo: var(--vanilla-silk);
  --hero-imagen: url("../assets/heroimgfar.jpeg");
  --hero-texto: var(--vanilla-silk);
  --hero-texto-suave: var(--cherry-velvet);
  --hero-lineas: var(--linea-oscura);
  --hero-boton-fondo: var(--alpine-oat);
  --hero-boton-texto: var(--bordeaux-noir);
  --hero-enfasis: var(--vanilla-silk);
  --hero-resaltado-fondo: var(--cherry-velvet);
  --hero-resaltado-texto: var(--vanilla-silk);
  --hero-movil-fondo: var(--bordeaux-noir);   /* celular: fondo debajo de la foto, donde va el título */

  /* --- Frases en movimiento (debajo del hero) --- */
  --frases-fondo: var(--cherry-velvet);
  --frases-texto: var(--vanilla-silk);
  --frases-puntos: var(--vanilla-silk);
  --frases-tamano-letra: clamp(14px, 1.3vw, 18px);
  --frases-alto: 10px;   /* espacio arriba y abajo del texto */

  /* --- Preguntas "Elige la que más se parece a ti" --- */
  --preguntas-fondo: var(--vanilla-silk);
  --preguntas-texto: var(--bordeaux-noir);
  --preguntas-texto-suave: var(--cherry-velvet);
  --preguntas-lineas: var(--linea-oscura);
  --preguntas-boton-fondo: var(--alpine-oat);
  --preguntas-boton-texto: var(--bordeaux-noir);
  --preguntas-enfasis: var(--cherry-velvet);
  --preguntas-resaltado-fondo: var(--alpine-oat);
  --preguntas-resaltado-texto: var(--cherry-velvet);
  --preguntas-opcion-fondo: var(--alpine-oat);             /* opciones sin elegir */
  --preguntas-opcion-borde: var(--alpine-oat);
  --preguntas-opcion-activa-fondo: var(--cherry-velvet);   /* opción elegida */
  --preguntas-opcion-activa-texto: var(--vanilla-silk);

  /* --- Manifiesto "Tu negocio no necesita más contenido" --- */
  --manifiesto-fondo: var(--header-fondo);   /* mismo color que el header */
  --manifiesto-cuero-base: #481D1F;    /* Cherry Velvet: color del cuero (se dibuja con código en main.js) */
  --manifiesto-cuero-surco: #31181E;   /* Bordeaux Noir: líneas entre escamas */
  --manifiesto-cuero-brillo: #D7C6B5;  /* Alpine Oat: brillo sutil del relieve */
  --manifiesto-velo: rgba(49, 24, 30, .18);  /* capa oscura sobre la textura para que se lea el texto */
  --manifiesto-texto: var(--vanilla-silk);
  --manifiesto-texto-suave: var(--warm-greige);
  --manifiesto-lineas: var(--linea-clara);
  --manifiesto-boton-fondo: var(--alpine-oat);
  --manifiesto-boton-texto: var(--bordeaux-noir);
  --manifiesto-enfasis: var(--alpine-oat);
  --manifiesto-resaltado-fondo: transparent;
  --manifiesto-resaltado-texto: var(--vanilla-silk);

  /* --- Metodología --- */
  --metodologia-fondo: var(--vanilla-silk);
  --metodologia-texto: var(--bordeaux-noir);
  --metodologia-texto-suave: var(--cherry-velvet);
  --metodologia-lineas: var(--linea-oscura);
  --metodologia-boton-fondo: var(--alpine-oat);
  --metodologia-boton-texto: var(--bordeaux-noir);
  --metodologia-enfasis: var(--cherry-velvet);
  --metodologia-resaltado-fondo: var(--alpine-oat);
  --metodologia-resaltado-texto: var(--cherry-velvet);
  --metodologia-numero: var(--warm-greige);

  /* --- Servicios --- */
  --servicios-fondo: var(--vanilla-silk);
  --servicios-texto: var(--bordeaux-noir);
  --servicios-texto-suave: var(--cherry-velvet);
  --servicios-lineas: var(--linea-oscura);
  --servicios-boton-fondo: var(--alpine-oat);
  --servicios-boton-texto: var(--bordeaux-noir);
  --servicios-enfasis: var(--cherry-velvet);
  --servicios-resaltado-fondo: var(--alpine-oat);
  --servicios-resaltado-texto: var(--cherry-velvet);
  --servicios-sobre: var(--cherry-velvet);          /* frente del sobre */
  --servicios-sobre-interior: var(--bordeaux-noir); /* interior del sobre */
  --servicios-sobre-texto: var(--vanilla-silk);     /* nombre escrito en el sobre */
  --servicios-sello: var(--alpine-oat);             /* sello de cera */
  --servicios-hoja: var(--vanilla-silk);            /* hoja que sale del sobre */
  --servicios-hoja-texto: var(--bordeaux-noir);
  --servicios-flechas-fondo: var(--cherry-velvet);
  --servicios-flechas-icono: var(--vanilla-silk);

  /* --- Paquetes --- */
  --paquetes-fondo: var(--bordeaux-noir);
  --paquetes-fondo-2: var(--cherry-velvet);
  --paquetes-texto: var(--vanilla-silk);
  --paquetes-texto-suave: var(--warm-greige);
  --paquetes-lineas: var(--linea-clara);
  --paquetes-boton-fondo: var(--alpine-oat);
  --paquetes-boton-texto: var(--bordeaux-noir);
  --paquetes-enfasis: var(--alpine-oat);
  --paquetes-resaltado-fondo: transparent;
  --paquetes-resaltado-texto: var(--alpine-oat);
  --paquetes-custom-fondo: var(--alpine-oat);       /* funda del paquete Custom */
  --paquetes-custom-texto: var(--cherry-velvet);
  --paquetes-cuero: var(--cherry-velvet);           /* funda de cuero de cada paquete */
  --paquetes-cuero-grabado: var(--bordeaux-noir);   /* nombre grabado en el cuero */
  --paquetes-costura: rgba(215, 198, 181, .45);     /* costura punteada (Alpine Oat) */
  --paquetes-forro-fondo: var(--alpine-oat);        /* forro de leopardo: fondo */
  --paquetes-forro-manchas: var(--cherry-velvet);   /* forro de leopardo: manchas */
  --paquetes-forro-centro: var(--warm-greige);      /* forro de leopardo: centro de las manchas */
  --paquetes-tarjeta: var(--vanilla-silk);          /* tarjeta con el detalle */
  --paquetes-tarjeta-texto: var(--bordeaux-noir);

  /* --- Diagnóstico (cartas que se voltean) --- */
  --diagnostico-fondo: var(--vanilla-silk);
  --diagnostico-texto: var(--bordeaux-noir);
  --diagnostico-texto-suave: var(--cherry-velvet);
  --diagnostico-lineas: var(--linea-oscura);
  --diagnostico-boton-fondo: var(--cherry-velvet);
  --diagnostico-boton-texto: var(--vanilla-silk);
  --diagnostico-enfasis: var(--cherry-velvet);
  --diagnostico-resaltado-fondo: var(--alpine-oat);
  --diagnostico-resaltado-texto: var(--cherry-velvet);
  --diagnostico-paso-activo: var(--cherry-velvet);         /* círculo del paso en curso */
  --diagnostico-paso-activo-texto: var(--vanilla-silk);
  --diagnostico-carta-dorso: var(--cherry-velvet);        /* reverso de la carta (con la V) */
  --diagnostico-carta-marco: rgba(215, 198, 181, .38);    /* filete interior del reverso */
  --diagnostico-carta-v: var(--alpine-oat);               /* la V, el número y el nombre */
  --diagnostico-carta-cara: var(--alpine-oat);            /* carta volteada */
  --diagnostico-carta-cara-texto: var(--bordeaux-noir);
  --diagnostico-carta-cara-etiqueta: var(--cherry-velvet);
  --diagnostico-carta-sombra: rgba(49, 24, 30, .16);
  --diagnostico-lectura-fondo: var(--alpine-oat);         /* hoja con la lectura final */
  --diagnostico-lectura-texto: var(--bordeaux-noir);
  --diagnostico-lectura-suave: var(--cherry-velvet);
  --diagnostico-lectura-lineas: var(--linea-oscura);

  /* --- Portafolio --- */
  --portafolio-fondo: var(--header-fondo);     /* mismo color que el header */
  --portafolio-fondo-2: var(--bordeaux-noir);
  --portafolio-texto: var(--vanilla-silk);
  --portafolio-texto-suave: var(--warm-greige);
  --portafolio-lineas: var(--linea-clara);
  --portafolio-boton-fondo: var(--alpine-oat);
  --portafolio-boton-texto: var(--bordeaux-noir);
  --portafolio-enfasis: var(--alpine-oat);
  --portafolio-resaltado-fondo: transparent;
  --portafolio-resaltado-texto: var(--alpine-oat);

  /* --- Testimonios --- */
  --testimonios-fondo: var(--alpine-oat);              /* mesa donde están las polaroids */
  --testimonios-texto: var(--bordeaux-noir);
  --testimonios-texto-suave: var(--cherry-velvet);
  --testimonios-lineas: var(--linea-oscura);
  --testimonios-boton-fondo: var(--cherry-velvet);
  --testimonios-boton-texto: var(--vanilla-silk);
  --testimonios-enfasis: var(--cherry-velvet);
  --testimonios-resaltado-fondo: var(--vanilla-silk);
  --testimonios-resaltado-texto: var(--cherry-velvet);
  --testimonios-polaroid: var(--vanilla-silk);          /* papel de la polaroid */
  --testimonios-foto-fondo: var(--cherry-velvet);       /* espacio de la foto mientras no hay imagen */
  --testimonios-foto-texto: var(--alpine-oat);
  --testimonios-sombra: rgba(49, 24, 30, .22);

  /* --- Nosotros --- */
  --nosotros-fondo: var(--bordeaux-noir);
  --nosotros-texto: var(--vanilla-silk);
  --nosotros-texto-suave: var(--warm-greige);
  --nosotros-lineas: var(--linea-clara);
  --nosotros-boton-fondo: var(--alpine-oat);
  --nosotros-boton-texto: var(--bordeaux-noir);
  --nosotros-enfasis: var(--alpine-oat);
  --nosotros-resaltado-fondo: transparent;
  --nosotros-resaltado-texto: var(--alpine-oat);

  /* --- Contacto --- */
  --contacto-fondo: var(--vanilla-silk);
  --contacto-fondo-2: var(--alpine-oat);
  --contacto-texto: var(--bordeaux-noir);
  --contacto-texto-suave: var(--cherry-velvet);
  --contacto-lineas: var(--linea-oscura);
  --contacto-boton-fondo: var(--alpine-oat);
  --contacto-boton-texto: var(--bordeaux-noir);
  --contacto-enfasis: var(--cherry-velvet);
  --contacto-resaltado-fondo: var(--alpine-oat);
  --contacto-resaltado-texto: var(--cherry-velvet);

  /* --- Cierre y footer --- */
  --cierre-fondo: var(--bordeaux-noir);
  --cierre-texto: var(--vanilla-silk);
  --cierre-texto-suave: var(--warm-greige);
  --cierre-lineas: var(--linea-clara);
  --cierre-boton-fondo: var(--alpine-oat);
  --cierre-boton-texto: var(--bordeaux-noir);
  --cierre-enfasis: var(--alpine-oat);
  --cierre-palabras-contorno: var(--warm-greige);
  --cierre-palabras-relleno: var(--vanilla-silk);
  --cierre-palabra-final: var(--alpine-oat);
}


/* =====================================================================
   3. TIPOGRAFÍAS Y MEDIDAS
   ===================================================================== */
:root {
  --display: "Archivo", "Arial Narrow", Impact, sans-serif;
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --body: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --gut: clamp(16px, 4vw, 56px);
  --espacio-seccion: clamp(40px, 4.5vw, 72px);   /* espacio arriba y abajo de cada sección */
  --maxw: 1440px;

  color-scheme: light;
}


/* =====================================================================
   4. CONEXIÓN DE COLORES POR SECCIÓN
   Los componentes usan variables genéricas:
     --bg / --bg-2 ... fondo
     --ink ........... texto principal
     --ink-2 ......... texto suave (etiquetas, descripciones)
     --line .......... líneas y bordes
     --accent ........ fondo de botones y elementos activos
     --accent-ink .... texto sobre --accent
     --tone .......... palabras destacadas
     --hl / --hl-ink . resaltador detrás de las cursivas
   Cada sección las llena con SUS colores.
   ===================================================================== */

/* Valores por defecto (fuera de cualquier sección) */
:root {
  --bg: var(--pagina-fondo);
  --bg-2: var(--alpine-oat);
  --ink: var(--pagina-texto);
  --ink-2: var(--cherry-velvet);
  --line: var(--linea-oscura);
  --accent: var(--alpine-oat);
  --accent-ink: var(--bordeaux-noir);
  --tone: var(--cherry-velvet);
  --hl: var(--alpine-oat);
  --hl-ink: var(--cherry-velvet);
}

.nav {
  --bg: var(--header-fondo);
  --ink: var(--header-texto);
  --line: var(--header-lineas);
  --accent: var(--header-boton-fondo);
  --accent-ink: var(--header-boton-texto);
  background-color: var(--bg);
  color: var(--ink);
}

.mnav {
  --bg: var(--menu-movil-fondo);
  --ink: var(--menu-movil-texto);
  --line: var(--menu-movil-lineas);
  --accent: var(--menu-movil-boton-fondo);
  --accent-ink: var(--menu-movil-boton-texto);
  background-color: var(--bg);
  color: var(--ink);
}

.fab {
  --accent: var(--flotante-fondo);
  --accent-ink: var(--flotante-texto);
}

.hero {
  --bg: var(--hero-fondo);
  --ink: var(--hero-texto);
  --ink-2: var(--hero-texto-suave);
  --line: var(--hero-lineas);
  --accent: var(--hero-boton-fondo);
  --accent-ink: var(--hero-boton-texto);
  --tone: var(--hero-enfasis);
  --hl: var(--hero-resaltado-fondo);
  --hl-ink: var(--hero-resaltado-texto);
  background-color: var(--bg);
  color: var(--ink);
}

.marq {
  background-color: var(--frases-fondo);
  color: var(--frases-texto);
}

.quiz {
  --bg: var(--preguntas-fondo);
  --ink: var(--preguntas-texto);
  --ink-2: var(--preguntas-texto-suave);
  --line: var(--preguntas-lineas);
  --accent: var(--preguntas-boton-fondo);
  --accent-ink: var(--preguntas-boton-texto);
  --tone: var(--preguntas-enfasis);
  --hl: var(--preguntas-resaltado-fondo);
  --hl-ink: var(--preguntas-resaltado-texto);
  background-color: var(--bg);
  color: var(--ink);
}

.manif {
  --bg: var(--manifiesto-fondo);
  --ink: var(--manifiesto-texto);
  --ink-2: var(--manifiesto-texto-suave);
  --line: var(--manifiesto-lineas);
  --accent: var(--manifiesto-boton-fondo);
  --accent-ink: var(--manifiesto-boton-texto);
  --tone: var(--manifiesto-enfasis);
  --hl: var(--manifiesto-resaltado-fondo);
  --hl-ink: var(--manifiesto-resaltado-texto);
  background:
    linear-gradient(var(--manifiesto-velo), var(--manifiesto-velo)),
    var(--manifiesto-textura, none) center / cover no-repeat,
    var(--bg);
  color: var(--ink);
}

.method {
  --bg: var(--metodologia-fondo);
  --ink: var(--metodologia-texto);
  --ink-2: var(--metodologia-texto-suave);
  --line: var(--metodologia-lineas);
  --accent: var(--metodologia-boton-fondo);
  --accent-ink: var(--metodologia-boton-texto);
  --tone: var(--metodologia-enfasis);
  --hl: var(--metodologia-resaltado-fondo);
  --hl-ink: var(--metodologia-resaltado-texto);
  background-color: var(--bg);
  color: var(--ink);
}

.services {
  --bg: var(--servicios-fondo);
  --ink: var(--servicios-texto);
  --ink-2: var(--servicios-texto-suave);
  --line: var(--servicios-lineas);
  --accent: var(--servicios-boton-fondo);
  --accent-ink: var(--servicios-boton-texto);
  --tone: var(--servicios-enfasis);
  --hl: var(--servicios-resaltado-fondo);
  --hl-ink: var(--servicios-resaltado-texto);
  background-color: var(--bg);
  color: var(--ink);
}

.pk {
  --bg: var(--paquetes-fondo);
  --bg-2: var(--paquetes-fondo-2);
  --ink: var(--paquetes-texto);
  --ink-2: var(--paquetes-texto-suave);
  --line: var(--paquetes-lineas);
  --accent: var(--paquetes-boton-fondo);
  --accent-ink: var(--paquetes-boton-texto);
  --tone: var(--paquetes-enfasis);
  --hl: var(--paquetes-resaltado-fondo);
  --hl-ink: var(--paquetes-resaltado-texto);
  background: var(--textura-cuero), var(--brillo-cuero), var(--bg);
  color: var(--ink);
}

.diag {
  --bg: var(--diagnostico-fondo);
  --ink: var(--diagnostico-texto);
  --ink-2: var(--diagnostico-texto-suave);
  --line: var(--diagnostico-lineas);
  --accent: var(--diagnostico-boton-fondo);
  --accent-ink: var(--diagnostico-boton-texto);
  --tone: var(--diagnostico-enfasis);
  --hl: var(--diagnostico-resaltado-fondo);
  --hl-ink: var(--diagnostico-resaltado-texto);
  background-color: var(--bg);
  color: var(--ink);
}

.portfolio {
  --bg: var(--portafolio-fondo);
  --bg-2: var(--portafolio-fondo-2);
  --ink: var(--portafolio-texto);
  --ink-2: var(--portafolio-texto-suave);
  --line: var(--portafolio-lineas);
  --accent: var(--portafolio-boton-fondo);
  --accent-ink: var(--portafolio-boton-texto);
  --tone: var(--portafolio-enfasis);
  --hl: var(--portafolio-resaltado-fondo);
  --hl-ink: var(--portafolio-resaltado-texto);
  background-color: var(--bg);
  color: var(--ink);
}

.testi {
  --bg: var(--testimonios-fondo);
  --ink: var(--testimonios-texto);
  --ink-2: var(--testimonios-texto-suave);
  --line: var(--testimonios-lineas);
  --accent: var(--testimonios-boton-fondo);
  --accent-ink: var(--testimonios-boton-texto);
  --tone: var(--testimonios-enfasis);
  --hl: var(--testimonios-resaltado-fondo);
  --hl-ink: var(--testimonios-resaltado-texto);
  background-color: var(--bg);
  color: var(--ink);
}

.about {
  --bg: var(--nosotros-fondo);
  --ink: var(--nosotros-texto);
  --ink-2: var(--nosotros-texto-suave);
  --line: var(--nosotros-lineas);
  --accent: var(--nosotros-boton-fondo);
  --accent-ink: var(--nosotros-boton-texto);
  --tone: var(--nosotros-enfasis);
  --hl: var(--nosotros-resaltado-fondo);
  --hl-ink: var(--nosotros-resaltado-texto);
  background-color: var(--bg);
  color: var(--ink);
}

.contact {
  --bg: var(--contacto-fondo);
  --bg-2: var(--contacto-fondo-2);
  --ink: var(--contacto-texto);
  --ink-2: var(--contacto-texto-suave);
  --line: var(--contacto-lineas);
  --accent: var(--contacto-boton-fondo);
  --accent-ink: var(--contacto-boton-texto);
  --tone: var(--contacto-enfasis);
  --hl: var(--contacto-resaltado-fondo);
  --hl-ink: var(--contacto-resaltado-texto);
  background-color: var(--bg);
  color: var(--ink);
}

.close {
  --bg: var(--cierre-fondo);
  --ink: var(--cierre-texto);
  --ink-2: var(--cierre-texto-suave);
  --line: var(--cierre-lineas);
  --accent: var(--cierre-boton-fondo);
  --accent-ink: var(--cierre-boton-texto);
  --tone: var(--cierre-enfasis);
  --hl: transparent;
  --hl-ink: var(--cierre-enfasis);
  background-color: var(--bg);
  color: var(--ink);
}


/* =====================================================================
   5. BASE
   ===================================================================== */
html,
body {
  margin: 0;
}

img {
  max-width: 100%;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}


/* =====================================================================
   6. TIPOGRAFÍA Y UTILIDADES
   ===================================================================== */
.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.d {
  font-family: var(--display);
  font-variation-settings: "wdth" 80;
  font-weight: 700;
  text-transform: none;
  line-height: 1;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0;
}

.it {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -.02em;
  font-variation-settings: normal;
  color: var(--hl-ink);
  background: linear-gradient(transparent 58%, var(--hl) 58%, var(--hl) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: .06em;
}

.lbl {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--ink-2);
}

.lead {
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.5;
  max-width: 34em;
  color: var(--ink);
}

.muted {
  color: var(--ink-2);
}

p {
  margin: 0;
}


/* =====================================================================
   7. BOTONES Y ENLACES
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: 16px 22px;
  border-radius: 999px;
  border: 1px solid var(--accent-ink);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--display);
  font-variation-settings: "wdth" 90;
  font-weight: 700;
  text-transform: none;
  font-size: 14px;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}

.btn .ar {
  display: inline-block;
  transition: transform .3s;
}

.btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.btn:hover .ar {
  transform: translateX(4px);
}

.btn.ghost {
  background: transparent;
  color: var(--ink);
}

.btn.ghost:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.btn.acc {
  border-color: var(--accent);
}

.link {
  font-family: var(--display);
  font-variation-settings: "wdth" 90;
  font-weight: 700;
  text-transform: none;
  font-size: 14px;
  letter-spacing: .01em;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  display: inline-flex;
  gap: .5em;
}

.link:hover {
  color: var(--tone);
}


/* =====================================================================
   8. HEADER Y MENÚ MÓVIL
   ===================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s;
}

.nav.solid {
  box-shadow: 0 10px 30px rgba(49, 24, 30, .22);
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 24px;
}

.logo {
  display: block;
  flex: none;
  line-height: 0;
}

.logo img {
  height: 30px;
  width: auto;
  display: block;
}

@media (max-width: 600px) {
  .logo img {
    height: 25px;
  }
}

.menu {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu a {
  text-decoration: none;
  font-family: var(--display);
  font-variation-settings: "wdth" 90;
  font-weight: 600;
  text-transform: none;
  letter-spacing: .01em;
  font-size: 13px;
  position: relative;
}

.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 1px;
  background: var(--header-subrayado);
  transition: right .3s;
}

.menu a:hover::after {
  right: 0;
}

.nav .btn {
  padding: 11px 18px;
  font-size: 13px;
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.burger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .3s;
}

.mnav {
  position: fixed;
  inset: 0;
  z-index: 60;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) var(--gut) calc(env(safe-area-inset-bottom, 0px) + 28px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mnav .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mnav .close {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
}

.mnav ol {
  list-style: none;
  margin: auto 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  counter-reset: m;
}

.mnav ol a {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: "wdth" 64;
  text-transform: none;
  font-size: clamp(44px, 12vw, 72px);
  line-height: 1;
  text-decoration: none;
  display: block;
}

.mnav ol a:active {
  color: var(--tone);
}

.mnav .btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  justify-content: center;
}

.fab {
  display: none;
}

@media (max-width: 960px) {
  .menu,
  .nav .btn {
    display: none;
  }
  .burger {
    display: flex;
  }
  .fab {
    display: flex;
    position: fixed;
    z-index: 40;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
    box-shadow: 0 10px 30px rgba(49, 24, 30, .3);
    white-space: nowrap;
  }
  .fab.hide {
    transform: translate(-50%, 120px);
    opacity: 0;
    pointer-events: none;
  }
}


/* ---------------------------------------------------------------------
   Botón flotante de WhatsApp: palpita como un latido y lanza ondas
   --------------------------------------------------------------------- */
.wa-float {
  position: fixed;
  z-index: 45;
  right: clamp(16px, 2.4vw, 32px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(16px, 2.4vw, 32px));
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  text-decoration: none;
}

.wa-icon {
  position: relative;
  z-index: 2;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--whatsapp-fondo);
  color: var(--whatsapp-icono);
  box-shadow:
    0 0 0 2px var(--whatsapp-fondo),
    0 0 0 4px var(--whatsapp-borde),
    0 12px 28px rgba(49, 24, 30, .35);
  animation: wa-latido 2.4s ease-in-out infinite;
  transition: transform .3s;
}

/* Ondas que salen del botón */
.wa-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--whatsapp-pulso);
  z-index: 1;
  animation: wa-onda 2.4s ease-out infinite;
}

.wa-pulse.d2 {
  animation-delay: .35s;
}

@keyframes wa-latido {
  0%, 40%, 100% { transform: scale(1); }
  10% { transform: scale(1.12); }
  20% { transform: scale(.97); }
  30% { transform: scale(1.08); }
}

@keyframes wa-onda {
  0% { transform: scale(1); opacity: .9; }
  70%, 100% { transform: scale(1.9); opacity: 0; }
}

/* Etiqueta que aparece al pasar el mouse */
.wa-tip {
  position: absolute;
  right: 72px;
  top: 50%;
  white-space: nowrap;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--whatsapp-etiqueta-fondo);
  color: var(--whatsapp-etiqueta-texto);
  font-family: var(--display);
  font-variation-settings: "wdth" 90;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 8px 20px rgba(49, 24, 30, .2);
  opacity: 0;
  transform: translate(8px, -50%);
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}

.wa-tip em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
}

.wa-float:hover .wa-icon {
  transform: scale(1.08);
  animation-play-state: paused;
}

.wa-float:hover .wa-tip,
.wa-float:focus-visible .wa-tip {
  opacity: 1;
  transform: translate(0, -50%);
}

/* Celular: un poco más pequeño y por encima del botón flotante del centro */
@media (max-width: 960px) {
  .wa-float {
    right: 14px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 78px);
    width: 54px;
    height: 54px;
  }
  .wa-icon {
    width: 54px;
    height: 54px;
  }
  .wa-icon svg {
    width: 25px;
    height: 25px;
  }
  .wa-tip {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wa-icon,
  .wa-pulse {
    animation: none;
  }
}


/* =====================================================================
   9. HERO
   ===================================================================== */
.hero {
  position: relative;
  padding-top: calc(38px + clamp(40px, 8vw, 110px));
  padding-bottom: clamp(48px, 6vw, 80px);
  overflow: hidden;
  isolation: isolate;
  background-image: var(--hero-imagen);
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}

#field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.hero h1 {
  font-size: clamp(58px, 11.2vw, 134px);
}

.hero h1 .row {
  display: block;
}

.hero h1 .row.r2 {
  padding-left: clamp(0px, 9vw, 160px);
}

.hero h1 .it {
  font-size: .82em;
}

/* Hero en celular: la foto se ve COMPLETA arriba (sin recortarla ni
   ampliarla) y el título va debajo, sobre Bordeaux Noir, con un degradado
   que une la foto con el fondo. La proporción de la foto la mide main.js
   (--hero-proporcion = alto / ancho); si no, usa 16:9. */
@media (max-width: 820px) {
  .hero {
    /* alto de la foto: su alto real, pero nunca menos de 78% del ancho
       (si la foto es muy horizontal se recorta un poco de los lados) */
    --foto-alto: max(calc(100vw * var(--hero-proporcion, .5625)), 78vw);
    background-color: var(--hero-movil-fondo);
    background-size: max(100vw, calc(var(--foto-alto) / var(--hero-proporcion, .5625))) auto;
    background-position: center 68px;      /* justo debajo del header */
    min-height: 0;
    display: block;
    padding-top: calc(68px + var(--foto-alto) - 44px);   /* el título sube un poco sobre la foto */
    padding-bottom: 28px;
  }
  .hero::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(68px + var(--foto-alto) * .55);
    height: calc(var(--foto-alto) * .45 + 2px);
    z-index: -1;
    background: linear-gradient(180deg, transparent 0%, var(--hero-movil-fondo) 100%);
  }
  .hero .wrap {
    width: 100%;
  }
  .hero h1 {
    font-size: clamp(40px, 11.5vw, 60px);
    line-height: 1;
  }
  .hero h1 .row.r2 {
    padding-left: 0;
  }
  .hero .sub {
    display: none;
  }
}

.hero .sub {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(24px, 5vw, 80px);
  margin-top: clamp(36px, 5vw, 64px);
  align-items: start;
}

.hero .sub .lead {
  font-size: clamp(19px, 1.8vw, 24px);
}

.hero .sub .lead em {
  font-family: var(--serif);
  font-style: italic;
}


/* =====================================================================
   11. PREGUNTAS (CHIPS)
   ===================================================================== */
/* Contenedor: centrado, con ancho máximo para que no se estire */
.sec.quiz {
  padding-block: clamp(48px, 6vw, 80px);
}

.quiz .wrap {
  max-width: 980px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(22px, 3vw, 32px);
}

/* Título de la sección: "Elige la que más se parece a ti" */
.q-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.q-title {
  font-size: clamp(30px, 3.8vw, 54px);
}

/* Opciones: tarjetas redondeadas, fáciles de leer y de tocar */
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
}

.chip {
  border: 1px solid var(--preguntas-opcion-borde);
  background: var(--preguntas-opcion-fondo);
  color: var(--ink);
  border-radius: 999px;
  padding: 13px 22px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
  line-height: 1.3;
}

.chip:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

.chip[aria-pressed="true"],
.chip.star[aria-pressed="true"] {
  background: var(--preguntas-opcion-activa-fondo);
  color: var(--preguntas-opcion-activa-texto);
  border-color: var(--preguntas-opcion-activa-fondo);
}

.chip.star {
  border-style: dashed;
  border-color: var(--tone);
  font-weight: 600;
}

/* Respuesta que cambia al elegir una opción */
.answer {
  max-width: 34em;
  min-height: 2.8em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.answer p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(21px, 2.3vw, 30px);
  line-height: 1.3;
  color: var(--tone);
}

/* Enlace "Hablemos de tu marca" */
.quiz .ctas {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

@media (max-width: 600px) {
  .quiz .wrap {
    gap: 20px;
  }
  .chip {
    font-size: 15px;
    padding: 11px 16px;
  }
}

.hero .ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
  align-items: center;
}

@media (max-width: 820px) {
  .hero .sub {
    grid-template-columns: 1fr;
  }
}


/* =====================================================================
   10. FRASES EN MOVIMIENTO
   ===================================================================== */
.marq {
  border-block: 1px solid var(--linea-oscura);
  overflow: hidden;
  padding-block: var(--frases-alto);
  white-space: nowrap;
}

.marq .track {
  display: inline-flex;
  gap: 28px;
  animation: mq 38s linear infinite;
  padding-left: 28px;
}

.marq span {
  font-family: var(--display);
  font-variation-settings: "wdth" 70;
  font-weight: 700;
  text-transform: none;
  font-size: var(--frases-tamano-letra);
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  gap: 28px;
}

.marq span::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--frases-puntos);
}

@keyframes mq {
  to {
    transform: translateX(-50%);
  }
}


/* =====================================================================
   12. ESTRUCTURA DE SECCIONES
   ===================================================================== */
section {
  position: relative;
}

/* Espacio arriba y abajo de todas las secciones (una sola medida para toda la página) */
.sec {
  padding-block: var(--espacio-seccion);
}

/* Encabezado de sección: etiqueta arriba y título debajo,
   igual que en el manifiesto (mismo hilo en toda la página) */
.sec-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(24px, 3vw, 40px);
}

/* Tamaño de los títulos de sección (el mismo en toda la página) */
.h2 {
  font-size: clamp(34px, 4.6vw, 68px);
}

.h2 .it {
  font-size: .84em;
}

/* Títulos: negrilla + normal + cursiva intercaladas.
   .n = parte del título sin negrilla; .sm / .l2 = segunda línea sin negrilla */
.d .n,
.h2 .sm,
.manif h2 .l2,
.svc-intro .h2 .l2,
.final h2 > span:nth-child(2) {
  font-weight: 400;
}

.h2 .sm {
  display: block;
  font-size: .55em;
  margin-top: .2em;
  color: var(--ink-2);
}


/* =====================================================================
   13. MANIFIESTO
   ===================================================================== */
/* Dos columnas centradas en la página: título a la izquierda y texto
   a la derecha con una separación fija, centrado verticalmente.
   Para acercar o alejar las columnas: column-gap en .manif .grid */
.sec.manif {
  padding-block: clamp(48px, 5.5vw, 80px);
}

.manif .grid {
  display: grid;
  grid-template-columns: auto minmax(0, 440px);
  justify-content: center;      /* el bloque de las dos columnas queda centrado en la página */
  column-gap: clamp(72px, 9vw, 152px);
  align-items: center;
}

/* Etiqueta superior: alineada con el título */
.manif .grid > .lbl {
  grid-column: 1;
  margin-bottom: clamp(16px, 2vw, 24px) !important;
}

/* Columna 1: título */
.manif h2 {
  grid-column: 1;
  grid-row: 2;
  font-size: clamp(34px, 6.2vw, 88px);
  white-space: nowrap;          /* los saltos de línea están en el HTML */
  text-wrap: nowrap;
}

.manif h2 .l2 {
  display: block;
  color: var(--tone);
  margin-top: .12em;
}

/* Columna 2: pregunta, texto y botón */
.manif .copy {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  font-size: 15px;              /* mismo tamaño que las opciones de la sección anterior */
  line-height: 1.6;
}

/* Foto tipo polaroid: inclinada y montada sobre el espacio entre columnas */
.manif .polaroid {
  --polaroid-ancho: clamp(200px, 19vw, 280px);
  --polaroid-giro: -4deg;
  margin: 0 0 6px;
  width: var(--polaroid-ancho);
  padding: 10px 10px 0;
  background: var(--vanilla-silk);
  border-radius: 2px;
  box-shadow: 0 14px 30px rgba(20, 8, 10, .45), 0 2px 4px rgba(20, 8, 10, .3);
  transform: translateX(calc(var(--polaroid-ancho) * -.35)) rotate(var(--polaroid-giro));
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.manif .polaroid:hover {
  transform: translateX(calc(var(--polaroid-ancho) * -.35)) rotate(0deg) scale(1.03);
}

.manif .polaroid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;          /* imagen horizontal */
  object-fit: cover;
  background: var(--alpine-oat);
}

.manif .polaroid figcaption {
  padding: 10px 2px 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--bordeaux-noir);
  text-align: center;
}

.manif .aside {
  width: 100%;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.manif .aside .d {
  font-size: 15px;
  font-variation-settings: "wdth" 85;
  line-height: 1.3;
  letter-spacing: .01em;
}

.manif .aside .d.dim {
  color: var(--ink-2);
}

/* Celular y tablet: una sola columna */
@media (max-width: 900px) {
  .manif .grid {
    grid-template-columns: 1fr;
  }
  .manif h2,
  .manif .copy {
    grid-column: 1;
    grid-row: auto;
  }
  .manif h2 {
    white-space: normal;
  }
  .manif .copy {
    margin-top: 28px;
  }
  .manif .polaroid {
    --polaroid-giro: -3deg;
    transform: rotate(var(--polaroid-giro));
    margin-inline: auto;
  }
  .manif .polaroid:hover {
    transform: rotate(0deg) scale(1.03);
  }
}


/* =====================================================================
   14. METODOLOGÍA
   ===================================================================== */
/* Espacio arriba y abajo de la sección */
.sec.method {
  padding-block: var(--espacio-seccion);
}

/* Título de la sección y su separación */
.method .h2 {
  font-size: clamp(34px, 4.6vw, 68px);
}

/* "En este orden." en su propia línea, debajo de "Así trabajamos." */
.method .h2 .it {
  display: table;
  margin-top: .08em;
}

.method .sec-head {
  margin-bottom: clamp(32px, 4vw, 56px);
}

.method .cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 100px);
}

.m-stick {
  position: sticky;
  top: 110px;
  align-self: start;
  height: max-content;
}

.m-num {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 62;
  font-size: clamp(96px, 12vw, 190px);
  line-height: 1;
  color: var(--metodologia-numero);
  letter-spacing: -.04em;
  display: block;
  transition: opacity .35s;
}

.m-name {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: "wdth" 70;
  text-transform: none;
  font-size: clamp(26px, 2.8vw, 42px);
  line-height: 1;
  margin-top: 10px;
  transition: opacity .35s;
}

.m-bar {
  display: flex;
  gap: 6px;
  margin-top: 28px;
}

.m-bar i {
  flex: 1;
  height: 3px;
  background: var(--line);
  transition: background .4s;
}

.m-bar i.on {
  background: var(--ink);
}

.m-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 34px;
}

.m-list::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--line);
}

.m-fill {
  position: absolute;
  left: 0;
  top: 10px;
  width: 2px;
  margin-left: -.5px;
  background: var(--ink);
  height: 0;
}

.m-step {
  min-height: min(30vh, 260px);   /* alto de cada paso: deja espacio para el efecto al hacer scroll */
  padding-block: 6px 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.m-step:last-child {
  min-height: 0;
  padding-bottom: 0;
}

.m-step::before {
  content: "";
  position: absolute;
  left: -39px;
  top: 14px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--ink-2);
  transition: all .3s;
}

.m-step.on::before {
  background: var(--accent);
  border-color: var(--ink);
  transform: scale(1.3);
}

.m-step .lbl {
  color: var(--tone);
}

.m-step h3 {
  font-size: clamp(24px, 2.4vw, 36px);
}

.m-step p {
  font-size: 16px;
  line-height: 1.6;
  max-width: 30em;
}

.m-step .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.m-step .tags span {
  font-family: var(--mono);
  font-size: 12px;
  border: 1px solid var(--line);
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--ink-2);
}

@media (max-width: 860px) {
  .method .cols {
    grid-template-columns: 1fr;
  }
  .m-stick {
    display: none;
  }
  .m-step {
    min-height: 0;
    padding-bottom: 48px;
  }
}


/* =====================================================================
   15. SERVICIOS
   ===================================================================== */
/* Separación respecto a Metodología: espacio propio y una línea fina arriba */
.sec.services {
  padding-block: var(--espacio-seccion);
  border-top: 1px solid var(--line);
}

.svc-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 40px;
  align-items: end;
  margin-bottom: clamp(24px, 3vw, 40px);
}

/* Título del mismo tamaño que el de Metodología */
.services .h2 {
  font-size: clamp(34px, 4.6vw, 68px);
}

/* Texto que acompaña al título */
.services .svc-intro .lead {
  font-size: 16px;
  line-height: 1.6;
  max-width: 30em;
}

.svc-intro .h2 .l2 {
  display: block;
  color: var(--tone);
}

@media (max-width: 860px) {
  .svc-intro {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------
   Carrusel de sobres
   Medidas principales (cámbielas aquí):
     --env-w ....... ancho del sobre
     --env-h ....... alto del sobre
     --paper-rise .. cuánto sube la hoja al abrirse
   --------------------------------------------------------------------- */
.services {
  overflow: hidden;   /* los sobres de los lados no generan scroll horizontal */
}

.svc-carousel {
  --env-w: clamp(230px, 24vw, 330px);
  --env-h: calc(var(--env-w) * .64);
  --paper-rise: calc(var(--env-w) * .82);
  --slot-h: calc(var(--env-h) + var(--paper-rise) + 24px);
  position: relative;
  border-top: 1px solid var(--ink);      /* la línea debajo del título */
  padding-top: 12px;
}

.sc-stage {
  position: relative;
  height: calc(var(--slot-h) + 8px);
  touch-action: pan-y;
  user-select: none;
}

/* Un sobre */
.env {
  position: absolute;
  left: 50%;
  bottom: 24px;
  width: var(--env-w);
  height: var(--env-h);
  margin-left: calc(var(--env-w) / -2);
  cursor: pointer;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .5s, filter .5s;
  will-change: transform;
}

.env.is-active {
  cursor: default;
}

/* Interior (se ve cuando la solapa se abre) */
.env-back {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 6px;
  background: var(--servicios-sobre-interior);
}

/* La hoja sale cuando el carrusel entra en pantalla (clase .is-open, la pone main.js) */

/* Ranura: recorta la hoja por abajo para que quede "dentro" del sobre */
.env-slot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--slot-h);
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}

/* La hoja: siempre recta */
.env-paper {
  position: absolute;
  left: 5%;
  right: 5%;
  top: calc(var(--slot-h) - var(--env-h) * .94);
  height: calc(var(--rise, var(--paper-rise)) + var(--env-h) * .2);   /* la hoja apenas entra al sobre */
  padding: clamp(16px, 1.6vw, 22px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: var(--servicios-hoja);
  color: var(--servicios-hoja-texto);
  border-radius: 3px;
  box-shadow: 0 -6px 24px rgba(49, 24, 30, .18);
  text-align: left;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.svc-carousel.is-open .env.is-active .env-paper {
  transform: translateY(calc(var(--rise, var(--paper-rise)) * -1));
  transition-delay: .3s;               /* sube después de que se abre la solapa */
  pointer-events: auto;
}

.env-paper .lbl {
  color: var(--servicios-hoja-texto);
  opacity: .7;
  font-size: 11px;
}

.env-paper h3 {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1;
}

.env-paper p {
  font-size: 13px;
  line-height: 1.5;
}

.env-tags {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.env-tags li {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .01em;
  border: 1px solid var(--linea-oscura);
  border-radius: 999px;
  padding: 3px 8px;
}

.env-paper .link {
  margin-top: 4px;
  font-size: 12px;
}

/* Frente del sobre (bolsillo con la forma de V) */
.env-front {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 6px;
  background:
    linear-gradient(to top right, transparent 49.6%, rgba(0, 0, 0, .08) 50%) left / 50% 100% no-repeat,
    linear-gradient(to top left, transparent 49.6%, rgba(0, 0, 0, .08) 50%) right / 50% 100% no-repeat,
    var(--servicios-sobre);
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
}

/* Solapa: cerrada encima, abierta hacia arriba detrás de la hoja */
.env-flap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 58%;
  z-index: 4;
  background: var(--servicios-sobre);
  filter: brightness(1.12);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transition: transform .45s ease, z-index 0s linear .2s;
}

.svc-carousel.is-open .env.is-active .env-flap {
  transform: scaleY(-1);
  z-index: 1;
}

/* Sello de cera en la punta de la solapa */
.env-seal {
  position: absolute;
  left: 50%;
  top: 58%;
  z-index: 5;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--servicios-sello);
  color: var(--servicios-sobre);
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  box-shadow: 0 2px 6px rgba(49, 24, 30, .3);
  transition: opacity .25s, transform .25s;
}

.svc-carousel.is-open .env.is-active .env-seal {
  opacity: 0;
  transform: scale(.6);
}

/* Nombre del servicio escrito en el sobre */
.env-name {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 14px;
  z-index: 5;
  text-align: center;
  font-family: var(--display);
  font-variation-settings: "wdth" 85;
  font-weight: 700;
  text-transform: none;
  letter-spacing: .01em;
  font-size: 12px;
  color: var(--servicios-sobre-texto);
  transition: opacity .3s;
}

/* Flechas */
.sc-arrow {
  position: absolute;
  top: calc(var(--slot-h) + 8px - 24px - var(--env-h) / 2 + 12px);
  z-index: 30;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  background: var(--servicios-flechas-fondo);
  color: var(--servicios-flechas-icono);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(49, 24, 30, .25);
  transition: transform .25s;
}

.sc-arrow:hover {
  transform: scale(1.08);
}

.sc-prev {
  left: calc(50% - var(--env-w) / 2 - 23px);
}

.sc-next {
  left: calc(50% + var(--env-w) / 2 - 23px);
}

/* Contador "01 / 08" */
.sc-count {
  text-align: center;
  margin-top: 4px;
}

/* Botones debajo del carrusel */
.svc-ctas {
  margin-top: clamp(20px, 2.5vw, 28px);
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .svc-carousel {
    --env-w: 240px;
  }
  .env-paper p {
    font-size: 12.5px;
  }
}


/* =====================================================================
   16. PAQUETES
   ===================================================================== */
.pk-head {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 40px;
  align-items: end;
}

@media (max-width: 860px) {
  .pk-head {
    grid-template-columns: 1fr;
  }
}

.equation {
  margin-block: clamp(40px, 5vw, 64px) 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-variation-settings: "wdth" 80;
  font-weight: 700;
  text-transform: none;
}

.equation .t {
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 14px;
  background: var(--bg);
}

.equation .op {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  font-size: 26px;
  color: var(--ink-2);
}

.equation .res {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  font-size: 15px;
  padding: 11px 20px;
  border-radius: 999px;
}

.stamp {
  display: inline-block;
  font-family: var(--display);
  font-variation-settings: "wdth" 64;
  font-weight: 800;
  text-transform: none;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1;
  border-block: 2px solid var(--ink);
  padding: 10px 0;
  margin-bottom: 28px;
}

/* ---------------------------------------------------------------------
   Carteras de cuero con forro de leopardo
   Cada paquete es una funda de cuero (.cover). Al hacer clic baja y deja
   ver el forro de leopardo (.lining) con la tarjeta del detalle (.paper).
   El estampado de leopardo lo genera main.js con los colores de arriba.
   --------------------------------------------------------------------- */
/* Espacio arriba y abajo de la sección */
.sec.pk {
  padding-block: var(--espacio-seccion);
}

.pk .h2 {
  font-size: clamp(34px, 4.6vw, 68px);
}

.pk .equation {
  margin-block: clamp(24px, 3vw, 40px) 20px;
}

.pk .stamp {
  margin-bottom: 20px;
}

.pk .pk-head .lead {
  font-size: 16px;
  line-height: 1.6;
  max-width: 30em;
}

.stamp {
  font-size: clamp(22px, 2.4vw, 34px) !important;
}

.tiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.wallet {
  position: relative;
  height: 380px;
  border-radius: 12px;
  overflow: hidden;
}

/* Forro de leopardo */
.wallet .lining {
  position: absolute;
  inset: 0;
  padding: 16px;
  background-color: var(--paquetes-forro-fondo);
  background-image: var(--forro-leopardo);
  background-size: 180px 180px;
  box-shadow: inset 0 0 0 1px rgba(49, 24, 30, .25), inset 0 10px 24px rgba(49, 24, 30, .35);
}

/* Tarjeta con el detalle */
.wallet .paper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: 6px;
  background: var(--paquetes-tarjeta);
  color: var(--paquetes-tarjeta-texto);
  box-shadow: 0 6px 16px rgba(20, 8, 10, .35);
}

.wallet .paper .lbl {
  color: var(--cherry-velvet);
}

.wallet .paper .why {
  font-size: 14px;
  line-height: 1.45;
}

.wallet .paper ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wallet .paper li {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--cherry-velvet);
  border: 1px dashed rgba(49, 24, 30, .28);
  border-radius: 3px;
  padding: 5px 8px;
}

.wallet .paper .price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  border-top: 1px solid rgba(49, 24, 30, .15);
  padding-top: 8px;
}

.wallet .paper .price b {
  font-family: var(--display);
  font-variation-settings: "wdth" 80;
  font-weight: 700;
  text-transform: none;
  font-size: 15px;
}

.wallet .paper .btn {
  align-self: flex-start;
  padding: 10px 16px;
  font-size: 12px;
  background: var(--cherry-velvet);
  border-color: var(--cherry-velvet);
  color: var(--vanilla-silk);
}

.wallet .paper .btn:hover {
  background: var(--bordeaux-noir);
  border-color: var(--bordeaux-noir);
}

/* Funda de cuero */
.wallet .w-cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 50px 22px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  color: var(--paquetes-cuero-grabado);
  background: var(--textura-cuero), linear-gradient(170deg, color-mix(in srgb, var(--paquetes-cuero) 85%, white), var(--paquetes-cuero) 60%, color-mix(in srgb, var(--paquetes-cuero) 80%, black));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 28px rgba(10, 4, 6, .5);
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

/* Costura */
.wallet .w-cover::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1.5px dashed var(--paquetes-costura);
  border-radius: 8px;
  pointer-events: none;
}

/* Nombre grabado en bajo relieve */
.wallet .w-cover h3 {
  font-size: clamp(34px, 3.4vw, 50px);
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 220, 200, .2), 0 -1px 0 rgba(0, 0, 0, .6);
}

.wallet .w-cover .lbl {
  color: var(--paquetes-texto);
  opacity: .7;
}

.wallet .w-cover .hint {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--paquetes-texto);
  opacity: .6;
}

/* Broche */
.wallet .clasp {
  position: absolute;
  left: 50%;
  top: -1px;
  width: 54px;
  height: 34px;
  margin-left: -27px;
  border-radius: 0 0 27px 27px;
  background: var(--textura-cuero), var(--bordeaux-noir);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5);
}

.wallet .clasp::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 9px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--vanilla-silk), var(--warm-greige) 55%, #6d5a52);
}

/* Interacción: se asoma al pasar el mouse, baja al hacer clic */
.wallet:hover .w-cover {
  transform: translateY(14px);
}

.wallet.on .w-cover {
  transform: translateY(calc(100% - 64px));   /* queda asomada una franja con el nombre */
}

.wallet.on .w-cover .hint {
  opacity: 0;
}

/* Paquete Custom: funda en Alpine Oat */
.wallet.custom .w-cover {
  color: var(--paquetes-custom-texto);
  background: var(--textura-cuero), linear-gradient(170deg, var(--paquetes-custom-fondo), color-mix(in srgb, var(--paquetes-custom-fondo) 85%, black));
}

.wallet.custom .w-cover h3 {
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}

.wallet.custom .w-cover .lbl,
.wallet.custom .w-cover .hint {
  color: var(--paquetes-custom-texto);
}

.wallet.custom .w-cover::before {
  border-color: rgba(72, 29, 31, .4);
}

/* Tablet y celular: las carteras se deslizan de lado */
@media (max-width: 1060px) {
  .tiers {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(250px, 70%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }
  .wallet {
    scroll-snap-align: start;
  }
}

@media (max-width: 600px) {
  .wallet {
    height: 460px;
  }
}

.swipe {
  display: none;
  margin-top: 12px;
}

@media (max-width: 1060px) {
  .swipe {
    display: block;
  }
}

/* "¿Solo necesitas algo puntual?": franja compacta debajo de las carteras */
.punt {
  margin-top: clamp(36px, 4vw, 56px);
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px 48px;
  align-items: center;
}

.punt h3 {
  font-size: clamp(20px, 1.8vw, 26px);
}

.punt .lead {
  margin-top: 4px !important;
  font-size: 14px;
}

.punt .words {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 10px;
  font-family: var(--display);
  font-variation-settings: "wdth" 80;
  font-weight: 700;
  text-transform: none;
  letter-spacing: .01em;
  font-size: 14px;
  line-height: 1.6;
}

.punt .words a {
  text-decoration: none;
  color: var(--ink-2);
  transition: color .2s;
}

.punt .words a:hover {
  color: var(--tone);
}

.punt .words .sep {
  color: var(--tone);
  font-family: var(--serif);
  font-weight: 400;
}

@media (max-width: 860px) {
  .punt {
    grid-template-columns: 1fr;
  }
  .punt .words {
    justify-content: flex-start;
  }
}


/* =====================================================================
   17. DIAGNÓSTICO
   ===================================================================== */
/* Encabezado: mismo esquema que Paquetes (título a la izquierda, texto a la derecha) */
.diag .intro {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 40px;
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.diag .intro .lead {
  font-size: 16px;
  line-height: 1.6;
  max-width: 30em;
}

@media (max-width: 860px) {
  .diag .intro {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.diag .btn {
  border-color: var(--accent);
}

.diag .btn.ghost:hover {
  color: var(--bg);
}

.diag .btn.ghost {
  border-color: var(--line);
}

/* Tirada: los tres pasos (I · II · III) */
.tirada {
  list-style: none;
  margin: 0 0 clamp(24px, 2.6vw, 36px);
  padding: 0;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.tirada li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--ink-2);
  opacity: .6;
  transition: opacity .3s, color .3s;
}

.tirada li i {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}

.tirada li.on,
.tirada li.done {
  opacity: 1;
}

.tirada li.on {
  color: var(--ink);
}

.tirada li.on i {
  background: var(--diagnostico-paso-activo);
  border-color: var(--diagnostico-paso-activo);
  color: var(--diagnostico-paso-activo-texto);
}

.paso {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
}

.paso[hidden] {
  display: none;
}

.paso-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px 24px;
  flex-wrap: wrap;
}

.paso-head h3 {
  font-size: clamp(24px, 2.2vw, 32px);
}

.paso-head .it {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  font-variation-settings: normal;
  background: none;
  color: var(--ink-2);
}

.hint {
  font-size: 14px;
  color: var(--ink-2);
}

/* --- Las cartas --- */
.diag .opts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
}

.diag .opts.six {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.carta {
  height: clamp(140px, 11vw, 170px);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  perspective: 900px;
}

.opts.six .carta {
  height: clamp(120px, 9vw, 140px);
}

.c-in {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.carta[aria-pressed="true"] .c-in {
  transform: rotateY(180deg);
}

.carta:hover .c-in {
  translate: 0 -4px;
}

.c-dorso,
.c-cara {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px;
}

/* Reverso: rojo con la V, número romano arriba y nombre abajo (como una carta de tarot) */
.c-dorso {
  background: var(--diagnostico-carta-dorso);
  box-shadow:
    inset 0 0 0 7px var(--diagnostico-carta-dorso),
    inset 0 0 0 8px var(--diagnostico-carta-marco),
    0 10px 24px var(--diagnostico-carta-sombra);
  color: var(--diagnostico-carta-v);
}

.c-num {
  position: absolute;
  top: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .01em;
  opacity: .8;
}

.c-v {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(36px, 3.4vw, 50px);
  line-height: 1;
}

.c-nom {
  position: absolute;
  bottom: 16px;
  left: 14px;
  right: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--diagnostico-carta-v);
}

/* Cara: la carta volteada */
.c-cara {
  background: var(--diagnostico-carta-cara);
  color: var(--diagnostico-carta-cara-texto);
  transform: rotateY(180deg);
  gap: 6px;
  box-shadow: 0 10px 24px var(--diagnostico-carta-sombra);
}

.c-cara .lbl {
  color: var(--diagnostico-carta-cara-etiqueta);
}

.c-tit {
  font-family: var(--display);
  font-variation-settings: "wdth" 72;
  font-weight: 700;
  text-transform: none;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1;
}

.carta.wild .c-tit {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  font-variation-settings: normal;
  font-size: clamp(20px, 1.8vw, 25px);
}

.tool-nav {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.btn[disabled] {
  opacity: .35;
  pointer-events: none;
}

/* --- La lectura (resultado) --- */
.lectura {
  --ink: var(--diagnostico-lectura-texto);
  --ink-2: var(--diagnostico-lectura-suave);
  --line: var(--diagnostico-lectura-lineas);
  background: var(--diagnostico-lectura-fondo);
  color: var(--ink);
  border-radius: 10px;
  padding: clamp(22px, 3vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 44px);
  animation: lectura-in .6s ease both;
}

@keyframes lectura-in {
  from {
    opacity: 0;
    transform: rotateY(-12deg) translateY(10px);
  }
}

.lectura-txt {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lectura .lbl {
  color: var(--ink-2);
}

.lectura .big {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.05;
  letter-spacing: -.02em;
}

.lectura .readout {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-2);
}

.lectura .readout b {
  color: var(--ink);
  font-weight: 500;
}

.route {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: r;
  display: flex;
  flex-direction: column;
}

.route li {
  counter-increment: r;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.route li::before {
  content: "0" counter(r);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
  padding-top: 4px;
}

.route li b {
  font-family: var(--display);
  font-variation-settings: "wdth" 80;
  font-weight: 700;
  text-transform: none;
  font-size: 17px;
  display: block;
  line-height: 1.1;
}

.route li span {
  color: var(--ink-2);
  font-size: 15px;
}

.fit b {
  line-height: 1.1;
}

.fit {
  border: 1px solid var(--ink);
  border-radius: 6px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@media (max-width: 900px) {
  .diag .opts,
  .diag .opts.six {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .carta,
  .opts.six .carta {
    height: 128px;
  }
  .tirada li span {
    display: none;
  }
  .tirada li.on span {
    display: inline;
  }
  .lectura {
    grid-template-columns: 1fr;
  }
}

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


/* =====================================================================
   18. PORTAFOLIO
   ===================================================================== */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.filters button {
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: all .2s;
}

.filters button:hover {
  border-color: var(--ink);
}

.filters button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* ---------------------------------------------------------------------
   Tira de historias: tarjetas verticales que se arrastran de lado.
   Empieza alineada con el contenido y se sale de la pantalla por la derecha.
   --------------------------------------------------------------------- */
.portfolio {
  overflow: hidden;
}

.pf-strip {
  --story-w: clamp(220px, 22vw, 290px);
  display: flex;
  gap: 16px;
  margin-right: calc(50% - 50vw);       /* se desborda hasta el borde derecho de la pantalla */
  padding-right: var(--gut);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  padding-bottom: 6px;
  cursor: grab;
  scrollbar-width: none;
}

.pf-strip::-webkit-scrollbar {
  display: none;
}

.pf-strip.drag {
  cursor: grabbing;
  scroll-snap-type: none;
}

.story {
  flex: 0 0 var(--story-w);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  user-select: none;
  -webkit-user-drag: none;
}

.story[hidden] {
  display: none;
}

.story .cover {
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

.story:hover .cover {
  transform: translateY(-6px);
}

.story .cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.story-tag {
  position: absolute;
  z-index: 2;
  left: 12px;
  top: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .01em;
  text-transform: none;
  background: var(--vanilla-silk);
  color: var(--bordeaux-noir);
  padding: 4px 8px;
  border-radius: 999px;
}

.story h3 {
  margin: 6px 0 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 75;
  font-weight: 700;
  text-transform: none;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1;
}

.story p {
  font-size: 13px;
  color: var(--ink-2);
}

.story .metric {
  font-family: var(--display);
  font-weight: 700;
  color: var(--tone);
}

.story-more {
  font-family: var(--display);
  font-variation-settings: "wdth" 90;
  font-weight: 700;
  text-transform: none;
  font-size: 12px;
  letter-spacing: .01em;
  color: var(--tone);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .25s, transform .25s;
}

.story.sin-enlace .story-more {
  display: none;            /* sin enlace al PDF todavía */
}

.story:hover .story-more,
.story:focus-visible .story-more {
  opacity: 1;
  transform: none;
}

/* Barra de avance de la tira */
.pf-bar {
  position: relative;
  height: 2px;
  margin-top: 18px;
  background: var(--line);
}

.pf-bar i {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 20%;
  background: var(--tone);
  transition: width .15s linear;
}

/* Portada: dibujo de ejemplo (canvas) debajo de la foto real */
.cover {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  background: var(--bg-2);
}

.cover canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.phnote {
  margin-top: 14px !important;
  margin-top: 28px;
  font-size: 14px;
  color: var(--ink-2);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 52em;
}

.phnote::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border: 1px dashed var(--ink-2);
  margin-top: 5px;
}


/* Filtros del portafolio en celular: una sola fila que se desliza */
@media (max-width: 600px) {
  .portfolio .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-right: calc(var(--gut) * -1);
    padding-right: var(--gut);
    scrollbar-width: none;
  }
  .portfolio .filters button {
    flex: none;
  }
}


/* =====================================================================
   19. TESTIMONIOS  (polaroids sobre la mesa)
   ===================================================================== */
.mesa {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(16px, 3vw, 44px);
  padding-block: 8px 12px;
}

.pol {
  --giro: -5deg;
  --baja: 10px;
  margin: 0;
  width: clamp(220px, 21vw, 280px);
  flex: none;
  padding: 12px 12px 16px;
  background: var(--testimonios-polaroid);
  border-radius: 2px;
  box-shadow: 0 14px 30px var(--testimonios-sombra), 0 2px 4px var(--testimonios-sombra);
  transform: translateY(var(--baja)) rotate(var(--giro));
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .3s;
  cursor: default;
  outline: none;
}

.pol:nth-child(2) {
  --giro: 2.5deg;
  --baja: 0px;
}

.pol:nth-child(3) {
  --giro: -1.5deg;
  --baja: 18px;
}

.pol:hover,
.pol:focus-visible,
.pol.on {
  transform: translateY(-8px) rotate(0deg) scale(1.04);
  box-shadow: 0 24px 44px var(--testimonios-sombra), 0 2px 4px var(--testimonios-sombra);
  position: relative;
  z-index: 2;
}

.pol-foto {
  position: relative;
  aspect-ratio: 1;
  background: var(--testimonios-foto-fondo);
  color: var(--testimonios-foto-texto);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.pol-foto span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .01em;
  text-transform: none;
}

.pol-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pol figcaption {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 4px 0;
}

.pol blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
}

.pol-who b {
  display: block;
  font-family: var(--display);
  font-variation-settings: "wdth" 80;
  font-weight: 700;
  text-transform: none;
  font-size: 15px;
  line-height: 1.1;
}

.pol-who span {
  font-size: 13px;
  color: var(--ink-2);
}

/* Celular: las polaroids quedan en una fila que se desliza con el dedo */
@media (max-width: 760px) {
  .mesa {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gut);
    margin-inline: calc(var(--gut) * -1);
    padding: 12px var(--gut) 28px;
    scrollbar-width: none;
  }
  .mesa::-webkit-scrollbar {
    display: none;
  }
  .pol {
    width: 74vw;
    max-width: 280px;
    scroll-snap-align: start;
  }
}


/* =====================================================================
   20. NOSOTROS  (resumida: texto a la izquierda, principios y equipo a la derecha)
   ===================================================================== */
.about .grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.about h2 .it {
  color: var(--tone);
}

.about-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 30em;
}

.about-txt h2 {
  margin-bottom: 8px;
}

.about-txt p {
  font-size: 16px;
  line-height: 1.6;
}

.about-txt .belief {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.25;
  color: var(--tone);
}

.about-txt .btn {
  margin-top: 8px;
}

.about .principles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.about .principles li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding: 12px 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 80;
  font-weight: 700;
  text-transform: none;
  font-size: 17px;
}

.about .principles li:last-child {
  border-bottom: 1px solid var(--line);
}

.about .principles li span {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  color: var(--ink-2);
}

/* Equipo: cuatro fotos pequeñas en fila */
.team {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.member {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.member .photo {
  aspect-ratio: 1;
  margin-bottom: 6px;
  border: 1px dashed var(--ink-2);
  border-radius: 3px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-2);
  text-transform: none;
  letter-spacing: .01em;
  background: repeating-linear-gradient(135deg, transparent 0 12px, var(--line) 12px 13px);
  overflow: hidden;
}

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

.member b {
  font-family: var(--display);
  font-variation-settings: "wdth" 80;
  font-weight: 700;
  text-transform: none;
  font-size: 14px;
}

.member span {
  font-size: 13px;
  color: var(--ink-2);
}

@media (max-width: 900px) {
  .about .grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}


/* =====================================================================
   21. CONTACTO  (texto a la izquierda, formulario en una tarjeta a la derecha)
   ===================================================================== */
.contact .grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.contact-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 30em;
}

.contact-txt h2 {
  margin-bottom: 8px;
}

.contact-txt p {
  font-size: 16px;
  line-height: 1.6;
}

.wa {
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.wa .btn {
  background: var(--cherry-velvet);
  border-color: var(--cherry-velvet);
  color: var(--vanilla-silk);
}

.wa .btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

/* Tarjeta del formulario */
.contact-card {
  background: var(--bg-2);
  border-radius: 10px;
  padding: clamp(22px, 3vw, 40px);
}

form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 24px;
}

.f {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.f label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--ink-2);
}

.f input,
.f textarea {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 8px 0 10px;
  border-radius: 0;
  outline: none;
  transition: border-color .2s;
}

.f input:focus,
.f textarea:focus {
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 var(--accent);
}

.f textarea {
  resize: vertical;
  min-height: 72px;
}

.f.full {
  grid-column: 1/-1;
}

.f .err {
  font-size: 13px;
  color: var(--cherry-velvet);
  min-height: 0;
}

.need {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.need input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.need label {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
  transition: all .2s;
}

.need label:hover {
  border-color: var(--ink);
}

.need input:checked+label {
  background: var(--cherry-velvet);
  color: var(--vanilla-silk);
  border-color: var(--cherry-velvet);
}

.need input:focus-visible+label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.need .star+label {
  border-color: var(--ink);
  border-style: dashed;
}

.need .star:checked+label {
  background: var(--cherry-velvet);
  color: var(--vanilla-silk);
  border-style: solid;
}

.submit {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.submit .btn {
  background: var(--cherry-velvet);
  border-color: var(--cherry-velvet);
  color: var(--vanilla-silk);
}

.submit .btn:hover {
  background: var(--ink);
  border-color: var(--ink);
}

.sent {
  border: 1px solid var(--ink);
  border-radius: 4px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sent .d {
  font-size: clamp(26px, 2.4vw, 36px);
}

.sent pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: var(--mono);
  font-size: 13px;
  background: var(--bg);
  padding: 14px;
  border-radius: 3px;
  max-height: 220px;
  overflow: auto;
}

.sent .row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .contact .grid {
    grid-template-columns: 1fr;
  }
  .fields {
    gap: 18px 16px;
  }
}


/* =====================================================================
   22. CIERRE Y FOOTER  (compacto)
   ===================================================================== */
.close {
  padding-block: var(--espacio-seccion) 0;
  overflow: hidden;
}

/* Las seis palabras en una sola tira; se rellenan una a una con el scroll */
.verbs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: .28em;
  font-size: clamp(34px, 5.4vw, 88px);
}

.verbs li {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 62;
  text-transform: none;
  line-height: 1;
  letter-spacing: -.01em;
  color: transparent;
  -webkit-text-stroke: 1px var(--cierre-palabras-contorno);
  transition: color .5s, -webkit-text-stroke-color .5s;
}

/* Intercaladas: una en negrilla, la siguiente sin negrilla */
.verbs li:nth-child(even) {
  font-weight: 400;
}

.verbs li.on {
  color: var(--cierre-palabras-relleno);
  -webkit-text-stroke-color: var(--cierre-palabras-relleno);
}

.verbs li:last-child.on {
  color: var(--cierre-palabra-final);
  -webkit-text-stroke-color: var(--cierre-palabra-final);
}

.final {
  margin-top: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
  border-top: 1px solid var(--line);
  padding-top: clamp(24px, 3vw, 40px);
}

.final h2 {
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1;
}

.final h2 > span {
  display: block;
}

@media (min-width: 861px) {
  .final h2 > span {
    white-space: nowrap;
  }
}

.final h2 > span:nth-child(2) {
  color: var(--tone);
}

.final .ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}

@media (max-width: 860px) {
  .final {
    grid-template-columns: 1fr;
  }
  .final .ctas {
    align-items: flex-start;
  }
}

.wordmark {
  margin: clamp(32px, 4vw, 56px) auto 0;
  width: min(70%, 440px);
}

.wordmark img {
  width: 100%;
  height: auto;
  display: block;
}

.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding-block: 18px calc(env(safe-area-inset-bottom, 0px) + 90px);
  border-top: 1px solid var(--line);
  margin-top: 24px;
  font-size: 13px;
  color: var(--ink-2);
}

.foot nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.foot a {
  text-decoration: none;
}

.foot a:hover {
  color: var(--ink);
}

@media (min-width: 961px) {
  .foot {
    padding-bottom: 18px;
  }
}


/* =====================================================================
   23. MOVIMIENTO REDUCIDO
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}