/* ==========================================================================
   Formulario de financiamiento MundoMac — prototipo navegable
   Estilo alineado con la preview de Pablo (/temp): fondo #f5f5f7, texto
   #1d1d1f, tipografía del sistema, botones negros en píldora.
   Todo el CSS va bajo prefijo .fin- para no chocar con el tema de WordPress
   si algún día se incrusta sin iframe.
   ========================================================================== */

/* Logo nuevo de Interpay (11-nov). ÚNICO lugar de sus URL en el formulario, Mi solicitud y subsanar (las tres páginas cargan este
   archivo). Cuando estén en el servidor de imágenes (Strapi, carpeta «Marca»), se cambia cada url() por su URL pública. */
:root{
  --ip-logo:url("assets/marca/interpay-logo.png");                /* navy, para fondos claros */
  --ip-logo-blanco:url("assets/marca/interpay-logo-blanco.png");  /* blanco, para fondos oscuros (banda de Mi solicitud) */
  --ip-isotipo:url("assets/marca/interpay-isotipo.png");          /* solo la P en navy (barra en teléfonos angostos) */
}
.ip-logo{display:block;flex:none;background:var(--ip-logo) left center/contain no-repeat}
.ip-logo.blanco{background-image:var(--ip-logo-blanco)}

:root{
  --bg:#f5f5f7;
  --card:#ffffff;
  --ink:#1d1d1f;
  --ink-2:#424245;
  --muted:#6e6e73;
  --line:#d2d2d7;
  --line-soft:#e8e8ed;
  --accent:#333d75;          /* azul de Interpay: enlaces, foco y lo que marca avance. Las acciones siguen en negro */
  --accent-soft:#e6edfc;
  --ok:#1d8a3a;
  --ok-soft:#e9f6ec;
  --warn:#b25e00;
  --warn-soft:#fff4e5;
  --err:#d70015;
  --err-soft:#fdecee;
  --black:#0a0a0a;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 28px rgba(0,0,0,.06);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
::selection{background:var(--black);color:#fff}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent)}
.fin-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fin-nowrap{white-space:nowrap}

/* ---------- Barra superior ---------- */
.fin-top{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line-soft)}
.fin-top-in{max-width:1280px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:16px}
.fin-logo{height:38px;width:auto}
.fin-top-title{display:flex;align-items:center;gap:16px;font-weight:600;font-size:16px;color:var(--ink-2);padding-left:16px;border-left:1px solid var(--line)}
.fin-top-word{padding-left:16px;border-left:1px solid var(--line)}
.fin-partner{display:flex;align-items:center;gap:6px;font-weight:700;letter-spacing:-.01em;color:var(--accent)}
/* Logo nuevo de Interpay (11-nov): una sola imagen con la P y «interpay» (navy sobre la barra blanca) */
.fin-partner-logo{width:106px;height:30px}
.fin-top-sp{flex:1}
.fin-save{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.fin-save .dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.fin-help{font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center}
.fin-help-ic{display:none}
.fin-login{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap;padding:8px 14px;border:1px solid var(--line);border-radius:999px;min-height:36px}
.fin-login:hover{border-color:var(--ink)}
.fin-login:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Progreso global bajo la barra */
.fin-prog{height:4px;background:var(--line-soft)}
.fin-prog-bar{height:100%;width:0;background:var(--accent);transition:width .5s cubic-bezier(.2,.8,.2,1)}

/* ---------- Contenedor ---------- */
.fin-wrap{max-width:1280px;margin:0 auto;padding:28px 24px 80px}
.fin-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
@media (max-width:920px){.fin-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- Portada ---------- */
.fin-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:0;background:var(--card);border-radius:28px;overflow:hidden;box-shadow:var(--shadow)}
.fin-hero-txt{padding:48px 44px;display:flex;flex-direction:column;justify-content:center}
.fin-hero h1{font-size:44px;line-height:1.06;letter-spacing:-.02em;margin:0 0 14px;font-weight:700}
.fin-hero p.lead{font-size:19px;color:var(--ink-2);margin:0 0 26px;max-width:30ch}
.fin-hero-img{position:relative;min-height:420px;background:#e9e9ee}
.fin-hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.fin-hero-badges{display:flex;gap:10px;flex-wrap:wrap}
.fin-hero-ally{margin:18px 0 0;font-size:14px;color:var(--muted)}
.fin-hero-ally b{color:var(--ink-2)}
.fin-badge{display:inline-flex;align-items:center;gap:8px;background:var(--bg);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:500}
.fin-badge b{font-weight:700}
@media (max-width:820px){
  .fin-hero{grid-template-columns:1fr}
  .fin-hero-img{min-height:260px;order:-1}
  .fin-hero-txt{padding:28px 22px 30px}
  .fin-hero h1{font-size:32px}
  .fin-hero p.lead{font-size:17px}
}

.fin-sec{margin-top:44px}
.fin-sec-h{font-size:28px;letter-spacing:-.015em;margin:0 0 6px;font-weight:700}
.fin-sec-sub{color:var(--muted);margin:0 0 20px;font-size:17px}

/* Cómo funciona: 4 pasos */
/* Así funciona: una sola franja con los pasos unidos por una línea (no cuatro tarjetas iguales) */
.fin-how{display:grid;grid-template-columns:repeat(4,1fr);padding:26px 0;margin:0;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);counter-reset:how}
.fin-how li{list-style:none;padding:0 24px;position:relative}
.fin-how li::before{counter-increment:how;content:counter(how);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;font-size:14px;margin-bottom:14px;position:relative;z-index:1}
.fin-how li:not(:last-child)::after{content:"";position:absolute;top:15px;left:62px;right:-16px;height:1.5px;background:var(--line)}
.fin-how h3{margin:0 0 6px;font-size:17px}
.fin-how p{margin:0;color:var(--ink-2);font-size:15px;max-width:26ch}
@media (max-width:920px){
  .fin-how{grid-template-columns:1fr;padding:8px 0}
  .fin-how li{display:grid;grid-template-columns:30px 1fr;column-gap:14px;padding:16px 22px}
  .fin-how li::before{grid-row:span 2;margin:0}
  .fin-how li:not(:last-child)::after{top:52px;bottom:-12px;left:36.5px;right:auto;width:1.5px;height:auto}
  .fin-how p{max-width:none}
}

/* Comparación de plazos */
.fin-cmp-wrap{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:14px;align-items:stretch}
.fin-cmp-photo{min-height:260px;box-shadow:var(--shadow)}
@media (max-width:920px){.fin-cmp-wrap{grid-template-columns:1fr}.fin-cmp-photo{min-height:240px;order:-1}}
.fin-compare{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 24px}
.fin-cmp-row{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:center;padding:14px 0}
.fin-cmp-row + .fin-cmp-row{border-top:1px solid var(--line-soft)}
.fin-cmp-label b{display:block;font-size:17px}
.fin-cmp-label span{font-size:14px;color:var(--muted)}
.fin-cmp-track{position:relative;height:46px}
.fin-cmp-axis{position:absolute;left:0;right:0;top:50%;height:2px;background:var(--line-soft);transform:translateY(-50%)}
.fin-cmp-span{position:absolute;top:50%;height:6px;border-radius:6px;transform:translateY(-50%)}
.fin-cmp-dot{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;transform:translate(-50%,-50%);border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.fin-cmp-row.ours .fin-cmp-span{background:#c9d8f5}
.fin-cmp-row.ours .fin-cmp-dot{background:var(--accent)}
.fin-cmp-row.other .fin-cmp-span{background:#ececf0}
.fin-cmp-row.other .fin-cmp-dot{background:#8e8e93}
.fin-cmp-months{display:grid;grid-template-columns:200px 1fr;gap:18px;font-size:12px;color:var(--muted)}
.fin-cmp-months div{display:flex;justify-content:space-between}
.fin-cmp-foot{margin:16px 0 0;font-size:15px;color:var(--ink-2)}
.fin-cmp-foot b{color:var(--ink)}
.fin-calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:28px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 24px}
.fin-calc-in .fin-input{height:54px;font-size:20px;font-weight:600}
.fin-calc-out{display:flex;flex-direction:column;justify-content:center}
.fin-calc-empty{margin:0;padding:28px;border-radius:16px;background:var(--bg);color:var(--muted);text-align:center}
.fin-calc-terms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:1240px){.fin-calc-terms{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fin-calc-t{background:var(--bg);border-radius:16px;padding:16px}
/* Mismos tonos que los iconos de «Tres palabras»: 9 azul, 12 ámbar, 15 verde; 18 violeta */
.fin-calc-t:nth-child(1){background:var(--accent-soft)}
.fin-calc-t:nth-child(2){background:#fff4e5}
.fin-calc-t:nth-child(3){background:#e9f6ec}
.fin-calc-t:nth-child(1) .n{color:var(--accent)}
.fin-calc-t:nth-child(2) .n{color:#b25e00}
.fin-calc-t:nth-child(3) .n{color:#1d8a3a}
.fin-calc-t:nth-child(4){background:#f1edfb}
.fin-calc-t:nth-child(4) .n{color:#5b3fa8}
.fin-calc-t .n{display:block;font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.fin-calc-t b{display:block;font-size:22px;letter-spacing:-.01em;margin:6px 0 0;font-variant-numeric:tabular-nums;white-space:nowrap}
.fin-calc-t > small{display:block;font-size:13px;color:var(--ink-2)}
.fin-calc-note{margin:12px 0 0;font-size:13px;color:var(--muted)}
.fin-calc-dp{margin:0 0 10px;font-size:16px;color:var(--ink-2)}
.fin-calc-dp b{color:var(--ink);font-variant-numeric:tabular-nums}
.fin-calc-terms.low b{color:var(--muted)}
.fin-calc-min{margin:10px 0 0;font-size:14px;font-weight:600;color:var(--warn)}
@media (max-width:760px){
  .fin-calc{grid-template-columns:1fr;gap:20px;padding:22px 18px}
  .fin-calc-terms{grid-template-columns:1fr;gap:8px}
  /* Cada plazo en una fila: «6 cuotas» a la izquierda, «US$ 96,00 al mes» a la derecha */
  .fin-calc-t{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;column-gap:6px;padding:14px 16px}
  .fin-calc-t b{margin:0;font-size:20px}
}
@media (max-width:640px){
  .fin-cmp-row,.fin-cmp-months{grid-template-columns:1fr;gap:6px}
  .fin-cmp-months>span{display:none}
  /* A 18 meses de escala, los pagos quincenales quedan muy juntos: punto más pequeño para que no se monten */
  .fin-cmp-row.other .fin-cmp-dot{width:8px;height:8px;border:0;box-shadow:none}
}

/* Glosario sencillo */
.fin-terms{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fin-term{background:var(--card);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.fin-term-ic{width:76px;height:76px;border-radius:22px;display:grid;place-items:center;margin-bottom:14px}
.fin-term-ic.blue{background:var(--accent-soft);color:var(--accent)}
.fin-term-ic.amber{background:#fff4e5;color:#b25e00}
.fin-term-ic.green{background:#e9f6ec;color:#1d8a3a}
.fin-term h4{margin:0 0 6px;font-size:17px}
.fin-term p{margin:0;font-size:15px;color:var(--ink-2)}
@media (max-width:820px){.fin-terms{grid-template-columns:1fr}}

/* Selector de tipo de solicitante */
.fin-who{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fin-who-card{position:relative;display:block;background:var(--card);border:2px solid transparent;border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);cursor:pointer;transition:border-color .15s,transform .15s}
.fin-who-card:hover{transform:translateY(-1px)}
.fin-who-card input{position:absolute;opacity:0;pointer-events:none}
.fin-who-card h3{margin:0 0 4px;font-size:19px}
.fin-who-card p{margin:0 0 12px;color:var(--muted);font-size:15px}
.fin-who-card ul{margin:0;padding-left:18px;font-size:14px;color:var(--ink-2)}
.fin-who-card ul li{margin:2px 0}
.fin-who-card .fin-who-time{display:inline-block;margin-top:12px;font-size:13px;font-weight:600;color:var(--ink-2);background:var(--bg);border-radius:999px;padding:4px 10px}
.fin-who-card:has(input:checked){border-color:var(--ok);background:#f4fbf6;box-shadow:0 0 0 4px var(--ok-soft),var(--shadow)}
.fin-who-card:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.fin-who-check{position:absolute;top:18px;right:18px;width:24px;height:24px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center}
.fin-who-card:has(input:checked) .fin-who-check{background:var(--ok);border-color:var(--ok)}
.fin-who-card:has(input:checked) .fin-who-time{background:var(--ok-soft);color:#11502a}
.fin-who-card:has(input:checked) .fin-who-check::after{content:"";width:8px;height:12px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
@media (max-width:640px){.fin-who{grid-template-columns:1fr}}

.fin-start{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}
.fin-start small{color:var(--muted);font-size:14px;max-width:52ch}

/* ---------- Botones ---------- */
.fin-btn{appearance:none;border:0;border-radius:999px;background:var(--black);color:#fff;font-weight:600;font-size:16px;padding:14px 26px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;transition:transform .1s,opacity .15s}
.fin-btn:hover{opacity:.88}
.fin-btn:active{transform:scale(.98)}
.fin-btn:disabled{opacity:.35;cursor:not-allowed}
.fin-btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.fin-btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink-2);opacity:1}
.fin-btn.small{font-size:14px;padding:9px 16px;min-height:38px}
.fin-btn.link{background:none;color:var(--accent);padding:0;min-height:0;font-weight:500}
.fin-btn:focus-visible,.fin-input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ---------- Tarjeta del paso ---------- */
.fin-card{background:var(--card);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
.fin-banner{height:120px;margin:12px 12px 0;border-radius:18px;display:none}
.fin-banner.fin-frame > img{left:auto;right:0;width:46%;padding:10px 14px 10px 0;object-position:right center}
.fin-banner.fin-frame::before{background:radial-gradient(42% 95% at 78% 62%,var(--glow,rgba(255,255,255,.26)),transparent 75%)}
.fin-banner span{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:50%;color:#fff;font-weight:600;font-size:15px;line-height:1.25}
.fin-banner.prod{background:#fff;box-shadow:inset 0 0 0 1px var(--line-soft)}
.fin-banner.prod.fin-frame > img{width:40%;padding:0;object-fit:cover;object-position:center}
.fin-banner.prod::before{display:none}
.fin-banner.prod span{color:var(--ink)}
@media (max-width:920px){.fin-banner{display:block}}
.fin-card-in{padding:30px 32px 28px}
@media (max-width:560px){.fin-card-in{padding:22px 18px 22px}}
.fin-step-kicker{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 6px;display:flex;justify-content:space-between;gap:10px}
.fin-step-kicker .eta{text-transform:none;letter-spacing:0;font-weight:500}
/* El lateral ya muestra el paso y el tiempo; la línea solo hace falta en móvil, sin mayúsculas */
@media (min-width:921px){.fin-step-kicker{display:none}}
@media (max-width:920px){.fin-step-kicker{text-transform:none;letter-spacing:0;font-weight:500}}
.fin-step-h{font-size:28px;letter-spacing:-.015em;margin:0 0 6px;line-height:1.15}
.fin-step-sub{margin:0 0 22px;color:var(--ink-2);font-size:16px}

/* Resumen de errores del paso */
.fin-errsum{background:var(--err-soft);color:#8a000d;border-radius:var(--radius-sm);padding:12px 14px;margin:0 0 18px;font-size:15px}
.fin-errsum b{display:block;margin-bottom:2px}
.fin-errsum ul{margin:4px 0 0;padding-left:18px}
.fin-errsum a{color:inherit}

/* ---------- Campos ---------- */
.fin-group{border:0;margin:0 0 22px;padding:0;min-width:0}
.fin-group-h{font-size:17px;font-weight:700;margin:0 0 12px;padding:0;display:flex;align-items:center;gap:10px}
.fin-group-h small{font-weight:500;color:var(--muted);font-size:14px}
.fin-group + .fin-group{padding-top:20px;border-top:1px solid var(--line-soft)}
.fin-row{display:grid;grid-template-columns:repeat(12,1fr);gap:14px 14px}
.fin-f{grid-column:span 12;min-width:0}
.fin-f.w6{grid-column:span 6}
.fin-f.w4{grid-column:span 4}
.fin-f.w8{grid-column:span 8}
.fin-f.w3{grid-column:span 3}
@media (max-width:560px){.fin-f.w6,.fin-f.w4,.fin-f.w8,.fin-f.w3{grid-column:span 12}}

.fin-label{display:block;font-size:14px;font-weight:600;margin:0 0 6px;color:var(--ink)}
.fin-label .opt{font-weight:400;color:var(--muted)}
.fin-hint{font-size:13px;color:var(--muted);margin:6px 0 0}
.fin-err{font-size:13px;color:var(--err);margin:6px 0 0;display:flex;gap:6px;align-items:flex-start}
.fin-err::before{content:"!";flex:none;width:16px;height:16px;border-radius:50%;background:var(--err);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;margin-top:1px}
.fin-aviso{font-size:13px;color:var(--warn);background:var(--warn-soft);border-radius:var(--radius-sm);padding:8px 10px;margin:8px 0 0;flex-basis:100%;line-height:1.4}
.fin-okmsg{font-size:13px;color:var(--ok);margin:6px 0 0}
.fin-suggest{font-size:13px;margin:6px 0 0;color:var(--warn)}
.fin-suggest button{all:unset;cursor:pointer;color:var(--accent);font-weight:600;text-decoration:underline}

.fin-input{width:100%;height:50px;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:#fff;padding:0 14px;font-size:17px;transition:border-color .15s,box-shadow .15s}
textarea.fin-input{height:auto;min-height:92px;padding:12px 14px;resize:vertical;line-height:1.4}
select.fin-input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236e6e73' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.fin-input::placeholder{color:#a1a1a6}
.fin-input:hover{border-color:#b0b0b6}
.fin-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.fin-f.invalid .fin-input{border-color:var(--err);background:#fffbfb}
.fin-f.invalid .fin-input:focus{box-shadow:0 0 0 4px var(--err-soft)}
.fin-f.valid .fin-input{border-color:#9fd3ad}

/* Campo compuesto: prefijo + número (cédula, RIF, teléfono) */
.fin-combo{display:flex;gap:8px}
.fin-combo .fin-input.pre{flex:0 0 92px;padding-right:28px;background-position:right 10px center}
.fin-combo .fin-input.pre.wide{flex-basis:108px}
.fin-combo .fin-input.dv{flex:0 0 64px;text-align:center}
.fin-combo .sep{align-self:center;color:var(--muted);font-weight:600}
/* Teléfono: +58 fijo y aparte del número (tarea 6, reunión 09-nov) */
.fin-tel{display:flex;align-items:stretch}
.fin-tel-pre{display:flex;align-items:center;padding:0 12px;border:1.5px solid var(--line);border-right:0;border-radius:var(--radius-sm) 0 0 var(--radius-sm);background:var(--bg);color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums;user-select:none}
.fin-tel .fin-input{border-top-left-radius:0;border-bottom-left-radius:0;flex:1;min-width:0;font-variant-numeric:tabular-nums}
.fin-f.invalid .fin-tel-pre{border-color:var(--err)}
.fin-f.valid .fin-tel-pre{border-color:#9fd3ad}
/* País del teléfono (F1, 11-nov): se ve el código y la flecha; encima, el <select> nativo transparente (abre la lista del
   sistema con «Colombia +57»…, y el lector de pantalla lee «País del teléfono») */
.fin-tel-pais{position:relative;min-width:72px;padding:0 30px 0 12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236e6e73' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.fin-tel-pais select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;border:0;margin:0}
.fin-tel-pais:hover{border-color:#b0b0b6}
.fin-tel .fin-tel-pais:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);z-index:1}
.fin-money{position:relative}
.fin-money .cur{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:600;pointer-events:none}
.fin-money .fin-input{padding-left:58px;font-variant-numeric:tabular-nums}
.fin-count{float:right;font-size:12px;color:var(--muted);font-weight:400}

/* Opciones en tarjetas (radio) */
.fin-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.fin-opts.cols2{grid-template-columns:repeat(2,1fr)}
.fin-opts.cols3{grid-template-columns:repeat(3,1fr)}
.fin-opts.cols4{grid-template-columns:repeat(4,1fr)}
@media (max-width:560px){.fin-opts.cols4{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
@media (max-width:560px){.fin-opts.cols3{grid-template-columns:1fr}.fin-opts.cols3.keep{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.fin-opts.keep .fin-opt{padding:12px 6px;align-items:center;text-align:center}.fin-opts.keep .fin-opt::before{display:none}.fin-opts.keep .fin-opt b{white-space:nowrap}.fin-opts.keep .fin-opt:has(input:checked){background:var(--black);color:#fff}}
.fin-opt{position:relative;display:flex;flex-direction:column;gap:2px;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:13px 14px 13px 44px;cursor:pointer;background:#fff;transition:border-color .15s,background .15s;min-height:52px;justify-content:center}
.fin-opt input{position:absolute;opacity:0;pointer-events:none}
.fin-opt::before{content:"";box-sizing:border-box;position:absolute;left:14px;top:50%;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);transform:translateY(-50%);background:#fff}
.fin-opt b{font-size:15px;font-weight:600}
.fin-opt small{font-size:13px;color:var(--muted)}
.fin-opt:hover{border-color:#a1a1a6}
.fin-opt:has(input:checked){border-color:var(--black);background:#fafafa}
.fin-opt:has(input:checked)::before{border:5.5px solid var(--black)}
.fin-opt:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.fin-f.invalid .fin-opt{border-color:#f0a6ae}

/* Marco de foto (principio del carrusel de inicio de mundomac.com.ve): fondo negro,
   brillo radial teñido con el color del producto (--glow) y el producto recortado,
   completo y con aire (contain + padding) */
.fin-frame{position:relative;isolation:isolate;overflow:hidden;border-radius:22px;background:linear-gradient(180deg,#0d0d0f,#000 70%)}
.fin-frame::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(58% 48% at 50% 64%,var(--glow,rgba(255,255,255,.26)),transparent 72%)}
.fin-frame > img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:var(--pad,9%)}

/* Selector de equipo: copia de la ficha de producto de mundomac.com.ve */
.fin-seg{display:flex;flex-wrap:wrap;gap:6px;background:var(--bg);border-radius:999px;padding:5px;margin:0 0 14px;width:fit-content;max-width:100%}
.fin-seg-o{position:relative;cursor:pointer}
.fin-seg-o input{position:absolute;opacity:0;pointer-events:none}
.fin-seg-o span{display:block;padding:9px 16px;border-radius:999px;font-size:15px;font-weight:500;color:var(--ink-2);transition:background .15s,color .15s}
.fin-seg-o:hover span{color:var(--ink)}
.fin-seg-o input:checked + span{background:var(--black);color:#fff}
.fin-seg-o input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}
.fin-f.invalid .fin-seg{box-shadow:inset 0 0 0 1.5px #f0a6ae}
.fin-price,.fin-cart-q{background:var(--bg);border-radius:14px;padding:16px 18px}
.fin-price b,.fin-cart-q b{display:block;font-size:26px;letter-spacing:-.02em;line-height:1.15}
.fin-price b span,.fin-cart-q b span{font-size:15px;font-weight:500;letter-spacing:0;color:var(--ink-2)}
.fin-price p,.fin-cart-q p{margin:4px 0 6px;font-size:15px;color:var(--ink-2)}
.fin-price small,.fin-cart-q small{display:block;font-size:13px;color:var(--muted);line-height:1.35}
.fin-add{width:100%;margin-top:10px}
.fin-price .fin-pay-dp,.fin-cart-q .fin-pay-dp{margin:0 0 2px;font-size:15px;color:var(--ink-2)}
.fin-price .fin-pay-q,.fin-cart-q .fin-pay-q{font-size:24px;line-height:1.25;margin-bottom:6px}
@media (max-width:420px){.fin-price .fin-pay-q,.fin-cart-q .fin-pay-q{font-size:20px}}
.fin-price.pending{background:#ececf0}
.fin-price.pending p{margin:0;color:var(--muted)}
/* Carrito: una línea por producto, con sus acciones dentro (unidades e icono de quitar) */
.fin-cart{margin-top:22px;border:1.5px solid var(--line-soft);border-radius:var(--radius);padding:6px 18px 18px;background:#fff}
.fin-cart.empty{padding:16px 18px;background:var(--bg);border-color:transparent}
.fin-cart.empty b{font-size:16px}
.fin-cart.empty p{margin:4px 0 0;font-size:15px;color:var(--muted)}
.fin-cart-h{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0 8px}
.fin-cart-h b{font-size:17px}
.fin-cart-h span{font-size:14px;color:var(--muted)}
.fin-cart-l{display:grid;grid-template-columns:56px minmax(0,1fr) auto 44px;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line-soft)}
.fin-cart-l img{width:56px;height:56px;border-radius:12px;object-fit:cover;background:#f6f6f8}
.fin-cart-l .t b{display:block;font-size:15px;line-height:1.25}
.fin-cart-l .t span{display:block;font-size:13px;color:var(--muted);line-height:1.3;margin-top:2px}
.fin-cart-l .q{display:flex;align-items:center;gap:2px;background:var(--bg);border-radius:999px;padding:2px}
.fin-cart-l .q button{all:unset;cursor:pointer;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:18px;font-weight:600}
.fin-cart-l .q button:hover:not(:disabled){background:#fff}
.fin-cart-l .q button:disabled{color:#c7c7cc;cursor:not-allowed}
.fin-cart-l .q output{min-width:22px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.fin-cart-l .x{all:unset;cursor:pointer;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--muted)}
.fin-cart-l .x:hover{color:var(--err);background:var(--err-soft)}
.fin-cart-l button:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.fin-cart-sum{border-top:1px solid var(--line-soft);padding-top:12px}
.fin-cart-q .fin-cart-min{margin:10px 0 0;font-size:14px;font-weight:600;color:var(--warn)}
/* Aviso de impuestos (pago en bolívares): el IVA de la venta se paga con la última cuota */
.fin-price .fin-aviso-iva,.fin-cart-q .fin-aviso-iva{margin:10px 0 0;padding:8px 12px;border-radius:10px;background:var(--warn-soft);color:var(--ink-2);font-size:14px;line-height:1.35}
@media (max-width:560px){
  .fin-cart{padding:4px 14px 14px}
  .fin-cart-l{grid-template-columns:48px minmax(0,1fr) 44px;grid-template-areas:"img t x" "img q q";row-gap:8px}
  .fin-cart-l img{grid-area:img;width:48px;height:48px;align-self:start}
  .fin-cart-l .t{grid-area:t}.fin-cart-l .x{grid-area:x;align-self:start}
  .fin-cart-l .q{grid-area:q;justify-self:start}
  .fin-cart-l .q button{width:40px;height:40px}
}
.fin-prod{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.fin-prod-gal{position:relative;aspect-ratio:1;background:var(--gal,#f6f6f8);border-radius:18px;overflow:hidden;transition:background .3s}
.fin-prod-gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s}
.fin-prod-gal img.off{opacity:0}
.fin-prod.empty .fin-prod-gal img{opacity:.35}
.fin-prod-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:4px}
.fin-prod-dots button{width:24px;height:24px;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center}
.fin-prod-dots button::before{content:"";width:9px;height:9px;border-radius:50%;background:#c7c7cc;transition:background .2s}
.fin-prod-dots button[aria-current]::before{background:var(--ink)}
.fin-prod-dots button:focus-visible{outline:3px solid var(--accent);outline-offset:0;border-radius:50%}
.fin-prod-cfg{display:flex;flex-direction:column;gap:18px}
.fin-prod-l{display:block;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.fin-prod-l b{font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink);font-size:14px}
.fin-prod-f .fin-input{height:50px;font-size:16px;border-radius:12px}
.fin-prod-f .fin-input:disabled{background:var(--bg);color:#a1a1a6;cursor:not-allowed}
.fin-swatches{display:flex;flex-wrap:wrap;gap:14px;padding:6px}
.fin-sw{position:relative;width:30px;height:30px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);cursor:pointer}
.fin-sw input{position:absolute;inset:-7px;margin:0;opacity:0;cursor:pointer}
.fin-sw:has(input:checked)::after{content:"";position:absolute;inset:-6px;border:2px solid rgba(120,120,128,.55);border-radius:50%}
.fin-sw:has(input:focus-visible)::after{content:"";position:absolute;inset:-6px;border:3px solid var(--accent);border-radius:50%}
.fin-sw:has(input:disabled){opacity:.35;cursor:not-allowed;background:linear-gradient(135deg,transparent 46%,#86868b 46%,#86868b 54%,transparent 54%),var(--sw)}
.fin-sw:has(input:disabled) input{cursor:not-allowed}
@media (max-width:560px){
  .fin-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;border-radius:16px}
  .fin-seg-o span{border-radius:11px;padding:10px 4px;text-align:center;font-size:14px}
}
@media (max-width:760px){
  .fin-prod{grid-template-columns:1fr;gap:20px}
  .fin-prod-gal{aspect-ratio:1/.9}
  /* La foto es cuadrada y la caja más ancha que alta: «contain» la muestra entera, con aire arriba y espacio abajo para los puntos */
  .fin-prod-gal img{object-fit:contain;padding:14px 0 36px}
}

/* Tienda con foto */
.fin-store{display:flex;gap:12px;align-items:center;margin-top:10px;background:var(--bg);border-radius:var(--radius-sm);padding:8px}
.fin-store img{width:92px;height:62px;object-fit:cover;border-radius:8px;flex:none}
.fin-store div{font-size:14px;color:var(--ink-2)}
.fin-store b{display:block;color:var(--ink);font-size:15px}

/* Contadores (carga familiar, cantidad) */
.fin-steppers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:560px){.fin-steppers{grid-template-columns:1fr}}
.fin-num{display:flex;align-items:center;justify-content:space-between;border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:6px 6px 6px 14px;background:#fff}
.fin-num label{font-size:15px;font-weight:600}
.fin-num .ctl{display:flex;align-items:center;gap:4px}
.fin-num button{all:unset;cursor:pointer;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--bg);font-size:20px;font-weight:600;line-height:1}
.fin-num button:hover{background:var(--line-soft)}
.fin-num button:focus-visible{outline:3px solid var(--accent)}
.fin-num output{min-width:28px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums;font-size:17px}

/* Casillas */
.fin-check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;padding:12px 14px;border-radius:var(--radius-sm);background:var(--bg);font-size:15px;line-height:1.4}
.fin-check + .fin-check{margin-top:8px}
.fin-check input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--black)}
.fin-f.invalid .fin-check{background:var(--err-soft)}

/* Avisos informativos dentro del paso */
.fin-note{display:flex;gap:12px;align-items:flex-start;background:var(--accent-soft);border-radius:var(--radius-sm);padding:12px 14px;font-size:14px;color:var(--accent);margin:0 0 18px}
.fin-note.ok{background:var(--ok-soft);color:#11502a}
.fin-note.warn{background:var(--warn-soft);color:#6b3a00}
.fin-note svg{flex:none;margin-top:1px}
.fin-note p{margin:0}
.fin-note b{color:inherit}

/* Estimado de cuota */
.fin-est-cell{display:flex}
.fin-estimate{flex:1;border-radius:var(--radius-sm);background:var(--bg);padding:14px 16px;font-size:14px;color:var(--muted);display:flex;flex-direction:column;justify-content:center}
.fin-estimate.on{background:var(--ok-soft);color:#11502a}
.fin-estimate strong{font-size:19px;line-height:1.25;display:block;color:#0b3d1f;margin-bottom:4px}

/* ---------- Documentos ---------- */
.fin-docs-head{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:14px 16px;background:var(--bg);border-radius:var(--radius-sm)}
.fin-ring{--p:0;width:46px;height:46px;border-radius:50%;background:conic-gradient(var(--ok) calc(var(--p)*1%),var(--line-soft) 0);display:grid;place-items:center;flex:none}
.fin-ring span{width:36px;height:36px;border-radius:50%;background:var(--bg);display:grid;place-items:center;font-size:12px;font-weight:700}
.fin-docs-head b{display:block;font-size:16px}
.fin-docs-head small{color:var(--muted);font-size:14px}

.fin-doc{border:1.5px solid var(--line);border-radius:16px;padding:14px 16px;background:#fff;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:4px 14px;align-items:center;transition:border-color .15s,background .15s}
.fin-doc + .fin-doc{margin-top:10px}
.fin-doc-ic{width:44px;height:44px;border-radius:12px;background:var(--bg);display:grid;place-items:center;align-self:start}
.fin-doc-main{min-width:0}
.fin-doc-t{font-weight:600;font-size:16px;line-height:1.3}
.fin-doc-t .opt{font-weight:400;color:var(--muted);font-size:14px}
.fin-doc-meta{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fin-doc-act{display:flex;gap:8px;align-items:center;align-self:start}
.fin-doc-more{font-size:13px;margin-top:2px}
.fin-doc-more summary{cursor:pointer;color:var(--accent);font-weight:500;list-style:none;display:inline-block}
.fin-doc-more summary::-webkit-details-marker{display:none}
.fin-doc-more ul{margin:8px 0 0;padding-left:18px;color:var(--ink-2)}
.fin-doc-more li{margin:3px 0}
/* Cargado: la tarjeta es el archivo (miniatura + nombre + acciones en iconos) */
.fin-doc.done{border-color:#9fd3ad;background:#fbfefc;padding:10px 12px 10px 10px}
.fin-doc.done .fin-doc-act{align-self:center}
.fin-doc-thumb{position:relative;width:44px;height:44px;border-radius:10px;overflow:visible;flex:none}
.fin-doc-thumb img{width:44px;height:44px;object-fit:cover;border-radius:10px}
.fin-doc-thumb .pdf{width:44px;height:44px;border-radius:10px;background:#fff;color:var(--err);font-size:11px;font-weight:800;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line-soft)}
.fin-doc-thumb::after{content:"";position:absolute;right:-5px;bottom:-5px;width:18px;height:18px;border-radius:50%;border:2px solid #fff;background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}
.fin-ic-btn{all:unset;box-sizing:border-box;cursor:pointer;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);background:var(--bg);transition:background .15s,color .15s}
.fin-ic-btn:hover{background:var(--line-soft);color:var(--ink)}
.fin-ic-btn.danger:hover{background:var(--err-soft);color:var(--err)}
.fin-ic-btn:focus-within,.fin-ic-btn:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.fin-doc.bad{border-color:var(--err);background:#fffbfb}
.fin-doc .fin-err{grid-column:2/4}
.fin-doc .fin-aviso{grid-column:2/4}
.fin-doc-sub{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:22px 0 10px}
.fin-doc-sub:first-of-type{margin-top:0}
@media (max-width:560px){
  .fin-doc:not(.done){grid-template-columns:40px minmax(0,1fr)}
  .fin-doc:not(.done) .fin-doc-ic{width:40px;height:40px}
  .fin-doc:not(.done) .fin-doc-act{grid-column:1/3;margin-top:8px}
  .fin-doc:not(.done) .fin-doc-act .fin-btn{flex:1}
  .fin-doc .fin-err{grid-column:1/-1}
}

/* Selfie de ejemplo dentro de la tarjeta de identidad */
.fin-id-ex{display:flex;gap:14px;align-items:center;background:var(--bg);border-radius:var(--radius-sm);padding:10px;margin:8px 0 0}
.fin-id-ex img{width:76px;height:100px;object-fit:cover;border-radius:10px;flex:none}
.fin-id-ex ul{margin:0;padding-left:18px;font-size:14px;color:var(--ink-2)}

/* ---------- Pie del paso ---------- */
.fin-foot{display:flex;align-items:center;gap:12px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line-soft)}
.fin-foot .sp{flex:1}
.fin-foot .fin-btn.next{min-width:180px}
@media (max-width:560px){
  .fin-foot{position:sticky;bottom:0;margin:22px -18px -22px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .fin-foot .fin-btn.next{flex:1;min-width:0}
}
.fin-legal{font-size:13px;color:var(--muted);margin:16px 4px 0;text-align:center}

/* ---------- Columna lateral ---------- */
.fin-aside{position:sticky;top:84px;display:flex;flex-direction:column;gap:14px}
@media (max-width:920px){.fin-aside{display:none}}
.fin-aside-photo{display:flex;flex-direction:column;box-shadow:var(--shadow)}
.fin-aside-photo .pic{position:relative;aspect-ratio:1/.82}
.fin-aside-photo .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:var(--pad,10%);transition:opacity .4s}
.fin-aside-photo .cap{padding:0 22px 22px;color:#fff}
.fin-aside-photo .cap b{display:block;font-size:19px;line-height:1.2;margin-bottom:4px}
.fin-aside-photo .cap span{display:block;font-size:14px;line-height:1.35;color:#c7c7cc}
/* Revisión: la foto del equipo elegido, a sangre arriba y el texto sobre blanco
   (la foto trae su propio fondo de ficha; así no queda un recuadro dentro del marco) */
.fin-aside-photo.prod{background:#fff}
.fin-aside-photo.prod::before{display:none}
.fin-aside-photo.prod .pic{margin-bottom:18px}
.fin-aside-photo.prod .pic img{object-fit:cover;padding:0}
.fin-aside-photo.prod .cap{color:var(--ink)}
.fin-aside-photo.prod .cap span{color:var(--muted)}
.fin-aside-box{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.fin-aside-box h4{margin:0 0 10px;font-size:15px}
.fin-aside-pct{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.fin-aside-pct b{font-size:30px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fin-aside-pct span{color:var(--muted);font-size:14px}
.fin-aside-bar{height:8px;border-radius:8px;background:var(--line-soft);overflow:hidden}
.fin-aside-bar i{display:block;height:100%;width:0;background:var(--ok);border-radius:8px;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.fin-aside-list{list-style:none;margin:14px 0 0;padding:0;font-size:14px}
.fin-aside-list li{color:var(--muted)}
.fin-aside-list button{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:10px;padding:5px 6px;margin:0 -6px;border-radius:8px;cursor:pointer}
.fin-aside-list button:disabled{cursor:default}
.fin-aside-list li.done button:hover{background:var(--bg)}
.fin-aside-list button:focus-visible{outline:3px solid var(--accent)}
.fin-aside-list li i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);flex:none;display:grid;place-items:center;font-style:normal;font-size:11px}
.fin-aside-list li.done{color:var(--ink-2)}
.fin-aside-list li.done i{background:var(--ok);border-color:var(--ok);color:#fff}
.fin-aside-list li.done i::before{content:"✓"}
.fin-aside-list li.cur{color:var(--ink);font-weight:600}
.fin-aside-list li.cur i{border-color:var(--accent);border-width:5px}
.fin-aside-help{font-size:14px;color:var(--ink-2)}
.fin-aside-help p{margin:0 0 8px}

/* ---------- Revisión ---------- */
.fin-rev{border:1.5px solid var(--line-soft);border-radius:16px;padding:16px 18px}
.fin-rev + .fin-rev{margin-top:12px}
.fin-rev-h{display:flex;justify-content:space-between;align-items:center;margin:0 0 10px}
.fin-rev-h h3{margin:0;font-size:16px;display:flex;align-items:center;gap:8px}
.fin-rev-h h3 i{width:20px;height:20px;border-radius:50%;background:var(--ok);color:#fff;font-style:normal;font-size:11px;display:grid;place-items:center}
.fin-rev dl{display:grid;grid-template-columns:minmax(120px,40%) 1fr;gap:6px 14px;margin:0;font-size:14px}
.fin-rev dt{color:var(--muted)}
.fin-rev dd{margin:0;font-weight:500;overflow-wrap:anywhere;white-space:pre-line}
@media (max-width:560px){.fin-rev dl{grid-template-columns:1fr;gap:0}.fin-rev dd{margin-bottom:8px}}

/* ---------- Confirmación ---------- */
.fin-done{text-align:center;padding:20px 0 6px}
.fin-done-ic{width:76px;height:76px;border-radius:50%;background:var(--ok);display:grid;place-items:center;margin:0 auto 16px;animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.fin-done h2{font-size:30px;margin:0 0 8px;letter-spacing:-.015em}
.fin-done .code{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--bg);border-radius:10px;padding:8px 14px;font-size:18px;font-weight:700;margin:8px 0 18px}
.fin-next{text-align:left;max-width:520px;margin:10px auto 0;padding:0;list-style:none;counter-reset:nx}
.fin-next li{position:relative;padding:0 0 16px 44px}
.fin-next li::before{counter-increment:nx;content:counter(nx);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}
.fin-next b{display:block}
.fin-next span{color:var(--ink-2);font-size:15px;overflow-wrap:break-word}

/* ---------- Modales ---------- */
.fin-modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.fin-modal.show{display:flex;animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.fin-modal-box{background:#fff;border-radius:24px;max-width:600px;width:100%;max-height:calc(100vh - 40px);display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.25);animation:rise .25s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.fin-modal-h{display:flex;align-items:center;gap:12px;padding:20px 22px 0}
.fin-modal-h h2{margin:0;font-size:21px;flex:1;letter-spacing:-.01em}
.fin-x{all:unset;cursor:pointer;width:34px;height:34px;border-radius:50%;background:var(--bg);display:grid;place-items:center;flex:none}
.fin-x:focus-visible{outline:3px solid var(--accent)}
.fin-modal-b{padding:14px 22px;overflow:auto;font-size:15px;color:var(--ink-2)}
.fin-modal-b h3{font-size:16px;color:var(--ink);margin:18px 0 6px}
.fin-modal-b ul{padding-left:20px;margin:6px 0}
.fin-modal-b li{margin:4px 0}
.fin-modal-f{padding:14px 22px 20px;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;border-top:1px solid var(--line-soft)}
@media (max-width:560px){
  .fin-modal{padding:0;align-items:flex-end}
  .fin-modal-box{border-radius:24px 24px 0 0;max-height:92vh}
  .fin-modal-f .fin-btn{flex:1}
}
.fin-plain{background:var(--bg);border-radius:14px;padding:14px 16px;margin:0 0 6px}
.fin-plain h3{margin:0 0 6px!important}
.fin-plain ul{margin:0}
.fin-legal-h{font-size:15px!important;margin:16px 0 6px!important}
.fin-legal-read{max-height:min(38vh,320px);overflow:auto;overscroll-behavior:contain;border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:4px 14px;font-size:14px;background:#fff}
.fin-legal-read:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fin-legal-read p{font-size:14px}
.fin-legal-end{display:block;height:1px}
.fin-legal-hint{margin:8px 0 0;font-size:13px;color:var(--ink-2)}
.fin-legal-hint.ok{color:var(--ok)}
.fin-check:has(input:disabled){cursor:not-allowed;opacity:.55}
.fin-legal-full{border-top:1px solid var(--line-soft);margin-top:14px;padding-top:6px}
.fin-legal-full summary{cursor:pointer;color:var(--accent);font-weight:600;padding:8px 0}
.fin-legal-full p{font-size:14px}

/* Cámara (heredada del proyecto Autorización de Pago v10.2) */
.fin-cam .fin-modal-box{max-width:520px;background:#111;color:#fff}
.fin-cam .fin-modal-h h2{color:#fff}
.fin-cam .fin-x{background:rgba(255,255,255,.14);color:#fff}
.cam-stage{position:relative;margin:14px 22px 0;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:4/3}
.cam-stage.vertical{aspect-ratio:3/4;max-height:62vh;margin-left:auto;margin-right:auto}
.cam-stage video,.cam-stage img{width:100%;height:100%;object-fit:cover}
.cam-guide{position:absolute;inset:12% 10%;border:2px dashed rgba(255,255,255,.7);border-radius:14px;pointer-events:none}
.cam-stage.vertical .cam-guide{inset:auto 14% 8% 14%;height:30%;border-radius:10px}
.cam-count{position:absolute;inset:0;display:grid;place-items:center;font-size:84px;font-weight:700;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.cam-msg,.cam-note{font-size:14px;color:#d2d2d7;padding:12px 22px 0;margin:0;text-align:center}
.cam-actions{display:flex;gap:10px;justify-content:center;padding:14px 22px 20px}
.cam-actions .fin-btn{background:#fff;color:#111}
.cam-actions .fin-btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}

/* Toast de avance */
.fin-toast{position:fixed;left:16px;right:16px;margin:0 auto;width:fit-content;bottom:24px;transform:translateY(20px);background:var(--black);color:#fff;border-radius:999px;padding:12px 20px;font-size:15px;font-weight:500;display:flex;align-items:center;gap:10px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:120;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.fin-toast.show{opacity:1;transform:none}
.fin-toast i{width:22px;height:22px;border-radius:50%;background:var(--ok);display:grid;place-items:center;font-style:normal;font-size:12px;flex:none}
@media (max-width:560px){.fin-toast{bottom:92px}}

/* Barra de demostración (solo con ?demo=1) */

/* Reanudar borrador */
.fin-resume{display:flex;gap:14px;align-items:center;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;margin:0 0 22px}
.fin-resume p{margin:0;flex:1;font-size:15px}
@media (max-width:560px){.fin-resume{flex-direction:column;align-items:stretch}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.fin-step-h:focus{outline:none}
a.fin-btn{text-decoration:none}
@media (max-width:560px){
  .fin-top-in{padding:10px 16px;gap:10px}
  .fin-top-word,.fin-help-more,.fin-save #saveText{display:none}
  .fin-top-title{padding-left:10px}
  .fin-logo{height:28px}
  /* Con «Iniciar sesión» a la derecha: ¿Dudas? pasa a ícono de WhatsApp y el logo se achica un poco */
  .fin-help-txt{display:none}
  .fin-help-ic{display:block}
  .fin-help{flex:none;width:36px;height:36px;justify-content:center;border-radius:50%;background:var(--bg);color:var(--ink)}
  .fin-login{flex:none;padding:0 10px;gap:5px;font-size:13px;min-height:36px}
  .fin-login svg{width:14px;height:14px}
  .fin-partner{font-size:15px}
  .fin-partner-logo{width:92px;height:26px}
  .fin-wrap{padding:18px 16px 60px}
}
/* Tabletas: con «Iniciar sesión» la barra no entra entera; se quitan las palabras que sobran */
@media (max-width:900px){
  .fin-top-word,.fin-help-more,.fin-save #saveText{display:none}
}
/* Teléfonos: entran logo, marca de Interpay, ayuda e «Iniciar sesión» sin desbordar (de 320 px en adelante) */
@media (max-width:440px){
  .fin-top-in{gap:8px}
  .fin-logo{height:24px}
  .fin-top-title{padding-left:8px;gap:8px}
  .fin-partner-logo{width:16px;height:26px;background-image:var(--ip-isotipo)}   /* en el teléfono, solo la P (antes, la baldosa sin la palabra) */
  .fin-help{width:34px;height:34px}
  .fin-login{padding:0 9px}
}
@media (max-width:340px){
  .fin-logo{height:21px}
  .fin-top-in{gap:6px}
}

/* ---------- Producción (interpay-formulario) ---------- */
/* Carga inicial y error con reintento */
.fin-boot{min-height:50vh;display:grid;place-items:center;text-align:center;padding:40px 16px;color:var(--ink-2)}
.fin-boot .spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--line-soft);border-top-color:var(--ink);animation:fin-spin .8s linear infinite;margin:0 auto 14px}
@keyframes fin-spin{to{transform:rotate(360deg)}}
.fin-boot b{display:block;color:var(--ink);font-size:18px;margin-bottom:6px}
.fin-boot .fin-btn{margin-top:14px}
/* Honeypot: invisible para personas, visible para bots */
.fin-hp{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}
/* Subida de un documento en curso */
.fin-up{flex:1 1 100%;height:6px;border-radius:999px;background:var(--line-soft);overflow:hidden;margin-top:8px}
.fin-up i{display:block;height:100%;width:0;background:var(--ink);transition:width .2s}
.fin-doc.uploading{opacity:.85}
/* Mientras sube o se revisa no hay ✓ en la miniatura (aún no está aceptado) */
.fin-doc.uploading .fin-doc-thumb::after{display:none}
/* «Leyendo tu cédula…»: indicador pequeño junto al texto y barra que late mientras el servidor revisa */
.fin-mini-spin{display:inline-block;width:11px;height:11px;border-radius:50%;border:2px solid var(--line-soft);border-top-color:var(--ink);animation:fin-spin .8s linear infinite;vertical-align:-1px;margin-right:6px}
.fin-up.revisando i{animation:fin-late 1.4s ease-in-out infinite}
@keyframes fin-late{50%{opacity:.45}}
.fin-doc-hint{display:block;margin-top:2px}
.fin-doc-thumb .img{width:44px;height:44px;border-radius:10px;background:#fff;color:var(--ink-2);font-size:11px;font-weight:800;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line-soft)}
/* Consejos de la selfie siempre visibles (sin foto de ejemplo de una persona real) */
.fin-id-ex svg{flex:none;color:var(--ink-2)}
.fin-btn[aria-busy="true"]{opacity:.7;pointer-events:none}