/* ==========================================================================
   Cita con Marta · estilos
   Tokens y decisiones: diseno/plan-de-diseno.md
   Móvil primero. Un solo acento (lacre), reservado a la acción principal.
   ========================================================================== */

/* ---------- Fuentes (alojadas aquí, sin terceros) ---------- */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../assets/fonts/fraunces-latin-opsz-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("../assets/fonts/fraunces-latin-opsz-italic.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../assets/fonts/archivo-latin-wght-normal.woff2") format("woff2"); }
/* PROVISIONAL: se sustituye por la letra real de Marta (ver material/pedido-a-marta.md) */
@font-face { font-family: "Letra de Marta"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/la-belle-aurore-latin-400-normal.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  --rojo: #C8102E;          /* carmín: color de marca, portada, cierre y botón sobre claro */
  --rojo-hondo: #8E0B20;
  --rojo-luz: #E5384F;
  --burdeos: #3A0A14;       /* fondo oscuro cálido */
  --azul: #1D3FA8;          /* azul de correo aéreo: letra de Marta, matasellos, sección de pasos */
  --azul-hondo: #142B74;
  --rosa: #F9D5D3;          /* rosa empolvado: fondos suaves */
  --rosa-palido: #FCEBE6;
  --crema: #FFF6EA;         /* papel */
  --tinta: #1B1730;         /* texto sobre claro */
  --tinta-suave: #5B5670;
  --linea: #EAD6CB;

  /* Nombres anteriores, apuntando a la paleta nueva */
  --lino: var(--rosa-palido);
  --papel: var(--crema);
  --lacre: var(--rojo);
  --lacre-hondo: var(--rojo-hondo);
  --lacre-luz: var(--rojo-luz);
  --sobre: #FDEBDA;
  --sobre-hondo: #F2D4BE;
  --copia: #FFFFFF;         /* papel fotográfico: solo el marco de las fotos */
  --papel-72: rgba(255, 246, 234, .78);

  --f-carta: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --f-ui: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mano: "Letra de Marta", "Segoe Script", "Bradley Hand", "Snell Roundhand", cursive;

  --canal: clamp(1rem, 4.6vw, 2.5rem);
  --ancho: 66rem;
  --medida: 34rem;
  --seccion: clamp(3.75rem, 9.5vw, 7.5rem);

  --suave: cubic-bezier(.23, 1, .32, 1);
  --sombra-papel: 0 1px 2px rgba(58, 10, 20, .10), 0 18px 34px -20px rgba(58, 10, 20, .45);
  --sombra-copia: 0 1px 2px rgba(27, 23, 48, .14), 0 14px 26px -16px rgba(27, 23, 48, .46);
  --sombra-lacre: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -2px 0 rgba(0, 0, 0, .16),
                  0 2px 3px rgba(27, 23, 48, .20), 0 14px 26px -12px rgba(142, 11, 32, .65);

  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .08 0 0 0 0 .08 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.2'/%3E%3C/svg%3E");
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--lino);
  background-image: var(--grano);
  color: var(--tinta);
  font-family: var(--f-carta);
  font-size: 1.125rem;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main { display: block; overflow-x: clip; }

img, svg { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3 { margin: 0; font-family: var(--f-carta); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(2.75rem, 1.3rem + 7vw, 5.5rem); }
h2 { font-size: clamp(1.9rem, 1.35rem + 2.6vw, 3.25rem); }
h3 { font-size: 1.25rem; line-height: 1.2; letter-spacing: -.01em; }
h1 em, h2 em { font-style: italic; font-weight: 400; }

p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: .06em; }

::selection { background: var(--tinta); color: var(--papel); }

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

.solo-lector {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; left: var(--canal); top: -5rem; z-index: 100; display: inline-flex; align-items: center; min-height: 2.75rem;
  background: var(--tinta); color: var(--papel); padding: .75rem 1rem; border-radius: 4px;
  font: 600 1rem/1 var(--f-ui); text-decoration: none;
}
.saltar:focus { top: .5rem; }

.envoltura { width: min(calc(100% - 2 * var(--canal)), var(--ancho)); margin-inline: auto; }
.seccion { padding-block: var(--seccion); }
.seccion--prieta { padding-block: calc(var(--seccion) * .6); }
.medida { max-width: var(--medida); }

.etiqueta {
  margin: 0 0 .9rem; font: 600 .8125rem/1.2 var(--f-ui); letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.entradilla { font-size: 1.125rem; color: var(--tinta-suave); margin-top: 1rem; max-width: var(--medida); }
.manuscrita { font-family: var(--f-mano); font-weight: 400; letter-spacing: 0; }

/* Entrada suave de cada bloque, una vez. Visible por defecto: solo espera lo que el script marca bajo el pliegue. */
.js [data-entra].espera { opacity: 0; translate: 0 14px; }
.js [data-entra].visto { opacity: 1; translate: none; transition: opacity .62s var(--suave), translate .62s var(--suave); }

/* ---------- Cabecera ---------- */
.cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .3rem var(--canal); min-height: 3rem;
  width: min(100%, calc(var(--ancho) + 2 * var(--canal))); margin-inline: auto;
}
.marca { display: inline-flex; align-items: center; min-height: 2.75rem; font: italic 500 1.3rem/1 var(--f-carta); letter-spacing: -.01em; text-decoration: none; }
.cabecera__plazo { margin: 0; font: 500 .8125rem/1.2 var(--f-ui); color: var(--tinta-suave); text-align: right; }

/* ---------- Hoja de papel ---------- */
.hoja { position: relative; background: var(--papel); border-radius: 3px; box-shadow: var(--sombra-papel); }

/* ---------- Fotos: copia en papel, con hueco diseñado mientras no llega la foto ---------- */
.copia { position: relative; margin: 0; width: fit-content; background: var(--copia); padding: .5rem; box-shadow: var(--sombra-copia); }
.copia--firmada { padding-bottom: 2.6rem; }
.copia img { display: block; object-fit: cover; }
.copia img, .copia .hueco { width: 100%; height: 100%; }
.copia__marco { display: block; overflow: hidden; background: var(--lino); }
.copia__firma {
  position: absolute; right: .9rem; bottom: .25rem; margin: 0;
  font: 400 1.75rem/1 var(--f-mano); color: var(--tinta); transform: rotate(-4deg);
}
.copia__firma--frase { left: .6rem; right: .8rem; bottom: .45rem; font-size: 1.4rem; text-align: right; transform: rotate(-2deg); }
.clip { position: absolute; z-index: 2; top: -1.45rem; left: 1.1rem; width: 1.45rem; height: 3.5rem; transform: rotate(-7deg); color: #8A8FA1; }

.hueco {
  display: grid; place-content: center; gap: .3rem; padding: 1rem; text-align: center;
  background-color: #E7DDCB;
  background-image: repeating-linear-gradient(135deg, rgba(88, 93, 114, .10) 0 1px, transparent 1px 9px);
  color: var(--tinta-suave);
}
.hueco b { font: 700 .8125rem/1.2 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta); }
.hueco span { font: 500 .8125rem/1.35 var(--f-ui); max-width: 13rem; }

