/* Alta de clientes · marca Farol (webs-coapa/farol-motion/DESIGN.md): noche, marfil y la luz de un farol de latón.
   Mundo en capas: muro de cantera y polvo detrás; el farol (render de la marca) se acerca conforme el cliente llena;
   al mandar, la cámara entra en la flama y el folio aparece en su luz. */
@font-face { font-family: "Antic Didone"; font-weight: 400; font-display: swap;
  src: url("/fuentes/RWmPoKKX6u8sp8fIWdnDKqDSroEH.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 300 600; font-display: swap;
  src: url("/fuentes/92zatBhPNqw73oTd4g.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Jost"; font-weight: 300 600; font-display: swap;
  src: url("/fuentes/92zatBhPNqw73ord4iYl.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1EFF, U+20A0-20C0; }

:root {
  --noche: #0e0d0b; --sombra: #1a1815; --marfil: #efe7d4; --gris: #a59d8c;
  --laton: #c6a46a; --destello: #e6d6b0; --linea: #2a2722;
  --aviso: #eaa592; /* solo errores; 9.5:1 sobre noche */
  --curva: cubic-bezier(.16, 1, .3, 1);
  --entrada: cubic-bezier(.22, 1, .36, 1);
  --margen: 16px;
  --ventana: 64px;
  color-scheme: dark;
}
@media (min-width: 768px) { :root { --margen: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
[data-plan="ficha"] [data-solo="pro"], [data-plan="pro"] [data-solo="ficha"] { display: none !important; }

html { background: var(--noche); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--ventana) + 16px); }
body {
  margin: 0; min-height: 100dvh; background: var(--noche); color: var(--marfil);
  font: 400 16px/1.5 Jost, system-ui, sans-serif; text-rendering: optimizeLegibility;
}
a { color: var(--marfil); text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, var(--laton) 70%, transparent); }
:focus-visible { outline: 2px solid var(--laton); outline-offset: 3px; border-radius: 6px; }
strong { font-weight: 500; }
button, label, summary, a { touch-action: manipulation; }

.saltar { position: absolute; left: var(--margen); top: -60px; z-index: 40; background: var(--marfil); color: var(--noche);
  padding: 12px 18px; border-radius: 999px; min-height: 44px; }
.saltar:focus { top: 12px; }

/* ── Capa 1: el muro de cantera y el polvo en la luz (fijos, detrás de todo) ── */
.mundo { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.muro { position: absolute; inset: auto 0 0; height: 70%; background: url("/mundo/muro.webp") center bottom / cover no-repeat;
  opacity: .2; mask-image: linear-gradient(transparent, #000 45%); -webkit-mask-image: linear-gradient(transparent, #000 45%); }
.polvo { position: absolute; inset: -10% 0; background-size: 800px 1200px; background-repeat: repeat; will-change: transform; }
.polvo-a { background-image: url("/mundo/polvo-a.webp"); opacity: .35; animation: flota 90s linear infinite; }
.polvo-b { background-image: url("/mundo/polvo-b.webp"); opacity: .22; animation: flota 140s linear infinite reverse; }
@keyframes flota { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-40px, -1200px, 0); } }

.marco { max-width: 1440px; margin: 0 auto; padding: 0 var(--margen) 120px; }

/* ── Capa 2: la escena del farol ── */
.cabeza { position: relative; }
.escena { position: relative; height: 62svh; min-height: 380px; margin: 0 calc(-1 * var(--margen)); overflow: hidden; background: var(--noche); }
.escena .poster, .escena .farol { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.escena .farol { visibility: hidden; }
.escena .farol.pintado { visibility: visible; }

/* Al mandar, la pantalla de la flama queda encima: la página de atrás no se mueve */
body.enviando { overflow: hidden; }
body.enviando .ventana { transform: translateY(-101%); }
.escena-velo { position: absolute; inset: 0; background:
  linear-gradient(to bottom, rgb(14 13 11 / .35), transparent 22%, transparent 55%, var(--noche) 98%); }

.cabeza-texto { position: relative; margin-top: -14svh; padding-bottom: 8px; }
.hud { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--gris);
  font: 500 10.5px/1.4 Jost, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.farolito { width: 28px; height: 28px; flex: none; }
.farolito .armazon { fill: none; stroke: var(--laton); stroke-width: 1.1; stroke-linejoin: round; }
.farolito .flama { fill: var(--destello); transform-origin: 16px 18px; animation: flama 2.6s ease-in-out infinite alternate; }
@keyframes flama { from { opacity: .7; transform: scaleY(.92); } to { opacity: 1; transform: scaleY(1.04); } }

.titulo { margin: 0; font: 400 clamp(52px, 14vw, 112px)/.9 "Antic Didone", Didot, serif; letter-spacing: -.02em; text-wrap: balance; }
.entrada { margin: 22px 0 0; max-width: 34em; font-size: 17px; text-wrap: pretty; }
.cambio { margin: 12px 0 0; color: var(--gris); font-size: 15px; }
.cambio a { display: inline-block; padding: 12px 0; margin: -12px 0; }

.borrador { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 22px; padding: 10px 16px;
  border: 1px solid var(--linea); border-left: 2px solid var(--laton); border-radius: 14px; background: rgb(26 24 21 / .92); }
.borrador p { margin: 0; }

/* Pasos (en compu): cada parte con su flamita que se enciende */
.pasos { display: none; }
.pasos ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pasos a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 0; color: var(--gris); text-decoration: none;
  transition: color .4s var(--curva); }
.pasos a:hover, .pasos a[aria-current="step"] { color: var(--marfil); }
.pasos .hecho a { color: var(--marfil); }

/* ── La ventana: en celular, el farol se queda arriba y dice cuánto llevas ── */
.ventana { position: fixed; z-index: 25; left: 0; right: 0; top: 0; height: var(--ventana); display: grid;
  grid-template-columns: 76px 1fr; align-items: center; gap: 12px; padding-right: var(--margen);
  background: var(--noche); border-bottom: 1px solid var(--linea);
  transform: translateY(-101%); transition: transform .5s var(--entrada); }
.ventana.visible { transform: none; }
.ventana-flama { width: 76px; height: var(--ventana); display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(60% 70% at 50% 60%, rgb(198 164 106 / .16), transparent 70%); }
.ventana-flama img { height: 58px; width: auto; display: block; mix-blend-mode: screen; transform-origin: 50% 90%;
  mask-image: radial-gradient(48% 50% at 50% 55%, #000 55%, transparent 100%); -webkit-mask-image: radial-gradient(48% 50% at 50% 55%, #000 55%, transparent 100%);
  transition: transform .9s var(--entrada), opacity .9s var(--entrada); }
.ventana-texto { margin: 0; display: grid; font-size: 14px; line-height: 1.3; min-width: 0; }
#avance-cuenta { color: var(--marfil); font-weight: 500; font-variant-numeric: tabular-nums; }
#avance-falta { color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ventana-linea { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
.ventana-linea i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--laton), var(--destello)); transition: transform .9s var(--entrada); }

/* ── Capa 3: el formulario ── */
form { display: grid; gap: 72px; padding-top: 40px; }
.parte { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 22px; }
.parte legend { display: flex; align-items: center; gap: 14px; padding: 0; margin-bottom: 26px;
  font: 400 clamp(36px, 9.5vw, 54px)/.95 "Antic Didone", Didot, serif; letter-spacing: -.01em; }
.parte legend::after { content: ""; flex: 1; height: 1px; margin-left: 4px; align-self: center;
  background: linear-gradient(90deg, rgb(198 164 106 / .55), transparent); transform-origin: left; transition: transform 1.2s var(--entrada) .15s; }

/* Flamita de cada parte: apagada (contorno) → encendida (llena y con halo) */
.flamita { width: 18px; height: 25px; flex: none; overflow: visible; }
.flamita path { fill: transparent; stroke: rgb(198 164 106 / .7); stroke-width: 1.4; transition: fill .7s var(--curva), stroke .7s var(--curva); }
.parte.hecha .flamita path, .pasos .hecho .flamita path { fill: var(--destello); stroke: var(--destello); }
.parte.hecha .flamita, .pasos .hecho .flamita { filter: drop-shadow(0 0 6px rgb(230 214 176 / .55)); }
.pasos .flamita { width: 14px; height: 20px; }

/* Entrada de cada parte: llega desde abajo; la línea de latón se dibuja; varía la dirección parte a parte */
html.js .parte:not(.vista) { transform: translate3d(0, 24px, 0); }
html.js .parte:not(.vista) legend::after { transform: scaleX(0); }
.parte { transition: transform 1.1s var(--entrada); }

.campo { display: grid; gap: 8px; min-width: 0; }
label, .etiqueta { font-weight: 500; font-size: 16px; margin: 0; }
.opcional { color: var(--gris); font-weight: 400; }
.pista { margin: 0; color: var(--gris); font-size: 15px; text-wrap: pretty; }
.pista:empty { display: none; }

input[type="text"], input[type="tel"], input[type="email"], select, textarea {
  width: 100%; min-height: 52px; padding: 13px 16px; font: 400 16px/1.4 Jost, system-ui, sans-serif; color: var(--marfil);
  background: rgb(26 24 21 / .94); border: 1px solid rgb(239 231 212 / .24); border-radius: 14px; appearance: none;
  transition: border-color .4s var(--curva), box-shadow .4s var(--curva);
}
textarea { resize: vertical; min-height: 96px; }
select { padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, var(--gris) 50%), linear-gradient(135deg, var(--gris) 50%, transparent 50%);
  background-position: right 22px center, right 16px center; background-size: 6px 6px; background-repeat: no-repeat; }
::placeholder { color: #8a8273; opacity: 1; }
@media (hover: hover) { input:hover, select:hover, textarea:hover { border-color: rgb(239 231 212 / .42); } }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--laton); outline-offset: 2px; border-color: var(--laton);
  box-shadow: 0 0 28px -6px rgb(198 164 106 / .5); border-radius: 14px; }
