/* Victoria Arce · hoja principal
   Dirección: "el canto del vidrio". Blanco frío con un punto de verde —el color real
   del vidrio flotado visto de lado—, láminas translúcidas posadas sobre fotografía, y
   el naranja #F5411C medido del banner de su WhatsApp Business. El verde profundo es
   la tinta y las bandas densas, nunca el fondo: el logotipo de la firma es oscuro y
   manda que prime el blanco. */

:root {
  --papel: #f4f8f6;
  --blanco: #ffffff;
  --tinta: #11201e;
  --tinta-2: rgba(17, 32, 30, 0.72);
  /* 0.64 es el mínimo que mantiene 4.5:1 en los rótulos de 11 px sobre el papel
     y sobre las láminas. Por debajo de ahí, el gris claro no pasa AA. */
  --tinta-3: rgba(17, 32, 30, 0.64);
  --hondo: #0e201e;
  --hondo-2: #15312d;

  --marca: #f5411c;
  --marca-solida: #c42f0d;
  --grana: #a8261a;
  --crema: #fff2d5;

  --velo: rgba(255, 255, 255, 0.58);
  --velo-2: rgba(255, 255, 255, 0.76);
  --canto: rgba(255, 255, 255, 0.95);
  --linea: rgba(17, 32, 30, 0.12);
  --linea-suave: rgba(17, 32, 30, 0.07);

  --display: "Newsreader", Georgia, serif;
  --cuerpo: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --dato: "DM Mono", ui-monospace, SFMono-Regular, monospace;

  --radio: 18px;
  --radio-s: 11px;
  --ancho: 1320px;
  --salida: cubic-bezier(0.23, 1, 0.32, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 1rem/1.65 var(--cuerpo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* El vidrio no luce sobre un plano liso: hace falta algo que velar. Tres manchas
   de luz fijas, muy bajas, con sus dos colores. Sin movimiento. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(58rem 40rem at 84% -10%, rgba(245, 65, 28, 0.16), transparent 62%),
    radial-gradient(50rem 36rem at 4% 36%, rgba(23, 86, 78, 0.12), transparent 64%),
    radial-gradient(46rem 34rem at 96% 88%, rgba(255, 210, 140, 0.26), transparent 62%);
  pointer-events: none;
}

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

::selection { background: var(--marca); color: #fff; }

:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 3px;
  border-radius: 4px;
}

.contenedor { width: min(100% - 3rem, var(--ancho)); margin-inline: auto; }

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

/* ---------- tipografía ---------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  font-optical-sizing: auto;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 4.7vw, 3.55rem); line-height: 1.06; letter-spacing: -0.028em; }
h2 { font-size: clamp(1.95rem, 4.1vw, 3rem); line-height: 1.09; letter-spacing: -0.024em; }
h3 { font-size: clamp(1.22rem, 2.1vw, 1.5rem); line-height: 1.24; letter-spacing: -0.014em; }

.en-cursiva { font-style: italic; color: var(--grana); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.entradilla {
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  line-height: 1.62;
  color: var(--tinta-2);
  max-width: 54ch;
}

/* Las etiquetas y los datos duros en mono: duración, precio, modalidad.
   Es la única familia que no describe nada, solo mide. */
.etiqueta {
  font-family: var(--dato);
  line-height: 1.5;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.etiqueta::before {
  content: "";
  width: 1.9rem;
  height: 1px;
  background: var(--marca);
  flex: none;
}

/* ---------- la lámina: el material de toda la página ---------- */

.lamina {
  position: relative;
  background: var(--velo);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radio);
  /* El filo que capta la luz va como sombra interior, nunca como borde parcial:
     un border-top de 2px sobre una esquina redondeada dibuja una media luna. */
  box-shadow:
    inset 0 1px 0 var(--canto),
    0 26px 54px -34px rgba(17, 32, 30, 0.42);
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
}

.lamina--densa {
  background: var(--velo-2);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

/* ---------- cabecera ---------- */

.cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  background: rgba(244, 248, 246, 0.72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--linea-suave);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 4.6rem;
}

.marca { display: flex; align-items: center; text-decoration: none; }
.marca img { width: 152px; height: auto; }

.menu { display: flex; align-items: center; gap: 1.85rem; list-style: none; margin: 0; padding: 0; }

.menu a {
  font-size: 0.875rem;
  color: var(--tinta-2);
  text-decoration: none;
  transition: color 180ms var(--salida);
}

@media (hover: hover) and (pointer: fine) {
  .menu a:hover { color: var(--marca); }
}

.cabecera__acciones { display: flex; align-items: center; gap: 0.7rem; }

/* ---------- botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.82rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--marca-solida);
  color: #fff;
  font: 500 0.925rem/1 var(--cuerpo);
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 14px 30px -18px rgba(196, 47, 13, 0.95);
  transition: transform 160ms var(--salida), filter 180ms var(--salida);
}

.boton:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .boton:hover { filter: brightness(1.07); }
}

.boton--vidrio {
  background: var(--velo-2);
  color: var(--tinta);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 var(--canto), 0 10px 26px -18px rgba(17, 32, 30, 0.5);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

@media (hover: hover) and (pointer: fine) {
  .boton--vidrio:hover { background: #fff; filter: none; }
}

.boton--pequeno { padding: 0.62rem 1.15rem; font-size: 0.855rem; }

.enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--grana);
  font-size: 0.925rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(168, 38, 26, 0.35);
  padding-bottom: 2px;
  transition: border-color 180ms var(--salida);
}

@media (hover: hover) and (pointer: fine) {
  .enlace:hover { border-color: var(--grana); }
}

/* ---------- umbral ---------- */

.umbral {
  position: relative;
  overflow-x: clip;
  min-height: min(92vh, 900px);
  display: flex;
  align-items: center;
  padding: 7.5rem 0 4rem;
}

/* El vidrio necesita algo detrás: aquí la luz sube de intensidad respecto al
   resto de la página, porque es la única pantalla sin fotografía a sangre. */
.umbral::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(42rem 32rem at 68% 18%, rgba(245, 65, 28, 0.16), transparent 64%),
    radial-gradient(34rem 28rem at 12% 76%, rgba(23, 86, 78, 0.12), transparent 66%);
  pointer-events: none;
}

.umbral__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}