/* ---------- Matasellos con la fecha de cierre ---------- */
.matasellos { position: absolute; z-index: 3; width: 6.4rem; height: 6.4rem; color: var(--tinta-suave); transform: rotate(-11deg); pointer-events: none; }
.matasellos svg { display: block; width: 100%; height: 100%; overflow: visible; }
.matasellos text { font-family: var(--f-ui); fill: currentColor; }

/* ---------- Botón de lacre: la acción principal ---------- */
.boton-lacre {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  min-height: 3.5rem; padding: .35rem 1.6rem .35rem .4rem;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--lacre); color: var(--papel);
  font: 600 1.0625rem/1.1 var(--f-ui); letter-spacing: .005em; text-decoration: none; white-space: nowrap;
  box-shadow: var(--sombra-lacre);
  transition: transform .14s var(--suave), background-color .14s var(--suave);
  -webkit-tap-highlight-color: transparent;
}
.boton-lacre .sello { width: 2.8rem; height: 2.8rem; flex: none; }
.boton-lacre--ancho { display: flex; width: 100%; }
.boton-lacre--sin-sello { padding-left: 1.4rem; padding-right: 1.4rem; }
.boton-lacre:active { transform: translateY(1px) scale(.985); }
@media (hover: hover) and (pointer: fine) { .boton-lacre:hover { background: var(--rojo-hondo); } }
.boton-lacre[aria-disabled="true"], .boton-lacre:disabled {
  background: var(--linea); color: var(--tinta-suave); box-shadow: none; cursor: not-allowed; transform: none;
}
.boton-lacre[aria-disabled="true"] .sello, .boton-lacre:disabled .sello { filter: grayscale(1); opacity: .45; }

.sello { display: block; }

.boton-texto {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: .25rem 0; background: none; border: 0; cursor: pointer;
  font: 600 1rem/1.2 var(--f-ui); color: var(--tinta); text-decoration: underline; text-underline-offset: .2em;
}

/* ---------- 2. Nota de voz ---------- */
.nota-voz {
  position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .2rem .9rem;
  max-width: 30rem; margin: -1.1rem auto 0; padding: .85rem 1rem .85rem .85rem;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 3px; box-shadow: var(--sombra-papel);
  transform: rotate(-.6deg);
}
.nota-voz__mano { position: absolute; right: .9rem; top: -1.2rem; margin: 0; font: 400 1.5rem/1 var(--f-mano); color: var(--tinta); transform: rotate(-5deg); }
.nota-voz__boton {
  grid-row: 1 / span 2; width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--tinta); color: var(--papel);
  transition: transform .14s var(--suave);
}
.nota-voz__boton:active { transform: scale(.96); }
.nota-voz__boton svg { width: 1.25rem; height: 1.25rem; }
.nota-voz__boton .ico-pausa, .nota-voz.suena .ico-play { display: none; }
.nota-voz.suena .ico-pausa { display: block; }
.nota-voz__boton:disabled { background: var(--linea); color: var(--tinta-suave); cursor: not-allowed; }
.nota-voz__titulo { margin: 0; font: 600 1rem/1.2 var(--f-ui); }
.nota-voz__titulo small { font: 500 .8125rem/1.2 var(--f-ui); color: var(--tinta-suave); margin-left: .4rem; font-variant-numeric: tabular-nums; }
.nota-voz__onda { display: flex; align-items: center; gap: 3px; height: 1.5rem; }
.nota-voz__onda i { flex: 1; max-width: 4px; height: calc(var(--h, 50) * 1%); min-height: 3px; border-radius: 2px; background: var(--linea); }
.nota-voz__onda i.on { background: var(--tinta); }
.nota-voz__texto { grid-column: 1 / -1; margin-top: .45rem; font-family: var(--f-ui); }
.nota-voz__texto summary { cursor: pointer; font: 600 .875rem/1.2 var(--f-ui); color: var(--tinta-suave); padding: .5rem 0; min-height: 2.75rem; display: flex; align-items: center; }
.nota-voz__texto p { margin: 0 0 .25rem; font: 400 .9375rem/1.5 var(--f-ui); color: var(--tinta); }
.nota-voz__aviso { grid-column: 1 / -1; margin: .4rem 0 0; font: 600 .8125rem/1.35 var(--f-ui); color: var(--tinta); }
.nota-voz__aviso[hidden] { display: none; }
.marca-hueco {
  display: inline-block; padding: .15rem .45rem; border: 1px dashed var(--tinta-suave); border-radius: 3px;
  font: 600 .6875rem/1.3 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave);
}

/* ---------- 3. La carta ---------- */
.carta { max-width: 38rem; margin-inline: auto; padding: 2.4rem 1.5rem 2.1rem; }
.carta__membrete { display: grid; justify-items: center; gap: .5rem; margin-bottom: 1.9rem; text-align: center; }
.carta__membrete .monograma { width: 2.6rem; height: 2.6rem; color: var(--tinta); }
.carta__membrete span { font: 600 .75rem/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--tinta-suave); }
.carta__membrete::after { content: ""; width: 4.5rem; height: 3px; border-block: 1px solid var(--linea); margin-top: .35rem; }
.carta__saludo { margin: 0 0 1.1rem; font: 400 1.7rem/1.2 var(--f-mano); letter-spacing: 0; text-wrap: pretty; }
.carta__cuerpo p { margin: 0 0 1.05em; }
.carta__cuerpo p:last-child { margin-bottom: 0; }
.carta__despedida { margin: 1.6rem 0 0; font: 400 1.8rem/1.1 var(--f-mano); }
.carta__firma { margin: .1rem 0 0; font: 400 3rem/1 var(--f-mano); transform: rotate(-3deg); transform-origin: left center; }
.carta__pd { margin: 1.6rem 0 0; font: 400 1.55rem/1.3 var(--f-mano); max-width: 26rem; }

/* ---------- 4. Cómo funciona ---------- */
.pasos { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: paso; }
.pasos > li {
  counter-increment: paso; display: grid; grid-template-columns: 2.75rem 1fr; column-gap: 1rem;
  padding: 1.25rem 0; border-top: 1px solid var(--linea);
}
.pasos > li:last-child { border-bottom: 1px solid var(--linea); }
.pasos > li::before { content: counter(paso); font: italic 400 2.9rem/.95 var(--f-carta); }
.pasos h3 { margin: .15rem 0 .3rem; font: 600 1.125rem/1.25 var(--f-ui); letter-spacing: 0; }
.pasos p { margin: 0; font: 400 1rem/1.5 var(--f-ui); color: var(--tinta-suave); }
.pasos p + p { margin-top: .4rem; }
.pasos p b { color: var(--tinta); font-weight: 600; }