[aria-invalid="true"] { border-color: var(--aviso) !important; }
.error { margin: 0; color: var(--aviso); font-size: 15px; font-weight: 500; }
.error::before { content: "· "; }

.casilla { display: flex; align-items: flex-start; gap: 14px; min-height: 48px; padding: 10px 0; cursor: pointer; font-weight: 400; }
.casilla input { flex: none; width: 24px; height: 24px; margin: 0; appearance: none; border: 1.5px solid rgb(239 231 212 / .55);
  border-radius: 7px; background: var(--sombra); display: grid; place-content: center; cursor: pointer;
  transition: background-color .4s var(--curva), border-color .4s var(--curva); }
.casilla input::after { content: ""; width: 12px; height: 7px; border: solid var(--noche); border-width: 0 0 2.5px 2.5px;
  transform: translateY(-2px) rotate(-45deg) scale(0); transition: transform .4s var(--curva); }
.casilla input:checked { background: var(--laton); border-color: var(--laton); }
.casilla input:checked::after { transform: translateY(-2px) rotate(-45deg) scale(1); }

.nunca { margin: 4px 0 0; padding: 12px 14px; border-left: 2px solid var(--laton); background: rgb(198 164 106 / .08); border-radius: 0 12px 12px 0; font-size: 15px; }

