/* Los 4 Elementos · pulido.css
   Auditoría de diseño del 23-sept-2026 (/auditar-diseno, suite de Emil Kowalski), aprobada entera por Alex.
   Solo la carga index.html: /ceremonia, /checkout y /gracias comparten styles.css y no se auditaron.
   Va la última de las hojas, así que gana a styles.css y subida.css con la misma especificidad, sin !important.
   El número entre paréntesis es el del cambio en L4E\AUDITORIA DE DISENO - landing L4E (2026-09-23).md */

/* ---------- Botones: responden al dedo como el del checkout (2) ---------- */
html { -webkit-tap-highlight-color: transparent; }
.btn {
  transition: transform 160ms var(--e-out, cubic-bezier(.23, 1, .32, 1)), box-shadow 160ms var(--e-out, cubic-bezier(.23, 1, .32, 1));
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* en táctil, el hover no se queda pegado tras tocar */
@media (hover: none), (pointer: coarse) {
  .btn:hover { transform: none; box-shadow: 0 12px 34px rgba(217, 166, 78, .26), inset 0 1px 0 rgba(255, 255, 255, .35); }
  .btn-wa:hover { box-shadow: 0 12px 34px rgba(37, 211, 102, .22); }
  .play:hover { transform: translate(-50%, -50%); background: rgba(217, 166, 78, .92); }
  .vsl .screen .play:hover { transform: none; background: transparent; }
}
/* después del hover, para ganarle al pulsar: la receta de .chk-cta:active */
.btn:active {
  transform: translateY(1px) scale(.985);
  box-shadow: 0 4px 12px -6px rgba(217, 166, 78, .42), inset 0 2px 5px rgba(0, 0, 0, .2);
  transition-duration: 100ms;
}
.btn-wa:active { box-shadow: 0 4px 12px -6px rgba(37, 211, 102, .42), inset 0 2px 5px rgba(0, 0, 0, .2); }
.play:active { transform: translate(-50%, -50%) scale(.94); transition-duration: 100ms; }
.vsl .screen .play:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .btn, .play { transition: none; }
  .btn:hover, .btn:active { transform: none; }
  .play:active { transform: translate(-50%, -50%); }
  .vsl .screen .play:active { transform: none; }
}

/* ---------- Foco visible con teclado y campo activo (18) ---------- */
.btn:focus-visible, .play:focus-visible, .cc:focus-visible, .modal-x:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.modal-x:focus-visible { border-radius: 10px; }
.faq summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
.vsl:has(.play:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
.lf-field input, .cc-panel input { transition: border-color .15s ease, box-shadow .15s ease; }
.lf-field input:focus, .cc-panel input:focus { box-shadow: 0 0 0 3px rgba(217, 166, 78, .18); }
.lf-field input.bad:focus { box-shadow: 0 0 0 3px rgba(200, 100, 46, .18); }

/* ---------- Pop-up de reserva ---------- */
/* se posa con un fundido; el cierre sigue siendo instantáneo (5) */
.modal.open .modal-bg { animation: l4eVeloIn 200ms ease-out; }
.modal.open .modal-card { animation: l4eTarjetaIn 240ms var(--e-out, cubic-bezier(.23, 1, .32, 1)); }
@keyframes l4eVeloIn { from { opacity: 0; } }
@keyframes l4eTarjetaIn { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .modal.open .modal-card { animation-name: l4eVeloIn; } }
/* al enviar, el botón parece ocupado (el estado .chk-cta.is-espera del checkout), no apagado (9) */
.modal .lf-submit[disabled] {
  opacity: 1;
  cursor: progress;
  background: rgba(217, 166, 78, .15);
  color: var(--cream-70);
  box-shadow: inset 0 0 0 1px var(--filo-oro, rgba(217, 166, 78, .32));
  transform: none;
}
.modal .lf-submit[disabled] .lf-btn-text::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--gold);
  vertical-align: .1em;
  animation: l4ePulso 1.35s var(--e-soft, cubic-bezier(.45, 0, .55, 1)) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .modal .lf-submit[disabled] .lf-btn-text::before { animation: none; opacity: .9; }
}
/* la lista de países no arrastra el pop-up al llegar al final (22) */
.cc-panel ul, .modal-card { overscroll-behavior: contain; }

/* ---------- Barra superior ---------- */
/* el punto late tres veces al llegar y se queda quieto (7) */
.dot { animation-iteration-count: 3; }
/* la cuenta atrás no se parte; letra algo menor en móviles de 380 px o menos (15) */
.bar .cd { white-space: nowrap; }
@media (max-width: 380px) {
  .bar .wrap { font-size: .68rem; }
  .bar b { font-size: .74rem; }
}

/* ---------- Hero ---------- */
/* la primera frase, con aire y en renglones parejos (4) */
.hero.center .eyebrow { line-height: 1.5; text-wrap: balance; }