.umbral__texto { max-width: 34ch; }
.umbral h1 { margin: 0.5rem 0 1.4rem; }
.umbral .entradilla { margin-bottom: 2.2rem; }

/* "Soltar" se posa: cae un poco y se asienta. Es el gesto de la marca, una vez
   al cargar y nada más. */
.palabra { display: inline-block; }

.umbral__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 2.4rem;
}

.indicio {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--dato);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-3);
  text-decoration: none;
  transition: color 180ms var(--salida);
}

.indicio svg { width: 17px; height: 17px; }

@media (hover: hover) and (pointer: fine) {
  .indicio:hover { color: var(--marca-solida); }
}

@media (prefers-reduced-motion: no-preference) {
  .indicio svg { animation: respirar 2.4s ease-in-out infinite; }
}

@keyframes respirar {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(5px); opacity: 1; }
}

/* ---------- el mazo: el carrusel del umbral ---------- */

/* Un 20% más grande que la lámina que sustituye. La altura manda y el ancho sale
   del formato; con width:100% la columna crecía más que la rejilla. */
.mazo {
  position: relative;
  justify-self: end;
  width: auto;
}

.mazo__pila {
  position: relative;
  aspect-ratio: 4 / 5;
  height: min(76vh, 740px);
  width: auto;
}

.carta {
  --d: 0;
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    inset 0 1px 0 var(--canto),
    0 42px 86px -46px rgba(17, 32, 30, 0.6);
  transform:
    translate3d(calc(var(--d) * 22px), calc(var(--d) * -22px), 0)
    rotate(calc(var(--d) * 2.4deg))
    scale(calc(1 - var(--d) * 0.022));
  z-index: calc(10 - var(--d));
  transition: transform 760ms var(--salida), opacity 760ms var(--salida);
}

/* Las de atrás se aclaran con un velo ENCIMA, no bajando su propia opacidad:
   si la carta es translúcida, durante la transición se ven las tres imágenes
   superpuestas. Opacas siempre, salvo la que cae. */
.carta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: rgba(246, 250, 248, calc(var(--d) * 0.46));
  transition: background 760ms var(--salida);
  pointer-events: none;
}

.carta picture { display: block; width: 100%; height: 100%; }

.carta img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Cada foto trae su punto de interés: al recortarse en apaisado —pantallas
     bajas— sin esto se quedaban las caras fuera del encuadre. */
  object-position: var(--foco, 50% 40%);
}


.carta__vidrio {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(142deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.03) 46%, rgba(17, 32, 30, 0.14));
  box-shadow: inset 0 1px 0 var(--canto), inset 0 0 0 1px rgba(255, 255, 255, 0.42);
  pointer-events: none;
}