/* Botones: píldoras de la marca; un hilo de latón le da la vuelta al pasar el cursor */
.boton, .boton-sec { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 24px;
  border-radius: 999px; font: 500 16px/1 Jost, sans-serif; letter-spacing: .02em; text-decoration: none; cursor: pointer;
  transition: transform .4s var(--curva), background-color .4s var(--curva), border-color .4s var(--curva), box-shadow .6s var(--curva); }
.boton { background: var(--marfil); color: var(--noche); border: 0; }
.boton:active, .boton-sec:active { transform: scale(.98); transition-duration: 0s; }
.boton[disabled] { opacity: .6; cursor: progress; }
.boton-sec { background: rgb(14 13 11 / .6); color: var(--marfil); border: 1px solid rgb(239 231 212 / .5); }
@media (hover: hover) {
  .boton:hover { background: var(--destello); box-shadow: 0 0 36px -8px rgb(230 214 176 / .6); }
  .boton-sec:hover { border-color: var(--laton); box-shadow: inset 0 0 0 1px var(--laton); }
}
.boton-texto { min-height: 44px; padding: 0; background: none; border: 0; color: var(--marfil); font: inherit; font-size: 15px;
  text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--laton); cursor: pointer; }

.botones-pin { display: flex; flex-wrap: wrap; gap: 10px; }
.mapa-caja { position: relative; z-index: 0; isolation: isolate; margin-top: 6px; border-radius: 14px; overflow: hidden; border: 1px solid var(--linea); }
/* Mientras bajan las teselas: un plano dibujado en latón (no una caja gris) y el pin espera */
.mapa { height: 300px; background-color: var(--sombra);
  background-image: linear-gradient(rgb(198 164 106 / .1) 1px, transparent 1px), linear-gradient(90deg, rgb(198 164 106 / .1) 1px, transparent 1px),
    radial-gradient(60% 60% at 50% 50%, rgb(198 164 106 / .1), transparent 70%);
  background-size: 36px 36px, 36px 36px, 100% 100%; }
