/* Soltar para Amar · hoja principal
   Paleta y tipografías tomadas de la página provisional de Lovable; el umbral y
   el relato vienen de victoria-arce-transforma.zazuweb.com. */

:root {
  --fondo: #FDF4E6;
  --tinta: #5F1911;
  --tinta-2: #7A4A3A;
  --marca: #F05424;
  /* Su naranja da 3,21:1 sobre el crema: vale para un número de 72 px, no para
     un botón ni un rótulo en versalitas. Ese tono es el que va en texto. */
  --marca-solida: #B13E1A;
  --marca-fondo: #FFFBF4;
  --secundario: #FBD9A8;
  --acento: #F0B430;
  --apagado: #F9E9D2;
  --lamina: #FFFBF4;
  --filete: #EBD6BC;
  --tierra: #842418;
  --tierra-tinta: #FDF4E6;
  --canto: rgba(255, 255, 255, 0.72);

  --calido: linear-gradient(160deg, #FDF4E6, #FBE2BC);

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --texto: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radio: 22px;
  --radio-s: 14px;
  --ancho: 1240px;
  --salida: cubic-bezier(0.23, 1, 0.32, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

.contenedor { width: min(100% - 2.6rem, 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;
}

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

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  /* Fraunces es variable en opsz: los titulares grandes se afinan solos. */
  font-optical-sizing: auto;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.3rem + 3.6vw, 4rem); line-height: 1.04; letter-spacing: -0.028em; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.65rem); line-height: 1.1; letter-spacing: -0.022em; }
h3 { font-size: clamp(1.12rem, 1rem + 0.5vw, 1.3rem); line-height: 1.26; letter-spacing: -0.012em; }

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

.etiqueta {
  margin: 0 0 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--marca-solida);
}

.entradilla {
  font-size: clamp(1.06rem, 1rem + 0.42vw, 1.24rem);
  line-height: 1.58;
  color: var(--tinta-2);
  max-width: 34rem;
}

.apagada { color: var(--tinta-2); }

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

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--marca-solida);
  color: var(--marca-fondo);
  font-family: var(--texto);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 14px 30px -14px rgba(177, 62, 26, 0.75);
  transition: transform 160ms var(--salida), background 200ms ease, box-shadow 200ms ease;
}

.boton svg { width: 1.15em; height: 1.15em; flex: none; }

.boton--grande { padding: 1.15rem 2.6rem; font-size: 1.1rem; }

.boton--suave {
  background: var(--lamina);
  color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--filete), 0 10px 26px -20px rgba(95, 25, 17, 0.5);
}

.boton--claro {
  background: var(--secundario);
  color: var(--tierra);
  box-shadow: none;
}

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

@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: #963416; box-shadow: 0 16px 34px -14px rgba(150, 52, 22, 0.8); }
  .boton--suave:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--marca); }
  .boton--claro:hover { background: #FDE6C2; }
  .boton--vidrio:hover { background: rgba(253, 244, 230, 0.26); }
}

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

.cabecera {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(253, 244, 230, 0.82);
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  box-shadow: inset 0 -1px 0 rgba(235, 214, 188, 0.9);
}

.cabecera__caja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 0.7rem 0;
}

.cabecera__marca { display: flex; align-items: center; }
.cabecera__marca img { height: 50px; width: auto; }

.cabecera__enlaces { display: flex; align-items: center; gap: 1.6rem; }

.cabecera__enlaces a:not(.boton) {
  color: var(--tinta);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.3rem 0;
  box-shadow: inset 0 -1px 0 transparent;
  transition: box-shadow 200ms ease, color 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .cabecera__enlaces a:not(.boton):hover { color: var(--marca-solida); box-shadow: inset 0 -1px 0 currentColor; }
}

.cabecera .boton { padding: 0.72rem 1.3rem; font-size: 0.95rem; }

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

/* La hoja con el corazón ocupa todo el umbral; el velo granate sube de opacidad
   hacia abajo, que es donde cae el texto. */
.umbral {
  position: relative;
  padding: clamp(3.4rem, 6vw, 5.4rem) 0 clamp(4rem, 7vw, 6rem);
  background: var(--tierra);
  color: var(--tierra-tinta);
  overflow: hidden;
}

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