/* La frase: va en la serif, no en la mono. No es un dato, es una voz. */
.carta__frase {
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 1.1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radio-s);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 0 var(--canto);
  backdrop-filter: blur(20px) saturate(155%);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.02rem, 1.45vw, 1.28rem);
  line-height: 1.3;
  letter-spacing: -0.014em;
  color: var(--tinta);
  text-wrap: balance;
  z-index: 4;
  opacity: clamp(0, calc(1 - var(--d)), 1);
  transition: opacity 240ms var(--salida);
}

/* La frase de la carta que llega se escribe de izquierda a derecha. El clip va en
   el span y no en el figcaption: si no, lo que se revela es la cajita de vidrio
   entera y parece que crece, no que alguien escribe. steps() da el salto de
   máquina de escribir, y clip-path corre en el compositor. */
.carta__frase span { display: block; }

.carta[data-d="0"] .carta__frase span {
  animation: escribir 1080ms steps(34, end) 220ms backwards;
}

@keyframes escribir {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 -2px 0 0); }
}

/* La carta de delante se suelta: cae girando y se desvanece. Va como animación y
   no como transición porque así termina sola y avisa con animationend — el JS no
   tiene que encadenar temporizadores para devolverla al fondo. */
.carta.cae {
  z-index: 20;
  animation: soltar 820ms cubic-bezier(0.46, 0.03, 0.52, 0.96) forwards;
  transition: none;
}

@keyframes soltar {
  from { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  to { opacity: 0; transform: translate3d(-5%, 18%, 0) rotate(-8deg) scale(0.93); }
}

/* Al volver al fondo no debe vérsela viajar hacia atrás. */
.carta.recoloca { transition: none; }

/* ---------- mandos del mazo ---------- */

.mazo__mandos {
  position: absolute;
  z-index: 21;
  left: 50%;
  bottom: -2.4rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}

.mazo__mando {
  padding: 0.5rem 0.25rem;
  border: 0;
  background: none;
  cursor: pointer;
  line-height: 0;
}

.mazo__mando span {
  display: block;
  width: 30px;
  height: 2px;
  border-radius: 2px;
  background: rgba(17, 32, 30, 0.18);
  transition: background 220ms var(--salida), width 320ms var(--salida);
}

.mazo__mando[aria-selected="true"] span { background: var(--marca); width: 46px; }

@media (hover: hover) and (pointer: fine) {
  .mazo__mando:hover span { background: rgba(17, 32, 30, 0.42); }
  .mazo__mando[aria-selected="true"]:hover span { background: var(--marca); }
}

/* ---------- entrada al cargar ---------- */

/* Una sola secuencia, 70 ms entre piezas. Se ejecuta aunque el JS no llegue:
   es CSS puro con delay, no depende de ninguna clase. */
@media (prefers-reduced-motion: no-preference) {
  .entra {
    opacity: 0;
    animation: asentar 620ms var(--salida) forwards;
    animation-delay: calc(var(--o) * 70ms + 80ms);
  }

  .palabra {
    animation: posarse 760ms var(--salida) forwards;
    animation-delay: 150ms;
  }

  .mazo__pila {
    opacity: 0;
    animation: entrar-lamina 900ms var(--salida) 180ms forwards;
  }

  .mazo__mandos {
    opacity: 0;
    animation: asentar 620ms var(--salida) 620ms forwards;
  }
}

@keyframes asentar {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes posarse {
  from { transform: translateY(-0.26em); }
  to { transform: none; }
}

@keyframes entrar-lamina {
  from { opacity: 0; transform: translateY(26px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* ---------- el relato ---------- */

/* La pista da el recorrido; el escenario se queda quieto mientras pasa.
   --p va de 0 a 1 y lo escribe app.js en cada cuadro. */
.relato__pista { height: 380vh; position: relative; }

.relato__escenario {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 580px;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  align-items: center;
  padding: 5rem 1.25rem 4rem;
  overflow: hidden;
}

.relato__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.relato__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 34%;
  /* Arranca velada y se afina según avanza el recorrido. */
  filter: blur(calc((1 - var(--p, 0)) * 16px)) saturate(calc(0.6 + var(--p, 0) * 0.5));
  transform: scale(calc(1.14 - var(--p, 0) * 0.1));
}

.relato__fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(244, 248, 246, 0.9), rgba(244, 248, 246, 0.48) 46%, rgba(244, 248, 246, 0.94));
  opacity: calc(1 - var(--p, 0) * 0.42);
}

/* Las capas: cada una con su tramo. Se calcula un avance propio --t de 0 a 1
   y de ahí salen opacidad y desplazamiento. Solo transform y opacity. */
.capas {
  position: relative;
  z-index: 1;
  grid-row: 2;
  width: min(80vw, 520px);
  height: min(30vh, 196px);
  pointer-events: none;
}

/* Las de debajo asoman por el borde inferior: así se leen las cuatro a la vez
   y se entiende que lo que pesa viene en capas. */
.capa {
  --inicio: calc(var(--i) * 0.14);
  --t: clamp(0, calc((var(--p, 0) - var(--inicio)) / 0.25), 1);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  padding: 1.4rem 1.6rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 0 var(--canto), 0 22px 46px -30px rgba(17, 32, 30, 0.55);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  opacity: calc(1 - var(--t));
  transform:
    translate3d(calc(var(--i) * -9px), calc(var(--i) * 30px - var(--t) * 26vh), 0)
    rotate(calc(var(--i) * -1.1deg))
    scale(calc(1 - var(--i) * 0.018 - var(--t) * 0.06));
  transform-origin: 50% 0%;
}

.capa b {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.9vw, 1.7rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--tinta);
  text-wrap: balance;
}

/* Los textos del relato se relevan: cada uno tiene su ventana dentro de --p. */
.relato__textos {
  position: relative;
  z-index: 2;
  grid-row: 1;
  align-self: end;
  display: grid;
  place-items: center;
  width: min(100%, 50rem);
  min-height: 6.5rem;
  margin-bottom: 2.5rem;
  text-align: center;
}

/* Cada frase tiene su ventana dentro del recorrido: la primera ya está puesta al
   entrar (centro 0), la última cede el sitio al titular. */
.escena {
  --centro: calc(var(--e) * 0.3);
  --d: max(calc(var(--centro) - var(--p, 0)), calc(var(--p, 0) - var(--centro)));
  grid-area: 1 / 1;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  line-height: 1.16;
  letter-spacing: -0.022em;
  text-wrap: balance;
  opacity: clamp(0, calc(1 - var(--d) / 0.17), 1);
  transform: translate3d(0, calc(var(--d) * 46px), 0);
}

.escena--final { opacity: clamp(0, calc((var(--p, 0) - 0.78) / 0.12), 1); transform: none; }

.relato__acciones {
  position: relative;
  z-index: 3;
  grid-row: 3;
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.8rem;
  opacity: clamp(0, calc((var(--p, 0) - 0.8) / 0.12), 1);
  pointer-events: auto;
}

/* Dónde va del recorrido, sin números ni puntos: una línea que se llena. */
.relato__barra {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 2.2rem;
  transform: translateX(-50%);
  width: min(42vw, 230px);
  height: 2px;
  border-radius: 2px;
  background: rgba(17, 32, 30, 0.14);
  opacity: calc(1 - clamp(0, calc((var(--p, 0) - 0.82) / 0.1), 1));
}

.relato__barra span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--marca);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