.mapa-caja.cargando::after { content: "Cargando el mapa…"; position: absolute; inset: 0; display: grid; place-content: center; z-index: 500;
  color: var(--gris); font-size: 15px; pointer-events: none; }
.mapa-caja.cargando .leaflet-marker-pane, .mapa-caja.cargando .leaflet-shadow-pane { opacity: 0; }
.leaflet-marker-pane { transition: opacity .5s var(--entrada); }
/* Teselas de OpenStreetMap en gris cálido de noche: sin rosas ni morados */
.mapa .leaflet-tile-pane { filter: grayscale(1) invert(1) sepia(.45) brightness(.78) contrast(1.05); }
.leaflet-container { font: 400 12px/1.4 Jost, sans-serif; background-color: var(--sombra) !important; }
.leaflet-container a { color: var(--marfil); }
.leaflet-control-attribution { background: rgb(14 13 11 / .78) !important; color: var(--gris); border-top-left-radius: 8px; }
.leaflet-control-attribution a { color: var(--marfil) !important; }
.leaflet-bar { border: 1px solid rgb(198 164 106 / .55) !important; border-radius: 12px !important; overflow: hidden; box-shadow: 0 6px 18px -6px rgb(0 0 0 / .6) !important; }
.leaflet-bar a { background: rgb(14 13 11 / .92) !important; color: var(--laton) !important; border-bottom: 1px solid var(--linea) !important;
  font: 400 22px/44px Jost, sans-serif !important; }
.leaflet-bar a:last-child { border-bottom: 0 !important; }
@media (hover: hover) { .leaflet-bar a:hover { background: var(--sombra) !important; color: var(--destello) !important; } }
.leaflet-bar a.leaflet-disabled { color: #6b6457 !important; }
.pin-farol svg { width: 30px; height: 42px; display: block; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .5)); }
.pin-farol path { fill: var(--noche); stroke: var(--laton); stroke-width: 1.6; }
.pin-farol path.f { fill: var(--destello); stroke: none; }
.leaflet-bar a { width: 44px !important; height: 44px !important; line-height: 44px !important; }

/* ── Guía de fotos: tres escenas dibujadas en latón; su luz se prende al llegar ── */
.guia { list-style: none; margin: 0 calc(-1 * var(--margen)); padding: 4px var(--margen) 8px; display: grid; grid-auto-flow: column;
  grid-auto-columns: min(78%, 300px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--margen);
  scrollbar-width: none; }
.guia::-webkit-scrollbar { display: none; }
.guia li { scroll-snap-align: start; display: grid; align-content: start; background: rgb(26 24 21 / .94); border: 1px solid var(--linea);
  border-radius: 16px; overflow: hidden; }
