/* ERTO v4.4 — estilos de compra, pago exitoso y factura */
:root{
  --azul:#042536; --marfil:#F5EFEC; --jade:#0B7268; --jade-2:#095E56; --jade-claro:#4DB8AA; --jade-s:#E3F1EF;
  --tinta:#042536; --tinta-2:#56646E; --linea:#E2D9D3; --linea-fuerte:#C9BDB5; --blanco:#FFFFFF;
  --rojo:#B42318; --rojo-s:#FBEAE8; --ambar:#85620A; --ambar-s:#FAF3E0;
  --f:'Figtree',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; --m:'IBM Plex Mono',ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font:16px/1.55 var(--f);color:var(--tinta);background:var(--marfil);min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
a{color:var(--jade)}
.barra{background:var(--azul);padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.barra img{height:26px;width:auto;display:block}
.barra a.volver{color:rgba(245,239,236,.75);font-size:14px;text-decoration:none}
.barra a.volver:hover{color:var(--marfil)}
.contenido{flex:1;width:100%;max-width:980px;margin:0 auto;padding:40px 16px 56px}
.estrecho{max-width:640px}
.eyebrow{font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--jade);margin:0 0 8px}
h1{font-size:clamp(28px,4vw,36px);line-height:1.15;font-weight:800;letter-spacing:-.015em;margin:0 0 10px;text-wrap:balance}
h2{font-size:19px;margin:0 0 12px}
.entrada{color:var(--tinta-2);margin:0 0 28px;max-width:62ch}
.tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:14px;padding:26px}
.aviso{border-radius:10px;padding:12px 14px;font-size:14.5px;margin:0 0 20px;border-left:4px solid}
.aviso.prueba{background:var(--ambar-s);border-color:var(--ambar);color:#5A4307}
.aviso.error{background:var(--rojo-s);border-color:var(--rojo);color:#7A1810}
.aviso.ok{background:var(--jade-s);border-color:var(--jade);color:#07463F}
.aviso.info{background:#EEF3F6;border-color:#2C5670;color:#1E3D50}

/* Paquetes */
.paquetes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:26px}
.paq{position:relative;display:block;cursor:pointer;background:var(--blanco);border:1.5px solid var(--linea);border-radius:14px;padding:20px 20px 18px}
.paq input{position:absolute;opacity:0;pointer-events:none}
.paq:hover{border-color:var(--linea-fuerte)}
.paq.activo{border:2px solid var(--jade);padding:19.5px 19.5px 17.5px;box-shadow:0 8px 24px rgba(4,37,54,.07)}
.paq:has(input:focus-visible){outline:2px solid var(--jade);outline-offset:3px}
.paq .nom{padding-right:30px;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--jade);display:flex;justify-content:space-between;align-items:center}
.paq .nom em{font-style:normal;letter-spacing:.02em;text-transform:none;background:var(--jade-s);padding:3px 9px;border-radius:999px;font-size:12px}
.paq .precio{font:500 34px/1.1 var(--m);margin:14px 0 2px}
.paq .precio small{font:500 13px var(--f);color:var(--tinta-2);margin-left:4px}
.paq .det{font-size:14px;color:var(--tinta-2)}
.paq .con-iva{font-size:13px;color:var(--tinta-2);margin-top:8px;padding-top:8px;border-top:1px solid var(--linea)}
.paq .marca{position:absolute;top:16px;right:16px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--linea-fuerte);background:var(--blanco)}
.paq.activo .marca{border-color:var(--jade);background:radial-gradient(circle,var(--jade) 0 5px,var(--blanco) 5.5px)}


.rejilla{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;align-items:start}
label.campo{display:block;font-weight:600;font-size:14px;margin:0 0 6px}
.ayuda{font-size:13px;color:var(--tinta-2);margin:6px 0 0}
input[type=email],input[type=text],select{width:100%;font:16px var(--f);color:var(--tinta);background:var(--blanco);border:1.5px solid var(--linea-fuerte);border-radius:10px;padding:12px 14px}
input:focus,select:focus{outline:2px solid var(--jade);outline-offset:1px;border-color:var(--jade)}
input.mono{font-family:var(--m);text-transform:uppercase;letter-spacing:.04em}
.grupo{margin-bottom:18px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;margin:6px 0 4px}
.check input{width:18px;height:18px;margin-top:3px;accent-color:var(--jade);flex:none}
.resumen{width:100%;border-collapse:collapse;font-size:15px;margin:4px 0 18px}
.resumen td{padding:9px 0;border-bottom:1px solid var(--linea)}
.resumen td:last-child{text-align:right;font-family:var(--m)}
.resumen tr.total td{border-bottom:0;font-weight:700;font-size:18px;padding-top:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 16px var(--f);border-radius:10px;padding:14px 20px;text-decoration:none;cursor:pointer;border:0}
.btn.primario{background:var(--jade);color:#fff;width:100%}
.btn.primario:hover{background:var(--jade-2)}
.btn.primario:disabled{background:#B9AEA7;cursor:not-allowed}
.btn.secundario{background:var(--blanco);color:var(--tinta);border:1.5px solid var(--linea-fuerte)}
.btn:focus-visible{outline:2px solid var(--jade);outline-offset:2px}
.acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.acciones .btn{flex:1 1 200px}
.seguro{display:flex;gap:8px;align-items:center;justify-content:center;font-size:13px;color:var(--tinta-2);margin-top:12px}
.nota{font-size:13.5px;color:var(--tinta-2);margin-top:16px}
.cifra{font:500 44px/1 var(--m);color:var(--jade);margin:10px 0 4px}
.datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin:18px 0 22px;font-size:14.5px}
.datos div span{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-2)}
.datos div b{font-family:var(--m);font-weight:500}
.cargando{display:flex;gap:12px;align-items:center;color:var(--tinta-2)}
.giro{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--linea);border-top-color:var(--jade);animation:g 1s linear infinite}
@keyframes g{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.giro{animation:none}}
[hidden]{display:none!important}
.pie{text-align:center;font-size:12.5px;color:var(--tinta-2);padding:18px 16px 28px}
.pie a{color:var(--tinta-2)}
@media (max-width:820px){
  .paquetes{grid-template-columns:1fr}
  .rejilla{grid-template-columns:1fr}
}
@media (max-width:520px){
  .dos,.datos{grid-template-columns:1fr}
  .tarjeta{padding:20px}
}