.seccion--cifras { padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(3.5rem, 7vw, 5rem); }

/* ---------- cifras ---------- */

.cifras {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 0;
  border-radius: var(--radio);
  overflow: hidden;
  /* El fondo del contenedor asoma por el hueco de 1px y hace de separador: un
     filete que no se dobla en las esquinas ni se duplica entre celdas. */
  background: rgba(17, 32, 30, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 0 var(--canto), 0 26px 54px -36px rgba(17, 32, 30, 0.34);
}

/* Cada cifra en su celda, separadas por el propio hueco de la rejilla: el filete
   sale del fondo, no de bordes sueltos que se doblarían en las esquinas. */
.cifra {
  position: relative;
  padding: 2rem 1.4rem 1.9rem;
  background: rgba(255, 255, 255, 0.56);
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
}

/* El acento cuelga del borde superior y marca dónde empieza cada dato. */
.cifra::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.4rem;
  width: 1.6rem;
  height: 2px;
  background: var(--marca);
}

.cifra__valor {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.4rem, 4.6vw, 3.5rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-variant-numeric: lining-nums;
  color: var(--tinta);
}

/* El signo más no es parte del número: va más pequeño, alzado y en el color de
   marca, para que la cifra se lea de un golpe. */
.cifra__valor i {
  font-style: normal;
  font-size: 0.46em;
  vertical-align: 0.76em;
  letter-spacing: 0;
  margin-right: 0.06em;
  color: var(--marca);
}

.cifra__rotulo {
  margin-top: 0.75rem;
  font-family: var(--dato);
  font-size: 0.73rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--tinta-2);
  max-width: 15ch;
}

/* ---------- secciones ---------- */

.seccion { padding: clamp(4.5rem, 9vw, 7.5rem) 0; }