.escena-guia { display: block; width: 100%; height: auto; aspect-ratio: 200 / 125;
  background: radial-gradient(120% 90% at 50% 100%, #1f1c18, #141210); border-bottom: 1px solid var(--linea); }
.escena-guia .trazo { fill: none; stroke: var(--laton); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.escena-guia .trazo.fino { stroke-width: 1; opacity: .7; }
.escena-guia .toldo { stroke-width: 1.1; }
.escena-guia .mira { fill: none; stroke: var(--marfil); stroke-width: 1.4; opacity: .75; }
.escena-guia .letrero { fill: var(--destello); }
.escena-guia .tinta { stroke: var(--noche); stroke-width: 3; stroke-linecap: round; }
.escena-guia .tinta-clara { fill: none; stroke: #e9d39d; stroke-width: 2; stroke-linecap: round; }
.escena-guia .vidrio { fill: rgb(230 214 176 / .14); stroke: var(--laton); stroke-width: 1.2; }
.escena-guia .pantalla { fill: #2a2520; stroke: var(--laton); stroke-width: 1.3; stroke-linejoin: round; }
.escena-guia .foco { fill: var(--destello); }
.escena-guia .sol circle { fill: var(--destello); }
.escena-guia .sol path { stroke: var(--destello); stroke-width: 1.4; stroke-linecap: round; }
.escena-guia .plato { fill: #2b2621; stroke: var(--marfil); stroke-width: 1.3; }
.escena-guia .comida { fill: #b9874a; }
.escena-guia .vapor path { fill: none; stroke: var(--marfil); stroke-width: 1.2; stroke-linecap: round; opacity: .55; }
html.js .guia li:not(.prendida) .luz { opacity: 0; }
.escena-guia .luz { transition: opacity 1.4s var(--entrada) .2s; }
.guia li.prendida .vapor path { animation: vapor 3.2s ease-in-out infinite; }
.guia li.prendida .vapor path:nth-child(2) { animation-delay: -1.1s; }
.guia li.prendida .vapor path:nth-child(3) { animation-delay: -2.2s; }
@keyframes vapor { 0%, 100% { transform: translateY(0); opacity: .2; } 50% { transform: translateY(-5px); opacity: .6; } }
.guia p { margin: 0; padding: 14px 16px 16px; color: var(--gris); font-size: 15px; }
.desliza { margin: -10px 0 0; color: var(--gris); font-size: 15px; }
.desliza span { display: inline-block; color: var(--laton); animation: empuja 2.4s var(--entrada) infinite; }
@keyframes empuja { 0%, 60%, 100% { transform: none; } 30% { transform: translateX(5px); } }
.guia strong { display: block; color: var(--marfil); font-size: 16px; margin-bottom: 2px; }

.oculto-archivo { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.oculto-archivo:focus-visible + .boton-archivo { outline: 2px solid var(--laton); outline-offset: 3px; }
.boton-archivo { justify-self: start; }
.oculto-archivo:disabled + .boton-archivo { opacity: .5; cursor: not-allowed; }
.cuenta { margin: 0; color: var(--gris); font-size: 15px; font-variant-numeric: tabular-nums; }
.cuenta:empty { display: none; }

.avance { display: grid; gap: 6px; }
.avance span { color: var(--gris); font-size: 15px; font-variant-numeric: tabular-nums; }
progress { width: 100%; height: 6px; appearance: none; border: 0; border-radius: 999px; background: var(--linea); overflow: hidden; }
progress::-webkit-progress-bar { background: var(--linea); border-radius: 999px; }
progress::-webkit-progress-value { background: linear-gradient(90deg, var(--laton), var(--destello)); border-radius: 999px; transition: width .4s var(--curva); }
progress::-moz-progress-bar { background: linear-gradient(90deg, var(--laton), var(--destello)); }

.miniaturas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.miniaturas:empty { display: none; }
.miniaturas li { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--sombra); border: 1px solid var(--linea);
  animation: entra .7s var(--entrada) both; }
.miniaturas img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniaturas .pdf { display: grid; place-content: center; height: 100%; padding: 8px; text-align: center; color: var(--gris); font-size: 13px; word-break: break-word; }
.miniaturas .pdf strong { color: var(--laton); font-size: 15px; letter-spacing: .12em; }
.miniaturas.archivos { grid-template-columns: minmax(0, 220px); }
.miniaturas.archivos li { aspect-ratio: auto; min-height: 96px; }
.quitar { position: absolute; top: 0; right: 0; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-content: center; }
.quitar::before { content: ""; width: 32px; height: 32px; border-radius: 999px; background: rgb(14 13 11 / .82); border: 1px solid rgb(239 231 212 / .4); }
.quitar::after { content: "×"; position: absolute; inset: 0; display: grid; place-content: center; color: var(--marfil); font-size: 20px; line-height: 1; }
@keyframes entra { from { opacity: 0; transform: scale(.94); } }

#datos-factura { display: grid; gap: 22px; overflow-anchor: none; }
#datos-factura > .pista { margin-bottom: -4px; }
.aviso { padding: 18px; border: 1px solid var(--linea); border-radius: 14px; background: rgb(26 24 21 / .94); font-size: 15px; }
.aviso p { margin: 0 0 10px; text-wrap: pretty; }
.aviso details { margin-top: 4px; }
.aviso a[href^="mailto:"] { display: inline-block; padding: 11px 0; margin: -11px 0; }
.aviso summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 500; color: var(--marfil);
  text-decoration: underline; text-decoration-color: var(--laton); text-underline-offset: .2em; }
.aviso h3 { margin: 16px 0 4px; font: 500 15px/1.4 Jost, sans-serif; color: var(--marfil); }
.aviso details p { color: var(--gris); }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.enviar { display: grid; gap: 14px; padding-top: 8px; }
.enviar .boton { width: 100%; min-height: 58px; font-size: 17px; }
.boton-flama { width: 0; height: 20px; opacity: 0; flex: none; overflow: visible; transition: width .35s var(--curva), opacity .35s var(--curva); }
.boton-flama path { fill: var(--laton); }
.boton.mandando { background: var(--destello); box-shadow: 0 0 40px -6px rgb(230 214 176 / .75); }
.boton.mandando[disabled] { opacity: 1; cursor: progress; }
.boton.mandando .boton-flama { width: 14px; opacity: 1; transform-origin: 50% 90%; animation: flama 1s ease-in-out infinite alternate; }
.enviar .boton:not(.mandando) { gap: 0; }
.resumen-errores { padding: 16px 18px; border: 1px solid var(--aviso); border-radius: 14px; background: rgb(14 13 11 / .92); }
.resumen-errores p { margin: 0 0 6px; }
.resumen-errores ul { margin: 0; padding-left: 18px; }
.resumen-errores li { padding: 6px 0; }
.resumen-errores li::marker { color: var(--aviso); }
.resumen-errores a { color: var(--aviso); }

/* ── Al mandar y el folio: la flama viva crece en su sitio y su luz se abre; el folio sale debajo ── */
.listo { position: fixed; inset: 0; z-index: 28; overflow-y: auto; outline: none; background: var(--noche);
  animation: aparece .35s var(--entrada) both; }
@keyframes aparece { from { opacity: 0; } }
/* La noche y la flama bajan juntas sobre el formulario; el texto entra después (sin dos textos encimados) */
.listo.enviando .listo-cuerpo, .listo.enviando .listo-lista { animation: aparece .5s var(--entrada) .3s both; }
.listo-luz { position: fixed; inset: 0; pointer-events: none; opacity: .3;
  background: radial-gradient(50% 36% at 50% 26%, rgb(230 214 176 / .24), rgb(198 164 106 / .08) 55%, transparent 80%); }
.listo-escena { position: relative; min-height: 100%; display: grid; align-content: center; justify-items: center; gap: 8px;
  padding: max(28px, env(safe-area-inset-top)) var(--margen) max(32px, env(safe-area-inset-bottom)); text-align: center; }
.listo-flama { width: 150px; height: 206px; position: relative; transform-origin: 50% 88%; will-change: transform, opacity;
  background: radial-gradient(50% 50% at 50% 62%, rgb(230 214 176 / .22), transparent 70%); }
.listo-flama video { width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: screen;
  mask-image: radial-gradient(46% 50% at 50% 56%, #000 50%, transparent 100%); -webkit-mask-image: radial-gradient(46% 50% at 50% 56%, #000 50%, transparent 100%); }
.listo-cuerpo { display: grid; width: 100%; max-width: 640px; }
.listo-cuerpo > * { grid-area: 1 / 1; }
.listo-envio { align-self: center; display: grid; justify-items: center; gap: 12px; padding-top: 14px; transition: opacity .26s var(--curva), transform .4s var(--curva); }
.listo-folio { display: grid; justify-items: center; gap: 16px; }
.listo.enviando .listo-folio { visibility: hidden; }
.listo.llego .listo-envio { opacity: 0; transform: translate3d(0, -8px, 0); pointer-events: none; }
.listo .hud { margin: 0; color: var(--destello); justify-content: center; }
.envio-estado { margin: 0; font: 400 clamp(28px, 7.6vw, 40px)/1.05 "Antic Didone", Didot, serif; text-wrap: balance; }
.envio-linea { width: min(260px, 70%); height: 2px; background: var(--linea); border-radius: 2px; overflow: hidden; }
.envio-linea i { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--laton), var(--destello)); }
.envio-detalle { margin: 0; min-height: 1.5em; color: var(--gris); font-size: 15px; font-variant-numeric: tabular-nums; }
.folio { margin: 0; min-height: 1em; font: 400 clamp(34px, 9.6vw, 72px)/1 "Antic Didone", Didot, serif; letter-spacing: .01em; color: var(--destello);
  white-space: nowrap; text-shadow: 0 0 40px rgb(230 214 176 / .35); }
.folio .guion { display: inline-block; margin: 0 -.12em; }
.listo h2 { margin: 6px 0 0; font: 400 clamp(34px, 9vw, 56px)/.95 "Antic Didone", Didot, serif; }
.listo-folio > p:not(.hud):not(.folio):not(.pista) { margin: 0; max-width: 30em; text-wrap: pretty; }
.listo .boton, .listo .boton-sec { width: 100%; max-width: 420px; }
.listo-folio .pista:empty { display: block; min-height: 1.5em; }
.listo.llego .listo-folio > * { animation: sube .9s var(--entrada) .24s both; }
.listo.llego .listo-folio > :nth-child(2) { animation-delay: .32s; } .listo.llego .listo-folio > :nth-child(3) { animation-delay: .4s; }
.listo.llego .listo-folio > :nth-child(4) { animation-delay: .48s; } .listo.llego .listo-folio > :nth-child(n+5) { animation-delay: .56s; }
/* «Lo que mandaste»: las flamitas se prenden con la línea del envío y se quedan prendidas bajo el folio */
.listo-lista { width: 100%; max-width: 440px; display: grid; gap: 12px; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--linea); }
.listo-lista ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; text-align: left; }
.listo-lista li { display: flex; align-items: center; gap: 10px; min-height: 34px; color: var(--gris); font-size: 15px; line-height: 1.25; transition: color .6s var(--curva); }
.listo-lista .flamita { width: 14px; height: 20px; }
.listo-lista li.hecho { color: var(--marfil); }
.listo-lista li.hecho .flamita path { fill: var(--destello); stroke: var(--destello); }
.listo.llego .listo-luz { animation: crece 1.6s var(--entrada) both; }
@keyframes crece { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1.04); } }
@keyframes sube { from { opacity: 0; transform: translate3d(0, 18px, 0); } }

/* ── Compu: el farol ocupa la columna izquierda y se queda; el formulario corre a la derecha ── */
@media (min-width: 1024px) {
  :root { --ventana: 0px; }
  .ventana { display: none; }
  .marco { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 0 72px; align-items: start; padding-left: 0; }
  .cabeza { position: sticky; top: 0; height: 100dvh; display: grid; align-content: end; }
  .escena { position: absolute; inset: 0; height: auto; margin: 0; }
  .escena .poster, .escena .farol { object-position: 50% 76%; }
  .escena-velo { background: linear-gradient(to bottom, rgb(14 13 11 / .3), transparent 14%, transparent 40%, rgb(14 13 11 / .86) 58%, var(--noche) 72%),
    linear-gradient(to right, transparent 78%, var(--noche)); }
  .cabeza-texto { margin: 0; padding: 0 0 40px 48px; }
  .cabeza { z-index: 0; }
  .escena { z-index: -1; }
  .cabeza-texto { position: static; }
  .cabeza-texto .hud { position: absolute; top: 40px; left: 48px; margin: 0; }
  .titulo { font-size: clamp(56px, 5.6vw, 92px); }
  .entrada { max-width: 30em; }
  .pasos { display: block; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--linea); }
  .pasos ol { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }
  .pasos a { font-size: 15px; }
  form { padding-top: 96px; }
  .guia { margin: 0; padding: 0; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow: visible; }
  .guia li { grid-template-columns: 200px 1fr; align-items: center; }
  .escena-guia { border-bottom: 0; border-right: 1px solid var(--linea); }
  .enviar .boton { width: auto; justify-self: start; padding-inline: 40px; }
  .listo-flama { width: 170px; height: 234px; }
  .desliza { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js .parte:not(.vista) { opacity: 1; transform: none; }
  html.js .parte:not(.vista) legend::after { transform: none; }
  html.js .guia li:not(.prendida) .luz { opacity: 1; }
}