/* Revva — el formulario de pago, en las DOS monturas (B8.5, 2026-09-03).

   Lo comparten `checkout.html` (la página de respaldo) y el overlay que `checkout-core.js`
   abre sobre el muro en `analisis.html` / `scan.html` / `que-forma-de-cara-tengo.html`. Salió
   de `checkout.css` para que las dos monturas no puedan divergir en el paso del dinero.

   Por qué una hoja NUEVA y no cargar `checkout.css` en el muro: medido el 03-09, `checkout.css`
   redefine `.pay-action`, `.arrow-swap`, `.product-card` y `.nojs`, que el muro ya usa con otros
   valores — cargarla ahí habría reescrito en silencio un recorrido con 2.247 zonas de contraste
   verificadas. Y por qué no meterlo en `styles.css`: lo cargan las 20 páginas del sitio, blog
   incluido, y esto solo lo necesitan las que cobran.

   Lo que se quedó en `checkout.css` es lo que SOLO tiene la página: cabecera, rejilla de dos
   columnas, resumen del pedido y los precios repetidos. El overlay no enseña nada de eso (ADR
   §C1): el precio aparece una sola vez, en el botón. */

/* ── el formulario, común a las dos monturas ─────────────────────────────────────────── */

.payment-email{font-size:.9rem;color:var(--cap);min-height:1.4em;margin-bottom:10px}
.payment-email b{font-weight:600;color:var(--bone)}
.payment-email a{color:var(--bone);text-decoration:underline;display:inline-block;padding:6px 8px;margin-left:2px}
/* Nadie tiene que pagar dos veces desde que el desbloqueo va con la persona (ADR 2026-08-04) */
.payment-dup{font-size:.85rem;line-height:1.55;color:var(--body-2);margin-bottom:30px}
.payment-dup a{color:var(--bone);text-decoration:underline;text-underline-offset:3px}
/* En el overlay ese párrafo se lleva además el aviso del email (el de `.payment-email`, que allí
   ya no existe) y cierra el bloque de texto en DOS líneas en vez de cinco: hallazgo 3 de la
   auditoría del 14-09. El hueco de 30 px era el «hueco grande debajo» que señalaba. */
.pov-sheet .payment-dup{margin-bottom:16px}

/* mismo alto que el Payment Element para que el relevo no mueva la página */
/* `:not([hidden])` no es cosmética: sin ella el display:flex gana al display:none del
   atributo y el panel sigue pintándose aunque el JS lo oculte (ver nota en styles.css) */