/* ---------- quién es ---------- */

.perfil {
  display: grid;
  grid-template-columns: 0.72fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.perfil__retrato { border-radius: 22px; overflow: hidden; position: relative; box-shadow: 0 40px 78px -46px rgba(17, 32, 30, 0.55); }
.perfil__retrato img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.perfil__retrato::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 var(--canto), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.2), transparent 46%);
  pointer-events: none;
}

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.8rem; }

.chip {
  font-family: var(--dato);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  background: var(--velo);
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: var(--tinta-2);
}

.acreditaciones {
  list-style: none;
  margin: 1.9rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--linea);
  display: grid;
  gap: 0.6rem;
  font-size: 0.925rem;
  color: var(--tinta-2);
}

.acreditaciones li { display: flex; gap: 0.7rem; align-items: baseline; }
.acreditaciones li::before { content: "·"; color: var(--marca); font-size: 1.4rem; line-height: 0.6; }

/* ---------- el método ---------- */

.metodo { display: grid; grid-template-columns: 1fr 0.92fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

/* Los tres momentos del taller. El velo baja de uno al siguiente: el primero llega
   casi opaco y el último se ve limpio. El método, dicho con el material. */
.pasos { display: grid; gap: 1rem; }

.paso { padding: 1.6rem 1.7rem; }
.paso h3 { margin-bottom: 0.55rem; }
.paso p { color: var(--tinta-2); font-size: 0.95rem; margin: 0; }

.paso--1 { background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(22px) saturate(130%); -webkit-backdrop-filter: blur(22px) saturate(130%); }
.paso--2 { background: rgba(255, 255, 255, 0.58); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); }
.paso--3 { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(4px) saturate(150%); -webkit-backdrop-filter: blur(4px) saturate(150%); }

.metodo__media { position: relative; border-radius: 22px; overflow: hidden; }
.metodo__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.metodo__media--marca img { aspect-ratio: 16 / 9; }

.metodo__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 var(--canto), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

.marca-soltar { width: 190px; margin-bottom: 1.4rem; }

.lema {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--grana);
  margin-top: 1.4rem;
}

/* ---------- talleres ---------- */

.destacado { display: grid; grid-template-columns: 0.95fr 1fr; overflow: hidden; margin-bottom: 1.4rem; }

.destacado__media { position: relative; min-height: 340px; }
.destacado__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.destacado__cuerpo { padding: clamp(1.8rem, 3.4vw, 2.8rem); }
.destacado__cuerpo h3 { font-size: clamp(1.7rem, 3vw, 2.25rem); margin-bottom: 0.9rem; }
.destacado__cuerpo > p { color: var(--tinta-2); }

.ficha-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin: 1.5rem 0;
  padding: 1.1rem 0;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  font-family: var(--dato);
  font-size: 0.8rem;
  color: var(--tinta-2);
}

.ficha-datos b { color: var(--tinta); font-weight: 500; }

.precio { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1.5rem; }

.precio__cifra { font-family: var(--display); font-size: 2.2rem; line-height: 1; letter-spacing: -0.032em; }

.precio__nota {
  font-size: 0.85rem;
  color: var(--grana);
  background: rgba(245, 65, 28, 0.1);
  border: 1px solid rgba(245, 65, 28, 0.28);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
}

/* Son seis: en pantalla ancha van 3+3, no 4+2. */
.rejilla-talleres {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 285px), 1fr));
  gap: 1.4rem;
}

@media (min-width: 1040px) {
  .rejilla-talleres { grid-template-columns: repeat(3, 1fr); }
}

.taller { overflow: hidden; display: flex; flex-direction: column; }

.taller__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.taller__media img { width: 100%; height: 100%; object-fit: cover; }

.taller__cat {
  position: absolute;
  z-index: 2;
  left: 0.85rem;
  bottom: 0.85rem;
  font-family: var(--dato);
  font-size: 0.655rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-2);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}

.taller__cuerpo { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.taller__cuerpo h3 { font-size: 1.28rem; margin-bottom: 0.6rem; }
.taller__cuerpo p { font-size: 0.915rem; color: var(--tinta-2); }

.taller__pie {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linea);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--dato);
  font-size: 0.78rem;
  color: var(--tinta-2);
}

.taller__pie b { color: var(--tinta); font-weight: 500; }

.taller details, .destacado details { margin-top: 1.1rem; }

.taller summary, .destacado summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.875rem;
  color: var(--grana);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.taller summary::-webkit-details-marker,
.destacado summary::-webkit-details-marker { display: none; }