/* ---------- Los cuatro elementos ---------- */
/* llegan de uno en uno: sale uno en 180 ms sin moverse y el siguiente entra a los 160 ms (1) */
.el { transition: opacity 180ms ease-out, transform 0s linear 180ms; }
.el.is-active { transition: opacity 420ms var(--e-out, cubic-bezier(.23, 1, .32, 1)) 160ms, transform 480ms var(--e-out, cubic-bezier(.23, 1, .32, 1)) 160ms; }
.els-cta { transition: opacity 180ms ease-out, transform 0s linear 180ms; }
.els-track[data-elemento=agua] .els-cta { transition: opacity 420ms var(--e-out, cubic-bezier(.23, 1, .32, 1)) 260ms, transform 480ms var(--e-out, cubic-bezier(.23, 1, .32, 1)) 260ms; }
@media (prefers-reduced-motion: reduce) {
  .el, .el.is-active, .els-cta, .els-track[data-elemento=agua] .els-cta { transition: opacity 200ms ease-out; }
}
/* el fondo no se oscurece a mitad del cambio: la que llega entra; la que se va espera tapada (6) */
.els-bg { transition: opacity 300ms ease 300ms; }
.els-bg.is-active { transition: opacity 600ms var(--e-out, cubic-bezier(.23, 1, .32, 1)); }
@media (prefers-reduced-motion: reduce) { .els-bg, .els-bg.is-active { transition: opacity 300ms ease; } }
/* la segunda capa de polvo cierra su bucle sin salto: 660 = 2×330 y 860 = 2×430 (25) */
.els-fx .dust.b { animation-name: l4eElsRiseB; animation-duration: 46s; }
@keyframes l4eElsRiseB {
  from { background-position: 0 0, 95px 140px; }
  to { background-position: 0 -660px, 95px -720px; }
}
@media (prefers-reduced-motion: reduce) { .els-fx .dust { animation: none; } }
/* polvo y halo en pausa fuera de pantalla; main.js (medir) pone .fx-off (28) */
.els-track.fx-off .els-fx .glow, .els-track.fx-off .els-fx .dust { animation-play-state: paused; }
/* en móvil, sin franja de otro marrón al esconderse la barra del navegador (16) */
@media (max-width: 820px) {
  section.els-sec { background: var(--bg); }
  .els-media::after {
    background:
      linear-gradient(0deg, var(--bg) 0%, rgba(26, 15, 10, .72) 9%, transparent 36%),
      linear-gradient(180deg, var(--bg) 0%, rgba(26, 15, 10, .3) 26%, transparent 52%);
  }
}
/* sin hueco sobre «Aire» cuando va apilado (sin JS o con movimiento reducido) (24) */
@media (max-width: 820px) { html.no-js .els-cards, html.reduce-motion .els-cards { padding-top: 0; } }

/* ---------- Vídeo principal: la portada se funde con el reproductor mientras carga Vimeo (26) ---------- */
.vsl .screen img { transition: opacity 300ms ease; }
.vsl.is-cargando .screen img { opacity: .6; }
.vsl.is-cargando .screen::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(26, 15, 10, .4);
  pointer-events: none;
  animation: l4ePulso 1.35s var(--e-soft, cubic-bezier(.45, 0, .55, 1)) infinite;
}
@media (prefers-reduced-motion: reduce) { .vsl.is-cargando .screen::after { animation: none; } }

/* ---------- Tipografía ---------- */
/* cifras en la misma línea en precios, cuenta atrás y datos (10) */
.cdbig b, #cd-offer b { font-variant-numeric: lining-nums tabular-nums; }
.p-now .new, .p-now .old, .oferta-h2 span, .when-card b { font-variant-numeric: lining-nums; }
/* sin palabras colgando (11) */
p, li { text-wrap: pretty; }
h2, h3, summary, .hero.center h1 .a, .els-cards .el p, .sube, .hero.center .paren, .btn-wa > span,
.vid .q, .e-info, .week .when .date, .bio .sub, #testimonios .lead { text-wrap: balance; }
/* las semanas al ancho del resto (12), su fecha más legible (13) y renglones más cortos (17) */
#semanas .weeks { max-width: 772px; margin-left: auto; margin-right: auto; }
.week .when .date { color: var(--cream-70); }
#semanas .weeks-close { max-width: 60ch; margin: 36px auto 0; text-wrap: balance; }
#faq details p { max-width: 60ch; }
/* en móvil, «¿Tienes preguntas?» no compite con los títulos (14) */
@media (max-width: 820px) { .wa h3 { font-size: 1.5rem; } }

/* ---------- Testimonios ---------- */
/* el nombre ya no pisa los subtítulos de la portada (3) */
.vid::after { background: linear-gradient(180deg, transparent 0%, rgba(10, 5, 3, .82) 30%, rgba(10, 5, 3, .95) 52%); }
/* tocar la etiqueta también reproduce (21) */
.vid .t { pointer-events: none; }

/* ---------- Detalles ---------- */
/* el texto seleccionado se lee, como el resaltado de la cita (19) */
::selection { background: var(--gold); color: #1A0F0A; }
/* enlaces del pie sin partirse y fáciles de tocar (20) */
footer a { white-space: nowrap; }
@media (max-width: 820px) { footer a { display: inline-block; padding: 10px 4px; margin: 0; } }