/* El sobre que se abre: una sola secuencia ligada al scroll */
.escena-sobre { position: relative; max-width: 24rem; margin: 2.5rem auto 0; padding-top: 46%; --abre: 1; --sale: 1; }
.sobre { position: relative; aspect-ratio: 7 / 5; }
.sobre > * { position: absolute; }
.sobre__fondo { inset: 0; background: var(--tinta); border-radius: 3px; box-shadow: var(--sombra-papel); }
.sobre__solapa {
  inset: 0 0 auto 0; height: 58%; z-index: 1; transform-origin: 50% 0;
  transform: perspective(60rem) rotateX(calc(var(--abre) * 180deg));
}
.sobre__solapa i { position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sobre__solapa .cara { background: linear-gradient(to bottom, var(--sobre), var(--sobre-hondo)); }
.sobre__solapa .forro { background: var(--tinta); transform: rotateX(180deg); }
.sobre__solapa .sello { position: absolute; left: 50%; bottom: -1.5rem; width: 4rem; height: 4rem; margin-left: -2rem; opacity: calc(1 - var(--abre) * 2.6); }
.sobre__carta {
  left: 7%; right: 7%; top: 6%; height: 122%; z-index: 2; padding: 1.2rem 1.1rem;
  background: var(--papel); border-radius: 2px; box-shadow: 0 1px 2px rgba(28, 33, 54, .18);
  transform: translateY(calc(var(--sale) * -47%));
}
.sobre__carta p { margin: 0; font: 400 1.25rem/1.25 var(--f-mano); color: var(--tinta); }
.sobre__carta .grande { font-size: 1.9rem; margin-bottom: .45rem; }
.sobre__carta .firma { font-size: 1.9rem; margin-top: .5rem; text-align: right; transform: rotate(-3deg); }
.sobre__frente {
  inset: 0; z-index: 3; border-radius: 0 0 3px 3px;
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(to top right, transparent calc(50% - .5px), rgba(88, 93, 114, .22) 50%, transparent calc(50% + .5px)) left bottom / 50% 100% no-repeat,
    linear-gradient(to top left, transparent calc(50% - .5px), rgba(88, 93, 114, .22) 50%, transparent calc(50% + .5px)) right bottom / 50% 100% no-repeat,
    var(--sobre);
}
.sobre--vivo .sobre__solapa { z-index: 4; }
.sobre--vivo.sobre--abierto .sobre__solapa { z-index: 1; }
.escena-sobre figcaption { margin-top: 1rem; text-align: center; font: 500 .875rem/1.4 var(--f-ui); color: var(--tinta-suave); }

/* ---------- 5. Los 35 € ---------- */
.dinero { display: grid; gap: 2rem; }
.recibo-caja { position: relative; max-width: 22rem; width: 100%; margin-inline: auto; padding-top: 1.6rem; transform: rotate(-1.2deg); }
.recibo-sombra { filter: drop-shadow(0 1px 1px rgba(64, 50, 26, .12)) drop-shadow(0 14px 16px rgba(64, 50, 26, .16)); }
.recibo__mano { position: absolute; z-index: 1; top: 0; right: .3rem; margin: 0; font: 400 1.5rem/1 var(--f-mano); color: var(--tinta); transform: rotate(4deg); }
.recibo {
  --diente: 9px;
  background: var(--papel); padding: 1.4rem 1.25rem 2rem; font-family: var(--f-ui);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--diente)) 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--diente)) 100%;
}
.recibo__cabeza { margin: 0 0 1rem; padding-bottom: .9rem; border-bottom: 1px dashed var(--tinta-suave); text-align: center; font: 700 .8125rem/1.3 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; }
.recibo dl { margin: 0; }
.recibo dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem 0; }
.recibo dt { font: 500 .9375rem/1.3 var(--f-ui); }
.recibo dd { margin: 0; font: 600 .9375rem/1.3 var(--f-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.recibo .total { margin-top: .4rem; padding-top: .8rem; border-top: 1px dashed var(--tinta-suave); }
.recibo .total dt, .recibo .total dd { font-weight: 700; font-size: 1.125rem; }
.recibo__casos { margin: 1rem 0 0; padding: .9rem 0 0; border-top: 1px dashed var(--tinta-suave); list-style: none; }
.recibo__casos li { display: grid; grid-template-columns: 5.2rem 1fr; gap: .6rem; padding: .3rem 0; font: 400 .9375rem/1.4 var(--f-ui); }
.recibo__casos b { font-weight: 700; }
.dinero__texto p { max-width: var(--medida); }
.dinero__texto h2 { margin-bottom: 1.1rem; }

/* ---------- 6. Qué poner en el currículum ---------- */
.curriculum { margin-top: 2rem; padding: 1.6rem 1.25rem 1.4rem; max-width: 40rem; }
.curriculum__cabeza { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; padding-bottom: 1.1rem; border-bottom: 2px solid var(--tinta); }
.curriculum__cabeza p { margin: 0; }
.curriculum__titulo { font: 500 1.6rem/1.05 var(--f-carta); letter-spacing: -.02em; }
.curriculum__datos { margin-top: .5rem !important; font: 500 .8125rem/1.5 var(--f-ui); color: var(--tinta-suave); }
.curriculum__foto { width: 4.6rem; aspect-ratio: 3 / 4; display: grid; place-content: center; border: 1.5px dashed var(--tinta-suave); border-radius: 2px; font: 600 .6875rem/1.2 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); text-align: center; }
.curriculum dl { margin: 0; }
.curriculum dl > div { padding: .95rem 0; border-bottom: 1px solid var(--linea); }
.curriculum dl > div:last-child { border-bottom: 0; padding-bottom: .2rem; }
.curriculum dt { font: 700 .8125rem/1.2 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; }
.curriculum dd { margin: .3rem 0 0; font: italic 400 1.0625rem/1.45 var(--f-carta); color: var(--tinta); }
.curriculum__nota { margin: .9rem 0 0; text-align: right; font: 400 1.6rem/1.1 var(--f-mano); color: var(--tinta); transform: rotate(-3deg); transform-origin: right center; }
.reglas { list-style: none; margin: 1.75rem 0 0; padding: 0; max-width: 40rem; display: grid; gap: .65rem; }
.reglas li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .6rem; font: 400 1rem/1.45 var(--f-ui); }
.reglas svg { width: 1.2rem; height: 1.2rem; margin-top: .15rem; color: var(--tinta); }

/* ---------- 7 y 8. Lo leo yo · La cita ---------- */
.duo { display: grid; gap: 1.75rem; align-items: center; }
.duo .copia { width: min(78%, 19rem); }
.duo .copia__marco { aspect-ratio: 4 / 5; }
.duo .copia--izq { transform: rotate(-2deg); margin-left: .25rem; }
.duo .copia--der { transform: rotate(2deg); margin-left: auto; margin-right: .25rem; }
.duo h2 { margin-bottom: 1rem; }
.duo p { max-width: var(--medida); }
.duo .anotacion { margin: 1.1rem 0 0; font: 400 1.7rem/1.15 var(--f-mano); transform: rotate(-2deg); transform-origin: left; }
.formas { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0; max-width: var(--medida); }
.formas li { padding: .9rem 0; border-top: 1px solid var(--linea); font: 400 1rem/1.5 var(--f-ui); color: var(--tinta-suave); }
.formas li:last-child { border-bottom: 1px solid var(--linea); }
.formas b { display: block; color: var(--tinta); font: 600 1.0625rem/1.3 var(--f-ui); margin-bottom: .15rem; }

