/* ════════════════════════════════════════════════
ALTA VISIBILIDAD — sistema de diseño compartido
TuSalarioTuDerecho · Innova Abogados Quindío
Amarillo señalización · Negro carbón · Papel nómina
════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box;}
/* ═══════════════════════════════════════════════════════════════════
«SU COPIA» · repaleteado del 17 de agosto de 2026
El sitio dejó de ser solo de obra pública y pasó a ser de derecho
laboral para cualquier trabajador. El amarillo de señalización y las
cintas de peligro contaban una historia de construcción, y esa
historia dejaba fuera a la empleada doméstica, al vigilante y al
mesero.
El amarillo no se tira —es lo único que la gente ya le reconoce al
despacho— sino que cambia de significado: en Colombia la liquidación
se firma por triplicado, blanco para la empresa y AMARILLO para el
trabajador, y a esta gente nunca le dieron su copia. Mismo color,
otro mundo, y le sirve a todos los oficios.
Los NOMBRES de las variables no cambian a propósito. Cambiando solo
los valores, la paleta nueva llega a las setecientas y pico de reglas
de esta hoja —calculadora, Radar, blog, cuestionario— sin tocar una
sola de ellas y sin arriesgar ninguna regresión.
═══════════════════════════════════════════════════════════════════ */
:root{
--ama:#FFD200; /* la copia amarilla: la del trabajador */
--ama-hover:#F2C400;
--negro:#14120C; /* tinta */
--negro-2:#26231A;
--blanco:#FBF9F3; /* blanco de papel, no de pantalla */
--papel:#EFEBDD; /* el papel de un formato de carbón */
--papel-2:#E4DFCE;
--tinta:#14120C;
--gris:#5E5A4E; /* el gris del carbón */
--gris-2:#8A8574;
--linea:#CFC9B4;
--rojo:#B8321E; /* rojo de sello de caucho, apagado a propósito */
--rojo-dk:#8F2415;
--verde:#1D6B3C; /* el visto bueno de un renglón saldado */
--wa:#1FAF52;
--ocre:#5D5100; /* amarillo legible como texto sobre claro */
--display:'Anton',impact,sans-serif;
--cond:'Barlow Condensed',sans-serif;
--body:'Barlow',system-ui,sans-serif;
/* Se conserva para la señal de la calculadora, que sigue siendo cinta.
Los separadores entre secciones ya no la usan: son troquelado. */
--stripe:repeating-linear-gradient(-45deg,var(--negro) 0 14px,var(--ama) 14px 28px);
}
html{scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}
body{background:var(--papel);color:var(--tinta);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
button{font-family:inherit;cursor:pointer;}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px;}
@media(min-width:768px){.wrap{padding:0 40px;}}
/* Utilidades tipográficas */
.display{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.95;letter-spacing:.5px;}
.cond{font-family:var(--cond);text-transform:uppercase;letter-spacing:1px;}
/* Accesibilidad */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--negro);color:var(--ama);padding:12px 20px;z-index:999;font-weight:700;}
.skip-link:focus{left:12px;top:12px;}
:focus-visible{outline:3px solid var(--negro);outline-offset:3px;}
/* Contorno de foco sobre superficies oscuras. Antes colgaba de .s-dark, clase que no
existe en ningun HTML ni JS, asi que el foco era invisible en todo lo negro.
El outline se dibuja FUERA del elemento: manda el fondo del contenedor. */
.drawer :focus-visible,footer.pie :focus-visible,.proceso :focus-visible,.cifras :focus-visible,.radar-form :focus-visible,.calc-head :focus-visible{outline-color:var(--ama);}
/* ════ FRANJA DE OBRA (divisor) — cinta-barrera: rayas en desplazamiento lento (solo desktop) ════ */
/* El separador entre secciones era una cinta de peligro que se movía. Ahora
es el borde troquelado de un talonario: la línea por donde se arranca la
copia. Dice lo mismo —«aquí se corta»— sin decir «obra», y va quieto, que
en una página que la gente lee en el bus es mejor. */
.hazard{height:11px;background:var(--papel);border-top:2px solid var(--negro);border-bottom:2px solid var(--negro);position:relative;overflow:hidden;}
.hazard::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 50% 50%,var(--negro) 0 2px,transparent 2.2px);background-size:11px 11px;background-repeat:repeat-x;background-position:center;opacity:.5;}
.hazard.oscura{background:var(--negro);}
.hazard.oscura::before{background-image:radial-gradient(circle at 50% 50%,var(--papel) 0 2px,transparent 2.2px);opacity:.42;}
/* ════ HEADER ════ */
/* La barra era amarilla. Ahora es tinta: el papel amarillo es la copia del
trabajador y va en el contenido, no en el mueble. Además deja el amarillo
libre para lo único que tiene que gritar, que son los botones. */
header.top{position:sticky;top:0;z-index:100;background:var(--negro);border-bottom:3px solid var(--ama);}
.top-in{display:flex;align-items:center;gap:16px;height:64px;}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:1;min-width:0;}
.logo-badge{width:38px;height:38px;flex-shrink:0;background:transparent;display:grid;place-items:center;}
.logo-txt{line-height:1;min-width:0;}
.logo-l1{display:block;font-family:var(--display);font-size:17px;letter-spacing:.5px;color:var(--papel);text-transform:uppercase;white-space:nowrap;}
.logo-l1 span{background:var(--ama);color:var(--negro);padding:0 5px;}
.logo-l2{display:block;font-family:var(--cond);font-size:10.5px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:rgba(239,235,221,.6);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
nav.main-nav{display:none;gap:4px;align-items:center;}
nav.main-nav a{font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:1.2px;text-transform:uppercase;text-decoration:none;color:rgba(239,235,221,.85);padding:8px 12px;border:2px solid transparent;transition:border-color .15s,color .15s;}
nav.main-nav a:hover,nav.main-nav a[aria-current="page"]{border-color:var(--ama);color:var(--ama);}
.nav-wa{display:none;align-items:center;gap:8px;background:var(--ama);color:var(--negro);font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:1.2px;text-transform:uppercase;text-decoration:none;padding:11px 18px;transition:transform .12s;}
.nav-wa:hover{transform:translateY(-2px);}
/* 1220 y no 1140 desde el 17-ago-2026: el menú pasó de cinco enlaces a seis
al entrar la Calculadora, y a 1140 el sexto se montaba sobre el botón de
WhatsApp. Por debajo de este ancho manda la hamburguesa, que los lleva
todos. */
@media(min-width:1220px){nav.main-nav{display:flex;}.nav-wa{display:inline-flex;}}
.burger{display:grid;place-items:center;width:48px;height:48px;background:var(--ama);border:none;border-radius:0;}
.burger span{display:block;width:20px;height:2.5px;background:var(--negro);margin:2.5px 0;transition:.2s;}
@media(min-width:1220px){.burger{display:none;}}
/* Menú móvil */
.drawer{position:fixed;inset:0;background:var(--negro);z-index:200;display:flex;flex-direction:column;padding:20px;clip-path:inset(0 0 0 100%);transition:clip-path .25s ease,visibility 0s .25s;visibility:hidden;}
.drawer.open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .25s ease;}
.drawer-top{display:flex;justify-content:flex-end;}
.drawer-close{width:48px;height:48px;background:var(--ama);border:none;border-radius:8px;font-size:22px;font-weight:800;color:var(--negro);}
.drawer-links{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;}
.drawer-links a{font-family:var(--display);font-size:clamp(30px,8vw,44px);text-transform:uppercase;color:var(--blanco);text-decoration:none;padding:8px 6px;line-height:1;}
.drawer-links a:hover{color:var(--ama);}
.drawer-foot{font-family:var(--cond);color:var(--papel);font-size:14px;letter-spacing:2px;text-transform:uppercase;text-align:center;padding-bottom:14px;}
/* ════ HERO (home) ════ */
/* La portada pasa de amarilla a tinta, igual que la cabecera de las páginas
interiores. El amarillo se reserva para la banda de honorarios y los
botones, que es lo único que tiene que gritar. */
.hero{background:var(--negro);color:var(--papel);position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.055;background-image:linear-gradient(var(--papel) 1px,transparent 1px),linear-gradient(90deg,var(--papel) 1px,transparent 1px);background-size:34px 34px;}
.hero-grid{position:relative;padding:44px 0 56px;display:grid;gap:36px;}
@media(min-width:960px){.hero-grid{grid-template-columns:1.25fr .75fr;align-items:center;padding:72px 0 88px;gap:48px;}}
/* ── Fondo de video del hero ────────────────────────────────────────────
Decorativo. Lo inyecta main.js SOLO en pantalla ancha, con conexión
buena y sin "ahorro de datos": en celular el hero sigue siendo amarillo
plano y no se descarga ni un byte de video.
El video va en escala de grises y en mezcla "multiply" sobre el amarillo:
eso lo convierte en duotono amarillo/negro, o sea textura, no fotografía.
La capa ::after devuelve el amarillo casi sólido bajo el titular. */
.hero-video{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.hero-video video{width:100%;height:100%;object-fit:cover;display:block;
filter:grayscale(1) contrast(1.08) brightness(1.04);
mix-blend-mode:multiply;opacity:.34;}
.hero-video::after{content:'';position:absolute;inset:0;
background:linear-gradient(96deg,var(--ama) 0 30%,rgba(255,212,0,.88) 44%,rgba(255,212,0,.52) 72%,rgba(255,212,0,.42) 100%);}
.hero-grid{z-index:1;}
@media(prefers-reduced-motion:reduce){.hero-video{display:none;}}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:2.5px;text-transform:uppercase;background:var(--ama);color:var(--negro);padding:8px 14px;margin-bottom:22px;}
.hero-eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--rojo);display:inline-block;animation:blink 1.6s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.25;}}
.hero h1{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(44px,9.5vw,96px);line-height:.92;color:var(--papel);letter-spacing:.5px;}
.hero h1 .tachado{position:relative;white-space:nowrap;}
.hero h1 .tachado::after{content:'';position:absolute;left:-2%;right:-2%;top:52%;height:.14em;background:var(--rojo);transform:rotate(-2deg);}
.hero h1 .caja{display:inline-block;background:var(--ama);color:var(--negro);padding:.02em .12em .05em;margin-top:.08em;box-shadow:.09em .09em 0 rgba(18,18,18,.28);}
.hero-sub{max-width:560px;font-size:clamp(17px,2.2vw,20px);font-weight:500;color:rgba(239,235,221,.9);margin:22px 0 30px;line-height:1.55;}
.hero-sub strong{background:transparent;color:var(--ama);padding:0;}
.hero-ctas{display:flex;flex-direction:column;gap:12px;max-width:480px;}
@media(min-width:560px){.hero-ctas{flex-direction:row;max-width:none;}}
.hero-nota{margin-top:16px;font-size:13.5px;color:rgba(239,235,221,.6);font-weight:600;}
/* Botones — presión industrial: hover hunde 2px (sombra 5→3), activo hunde 5px (sombra colapsa) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--cond);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;border:3px solid var(--negro);padding:16px 26px;font-size:17px;min-height:56px;transition:transform .09s cubic-bezier(.33,.7,.4,1),box-shadow .09s cubic-bezier(.33,.7,.4,1);}
.btn-negro{background:var(--negro);color:var(--ama);box-shadow:5px 5px 0 rgba(18,18,18,.25);}
.btn-negro:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 rgba(18,18,18,.3);}
.btn-blanco{background:var(--blanco);color:var(--negro);box-shadow:5px 5px 0 rgba(18,18,18,.18);}
.btn-blanco:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 rgba(18,18,18,.22);}
.btn-wa{background:var(--wa);color:var(--negro);border-color:var(--negro);box-shadow:5px 5px 0 rgba(18,18,18,.18);}
.btn-wa:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 rgba(18,18,18,.22);}
.btn-ama{background:var(--ama);color:var(--negro);box-shadow:5px 5px 0 rgba(255,212,0,.35);}
.btn-ama:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 rgba(255,212,0,.4);}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 rgba(18,18,18,0);}
/* Tarjeta comprobante del hero */
.hero-card{position:relative;background:var(--blanco);border:3px solid var(--negro);box-shadow:10px 10px 0 rgba(18,18,18,.85);padding:26px 24px 22px;max-width:430px;justify-self:center;width:100%;transform:rotate(1.2deg);}
@media(min-width:960px){.hero-card{justify-self:end;}}
.hero-card::before{content:'';position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-2deg);width:120px;height:26px;background:rgba(255,212,0,.85);border:1px dashed rgba(18,18,18,.35);}
.hc-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px dashed var(--linea);padding-bottom:12px;margin-bottom:14px;}
.hc-tit{font-family:var(--cond);font-weight:700;letter-spacing:2px;font-size:14px;text-transform:uppercase;color:var(--gris);}
.hc-num{font-family:var(--cond);font-weight:700;font-size:14px;color:var(--gris-2);letter-spacing:1px;}
.hc-row{display:flex;justify-content:space-between;gap:8px;font-size:15px;padding:7px 0;border-bottom:1px solid #efece2;}
.hc-row dt{color:var(--gris);font-weight:500;}
.hc-row dd{font-weight:700;text-align:right;}
.hc-row dd.ok{color:var(--verde);}
.hc-total{display:flex;justify-content:space-between;align-items:center;margin-top:14px;background:var(--negro);color:var(--blanco);padding:14px 16px;}
.hc-total-l{font-family:var(--cond);font-weight:700;letter-spacing:2px;font-size:13px;text-transform:uppercase;color:#bdb69a;}
.hc-total-n{font-family:var(--display);font-size:28px;color:var(--ama);letter-spacing:1px;}
.hc-sello{display:block;width:max-content;max-width:100%;margin:14px 10px 30px auto;position:relative;z-index:2;transform:rotate(-6deg);transform-origin:100% 50%;border:3px solid var(--rojo);color:var(--rojo);background:var(--blanco);font-family:var(--cond);font-weight:700;letter-spacing:2px;font-size:14px;text-transform:uppercase;padding:6px 12px;border-radius:0;opacity:.94;}
.hc-sello{--sello-rot:rotate(-14deg);--sello-tinta:.92;}
.hc-sello.stamped{animation:sello-estampado .45s cubic-bezier(.2,.75,.25,1) .6s both;}
.hc-pie{margin-top:12px;font-size:12px;color:var(--gris-2);text-align:center;}
/* ════ PAGE HERO (interiores) ════ */
/* La cabecera de cada página interior sigue a la portada: fondo de tinta con
una retícula de papel cuadriculado apenas visible. */
.page-hero{background:var(--negro);color:var(--papel);border-bottom:3px solid var(--ama);padding:40px 0 56px;position:relative;overflow:hidden;}
.page-hero::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.055;background-image:linear-gradient(var(--papel) 1px,transparent 1px),linear-gradient(90deg,var(--papel) 1px,transparent 1px);background-size:34px 34px;}
.page-hero>.wrap{position:relative;}
.breadcrumb{font-family:var(--cond);font-weight:600;font-size:13.5px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(239,235,221,.6);margin-bottom:20px;}
.breadcrumb a{text-decoration:none;}
.breadcrumb a{color:rgba(239,235,221,.82);}
.breadcrumb a:hover{color:var(--ama);text-decoration:underline;}
.page-eyebrow{display:inline-block;font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:2.5px;text-transform:uppercase;background:var(--ama);color:var(--negro);padding:7px 13px;margin-bottom:18px;}
.page-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(36px,7vw,72px);line-height:.95;text-transform:uppercase;color:var(--papel);letter-spacing:.5px;max-width:900px;}
.page-hero h1 em{font-style:normal;display:inline-block;background:transparent;color:var(--ama);padding:0;margin-top:.08em;}
.page-hero .lead{max-width:640px;margin-top:18px;font-size:clamp(17px,2vw,19.5px);font-weight:500;line-height:1.55;color:rgba(239,235,221,.9);}
.page-hero .hero-ctas{margin-top:28px;}
/* ════ CIFRAS (marquesina + contadores) ════ */
.cifras{background:var(--negro);color:var(--blanco);padding:0;}
.marquee{overflow:hidden;border-bottom:1px solid #2b2b2b;padding:12px 0;white-space:nowrap;}
.marquee-in{display:inline-block;animation:mq 28s linear infinite;font-family:var(--cond);font-weight:700;letter-spacing:3px;text-transform:uppercase;font-size:14px;color:var(--ama);}
.marquee-in span{margin:0 26px;opacity:.85;}
@keyframes mq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.marquee-in{animation:none;}}
.cifras-grid{display:grid;grid-template-columns:1fr 1fr;max-width:1180px;margin:0 auto;}
@media(min-width:860px){.cifras-grid{grid-template-columns:repeat(4,1fr);}}
.cifra{padding:34px 20px;text-align:center;border-right:1px solid #2b2b2b;border-bottom:1px solid #2b2b2b;}
.cifra-n{display:block;font-family:var(--display);font-size:clamp(34px,4.5vw,52px);color:var(--ama);line-height:1;letter-spacing:1px;}
.cifra-n small{font-size:.5em;color:var(--blanco);}
.cifra-l{display:block;font-family:var(--cond);font-weight:600;font-size:13.5px;letter-spacing:2px;text-transform:uppercase;color:#9b968a;margin-top:10px;}
/* ════ SECCIONES ════ */
.section{padding:clamp(64px,9vw,110px) 0;}
.section.compacta{padding:clamp(44px,6vw,72px) 0;}
.s-label{display:inline-block;font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:2.5px;text-transform:uppercase;background:var(--negro);color:var(--ama);padding:7px 13px;margin-bottom:18px;}
.s-label.rojo{background:var(--rojo);color:#fff;}
.s-label.verde{background:var(--verde);color:#fff;}
h2.display{font-size:clamp(34px,6vw,64px);color:var(--negro);}
.s-intro{max-width:620px;font-size:18px;color:var(--gris);margin-top:16px;font-weight:500;}
.blanca{background:var(--blanco);border-top:3px solid var(--negro);}
/* Sección de columna única centrada: el bloque se centra, el texto interno queda a la izquierda */
.centrada{text-align:center;}
.centrada .aplica-list{margin-left:auto;margin-right:auto;text-align:left;}
.centrada .claim-grid{justify-items:center;}
.centrada .normas{margin-left:auto;margin-right:auto;text-align:left;width:100%;}
.centrada .s-intro{margin-left:auto;margin-right:auto;}
.centrada .hero-ctas{justify-content:center;margin-left:auto;margin-right:auto;}
@media(min-width:560px){.centrada .hero-ctas{flex-direction:row;}}
/* ════ RESPALDO NORMATIVO ════ */
.claim{background:var(--blanco);border-top:3px solid var(--negro);}
.claim-grid{display:grid;gap:40px;margin-top:8px;}
@media(min-width:960px){.claim-grid{grid-template-columns:1.05fr .95fr;gap:64px;align-items:start;}}
.claim-big{font-family:var(--display);text-transform:uppercase;font-size:clamp(30px,4.5vw,50px);line-height:1.02;}
.claim-big em{font-style:normal;background:var(--ama);padding:0 .1em;}
.claim-txt p{margin:18px 0;color:var(--gris);font-weight:500;font-size:17.5px;}
.claim-txt strong{color:var(--tinta);}
.normas{display:grid;gap:12px;}
.norma{display:flex;gap:16px;align-items:flex-start;background:var(--papel);border:2px solid var(--negro);padding:18px;position:relative;}
.norma::before{content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--ama);}
.norma-art{flex-shrink:0;font-family:var(--display);font-size:20px;background:var(--negro);color:var(--ama);padding:8px 10px;line-height:1;min-width:74px;text-align:center;}
.norma h3{font-size:17px;font-weight:800;text-transform:uppercase;font-family:var(--cond);letter-spacing:1px;}
.norma p{font-size:15px;color:var(--gris);margin-top:4px;line-height:1.5;}
/* ════ SITUACIONES / TARJETAS SEÑAL ════ */
.situaciones{background:var(--papel);}
.sit-grid{display:grid;gap:14px;margin-top:40px;}
@media(min-width:700px){.sit-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1080px){.sit-grid{grid-template-columns:repeat(4,1fr);}}
.sit-grid.tres{max-width:1180px;}
@media(min-width:1080px){.sit-grid.tres{grid-template-columns:repeat(3,1fr);}}
.sit{display:flex;flex-direction:column;background:var(--blanco);border:3px solid var(--negro);padding:24px 22px;text-decoration:none;color:var(--tinta);position:relative;transition:transform .15s,box-shadow .15s;box-shadow:0 0 0 rgba(18,18,18,0);}
.sit:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--negro);}
.sit-num{font-family:var(--display);font-size:15px;color:var(--blanco);background:var(--negro);align-self:flex-start;padding:5px 9px;margin-bottom:16px;letter-spacing:1px;}
.sit h3{font-family:var(--cond);font-weight:700;font-size:22px;line-height:1.15;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;}
.sit p{font-size:15px;color:var(--gris);flex:1;line-height:1.5;}
.sit-tag{font-family:var(--cond);font-weight:700;font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--rojo);margin-top:14px;}
.sit-link{margin-top:18px;font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;color:var(--negro);border-bottom:3px solid var(--ama);align-self:flex-start;padding-bottom:2px;}
.sit:hover .sit-link{background:var(--ama);border-color:var(--negro);}
.sit.destacada{background:var(--negro);color:var(--blanco);}
.sit.destacada p{color:#b9b4a6;}
.sit.destacada .sit-num{background:var(--ama);color:var(--negro);}
.sit.destacada .sit-link{color:var(--ama);}
/* ════ CHECKLIST "¿A QUIÉN APLICA?" ════ */
.aplica-list{display:grid;gap:10px;margin-top:32px;max-width:820px;}
.aplica{display:flex;gap:14px;align-items:flex-start;background:var(--blanco);border:2px solid var(--negro);padding:16px 18px;font-size:16.5px;font-weight:600;line-height:1.45;}
.aplica .chk{flex-shrink:0;width:28px;height:28px;background:var(--verde);color:#fff;display:grid;place-items:center;font-weight:800;font-size:16px;margin-top:1px;}
/* ════ PROCESO ════ */
.proceso{background:var(--negro);color:var(--blanco);}
.proceso .s-label{background:var(--ama);color:var(--negro);}
.proceso h2.display{color:var(--blanco);}
.proceso .s-intro{color:#a39e91;}
.pasos{margin-top:48px;display:grid;gap:0;}
.paso{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:24px 0;border-top:1px solid #2e2e2e;align-items:start;}
.paso:last-child{border-bottom:1px solid #2e2e2e;}
@media(min-width:860px){.paso{grid-template-columns:90px 280px 1fr;gap:28px;align-items:center;}}
.paso-n{font-family:var(--display);font-size:clamp(30px,4vw,44px);color:var(--ama);line-height:1;}
.paso h3{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:21px;}
.paso p{color:#a39e91;font-size:15.5px;line-height:1.55;grid-column:2;}
@media(min-width:860px){.paso p{grid-column:auto;}}
.paso .tag-gratis{display:inline-block;margin-left:10px;font-family:var(--cond);font-size:12px;font-weight:700;letter-spacing:1.5px;background:var(--verde);color:#fff;padding:3px 8px;vertical-align:middle;}
/* ════ CASOS COLECTIVOS (resultados) ════ */
.casos-grid{display:grid;gap:14px;margin-top:40px;}
@media(min-width:700px){.casos-grid{grid-template-columns:1fr 1fr;}}
.caso{background:var(--blanco);border:3px solid var(--negro);padding:24px;position:relative;}
.caso-status{display:inline-flex;align-items:center;gap:8px;font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;padding:5px 10px;margin-bottom:16px;border:2px solid var(--negro);}
.caso-status.ok{background:var(--verde);color:#fff;border-color:var(--negro);}
.caso-status.proc{background:var(--ama);color:var(--negro);}
.caso h3{font-family:var(--cond);font-weight:700;font-size:21px;text-transform:uppercase;letter-spacing:.5px;line-height:1.15;}
.caso-monto{font-family:var(--display);font-size:clamp(36px,5vw,48px);color:var(--verde);margin:12px 0 6px;letter-spacing:.5px;}
.caso-meta{font-size:14.5px;color:var(--gris);}
/* ════ TESTIMONIOS (desprendibles) ════ */
.testimonios{background:var(--papel);}
.test-grid{display:grid;gap:20px;margin-top:44px;}
@media(min-width:900px){.test-grid{grid-template-columns:repeat(3,1fr);}}
.desprendible{background:var(--blanco);border:2px solid var(--negro);position:relative;display:flex;flex-direction:column;}
.desprendible::before{content:'';height:10px;background:var(--stripe);display:block;border-bottom:2px solid var(--negro);}
.desp-body{padding:22px 22px 18px;flex:1;display:flex;flex-direction:column;}
.desp-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;}
.desp-tit{font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--gris-2);}
.desp-monto{font-family:var(--display);font-size:26px;color:var(--verde);letter-spacing:.5px;}
.desp-q{font-size:15.5px;color:var(--gris);font-weight:500;line-height:1.6;flex:1;}
.desp-q::before{content:'“';font-family:var(--display);font-size:34px;color:var(--ama);line-height:0;vertical-align:-12px;margin-right:4px;}
.desp-foot{border-top:2px dashed var(--linea);margin-top:18px;padding-top:14px;display:flex;justify-content:space-between;gap:10px;font-size:13.5px;}
.desp-nombre{font-weight:800;text-transform:uppercase;font-family:var(--cond);letter-spacing:1px;font-size:15px;}
.desp-obra{color:var(--gris-2);}
.desp-check{color:var(--verde);font-weight:800;white-space:nowrap;}
.test-nota{margin-top:22px;font-size:13px;color:var(--gris-2);text-align:center;}
/* ════ BLOG ════ */
.blog-grid{display:grid;gap:16px;margin-top:40px;}
@media(min-width:900px){.blog-grid{grid-template-columns:repeat(3,1fr);}}
.blog-card{display:flex;flex-direction:column;background:var(--blanco);border:3px solid var(--negro);text-decoration:none;color:var(--tinta);transition:transform .15s,box-shadow .15s;}
.blog-card:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--negro);}
.blog-card-top{height:10px;background:var(--stripe);border-bottom:2px solid var(--negro);}
.blog-card-body{padding:24px 22px;display:flex;flex-direction:column;flex:1;}
.blog-cat{font-family:var(--cond);font-weight:700;font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color:var(--rojo);margin-bottom:12px;}
.blog-card h3{font-family:var(--cond);font-weight:700;font-size:23px;line-height:1.15;text-transform:uppercase;letter-spacing:.3px;margin-bottom:10px;}
.blog-card p{font-size:15px;color:var(--gris);flex:1;line-height:1.55;}
.blog-card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:14px;border-top:2px dashed var(--linea);}
.blog-link{font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;border-bottom:3px solid var(--ama);padding-bottom:2px;}
.blog-card:hover .blog-link{background:var(--ama);border-color:var(--negro);}
.blog-min{font-family:var(--cond);font-weight:600;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--gris-2);}
/* ════ ARTÍCULO (prose) ════ */
.art-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px;font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:1px;text-transform:uppercase;color:rgba(239,235,221,.62);}
.prose{max-width:780px;margin:0 auto;padding:clamp(44px,6vw,72px) 0;}
.prose>p{margin:0 0 22px;color:var(--gris);font-weight:500;font-size:17.5px;line-height:1.7;}
.prose>p strong,.prose li strong{color:var(--tinta);}
.prose h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(24px,4vw,34px);line-height:1.05;margin:44px 0 18px;padding-top:20px;border-top:3px solid var(--negro);}
.prose h3{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.5px;font-size:21px;margin:30px 0 12px;}
.prose ul,.prose ol{margin:0 0 22px 0;padding-left:0;list-style:none;display:grid;gap:10px;}
.prose ul li{position:relative;padding-left:30px;color:var(--gris);font-weight:500;line-height:1.55;}
.prose ul li::before{content:'▸';position:absolute;left:6px;color:var(--rojo);font-weight:800;}
.prose ol{counter-reset:oli;}
.prose ol li{position:relative;padding-left:44px;color:var(--gris);font-weight:500;line-height:1.55;counter-increment:oli;}
.prose ol li::before{content:counter(oli,decimal-leading-zero);position:absolute;left:0;top:1px;font-family:var(--display);font-size:17px;background:var(--negro);color:var(--ama);padding:2px 6px;line-height:1.2;}
.prose table{width:100%;border-collapse:collapse;border:3px solid var(--negro);background:var(--blanco);font-size:15px;margin:24px 0;}
.prose th{background:var(--negro);color:var(--ama);font-family:var(--cond);font-weight:700;letter-spacing:1px;text-transform:uppercase;font-size:14px;padding:12px;text-align:left;}
.prose td{border-top:1px solid var(--linea);padding:11px 12px;vertical-align:top;color:var(--gris);font-weight:500;}
.prose td:first-child{font-weight:700;color:var(--tinta);}
.tabla-scroll{overflow-x:auto;}
.nota{border:2px dashed var(--negro);background:#fffbe6;padding:18px 20px;margin:26px 0;font-size:15.5px;color:var(--gris);font-weight:500;line-height:1.6;}
.nota strong{color:var(--tinta);}
.nota.roja{background:#fdecec;border-color:var(--rojo);}
.nota.verde{background:#eef7f0;border-color:var(--verde);}
.cita-legal{background:var(--blanco);border:2px solid var(--negro);border-left:8px solid var(--ama);padding:20px 22px;margin:26px 0;font-style:italic;color:var(--gris);font-weight:500;font-size:16.5px;line-height:1.65;}
.art-cta{background:var(--negro);color:var(--blanco);border:3px solid var(--negro);padding:28px;margin:36px 0;text-align:center;}
.art-cta p{color:#c9c4b6;font-weight:500;margin-bottom:18px;}
.art-cta .tit{font-family:var(--display);text-transform:uppercase;font-size:clamp(22px,3.5vw,30px);color:var(--blanco);line-height:1.05;margin-bottom:10px;}
/* ════ CANALES DE CONTACTO ════ */
.canales{display:grid;gap:14px;margin-top:40px;}
@media(min-width:900px){.canales{grid-template-columns:repeat(3,1fr);}}
.canal{display:flex;flex-direction:column;background:var(--blanco);border:3px solid var(--negro);padding:26px 24px;text-decoration:none;color:var(--tinta);transition:transform .15s,box-shadow .15s;}
a.canal:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--negro);}
.canal-ico{width:52px;height:52px;background:var(--ama);border:2px solid var(--negro);display:grid;place-items:center;font-size:24px;margin-bottom:18px;}
.canal h3{font-family:var(--cond);font-weight:700;font-size:22px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;}
.canal p{font-size:15.5px;color:var(--gris);line-height:1.55;}
.canal .dato{font-weight:800;color:var(--tinta);font-size:17px;margin-top:6px;}
.canal-tag{align-self:flex-start;margin-top:16px;font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;background:var(--verde);color:#fff;padding:4px 10px;}
/* Perfil abogado */
.perfil{display:flex;gap:20px;align-items:flex-start;background:var(--blanco);border:3px solid var(--negro);padding:26px;margin:32px auto 0;max-width:640px;text-align:left;}
.perfil-badge{flex-shrink:0;width:64px;height:64px;background:var(--negro);color:var(--ama);display:grid;place-items:center;font-family:var(--display);font-size:26px;}
.perfil h3{font-family:var(--cond);font-weight:700;font-size:23px;text-transform:uppercase;letter-spacing:.5px;}
.perfil p{font-size:15px;color:var(--gris);margin-top:6px;line-height:1.55;}
/* ════ FAQ ════ */
.faq{background:var(--blanco);border-top:3px solid var(--negro);}
.faq .wrap{text-align:center;}
.faq-list{margin:36px auto 0;max-width:820px;text-align:left;}
.faq-item{border:2px solid var(--negro);margin-bottom:12px;background:var(--papel);}
.faq-item summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;padding:18px 20px;font-family:var(--cond);font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.5px;min-height:56px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .ico{flex-shrink:0;width:32px;height:32px;background:var(--negro);color:var(--ama);display:grid;place-items:center;font-size:20px;font-weight:800;transition:transform .2s;}
.faq-item[open] summary .ico{transform:rotate(45deg);}
.faq-item[open] summary{background:var(--ama);}
.faq-a{padding:4px 20px 20px;color:var(--gris);font-size:16px;line-height:1.65;border-top:2px dashed var(--linea);padding-top:16px;}
/* ════ CTA FINAL ════ */
.cta-final{background:var(--ama);border-top:3px solid var(--negro);text-align:center;position:relative;overflow:hidden;}
.cta-final h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(38px,7vw,76px);line-height:.95;}
.cta-final h2 em{font-style:normal;color:var(--rojo);}
.cta-final p{max-width:520px;margin:20px auto 32px;font-weight:600;font-size:18px;}
.cta-final .hero-ctas{justify-content:center;margin:0 auto;}
@media(min-width:560px){.cta-final .hero-ctas{max-width:640px;}}
/* ════ FOOTER ════ */
footer.pie{background:var(--negro);color:#a39e91;padding:56px 0 120px;}
@media(min-width:1140px){footer.pie{padding-bottom:56px;}}
.foot-grid{display:grid;gap:36px;}
@media(min-width:860px){.foot-grid{grid-template-columns:1.2fr 1fr 1fr;gap:56px;}}
.foot-logo{font-family:var(--display);font-size:22px;color:var(--blanco);text-transform:uppercase;line-height:1.05;}
.foot-logo span{color:var(--ama);}
.foot-desc{font-size:14.5px;margin-top:14px;line-height:1.7;max-width:340px;}
.foot-tit{font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:2.5px;text-transform:uppercase;color:var(--blanco);margin-bottom:16px;}
.foot-links{list-style:none;display:grid;gap:10px;font-size:15px;}
.foot-links a{text-decoration:none;color:#a39e91;}
.foot-links a:hover{color:var(--ama);}
.foot-legal{border-top:1px solid #2b2b2b;margin-top:44px;padding-top:22px;font-size:15px;color:#A39E91;line-height:1.7;}
/* ════ BARRA MÓVIL FIJA ════ */
.mobilebar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:1.2fr 1fr;gap:0;border-top:3px solid var(--negro);}
@media(min-width:1140px){.mobilebar{display:none;}}
.mobilebar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:60px;font-family:var(--cond);font-weight:700;font-size:16px;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;padding:10px;}
.mb-calc{background:var(--ama);color:var(--negro);border-right:3px solid var(--negro);}
.mb-wa{background:var(--wa);color:var(--negro);}
/* ════ CALCULADORA (dialog) ════ */
.calc-dialog{border:none;padding:0;margin:auto;width:min(680px,100vw);max-height:100dvh;background:var(--papel);color:var(--tinta);}
.calc-dialog::backdrop{background:rgba(12,12,12,.82);}
@media(max-width:680px){.calc-dialog{margin:0;width:100vw;height:100dvh;max-height:100dvh;}}
.calc-head{position:sticky;top:0;background:var(--negro);color:var(--blanco);padding:14px 18px;display:flex;align-items:center;gap:14px;z-index:2;}
.calc-head-tit{flex:1;font-family:var(--cond);font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:15px;color:var(--ama);}
.calc-close{background:var(--ama);border:none;color:var(--negro);width:40px;height:40px;font-size:19px;font-weight:800;border-radius:6px;}
.regla{position:relative;height:26px;background:var(--ama);border-bottom:3px solid var(--negro);overflow:hidden;}
.regla-ticks{position:absolute;inset:0;background:repeating-linear-gradient(to right,transparent 0 9px,rgba(18,18,18,.55) 9px 10.5px),repeating-linear-gradient(to right,transparent 0 44px,var(--negro) 44px 46.5px);background-size:auto 40%,auto 72%;background-repeat:repeat-x;background-position:bottom left;}
.regla-fill{position:absolute;left:0;top:0;bottom:0;background:var(--negro);width:0;transition:width .35s ease;}
.calc-body{padding:26px 20px 40px;}
@media(min-width:560px){.calc-body{padding:34px 34px 48px;}}
.q-sys{font-family:var(--cond);font-weight:700;font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color:var(--gris-2);margin-bottom:8px;}
.q-preg{font-family:var(--display);text-transform:uppercase;font-size:clamp(22px,4.5vw,30px);line-height:1.08;margin-bottom:8px;}
.q-hint{font-size:14.5px;color:var(--gris);margin-bottom:20px;}
.q-opts{display:grid;gap:10px;}
.q-opt{display:flex;align-items:center;gap:12px;text-align:left;background:var(--blanco);border:2px solid var(--negro);padding:14px 16px;font-size:16px;font-weight:600;min-height:56px;transition:transform .1s,box-shadow .1s;}
.q-opt:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--negro);}
.q-opt .ico{font-size:20px;flex-shrink:0;}
.q-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(min-width:560px){.q-grid{grid-template-columns:repeat(3,1fr);}}
.q-card{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--blanco);border:2px solid var(--negro);padding:18px 10px;font-weight:700;font-size:14.5px;text-align:center;min-height:88px;justify-content:center;transition:transform .1s,box-shadow .1s;}
.q-card:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--negro);}
.q-card .ico{font-size:24px;}
.q-multi-opt{display:flex;align-items:center;gap:12px;background:var(--blanco);border:2px solid var(--negro);padding:13px 16px;font-size:15.5px;font-weight:600;cursor:pointer;min-height:54px;width:100%;text-align:left;}
.q-multi-opt .chk{flex-shrink:0;width:24px;height:24px;border:2.5px solid var(--negro);display:grid;place-items:center;font-weight:800;font-size:15px;background:var(--blanco);color:transparent;}
.q-multi-opt[aria-pressed="true"]{background:var(--ama);}
.q-multi-opt[aria-pressed="true"] .chk{background:var(--negro);color:var(--ama);}
.q-continue{margin-top:16px;width:100%;background:var(--negro);color:var(--ama);border:3px solid var(--negro);padding:16px;font-family:var(--cond);font-weight:700;font-size:17px;letter-spacing:2px;text-transform:uppercase;}
.q-back{background:none;border:none;font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gris);margin-bottom:18px;padding:6px 0;display:inline-flex;gap:6px;}
.q-msg{margin-top:14px;padding:13px 15px;font-size:14.5px;border:2px dashed var(--negro);background:#fffbe6;display:none;}
.q-msg.alerta{background:#fdecec;border-color:var(--rojo);color:var(--rojo-dk);font-weight:600;}
.q-otro input{width:100%;padding:14px;border:2px solid var(--negro);font-family:var(--body);font-size:16px;background:var(--blanco);margin-top:12px;}
.q-otro button{margin-top:10px;}
/* Resultado calculadora */
.res-head{text-align:center;margin-bottom:22px;}
.res-badge{display:inline-block;font-family:var(--cond);font-weight:700;letter-spacing:2.5px;font-size:15px;text-transform:uppercase;color:#fff;padding:9px 18px;}
.res-sub{margin-top:12px;font-size:15.5px;color:var(--gris);}
.res-comprobante{background:var(--blanco);border:3px solid var(--negro);padding:22px;margin:18px 0;position:relative;}
.res-comprobante::before{content:'COMPROBANTE DE EVALUACIÓN';position:absolute;top:-13px;left:16px;background:var(--negro);color:var(--ama);font-family:var(--cond);font-weight:700;font-size:12px;letter-spacing:2px;padding:4px 10px;}
.res-monto{text-align:center;padding:8px 0 16px;border-bottom:2px dashed var(--linea);}
.res-monto-l{font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--gris-2);}
.res-monto-n{font-family:var(--display);font-size:clamp(34px,8vw,48px);color:var(--negro);margin-top:6px;letter-spacing:.5px;}
.res-monto-n small{font-size:.45em;color:var(--gris-2);}
.res-tabla{width:100%;border-collapse:collapse;margin-top:14px;font-size:15px;}
.res-tabla td{padding:8px 4px;border-bottom:1px solid #efece2;}
.res-tabla td:last-child{text-align:right;font-weight:700;}
.res-presc{border:3px solid var(--rojo);background:#fdf1f1;padding:18px;margin:18px 0;text-align:center;}
.res-presc-t{font-family:var(--cond);font-weight:700;letter-spacing:2px;font-size:14px;text-transform:uppercase;color:var(--rojo);}
.res-presc-f{font-family:var(--display);font-size:30px;color:var(--rojo-dk);margin:8px 0 4px;text-transform:uppercase;}
.res-presc p{font-size:14px;color:var(--gris);}
.res-col{border:3px solid var(--verde);background:#eef7f0;padding:16px;margin:18px 0;font-size:15px;}
.res-col strong{color:var(--verde);text-transform:uppercase;font-family:var(--cond);letter-spacing:1.5px;}
.check-list{display:grid;gap:8px;margin-top:10px;font-size:15px;}
.check-row{display:flex;gap:10px;align-items:center;}
.chk-ok{color:var(--verde);font-weight:800;}
.chk-arr{color:var(--gris-2);font-weight:800;}
.res-wa{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--wa);color:var(--negro);border:3px solid var(--negro);padding:17px;font-family:var(--cond);font-weight:700;font-size:17px;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;margin-top:20px;box-shadow:5px 5px 0 rgba(18,18,18,.6);}
.res-wa svg{width:22px;height:22px;fill:currentColor;}
.res-dir{display:block;text-align:center;margin-top:14px;font-size:15px;font-weight:600;color:var(--gris);}
.res-legal{margin-top:20px;font-size:15px;color:var(--gris-2);line-height:1.6;text-align:center;}
/* Campos de la revisión de caso */
.q-campos{display:grid;gap:12px;}
.q-input{width:100%;padding:15px;border:2px solid var(--negro);font-family:var(--body);font-size:16.5px;background:var(--blanco);}
.q-input:focus-visible{outline:3px solid var(--negro);outline-offset:1px;}
.q-input.malo{border-color:var(--rojo);background:#fdf1f1;}
.q-money{display:flex;align-items:center;border:2px solid var(--negro);background:var(--blanco);}
.q-money span{font-family:var(--display);font-size:26px;padding:0 6px 0 15px;color:var(--gris);}
.q-money .q-input{border:none;padding-left:4px;font-size:22px;font-weight:700;}
.q-sublabel{font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gris);margin:14px 0 8px;}
.q-fecha{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;}
.q-fecha select{padding:14px;border:2px solid var(--negro);background:var(--blanco);font-family:var(--body);font-size:16px;min-height:52px;}
.q-periodo[aria-pressed="true"]{background:var(--ama);}
.q-check{display:flex;gap:11px;align-items:center;font-size:15.5px;color:var(--gris);margin:12px 0 4px;cursor:pointer;}
.q-check input{width:22px;height:22px;accent-color:var(--negro);flex-shrink:0;}
.q-msg-inline{font-size:14.5px;color:var(--rojo-dk);font-weight:600;margin-top:10px;min-height:1px;}
.res-bloque{background:var(--blanco);border:3px solid var(--negro);padding:20px;margin:16px 0;}
.res-bloque-t{font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:12px;}
.res-nota{font-size:14px;color:var(--gris);line-height:1.55;margin-top:14px;padding-top:12px;border-top:2px dashed var(--linea);}
.res-bloque .chk-arr{background:var(--negro);color:var(--ama);width:24px;height:24px;display:grid;place-items:center;font-weight:800;font-size:14px;flex-shrink:0;}
/* Formulario de contacto en el resultado de la calculadora */
.res-form{margin-top:22px;background:var(--blanco);border:3px solid var(--negro);padding:22px 20px;}
.res-form-tit{font-family:var(--cond);font-weight:700;font-size:20px;letter-spacing:1px;text-transform:uppercase;}
.res-form-sub{font-size:14.5px;color:var(--gris);margin:6px 0 16px;line-height:1.5;}
.res-form input[type=text],.res-form input[type=tel]{width:100%;padding:14px;border:2px solid var(--negro);font-family:var(--body);font-size:16px;background:var(--papel);margin-bottom:10px;}
.res-form input:focus-visible{outline:3px solid var(--negro);outline-offset:1px;}
.trampa{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;}
.res-check{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--gris);line-height:1.45;margin:6px 0 16px;cursor:pointer;}
.res-check input{flex-shrink:0;width:22px;height:22px;margin-top:1px;accent-color:var(--negro);}
.res-form-btn{width:100%;background:var(--negro);color:var(--ama);border:3px solid var(--negro);padding:16px;font-family:var(--cond);font-weight:700;font-size:17px;letter-spacing:1.5px;text-transform:uppercase;min-height:56px;transition:transform .09s,box-shadow .09s;}
.res-form-btn:hover:not(:disabled){transform:translate(2px,2px);}
.res-form-btn:disabled{opacity:.6;cursor:default;}
.res-form-msg{font-size:14px;margin-top:10px;min-height:1px;}
.res-form-msg.error{color:var(--rojo-dk);font-weight:600;}
.res-form-ok{font-family:var(--cond);font-weight:700;font-size:21px;text-transform:uppercase;letter-spacing:1px;color:var(--verde);}
/* Reveal on scroll */
/* Solo se oculta si hay JavaScript (html.js lo pone el ). Sin JS, todo visible. */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease;}
html.js .reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;transition:none;}}
/* ════════════════════════════════════════════════════════════════════
MOVIMIENTO — Alta Visibilidad · TuSalarioTuDerecho.com
Capa de movimiento portada del design system (Fundamentos › Movimiento)
Solo transform / opacity / clip-path · impactos secos 150–450ms
Integración: después de styles.css + main.js al final del body.
main.js añade .anim al cargar (si no hay reduced-motion) y .en-escena
al entrar en viewport (IO 25%, una vez) a todo [data-anima].
════════════════════════════════════════════════════════════════════ */
/* ── Catálogo de keyframes ── */
/* ANIM: placa-estampada (entra como sello, reposa recta) */
@keyframes placa-estampada{0%{opacity:0;transform:var(--sello-rot,none) scale(1.05);}55%{opacity:1;transform:var(--sello-rot,none) scale(.985);}70%{transform:var(--sello-rot,none) scale(1.008) translate(1px,-1px);}85%{transform:scale(.997) translate(-1px,1px);}100%{opacity:1;transform:none;}}
/* ANIM: sello-estampado */
@keyframes sello-estampado{0%{opacity:0;transform:var(--sello-rot,rotate(0deg)) scale(1.9);}55%{opacity:1;transform:var(--sello-rot,rotate(0deg)) scale(.96);}70%{transform:var(--sello-rot,rotate(0deg)) scale(1.02) translate(1px,-1px);}85%{transform:var(--sello-rot,rotate(0deg)) scale(.995) translate(-1px,1px);}100%{opacity:var(--sello-tinta,1);transform:var(--sello-rot,rotate(0deg)) scale(1);}}
/* ANIM: marcador-furioso */
@keyframes marcador-furioso{from{transform:rotate(-2deg) scaleX(0);}to{transform:rotate(-2deg) scaleX(1);}}
/* ANIM: caja-caida */
@keyframes caja-caida{0%{opacity:0;transform:translateY(-.55em);}62%{opacity:1;transform:translateY(.045em);}82%{transform:translateY(-.02em);}100%{opacity:1;transform:none;}}
/* ANIM: sombra-desplegada */
@keyframes sombra-desplegada{from{box-shadow:0 0 0 rgba(18,18,18,.28);}to{box-shadow:.09em .09em 0 rgba(18,18,18,.28);}}
/* ANIM: tabla-colgada */
@keyframes tabla-colgada{from{opacity:0;transform:rotate(2.8deg) translateY(-14px);}to{opacity:1;transform:rotate(1.2deg);}}
/* ANIM: recibo-fila */
@keyframes recibo-fila{from{opacity:1;clip-path:inset(-2% 100% -2% 0);}to{opacity:1;clip-path:inset(-2% 0 -2% 0);}}
/* ANIM: golpe-seco */
@keyframes golpe-seco{from{transform:scale(1.045);}to{transform:scale(1);}}
/* ANIM: valla-parpadeo */
@keyframes valla-parpadeo{0%,55%{opacity:1;}58%,90%{opacity:.15;}93%,100%{opacity:1;}}
/* ANIM: cinta-barrera */
@keyframes cinta-barrera{to{transform:translateX(-39.6px);}}
/* ANIM: aparicion-seca */
@keyframes aparicion-seca{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
/* ANIM: cinta-desenrollada */
@keyframes cinta-desenrollada{from{transform:scaleX(0);}to{transform:scaleX(1);}}
/* ANIM: paso-encendido */
@keyframes paso-encendido{from{opacity:.45;}to{opacity:1;}}
/* ANIM: pulso-emergencia */
@keyframes pulso-emergencia{0%{opacity:0;transform:scale(.96);}30%{opacity:.9;}100%{opacity:0;transform:scale(1.05);}}
/* ANIM: luz-retrorreflectiva */
@keyframes luz-retrorreflectiva{to{transform:translateX(1500px) skewX(-18deg);}}
/* ANIM: carga-de-grua */
@keyframes carga-de-grua{0%{opacity:0;transform:translateY(-26px) rotate(.8deg);}55%{opacity:1;transform:translateY(2px) rotate(-.3deg);}80%{transform:translateY(-1px) rotate(.1deg);}100%{opacity:1;transform:none;}}
/* ANIM: tablas-apiladas */
@keyframes tablas-apiladas{from{opacity:0;transform:translateY(26px) rotate(1.8deg);}to{opacity:1;transform:none;}}
/* ANIM: compuerta */
@keyframes compuerta{from{opacity:0;transform:perspective(600px) rotateX(-16deg);}to{opacity:1;transform:none;}}
/* ANIM: tic-metrico */
@keyframes tic-metrico{0%{transform:scaleX(var(--de,0));}70%{transform:scaleX(calc(var(--a,1) + .012));}100%{transform:scaleX(var(--a,1));}}
/* ── Parches sobre la base (sustituyen las reglas equivalentes de styles.css) ── */
/* Botones · presión-industrial: hover hunde 2px (sombra 5→3), activo hunde 5px (sombra colapsa) */
.btn{transition:transform .09s cubic-bezier(.33,.7,.4,1),box-shadow .09s cubic-bezier(.33,.7,.4,1);}
.btn-negro:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 rgba(18,18,18,.3);}
.btn-blanco:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 rgba(18,18,18,.22);}
.btn-wa:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 rgba(18,18,18,.22);}
.btn-ama:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 rgba(255,212,0,.4);}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 rgba(18,18,18,0);}
/* Fix de contraste heredado de button{}: */
.q-opt,.q-card,.q-multi-opt{color:var(--tinta);}
/* El separador ya no es cinta de barrera sino troquelado, y va quieto. La
regla animada que vivía aquí volvía a pintar la cinta encima y dejaba el
troquelado invisible en todas las páginas. */
.hazard{position:relative;overflow:hidden;}
/* Sello de caucho parametrizado */
.hc-sello{--sello-rot:rotate(-14deg); /* @kind other */--sello-tinta:.92; /* @kind other */}
.hc-sello.stamped{animation:sello-estampado .45s cubic-bezier(.2,.75,.25,1) .6s backwards;}
/* ── Hero (data-anima="hero" en la ) ── */
.hero::before{content:'';position:absolute;inset:-90px 0;background:repeating-linear-gradient(0deg,rgba(18,18,18,.05) 0 1px,transparent 1px 26px),repeating-linear-gradient(90deg,rgba(18,18,18,.05) 0 1px,transparent 1px 26px),repeating-linear-gradient(0deg,rgba(18,18,18,.05) 0 2px,transparent 2px 130px),repeating-linear-gradient(90deg,rgba(18,18,18,.05) 0 2px,transparent 2px 130px);pointer-events:none;transform:translateY(var(--plano-y,0px));}
.linea{display:block;width:max-content;max-width:100%;}
.hero.anim.en-escena .linea{animation:sello-estampado .38s cubic-bezier(.2,.75,.25,1) backwards;}
.hero.anim.en-escena .linea-1{animation-delay:.1s;}
.hero.anim.en-escena .linea-2{animation-delay:.42s;}
.hero.anim.en-escena .linea-3{animation-name:caja-caida;animation-duration:.36s;animation-delay:.98s;}
.hero.anim.en-escena h1 .tachado::after{transform-origin:0 55%;animation:marcador-furioso .27s cubic-bezier(.7,.05,.3,.95) .78s backwards;}
.hero.anim.en-escena .caja{animation:sombra-desplegada .16s ease-out 1.28s backwards;}
.hero.anim.en-escena .hero-sub{animation:aparicion-seca .28s ease-out 1.42s backwards;}
.hero.anim.en-escena .hero-ctas{animation:aparicion-seca .28s ease-out 1.52s backwards;}
.hero.anim.en-escena .hero-nota{animation:aparicion-seca .28s ease-out 1.62s backwards;}
.hero.anim.en-escena .hero-card{animation:tabla-colgada .4s cubic-bezier(.25,.9,.3,1.08) 1.75s backwards;}
.hero.anim.en-escena .hc-sello.stamped{animation:sello-estampado .45s cubic-bezier(.2,.75,.25,1) 2.25s backwards;}
/* ── Comprobante · recibo-imprimiendo (data-anima="recibo" + clase .recibo; filas con --d inline) ── */
.recibo{--troquel:linear-gradient(#000 0 0) 0 0/100% calc(100% - 10px) no-repeat,radial-gradient(circle 5.5px at 10px 10px,transparent 5px,#000 5.4px) left bottom/20px 10px repeat-x; /* @kind other */}
.recibo .hero-card{-webkit-mask:var(--troquel);mask:var(--troquel);padding-bottom:30px;}
.recibo.anim.en-escena .hc-head,.recibo.anim.en-escena .hc-row,.recibo.anim.en-escena .hc-pie{animation:recibo-fila .18s steps(7,end) var(--d,0s) backwards;}
.recibo.anim.en-escena .hc-total{animation:recibo-fila .18s steps(7,end) var(--d,0s) backwards,golpe-seco .15s cubic-bezier(.2,.8,.3,1) calc(var(--d,0s) + .18s) backwards;}
.recibo.anim.en-escena .hc-sello.stamped{animation:sello-estampado .45s cubic-bezier(.2,.75,.25,1) 1.6s backwards;}
/* Delays de referencia: head .2 · filas .42/.57/.72/.87 · total 1.12 · pie 1.95 */
/* ── Cifras + marquesina (data-anima="cifras") ── */
.flecha{display:inline-block;animation:valla-parpadeo 1.1s linear var(--fd,0s) infinite;}
.cifra-n .odo{display:inline-flex;align-items:flex-end;line-height:1;}
.odo-s,.odo-d,.odo-reel span{display:block;height:1em;line-height:1;}
.odo-d{overflow:hidden;}
.odo-reel{display:block;}
.odo-s{white-space:pre;}
.cifras.anim.en-escena .cifra{animation:aparicion-seca .28s ease-out backwards;}
.cifras.anim.en-escena .cifra:nth-child(2){animation-delay:.06s;}
.cifras.anim.en-escena .cifra:nth-child(3){animation-delay:.12s;}
.cifras.anim.en-escena .cifra:nth-child(4){animation-delay:.18s;}
/* ── Orden de trabajo (data-anima="proceso" en .proceso; 5 pasos) ── */
.paso::before{content:'';display:block;grid-column:1/-1;height:12px;margin-bottom:16px;background:repeating-linear-gradient(90deg,var(--negro) 0 2px,transparent 2px 14px) var(--ama);border:2px solid var(--negro);transform-origin:left;}
.proceso.anim.en-escena .paso::before{animation:cinta-desenrollada .48s linear backwards;}
.proceso.anim.en-escena .paso{animation:paso-encendido .14s steps(1,end) backwards;}
.proceso.anim.en-escena .paso:nth-child(1)::before{animation-delay:.08s;}
.proceso.anim.en-escena .paso:nth-child(2)::before{animation-delay:.5s;}
.proceso.anim.en-escena .paso:nth-child(3)::before{animation-delay:.92s;}
.proceso.anim.en-escena .paso:nth-child(4)::before{animation-delay:1.34s;}
.proceso.anim.en-escena .paso:nth-child(5)::before{animation-delay:1.76s;}
.proceso.anim.en-escena .paso:nth-child(1){animation-delay:.46s;}
.proceso.anim.en-escena .paso:nth-child(2){animation-delay:.88s;}
.proceso.anim.en-escena .paso:nth-child(3){animation-delay:1.3s;}
.proceso.anim.en-escena .paso:nth-child(4){animation-delay:1.72s;}
.proceso.anim.en-escena .paso:nth-child(5){animation-delay:2.14s;}
.proceso.anim.en-escena .paso:nth-child(1) .paso-n{animation:golpe-seco .16s cubic-bezier(.2,.8,.3,1) .48s backwards;}
.proceso.anim.en-escena .paso:nth-child(2) .paso-n{animation:golpe-seco .16s cubic-bezier(.2,.8,.3,1) .9s backwards;}
.proceso.anim.en-escena .paso:nth-child(3) .paso-n{animation:golpe-seco .16s cubic-bezier(.2,.8,.3,1) 1.32s backwards;}
.proceso.anim.en-escena .paso:nth-child(4) .paso-n{animation:golpe-seco .16s cubic-bezier(.2,.8,.3,1) 1.74s backwards;}
.proceso.anim.en-escena .paso:nth-child(5) .paso-n{animation:golpe-seco .16s cubic-bezier(.2,.8,.3,1) 2.16s backwards;}
/* ── CTA final (data-anima="cta"; requiere dentro de la sección) ── */
.cta-final{position:relative;overflow:hidden;}
.cta-final em{position:relative;display:inline-block;}
.cta-final em::after{content:'';position:absolute;inset:-.1em -.16em;border:4px solid var(--rojo);opacity:0;pointer-events:none;}
.cta-final.anim.en-escena em::after{animation:pulso-emergencia .5s ease-out .55s 2;}
.cta-final .luz{position:absolute;top:-30%;bottom:-30%;left:0;width:110px;background:rgba(255,255,255,.32);transform:translateX(-160px) skewX(-18deg);pointer-events:none;}
@media(min-width:960px){.cta-final.anim.en-escena .luz{animation:luz-retrorreflectiva .55s cubic-bezier(.55,.05,.45,.95) 1.3s backwards;}}
.cta-final.anim.en-escena h2{animation:aparicion-seca .28s ease-out .05s backwards;}
.cta-final.anim.en-escena .wrap>p{animation:aparicion-seca .28s ease-out .22s backwards;}
.cta-final.anim.en-escena .hero-ctas{animation:aparicion-seca .28s ease-out .38s backwards;}
/* ── Placas normativas (data-anima="normas" en .normas) ── */
.norma{transition:transform .15s ease;position:relative;}
[data-placa="1"]{--sello-rot:rotate(-1.8deg); /* @kind other */}
[data-placa="2"]{--sello-rot:rotate(1.4deg); /* @kind other */}
[data-placa="3"]{--sello-rot:rotate(-1deg); /* @kind other */}
[data-placa="4"]{--sello-rot:rotate(1.2deg); /* @kind other */}
.norma::after{content:'';position:absolute;inset:0;background:var(--negro);opacity:0;transition:opacity .15s;pointer-events:none;}
.norma:hover{transform:scale(1.02);}
.norma:hover::after{opacity:.07;}
.normas.anim.en-escena .norma{animation:placa-estampada .4s cubic-bezier(.2,.75,.25,1) backwards;}
.normas.anim.en-escena .norma:nth-child(1){animation-delay:.15s;}
.normas.anim.en-escena .norma:nth-child(2){animation-delay:.4s;}
.normas.anim.en-escena .norma:nth-child(3){animation-delay:.65s;}
.normas.anim.en-escena .norma:nth-child(4){animation-delay:.9s;}
.norma.anim-fin{animation:none!important;}
/* ── Tarjetas señal (data-anima="sits" en .sit-grid) ── */
.sit{box-shadow:8px 8px 0 var(--negro);}
.sit:hover{transform:translate(-4px,-4px);box-shadow:14px 14px 0 var(--negro);z-index:2;}
.sit-num{background:transparent;position:relative;z-index:0;transition:color .28s cubic-bezier(.7,.05,.3,.95);}
.sit-num::before,.sit-num::after{content:'';position:absolute;inset:0;z-index:-1;}
.sit-num::before{background:var(--negro);}
.sit-num::after{background:var(--ama);clip-path:polygon(0 100%,0 100%,0 100%);transition:clip-path .28s cubic-bezier(.7,.05,.3,.95);}
.sit:hover .sit-num{color:var(--negro);}
.sit:hover .sit-num::after{clip-path:polygon(0 -300%,0 100%,400% 100%);}
.sit-grid.anim.en-escena .sit{animation:tablas-apiladas .34s cubic-bezier(.25,.8,.3,1) backwards;}
.sit-grid.anim.en-escena .sit:nth-child(2){animation-delay:.1s;}
.sit-grid.anim.en-escena .sit:nth-child(3){animation-delay:.2s;}
.sit-grid.anim.en-escena .sit:nth-child(4){animation-delay:.3s;}
.sit.anim-fin{animation:none!important;}
/* ── Desprendibles (data-anima="desprendibles" en el contenedor; montos con data-conteo="14200000") ── */
/* ANIM: papel-despegado */
@keyframes papel-despegado{from{opacity:0;transform:perspective(800px) rotateX(-7deg) translateY(12px);}to{opacity:1;transform:perspective(800px) rotateX(0deg) translateY(0);}}
[data-anima="desprendibles"].anim.en-escena .desprendible{transform-origin:top center;animation:papel-despegado .45s cubic-bezier(.25,.85,.3,1) backwards;}
[data-anima="desprendibles"].anim.en-escena .desprendible:nth-child(2){animation-delay:.12s;}
[data-anima="desprendibles"].anim.en-escena .desprendible:nth-child(3){animation-delay:.24s;}
.desp-check{--sello-rot:rotate(-4deg);--sello-tinta:1;display:inline-block;transform:rotate(-4deg);transform-origin:right center;}
[data-anima="desprendibles"].anim.en-escena .desp-check{animation:sello-estampado .4s cubic-bezier(.2,.75,.25,1) 1.2s backwards;}
/* ── Header · brocha-vial + cinta de lectura (markup: .lectura al final del header) ── */
nav.main-nav a{position:relative;}
nav.main-nav a::after{content:'';position:absolute;left:-2px;right:-2px;bottom:-3px;height:7px;background:var(--ama);transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.7,.05,.3,.95);clip-path:polygon(0 22%,100% 0,97% 78%,1% 100%);}
nav.main-nav a:hover::after{transform:scaleX(1);}
nav.main-nav a:hover{border-color:transparent;}
.nav-wa{transition:transform .09s;}
.nav-wa:hover{transform:translate(1px,1px);}
/* ── Señal de la calculadora ─────────────────────────────────────────────
La calculadora es la página que la gente sí busca en Google y era la menos
visible del sitio. Aquí se le pone la única marca permanente del menú, con
el vocabulario de la obra y no con el de una web: cinta de peligro que
avanza despacio, como la que acordona un frente de trabajo.
Por qué cinta y no un punto que parpadea: sobre el amarillo del header un
punto amarillo no se ve, y uno rojo contradice el resto del sitio, donde el
rojo es sello de urgencia. La cinta negra y amarilla es la única señal que
ya existe en esta paleta.
La geometría no es arbitraria. El patrón repite cada 28px medidos
perpendicularmente a las franjas; a 45 grados eso son 28 × √2 = 39,6px en
horizontal, así que el mosaico mide 39,6px y la animación desplaza
exactamente 39,6px. Con cualquier otro número la cinta daría un salto
visible en cada vuelta. */
nav.main-nav a.nav-senal::after,
.drawer-links a.nav-senal::after{
content:'';position:absolute;left:-2px;right:-2px;bottom:-4px;height:6px;
transform:none;clip-path:none;
background:repeating-linear-gradient(-45deg,var(--papel) 0 14px,var(--ama) 14px 28px);
background-size:39.6px 39.6px;
animation:senal-cinta 2.2s linear infinite;
}
nav.main-nav a.nav-senal:hover::after{transform:none;}
@keyframes senal-cinta{to{background-position:39.6px 0;}}
/* El sello de «gratis»: va pegado arriba a la derecha, ladeado, como una
etiqueta grapada encima. Position absolute para no alterar los 64px de alto
del header. aria-hidden en el HTML porque el enlace ya dice a dónde va y
repetirlo en el lector de pantalla sería ruido. */
.nav-senal{position:relative;}
.nav-senal .senal-tag{
position:absolute;top:-7px;right:-11px;z-index:2;
font-family:var(--cond);font-weight:700;font-size:10px;letter-spacing:1.1px;
text-transform:uppercase;background:var(--negro);color:var(--ama);
padding:2px 5px;line-height:1.1;transform:rotate(-7deg);
animation:senal-tag 5.5s ease-in-out 1.4s infinite;
}
@keyframes senal-tag{
0%,84%,100%{transform:rotate(-7deg) scale(1);}
90%{transform:rotate(-7deg) scale(1.13);}
95%{transform:rotate(-7deg) scale(.98);}
}
/* El menú de escritorio no existe por debajo de 1220px, así que en móvil la
señal tiene que estar donde sí se ve: en la hamburguesa, para que se sepa
que dentro hay algo marcado. */
.burger{position:relative;}
.burger::after{
content:'';position:absolute;top:-3px;right:-3px;width:11px;height:11px;
border-radius:50%;background:var(--rojo);border:2px solid var(--negro);
animation:senal-punto 2.6s ease-out infinite;
}
@keyframes senal-punto{
0%{box-shadow:0 0 0 0 rgba(18,18,18,.55);}
60%,100%{box-shadow:0 0 0 8px rgba(18,18,18,0);}
}
@media(min-width:1220px){.burger::after{display:none;}}
/* En el cajón los enlaces ocupan todo el ancho, así que un sello colgado del
borde derecho se sale de la pantalla. Aquí va en línea, detrás del texto,
que es donde cabe. Y va invertido: el cajón es negro, y un sello de fondo
negro sobre fondo negro es solo texto suelto. */
.drawer-links a.nav-senal{position:relative;}
.drawer-links a.nav-senal .senal-tag{
position:static;display:inline-block;font-size:12px;
margin-left:10px;vertical-align:middle;
background:var(--ama);color:var(--negro);
}
/* Pegada al texto y no a media altura entre este enlace y el siguiente, o se
lee como una línea divisoria en vez de como la marca de este renglón. */
.drawer-links a.nav-senal::after{bottom:1px;}
/* Nada de esto se mueve si la persona pidió que no se mueva. La señal se
queda: pierde el movimiento, no la visibilidad. */
@media(prefers-reduced-motion:reduce){
nav.main-nav a.nav-senal::after,
.drawer-links a.nav-senal::after,
.nav-senal .senal-tag,
.burger::after{animation:none;}
}
.lectura{position:relative;height:16px;background:var(--negro-2);overflow:hidden;border-top:1px solid rgba(239,235,221,.14);}
.lectura-marcas{position:absolute;inset:0;display:flex;pointer-events:none;}
.lectura-marcas span{flex:1;border-left:2px solid rgba(247,244,236,.35);color:rgba(247,244,236,.7);font-family:var(--cond);font-weight:700;font-size:9px;line-height:16px;padding-left:4px;letter-spacing:1px;}
.lectura-fill{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 22px,var(--negro) 22px 24px) var(--ama);clip-path:inset(0 var(--rest,100%) 0 0);}
/* ── Calculadora (main.js: TSTD.escena(dialog) al abrir/cambiar; TSTD.tic(fill,de,a) por pregunta) ── */
.calc-dialog.anim.en-escena{animation:carga-de-grua .42s cubic-bezier(.3,.7,.35,1) both;transform-origin:top center;}
.calc-dialog.anim.en-escena .q-sys{animation:aparicion-seca .24s ease-out .35s backwards;}
.calc-dialog.anim.en-escena .q-preg{animation:aparicion-seca .24s ease-out .43s backwards;}
.calc-dialog.anim.en-escena .q-hint{animation:aparicion-seca .24s ease-out .5s backwards;}
.calc-dialog.anim.en-escena .q-opt{animation:aparicion-seca .24s ease-out backwards;}
.calc-dialog.anim.en-escena .q-opt:nth-child(1){animation-delay:.55s;}
.calc-dialog.anim.en-escena .q-opt:nth-child(2){animation-delay:.62s;}
.calc-dialog.anim.en-escena .q-opt:nth-child(3){animation-delay:.69s;}
.calc-dialog.anim.en-escena .q-opt:nth-child(4){animation-delay:.76s;}
.regla-fill.tic{animation:tic-metrico .24s cubic-bezier(.6,0,.4,1) both;}
.q-opt:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--negro);}
/* Resultado (mismo diálogo): */
.res-comprobante{position:relative;}
.res-comprobante .hc-sello{position:absolute;top:auto;left:auto;right:12px;bottom:10px;}
.calc-dialog.anim.en-escena .res-head{animation:recibo-fila .18s steps(7,end) .35s backwards;}
.calc-dialog.anim.en-escena .res-tabla tr:nth-child(1){animation:recibo-fila .18s steps(7,end) .6s backwards;}
.calc-dialog.anim.en-escena .res-tabla tr:nth-child(2){animation:recibo-fila .18s steps(7,end) .75s backwards;}
.calc-dialog.anim.en-escena .res-tabla tr:nth-child(3){animation:recibo-fila .18s steps(7,end) .9s backwards;}
.calc-dialog.anim.en-escena .res-monto{animation:recibo-fila .18s steps(7,end) 1.2s backwards,golpe-seco .15s cubic-bezier(.2,.8,.3,1) 1.38s backwards;}
.calc-dialog.anim.en-escena .res-presc{animation:aparicion-seca .26s ease-out 1.6s backwards;}
.calc-dialog.anim.en-escena .res-wa{animation:aparicion-seca .26s ease-out 1.75s backwards;}
.calc-dialog.anim.en-escena .res-comprobante .hc-sello.stamped{animation:sello-estampado .45s cubic-bezier(.2,.75,.25,1) 2s backwards;}
/* ── FAQ (details/summary) ── */
.faq-item{position:relative;}
.faq-item summary .ico{transition:transform .2s cubic-bezier(.2,.75,.25,1);}
details[open] .faq-a{animation:compuerta .26s cubic-bezier(.25,.85,.3,1);transform-origin:top;}
.faq-item::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--ama);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.7,.05,.3,.95);}
details[open].faq-item::after{transform:scaleX(1);}
/* ── Blog card ── */
@media(prefers-reduced-motion:no-preference){.blog-card{animation:aparicion-seca .32s ease-out;}}
/* ── prefers-reduced-motion: todo lo decorativo se apaga ── */
@media(prefers-reduced-motion:reduce){
.hazard::before,.flecha,.marquee-in{animation:none!important;}
details[open] .faq-a{animation:none;}
.faq-item summary .ico,.faq-item::after{transition:none;}
.hero::before{transform:none;}
}
/* ═══════ PARCHE PRE-PUBLICACIÓN (Cowork) ═══════ */
/* FAQ: la regla de movimiento anulaba el centrado del "+" — se restaura el grid */
.faq-item summary .ico{display:grid;place-items:center;}
/* Calculadora: el reset *{margin:0} anulaba el centrado nativo del