.umbral__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 54%; }

.umbral__fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(95, 25, 17, 0.18) 0%, rgba(95, 25, 17, 0.52) 44%, rgba(95, 25, 17, 0.88) 100%);
}

.umbral .etiqueta { color: var(--secundario); }

.umbral .entradilla { color: rgba(253, 244, 230, 0.92); }

.umbral__nota { color: rgba(253, 244, 230, 0.82); }

.umbral__rejilla {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  align-items: center;
  gap: clamp(2rem, 4vw, 3.6rem);
}

.umbral h1 { display: grid; gap: 0.08em; text-shadow: 0 2px 22px rgba(74, 20, 12, 0.58); }

.h1__mayor {
  font-size: 1.18em;
  line-height: 0.98;
  color: var(--secundario);
}

/* Las líneas de enlace ceden el peso a las dos que mandan: a un solo tamaño el
   titular se comía seis líneas de alto. */
.h1__menor {
  font-size: 0.56em;
  line-height: 1.16;
  font-weight: 500;
  letter-spacing: -0.016em;
}

.umbral__acciones { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }

.umbral__nota { margin-top: 0.95rem; font-size: 0.9rem; color: var(--tinta-2); }

/* Vidrio sobre la foto: el único botón translúcido de la página, y solo aquí
   porque debajo hay imagen que velar. */
.boton--vidrio {
  background: rgba(253, 244, 230, 0.16);
  color: var(--tierra-tinta);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(253, 244, 230, 0.44);
}

/* ---------- el mazo ---------- */

/* Material apaisado: la carta es 4/3, no 4/5 como en la página principal. El
   ancho lo manda la columna y la altura sale del formato. */
.mazo { position: relative; z-index: 1; justify-self: end; width: 100%; }

.mazo__pila { position: relative; aspect-ratio: 4 / 3; width: calc(100% - 46px); margin-left: auto; margin-right: 46px; }

.carta {
  --d: 0;
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: var(--radio);
  overflow: hidden;
  background: #fff;
  box-shadow:
    inset 0 1px 0 var(--canto),
    0 42px 80px -44px rgba(95, 25, 17, 0.62);
  transform:
    translate3d(calc(var(--d) * 20px), calc(var(--d) * -20px), 0)
    rotate(calc(var(--d) * 2.2deg))
    scale(calc(1 - var(--d) * 0.022));
  z-index: calc(10 - var(--d));
  transition: transform 760ms var(--salida), opacity 760ms var(--salida);
}

/* Velo ENCIMA de las de atrás, no opacidad propia: translúcidas se verían las
   tres imágenes superpuestas durante la transición. */
.carta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: rgba(253, 244, 230, calc(var(--d) * 0.5));
  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;
  object-position: var(--foco, 50% 45%);
}

.carta__vidrio {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(142deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.02) 48%, rgba(95, 25, 17, 0.16));
  box-shadow: inset 0 1px 0 var(--canto), inset 0 0 0 1px rgba(255, 255, 255, 0.38);
  pointer-events: none;
}