.taller summary::after, .destacado summary::after { content: "+"; font-family: var(--dato); opacity: 0.7; }
.taller details[open] summary::after, .destacado details[open] summary::after { content: "–"; }

.detalle {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  color: var(--tinta-2);
  border-left: 1px solid rgba(245, 65, 28, 0.3);
  padding-left: 1rem;
}

.detalle dt {
  font-family: var(--dato);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-top: 0.85rem;
}

.detalle dt:first-child { margin-top: 0; }
.detalle dd { margin: 0.3rem 0 0; }

/* ---------- testimonios ---------- */

.rejilla-voces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1.4rem;
  align-items: start;
}

.voz { padding: 1.9rem 1.8rem; }

.voz blockquote {
  margin: 0 0 1.3rem;
  font-family: var(--display);
  font-size: 1.2rem;
  line-height: 1.44;
  letter-spacing: -0.014em;
  font-style: italic;
}

.voz figcaption {
  font-family: var(--dato);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--tinta-3);
  text-transform: uppercase;
}

.voz figcaption b { display: block; color: var(--tinta-2); font-weight: 400; margin-bottom: 0.2rem; }
.voz .detalle { font-size: 0.875rem; line-height: 1.6; }
.voz .detalle p { margin-bottom: 0.8em; }

/* ---------- la banda oscura: la sesión gratuita ---------- */

/* El único bloque en verde profundo de toda la página. Ancla el blanco y le da al
   paso más importante un sitio donde no compite con nada. */
.invitacion {
  position: relative;
  padding: clamp(2.8rem, 6vw, 4.5rem);
  border-radius: 26px;
  overflow: hidden;
  background: var(--hondo);
  color: #eef5f2;
  text-align: center;
  box-shadow: 0 44px 86px -48px rgba(17, 32, 30, 0.8);
}

.invitacion::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(34rem 22rem at 50% -14%, rgba(245, 65, 28, 0.42), transparent 66%),
    radial-gradient(28rem 20rem at 88% 112%, rgba(255, 210, 140, 0.16), transparent 64%);
  pointer-events: none;
}

.invitacion > * { position: relative; }
.invitacion h2 { max-width: 20ch; margin: 0 auto 1.2rem; color: #fff; }
.invitacion .entradilla { margin: 0 auto 2rem; color: rgba(238, 245, 242, 0.78); }
.invitacion .etiqueta { justify-content: center; color: rgba(238, 245, 242, 0.6); }

.condiciones {
  margin-top: 1.5rem;
  font-family: var(--dato);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(238, 245, 242, 0.52);
}

/* ---------- contacto ---------- */

.contacto { display: grid; grid-template-columns: 0.85fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

.formulario { padding: clamp(1.8rem, 3.5vw, 2.6rem); }

.campo { margin-bottom: 1.15rem; }

.campo label {
  display: block;
  font-family: var(--dato);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-3);
  margin-bottom: 0.45rem;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border-radius: var(--radio-s);
  border: 1px solid rgba(17, 32, 30, 0.16);
  background: rgba(255, 255, 255, 0.72);
  color: var(--tinta);
  font: 400 0.95rem/1.5 var(--cuerpo);
  transition: border-color 180ms var(--salida), background 180ms var(--salida);
}

.campo textarea { resize: vertical; min-height: 110px; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--marca);
  background: #fff;
  outline: none;
}

.consentimiento {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--tinta-2);
  margin: 1.4rem 0;
}

.consentimiento input { margin-top: 0.22rem; accent-color: var(--marca); flex: none; }

.aviso-envio { margin-top: 1rem; font-size: 0.875rem; color: var(--grana); min-height: 1.3em; }

.canales { display: grid; gap: 0.9rem; margin-top: 2rem; }

.canal {
  display: block;
  padding: 1.05rem 1.2rem;
  border-radius: var(--radio-s);
  background: var(--velo);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: inset 0 1px 0 var(--canto);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0.95rem;
  color: var(--tinta);
  text-decoration: none;
  transition: transform 160ms var(--salida), background 180ms var(--salida);
}

.canal:active { transform: scale(0.99); }

@media (hover: hover) and (pointer: fine) {
  .canal:hover { background: #fff; }
}

.canal b {
  display: block;
  font-family: var(--dato);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-3);
  font-weight: 400;
  margin-bottom: 0.35rem;
}

.canal span { color: var(--tinta-3); font-size: 0.85rem; }

/* ---------- WhatsApp flotante ---------- */