.payment-loading:not([hidden]){border:1px solid var(--line);border-radius:12px;padding:18px;color:var(--cap);font-size:.9rem;
  min-height:170px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.pl-bar{position:relative;height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.pl-bar::after{content:"";position:absolute;inset:0;width:38%;border-radius:2px;background:var(--brass);
  animation:pl-slide 1.5s cubic-bezier(.23,1,.32,1) infinite}
@keyframes pl-slide{from{transform:translateX(-110%)}to{transform:translateX(320%)}}

/* Era una tarjeta crema: sobre tinta pasa al material del gate rojo del flujo, que es el que
   ya está medido (`analisis.css`, `body.an .gate-error`). Mismo borde terracota. */
.payment-fail:not([hidden]){border:1px solid #b4542e;border-radius:12px;padding:20px;
  background:rgba(154,69,37,.14);min-height:170px;
  display:flex;flex-direction:column;justify-content:center;gap:16px}
.payment-fail .pf-msg{color:var(--bone);font-size:.95rem;line-height:1.55}
.payment-fail .pf-actions{display:flex;gap:10px;flex-wrap:wrap}
/* «Volver a mi resultado» es la ÚNICA salida de un checkout que ha fallado, y su canto es lo
   único que lo dibuja. Sobre el material del panel rojo, el .34 del contorno de tinta se queda
   en 2,82:1 y el mínimo de la WCAG 1.4.11 para un control es 3. Medido: .38 da 3,17:1. */
.payment-fail .pf-actions .btn-ghost{border-color:rgba(243,239,231,.38)}
/* .btn es inline-flex y le gana al display:none del atributo `hidden` (lección del 04-08):
   sin esta regla, "Reintentar" seguiría a la vista en el camino del acceso caducado. */
.payment-fail .pf-actions .btn[hidden]{display:none}

#payment-form{max-width:600px}
/* el campo de email del checkout (ADR 2026-08-06): mismo material que el Payment Element
   —radio 9px— para que el formulario se lea como UNA pieza. Sobre tinta ese material es el
   campo del flujo (puerta de email y recuperar acceso), ya medido: relleno de hueso al .08 y
   canto al .22. Al Element se le pasa el MISMO color plano por `appearance` en checkout-core.js. */
.co-field{margin-bottom:14px}
.co-field label{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cap);margin:0 0 8px}
.co-field input{width:100%;background:rgba(243,239,231,.08);border:1px solid rgba(243,239,231,.22);
  color:var(--bone);font-family:var(--sans);font-size:1rem;padding:.9em 1.05em;border-radius:9px}
.co-field input::placeholder{color:#8DA0AA}
.co-field input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.co-field input[aria-invalid="true"]{border-color:var(--err)}
.co-field .payment-error{margin:8px 0 0}
#payment-element{min-height:170px}

.checkout-consent{display:flex;align-items:flex-start;gap:10px;margin:24px 0 14px;color:var(--body-2);font-size:.78rem;line-height:1.5}
/* latón, que es lo que ya usa la OTRA casilla de consentimiento del flujo (`.check input`, la
   de la puerta de email): dos acentos distintos para el mismo componente en el mismo recorrido
   es justo la incoherencia que el sistema visual vino a quitar. */
.checkout-consent input{margin-top:3px;accent-color:var(--brass)}
.checkout-consent a{color:var(--bone)}
/* Casilla sin marcar al pagar (2026-09-01, feedback de Jorge): antes SOLO cambiaba el texto
   de abajo — la casilla, del tamaño nativo del navegador, se quedaba exactamente igual y era
   fácil no verla, sobre todo en el paso que de verdad importa. Mismo rojo terracota que
   `.payment-fail`: se tiñe la FILA entera, no solo el control. */
.checkout-consent:has(input[aria-invalid="true"]){background:rgba(154,69,37,.14);
  border:1px solid #b4542e;border-radius:10px;padding:10px 12px;margin:24px -12px 14px}
.checkout-consent input[aria-invalid="true"]{outline:2px solid #b4542e;outline-offset:2px;border-radius:3px}

.payment-error{color:var(--err);font-size:.8rem;margin:10px 0}
/* En el pie el error de Stripe va PEGADO encima del botón: es el único sitio donde una tarjeta
   rechazada se lee sin tener que buscarla. Cero margen arriba — lo pone el propio pie. */
.pov-foot .payment-error{margin:0 0 10px}
/* el error de pago recibe el foco al fallar (para lector y teclado), sin pintar anillo */
.payment-error[tabindex]:focus{outline:none}

/* El botón ya NO nace deshabilitado: un botón apagado no emite eventos, así que pulsarlo no
   hacía nada y no explicaba por qué. Además la opacidad .42 se aplicaba al botón entero y
   dejaba la etiqueta "Pagar 9,90 €" en 2,53:1 (medido). El consentimiento se valida al enviar,
   con el error junto a la casilla.
   INVERTIDO el 2026-08-22 con la página: el primario del flujo es hueso sobre tinta (14,4:1),
   y en tinta sobre tinta este botón habría desaparecido igual que el de `cuenta.html`. */
.pay-action{width:100%;min-height:58px;border:0;border-radius:9px;background:var(--bone);color:var(--ink);
  font:600 1rem var(--sans);padding:0 18px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;
  transition:transform var(--press-dur) ease-out}
/* «procesando» sigue siendo un botón LLENO y legible, solo que más apagado: con `--body-2`
   —que sobre tinta es `--bone-dim`— la etiqueta hueso se habría quedado en 1,1:1. */
.pay-action[aria-busy="true"]{cursor:progress;background:var(--bone-dim)}

.checkout-trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:auto;padding-top:36px;color:var(--cap);
  font-size:.56rem;letter-spacing:.1em;text-transform:uppercase}

/* ── el overlay (solo la montura de hoja) ────────────────────────────────────────────── */

/* El `<dialog>` es el lienzo, no la tarjeta: transparente y a pantalla completa para que la
   hoja de dentro pueda anclarse abajo en móvil y centrarse en escritorio. El `padding:0` y el
   `max-width/height:none` deshacen los valores por defecto del navegador, que centran una caja
   pequeña con margen automático. */
.pay-overlay{padding:0;border:0;background:none;max-width:none;max-height:none;width:100%;height:100%;
  margin:0;overflow:visible;color:var(--body-2)}
/* Tinta al 62 %: por debajo, el muro de detrás competía con el formulario; por encima, dejaba
   de leerse que el muro sigue ahí (que es justo lo que distingue esta hoja de una página nueva). */
.pay-overlay::backdrop{background:rgba(10,15,17,.62);backdrop-filter:blur(2px)}

/* La hoja. En móvil sube desde abajo y se pega al borde inferior —el pulgar está ahí—, con el
   alto máximo en `svh` para que la barra del navegador de iOS no la corte.

   Desde el 2026-09-14 la hoja YA NO se desplaza entera: es una columna de tres piezas y lo único
   que rueda es `.pov-body` (auditoría móvil, hallazgo 3). Antes, bajar al formulario de tarjeta
   se llevaba a la vez el aspa de cerrar y el importe; ahora los dos se quedan. El padding lateral
   sigue en la hoja —así las tres piezas alinean— y el vertical baja a cabecera y pie. */
.pov-sheet{position:absolute;left:0;right:0;bottom:0;max-height:92svh;overflow:hidden;
  background:var(--ink);color:var(--body-2);
  border-top:1px solid var(--line);border-radius:18px 18px 0 0;
  padding:0 clamp(18px,5vw,30px);
  display:flex;flex-direction:column}
/* El Payment Element cambia de alto según los métodos que Stripe ofrezca. Si la cabecera o el
   pie conservan el `flex-shrink:1` por defecto, una lista alta los aplasta antes de activar el
   scroll del cuerpo: el texto desborda su caja y se solapa. */
.pov-head,.pov-foot{flex:0 0 auto}
/* `min-height:0` no es adorno: sin él un hijo flexible no baja de su alto de contenido y el
   `overflow-y` no llega a activarse nunca — el cuerpo empuja el pie fuera de la hoja. */
.pov-body{flex:1 1 auto;min-height:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding-bottom:18px}
.pov-body>*{flex-shrink:0}
.pov-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:22px 0 14px}
.pov-head h2{font-family:var(--sans);font-size:1.15rem;font-weight:600;line-height:1.25;
  color:var(--bone);margin:0}
/* 44 px de objetivo (WCAG 2.5.8), y el canto al .34 sobre tinta plena, que es donde ese valor
   ya mide por encima de 3:1 (la regla de controles, no la de texto). */
.pov-close{width:44px;height:44px;flex:0 0 44px;margin:-8px -8px 0 0;border-radius:999px;
  border:1px solid rgba(243,239,231,.34);background:none;color:var(--bone-dim);
  font-size:.95rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.pov-close:hover{color:var(--bone);border-color:rgba(243,239,231,.5)}

/* El pie: el error de Stripe, el importe y los sellos, quietos sobre el cuerpo que rueda. El
   canto de arriba es lo que dice que ahí termina la zona que se mueve. Fondo OPACO y el mismo
   tinta de la hoja: sin él, las filas de método pasarían por debajo del botón de pagar. */
.pov-foot{background:var(--ink);border-top:1px solid var(--line);
  padding:14px 0 calc(16px + env(safe-area-inset-bottom))}
/* dentro de la hoja el bloque de confianza no empuja al fondo: la hoja se ajusta al contenido */
.pov-sheet .checkout-trust{margin-top:0;padding-top:14px;border-top:0}
/* El pie solo existe cuando existe el formulario. Mientras se prepara el pago o cuando falla,
   `montarPago` deja `#payment-form` en `hidden` — y un botón «Pagar 9,90 €» fijo encima de un
   esqueleto de carga es un botón que no hace nada. Se resuelve en CSS y no en JS a propósito:
   las dos monturas comparten la lógica, y solo el overlay tiene pie. */
.pov-sheet:has(#payment-form[hidden]) .pov-foot{display:none}

/* El muro de detrás no puede seguir desplazándose bajo la hoja. `<dialog>` modal ya lo bloquea
   en la mayoría de navegadores, pero no en iOS: ahí el `body` sigue moviéndose con el gesto. */
body.pay-overlay-open{overflow:hidden}

/* Entrada: la hoja sube, el fondo aparece. 240 ms, la misma familia de curvas del flujo. */
@media (prefers-reduced-motion:no-preference){
  .pay-overlay[open] .pov-sheet{animation:pov-in .24s cubic-bezier(.2,.7,.2,1) both}
  .pay-overlay[open]::backdrop{animation:pov-fade .24s ease-out both}
}
@keyframes pov-in{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@keyframes pov-fade{from{opacity:0}to{opacity:1}}

/* En escritorio deja de ser una hoja y pasa a ser un panel centrado: anclado abajo ocuparía
   todo el ancho de una pantalla de 1.440 px para un formulario de 600. */
@media (min-width:720px){
  .pov-sheet{position:relative;margin:auto;top:50%;transform:translateY(-50%);
    max-width:560px;max-height:88svh;border-radius:16px;border:1px solid var(--line);
    padding:0 32px}
  .pov-head{padding:28px 0 14px}
  .pov-foot{padding:16px 0 22px}
  @media (prefers-reduced-motion:no-preference){
    .pay-overlay[open] .pov-sheet{animation:pov-in-desktop .24s cubic-bezier(.2,.7,.2,1) both}
  }
}
@keyframes pov-in-desktop{from{transform:translateY(calc(-50% + 10px));opacity:0}
  to{transform:translateY(-50%);opacity:1}}