.carta__frase {
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 1.1rem;
  padding: 1rem 1.3rem;
  border-radius: var(--radio-s);
  background: rgba(255, 251, 244, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 0 var(--canto);
  backdrop-filter: blur(26px) saturate(155%);
  -webkit-backdrop-filter: blur(26px) saturate(155%);
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: clamp(1.05rem, 1.5vw, 1.34rem);
  font-weight: 500;
  line-height: 1.26;
  letter-spacing: -0.016em;
  color: var(--tinta);
  text-wrap: balance;
  z-index: 4;
  opacity: clamp(0, calc(1 - var(--d)), 1);
  transition: opacity 240ms var(--salida);
}

/* El clip va en el span, no en el figcaption: si no, lo que se revela es la
   cajita de vidrio entera y parece que crece, no que alguien escribe. */
.carta__frase span { display: block; }

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

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

/* Animación y no transición: termina sola y avisa con animationend, así el JS
   no encadena 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%, 17%, 0) rotate(-7deg) scale(0.93); }
}

.carta.recoloca { transition: none; }

.mazo__mandos {
  position: absolute;
  z-index: 21;
  left: 50%;
  bottom: -2.2rem;
  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(253, 244, 230, 0.34);
  transition: background 220ms var(--salida), width 320ms var(--salida);
}

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

@media (hover: hover) and (pointer: fine) {
  .mazo__mando:hover span { background: rgba(253, 244, 230, 0.6); }
  .mazo__mando[aria-selected="true"]:hover span { background: var(--secundario); }
}

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

@media (prefers-reduced-motion: no-preference) {
  .entra {
    opacity: 0;
    animation: asentar 620ms var(--salida) forwards;
    animation-delay: calc(var(--o) * 70ms + 80ms);
  }
}

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

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

.seccion { padding: clamp(3.4rem, 7vw, 6.2rem) 0; }
.seccion--calida { background: var(--calido); }
.seccion__intro { max-width: 36rem; margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }
.seccion__intro p { margin-top: 0.9rem; color: var(--tinta-2); }

/* ---------- qué obtendrás ---------- */

.beneficios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }

.beneficio {
  padding: 2rem 1.8rem;
  border-radius: var(--radio);
  background: var(--lamina);
  box-shadow: inset 0 0 0 1px var(--filete), 0 20px 44px -36px rgba(95, 25, 17, 0.5);
}

.beneficio__icono {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.3rem;
  border-radius: 999px;
  background: var(--secundario);
  color: var(--marca-solida);
}

.beneficio__icono svg { width: 1.5rem; height: 1.5rem; }

.beneficio h3 { text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.08rem; }
.beneficio p { margin: 0.8rem 0 0; color: var(--tinta-2); }

/* ---------- 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 { background: var(--tierra); }

.relato__pista { height: 380vh; position: relative; }

.relato__escenario {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 560px;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  align-items: center;
  padding: 5rem 1.25rem 4rem;
  overflow: hidden;
  color: var(--tierra-tinta);
}

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

.relato__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: blur(calc((1 - var(--p, 0)) * 16px)) saturate(calc(0.62 + var(--p, 0) * 0.48));
  transform: scale(calc(1.14 - var(--p, 0) * 0.1));
}

.relato__fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(95, 25, 17, 0.9), rgba(95, 25, 17, 0.5) 46%, rgba(95, 25, 17, 0.94));
  opacity: calc(1 - var(--p, 0) * 0.34);
}

/* Cada capa 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(82vw, 520px);
  height: min(30vh, 196px);
  pointer-events: none;
}

.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, 251, 244, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 0 var(--canto), 0 22px 46px -30px rgba(0, 0, 0, 0.6);
  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-optical-sizing: auto;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.15rem, 2.9vw, 1.7rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--tinta);
  text-wrap: balance;
}

.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 cierre. */
.escena {
  --centro: calc(var(--e) * 0.3);
  --dist: max(calc(var(--centro) - var(--p, 0)), calc(var(--p, 0) - var(--centro)));
  grid-area: 1 / 1;
  margin: 0;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -0.022em;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(74, 20, 12, 0.72), 0 1px 3px rgba(74, 20, 12, 0.5);
  opacity: clamp(0, calc(1 - var(--dist) / 0.17), 1);
  transform: translate3d(0, calc(var(--dist) * 46px), 0);
}

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

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

.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);
}

/* 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(253, 244, 230, 0.26);
  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(--acento);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

/* ---------- cómo funciona ---------- */

/* Sin 01/02/03: el orden ya lo dice la entradilla y los títulos. El rótulo es
   el momento del taller, que es lo que de verdad distingue a los tres. */
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 2.6rem); margin: 0; padding: 0; list-style: none; }

.paso { position: relative; padding-top: 1.5rem; }

.paso::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.6rem;
  height: 3px;
  border-radius: 3px;
  background: var(--marca);
}

.paso__momento {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marca-solida);
}

.paso p { margin: 0.7rem 0 0; color: var(--tinta-2); }

/* ---------- opiniones ---------- */

/* Carrusel lateral: se arrastra y se desplaza con la rueda; los mandos mueven
   una tarjeta por pulsación. scroll-snap deja cada una en su sitio. */