/* ---------- 9. Preguntas ---------- */
.preguntas { margin-top: 1.75rem; max-width: 44rem; }
.preguntas details { border-top: 1px solid var(--linea); }
.preguntas details:last-child { border-bottom: 1px solid var(--linea); }
.preguntas summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.05rem 0; min-height: 3rem; font: 600 1.0625rem/1.3 var(--f-ui);
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: ""; flex: none; width: .65rem; height: .65rem; margin-right: .3rem;
  border-right: 2px solid var(--tinta); border-bottom: 2px solid var(--tinta);
  transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--suave);
}
.preguntas details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.preguntas details p { margin: 0 0 1.2rem; max-width: 38rem; font: 400 1rem/1.55 var(--f-ui); color: var(--tinta-suave); }

/* ---------- 10. Cierre: el forro del sobre ---------- */
.cierre { position: relative; margin-top: 4.5rem; padding: 0 var(--canal) var(--seccion); background: var(--tinta); color: var(--papel); text-align: center; }
.cierre h2 { color: var(--papel); }
.cierre__sobre { position: relative; width: min(74%, 17rem); margin: 0 auto 2rem; transform: translateY(-3.2rem) rotate(-3deg); margin-bottom: -.8rem; }
.cierre__sobre .sobre__fondo { background: var(--sobre-hondo); box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .6); }
.cierre__sobre .sobre__solapa { transform: none; z-index: 4; }
.cierre__sobre .sobre__solapa .sello { opacity: 1; }
.cierre__sobre .sobre__solapa .sello { width: 4.4rem; height: 4.4rem; margin-left: -2.2rem; bottom: -1.7rem; }
.cierre p { color: var(--papel-72); max-width: 30rem; margin-inline: auto; }
.cierre__texto { margin-top: 1rem; }
.cierre .boton-lacre { margin-top: 1.6rem; box-shadow: 0 0 0 2px var(--papel), 0 16px 28px -12px rgba(0, 0, 0, .7); }
.cierre .boton-lacre:focus-visible, .cierre a:focus-visible, .pie a:focus-visible { outline-color: var(--papel); }
.cierre__nota { margin-top: 1rem !important; font: 500 .875rem/1.4 var(--f-ui); }
.cierre__pd { margin-top: 2.2rem !important; font: 400 1.7rem/1.25 var(--f-mano); color: var(--papel) !important; transform: rotate(-2deg); }

/* ---------- 11. Pie ---------- */
.pie { background: var(--tinta); color: var(--papel-72); padding: 2rem var(--canal) 6.5rem; border-top: 1px solid rgba(251, 248, 241, .16); font: 400 .875rem/1.5 var(--f-ui); }
.pie__dentro { max-width: var(--ancho); margin-inline: auto; display: grid; gap: 1rem; }
.pie nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.pie a { color: var(--papel); display: inline-flex; align-items: center; min-height: 2.75rem; }
.pie p { margin: 0; max-width: 44rem; }

/* ---------- Barra fija con la acción (solo móvil) ---------- */
.barra-fija {
  position: fixed; inset: auto 0 0 0; z-index: 60; display: flex; align-items: center; gap: .75rem;
  padding: .55rem var(--canal) calc(.55rem + env(safe-area-inset-bottom, 0px));
  background: var(--papel); border-top: 1px solid var(--linea);
  transform: translateY(105%); visibility: hidden;
  transition: transform .3s var(--suave), visibility 0s linear .3s;
}
.barra-fija.visible { transform: none; visibility: visible; transition: transform .3s var(--suave), visibility 0s; }
.barra-fija p { flex: 1; margin: 0; font: 500 .8125rem/1.25 var(--f-ui); color: var(--tinta-suave); }
.barra-fija p b { display: block; font: 700 1rem/1.2 var(--f-ui); color: var(--tinta); }
.barra-fija .boton-lacre { min-height: 3rem; font-size: 1rem; flex: none; box-shadow: 0 2px 3px rgba(28, 33, 54, .2); }

/* ---------- Estado: candidaturas cerradas ---------- */
.aviso-cierre { display: none; }
.cerrado .aviso-cierre { display: block; margin: .9rem 0 0; font: 600 .9375rem/1.4 var(--f-ui); color: var(--tinta); text-align: center; }
.cerrado .barra-fija { display: none; }

/* ==========================================================================
   Flujo: pago · candidatura · gracias
   ========================================================================== */
.flujo { width: min(calc(100% - 2 * var(--canal)), 36rem); margin-inline: auto; padding-bottom: 4rem; }
.flujo h1 { font-size: clamp(2.1rem, 1.5rem + 3vw, 3rem); margin-bottom: .75rem; }
.flujo__entradilla { font-size: 1.0625rem; color: var(--tinta-suave); margin-bottom: 1.5rem; }

.aviso-maqueta {
  margin: 0; padding: .6rem var(--canal); background: var(--tinta); color: var(--papel);
  font: 600 .8125rem/1.35 var(--f-ui); text-align: center;
}

.etapas { list-style: none; display: flex; gap: .5rem; margin: .5rem 0 1.75rem; padding: 0; font: 600 .8125rem/1.2 var(--f-ui); color: var(--tinta-suave); }
.etapas li { flex: 1; padding-top: .55rem; border-top: 3px solid var(--linea); }
.etapas li[aria-current="step"] { border-color: var(--tinta); color: var(--tinta); }
.etapas li.hecha { border-color: var(--tinta-suave); }

.panel { padding: 1.4rem 1.25rem; margin-bottom: 1.25rem; }
.panel h2 { font: 600 1.125rem/1.3 var(--f-ui); letter-spacing: 0; margin-bottom: 1rem; }
.panel > :last-child { margin-bottom: 0; }
.panel p { font: 400 1rem/1.5 var(--f-ui); }

