/* FINDLEY LEGAL · Estilos compartidos por todas las páginas
   Mismo sistema que Hub, Home y Beauty: solo Plus Jakarta Sans (títulos en 800), logo apilado, etiquetas con rayita,
   palabra destacada con degradado (fondo oscuro) o subrayado (fondo claro) y animaciones al hacer scroll.
   Paleta propia: azul noche + oro, azul de acción y rojo solo para SOS. */
:root {
  --noche: #0a1120;
  --noche-2: #101a2f;
  --noche-3: #1a2642;
  --papel: #f6f4ef;
  --papel-2: #ece8df;
  --blanco: #fff;
  --oro: #c9a24b;
  --oro-2: #e6c77e;
  --azul: #2d5bff;
  --azul-2: #4a72ff;
  --azul-osc: #1c3fc4;
  --azul-suave: #e8eeff;
  --rojo: #e5484d;
  --rojo-2: #ff6369;
  --rojo-suave: #fdecec;
  --verde: #1f8a5b;
  --verde-suave: #e3f4ec;
  --ambar: #c98a12;
  --ambar-suave: #fdf3dc;
  --tinta: #121826;
  --gris: #5d6475;
  --gris-claro: #a3abbd;
  --linea: #e3dfd5;
  --linea-osc: rgba(200, 215, 255, .1);
  --wa: #25d366;
  --radio: 18px;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { font-family: "Plus Jakarta Sans", system-ui, sans-serif; color: var(--tinta); background: var(--papel); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: var(--azul); color: #fff; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.contenedor { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 22px; }
.angosto { max-width: 860px; }
.i { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.solo-movil { display: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; border-radius: 6px; }
em, .cursiva { font-family: var(--serif); font-style: italic; font-weight: 400; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; flex-direction: column; line-height: .82; font-weight: 800; letter-spacing: -.045em; font-size: 22px; }
.logo b { color: #fff; font-weight: 800; }
.logo i { color: var(--oro-2); font-style: normal; padding-left: .55em; }

/* ---------- Barra ---------- */
.barra { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .3s, box-shadow .3s; }
.barra .contenedor { display: flex; align-items: center; gap: 22px; height: 74px; }
.barra.con-fondo { background: rgba(10, 17, 32, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--linea-osc); }
.menu { display: flex; gap: 2px; margin-left: auto; }
.menu a { color: #c9d2e6; font-weight: 600; font-size: 14.5px; padding: 8px 13px; border-radius: 999px; transition: color .2s, background .2s; }
.menu a:hover, .menu a.activo { color: #fff; background: rgba(255, 255, 255, .08); }
.barra-acciones { display: flex; align-items: center; gap: 8px; }
.btn-sos { display: inline-flex; align-items: center; gap: 6px; background: var(--rojo); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .08em; padding: 9px 14px; border-radius: 999px; box-shadow: 0 0 0 0 rgba(229, 72, 77, .6); animation: latido 2.4s infinite; }
.btn-sos .i { width: 16px; height: 16px; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .55); } 70% { box-shadow: 0 0 0 12px rgba(229, 72, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); } }
.btn-menu { display: none; background: none; border: 0; color: #fff; width: 42px; height: 42px; border-radius: 12px; cursor: pointer; }
.btn-menu .i { width: 24px; height: 24px; margin: auto; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 14px 24px; font-weight: 700; font-size: 15px; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s, color .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn .i { width: 18px; height: 18px; }
.btn-azul { background: var(--azul); color: #fff; box-shadow: 0 10px 30px -10px rgba(45, 91, 255, .75); }
.btn-azul:hover { background: var(--azul-2); }
.btn-oro { background: var(--oro); color: var(--noche); }
.btn-oro:hover { background: var(--oro-2); }
.btn-rojo { background: var(--rojo); color: #fff; box-shadow: 0 10px 30px -10px rgba(229, 72, 77, .7); }
.btn-rojo:hover { background: var(--rojo-2); }
.btn-negro { background: var(--noche); color: #fff; }
.btn-negro:hover { background: var(--noche-3); }
.btn-claro { background: #fff; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--linea); }
.oscuro .btn-claro, .hero .btn-claro, .cabecera-pag .btn-claro { background: rgba(255,255,255,.07); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-chico { padding: 10px 18px; font-size: 14px; }
.btn-ancho { width: 100%; }
.botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.enlace { background: none; border: 0; color: var(--azul-osc); font-weight: 700; cursor: pointer; }
.oscuro .enlace { color: var(--oro-2); }
.enlace:hover { text-decoration: underline; }

/* ---------- Textos ---------- */
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 800; color: var(--azul-osc); margin-bottom: 10px; }
.oscuro .eyebrow, .hero .eyebrow, .cabecera-pag .eyebrow { color: var(--oro); }
h1, h2, h3 { letter-spacing: -.02em; line-height: 1.08; }
h1, h2 { font-family: var(--serif); font-weight: 400; }
h2 { font-size: clamp(32px, 4.4vw, 52px); }
h1 em, h2 em { color: var(--azul); font-weight: 500; }
.oscuro h2 em, .hero h1 em, .cabecera-pag h1 em { color: var(--oro-2); }
.titulo-seccion { display: grid; gap: 8px; margin-bottom: 36px; max-width: 760px; }
.titulo-seccion p:not(.eyebrow) { color: var(--gris); font-size: 17px; }
.oscuro .titulo-seccion p:not(.eyebrow) { color: var(--gris-claro); }
.centrado { text-align: center; margin-left: auto; margin-right: auto; }
.nota { font-size: 13.5px; color: var(--gris); }
.oscuro .nota { color: var(--gris-claro); }

/* ---------- Secciones ---------- */
.seccion { padding: 90px 0; }
.oscuro { background: var(--noche); color: #fff; }
.suave { background: var(--papel-2); }
.aviso-ejemplo { margin: 18px auto 0; background: #fff6d6; border: 1px solid #f0d77a; color: #6b5200; padding: 12px 18px; border-radius: 14px; font-size: 14.5px; }
.cabecera-pag .aviso-ejemplo { max-width: 760px; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--noche); color: #fff; padding: 132px 0 80px; overflow: hidden; }
.hero-fondo { position: absolute; inset: 0; background:
  radial-gradient(640px 420px at 85% 15%, rgba(45, 91, 255, .28), transparent 60%),
  radial-gradient(600px 380px at 0% 100%, rgba(201, 162, 75, .16), transparent 60%),
  linear-gradient(#0b1324, #070c18); }
.hero-fondo::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 60% 30%, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 60% 30%, #000 20%, transparent 70%); }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.hero h1 { font-size: clamp(42px, 6vw, 80px); margin-bottom: 20px; line-height: 1.02; }
.hero-sub { color: #c3cce0; font-size: 18.5px; max-width: 580px; }
.pregunta-hero { margin-top: 30px; background: #fff; color: var(--tinta); border-radius: 22px; padding: 8px; display: flex; gap: 6px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.7); max-width: 640px; }
.pregunta-hero label { flex: 1; display: grid; padding: 6px 14px; min-width: 0; }
.pregunta-hero span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--gris); }
.pregunta-hero input { border: 0; outline: none; font-weight: 600; font-size: 16px; padding: 3px 0; width: 100%; background: none; }
.pregunta-hero .btn { border-radius: 16px; }
.hero-rapidos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; max-width: 660px; }
.hero-rapidos button, .hero-rapidos a { font-size: 13.5px; font-weight: 600; color: #d5dcec; background: none; border: 1px solid rgba(255,255,255,.14); padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
.hero-rapidos button:hover, .hero-rapidos a:hover { background: rgba(255,255,255,.08); color: #fff; }
.hero-confianza { display: flex; gap: 26px; margin-top: 34px; flex-wrap: wrap; }
.hero-confianza div { display: grid; }
.hero-confianza b { font-size: 26px; letter-spacing: -.03em; }
.hero-confianza small { color: var(--gris-claro); font-size: 13px; }

/* Expediente animado del hero */
.expediente { position: relative; height: 520px; }
.exp-hoja { position: absolute; background: #fff; color: var(--tinta); border-radius: 20px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); }
.exp-atras { inset: 40px 40px 10px 60px; transform: rotate(6deg); background: #dfe5f3; opacity: .5; }
.exp-medio { inset: 26px 26px 20px 40px; transform: rotate(-3deg); background: #eef1f8; opacity: .8; }
.exp-frente { inset: 10px 10px 30px 20px; padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.exp-cab { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px dashed var(--linea); }
.exp-sello { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--azul-suave); color: var(--azul); flex: none; }
.exp-sello .i { width: 24px; height: 24px; }
.exp-cab small { display: block; color: var(--gris); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.exp-cab b { font-family: var(--serif); font-size: 22px; font-weight: 500; line-height: 1.15; display: block; }
.exp-cita { background: var(--papel); border-radius: 14px; padding: 12px 14px; font-size: 14.5px; color: #3c4356; min-height: 48px; }
.exp-cita::after { content: "▍"; color: var(--azul); animation: parpadeo 1s steps(2) infinite; margin-left: 1px; }
@keyframes parpadeo { 50% { opacity: 0; } }
.exp-pasos { list-style: none; display: grid; gap: 9px; }
.exp-pasos li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.exp-pasos li.ver { opacity: 1; transform: none; }
.exp-pasos li i { width: 22px; height: 22px; border-radius: 50%; background: var(--verde-suave); color: var(--verde); display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 12px; flex: none; }
.exp-pie { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--linea); font-size: 13.5px; }
.exp-pie b { color: var(--verde); }
.exp-chip { position: absolute; background: var(--noche-3); color: #fff; border: 1px solid rgba(255,255,255,.12); padding: 10px 14px; border-radius: 14px; font-size: 13px; font-weight: 700; display: flex; gap: 8px; align-items: center; box-shadow: 0 20px 40px -14px rgba(0,0,0,.7); animation: flotar 6s ease-in-out infinite; z-index: 3; }
.exp-chip .i { width: 18px; height: 18px; color: var(--oro-2); }
.exp-chip-1 { top: -6px; right: -14px; }
.exp-chip-2 { bottom: 4px; left: -26px; animation-delay: -3s; }
@keyframes flotar { 50% { translate: 0 -10px; } }

/* ---------- Cinta ---------- */
.cinta { background: var(--oro); color: var(--noche); overflow: hidden; padding: 13px 0; }
.cinta-pista { display: flex; gap: 46px; width: max-content; animation: deslizar 40s linear infinite; font-weight: 800; font-size: 14.5px; text-transform: uppercase; letter-spacing: .08em; }
.cinta-pista span { display: flex; align-items: center; gap: 46px; white-space: nowrap; }
.cinta-pista span::after { content: "§"; font-family: var(--serif); font-size: 18px; }
@keyframes deslizar { to { transform: translateX(-50%); } }

/* ---------- 10 herramientas ---------- */
.diez { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.diez a { position: relative; background: var(--noche-2); border: 1px solid var(--linea-osc); border-radius: 20px; padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 10px; min-height: 220px; overflow: hidden; transition: transform .3s, border-color .3s, background .3s; }
.diez a::before { content: ""; position: absolute; width: 180px; height: 180px; right: -60px; top: -60px; border-radius: 50%; background: radial-gradient(closest-side, rgba(45, 91, 255, .35), transparent); opacity: 0; transition: opacity .3s; }
.diez a:hover { transform: translateY(-6px); border-color: rgba(230, 199, 126, .4); background: var(--noche-3); }
.diez a:hover::before { opacity: 1; }
.diez-n { font-family: var(--serif); font-size: 15px; color: var(--oro); font-style: italic; }
.diez-ico { width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.06); display: grid; place-items: center; color: var(--oro-2); }
.diez-ico .i { width: 24px; height: 24px; }
.diez h3 { font-size: 17px; letter-spacing: -.01em; }
.diez p { color: var(--gris-claro); font-size: 13.5px; line-height: 1.5; }
.diez-ir { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--azul-2); }

/* ---------- Diagnóstico ---------- */
.diag { background: #fff; border-radius: 28px; box-shadow: 0 40px 80px -40px rgba(10, 17, 32, .35); border: 1px solid var(--linea); overflow: hidden; display: grid; grid-template-columns: 300px 1fr; min-height: 520px; }
.diag-lado { background: var(--noche); color: #fff; padding: 30px 26px; display: flex; flex-direction: column; gap: 18px; }
.diag-lado h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; }
.diag-pasos { list-style: none; display: grid; gap: 4px; counter-reset: p; }
.diag-pasos li { counter-increment: p; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--gris-claro); font-weight: 600; font-size: 14.5px; }
.diag-pasos li::before { content: counter(p); width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.2); display: grid; place-items: center; font-size: 13px; flex: none; }
.diag-pasos li.activo { background: rgba(255,255,255,.07); color: #fff; }
.diag-pasos li.activo::before { background: var(--azul); border-color: var(--azul); }
.diag-pasos li.hecho::before { content: "✓"; background: var(--verde); border-color: var(--verde); color: #fff; }
.diag-lado .nota { margin-top: auto; }
.diag-cuerpo { padding: 32px 34px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.diag-cuerpo h4 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; }
.diag-ops { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.diag-op { text-align: left; background: var(--papel); border: 1.5px solid transparent; border-radius: 16px; padding: 14px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: border-color .2s, transform .2s, background .2s; }
.diag-op:hover { border-color: var(--azul); transform: translateY(-2px); background: #fff; }
.diag-op .i { width: 24px; height: 24px; color: var(--azul); }
.diag-op b { font-size: 15px; line-height: 1.25; }
.diag-op small { color: var(--gris); font-size: 12.5px; line-height: 1.35; }
.diag-lista { display: grid; gap: 8px; }
.diag-lista .diag-op { flex-direction: row; align-items: center; gap: 14px; }
.diag-lista .diag-op::after { content: "→"; margin-left: auto; color: var(--azul); font-weight: 800; }
.diag-volver { align-self: flex-start; }
.diag-res { display: grid; gap: 16px; animation: entrar .4s ease; }
.diag-res-cab { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.urg { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; padding: 6px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: .06em; }
.urg::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.urg-alta { background: var(--rojo-suave); color: var(--rojo); }
.urg-media { background: var(--ambar-suave); color: var(--ambar); }
.urg-baja { background: var(--verde-suave); color: var(--verde); }
.diag-pasos-res { list-style: none; display: grid; gap: 10px; counter-reset: r; }
.diag-pasos-res li { counter-increment: r; display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; background: var(--papel); border-radius: 14px; padding: 12px 14px; font-size: 15px; }
.diag-pasos-res li::before { content: counter(r); width: 30px; height: 30px; border-radius: 10px; background: var(--azul); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.diag-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.diag-datos div { border: 1px solid var(--linea); border-radius: 14px; padding: 12px 14px; }
.diag-datos small { display: block; color: var(--gris); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.diag-datos b { font-size: 16px; }

/* ---------- Áreas ---------- */
.areas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.area { text-align: left; background: #fff; border: 1px solid var(--linea); border-radius: 20px; padding: 22px 20px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; transition: transform .25s, box-shadow .25s, border-color .25s; }
.area:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(10,17,32,.35); border-color: transparent; }
.area-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--azul-suave); color: var(--azul); }
.area-ico .i { width: 25px; height: 25px; }
.area h3 { font-size: 17px; }
.area p { color: var(--gris); font-size: 13.5px; line-height: 1.45; }
.area small { margin-top: auto; font-weight: 700; font-size: 13px; color: var(--azul-osc); }

/* ---------- Bloque "Me pararon" (inicio) ---------- */
.pararon { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.licencia { position: relative; background: linear-gradient(135deg, #1d2c52, #0f1a33); border: 1px solid rgba(255,255,255,.12); border-radius: 24px; padding: 26px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); transform: rotate(-2deg); }
.licencia h4 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--oro-2); margin-bottom: 14px; }
.mini-docs { list-style: none; display: grid; gap: 8px; }
.mini-docs li { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.05); border-radius: 12px; padding: 10px 14px; font-weight: 600; font-size: 14.5px; }
.mini-docs li i { width: 24px; height: 24px; border-radius: 7px; background: var(--verde); display: grid; place-items: center; font-style: normal; font-size: 13px; flex: none; }

/* ---------- Tarjetas de profesionales ---------- */
.pros { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.pro { background: #fff; border: 1px solid var(--linea); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; transition: transform .25s, box-shadow .25s; }
.pro:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(10,17,32,.4); }
.pro-cab { display: flex; gap: 14px; align-items: center; }
.avatar { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-weight: 800; font-size: 20px; color: #fff; flex: none; position: relative; letter-spacing: -.03em; }
.avatar .ok { position: absolute; right: -5px; bottom: -5px; width: 22px; height: 22px; border-radius: 50%; background: var(--azul); border: 2.5px solid #fff; display: grid; place-items: center; font-size: 11px; }
.pro-cab b { display: block; font-size: 16.5px; line-height: 1.2; }
.pro-cab small { color: var(--gris); font-size: 13px; }
.pro-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--papel-2); color: #3c4356; }
.tag-azul { background: var(--azul-suave); color: var(--azul-osc); }
.tag-oro { background: #f7edd4; color: #7a5a12; }
.tag-verde { background: var(--verde-suave); color: var(--verde); }
.pro-frase { font-family: var(--serif); font-style: italic; font-size: 16px; color: #3c4356; line-height: 1.4; }
.pro-pie { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--linea); font-size: 14px; }
.pro-pie b { font-size: 18px; }
.estrellas { color: var(--oro); font-weight: 800; }
.estrellas small { color: var(--gris); font-weight: 600; }
.hoy { color: var(--verde); font-weight: 700; font-size: 12.5px; display: inline-flex; gap: 6px; align-items: center; }
.hoy::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px var(--verde-suave); }
.carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
.carrusel > * { scroll-snap-align: start; }

/* ---------- Filtros ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--linea); border-radius: 20px; padding: 12px; margin-bottom: 22px; }
.filtros input, .filtros select { border: 1.5px solid var(--linea); border-radius: 12px; padding: 10px 14px; background: var(--papel); font-weight: 600; font-size: 14px; outline: none; min-width: 0; }
.filtros input[type=search] { flex: 1 1 220px; }
.filtros input:focus, .filtros select:focus { border-color: var(--azul); }
.pildoras { display: flex; flex-wrap: wrap; gap: 8px; }
.pildora { border: 1.5px solid var(--linea); background: #fff; border-radius: 999px; padding: 8px 15px; font-weight: 700; font-size: 13.5px; cursor: pointer; transition: all .2s; }
.pildora:hover { border-color: var(--azul); }
.pildora.activo { background: var(--noche); color: #fff; border-color: var(--noche); }
.oscuro .pildora { background: transparent; color: #d5dcec; border-color: rgba(255,255,255,.18); }
.oscuro .pildora.activo { background: var(--oro); color: var(--noche); border-color: var(--oro); }
.resultado-cuenta { color: var(--gris); font-weight: 600; font-size: 14px; margin-bottom: 14px; }
.vacio { text-align: center; padding: 50px 20px; color: var(--gris); grid-column: 1 / -1; }

/* ---------- Cabecera de páginas internas ---------- */
.cabecera-pag { position: relative; background: var(--noche); color: #fff; padding: 136px 0 64px; overflow: hidden; }
.cabecera-pag::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 360px at 90% 0%, rgba(45, 91, 255, .25), transparent 60%), radial-gradient(500px 300px at 0% 100%, rgba(201, 162, 75, .14), transparent 60%); }
.cabecera-pag .contenedor { position: relative; }
.cabecera-pag h1 { font-size: clamp(40px, 5.6vw, 70px); margin-bottom: 14px; max-width: 900px; }
.cabecera-pag p.sub { color: #c3cce0; font-size: 18px; max-width: 700px; }
.saltos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.saltos a { font-size: 13.5px; font-weight: 700; color: #d5dcec; border: 1px solid rgba(255,255,255,.16); padding: 8px 15px; border-radius: 999px; transition: background .2s; }
.saltos a:hover { background: rgba(255,255,255,.08); color: #fff; }

/* ---------- Me pararon: checklist ---------- */
.control { display: grid; grid-template-columns: 1.2fr .8fr; gap: 30px; align-items: start; }
.vehiculos { margin-bottom: 18px; }
.docs { list-style: none; display: grid; gap: 10px; }
.doc { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; background: #fff; border: 1.5px solid var(--linea); border-radius: 18px; padding: 16px 18px; cursor: pointer; transition: border-color .2s, background .2s; user-select: none; }
.doc:hover { border-color: var(--azul); }
.doc-check { width: 30px; height: 30px; border-radius: 10px; border: 2px solid var(--linea); display: grid; place-items: center; transition: all .25s; color: transparent; font-weight: 800; }
.doc.ok { background: var(--verde-suave); border-color: rgba(31, 138, 91, .35); }
.doc.ok .doc-check { background: var(--verde); border-color: var(--verde); color: #fff; transform: scale(1.08); }
.doc b { display: block; font-size: 15.5px; }
.doc small { display: block; color: var(--gris); font-size: 13.5px; line-height: 1.45; }
.doc .tag { white-space: nowrap; }
.medidor { position: sticky; top: 96px; background: var(--noche); color: #fff; border-radius: 24px; padding: 28px; text-align: center; display: grid; gap: 14px; }
.anillo { width: 180px; height: 180px; margin: 0 auto; position: relative; }
.anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 12; }
.anillo .fondo-a { stroke: rgba(255,255,255,.08); }
.anillo .valor-a { stroke: var(--oro); stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1), stroke .3s; }
.anillo div { position: absolute; inset: 0; display: grid; place-content: center; }
.anillo b { font-size: 44px; letter-spacing: -.04em; line-height: 1; }
.anillo small { color: var(--gris-claro); font-size: 13px; }
.medidor h4 { font-family: var(--serif); font-weight: 400; font-size: 24px; }
.medidor p { color: var(--gris-claro); font-size: 14.5px; }

.derechos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.derecho { background: var(--noche-2); border: 1px solid var(--linea-osc); border-radius: 20px; padding: 22px; }
.derecho-n { font-family: var(--serif); font-style: italic; color: var(--oro); font-size: 30px; line-height: 1; }
.derecho h3 { font-size: 17px; margin: 10px 0 6px; }
.derecho p { color: var(--gris-claro); font-size: 14px; }
.guion { margin-top: 26px; background: var(--noche-3); border-radius: 22px; padding: 26px; display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.guion-ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--oro); color: var(--noche); }
.guion-ico .i { width: 28px; height: 28px; }
.guion p { font-family: var(--serif); font-size: 20px; font-style: italic; line-height: 1.45; }

/* ---------- Calculadora de papeletas ---------- */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.caja { background: #fff; border: 1px solid var(--linea); border-radius: 24px; padding: 26px; }
.caja h3 { font-size: 20px; margin-bottom: 14px; }
.infra-lista { display: grid; gap: 8px; max-height: 470px; overflow: auto; padding-right: 4px; }
.infra { text-align: left; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; background: var(--papel); border: 1.5px solid transparent; border-radius: 14px; padding: 12px 14px; cursor: pointer; transition: border-color .2s, background .2s; }
.infra:hover { border-color: var(--azul); }
.infra.activo { border-color: var(--azul); background: var(--azul-suave); }
.infra b { font-size: 14.5px; line-height: 1.3; }
.grav { width: 12px; height: 12px; border-radius: 50%; }
.grav-mg { background: var(--rojo); }
.grav-g { background: var(--ambar); }
.grav-l { background: var(--verde); }
.infra span { font-weight: 800; font-size: 14px; white-space: nowrap; }
.multa { background: var(--noche); color: #fff; border: 0; position: sticky; top: 96px; }
.multa-monto { font-size: clamp(46px, 6vw, 68px); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: 6px 0; }
.multa-tabla { display: grid; grid-template-columns: 1fr auto; gap: 0; margin: 18px 0; border-top: 1px solid var(--linea-osc); }
.multa-tabla dt, .multa-tabla dd { padding: 11px 0; border-bottom: 1px solid var(--linea-osc); font-size: 14.5px; }
.multa-tabla dt { color: var(--gris-claro); }
.multa-tabla dd { font-weight: 700; text-align: right; }
.ahorro { background: rgba(31,138,91,.18); color: #7fe0b2; border-radius: 14px; padding: 12px 14px; font-weight: 700; font-size: 14.5px; }
.sin-ahorro { background: rgba(229,72,77,.15); color: #ffb3b6; }
.puntos { height: 10px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 8px; }
.puntos div { height: 100%; background: linear-gradient(90deg, var(--oro), var(--rojo)); border-radius: inherit; transition: width .6s; }

/* ---------- Pasos / línea de tiempo ---------- */
.linea-tiempo { list-style: none; display: grid; gap: 0; position: relative; counter-reset: lt; }
.linea-tiempo li { counter-increment: lt; position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding-bottom: 28px; }
.linea-tiempo li::before { content: counter(lt); width: 56px; height: 56px; border-radius: 18px; background: var(--noche); color: var(--oro-2); font-family: var(--serif); font-size: 26px; display: grid; place-items: center; position: relative; z-index: 1; }
.linea-tiempo li::after { content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; width: 2px; background: var(--linea); }
.linea-tiempo li:last-child::after { display: none; }
.linea-tiempo h3 { font-size: 19px; margin: 6px 0 4px; }
.linea-tiempo p { color: var(--gris); }
.linea-tiempo .tag { margin-top: 8px; display: inline-block; }
.oscuro .linea-tiempo li::before { background: var(--oro); color: var(--noche); }
.oscuro .linea-tiempo li::after { background: rgba(255,255,255,.12); }
.oscuro .linea-tiempo p { color: var(--gris-claro); }

.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.lista-check { list-style: none; display: grid; gap: 10px; }
.lista-check li { display: flex; gap: 12px; align-items: flex-start; }
.lista-check li::before { content: "✓"; width: 24px; height: 24px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--verde-suave); color: var(--verde); font-weight: 800; font-size: 13px; margin-top: 1px; }
.lista-x li::before { content: "✕"; background: var(--rojo-suave); color: var(--rojo); }

/* ---------- Simulador conciliación ---------- */
.simu { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; align-items: stretch; }
.campo { display: grid; gap: 6px; margin-bottom: 16px; }
.campo > span { font-size: 13px; font-weight: 800; color: var(--gris); text-transform: uppercase; letter-spacing: .06em; }
.campo input, .campo select, .campo textarea { border: 1.5px solid var(--linea); border-radius: 14px; padding: 12px 14px; background: var(--papel); font-weight: 600; outline: none; width: 100%; transition: border-color .2s, background .2s; }
.campo textarea { resize: vertical; min-height: 90px; font-weight: 500; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--azul); background: #fff; }
.campo input[type=range] { padding: 0; accent-color: var(--azul); background: none; border: 0; }
.rango-valor { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.duelo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.duelo-lado { border-radius: 20px; padding: 22px; display: grid; gap: 14px; align-content: start; }
.duelo-lado h4 { font-family: var(--serif); font-weight: 400; font-size: 26px; }
.duelo-bueno { background: var(--noche); color: #fff; box-shadow: 0 0 0 2px var(--oro); }
.duelo-malo { background: #fff; border: 1px solid var(--linea); }
.metrica small { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--gris-claro); }
.duelo-malo .metrica small { color: var(--gris); }
.metrica b { font-size: 24px; letter-spacing: -.02em; }
.barrita { height: 8px; background: rgba(128,128,128,.15); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.barrita div { height: 100%; border-radius: inherit; transition: width .7s cubic-bezier(.2,.8,.2,1); }
.duelo-bueno .barrita div { background: var(--oro); }
.duelo-malo .barrita div { background: var(--rojo); }
.duelo-veredicto { grid-column: 1 / -1; background: var(--verde-suave); color: #135e3d; border-radius: 16px; padding: 14px 18px; font-weight: 700; }

/* ---------- Herramientas (pestañas) ---------- */
.pestanas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.pestanas button { border: 1.5px solid var(--linea); background: #fff; border-radius: 999px; padding: 10px 18px; font-weight: 700; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; transition: all .2s; }
.pestanas button .i { width: 18px; height: 18px; }
.pestanas button.activo { background: var(--noche); color: #fff; border-color: var(--noche); }

/* Generador de documentos */
.gen { display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; align-items: start; }
.plantillas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
.plantillas button { text-align: left; border: 1.5px solid var(--linea); background: var(--papel); border-radius: 14px; padding: 11px 13px; cursor: pointer; font-weight: 700; font-size: 13.5px; line-height: 1.3; transition: all .2s; }
.plantillas button.activo { border-color: var(--azul); background: var(--azul-suave); color: var(--azul-osc); }
.hoja { position: sticky; top: 96px; background: #fff; border-radius: 6px; box-shadow: 0 30px 60px -30px rgba(10,17,32,.45), 0 0 0 1px var(--linea); padding: 52px 54px; font-family: var(--serif); font-size: 16.5px; line-height: 1.65; color: #1a1f2c; white-space: pre-wrap; min-height: 640px; max-height: calc(100dvh - 120px); overflow: auto; }
.hoja mark { background: #fff1c2; color: inherit; border-radius: 3px; padding: 0 2px; }
.hoja-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* Liquidación */
.liq { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.liq-total { background: var(--noche); color: #fff; border: 0; position: sticky; top: 96px; }
.liq-total .multa-monto { color: var(--oro-2); }
.liq-filas { display: grid; gap: 10px; margin: 18px 0; }
.liq-fila { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; background: rgba(255,255,255,.05); border-radius: 14px; padding: 12px 14px; }
.liq-fila b { font-size: 15px; }
.liq-fila span { font-weight: 800; font-size: 16px; text-align: right; }
.liq-fila small { grid-column: 1 / -1; color: var(--gris-claro); font-size: 12.5px; }
.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Plazos */
.plazo-res { background: var(--noche); color: #fff; border: 0; display: grid; gap: 16px; position: sticky; top: 96px; }
.cuenta-atras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cuenta-atras div { background: rgba(255,255,255,.06); border-radius: 16px; padding: 14px 10px; text-align: center; }
.cuenta-atras b { display: block; font-size: 36px; letter-spacing: -.04em; line-height: 1; }
.cuenta-atras small { color: var(--gris-claro); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-size: 12.5px; text-align: center; }
.calendario .cd { padding: 7px 0; border-radius: 8px; color: var(--gris-claro); }
.calendario .dn { font-weight: 800; font-size: 11px; color: var(--gris-claro); text-transform: uppercase; }
.calendario .cuenta { background: rgba(45, 91, 255, .35); color: #fff; font-weight: 700; }
.calendario .feriado { background: rgba(229, 72, 77, .25); color: #ffb3b6; text-decoration: line-through; }
.calendario .inicio { outline: 2px solid var(--gris-claro); }
.calendario .fin { background: var(--oro); color: var(--noche); font-weight: 800; }
.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--gris-claro); }
.leyenda span { display: inline-flex; gap: 6px; align-items: center; }
.leyenda i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }

/* Semáforo de contratos */
.sema { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.sema textarea { min-height: 380px; font-family: var(--serif); font-size: 16px; line-height: 1.6; }
.sema-luces { display: flex; gap: 10px; background: var(--noche); padding: 10px 14px; border-radius: 999px; width: max-content; }
.sema-luces i { width: 22px; height: 22px; border-radius: 50%; opacity: .2; transition: opacity .3s, box-shadow .3s; }
.sema-luces i:nth-child(1) { background: var(--rojo); }
.sema-luces i:nth-child(2) { background: #f5b82e; }
.sema-luces i:nth-child(3) { background: #2fd37f; }
.sema-luces i.on { opacity: 1; box-shadow: 0 0 18px currentColor; }
.sema-luces i.on:nth-child(1) { color: var(--rojo); }
.sema-luces i.on:nth-child(2) { color: #f5b82e; }
.sema-luces i.on:nth-child(3) { color: #2fd37f; }
.sema-texto { background: #fff; border: 1px solid var(--linea); border-radius: 18px; padding: 22px; font-family: var(--serif); font-size: 16px; line-height: 1.7; white-space: pre-wrap; max-height: 340px; overflow: auto; }
.sema-texto mark { border-radius: 4px; padding: 1px 3px; cursor: help; }
.sema-texto mark.rojo { background: #ffd9da; box-shadow: inset 0 -2px 0 var(--rojo); }
.sema-texto mark.ambar { background: #ffefc4; box-shadow: inset 0 -2px 0 #f5b82e; }
.alertas { display: grid; gap: 10px; margin-top: 14px; }
.alerta { border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; font-size: 14px; border-left: 5px solid; }
.alerta b { font-size: 14.5px; }
.alerta.rojo { background: var(--rojo-suave); border-color: var(--rojo); }
.alerta.ambar { background: var(--ambar-suave); border-color: #f5b82e; }
.alerta.verde { background: var(--verde-suave); border-color: var(--verde); }

/* ---------- Diccionario ---------- */
.dic-barra { position: sticky; top: 74px; z-index: 20; background: var(--papel); padding: 16px 0 12px; }
.dic-buscar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.dic-buscar input { flex: 1 1 280px; border: 1.5px solid var(--linea); border-radius: 16px; padding: 14px 18px; font-size: 16px; font-weight: 600; background: #fff; outline: none; }
.dic-buscar input:focus { border-color: var(--azul); }
.interruptor { display: inline-flex; background: #fff; border: 1.5px solid var(--linea); border-radius: 999px; padding: 4px; }
.interruptor button { border: 0; background: none; padding: 9px 16px; border-radius: 999px; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.interruptor button.activo { background: var(--noche); color: #fff; }
.letras { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.letras button { width: 34px; height: 34px; border-radius: 10px; border: 0; background: #fff; font-weight: 800; font-size: 13.5px; cursor: pointer; }
.letras button:disabled { opacity: .3; cursor: default; }
.letras button.activo { background: var(--azul); color: #fff; }
.terminos { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.termino { background: #fff; border: 1px solid var(--linea); border-radius: 20px; padding: 22px; display: grid; gap: 8px; align-content: start; }
.termino h3 { font-family: var(--serif); font-weight: 500; font-size: 25px; letter-spacing: -.01em; }
.termino p { color: #3c4356; font-size: 15px; }
.termino .ej { background: var(--papel); border-radius: 12px; padding: 10px 12px; font-size: 14px; color: var(--gris); }
.termino .ej b { color: var(--tinta); }
.termino-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.termino-dia { background: var(--noche); color: #fff; border-radius: 26px; padding: 34px; display: grid; grid-template-columns: auto 1fr; gap: 30px; align-items: center; margin-bottom: 30px; }
.termino-dia .grande { font-family: var(--serif); font-size: clamp(40px, 6vw, 72px); color: var(--oro-2); line-height: 1; }
.termino-dia p { color: #c3cce0; font-size: 17px; }

/* ---------- SOS ---------- */
.sos-cab { background: linear-gradient(135deg, #3a0d12, #0a1120 70%); }
.sos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sos-tarjeta { text-align: left; background: #fff; border: 1.5px solid var(--linea); border-radius: 22px; padding: 22px; cursor: pointer; display: flex; flex-direction: column; gap: 10px; transition: all .2s; }
.sos-tarjeta:hover { border-color: var(--rojo); transform: translateY(-3px); }
.sos-tarjeta.activo { border-color: var(--rojo); background: var(--rojo-suave); }
.sos-tarjeta .area-ico { background: var(--rojo-suave); color: var(--rojo); }
.sos-tarjeta h3 { font-size: 18px; }
.sos-tarjeta p { color: var(--gris); font-size: 14px; }
.sos-detalle { margin-top: 26px; background: #fff; border-radius: 26px; border: 1px solid var(--linea); padding: 30px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 30px; animation: entrar .35s ease; }
.sos-detalle h3 { font-family: var(--serif); font-weight: 400; font-size: 32px; margin-bottom: 14px; }
.sos-detalle h4 { font-size: 14px; text-transform: uppercase; letter-spacing: .1em; color: var(--gris); margin: 18px 0 10px; }
.numeros { display: grid; gap: 8px; }
.numero { display: flex; align-items: center; gap: 14px; background: var(--noche); color: #fff; border-radius: 16px; padding: 12px 16px; transition: background .2s; }
.numero:hover { background: var(--noche-3); }
.numero b { font-size: 24px; letter-spacing: -.02em; min-width: 92px; color: var(--oro-2); }
.numero small { color: var(--gris-claro); display: block; font-size: 12.5px; }
.numero span { font-weight: 700; font-size: 14.5px; }
.turno { background: var(--rojo); color: #fff; border-radius: 22px; padding: 22px; display: grid; gap: 10px; margin-top: 14px; }
.turno h4 { color: #fff; margin: 0; }
.turno .btn { background: #fff; color: var(--rojo); }

/* ---------- Cómo funciona ---------- */
.pasos3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: c; }
.paso3 { counter-increment: c; background: #fff; border: 1px solid var(--linea); border-radius: 22px; padding: 26px; }
.paso3::before { content: "0" counter(c); font-family: var(--serif); font-style: italic; font-size: 44px; color: var(--oro); line-height: 1; display: block; margin-bottom: 10px; }
.paso3 h3 { font-size: 19px; margin-bottom: 6px; }
.paso3 p { color: var(--gris); }
.precios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 26px; }
.precio { background: var(--papel-2); border-radius: 18px; padding: 18px; }
.precio small { color: var(--gris); font-weight: 700; font-size: 13px; }
.precio b { display: block; font-size: 26px; letter-spacing: -.03em; }

/* ---------- Planes ---------- */
.planes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
.plan { background: var(--noche-2); border: 1px solid var(--linea-osc); border-radius: 24px; padding: 26px 22px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.plan.destacado { background: linear-gradient(160deg, #1d2f63, #101a2f); border-color: var(--oro); transform: translateY(-10px); }
.plan-sello { position: absolute; top: -12px; left: 22px; background: var(--oro); color: var(--noche); font-size: 11.5px; font-weight: 800; padding: 5px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: .08em; }
.plan h3 { font-size: 19px; }
.plan-precio { font-size: 40px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.plan-precio small { font-size: 15px; color: var(--gris-claro); font-weight: 600; letter-spacing: 0; }
.plan > p { color: var(--gris-claro); font-size: 14px; }
.plan ul { list-style: none; display: grid; gap: 8px; font-size: 14px; color: #d5dcec; }
.plan li { display: flex; gap: 10px; }
.plan li::before { content: "✓"; color: var(--oro-2); font-weight: 800; }
.plan .btn { margin-top: auto; }

/* ---------- Banda CTA ---------- */
.banda { background: linear-gradient(120deg, var(--azul-osc), var(--azul)); color: #fff; border-radius: 28px; padding: 40px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.banda h2 { font-size: clamp(28px, 3.6vw, 42px); }
.banda p { color: #dfe6ff; margin-top: 6px; }
.banda .btn-claro { background: #fff; color: var(--azul-osc); box-shadow: none; }

/* ---------- Preguntas ---------- */
.preguntas { display: grid; gap: 10px; }
.pregunta { background: #fff; border: 1px solid var(--linea); border-radius: 18px; overflow: hidden; }
.pregunta button { width: 100%; text-align: left; background: none; border: 0; padding: 18px 22px; font-weight: 700; font-size: 16px; cursor: pointer; display: flex; justify-content: space-between; gap: 14px; }
.pregunta button::after { content: "+"; font-size: 22px; line-height: 1; color: var(--azul); transition: transform .3s; }
.pregunta button[aria-expanded="true"]::after { transform: rotate(45deg); }
.pregunta div { display: none; padding: 0 22px 20px; color: var(--gris); }
.pregunta button[aria-expanded="true"] + div { display: block; }

/* ---------- Únete (formulario) ---------- */
.unete { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start; }
.form-caja { background: #fff; color: var(--tinta); border-radius: 26px; padding: 30px; }

/* ---------- Ficha (perfil del profesional) ---------- */
.ficha { border: 0; padding: 0; margin: auto; width: min(980px, calc(100% - 24px)); max-height: calc(100dvh - 24px); border-radius: 26px; background: #fff; color: var(--tinta); box-shadow: 0 40px 100px -20px rgba(0,0,0,.7); }
.ficha::backdrop { background: rgba(5, 9, 18, .78); backdrop-filter: blur(6px); }
.ficha[open] { animation: entrar .3s ease; }
@keyframes entrar { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.ficha-caja { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.ficha-cerrar { position: absolute; top: 14px; right: 14px; z-index: 5; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--papel-2); font-size: 17px; cursor: pointer; }
.ficha-perfil { background: var(--noche); color: #fff; padding: 34px 30px; display: grid; gap: 14px; align-content: start; }
.ficha-perfil .avatar { width: 84px; height: 84px; font-size: 30px; border-radius: 24px; }
.ficha-perfil h2 { font-size: 34px; }
.ficha-perfil .pro-frase { color: #c3cce0; }
.ficha-tabla { display: grid; grid-template-columns: auto 1fr; border: 1px solid var(--linea-osc); border-radius: 14px; overflow: hidden; font-size: 14px; }
.ficha-tabla dt, .ficha-tabla dd { padding: 9px 14px; border-bottom: 1px solid var(--linea-osc); }
.ficha-tabla dt { color: var(--gris-claro); font-weight: 600; }
.ficha-tabla dd { font-weight: 700; }
.ficha-tabla dt:last-of-type, .ficha-tabla dd:last-of-type { border-bottom: 0; }
.ficha-reserva { padding: 34px 30px; display: grid; gap: 16px; align-content: start; overflow: auto; max-height: calc(100dvh - 24px); }
.ficha-reserva h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; }
.dias, .horas { display: flex; gap: 8px; flex-wrap: wrap; }
.dias button, .horas button { border: 1.5px solid var(--linea); background: #fff; border-radius: 14px; padding: 9px 12px; font-weight: 700; font-size: 13.5px; cursor: pointer; transition: all .2s; }
.dias button { display: grid; text-align: center; min-width: 62px; line-height: 1.2; }
.dias button small { font-size: 11px; color: var(--gris); text-transform: uppercase; }
.dias button.activo, .horas button.activo { background: var(--azul); border-color: var(--azul); color: #fff; }
.dias button.activo small { color: #dfe6ff; }
.horas button:disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.resena { background: var(--papel); border-radius: 14px; padding: 12px 14px; font-size: 14px; }
.resena b { display: block; font-size: 13px; }

/* ---------- Pie ---------- */
.pie { background: var(--noche); color: #c3cce0; padding: 70px 0 26px; }
.pie-top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--linea-osc); margin-bottom: 40px; }
.pie-marca p { margin-top: 16px; max-width: 440px; font-size: 15px; }
.pie-grupo b { color: #fff; }
.pie-boletin h4 { font-family: var(--serif); font-weight: 400; color: #fff; font-size: 26px; }
.pie-boletin p { font-size: 14.5px; margin: 4px 0 12px; }
.pie-boletin div { display: flex; gap: 8px; background: rgba(255,255,255,.06); padding: 6px; border-radius: 999px; }
.pie-boletin input { flex: 1; min-width: 0; border: 0; background: none; padding: 0 14px; color: #fff; outline: none; }
.pie-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.pie-grid h4 { color: #fff; font-size: 14px; margin-bottom: 12px; }
.pie-grid ul { list-style: none; display: grid; gap: 8px; font-size: 14px; }
.pie-grid a { cursor: pointer; transition: color .2s; }
.pie-grid a:hover { color: var(--oro-2); }
.pie-legal { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--linea-osc); font-size: 13px; color: var(--gris-claro); }

/* ---------- Flotantes ---------- */
.wa-flotante { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 58px; height: 58px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px -8px rgba(37, 211, 102, .6); cursor: pointer; transition: transform .2s; }
.wa-flotante:hover { transform: scale(1.08); }
.wa-flotante svg { width: 30px; height: 30px; }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 30px); background: var(--noche); color: #fff; padding: 13px 22px; border-radius: 14px; font-weight: 600; font-size: 14.5px; opacity: 0; pointer-events: none; transition: all .3s; z-index: 100; box-shadow: 0 20px 40px -14px rgba(0,0,0,.5); max-width: calc(100% - 32px); }
.toast.ver { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Animaciones al hacer scroll ---------- */
.revelar { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
.revelar.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .revelar { opacity: 1; transform: none; }
}

/* ---------- Impresión (documentos generados) ---------- */
@media print {
  body * { visibility: hidden; }
  .hoja, .hoja * { visibility: visible; }
  .hoja { position: absolute; inset: 0; box-shadow: none; max-height: none; overflow: visible; padding: 0; }
  .hoja mark { background: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .diez { grid-template-columns: repeat(3, 1fr); }
  .areas { grid-template-columns: repeat(3, 1fr); }
  .planes { grid-template-columns: repeat(2, 1fr); }
  .plan.destacado { transform: none; }
  .pie-grid { grid-template-columns: repeat(3, 1fr); }
  .menu a { padding: 8px 9px; font-size: 14px; }
}
@media (max-width: 960px) {
  .solo-escritorio { display: none; }
  .solo-movil { display: block; }
  .btn-menu { display: block; }
  .menu { position: fixed; top: 74px; left: 0; right: 0; flex-direction: column; background: var(--noche); padding: 12px 18px 22px; gap: 2px; transform: translateY(-120%); transition: transform .35s; box-shadow: 0 30px 40px -20px rgba(0,0,0,.6); margin: 0; }
  .menu.abierto { transform: none; }
  .menu a { padding: 13px 14px; font-size: 16px; border-radius: 12px; }
  .barra-acciones { margin-left: auto; }
  .hero-grid, .pararon, .control, .calc, .simu, .gen, .liq, .sema, .dos-col, .unete, .sos-detalle { grid-template-columns: 1fr; }
  .expediente { height: 480px; max-width: 520px; width: 100%; margin: 0 auto; }
  .diag { grid-template-columns: 1fr; }
  .diag-lado { padding: 22px; }
  .diag-pasos { grid-template-columns: repeat(4, auto); overflow-x: auto; }
  .diag-pasos li span { display: none; }
  .diag-lado .nota { display: none; }
  .derechos, .sos-grid, .pasos3 { grid-template-columns: 1fr 1fr; }
  .precios { grid-template-columns: 1fr 1fr; }
  .medidor, .multa, .hoja, .liq-total, .plazo-res { position: static; }
  .hoja { min-height: 0; max-height: none; padding: 32px 26px; }
  .banda { grid-template-columns: 1fr; }
  .ficha-caja { grid-template-columns: 1fr; }
  .ficha-reserva { max-height: none; }
  .ficha { overflow: auto; }
  .pie-top { grid-template-columns: 1fr; }
  .termino-dia { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 640px) {
  .contenedor { padding: 0 16px; }
  .seccion { padding: 64px 0; }
  .hero { padding: 112px 0 56px; }
  .pregunta-hero { flex-direction: column; }
  .pregunta-hero .btn { width: 100%; }
  .diez, .areas { grid-template-columns: 1fr 1fr; gap: 10px; }
  .diez a { min-height: 0; padding: 18px 16px; }
  .diez p, .area p { display: none; }
  .derechos, .sos-grid, .pasos3, .duelo, .plantillas, .fila-campos { grid-template-columns: 1fr; }
  .planes { grid-template-columns: 1fr; }
  .diag-datos { grid-template-columns: 1fr; }
  .diag-cuerpo { padding: 22px 18px; }
  .diag-cuerpo h4 { font-size: 25px; }
  .caja { padding: 20px; }
  .pie-grid { grid-template-columns: 1fr 1fr; }
  .btn-sos span { display: none; }
  .btn-sos { padding: 10px; }
  .guion { grid-template-columns: 1fr; }
  .banda { padding: 28px 22px; }
  .exp-chip-2 { left: 0; }
  .exp-chip-1 { right: 0; }
  .doc { grid-template-columns: auto 1fr; }
  .doc .tag { grid-column: 2; justify-self: start; }
  .sos-detalle { padding: 22px 18px; }
  .termino-dia { padding: 24px; }
  .terminos { grid-template-columns: 1fr; }
}

/* Íconos dentro de píldoras */
.pildora { display: inline-flex; align-items: center; gap: 6px; }
.pildora .i { width: 16px; height: 16px; flex: none; }

/* ═════════════════════════════════════════════════════════════
   IDENTIDAD DEL GRUPO (igual que Hub, Home y Beauty)
   ═════════════════════════════════════════════════════════════ */
:root { --serif: "Plus Jakarta Sans", system-ui, sans-serif; --papel-serif: Georgia, "Times New Roman", serif; }
h1, h2, h3 { font-weight: 800; letter-spacing: -.035em; line-height: 1.08; }
h2 { font-size: clamp(32px, 4.6vw, 52px); }
h3 { letter-spacing: -.02em; }
em, .cursiva { font-family: inherit; font-style: normal; font-weight: inherit; }

/* Palabra destacada: degradado en fondo oscuro, subrayado en fondo claro */
h1 em, .oscuro h2 em, .banda h2 em, .hero h2 em {
  color: transparent; font-weight: 800;
  background: linear-gradient(100deg, var(--oro-2) 0%, #f8ecc9 55%, #fff 100%);
  -webkit-background-clip: text; background-clip: text;
}
h2 em { color: var(--tinta); font-weight: 800;
  background: linear-gradient(transparent 64%, rgba(45, 91, 255, .25) 64%, rgba(45, 91, 255, .25) 90%, transparent 90%); }

/* Etiquetas con rayita */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; letter-spacing: .14em; justify-self: start; }
.eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; border-radius: 2px; flex: none; }
.centrado .eyebrow { justify-self: center; }

/* Tamaños de títulos como las demás marcas */
.hero h1 { font-size: clamp(40px, 6.2vw, 74px); line-height: 1.05; }
.cabecera-pag h1 { font-size: clamp(38px, 5.6vw, 64px); }
.hero { padding: 150px 0 90px; }
.cabecera-pag { padding: 150px 0 72px; }
.seccion { padding: 110px 0; }

/* Brillos animados del hero (como Hub) */
.hero-fondo::after, .cabecera-pag::after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; top: -180px; right: -120px;
  background: rgba(45, 91, 255, .4); filter: blur(90px); pointer-events: none; animation: brillar 14s ease-in-out infinite alternate; }
.cabecera-pag.sos-cab::after { background: rgba(229, 72, 77, .35); }
@keyframes brillar { to { transform: translate(-40px, 40px) scale(1.08); } }

/* Todo lo que era serif pasa a Plus Jakarta Sans en 800 */
.exp-cab b, .diag-lado h3, .medidor h4, .duelo-lado h4, .ficha-perfil h2, .ficha-reserva h3,
.sos-detalle h3, .pie-boletin h4, .termino h3, .termino-dia .grande { font-weight: 800; letter-spacing: -.03em; font-style: normal; }
.exp-cab b { font-size: 19px; }
.diag-lado h3 { font-size: 24px; }
.diag-cuerpo h4 { font-family: inherit; font-weight: 800; letter-spacing: -.03em; font-size: 26px; }
.medidor h4, .ficha-reserva h3 { font-size: 22px; }
.duelo-lado h4 { font-size: 21px; }
.ficha-perfil h2 { font-size: 28px; }
.sos-detalle h3 { font-size: 28px; }
.pie-boletin h4 { font-size: 22px; }
.termino h3 { font-size: 21px; }
.termino-dia .grande { font-size: clamp(34px, 5vw, 58px); }
.diez-n, .derecho-n, .paso3::before { font-style: normal; font-weight: 800; letter-spacing: -.03em; }
.diez-n { font-size: 13px; letter-spacing: .08em; }
.derecho-n { font-size: 26px; }
.paso3::before { font-size: 40px; }
.linea-tiempo li::before { font-weight: 800; font-size: 22px; }
.pro-frase { font-style: normal; font-size: 14.5px; font-weight: 500; }
.guion p { font-style: normal; font-size: 18px; font-weight: 600; }
.cinta-pista span::after { content: "•"; font-size: 16px; }

/* Lo que imita un papel (documento y contrato) usa letra de documento */
.hoja, .sema-texto, .sema textarea { font-family: var(--papel-serif); }
.cabecera-pag::after { z-index: 0; }
.cabecera-pag .contenedor { z-index: 1; }

/* ═════════════════════════════════════════════════════════════
   Historias legales (assets/historias.js) · como las de Instagram, igual que Findley Medical
   ═════════════════════════════════════════════════════════════ */
/* =====================================================================
   Historias (visor y círculos)
   ===================================================================== */
.historias { margin: 0 0 26px; }
.historias:empty { display: none; }
.hs-fila { display: flex; gap: 16px; overflow-x: auto; padding: 6px 4px 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
.hs-fila::-webkit-scrollbar { display: none; }
.hs-circulo { flex: none; display: grid; justify-items: center; gap: 7px; border: 0; background: none; cursor: pointer; scroll-snap-align: start; width: 76px; padding: 0; font: inherit; animation: hsEntra .45s ease both; animation-delay: var(--d); }
@keyframes hsEntra { from { opacity: 0; transform: translateY(10px) scale(.9); } }
.hs-anillo { width: 72px; height: 72px; border-radius: 50%; padding: 3px; background: conic-gradient(from 200deg, var(--c), var(--oro), var(--azul), var(--c)); transition: transform .25s; }
.hs-circulo:not(.visto) .hs-anillo { animation: hsLatido 2.6s ease-in-out infinite; }
@keyframes hsLatido { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 45%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 0%, transparent); } }
.hs-circulo:hover .hs-anillo { transform: scale(1.06); }
.hs-circulo.visto .hs-anillo { background: #cfd8e3; }
.hs-anillo > .hs-ico { width: 100%; height: 100%; border-radius: 50%; border: 3px solid #fff; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); }
.hs-circulo.propio .hs-anillo > .hs-ico { background: linear-gradient(150deg, var(--azul), var(--oro)); color: #fff; }
.hs-ico svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hs-circulo small { font-size: 12.5px; font-weight: 700; color: var(--tinta); max-width: 78px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-circulo.visto small { color: var(--gris); font-weight: 600; }
.hs-circulo:focus-visible { outline: none; }
.hs-circulo:focus-visible .hs-anillo { outline: 3px solid var(--azul); outline-offset: 3px; }

html.hs-bloqueo, html.hs-bloqueo body { overflow: hidden; }
.hs-visor { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; gap: 24px; opacity: 0; transition: opacity .25s; }
.hs-visor[hidden] { display: none; }
.hs-visor.abierto { opacity: 1; }
.hs-velo { position: absolute; inset: 0; background: rgba(5, 12, 24, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hs-tarjeta { position: relative; z-index: 1; width: min(420px, 100vw); height: min(92vh, 760px); max-height: 100dvh; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; color: var(--tinta); box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .8); transform: scale(.94); transition: transform .3s cubic-bezier(.2, .8, .2, 1), background .4s; }
.hs-visor.abierto .hs-tarjeta { transform: none; }
.hs-tarjeta.oscuro { color: #fff; }
.hs-tarjeta.gira-sig { animation: hsSig .45s cubic-bezier(.2, .8, .2, 1); }
.hs-tarjeta.gira-prev { animation: hsPrev .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes hsSig { from { transform: perspective(1200px) rotateY(-35deg) translateX(30%); opacity: .3; } }
@keyframes hsPrev { from { transform: perspective(1200px) rotateY(35deg) translateX(-30%); opacity: .3; } }
.hs-barras { display: flex; gap: 4px; padding: 12px 12px 0; position: relative; z-index: 3; }
.hs-barras span { flex: 1; height: 3px; border-radius: 3px; background: rgba(11, 31, 51, .18); overflow: hidden; }
.oscuro .hs-barras span { background: rgba(255, 255, 255, .3); }
.hs-barras i { display: block; height: 100%; background: var(--tinta); border-radius: 3px; }
.oscuro .hs-barras i { background: #fff; }
.hs-cab { display: flex; align-items: center; gap: 8px; padding: 10px 12px; position: relative; z-index: 3; }
.hs-avatar { width: 34px; height: 34px; flex: none; }
.hs-avatar .hs-ico { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--c); border: 2px solid var(--c); }
.hs-avatar .hs-ico svg { width: 17px; height: 17px; }
.hs-nombre { flex: 1; min-width: 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-boton { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(11, 31, 51, .08); color: inherit; display: grid; place-items: center; cursor: pointer; }
.hs-boton[hidden] { display: none; }
.oscuro .hs-boton { background: rgba(255, 255, 255, .14); }
.hs-boton svg { width: 16px; height: 16px; }
.hs-compartir svg, .hs-cerrar svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.hs-contenido { flex: 1; display: grid; align-items: center; padding: 0 26px; min-height: 0; overflow-y: auto; }
.hs-contenido.entra .hs-tip > * { animation: hsSube .5s ease both; }
.hs-contenido.entra .hs-tip > :nth-child(2) { animation-delay: .06s; } .hs-contenido.entra .hs-tip > :nth-child(3) { animation-delay: .12s; } .hs-contenido.entra .hs-tip > :nth-child(4) { animation-delay: .18s; }
@keyframes hsSube { from { opacity: 0; transform: translateY(14px); } }
.hs-tip { display: grid; justify-items: center; text-align: center; gap: 14px; }
.hs-tip-ico { width: 96px; height: 96px; border-radius: 30px; display: grid; place-items: center; background: rgba(255, 255, 255, .6); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .35); margin-bottom: 6px; color: var(--c); }
.oscuro .hs-tip-ico { background: rgba(255, 255, 255, .12); color: #fff; }
.hs-tip-ico svg { width: 46px; height: 46px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hs-etq { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; background: var(--tinta); color: #fff; }
.oscuro .hs-etq { background: rgba(255, 255, 255, .16); }
.hs-tarjeta h3 { font-size: clamp(25px, 7vw, 33px); letter-spacing: -.03em; line-height: 1.1; margin: 0; }
.hs-tarjeta p { font-size: 15.5px; line-height: 1.5; opacity: .88; max-width: 330px; margin: 0 auto; }
.hs-numero { font-size: clamp(64px, 20vw, 92px); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--c); display: flex; align-items: baseline; gap: 8px; }
.oscuro .hs-numero { color: #fff; }
.hs-numero small { font-size: 20px; letter-spacing: 0; font-weight: 700; opacity: .7; }
.hs-contenido.entra .hs-numero { animation: hsNumero .7s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes hsNumero { from { opacity: 0; transform: scale(.6); } }
.hs-respuestas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 330px; margin-top: 6px; position: relative; z-index: 4; }
.hs-respuestas button { padding: 16px 10px; border-radius: 18px; border: 2px solid rgba(11, 31, 51, .14); background: rgba(255, 255, 255, .75); font: inherit; font-size: 17px; font-weight: 800; color: var(--tinta); cursor: pointer; transition: transform .2s, background .2s; }
.hs-respuestas button:hover:not(:disabled) { transform: translateY(-2px); background: #fff; }
.hs-respuestas button.bien { background: #16a34a; border-color: #16a34a; color: #fff; animation: hsBien .5s ease; }
.hs-respuestas button.mal { opacity: .45; }
@keyframes hsBien { 40% { transform: scale(1.08); } }
.hs-explica { max-width: 340px; font-size: 15px; line-height: 1.5; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .8); text-align: left; animation: hsSube .4s ease both; }
.hs-explica[hidden] { display: none; }
.hs-tap { position: absolute; top: 100px; bottom: 120px; z-index: 2; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: none; padding: 0; }
.hs-tap-izq { left: 0; width: 30%; }
.hs-tap-der { right: 0; width: 70%; }
.hs-quiz { position: relative; z-index: 3; }
.hs-tap:focus-visible { outline: 2px solid #fff; outline-offset: -6px; border-radius: 16px; }
.hs-pie { position: relative; z-index: 3; display: grid; justify-items: center; gap: 10px; padding: 14px 18px 24px; }
.hs-pie[hidden] { display: none; }
.hs-cta { background: var(--tinta); color: #fff; }
.oscuro .hs-cta { background: #fff; color: var(--tinta); }
.hs-cta svg { stroke: currentColor; fill: none; stroke-width: 2; }
.hs-llamar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.hs-llamar a { flex: 1 1 100px; max-width: 160px; display: grid; justify-items: center; gap: 2px; padding: 12px 10px; border-radius: 18px; background: #fff; color: #b4131f; text-decoration: none; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); }
.hs-llamar a b { font-size: 30px; letter-spacing: -.02em; line-height: 1; }
.hs-llamar a small { font-size: 11.5px; font-weight: 700; color: var(--gris); text-align: center; }
.hs-aviso { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); z-index: 4; background: var(--tinta); color: #fff; font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 999px; white-space: nowrap; }
.hs-aviso[hidden] { display: none; }
.hs-nav { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s; }
.hs-nav:hover { background: rgba(255, 255, 255, .25); }
.hs-nav svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
.hs-nav-prev svg { transform: rotate(180deg); }
@media (max-width: 640px) {
  .hs-visor { gap: 0; }
  .hs-nav { display: none; }
  .hs-tarjeta { width: 100vw; height: 100vh; max-height: none; border-radius: 0; }
  @supports (height: 100dvh) { .hs-tarjeta { height: 100dvh; } }
  .hs-fila { gap: 10px; margin: 0 -16px; padding: 6px 16px 8px; }
  .hs-circulo { width: 68px; }
  .hs-anillo { width: 66px; height: 66px; }
  .hs-ico svg { width: 25px; height: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-circulo, .hs-circulo .hs-anillo, .hs-contenido.entra * , .hs-tarjeta { animation: none !important; }
}

/* En el hero oscuro de Legal */
.hero .historias { margin-bottom: 22px; }
.hero .hs-circulo small { color: #fff; }
.hero .hs-circulo.visto small { color: var(--gris-claro); }
.hero .hs-circulo.visto .hs-anillo { background: rgba(255,255,255,.22); }
.hero .hs-anillo > .hs-ico { border-color: var(--noche); }
.hs-tarjeta h3 { font-weight: 800; }

/* ═════════════════════════════════════════════════════════════
   LO SORPRENDENTE (sorprendente.html · assets/sorprendente.js)
   ═════════════════════════════════════════════════════════════ */
.oscuro .caja { color: var(--tinta); }
.sorpresa-cab::after { background: rgba(245, 184, 46, .32); }
.sorpresa-saltos a { background: rgba(255,255,255,.05); }
.menu a.nuevo { color: var(--oro-2); }
.menu a.nuevo::after { content: "NUEVO"; margin-left: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; background: var(--oro); color: var(--noche); padding: 2px 6px; border-radius: 999px; vertical-align: 2px; }

/* Inicio: 5 cosas sorprendentes */
.sorpresas { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: auto auto; gap: 14px; }
.sorpresa { position: relative; overflow: hidden; border-radius: 24px; padding: 26px; display: flex; flex-direction: column; gap: 10px; min-height: 230px; color: #fff;
  background: linear-gradient(160deg, var(--a), var(--b)); isolation: isolate; transition: transform .3s; }
.sorpresa::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.18), transparent 30%); animation: girar 8s linear infinite; z-index: -1; opacity: 0; transition: opacity .3s; }
.sorpresa:hover { transform: translateY(-6px) scale(1.01); }
.sorpresa:hover::before { opacity: 1; }
@keyframes girar { to { transform: rotate(1turn); } }
.sorpresa:first-child { grid-row: span 2; min-height: 474px; }
.sorpresa .sello { align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: rgba(255,255,255,.18); padding: 5px 10px; border-radius: 999px; }
.sorpresa .emoji { font-size: 44px; line-height: 1; margin-top: 6px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.sorpresa:first-child .emoji { font-size: 84px; }
.sorpresa h3 { font-size: 22px; }
.sorpresa:first-child h3 { font-size: clamp(28px, 3vw, 38px); }
.sorpresa p { color: rgba(255,255,255,.82); font-size: 14.5px; }
.sorpresa .ir { margin-top: auto; font-weight: 800; font-size: 14px; }
.sorpresa-claro { color: var(--tinta); }
.sorpresa-claro p { color: rgba(18,24,38,.75); }
.sorpresa-claro .sello { background: rgba(18,24,38,.1); }

/* 1. Termómetro */
.ganar { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: start; }
.preguntas-caso { display: grid; gap: 10px; }
.pc { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--papel); border: 1.5px solid transparent; transition: border-color .2s, background .2s; }
.pc.respondida { background: #fff; border-color: var(--linea); }
.pc b { display: block; font-size: 15px; }
.pc small { color: var(--gris); font-size: 13px; }
.pc-ops { display: flex; gap: 6px; }
.pc-ops button { border: 1.5px solid var(--linea); background: #fff; border-radius: 999px; padding: 8px 13px; font-weight: 700; font-size: 13.5px; cursor: pointer; transition: all .2s; }
.pc-ops button:hover { border-color: var(--azul); }
.pc-ops button.activo[data-r="si"] { background: var(--verde); border-color: var(--verde); color: #fff; }
.pc-ops button.activo[data-r="no"] { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.pc-ops button.activo[data-r="ns"] { background: var(--noche); border-color: var(--noche); color: #fff; }
.gauge-caja { position: sticky; top: 96px; text-align: center; display: grid; gap: 6px; }
.gauge { width: 100%; max-width: 320px; margin: 0 auto; overflow: visible; }
.gauge path { fill: none; stroke-width: 18; stroke-linecap: round; }
.gauge-fondo { stroke: var(--papel-2); }
.gauge-arco { transition: stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1); }
.gauge-aguja { transform-origin: 120px 120px; transform: rotate(-90deg); transition: transform .9s cubic-bezier(.3,1.4,.4,1); }
.gauge-aguja path { stroke: var(--noche); stroke-width: 5; }
.gauge-aguja circle { fill: var(--noche); }
.gauge-pct { font-size: 56px; font-weight: 800; letter-spacing: -.05em; line-height: 1; margin-top: -6px; }
.gauge-caja h3 { font-size: 21px; }
.tono-verde { color: var(--verde); } .tono-ambar { color: var(--ambar); } .tono-rojo { color: var(--rojo); }
.gauge-caja .alertas { text-align: left; }
.gauge-caja h4 { text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--gris); margin-top: 8px; }
.gauge-caja .botones { justify-content: center; }

/* 2. Traductor */
.sema-texto mark.leg { background: #dfe7ff; box-shadow: inset 0 -2px 0 var(--azul); }
.leg-resumen h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--gris); margin: 16px 0 10px; }
.leg-resumen .alerta .enlace { justify-self: start; margin-top: 4px; padding: 0; }
.leg-glosa { display: grid; gap: 8px; max-height: 260px; overflow: auto; }
.leg-glosa div { background: var(--papel); border-radius: 12px; padding: 10px 12px; display: grid; font-size: 14px; }
.leg-glosa b { text-transform: capitalize; }
.leg-glosa span { color: var(--gris); }

/* 3. Pensión */
.pension-barra { position: relative; height: 14px; border-radius: 999px; background: rgba(255,255,255,.08); margin: 18px 0 26px; }
.pension-barra div { position: absolute; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, var(--oro), var(--oro-2)); transition: left .5s, width .5s; }
.pension-barra span { position: absolute; top: 18px; font-size: 11.5px; color: var(--gris-claro); }
.pension-barra span:nth-child(3) { transform: translateX(-50%); }

/* 4. Guantera */
.guantera { position: sticky; top: 96px; background: linear-gradient(150deg, #1d2f63, #0a1120 70%); color: #fff; border-radius: 26px; padding: 26px; box-shadow: 0 40px 80px -30px rgba(10,17,32,.7); }
.guantera-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; font-weight: 800; letter-spacing: -.03em; }
.guantera-cab b { color: var(--oro-2); }
.guantera-placa { background: #fff; color: var(--noche) !important; border-radius: 8px; padding: 6px 12px; font-size: 18px; letter-spacing: .08em; box-shadow: inset 0 0 0 2px var(--noche), 0 0 0 2px #fff; }
.guantera-items { display: grid; gap: 10px; }
.gv { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.06); border-left: 5px solid; }
.gv small { grid-column: 1; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--gris-claro); }
.gv b { grid-row: span 2; grid-column: 2; font-size: 36px; letter-spacing: -.04em; line-height: 1; }
.gv span { grid-column: 1; font-size: 13.5px; color: #d5dcec; }
.gv-verde { border-color: #2fd37f; } .gv-verde b { color: #7fe0b2; }
.gv-ambar { border-color: #f5b82e; } .gv-ambar b { color: #ffd77a; }
.gv-rojo { border-color: var(--rojo); } .gv-rojo b { color: #ffb3b6; font-size: 24px; }

/* 5. Modo testigo */
.testigo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.t-vivo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--rojo-suave); color: #8a1c20; border-radius: 14px; padding: 10px 14px; margin-bottom: 16px; font-size: 14px; }
.t-vivo small { margin-left: auto; font-weight: 700; }
.t-rec { width: 12px; height: 12px; border-radius: 50%; background: var(--rojo); animation: latido 1.6s infinite; }
.t-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.t-fotos, .ht-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.t-fotos figure, .ht-fotos figure { border-radius: 12px; overflow: hidden; background: var(--papel-2); }
.t-fotos img, .ht-fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.t-fotos figcaption, .ht-fotos figcaption { font-size: 11px; padding: 4px 6px; color: var(--gris); }
.ht-fotos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.t-marca { display: flex; gap: 8px; margin-top: 14px; }
.t-marca input { flex: 1; min-width: 0; border: 1.5px solid var(--linea); border-radius: 999px; padding: 10px 16px; background: var(--papel); outline: none; }
.t-marca input:focus { border-color: var(--azul); }
.t-momentos { list-style: none; display: grid; gap: 6px; margin-top: 12px; font-size: 14px; }
.t-momentos li { background: var(--papel); border-radius: 10px; padding: 8px 12px; }
.t-momentos b { color: var(--rojo); margin-right: 6px; }
.hoja-testigo { background: #fff; border-radius: 8px; box-shadow: 0 30px 60px -30px rgba(10,17,32,.45), 0 0 0 1px var(--linea); padding: 40px; font-size: 15px; animation: entrar .4s ease; }
.ht-cab { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; border-bottom: 2px solid var(--noche); padding-bottom: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.ht-cab small { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--gris); }
.ht-cab h3 { font-size: 28px; }
.ht-codigo { text-align: right; }
.ht-codigo b { font-family: ui-monospace, Menlo, monospace; font-size: 15px; letter-spacing: .06em; }
.ht-datos { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14.5px; }
.ht-datos dt { color: var(--gris); font-weight: 600; }
.ht-datos dd { font-weight: 700; }
.hoja-testigo h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--gris); margin: 18px 0 8px; }
.hoja-testigo ul { padding-left: 18px; display: grid; gap: 4px; }
.t-ayuda { margin-top: 0; }
.hoja-testigo:not([hidden]) ~ .t-ayuda { display: none; }
@media print {
  body.imprime-testigo .hoja-testigo, body.imprime-testigo .hoja-testigo * { visibility: visible; }
  body.imprime-testigo .hoja-testigo { position: absolute; inset: 0; box-shadow: none; padding: 0; }
}

@media (max-width: 960px) {
  .sorpresas { grid-template-columns: 1fr 1fr; }
  .sorpresa:first-child { grid-column: span 2; grid-row: auto; min-height: 280px; }
  .ganar, .testigo { grid-template-columns: 1fr; }
  .gauge-caja, .guantera { position: static; }
}
@media (max-width: 640px) {
  .sorpresas { grid-template-columns: 1fr; }
  .sorpresa:first-child { grid-column: auto; }
  .pc { grid-template-columns: 1fr; }
  .hoja-testigo { padding: 24px 18px; }
}
.hero-grid > * { min-width: 0; }
.oscuro .caja .btn-claro { background: #fff; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--linea); }

/* ═════════════════════════════════════════════════════════════
   NOTARÍAS (notarias.html · assets/notarias.js)
   ═════════════════════════════════════════════════════════════ */
@media (max-width: 1240px) and (min-width: 961px) { .barra .btn.solo-escritorio { display: none; } }
.notarias-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; align-items: start; }
.mapa { position: sticky; top: 96px; height: calc(100dvh - 130px); min-height: 420px; max-height: 680px; border-radius: 24px; overflow: hidden; border: 1px solid var(--linea); background: var(--papel-2); z-index: 1; }
.mapa.sin-mapa { display: none; }
.lista-notarias { display: grid; gap: 12px; }
.notaria { background: #fff; border: 1.5px solid var(--linea); border-radius: 20px; padding: 16px 18px; display: grid; gap: 10px; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.notaria:hover { border-color: var(--azul); }
.notaria.activa { border-color: var(--azul); box-shadow: 0 20px 40px -24px rgba(45,91,255,.6); transform: translateY(-2px); }
.notaria.mas-cerca { border-color: var(--oro); }
.notaria.mas-cerca .notaria-n { background: var(--oro); color: var(--noche); }
.notaria-cab { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.notaria-n { width: 32px; height: 32px; border-radius: 10px; background: var(--noche); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.notaria-cab b { display: block; font-size: 16px; line-height: 1.25; }
.notaria-cab small { color: var(--gris); font-size: 13px; }
.notaria-dist { font-weight: 800; font-size: 15px; white-space: nowrap; }
.notaria-datos { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--gris); }
.abierta { color: var(--verde); font-weight: 700; }
.cerrada { color: var(--rojo); font-weight: 700; }
.notaria-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.pin { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); color: #fff; font-weight: 800; font-size: 13px; box-shadow: 0 8px 16px -6px rgba(0,0,0,.5); border: 2px solid #fff; }
.pin > * { transform: rotate(45deg); }
.pin { font-family: "Plus Jakarta Sans", system-ui, sans-serif; }
.pin-abierta { background: var(--verde); }
.pin-cerrada { background: #7a8296; }
.pin-yo { background: var(--azul); border-radius: 50%; transform: none; animation: latido 2s infinite; font-size: 10px; }
.leaflet-popup-content { font-family: "Plus Jakarta Sans", system-ui, sans-serif; font-size: 13.5px; line-height: 1.5; }
.leaflet-container a { color: var(--azul-osc); font-weight: 700; }

/* Agilizar */
.agilizar { display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; align-items: start; }
.tramites { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tramite { text-align: left; background: var(--noche-2); border: 1.5px solid var(--linea-osc); color: #fff; border-radius: 18px; padding: 16px; cursor: pointer; display: grid; gap: 6px; transition: border-color .2s, background .2s, transform .2s; }
.tramite:hover { transform: translateY(-2px); border-color: rgba(230,199,126,.5); }
.tramite.activo { background: var(--noche-3); border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro); }
.tramite .i { width: 24px; height: 24px; color: var(--oro-2); }
.tramite b { font-size: 15px; line-height: 1.25; }
.tramite small { color: var(--gris-claro); font-size: 12.5px; }
.agil { position: sticky; top: 96px; display: grid; gap: 14px; }
.agil-cab { display: flex; gap: 14px; align-items: center; }
.agil-cab h3 { font-size: 24px; }
.agil-cab .eyebrow { margin-bottom: 2px; }
.agil-duelo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.agil-duelo > div { border: 1px solid var(--linea); border-radius: 16px; padding: 14px; display: grid; gap: 4px; }
.agil-duelo small { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); }
.agil-duelo b { font-size: 16px; line-height: 1.3; }
.agil-duelo span { font-size: 13px; color: var(--gris); }
.agil-duelo .agil-bueno { background: var(--noche); color: #fff; border-color: var(--noche); }
.agil-bueno small, .agil-bueno span { color: var(--gris-claro) !important; }
.agil-ahorro { background: var(--verde-suave); color: #135e3d; border-radius: 14px; padding: 12px 14px; font-weight: 700; }
.agil-opciones { display: grid; gap: 8px; }
.opcion { display: flex; gap: 12px; align-items: flex-start; background: var(--papel); border-radius: 14px; padding: 12px 14px; cursor: pointer; }
.opcion input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--azul); flex: none; }
.opcion b { display: block; font-size: 14.5px; }
.opcion small { color: var(--gris); font-size: 13px; }
.agil-notaria { display: grid; border: 1.5px dashed var(--oro); border-radius: 14px; padding: 12px 14px; background: #fffaf0; }
.agil-notaria small { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #7a5a12; }
.agil-notaria b { font-size: 16px; }
.agil-notaria span { font-size: 13.5px; color: var(--gris); }
.agil h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--gris); }
.agil-req { list-style: none; display: grid; gap: 6px; }
.agil-req li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--linea); cursor: pointer; font-size: 14.5px; transition: all .2s; }
.agil-req li .doc-check { width: 24px; height: 24px; border-radius: 8px; flex: none; }
.agil-req li.ok { background: var(--verde-suave); border-color: rgba(31,138,91,.35); }
.agil-req li.ok .doc-check { background: var(--verde); border-color: var(--verde); color: #fff; }
.agil-precio { background: var(--noche); color: #fff; border-radius: 16px; padding: 16px 18px; }
.agil-precio small { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--gris-claro); }
.agil-precio b { font-size: 30px; letter-spacing: -.03em; color: var(--oro-2); }
.agil-precio span { display: block; font-size: 13px; color: var(--gris-claro); }

/* Seguimiento */
.seg-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 18px; }
.seg-pasos { list-style: none; display: grid; gap: 0; }
.seg-pasos li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; position: relative; padding-bottom: 18px; color: var(--gris); }
.seg-pasos li::after { content: ""; position: absolute; left: 12px; top: 24px; bottom: 0; width: 2px; background: var(--linea); }
.seg-pasos li:last-child::after { display: none; }
.seg-pasos li > span { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linea); background: #fff; position: relative; z-index: 1; }
.seg-pasos li.hecho { color: var(--tinta); }
.seg-pasos li.hecho > span { background: var(--verde); border-color: var(--verde); }
.seg-pasos li.hecho::after { background: var(--verde); }
.seg-pasos li.actual { color: var(--tinta); }
.seg-pasos li.actual > span { border-color: var(--azul); background: var(--azul-suave); animation: latido 2s infinite; }
.seg-pasos small { display: block; font-size: 12.5px; color: var(--gris); }

/* Banda de notarías en el inicio */
.banda-notarias { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; background: linear-gradient(135deg, #fffaf0, #f7edd4); border: 1px solid #ecd9a8; border-radius: 28px; padding: 36px; }
.banda-notarias h2 { font-size: clamp(28px, 3.6vw, 42px); }
.mini-mapa { position: relative; height: 240px; border-radius: 20px; overflow: hidden; background:
  linear-gradient(90deg, rgba(10,17,32,.05) 1px, transparent 1px) 0 0 / 34px 34px,
  linear-gradient(rgba(10,17,32,.05) 1px, transparent 1px) 0 0 / 34px 34px, #fff; box-shadow: 0 30px 60px -30px rgba(10,17,32,.4); }
.mini-mapa::before { content: ""; position: absolute; left: -10%; right: -10%; top: 55%; height: 16px; background: #e8e2d4; transform: rotate(-12deg); }
.mini-mapa::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: 38%; width: 14px; background: #e8e2d4; transform: rotate(8deg); }
.mini-mapa .pin { position: absolute; z-index: 2; }
.mini-mapa .chip { position: absolute; z-index: 3; left: 16px; bottom: 16px; background: var(--noche); color: #fff; border-radius: 14px; padding: 10px 14px; font-size: 13px; font-weight: 700; }
.mini-mapa .chip b { color: #7fe0b2; }

@media (max-width: 960px) {
  .notarias-grid, .agilizar, .banda-notarias { grid-template-columns: 1fr; }
  .mapa { position: relative; top: 0; height: 360px; min-height: 0; }
  .agil { position: static; }
}
@media (max-width: 640px) {
  .tramites, .agil-duelo { grid-template-columns: 1fr; }
  .banda-notarias { padding: 24px 18px; }
}

/* ═════════════════════════════════════════════════════════════
   EMPRESAS (empresas.html · assets/empresas.js)
   ═════════════════════════════════════════════════════════════ */
.empresa-cab::after { background: rgba(14, 159, 179, .35); }
.tag-rojo { background: var(--rojo-suave); color: var(--rojo); }
.emp-res { display: grid; gap: 14px; position: sticky; top: 96px; }
.emp-tipo { font-size: clamp(34px, 4vw, 48px); letter-spacing: -.04em; color: var(--azul); }
.emp-res h4, .fiscal h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--gris); margin-bottom: 8px; }
.emp-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; font-size: 14.5px; }
.emp-pasos { list-style: none; display: grid; gap: 6px; counter-reset: ep; }
.emp-pasos li { counter-increment: ep; display: grid; grid-template-columns: 28px 1fr; gap: 2px 12px; padding: 10px 12px; border-radius: 12px; background: var(--papel); }
.emp-pasos li::before { content: counter(ep); grid-row: span 3; width: 28px; height: 28px; border-radius: 9px; background: var(--noche); color: var(--oro-2); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.emp-pasos b { font-size: 14.5px; }
.emp-pasos span { font-size: 13.5px; color: #3c4356; }
.emp-pasos small { font-size: 12px; color: var(--gris); font-weight: 700; }
#preg-empresa .campo { margin-bottom: 22px; }
#preg-empresa .pildora { padding: 11px 16px; }
.regs { display: grid; gap: 10px; margin-top: 16px; }
.reg { border: 1.5px solid var(--linea); border-radius: 14px; padding: 12px 14px; display: grid; gap: 4px; }
.reg-cab { display: flex; justify-content: space-between; gap: 10px; }
.reg-cab span { font-weight: 800; }
.reg small { color: var(--gris); font-size: 12.5px; }
.reg .barrita div { background: var(--azul); }
.reg.mejor { border-color: var(--verde); background: var(--verde-suave); }
.reg.mejor .barrita div { background: var(--verde); }
.reg.no-puede { opacity: .5; }
.reg.no-puede .reg-cab span { color: var(--gris); font-weight: 600; }
.expo { background: rgba(229,72,77,.15); border-radius: 14px; padding: 12px; }
.expo small { display: block; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #ffb3b6; }
.expo b { font-size: 22px; letter-spacing: -.02em; }
#res-auditoria { display: grid; gap: 12px; }
#res-auditoria h4 { font-size: 20px; }
#res-auditoria > p { color: var(--gris-claro); font-size: 14.5px; }
.fis-cab { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.fis-cab h3 { font-size: 26px; }
.fiscal { display: grid; gap: 14px; }
.clases { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.clase { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 20px; background: var(--papel); border: 1.5px solid var(--linea); }
.clase small { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--gris); }
.clase b { font-size: 32px; letter-spacing: -.04em; line-height: 1; }
.clase.principal { background: var(--noche); border-color: var(--noche); color: #fff; }
.clase.principal small { color: var(--oro-2); }
#res-marca { display: grid; gap: 10px; }
#res-marca .btn { justify-self: start; }
.diez-3 { grid-template-columns: repeat(3, 1fr); }
.diez-3 a { min-height: 190px; }
.calendario-emp { display: grid; gap: 10px; }
.cal-mensual { background: var(--azul-suave); color: var(--azul-osc); border-radius: 14px; padding: 12px 16px; font-weight: 700; font-size: 14.5px; }
.cal-item { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--linea); border-radius: 16px; padding: 12px 16px; }
.cal-item b { display: block; font-size: 15px; }
.cal-item small { color: var(--gris); font-size: 13px; }
.cal-fecha { text-align: center; background: var(--papel); border-radius: 12px; padding: 6px 0; }
.cal-fecha b { font-size: 26px; letter-spacing: -.03em; line-height: 1; }
.cal-fecha small { text-transform: uppercase; font-weight: 800; font-size: 11px; letter-spacing: .08em; }
.cal-item.proximo { border-color: var(--oro); box-shadow: 0 16px 30px -20px rgba(201,162,75,.8); }
.cal-item.proximo .cal-fecha { background: var(--oro); color: var(--noche); }
.cal-item.proximo .cal-fecha small { color: var(--noche); }
.servicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.servicio { background: #fff; border: 1px solid var(--linea); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 10px; transition: transform .25s, box-shadow .25s; }
.servicio:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(10,17,32,.35); }
.servicio h3 { font-size: 18px; }
.servicio p { color: var(--gris); font-size: 14px; }
.servicio-pie { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--linea); }
.servicio-pie b { font-size: 16px; }
.servicio-pie small { color: var(--gris); font-weight: 600; }
.banda-empresas { background: linear-gradient(135deg, #062a30, #0a1120 65%); color: #fff; border-radius: 28px; padding: 38px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; position: relative; overflow: hidden; }
.banda-empresas::after { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -160px; border-radius: 50%; background: rgba(14,159,179,.35); filter: blur(80px); }
.banda-empresas > * { position: relative; z-index: 1; }
.banda-empresas h2 { font-size: clamp(28px, 3.6vw, 42px); }
.banda-empresas p { color: #c3cce0; margin-top: 10px; }
.emp-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.emp-chips a { background: rgba(255,255,255,.06); border: 1px solid var(--linea-osc); border-radius: 16px; padding: 14px; font-weight: 700; font-size: 14.5px; display: flex; gap: 10px; align-items: center; transition: background .2s, border-color .2s; }
.emp-chips a:hover { background: rgba(255,255,255,.1); border-color: rgba(230,199,126,.4); }
.emp-chips .i { width: 22px; height: 22px; color: var(--oro-2); flex: none; }
@media (max-width: 960px) {
  .emp-res { position: static; }
  .servicios, .diez-3 { grid-template-columns: 1fr 1fr; }
  .banda-empresas { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .servicios, .diez-3, .emp-pc, .emp-chips { grid-template-columns: 1fr; }
  .banda-empresas { padding: 26px 18px; }
}
.emp-res .emp-tipo { font-size: clamp(34px, 4vw, 48px); margin: 0; }
.medidor .alerta { color: var(--tinta); }
.medidor .alerta span { color: var(--gris); }