.carrusel { position: relative; }

.carrusel__pista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(82vw, 22.5rem);
  gap: 1.3rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.4rem 0 1.6rem;
  margin: 0 calc(50% - 50vw);
  padding-inline: max(1.3rem, calc(50vw - var(--ancho) / 2));
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

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

.opinion {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1.9rem 1.8rem;
  border-radius: var(--radio);
  background: var(--lamina);
  box-shadow: inset 0 0 0 1px var(--filete), 0 20px 44px -38px rgba(95, 25, 17, 0.55);
}

.opinion blockquote {
  flex: 1;
  margin: 0;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 500;
  font-size: 1.14rem;
  line-height: 1.5;
  letter-spacing: -0.012em;
}

.opinion figcaption { margin-top: 1.5rem; }
.opinion__quien { display: block; font-weight: 700; font-size: 0.98rem; }

.opinion__mas {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--marca-solida);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.carrusel__mandos { display: flex; gap: 0.6rem; margin-top: 0.4rem; }

.carrusel__mando {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 0;
  border-radius: 999px;
  background: var(--lamina);
  color: var(--tinta);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--filete);
  transition: background 200ms ease, color 200ms ease, transform 160ms var(--salida);
}

.carrusel__mando svg { width: 1.2rem; height: 1.2rem; }
.carrusel__mando:active { transform: scale(0.94); }
.carrusel__mando[disabled] { opacity: 0.38; cursor: default; }

@media (hover: hover) and (pointer: fine) {
  .carrusel__mando:not([disabled]):hover { background: var(--marca-solida); color: var(--marca-fondo); box-shadow: none; }
}

/* ---------- primer paso ---------- */

.paso-uno {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: clamp(2.2rem, 5vw, 4rem);
}

.paso-uno__retrato { position: relative; }

.paso-uno__retrato img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radio);
  box-shadow: 0 34px 70px -40px rgba(95, 25, 17, 0.6);
}

.paso-uno__chapa {
  position: absolute;
  left: 1.4rem;
  bottom: -1.2rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 1.3rem;
  border-radius: 999px;
  background: var(--tierra);
  color: var(--tierra-tinta);
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 16px 34px -20px rgba(95, 25, 17, 0.9);
}

.paso-uno__chapa svg { width: 1.2rem; height: 1.2rem; color: var(--acento); flex: none; }

.detalles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  color: var(--tinta-2);
}

.detalles li { display: flex; align-items: center; gap: 0.5rem; }
.detalles svg { width: 1.05rem; height: 1.05rem; color: var(--marca-solida); flex: none; }

/* ---------- la banda del precio ---------- */

.precio { background: var(--tierra); color: var(--tierra-tinta); text-align: center; }
.precio .etiqueta { color: var(--acento); }
.precio h2 { max-width: 44rem; margin-inline: auto; }

.precio__cifras { display: flex; align-items: flex-end; justify-content: center; gap: 1.4rem; margin-top: 2.4rem; }
.precio__antes { font-size: 1.5rem; opacity: 0.62; }

.precio__ahora {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: clamp(3.2rem, 8vw, 4.6rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--acento);
}

.precio__nota { max-width: 32rem; margin: 1.6rem auto 0; opacity: 0.9; }