.flotante {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.3rem;
  border-radius: 999px;
  background: #14803e;
  color: #fff;
  font: 500 0.9rem/1 var(--cuerpo);
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 16px 34px -16px rgba(20, 128, 62, 0.9);
  transition:
    transform 220ms var(--salida),
    box-shadow 220ms var(--salida);
}

/* La onda: tres pulsos al entrar y se calla. Un halo latiendo sin parar en algo
   que está fijo en pantalla toda la visita acaba siendo ruido. */
.flotante::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #14803e;
  opacity: 0;
}

.flotante svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: transform 300ms var(--salida);
}

.flotante:active { transform: scale(0.96); }

@media (hover: hover) and (pointer: fine) {
  .flotante:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.34),
      0 22px 44px -18px rgba(20, 128, 62, 0.95);
  }

  /* El auricular se inclina, como cuando se descuelga. */
  .flotante:hover svg { transform: rotate(-12deg) scale(1.08); }
}

@media (prefers-reduced-motion: no-preference) {
  .flotante {
    animation: llegar-flotante 620ms var(--salida) 1.1s backwards;
  }

  .flotante::before {
    animation: onda 2.4s ease-out 1.9s 3;
  }
}

@keyframes llegar-flotante {
  from { opacity: 0; transform: translateY(18px) scale(0.9); }
  to { opacity: 1; transform: none; }
}

@keyframes onda {
  0% { opacity: 0.5; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.5); }
}

/* ---------- pie ---------- */

.pie { padding: 3.5rem 0 2.5rem; border-top: 1px solid var(--linea); margin-top: 3rem; }

.pie__fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; }
.pie img { width: 148px; margin-bottom: 1rem; }
.pie p { font-size: 0.875rem; color: var(--tinta-3); max-width: 42ch; }

.pie__enlaces { display: flex; gap: 1.6rem; flex-wrap: wrap; font-size: 0.875rem; }
.pie__enlaces a { color: var(--tinta-2); text-decoration: none; }

@media (hover: hover) and (pointer: fine) {
  .pie__enlaces a:hover { color: var(--marca); }
}

.pie__legal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea-suave);
  font-family: var(--dato);
  font-size: 0.72rem;
  color: var(--tinta-3);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}

/* ---------- entrada en escena ---------- */

/* Solo se esconde si hay JS para volver a mostrarlo: sin la clase .js —script
   caído, bloqueado, o un bot que no ejecuta— el contenido se ve igual. */
.js .aparece { opacity: 0; transform: translateY(14px); }

.js .aparece.visible {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--salida), transform 620ms var(--salida);
}

/* ---------- adaptaciones ---------- */

@media (max-width: 980px) {
  .perfil, .metodo, .destacado, .contacto { grid-template-columns: 1fr; }

  /* En móvil la carta no se recorta por el borde de la pantalla: ocupa el hueco
     que queda bajo el texto y la foto hace cover dentro. svh excluye la barra
     dinámica de Safari, que es la que dejaba la imagen cortada a media cara. */
  .umbral {
    min-height: 100svh;
    /* El padding inferior reserva el sitio de los mandos, que cuelgan de la pila. */
    padding: 5.6rem 0 3.4rem;
    align-items: stretch;
  }

  .umbral__rejilla {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(13rem, 1fr);
    gap: 1.5rem;
    align-items: stretch;
  }

  .umbral__texto { max-width: none; order: 1; }
  .umbral .entradilla { margin-bottom: 1.5rem; font-size: 1rem; }
  .umbral__acciones { margin-bottom: 1.2rem; gap: 0.6rem; }
  .umbral h1 { margin: 0.4rem 0 1rem; }

  .mazo { order: 2; justify-self: stretch; width: 100%; padding-right: 26px; min-height: 0; }
  .mazo__pila { aspect-ratio: auto; height: 100%; width: 100%; min-height: 0; }
  .carta__frase { font-size: 1rem; padding: 0.85rem 1rem; left: 0.9rem; right: 0.9rem; bottom: 0.9rem; }
  .mazo__mandos { bottom: auto; top: calc(100% + 0.6rem); }
  .carta { transform:
    translate3d(calc(var(--d) * 13px), calc(var(--d) * -13px), 0)
    rotate(calc(var(--d) * 1.6deg))
    scale(calc(1 - var(--d) * 0.02)); }
  .destacado__media { min-height: 240px; }
  .cifras { grid-template-columns: repeat(2, 1fr); }
  .cifra { padding: 1.5rem 1.1rem 1.4rem; }
  .cifra::before { left: 1.1rem; }
  .cifra__rotulo { max-width: none; }

  /* El retrato ocupaba 320 px y dejaba el hueco a la derecha: a todo el ancho. */
  .perfil__retrato { max-width: none; }
  .menu { display: none; }
}

