/* =========================================================
MiContratoCo — SISTEMA VISUAL
Lo comparten todas las páginas. Antes estaba copiado cinco
veces y cada página se iba por su lado.
Los anchos cambian por página con --ancho en el .
========================================================= */
:root{
--ink:#1A1714; --ink2:#4A443C; --ink3:#7A736A;
--paper:#FCFBF8; --rule:#E2DED4; --rule-soft:#F0EDE5;
--gold:#B8892B; --goldSoft:#F7EFDD; --goldDark:#A2781F;
/* Dorado vivo: solo para el boton principal. Texto oscuro encima, que es
lo unico que pasa AA sobre un amarillo (blanco sobre dorado daba 3.16). */
--goldVivo:#D8A43A;
--red:#A32B22; --redSoft:#FBECEA;
--green:#1E6B57; --greenSoft:#E7F1EE;
--line:#2A251E; --line2:#3A342B;
/* Superficies oscuras. Antes el fondo salía de --ink y por eso no se
podía cambiar el fondo sin cambiar el color del texto. */
--fondo:#100E0B; --panel:#1F1B16;
/* Texto sobre fondo oscuro. Conservan el nombre viejo para no tocar
trece páginas; el matiz ya no es azul sino gris cálido. */
--azul:#A8A096; --azul2:#8E867B;
/* Georgia sostiene la identidad de documento legal. Para interfaz,
la fuente del sistema: en Mac e iOS es SF Pro, en Android Roboto,
en Windows Segoe. Todas mejores que cualquier cosa que podamos
cargar, y sin pedir un solo byte a la red. */
--serif:Georgia,"Iowan Old Style","Times New Roman",serif;
--sans:-apple-system,BlinkMacSystemFont,"SF Pro Text",ui-sans-serif,system-ui,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
/* Escala tipográfica. Antes cada pantalla inventaba sus tamaños y
por eso nada rimaba con nada. */
--t-micro:11px; --t-mini:12.5px; --t-chico:13.5px;
--t-base:15px; --t-medio:17px; --t-grande:21px;
--t-titulo:27px; --t-hero:34px; --t-display:52px;
/* Ritmo vertical: múltiplos de 4 */
--e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px;
--ancho:1000px;
/* Curvas y tiempos. Son los de iOS: salida rápida, entrada suave.
Nada dura más de 300ms porque más allá se siente lento. */
--sal:cubic-bezier(.32,.72,0,1); /* deslizamientos y aparición */
--resorte:cubic-bezier(.34,1.56,.64,1); /* rebote leve al confirmar */
--rapido:130ms;
--medio:220ms;
--lento:300ms;
/* Área mínima que un dedo acierta sin fallar. Regla de Apple. */
--tap:44px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--fondo);color:var(--ink);font-family:var(--sans);font-size:var(--t-base);line-height:1.55;
letter-spacing:-.006em;
-webkit-text-size-adjust:100%;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
overscroll-behavior-y:none}
/* Las cifras se leen mejor alineadas: precios, cédulas, fechas */
.cifra,input[inputmode=numeric],.kpi .big,td,th{font-variant-numeric:tabular-nums}
/* Quita el retardo de 300ms al tocar y el destello gris de iOS: la
respuesta la damos nosotros, en el mismo instante del toque. */
a,button,input,select,textarea,label,[role=button],.stepchip,.puerta,.consent{
touch-action:manipulation;
-webkit-tap-highlight-color:transparent}
a{color:var(--gold)}
img{max-width:100%;height:auto}
/* ---------- marco ---------- */
.topbar{border-bottom:1px solid var(--line);background:var(--fondo)}
.topbar.pega{position:sticky;top:0;z-index:40}
.topbar-in{max-width:var(--ancho);margin:0 auto;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{font-family:var(--serif);font-size:19px;color:var(--paper);text-decoration:none}
.brand span{color:var(--gold)}
.eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--azul)}
/* Entrada a la cuenta: a la derecha de la barra, en todas las páginas.
Antes era una cuarta tarjeta y competía con los productos que venden. */
.topbar-fin{display:flex;align-items:center;gap:14px;margin-left:auto}
.topbar-fin .eyebrow{display:none}
@media(min-width:720px){.topbar-fin .eyebrow{display:inline}}
.acc{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;
border:1px solid var(--line2);border-radius:100px;background:transparent;
color:var(--paper);font-family:var(--sans);font-size:var(--t-mini);font-weight:600;
text-decoration:none;white-space:nowrap;
transition:background var(--rapido) ease,border-color var(--rapido) ease}
.acc:hover{background:#1B1712;border-color:var(--azul2);color:var(--paper)}
.acc:active{transform:scale(.97)}
.acc:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.acc svg{width:14px;height:14px;flex:none;opacity:.8}
.wrap{max-width:var(--ancho);margin:0 auto;padding:0 16px 60px}
/* Salto al contenido, para teclado y lectores de pantalla */
.saltar{position:absolute;left:-9999px;top:0;background:var(--gold);color:#fff;padding:11px 16px;z-index:100;border-radius:0 0 3px 0}
.saltar:focus{left:0}
/* ---------- encabezado de página ---------- */
.masthead{padding:30px 0 0}
.masthead h1{color:var(--paper);font-family:var(--serif);font-weight:400;font-size:var(--t-titulo);
line-height:1.15;letter-spacing:-.018em;margin:var(--e3) 0 var(--e2);max-width:22ch}
.masthead p{color:var(--azul);font-size:var(--t-chico);margin:0;max-width:58ch;line-height:1.6}
@media(min-width:600px){.masthead h1{font-size:var(--t-hero)}}
/* ---------- tarjetas ---------- */
.card{background:#fff;border-radius:18px;padding:var(--e5) 22px;margin-bottom:var(--e3);
box-shadow:0 1px 2px rgba(16,14,11,.06), 0 10px 30px rgba(16,14,11,.06)}
.panel{background:#fff;border-radius:18px;padding:var(--e5) 22px;
box-shadow:0 1px 2px rgba(16,14,11,.06), 0 10px 30px rgba(16,14,11,.06)}
.panel-head{margin:0 0 18px}
.panel-num{font-size:10.5px;font-weight:700;letter-spacing:.2em;color:var(--gold);display:block;margin-bottom:6px}
.panel-head h2{font-family:var(--serif);font-weight:400;font-size:23px;margin:0 0 5px}
.panel-head p{margin:0;font-size:13.5px;color:var(--ink2)}
/* ---------- formularios ---------- */
.grid2{display:grid;grid-template-columns:1fr;gap:0 14px}
@media(min-width:560px){.grid2.split{grid-template-columns:1fr 1fr}}
.field{display:block;margin-bottom:var(--e4)}
.field:last-child{margin-bottom:0}
.field label,label.lab{display:block;font-size:var(--t-mini);font-weight:600;color:var(--ink2);
margin-bottom:var(--e2);letter-spacing:-.005em}
.field .hint,.hint{font-size:11.5px;color:var(--ink3);margin-top:5px;line-height:1.45;font-weight:400}
input[type=text],input[type=number],input[type=date],input[type=tel],input[type=email],select,textarea{
width:100%;border:1px solid var(--rule);border-radius:3px;padding:13px 12px;
font-size:16px;font-family:inherit;color:var(--ink);background:var(--paper);
min-width:0;max-width:100%;
}
/* Safari en iOS ignora el ancho de los campos de fecha sin esto */
input[type=date]{-webkit-appearance:none;appearance:none;display:block;text-align:left;height:48px;line-height:normal}
input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
input[type=date]::-webkit-calendar-picker-indicator{margin-left:auto}
textarea{min-height:86px;resize:vertical;line-height:1.5}
input[type=text],input[type=number],input[type=date],input[type=tel],input[type=email],select,textarea{
border-radius:8px;min-height:var(--tap);
transition:border-color var(--rapido) ease, background var(--rapido) ease, box-shadow var(--rapido) ease}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);background:#fff;
box-shadow:0 0 0 3px rgba(184,137,43,.16)}
select{-webkit-appearance:none;appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.money-in{position:relative}
.money-in span{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--ink3);font-size:15px}
.money-in input{padding-left:26px}
/* ---------- botones ---------- */
.btn{border:0;border-radius:10px;padding:15px;font-size:15px;font-weight:700;font-family:inherit;
cursor:pointer;text-align:center;text-decoration:none;display:inline-block;line-height:1.3;
min-height:var(--tap);
transition:transform var(--rapido) var(--sal), opacity var(--rapido) linear, background var(--medio) ease;
will-change:transform}
/* El botón se hunde apenas se toca, sin esperar a que se suelte */
.btn:active:not([disabled]){transform:scale(.97);opacity:.9}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn[disabled]{background:#CFC9C0;color:#fff;cursor:not-allowed;opacity:.75;transform:none}
/* Estado ocupado: el punto que late dice "sigue trabajando" */
.btn.cargando{position:relative;pointer-events:none}
.btn.cargando::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
background:currentColor;margin-left:8px;vertical-align:middle;animation:latido 1s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.btn-bloque{display:block;width:100%}
.btn-main{background:var(--paper);color:var(--ink);flex:1}
.btn-main:hover{background:#fff}
.btn-ghost{background:transparent;color:var(--azul);border:1px solid var(--line);padding:15px 18px}
.btn-ghost:hover{color:var(--paper);border-color:var(--line2)}
.btn-gold{background:var(--goldVivo);color:var(--ink)}
.btn-gold:hover{background:#E8B44A;color:var(--ink)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:#27221B}
.btn-line{background:transparent;color:var(--azul);border:1px solid var(--line)}
.btn-line:hover{color:var(--paper);border-color:var(--line2)}
.nav{display:flex;gap:10px;margin-top:18px;align-items:center}
/* ---------- alertas legales ---------- */
.alerts{margin:16px 0 0;display:grid;gap:10px}
.alert{border-left:3px solid;border-radius:0 8px 8px 0;padding:14px 16px;font-size:13.5px;line-height:1.5;
animation:entra var(--lento) var(--sal) both}
@keyframes entra{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.alert h4{margin:0 0 4px;font-size:14px}
.alert p{margin:0}
.alert .law{display:inline-block;margin-top:8px;font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;opacity:.75}
.alert.block{background:var(--redSoft);border-color:var(--red);color:#6E241E}
.alert.warn{background:var(--goldSoft);border-color:var(--gold);color:#6A4E14}
.alert.ok{background:var(--greenSoft);border-color:var(--green);color:#12503F}
/* Aviso sobre fondo claro (dentro de una tarjeta blanca) */
.aviso{border-left:3px solid var(--gold);background:var(--goldSoft);padding:13px 15px;font-size:13px;
color:var(--ink2);border-radius:0 8px 8px 0;margin-bottom:14px;line-height:1.55}
.aviso b{color:var(--ink)}
.aviso.rojo{border-color:var(--red);background:var(--redSoft);color:#6E241E}
.aviso.rojo b{color:#6E241E}
.aviso.verde{border-color:var(--green);background:var(--greenSoft);color:#12503F}
.aviso.verde b{color:#12503F}
/* Nota sobre fondo oscuro (fuera de las tarjetas) */
.disclaimer{margin-top:20px;padding:16px 18px;border:1px solid var(--line);border-radius:10px;
font-size:12px;color:var(--azul2);line-height:1.6}
.disclaimer b{color:var(--azul)}
.disclaimer a{color:var(--azul)}
/* ---------- secciones plegables ----------
Una pantalla con todo abierto a la vez no se lee: se escanea y se
abandona. Cada sección se abre cuando toca. */
.seccion{background:#fff;border-radius:14px;margin-bottom:var(--e3);overflow:hidden;
box-shadow:0 1px 2px rgba(20,31,51,.05), 0 8px 24px rgba(20,31,51,.05)}
.seccion-cab{display:flex;align-items:center;gap:var(--e3);width:100%;border:0;background:none;
padding:var(--e4) 20px;cursor:pointer;text-align:left;font-family:inherit;min-height:var(--tap);
transition:background var(--medio) ease}
.seccion-cab:hover{background:#FBFAF7}
.seccion-cab:active{background:#F5F3EE}
.seccion-cab .ic{flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:var(--goldSoft);
color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.seccion-cab .tx{flex:1 1 auto;min-width:0}
.seccion-cab .tx b{display:block;font-family:var(--serif);font-weight:400;font-size:var(--t-medio);
color:var(--ink);letter-spacing:-.01em;line-height:1.3}
.seccion-cab .tx span{display:block;font-size:var(--t-mini);color:var(--ink3);margin-top:2px;line-height:1.45}
.seccion-cab .fl{flex:0 0 auto;width:9px;height:9px;border-right:2px solid var(--ink3);
border-bottom:2px solid var(--ink3);transform:rotate(45deg);margin-right:var(--e1);
transition:transform var(--medio) var(--sal)}
.seccion.abierta .seccion-cab .fl{transform:rotate(-135deg)}
.seccion-cuerpo{display:none;padding:0 20px var(--e5);border-top:1px solid var(--rule-soft)}
.seccion.abierta .seccion-cuerpo{display:block;animation:despliega var(--lento) var(--sal) both}
@keyframes despliega{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.seccion-cuerpo>:first-child{margin-top:var(--e4)}
/* estado al lado del título */
.pastilla{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
padding:5px 10px;border-radius:100px;white-space:nowrap}
.pastilla.ok{background:var(--greenSoft);color:var(--green)}
.pastilla.pend{background:var(--goldSoft);color:#6A4E14}
.pastilla.off{background:#F2EFEA;color:#6B645A}
/* ---------- barra de modo revisión ----------
Visible a propósito: quien revisa tiene que saber que está viendo
el documento completo sin pagar, y no creer que es una falla. */
/* Aviso de "pendiente de revisión por un abogado". Estaba escrito a
mano dentro de insolvencia.html; los artículos generados lo necesitan
igual, así que vive aquí y no se duplica.
No confundir con .revision, que es el modo de revisión del contrato. */
.revisando{background:#3A2A12;border:1px solid #6A4E14;border-radius:10px;padding:13px 16px;
margin:var(--e4) 0 0;display:flex;gap:var(--e3);align-items:flex-start}
.revisando .marca{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:#2A1E0C;background:#E0B450;padding:4px 9px;border-radius:3px;margin-top:1px}
.revisando .txt{font-size:var(--t-mini);color:#E6D4AC;line-height:1.55}
.revision{background:#2E2820;border:1px solid #4A4237;border-radius:10px;
padding:14px 17px;margin:18px 0 0;display:flex;gap:13px;align-items:flex-start}
.revision .marca{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:#100E0B;background:var(--gold);
padding:4px 9px;border-radius:3px;margin-top:1px}
.revision .txt{font-size:12.5px;color:#D6CFC4;line-height:1.55}
.revision .txt b{color:var(--paper)}
.revision .txt a{color:var(--gold)}
/* ---------- estado vacío ---------- */
.vacio{background:#fff;border-radius:12px;padding:38px 26px;text-align:center;color:var(--ink2);font-size:14px;line-height:1.6}
.vacio b{display:block;font-family:var(--serif);font-weight:400;font-size:21px;color:var(--ink);margin-bottom:9px}
/* ---------- el documento ---------- */
.hoja{background:#fff;border-radius:12px;padding:34px 30px;font-family:var(--serif);
font-size:15px;line-height:1.75;color:#262119}
.sheet{background:#fff;border-radius:12px;position:relative;overflow:hidden}
.sheet-body{padding:30px 26px;font-family:var(--serif);font-size:14.5px;line-height:1.72;
color:#262119;max-height:600px;overflow-y:auto;
-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scroll-behavior:smooth}
@media(max-width:999px){.sheet-body{max-height:400px}}
.hoja h3,.sheet-body h3{text-align:center;font-size:15px;font-weight:400;letter-spacing:.04em;
text-transform:uppercase;margin:0 0 20px;line-height:1.45}
.hoja .cl,.sheet-body .cl{margin:0 0 15px;text-align:justify;hyphens:auto}
.hoja .cl b,.sheet-body .cl b{font-weight:700}
/* Campo sin llenar: resaltado en pantalla para que se note */
.hoja em,.sheet-body em{color:#8A6A20;font-style:normal;background:var(--goldSoft);padding:0 3px;border-radius:2px}
.emptyprev{padding:38px 26px;text-align:center;color:var(--ink3);font-size:13.5px}
/* Título de cláusula en línea propia (legal design, deploy 19) */
.hoja .clt,.sheet-body .clt,.vista-previa .clt{margin:22px 0 5px;font-weight:700;letter-spacing:.03em;
line-height:1.45;break-after:avoid;page-break-after:avoid}
/* Ficha técnica: resumen en la primera hoja. Mismos tamaños del documento. */
.ficha{width:100%;border-collapse:collapse;margin:0 0 6px;font-size:13.5px;line-height:1.5}
.ficha caption{text-align:left;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--ink3);padding:0 0 7px}
.ficha th,.ficha td{border:1px solid var(--rule);padding:7px 10px;vertical-align:top;text-align:left}
.ficha th{width:32%;background:var(--paper);font-weight:700}
.ficha tr{break-inside:avoid;page-break-inside:avoid}
.hoja .nota,.sheet-body .nota,.vista-previa .nota{font-size:12.5px;line-height:1.5;color:var(--ink3);margin:0 0 24px}
/* Vista previa bloqueada: se difumina el bloque entero y no cada
párrafo. Con un filtro por párrafo, Safari dejaba costuras de color
entre cláusulas. */
.borroso{filter:blur(3.2px);user-select:none;pointer-events:none}
/* ---------- firmas ---------- */
.firmas{margin-top:44px;display:grid;grid-template-columns:1fr;gap:34px}
@media(min-width:620px){.firmas{grid-template-columns:1fr 1fr}}
.firma .raya{border-top:1px solid #262119;margin-bottom:7px}
.firma .rol{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink3);font-family:var(--sans);margin-bottom:3px}
.firma .datos{font-size:13.5px;line-height:1.5}
.firma{display:flex;gap:14px;align-items:flex-end}
.firma-datos{flex:1 1 auto;min-width:0}
/* Recuadro de huella: solo al imprimir. En pantalla no aporta. */
.firma .huella{display:none}
/* ---------- pie ---------- */
.foot{border-top:1px solid var(--line);margin-top:30px;padding:16px 0 0;font-size:11.5px;
color:var(--azul2);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}
.foot a{color:var(--azul)}
/* ---------- aviso flotante del núcleo ----------
Lo pinta mcc-core.js (acceso de revisión). Vive aquí porque puede
aparecer en cualquier página. */
.aviso-flotante{position:fixed;left:50%;bottom:calc(var(--e4) + env(safe-area-inset-bottom,0px));
transform:translateX(-50%);z-index:60;max-width:min(520px,calc(100% - 32px));
background:var(--panel);color:var(--paper);border:1px solid var(--line2);border-radius:10px;
padding:var(--e3) var(--e4);font-size:var(--t-chico);line-height:1.5;
box-shadow:0 10px 30px rgba(0,0,0,.35);animation:entra var(--medio) var(--sal) both}
.aviso-flotante.mal{background:var(--redSoft);color:#6E241E;border-color:#E7C3BF}
/* ---------- casilla de autorización (sobre tarjeta blanca) ----------
contrato.html e insolvencia.html traen su propia variante; esta es
la base compartida para las páginas nuevas. */
.consent{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--rule);border-radius:8px;
padding:13px 14px;margin:var(--e1) 0 var(--e4);background:var(--paper);cursor:pointer;min-height:var(--tap);
transition:border-color var(--medio) ease, background var(--medio) ease}
.consent.on{border-color:var(--green);background:var(--greenSoft)}
.consent input{margin:1px 0 0;flex:0 0 auto;width:20px;height:20px;accent-color:var(--green)}
.consent span{font-size:var(--t-mini);line-height:1.5;color:var(--ink2)}
.consent a{color:var(--goldDark)}
/* Variante sobre panel oscuro (recordatorios en gracias.html). Los
mismos colores que la de insolvencia.html, ya en el sistema. */
.consent.oscuro{border-color:var(--line);background:#1A1714}
.consent.oscuro.on{border-color:var(--green);background:#16211C}
.consent.oscuro span{color:var(--azul)}
.consent.oscuro a{color:var(--gold)}
/* ---------- ventana modal ----------