.resumen { margin: 0; font-family: var(--f-ui); }
.resumen > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .2rem 0 .9rem; border-bottom: 1px dashed var(--tinta-suave); }
.resumen dt { font: 500 1rem/1.3 var(--f-ui); }
.resumen dd { margin: 0; font: 700 1.25rem/1.2 var(--f-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.condiciones { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .5rem; font: 400 .9375rem/1.45 var(--f-ui); }
.condiciones b { font-weight: 700; }
.pasarela { margin: 1.25rem 0; min-height: 7.5rem; border: 1.5px dashed var(--tinta-suave); border-radius: 4px; }
.campo__titulo { font: 600 .9375rem/1.3 var(--f-ui); }
.flujo .boton-lacre { margin-top: .5rem; }
.flujo__vuelta { margin: 1.5rem 0 0; text-align: center; font: 500 .9375rem/1.4 var(--f-ui); }

.campo { display: grid; gap: .35rem; margin: 0 0 1.1rem; padding: 0; border: 0; min-width: 0; }
.campo label, .campo legend { padding: 0; font: 600 .9375rem/1.3 var(--f-ui); }
.campo .opcional { font-weight: 400; color: var(--tinta-suave); }
.campo .ayuda { margin: 0; font: 400 .875rem/1.4 var(--f-ui); color: var(--tinta-suave); }
.campo input, .campo select {
  width: 100%; min-height: 3.1rem; padding: .75rem .85rem; margin: 0;
  font: 400 1rem/1.3 var(--f-ui); color: var(--tinta);
  background: var(--papel); border: 1.5px solid var(--tinta-suave); border-radius: 4px;
  -webkit-appearance: none; appearance: none;
}
.campo select {
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231C2136' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: .75rem;
}
.campo input::placeholder { color: var(--tinta-suave); opacity: .75; }
.campo input:focus-visible, .campo select:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.campo [aria-invalid="true"] { border-width: 2.5px; border-color: var(--tinta); }
.campo__error { margin: 0; display: grid; grid-template-columns: 1.15rem 1fr; gap: .4rem; align-items: start; font: 600 .875rem/1.4 var(--f-ui); color: var(--tinta); }
.campo__error::before {
  content: ""; width: 1.1rem; height: 1.1rem; margin-top: .1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.2 18.6 17H1.4z' fill='%231C2136'/%3E%3Cpath d='M10 8v4.2M10 14.4v.1' stroke='%23FBF8F1' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.campo__error[hidden] { display: none; }
.fila { display: grid; gap: 0 .75rem; grid-template-columns: 1fr; }
.fila--fecha { grid-template-columns: 1fr 1fr 1.4fr; gap: .6rem; }
.fila--fecha label { font: 500 .8125rem/1.2 var(--f-ui); color: var(--tinta-suave); }
.fila--fecha > div { display: grid; gap: .25rem; }

.resumen-errores { margin: 0 0 1.25rem; padding: 1rem 1.1rem; border: 2.5px solid var(--tinta); border-radius: 4px; background: var(--papel); font-family: var(--f-ui); }
.resumen-errores[hidden] { display: none; }
.resumen-errores h2 { font: 700 1rem/1.3 var(--f-ui); letter-spacing: 0; margin-bottom: .5rem; }
.resumen-errores ul { margin: 0; padding-left: 1.1rem; font: 400 .9375rem/1.5 var(--f-ui); }
.resumen-errores a { font-weight: 600; }

/* Elegir el PDF */
.archivo__zona {
  display: grid; justify-items: center; gap: .35rem; padding: 1.4rem 1rem; text-align: center; cursor: pointer;
  background: var(--papel); border: 1.5px dashed var(--tinta-suave); border-radius: 4px;
}
.archivo__zona svg { width: 1.9rem; height: 1.9rem; color: var(--tinta); }
.archivo__zona b { font: 600 1.0625rem/1.2 var(--f-ui); text-decoration: underline; text-underline-offset: .2em; }
.archivo__zona span { font: 400 .875rem/1.4 var(--f-ui); color: var(--tinta-suave); }
.archivo:focus-within .archivo__zona { outline: 3px solid var(--tinta); outline-offset: 2px; }
.archivo.arrastre .archivo__zona { border-style: solid; background: #F3EEE2; }
.archivo__elegido { display: none; grid-template-columns: 2.4rem 1fr auto; gap: .75rem; align-items: center; padding: .8rem .9rem; background: var(--papel); border: 1.5px solid var(--tinta-suave); border-radius: 4px; }
.archivo.con-pdf .archivo__zona { display: none; }
.archivo.con-pdf .archivo__elegido { display: grid; }
.archivo__elegido svg { width: 2.2rem; height: 2.2rem; color: var(--tinta); }
.archivo__nombre { margin: 0; font: 600 .9375rem/1.3 var(--f-ui); overflow-wrap: anywhere; }
.archivo__peso { margin: 0; font: 400 .8125rem/1.3 var(--f-ui); color: var(--tinta-suave); }

/* Casillas */
.casilla { display: grid; grid-template-columns: 1.6rem 1fr; gap: .75rem; align-items: start; padding: .55rem 0; min-height: 2.75rem; font: 400 .9375rem/1.45 var(--f-ui); cursor: pointer; }
.casilla input {
  -webkit-appearance: none; appearance: none; margin: .05rem 0 0; width: 1.6rem; height: 1.6rem; flex: none; cursor: pointer;
  background: var(--papel); border: 1.5px solid var(--tinta-suave); border-radius: 4px; display: grid; place-content: center;
}
.casilla input::after { content: ""; width: .5rem; height: .9rem; border: solid var(--papel); border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg) scale(0); transition: transform .12s var(--suave); }
.casilla input:checked { background: var(--tinta); border-color: var(--tinta); }
.casilla input:checked::after { transform: translateY(-1px) rotate(45deg) scale(1); }
.casilla input[aria-invalid="true"] { border-width: 2.5px; border-color: var(--tinta); }

/* Progreso y avisos */
.progreso { margin: 1rem 0 0; font-family: var(--f-ui); }
.progreso[hidden] { display: none; }
.progreso__pista { height: .6rem; border-radius: 999px; background: var(--linea); overflow: hidden; }
.progreso__barra { display: block; height: 100%; width: 100%; background: var(--tinta); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .2s linear; }
.progreso p { margin: .5rem 0 0; font: 600 .9375rem/1.3 var(--f-ui); font-variant-numeric: tabular-nums; }
.aviso { margin: 1rem 0 0; padding: .9rem 1rem; border: 2.5px solid var(--tinta); border-radius: 4px; background: var(--papel); font: 600 .9375rem/1.45 var(--f-ui); }
.aviso[hidden] { display: none; }
.falta { margin: .75rem 0 0; font: 500 .875rem/1.4 var(--f-ui); color: var(--tinta-suave); text-align: center; }

/* Gracias */
.tampon {
  display: inline-grid; justify-items: center; gap: .1rem; padding: .55rem 1.1rem .5rem; margin: .5rem 0 1.5rem;
  border: 3px double var(--tinta-suave); border-radius: 4px; color: var(--tinta-suave); transform: rotate(-6deg);
  font: 700 1.35rem/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase;
}
.tampon small { font: 600 .6875rem/1.2 var(--f-ui); letter-spacing: .14em; }
.anima .tampon { animation: tampon .34s var(--suave) both .15s; }
@keyframes tampon { from { opacity: 0; transform: rotate(-6deg) scale(1.18); } to { opacity: 1; transform: rotate(-6deg) scale(1); } }
.luego { list-style: none; margin: 1.5rem 0 0; padding: 0; counter-reset: luego; }
.luego li { counter-increment: luego; display: grid; grid-template-columns: 2rem 1fr; gap: .75rem; padding: .9rem 0; border-top: 1px solid var(--linea); font: 400 1rem/1.5 var(--f-ui); }
.luego li::before { content: counter(luego); font: italic 400 1.9rem/1 var(--f-carta); }
.luego li:last-child { border-bottom: 1px solid var(--linea); }

/* ==========================================================================
   Pantallas anchas
   ========================================================================== */
@media (max-width: 22.5rem) {
  .barra-fija .boton-lacre { padding-inline: 1rem; font-size: .9375rem; }
}

@media (min-width: 40rem) {
  .carta { padding: 3.2rem 3.25rem 2.8rem; }
  .curriculum { padding: 2.2rem 2.5rem 1.9rem; }
  .fila--2 { grid-template-columns: 1fr 1fr; }
  .fila--cp { grid-template-columns: 10rem 1fr; }
  .panel { padding: 1.75rem 1.75rem; }
}

@media (min-width: 56rem) {
  .barra-fija { display: none; }
  .pie { padding-bottom: 2.5rem; }

  .dinero { grid-template-columns: minmax(0, 1fr) 22rem; gap: 4rem; align-items: center; }
  .recibo-caja { order: 2; }

  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4.5rem; }
  .duo .copia { width: min(100%, 22rem); }
  .duo--invertido .copia { order: 2; }

  .guia { display: grid; grid-template-columns: minmax(0, 40rem) minmax(0, 1fr); gap: 3.5rem; align-items: start; }
  .guia .reglas { margin-top: 3.2rem; }
  .pasos-y-sobre { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 4rem; align-items: end; }
  .escena-sobre { margin-bottom: 1rem; }
  .cierre__sobre { width: 19rem; }
}

/* ==========================================================================
   Movimiento reducido: menos y más suave, nunca contenido oculto
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .js [data-entra].espera { opacity: 1; translate: none; }
  .boton-lacre, .nota-voz__boton, .barra-fija, .barra-fija.visible, .preguntas summary::after, .casilla input::after, .progreso__barra { transition: none; }
  .boton-lacre:active, .nota-voz__boton:active { transform: none; }
  .js .tampon { animation: none; }
}

@media print {
  .js [data-entra].espera { opacity: 1; translate: none; }
  .barra-fija, .aviso-maqueta { display: none; }
}

/* ==========================================================================
   V2 · «Por avión»: color, capas y movimiento
   Rojo carmín, azul de correo aéreo, rosa y crema. El movimiento se apaga
   entero con prefers-reduced-motion (bloque al final).
   ========================================================================== */

body { background-color: var(--rosa-palido); }
body.landing { background-color: var(--crema); }

/* ---------- Suelos de sección ---------- */
.suelo-rojo, .suelo-azul, .suelo-burdeos {
  --tinta: var(--crema); --tinta-suave: rgba(255, 246, 234, .82); --linea: rgba(255, 246, 234, .24);
  color: var(--crema);
}
.suelo-rojo { --suelo: var(--rojo); background: var(--grano), radial-gradient(120% 90% at 80% 6%, var(--rojo-luz) 0, var(--rojo) 44%, var(--rojo-hondo) 118%); }
.suelo-azul { --suelo: var(--azul); background: var(--grano), radial-gradient(110% 80% at 12% 0%, #2F58CC 0, var(--azul) 46%, var(--azul-hondo) 120%); }
.suelo-burdeos { --suelo: var(--burdeos); background: var(--grano), radial-gradient(100% 80% at 82% 8%, #631525 0, var(--burdeos) 58%); }
.suelo-rosa { --suelo: var(--rosa); background: var(--grano), var(--rosa); }
.suelo-crema { --suelo: var(--crema); background: var(--grano), var(--crema); }
.suelo-rojo, .suelo-azul, .suelo-burdeos, .suelo-rosa, .suelo-crema { position: relative; }

/* El papel siempre lleva tinta oscura, esté sobre el suelo que esté */
.hoja, .copia, .recibo, .nota-voz, .pruebas, .barra-fija, .sobre__carta {
  --tinta: #1B1730; --tinta-suave: #5B5670; --linea: #EAD6CB; color: var(--tinta);
}

.seccion--pegada { padding-top: 0; }

/* La letra de Marta: tinta azul de pluma */
.manuscrita, .carta__saludo, .copia__firma, .sobre__carta p { color: var(--azul); }
.suelo-rojo > .manuscrita, .cierre__pd { color: var(--crema); }

.franja-aerea { height: .5rem; background: repeating-linear-gradient(-45deg, var(--rojo) 0 14px, var(--crema) 14px 28px, var(--azul) 28px 42px, var(--crema) 42px 56px); }

/* ---------- Cabecera sobre la portada ---------- */
.landing .cabecera { position: absolute; inset: .5rem 0 auto 0; z-index: 6; color: var(--crema); padding-block: .55rem; }
.landing .cabecera__plazo {
  display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .75rem; color: var(--crema);
  border: 1px solid rgba(255, 246, 234, .5); border-radius: 999px; font-weight: 600;
}
.latido { width: .5rem; height: .5rem; border-radius: 50%; background: var(--crema); }

/* ---------- 1. Portada ---------- */
.portada { padding: 4.4rem var(--canal) 4.6rem; overflow: hidden; }
.portada__dentro { max-width: var(--ancho); margin-inline: auto; display: grid; gap: 1.2rem; }
.portada__escena { position: relative; display: grid; justify-items: start; padding: .8rem 0 0 1.7rem; }
.portada__copia {
  --giro: 3deg; rotate: var(--giro); translate: 0 var(--dy, 0px); will-change: translate;
  box-shadow: 0 2px 4px rgba(58, 10, 20, .3), 0 28px 44px -18px rgba(58, 10, 20, .75);
}
.portada__copia .copia__marco { height: 30vh; height: clamp(10.5rem, 30svh, 18rem); aspect-ratio: 1 / 1; }

.estampa { position: absolute; z-index: 3; width: 4.5rem; rotate: var(--giro); translate: 0 var(--dy, 0px); filter: drop-shadow(0 6px 8px rgba(58, 10, 20, .38)); }
.estampa svg { display: block; width: 100%; height: auto; }
.estampa .dientes { stroke: var(--suelo); }
.estampa--a { --giro: -9deg; left: -.2rem; top: 44%; }
.estampa--b { --giro: 8deg; right: .6rem; bottom: -1rem; width: 4.3rem; }

.portada__copia > .clip { left: auto; right: 1.3rem; }
.pegatina {
  position: absolute; z-index: 3; left: .1rem; top: -.1rem; margin: 0; --giro: -6deg; rotate: var(--giro); translate: 0 var(--dy, 0px);
  display: grid; padding: .32rem .6rem .36rem; background: var(--azul); color: var(--crema); border-radius: 3px;
  box-shadow: 0 5px 10px rgba(58, 10, 20, .32);
}
.pegatina b { font: 700 .8125rem/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; }
.pegatina span { font: 500 .6rem/1.35 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; opacity: .85; }

.portada__matasellos { --giro: 12deg; right: -.4rem; top: .9rem; width: 5.6rem; height: 5.6rem; color: var(--crema); opacity: .94; transform: none; rotate: var(--giro); translate: 0 var(--dy, 0px); }

.portada__texto { position: relative; z-index: 4; }
.oficial { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .55rem; font: 600 .8125rem/1 var(--f-ui); letter-spacing: .04em; color: var(--crema); }
.oficial svg { width: 1.2rem; height: 1.2rem; --tic: var(--rojo); }
.tic { stroke: var(--tic, #FFF6EA); }
.portada h1 { font-size: clamp(3.3rem, 14.6vw, 7.6rem); line-height: .92; letter-spacing: -.035em; }
.portada__sub { margin: .85rem 0 1.15rem; font-size: 1.125rem; line-height: 1.45; max-width: 28rem; color: var(--crema); }
.portada__nota { margin: .8rem 0 0; font: 500 .875rem/1.4 var(--f-ui); color: rgba(255, 246, 234, .88); text-align: center; }
.portada__nota b { color: var(--crema); font-weight: 700; }
.cerrado .portada__nota { display: none; }
@media (max-height: 640px) { .portada__copia .copia__marco { height: clamp(8.5rem, 26svh, 11rem); } }

/* ---------- Botón: variante clara para suelos de color y brillo ---------- */
.boton-lacre { position: relative; overflow: hidden; }
.boton-lacre > * { position: relative; z-index: 1; }
.boton-lacre::after {
  content: ""; position: absolute; inset: 0; translate: -130% 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .34) 50%, transparent 62%);
}
.boton-lacre--claro {
  background: var(--crema); color: var(--burdeos);
  box-shadow: inset 0 -2px 0 rgba(58, 10, 20, .12), 0 2px 3px rgba(58, 10, 20, .25), 0 18px 30px -12px rgba(58, 10, 20, .75);
}
@media (hover: hover) and (pointer: fine) { .boton-lacre--claro:hover { background: #FFFFFF; } }
.boton-lacre--claro[aria-disabled="true"] { background: rgba(255, 246, 234, .3); color: var(--crema); }

.boton-contorno {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .4rem 1.05rem;
  border: 1.5px solid var(--azul); border-radius: 999px; color: var(--azul); background: transparent;
  font: 600 .9375rem/1 var(--f-ui); text-decoration: none; transition: background-color .16s var(--suave), color .16s var(--suave);
}
@media (hover: hover) and (pointer: fine) { .boton-contorno:hover { background: var(--azul); color: var(--crema); } }

/* ---------- Cinta en movimiento ---------- */
.cinta {
  position: relative; z-index: 5; margin: -1.7rem -2rem -1.7rem; padding: .75rem 0; rotate: -2.2deg; overflow: hidden;
  background: var(--azul); color: var(--crema); box-shadow: 0 12px 26px -12px rgba(20, 43, 116, .85);
}
.cinta__pista { display: flex; align-items: center; gap: 1.4rem; width: max-content; padding-right: 1.4rem; }
.cinta span { font: 700 .9375rem/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.cinta i { flex: none; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--rojo); box-shadow: inset 0 0 0 2px rgba(255, 246, 234, .55); }

/* ---------- 2. Sí, soy yo ---------- */
.soy-yo { padding-top: calc(var(--seccion) + 1.6rem); }
.soy-yo h2 em { color: var(--rojo-hondo); }
.pruebas {
  list-style: none; margin: 2rem 0 0; padding: 0; background: var(--crema); box-shadow: var(--sombra-papel);
  border: 7px solid; border-image: repeating-linear-gradient(-45deg, var(--rojo) 0 12px, var(--crema) 12px 24px, var(--azul) 24px 36px, var(--crema) 36px 48px) 7;
}
.prueba { display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; padding: 1.35rem 1.15rem; border-top: 1px solid var(--linea); }
.prueba:first-child { border-top: 0; }
.prueba__icono { grid-row: 1 / span 2; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--azul); color: var(--crema); }
.prueba__icono svg { width: 1.5rem; height: 1.5rem; }
.prueba h3 { margin: .15rem 0 .2rem; font: 600 1.125rem/1.25 var(--f-ui); letter-spacing: 0; }
.prueba > p { margin: 0; font: 400 1rem/1.5 var(--f-ui); color: var(--tinta-suave); }
.prueba .nota-voz { grid-column: 1 / -1; margin: 1.5rem 0 0; max-width: none; transform: none; box-shadow: none; background: #FFFFFF; }
.prueba > .prueba__redes { grid-column: 1 / -1; margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.prueba > .prueba__firma { grid-column: 1 / -1; margin: .5rem 0 0 4rem; font: 400 2.9rem/1 var(--f-mano); color: var(--azul); rotate: -4deg; transform-origin: left center; width: fit-content; }
.soy-yo__aviso { margin: 1.3rem 0 0; max-width: var(--medida); font: 500 .9375rem/1.5 var(--f-ui); color: var(--tinta-suave); }
.nota-voz__boton { background: var(--azul); }

/* ---------- 3. La carta, con borde de sobre aéreo ---------- */
.carta { rotate: -.6deg; border: 8px solid; border-image: repeating-linear-gradient(-45deg, var(--rojo) 0 12px, var(--crema) 12px 24px, var(--azul) 24px 36px, var(--crema) 36px 48px) 8; }
.carta__membrete .monograma, .carta__membrete span { color: var(--azul); }

/* ---------- 4. Pasos sobre azul y sobre con forro rojo ---------- */
.suelo-azul .pasos > li::before { color: var(--rosa); }
.sobre__fondo, .sobre__solapa .forro { background: var(--rojo-hondo); }
.escena-sobre__halo { position: absolute; inset: 8% -12% -4%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 246, 234, .26), transparent 72%); }
.escena-sobre .sobre { filter: drop-shadow(0 22px 26px rgba(10, 20, 60, .5)); }

/* ---------- 5. El dinero, con la cifra gigante detrás ---------- */
.dinero-seccion { overflow: hidden; }
.cifra {
  position: absolute; z-index: 0; right: -1.2rem; top: -.5rem; margin: 0; pointer-events: none; user-select: none;
  font: 500 clamp(11rem, 54vw, 27rem)/.8 var(--f-carta); letter-spacing: -.06em; color: var(--rosa);
  translate: 0 calc((var(--p, .5) - .5) * -110px);
}
.cifra span { font-size: .4em; vertical-align: 1em; margin-left: .04em; }
.dinero { position: relative; z-index: 1; }
.dinero__texto h2 { max-width: 12ch; }

/* ---------- 6. Hoja de currículum ---------- */
.curriculum { rotate: .5deg; }
.curriculum > .clip { left: auto; right: 5.4rem; top: -1.5rem; color: #7E88A8; }
.tampon-rojo {
  position: absolute; left: 1.1rem; bottom: .95rem; margin: 0; padding: .32rem .7rem .3rem; rotate: -7deg; opacity: .85;
  border: 2.5px solid var(--rojo); border-radius: 4px; color: var(--rojo);
  font: 700 .875rem/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase;
}
.curriculum__cabeza { border-bottom-color: var(--azul); }
.curriculum dt { color: var(--azul); }
.reglas svg { color: var(--rojo); }

/* ---------- 7 y 8 ---------- */
.subrayado { background: linear-gradient(transparent 60%, var(--rosa) 60% 93%, transparent 93%); padding-inline: .08em; }
.duo .copia { box-shadow: 0 2px 4px rgba(27, 23, 48, .18), 0 24px 36px -18px rgba(27, 23, 48, .55); }
.suelo-burdeos h2 { color: var(--rosa); }

/* ---------- Huecos de foto con color ---------- */
.hueco {
  background-color: var(--rosa);
  background-image: radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .6) 0, transparent 58%), repeating-linear-gradient(135deg, rgba(200, 16, 46, .08) 0 1px, transparent 1px 9px);
  color: #7B4651;
}
.hueco b { color: var(--rojo-hondo); }

/* ---------- 9. Preguntas: apertura suave donde el navegador lo permite ---------- */
@supports (interpolate-size: allow-keywords) {
  .preguntas { interpolate-size: allow-keywords; }
  .preguntas details::details-content { block-size: 0; overflow: clip; transition: block-size .34s var(--suave), content-visibility .34s allow-discrete; }
  .preguntas details[open]::details-content { block-size: auto; }
}
.preguntas summary { transition: color .16s var(--suave); }
@media (hover: hover) and (pointer: fine) { .preguntas summary:hover { color: var(--rojo-hondo); } }

/* ---------- 10. Cierre en rojo ---------- */
.cierre.suelo-rojo { margin-top: 0; padding-top: .1rem; }
.cierre.suelo-rojo, .cierre.suelo-rojo h2 { color: var(--crema); }
.cierre.suelo-rojo p { color: rgba(255, 246, 234, .9); }
.enorme { display: block; margin-top: .12em; font-size: clamp(4.4rem, 22vw, 10.5rem); line-height: .88; letter-spacing: -.04em; }
.cierre .boton-lacre--claro { box-shadow: inset 0 -2px 0 rgba(58, 10, 20, .12), 0 2px 3px rgba(58, 10, 20, .25), 0 18px 30px -12px rgba(58, 10, 20, .75); }

/* ---------- 11. Pie ---------- */
.pie { background: var(--burdeos); padding-top: 0; border-top: 0; }
.pie .franja-aerea { margin-inline: calc(-1 * var(--canal)); }
.pie__dentro { padding-top: 2rem; }
.pie__marca { margin: 0; font: italic 500 1.5rem/1 var(--f-carta); color: var(--crema); }

/* ---------- Flujo de pago ---------- */
.aviso-maqueta { background: var(--azul); }
.etapas li[aria-current="step"] { border-color: var(--rojo); }
.etapas li.hecha { border-color: var(--azul); }
.casilla input:checked { background: var(--azul); border-color: var(--azul); }
.progreso__barra { background: var(--rojo); }
.tampon { border-color: var(--azul); color: var(--azul); }
.checkout-whop { margin: 1.25rem 0; min-height: 22rem; }

/* ==========================================================================
   Movimiento
   ========================================================================== */
.js [data-entra="izq"].espera { translate: -30px 0; rotate: -8deg; }
.js [data-entra="der"].espera { translate: 30px 0; rotate: 8deg; }
.js [data-entra="carta"].espera { translate: 0 36px; rotate: -4deg; }
.js [data-entra="recibo"].espera { translate: 0 -22px; clip-path: inset(0 -10% 100% -10%); }
.js [data-entra="recibo"] { clip-path: inset(-25% -10% -10% -10%); }
.js [data-entra="sello"].espera { scale: 1.45; rotate: -14deg; }
.js [data-entra].visto {
  transition: opacity .62s var(--suave), translate .7s var(--suave), rotate .85s var(--suave), scale .5s cubic-bezier(.2, 1.4, .4, 1), clip-path 1s var(--suave);
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* La firma se «escribe» al entrar en pantalla */
.puede-escribir [data-escribe]:not(.escrito) { clip-path: inset(-25% 100% -25% -5%); }
.puede-escribir [data-escribe].escrito { clip-path: inset(-25% -8% -25% -5%); transition: clip-path 1.1s ease-out .2s; }

@keyframes cae { from { opacity: 0; transform: translateY(-28px) rotate(-10deg) scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes sube { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes flota { from { transform: translateY(-3px) rotate(-1.5deg); } to { transform: translateY(4px) rotate(1.5deg); } }
@keyframes cinta { to { transform: translateX(-50%); } }
@keyframes latido { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.7); opacity: .4; } }
@keyframes brillo { 0%, 72% { translate: -130% 0; } 100% { translate: 130% 0; } }

@media (prefers-reduced-motion: no-preference) {
  /* La entrada de la portada solo arranca si el navegador está pintando (clase .anima).
     Si no llega a arrancar, a los 450 ms el contenido se muestra sin animación (.sin-anima). */
  .js:not(.anima):not(.sin-anima) .cae, .js:not(.anima):not(.sin-anima) .sube { opacity: 0; }
  .anima .cae { animation: cae .8s var(--suave) both; animation-delay: calc(var(--o, 0) * 90ms + 60ms); }
  .anima .sube { animation: sube .65s var(--suave) both; animation-delay: calc(var(--o, 0) * 60ms); }
  .flota { animation: flota 6s ease-in-out infinite alternate; }
  .flota--lenta { animation-duration: 8s; animation-delay: -3s; }
  .cinta__pista { animation: cinta 34s linear infinite; }
  .latido { animation: latido 1.8s ease-in-out infinite; }
  .boton-lacre::after { animation: brillo 5.5s ease-in-out infinite 1.5s; }
  .nota-voz.suena .nota-voz__onda i.on { animation: latido 1s ease-in-out infinite; animation-delay: calc(var(--h) * -12ms); }
}

@media (prefers-reduced-motion: reduce) {
  .cifra { translate: none; }
  .portada__copia, .estampa, .pegatina, .portada__matasellos { translate: none; }
  .puede-escribir [data-escribe]:not(.escrito) { clip-path: none; }
  .js [data-entra="recibo"].espera { clip-path: none; }
}

/* ==========================================================================
   Pantallas anchas (V2)
   ========================================================================== */
@media (min-width: 40rem) {
  .portada .boton-lacre--ancho { display: inline-flex; width: auto; min-width: 21rem; }
  .portada__nota { text-align: left; }
  .cinta span { font-size: 1.0625rem; }
  .estampa { width: 5.4rem; }
  .estampa--b { width: 5rem; }
}

@media (min-width: 56rem) {
  .portada { padding: 6.5rem var(--canal) 7rem; }
  .portada__dentro { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 3.5rem; }
  .portada__texto { grid-column: 1; grid-row: 1; }
  .portada__escena { grid-column: 2; grid-row: 1; padding: 0; justify-items: center; }
  .portada__copia.copia { width: min(100%, 25rem); }
  .portada__copia .copia__marco { height: auto; width: 100%; aspect-ratio: 4 / 5; }
  .portada__sub { font-size: 1.35rem; margin: 1.2rem 0 1.8rem; }
  .estampa { width: 6.6rem; }
  .estampa--a { left: -1.2rem; top: 48%; }
  .estampa--b { width: 5.9rem; right: -.6rem; bottom: -1.6rem; }
  .pegatina { left: -1.4rem; top: 1.4rem; scale: 1.3; }
  .portada__matasellos { width: 8.4rem; height: 8.4rem; right: -4.6rem; top: -3.4rem; }

  .pruebas { display: grid; grid-template-columns: repeat(3, 1fr); }
  .prueba { border-top: 0; border-left: 1px solid var(--linea); align-content: start; }
  .prueba:first-child { border-left: 0; }
  .prueba > .prueba__firma { margin-left: 4rem; }
  .cifra { right: 2rem; top: -2rem; }
  .cierre.suelo-rojo { padding-bottom: calc(var(--seccion) + 1rem); }
}