@media (max-width: 720px) {
  .cabecera .boton { padding: 0.6rem 1rem; font-size: 0.82rem; }
}

@media (max-width: 560px) {
  .cifra__valor { font-size: 2.1rem; }
  .relato__acciones .boton,
  .umbral__acciones .boton { width: 100%; }

  /* La carta asomando ya dice que hay más abajo. */
  .umbral .indicio { display: none; }
  .pie__fila { flex-direction: column; }
  .flotante span { display: none; }
  .flotante { padding: 0.9rem; }
}

/* Pantallas bajas (SE, panorámico): se aprieta el texto para que la carta siga
   entrando entera. Lo que no se recorta nunca es la imagen. */
@media (max-width: 980px) and (max-height: 720px) {
  .umbral { padding: 5rem 0 3rem; }
  .umbral__rejilla { grid-template-rows: auto minmax(9.5rem, 1fr); gap: 1.1rem; }
  .umbral h1 { font-size: 1.95rem; margin: 0.3rem 0 0.8rem; }
  .umbral .entradilla { font-size: 0.94rem; line-height: 1.5; margin-bottom: 1.1rem; }
  .umbral__acciones { margin-bottom: 0; gap: 0.5rem; }
  .umbral__acciones .boton { padding: 0.7rem 1.2rem; }
  .umbral .etiqueta { margin-bottom: 0.6rem; }
}

/* En pantalla pequeña el mazo y la frase se pisan: menos escalonado, menos alto
   y el texto con su propio sitio. */
@media (max-width: 760px), (max-height: 700px) {
  .relato__escenario { padding: 5.5rem 1.1rem 4.5rem; grid-template-rows: auto auto auto; align-content: center; }
  .relato__textos { min-height: 5.4rem; margin-bottom: 2.6rem; align-self: center; }
  .capas { height: min(26vh, 168px); width: min(88vw, 400px); }
  .capa { padding: 1.1rem 1.25rem; border-radius: 17px; }
  .capa { transform:
    translate3d(calc(var(--i) * -6px), calc(var(--i) * 20px - var(--t) * 24vh), 0)
    rotate(calc(var(--i) * -0.8deg))
    scale(calc(1 - var(--i) * 0.016 - var(--t) * 0.06)); }
  .relato__acciones { margin-top: 1.4rem; }
  .relato__barra { bottom: 1.4rem; }
}

/* Vidrio sobre vidrio deja de leerse, y hay quien lo tiene desactivado:
   las láminas pasan a sólidas y el desenfoque desaparece. */
@media (prefers-reduced-transparency: reduce) {
  .lamina, .lamina--densa, .cabecera, .paso, .taller__cat,
  .capa, .carta__frase, .cifra, .boton--vidrio, .canal, .chip {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fff;
  }
}

@media (prefers-contrast: more) {
  :root { --tinta-2: rgba(17, 32, 30, 0.92); --tinta-3: rgba(17, 32, 30, 0.75); --linea: rgba(17, 32, 30, 0.35); }
  .lamina, .paso, .canal, .chip { border-color: rgba(17, 32, 30, 0.35); }
}

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

  /* Sin recorrido: el relato se cuenta de una vez, sin scroll que lo mueva. */
  .relato__pista { height: auto; }
  .relato__escenario { position: static; height: auto; min-height: 0; padding: 4rem 0; }
  .relato__fondo img { filter: none; transform: none; }
  .capas { display: none; }
  .relato__textos { margin-top: 0; min-height: 0; display: grid; gap: 1.2rem; }
  .escena { grid-area: auto; opacity: 1; transform: none; }
  .relato__acciones { opacity: 1; }
  .relato__barra { display: none; }
  .indicio svg { animation: none; }

  /* El umbral llega montado: sin secuencia de entrada. */
  .entra, .palabra, .mazo__pila, .mazo__mandos { opacity: 1; animation: none; transform: none; }

  /* El mazo no avanza solo (lo impide el JS) y la carta no cae: al pulsar un
     mando se cambia con un fundido corto. */
  .carta { transition: opacity 240ms ease; }
  .carta.cae { animation: none; opacity: 0; transform: none; }
  .carta[data-d="0"] .carta__frase span { animation: none; clip-path: none; }
  .flotante, .flotante::before { animation: none; }
  .flotante svg { transition: none; }
  .js .aparece, .js .aparece.visible { opacity: 1; transform: none; transition: none; }
  .boton, .enlace, .menu a, .canal, .flotante { transition: none; }
}