.precio__sello {
  display: inline-block;
  margin-top: 2.2rem;
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  background: rgba(253, 244, 230, 0.12);
  box-shadow: inset 0 0 0 1px rgba(253, 244, 230, 0.3);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------- cierre ---------- */

.cierre { text-align: center; }
.cierre .boton { margin-top: 2rem; }
.cierre__nota { margin-top: 1.1rem; font-size: 0.93rem; color: var(--tinta-2); }

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

.pie { padding: clamp(2.8rem, 5vw, 4rem) 0 2.4rem; font-size: 0.93rem; color: var(--tinta-2); }
.pie__rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.pie img { width: 140px; height: auto; }
.pie h2 { font-family: var(--texto); font-size: 0.95rem; font-weight: 700; color: var(--tinta); margin-bottom: 0.5rem; }
.pie a { color: var(--tinta-2); text-underline-offset: 3px; }
.pie ul { margin: 0; padding: 0; list-style: none; }
.pie li + li { margin-top: 0.3rem; }
.pie__copyright { margin-top: 2.6rem; padding-top: 1.4rem; box-shadow: inset 0 1px 0 var(--filete); }

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

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

.flotante {
  position: fixed;
  right: clamp(1rem, 3vw, 1.8rem);
  bottom: clamp(1rem, 3vw, 1.8rem);
  z-index: 70;
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 999px;
  background: #14803E;
  color: #fff;
  box-shadow: 0 18px 38px -16px rgba(20, 128, 62, 0.85);
  transition: transform 180ms var(--salida);
}

.flotante svg { width: 1.9rem; height: 1.9rem; }
.flotante:active { transform: scale(0.94); }

@media (hover: hover) and (pointer: fine) {
  .flotante:hover { transform: scale(1.06); }
}

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

/* Solo se esconde si hay JS para volver a mostrarlo: sin la clase .js —script
   en el head— el contenido se ve igual. */
.js .aparece { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity 620ms var(--salida), transform 620ms var(--salida); }
.js .aparece.visible { opacity: 1; transform: none; }

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

@media (max-width: 1000px) {
  .umbral__rejilla { grid-template-columns: 1fr; }
  .mazo { justify-self: stretch; }
  .beneficios, .pasos { grid-template-columns: 1fr; }
  .paso-uno { grid-template-columns: 1fr; }
  .paso-uno__retrato { max-width: 22rem; }
  .pie__rejilla { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .cabecera__enlaces a:not(.boton) { display: none; }
  .umbral { padding-top: 2.2rem; }
  .relato__escenario { padding: 4rem 1.1rem 3.4rem; }
  .carrusel__pista { grid-auto-columns: min(86vw, 20rem); }

  /* 46 px de hueco para las traseras se comen un séptimo del ancho util. */
  .mazo__pila { width: calc(100% - 26px); margin-right: 26px; }
  .carta {
    transform:
      translate3d(calc(var(--d) * 12px), calc(var(--d) * -12px), 0)
      rotate(calc(var(--d) * 1.6deg))
      scale(calc(1 - var(--d) * 0.02));
  }

  /* El relato ya ocupa casi la mitad del scroll de la página en movil. */
  .relato__pista { height: 300vh; }
}

/* Vidrio sobre vidrio deja de leerse, y hay quien lo tiene desactivado. */
@media (prefers-reduced-transparency: reduce) {
  .cabecera { background: var(--fondo); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .umbral__fondo { display: none; }
  .boton--vidrio { background: rgba(253, 244, 230, 0.2); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .carta__frase, .capa { background: var(--lamina); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  .beneficio, .opinion, .carrusel__mando { box-shadow: inset 0 0 0 2px var(--tinta); }
  .carta__frase, .capa { background: #fff; border-color: var(--tinta); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carta, .carta::after, .carta__frase, .boton, .carrusel__mando { transition: none; }
  .carta[data-d="0"] .carta__frase span { animation: none; }
  .carta.cae { animation-duration: 1ms; }
  .relato__pista { height: auto; }
  .relato__escenario { position: static; height: auto; min-height: 0; padding-block: 4rem; }
  .relato__fondo img { filter: none; transform: none; }
  .capas { height: auto; display: grid; gap: 0.7rem; }
  .capa { position: static; opacity: 1; transform: none; }
  .escena { opacity: 1; transform: none; grid-area: auto; margin-bottom: 1rem; }
  .relato__textos { display: block; }
  .relato__acciones { opacity: 1; }
  .relato__barra { display: none; }
  .js .aparece { opacity: 1; transform: none; transition: none; }
}

/* ---------- vídeos de testimonio ---------- */

.videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.4rem; }

.videos__pieza { margin: 0; }

.videos__pieza video {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--radio);
  background: var(--tierra);
  box-shadow: 0 24px 50px -36px rgba(95, 25, 17, 0.6);
}

.videos__pieza figcaption { margin-top: 0.8rem; font-weight: 700; font-size: 0.95rem; }