/* ============================================================
   ABOGADOS ONLINE - sistema de diseno
   Extraido de la maqueta y adaptado al proyecto Django.

   Identidad propia. Acento negro tinta: la firma, no el sello de color.
   El verde SOLO significa "verificado". El ambar SOLO significa "plazo".
   Al ser el acento un negro neutro y el texto un azul muy oscuro, ambos
   conviven sin pisarse: la diferencia es de temperatura, no de claridad.
   La plataforma atiende solo de forma virtual.
   ============================================================ */
:root{
  --timbre:#0A0A0C;        /* acento principal */
  --timbre-800:#000000;
  --timbre-100:#E3E3E7;
  --timbre-050:#F1F1F4;
  --tinta:#141A2B;         /* texto y superficies oscuras */
  --tinta-700:#2C3448;
  --tinta-500:#5D6478;
  --tinta-300:#8F95A6;
  --papel:#F7F7FB;
  --blanco:#FFFFFF;
  --borde:#E4E4EE;
  --borde-fuerte:#CFCFE2;
  --verificado:#0E8F63;    /* uso exclusivo: credenciales verificadas */
  --verificado-100:#E2F5ED;
  --plazo:#C2410C;         /* uso exclusivo: urgencia y plazos */
  --plazo-100:#FEF0E6;

  --r-s:8px; --r-m:14px; --r-l:22px; --r-xl:32px;
  --sombra-s:0 1px 2px rgba(20,26,43,.06), 0 1px 1px rgba(20,26,43,.04);
  --sombra-m:0 4px 16px rgba(20,26,43,.07), 0 1px 3px rgba(20,26,43,.05);
  --sombra-l:0 18px 48px rgba(20,26,43,.13);
  --display:'Bricolage Grotesque','Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --texto:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ancho:1160px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--texto);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-.025em;line-height:1.08;font-weight:600}
h1{font-size:clamp(2.1rem,6.2vw,3.9rem)}
h2{font-size:clamp(1.55rem,3.6vw,2.4rem)}
h3{font-size:clamp(1.1rem,2vw,1.35rem);letter-spacing:-.015em}
h4{font-size:1rem;letter-spacing:-.01em}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2.5px solid var(--timbre);outline-offset:2px;border-radius:4px}
.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 20px}
.seccion{padding:64px 0}
.seccion-ap{padding:96px 0}
@media(max-width:720px){.seccion{padding:44px 0}.seccion-ap{padding:56px 0}}

/* ---------- utilidades ---------- */
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-500);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--borde-fuerte)}
.sub{color:var(--tinta-500);font-size:1.02rem;max-width:60ch}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.centro{text-align:center}
.oculto{display:none !important}
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;
  border-radius:100px;padding:13px 22px;font-weight:600;font-size:.95rem;cursor:pointer;
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease,border-color .16s ease;
  background:var(--timbre);color:#fff;text-align:center}
.btn:hover{background:var(--timbre-800);transform:translateY(-1px);box-shadow:0 8px 22px rgba(10,10,12,.26)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.42;pointer-events:none}
.btn-sec{background:var(--blanco);color:var(--tinta);border-color:var(--borde-fuerte)}
.btn-sec:hover{background:var(--blanco);border-color:var(--tinta);box-shadow:var(--sombra-m)}
.btn-fant{background:transparent;color:var(--tinta);border-color:transparent}
.btn-fant:hover{background:rgba(20,26,43,.05);box-shadow:none;transform:none}
.btn-sm{padding:8px 15px;font-size:.85rem}
.btn-xl{padding:16px 30px;font-size:1.03rem}
.btn-bloque{width:100%}
.btn-peligro{background:var(--blanco);color:#B42318;border-color:#F3C6C0}
.btn-peligro:hover{background:#FEF3F2;box-shadow:none}

/* ---------- superficies ---------- */
.tarjeta{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r-l);padding:24px;box-shadow:var(--sombra-s)}
.tarjeta-int{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;cursor:pointer;text-align:left;width:100%;font:inherit;color:inherit}
.tarjeta-int:hover{transform:translateY(-3px);box-shadow:var(--sombra-m);border-color:var(--borde-fuerte)}
.panel-oscuro{background:var(--tinta);color:#EDEEF4;border-radius:var(--r-xl)}
.divisor{height:1px;background:var(--borde);border:0;margin:26px 0}

/* ---------- píldoras y estados ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:100px;padding:5px 11px;font-size:.76rem;font-weight:600;background:var(--papel);border:1px solid var(--borde);color:var(--tinta-700);white-space:nowrap}
.pill-verificado{background:var(--verificado-100);border-color:#BFE8D7;color:var(--verificado)}
.pill-plazo{background:var(--plazo-100);border-color:#F7D3BB;color:var(--plazo)}
.pill-media{background:#FFF7E8;border-color:#F5E0B8;color:#9A6608}
.pill-critica{background:var(--plazo);border-color:var(--plazo);color:#fff;box-shadow:0 0 0 3px rgba(194,65,12,.16)}
.pill-critica .punto{animation:latido 1.6s ease-in-out infinite}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.35}}
.pill-timbre{background:var(--timbre);border-color:var(--timbre);color:#fff}
.pill-neutra{background:#EEF0F5;border-color:#E1E4EC;color:var(--tinta-500)}
.punto{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

/* ---------- formularios ---------- */
label.campo{display:block;margin-bottom:16px}
.campo > span{display:block;font-weight:600;font-size:.92rem;margin-bottom:7px}
.campo .ayuda{display:block;font-weight:400;color:var(--tinta-500);font-size:.84rem;margin:-3px 0 7px}
.input,.select,.area{width:100%;background:var(--blanco);border:1.5px solid var(--borde-fuerte);border-radius:var(--r-m);
  padding:13px 15px;font-size:1rem;transition:border-color .15s ease,box-shadow .15s ease}
.input:focus,.select:focus,.area:focus{outline:none;border-color:var(--timbre);box-shadow:0 0 0 4px var(--timbre-050)}
.area{min-height:130px;resize:vertical;line-height:1.5}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235D6478' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}
.opciones{display:flex;flex-wrap:wrap;gap:9px}
.opcion{border:1.5px solid var(--borde-fuerte);background:var(--blanco);border-radius:100px;padding:10px 16px;cursor:pointer;font-size:.92rem;font-weight:500;transition:all .14s ease}
.opcion:hover{border-color:var(--tinta-300)}
.opcion[aria-pressed="true"]{border-color:var(--timbre);background:var(--timbre-050);color:var(--timbre-800);font-weight:600}
.error-campo{color:#B42318;font-size:.83rem;margin-top:6px;display:flex;gap:6px;align-items:center}

/* ---------- barra de navegación ---------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(247,247,251,.86);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s ease,background .2s ease}
.nav.pegada{border-bottom-color:var(--borde);background:rgba(247,247,251,.95)}
.nav-in{display:flex;align-items:center;gap:14px;height:68px}
.marca{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:1.06rem;letter-spacing:-.03em;flex:none}
.logo-marca{width:32px;height:32px;flex:none}
.nav-links{display:flex;gap:2px;margin-left:14px;flex:1}
.nav-links a{padding:9px 13px;border-radius:100px;font-size:.92rem;font-weight:500;color:var(--tinta-700);transition:background .14s ease,color .14s ease}
.nav-links a:hover{background:rgba(20,26,43,.05);color:var(--tinta)}
.nav-links a.activo{color:var(--timbre-800);background:var(--timbre-050)}
.nav-acciones{display:flex;gap:8px;align-items:center;flex:none}
.hamb{display:none;background:none;border:1px solid var(--borde-fuerte);border-radius:12px;width:42px;height:42px;cursor:pointer;align-items:center;justify-content:center}
@media(max-width:1000px){
  .nav-links{display:none}.hamb{display:flex}
  .nav-acciones .btn-sec:not(.btn-abogado){display:none}
}
.menu-movil{position:fixed;inset:68px 0 0;background:var(--papel);z-index:55;padding:22px 20px;overflow-y:auto;display:none}
.menu-movil.abierto{display:block}
.menu-movil a{display:block;padding:15px 4px;font-size:1.12rem;font-weight:600;border-bottom:1px solid var(--borde)}

/* ---------- hero + lector en vivo (elemento firma) ---------- */
.hero{position:relative;padding:60px 0 40px;overflow:hidden}
.hero::before{content:"";position:absolute;top:-320px;right:-180px;width:720px;height:720px;
  background:radial-gradient(circle,rgba(10,10,12,.07),rgba(10,10,12,0) 62%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:start;position:relative}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:26px}.hero{padding:34px 0 26px}}
.hero h1{margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--timbre);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.14em;background:var(--timbre-100);z-index:-1;border-radius:2px}
.hero-sub{font-size:1.14rem;color:var(--tinta-500);max-width:46ch;margin-bottom:26px}
.hero-ctas{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:22px}
.hero-nota{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--tinta-500)}

.consola{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r-xl);box-shadow:var(--sombra-l);overflow:hidden}
.consola-cab{display:flex;align-items:center;gap:9px;padding:13px 18px;border-bottom:1px solid var(--borde);background:linear-gradient(180deg,#FCFCFE,#F7F7FB)}
.consola-cab .mono{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-500)}
.consola-cuerpo{padding:18px}
.consola textarea{border:0;padding:0;min-height:112px;font-size:1.03rem;width:100%;resize:none;background:transparent}
.consola textarea:focus{outline:none;box-shadow:none}
.consola-pie{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-top:1px solid var(--borde);background:#FCFCFE;flex-wrap:wrap}
.lectura{border-top:1px dashed var(--borde-fuerte);padding:16px 18px;background:var(--timbre-050);display:grid;gap:12px}
.lectura-fila{display:flex;justify-content:space-between;gap:14px;align-items:center;font-size:.9rem}
.lectura-fila span:first-child{color:var(--tinta-500)}
.lectura-vacia{color:var(--tinta-300);font-size:.9rem;text-align:center;padding:8px 0}
.marca-señal{background:var(--timbre-100);border-radius:4px;padding:1px 3px;box-decoration-break:clone}
.escribiendo{display:inline-flex;gap:4px;align-items:center}
.escribiendo i{width:5px;height:5px;border-radius:50%;background:var(--timbre);opacity:.35;animation:pulso 1.1s infinite}
.escribiendo i:nth-child(2){animation-delay:.15s}.escribiendo i:nth-child(3){animation-delay:.3s}
@keyframes pulso{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.ejemplos{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.ejemplo{border:1px dashed var(--borde-fuerte);background:transparent;border-radius:100px;padding:7px 13px;font-size:.82rem;cursor:pointer;color:var(--tinta-500);transition:all .14s ease}
.ejemplo:hover{border-color:var(--timbre);color:var(--timbre-800);background:var(--timbre-050)}

/* ---------- barra de confianza ---------- */
.confianza{display:flex;gap:28px;flex-wrap:wrap;justify-content:space-between;border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);padding:20px 0;margin-top:34px}
.confianza div{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--tinta-700);font-weight:500}

/* ---------- áreas ---------- */
.area-card{display:flex;flex-direction:column;gap:8px;background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r-m);padding:18px;cursor:pointer;text-align:left;transition:all .16s ease;height:100%}
.area-card:hover{border-color:var(--timbre);box-shadow:var(--sombra-m);transform:translateY(-2px)}
.area-card .ico{width:34px;height:34px;border-radius:10px;background:var(--timbre-050);display:flex;align-items:center;justify-content:center;color:var(--timbre);margin-bottom:4px}
.area-card b{font-size:.98rem;font-weight:600}
.area-card small{color:var(--tinta-500);font-size:.82rem;line-height:1.45}
.subs{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:10px}
.subs span{font-size:.73rem;color:var(--tinta-500);background:var(--papel);border-radius:6px;padding:3px 7px}

/* ---------- pasos ---------- */
.pasos{counter-reset:paso;display:grid;gap:2px;border:1px solid var(--borde);border-radius:var(--r-l);overflow:hidden;background:var(--borde)}
.paso{background:var(--blanco);padding:26px 24px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.paso::before{counter-increment:paso;content:counter(paso,decimal-leading-zero);font-family:var(--mono);font-size:.8rem;color:var(--timbre);border:1px solid var(--timbre-100);background:var(--timbre-050);width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.paso h4{margin-bottom:5px}
.paso p{margin:0;color:var(--tinta-500);font-size:.93rem}

/* ---------- abogados ---------- */
.abog-card{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.avatar{width:58px;height:58px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:600;font-size:1.15rem;color:#fff;flex:none;letter-spacing:-.02em}
.avatar-lg{width:92px;height:92px;border-radius:22px;font-size:1.9rem}
.abog-nom{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.abog-meta{color:var(--tinta-500);font-size:.87rem;margin:3px 0 10px}
.estrellas{display:inline-flex;align-items:center;gap:5px;font-size:.85rem;color:var(--tinta-700);font-weight:600}
.estrellas svg{color:#E8A33D}
.filtros{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r-l);padding:16px;margin-bottom:22px}
@media(max-width:860px){.filtros{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.filtros{grid-template-columns:1fr}}

/* ---------- compatibilidad ---------- */
.match{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center}
@media(max-width:640px){.match{grid-template-columns:auto 1fr}.match-score{grid-column:1/-1}}
.match-score{text-align:center;min-width:88px}
.match-score b{font-family:var(--display);font-size:1.9rem;display:block;line-height:1;color:var(--timbre)}
.match-score small{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--tinta-500);font-family:var(--mono)}
.barras{display:grid;gap:7px;margin-top:14px}
.barra{display:grid;grid-template-columns:132px 1fr auto;gap:10px;align-items:center;font-size:.8rem}
.barra .pista{height:7px;background:#EFEFF6;border-radius:100px;overflow:hidden}
.barra .relleno{height:100%;background:var(--timbre);border-radius:100px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.barra .val{font-family:var(--mono);color:var(--tinta-500);font-size:.74rem}
.razon{display:flex;gap:8px;font-size:.87rem;color:var(--tinta-700);align-items:flex-start;margin-bottom:6px}
.razon svg{flex:none;margin-top:3px;color:var(--verificado)}

/* ---------- asistente de caso ---------- */
.progreso{height:4px;background:#E9E9F2;border-radius:100px;overflow:hidden;margin-bottom:8px}
.progreso i{display:block;height:100%;background:var(--timbre);transition:width .45s cubic-bezier(.2,.8,.2,1)}
.wiz{max-width:680px;margin:0 auto}
.wiz-cab{display:flex;justify-content:space-between;align-items:baseline;font-size:.8rem;color:var(--tinta-500);margin-bottom:22px}
.wiz-pregunta{font-family:var(--display);font-size:clamp(1.5rem,4vw,2.05rem);letter-spacing:-.025em;margin-bottom:8px}
.wiz-nota{color:var(--tinta-500);margin-bottom:22px}
.wiz-pie{display:flex;justify-content:space-between;gap:12px;margin-top:28px;align-items:center}
.aviso{background:var(--timbre-050);border:1px solid #D8D8DE;border-radius:var(--r-m);padding:15px 17px;font-size:.88rem;color:var(--tinta-700)}
.aviso b{color:var(--tinta)}
.check{display:flex;gap:11px;align-items:flex-start;cursor:pointer;font-size:.9rem;line-height:1.45}
.check input{width:19px;height:19px;accent-color:var(--timbre);flex:none;margin:1px 0 0}

/* ---------- paneles ---------- */
.panel-layout{display:grid;grid-template-columns:236px 1fr;gap:26px;align-items:start}
@media(max-width:900px){.panel-layout{grid-template-columns:1fr}}
.panel-nav{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r-l);padding:9px;position:sticky;top:84px}
@media(max-width:900px){.panel-nav{position:static;display:flex;gap:6px;overflow-x:auto;padding:8px}}
.panel-nav button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:10px 12px;border-radius:12px;cursor:pointer;font-size:.9rem;font-weight:500;color:var(--tinta-700);text-align:left;white-space:nowrap;transition:background .14s ease}
.panel-nav button:hover{background:var(--papel)}
.panel-nav button.activo{background:var(--tinta);color:#fff}
.kpi{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r-m);padding:17px}
.kpi b{font-family:var(--display);font-size:1.85rem;display:block;letter-spacing:-.03em;line-height:1.1}
.kpi small{color:var(--tinta-500);font-size:.8rem}
.tabla{width:100%;border-collapse:collapse;font-size:.89rem}
.tabla th{text-align:left;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--tinta-500);padding:10px 12px;border-bottom:1px solid var(--borde);font-weight:500}
.tabla td{padding:13px 12px;border-bottom:1px solid var(--borde);vertical-align:middle}
.tabla tr:last-child td{border-bottom:0}
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.chat{display:grid;gap:12px;max-height:340px;overflow-y:auto;padding:6px 2px}
.burbuja{max-width:78%;padding:11px 15px;border-radius:18px;font-size:.9rem;line-height:1.5}
.burbuja.yo{background:var(--timbre);color:#fff;justify-self:end;border-bottom-right-radius:5px}
.burbuja.otro{background:var(--blanco);border:1px solid var(--borde);justify-self:start;border-bottom-left-radius:5px}
.burbuja small{display:block;font-size:.7rem;opacity:.7;margin-top:4px}

/* ---------- acordeón ---------- */
.faq details{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r-m);margin-bottom:10px;overflow:hidden}
.faq summary{padding:17px 20px;cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;font-size:.98rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--timbre);font-size:1.25rem;flex:none;transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .cuerpo{padding:0 20px 18px;color:var(--tinta-500);font-size:.93rem}

/* ---------- testimonios ---------- */
.testi{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r-l);padding:24px;display:flex;flex-direction:column;gap:14px;height:100%}
.testi p{font-size:1rem;margin:0;line-height:1.6}
.testi footer{display:flex;align-items:center;gap:11px;margin-top:auto;font-size:.85rem;color:var(--tinta-500)}

/* ---------- precios ---------- */
.plan{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r-l);padding:26px;display:flex;flex-direction:column;height:100%}
.plan.destacado{border:1.5px solid var(--timbre);box-shadow:0 16px 40px rgba(10,10,12,.15);position:relative}
.plan .precio{font-family:var(--display);font-size:2.3rem;letter-spacing:-.035em;line-height:1;margin:12px 0 4px}
.plan ul{list-style:none;padding:0;margin:18px 0;display:grid;gap:10px;font-size:.9rem;flex:1}
.plan li{display:flex;gap:9px;align-items:flex-start;color:var(--tinta-700)}
.plan li svg{flex:none;margin-top:3px;color:var(--timbre)}

/* ---------- footer ---------- */
.pie{background:var(--tinta);color:#C8CCDA;padding:56px 0 28px;margin-top:60px}
.pie h4{color:#fff;font-family:var(--texto);font-size:.78rem;text-transform:uppercase;letter-spacing:.11em;margin-bottom:14px;font-weight:600}
.pie a{display:block;padding:5px 0;font-size:.9rem;color:#C8CCDA;transition:color .14s ease}
.pie a:hover{color:#fff}
.pie-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:30px}
@media(max-width:860px){.pie-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pie-grid{grid-template-columns:1fr}}
.pie-legal{border-top:1px solid rgba(255,255,255,.12);margin-top:38px;padding-top:22px;font-size:.79rem;color:#8E95AA;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- modal ---------- */
.modal-fondo{position:fixed;inset:0;background:rgba(20,26,43,.5);backdrop-filter:blur(3px);z-index:90;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--blanco);border-radius:var(--r-xl);max-width:520px;width:100%;padding:28px;box-shadow:var(--sombra-l);max-height:88vh;overflow-y:auto}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--tinta);color:#fff;padding:13px 22px;border-radius:100px;font-size:.9rem;z-index:95;box-shadow:var(--sombra-l);animation:sube .3s ease}
@keyframes sube{from{opacity:0;transform:translate(-50%,14px)}}

/* ---------- contenido largo (legales, blog) ---------- */
.prosa{max-width:74ch}
.prosa h2{margin:36px 0 12px}
.prosa h3{margin:26px 0 8px}
.prosa p,.prosa li{color:var(--tinta-700);font-size:.97rem}
.prosa ul,.prosa ol{padding-left:20px}
.prosa li{margin-bottom:7px}

/* ---------- misc ---------- */
.ancla-arriba{scroll-margin-top:90px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}
.cargando{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:giro .7s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}

/* ============================================================
   AGREGADOS DEL PROYECTO
   Piezas que la maqueta resolvia con estilos en linea y aca
   necesitan una clase, mas el aviso de atencion virtual.
   ============================================================ */
.marca-sello{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;
  background:var(--timbre);color:#fff;flex:none}
.marca-sello svg{width:19px;height:19px;display:block}
.marca-clara{color:#fff;margin-bottom:14px}

.pie-grid{grid-template-columns:2fr 1fr 1fr 1fr}
@media(max-width:760px){.pie-grid{grid-template-columns:1fr;gap:26px}}
.pie-nota{font-size:.87rem;color:#9AA1B5;max-width:44ch;margin:0 0 12px}
.pie-virtual{color:#C8CCDA}
.pie-virtual b{color:#fff}
.pie-legal{margin-top:34px}

/* Distintivo de atencion virtual: se repite en portada, perfiles y panel,
   asi que conviene que sea una sola pieza y no tres variantes parecidas. */
.sello-virtual{display:inline-flex;align-items:center;gap:8px;border-radius:100px;
  padding:6px 13px;font-size:.79rem;font-weight:600;background:var(--timbre-050);
  border:1px solid #D8D8DE;color:var(--timbre-800)}
.sello-virtual::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--timbre)}

/* Cabecera del panel del abogado */
.panel-cab{display:flex;justify-content:space-between;align-items:flex-start;
  gap:18px;flex-wrap:wrap;margin-bottom:22px}
.panel-nav a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:12px;font-size:.9rem;font-weight:500;
  color:var(--tinta-700);white-space:nowrap;transition:background .14s ease}
.panel-nav a:hover{background:var(--papel)}
.panel-nav a.activo{background:var(--tinta);color:#fff}
.panel-nav .cuenta{font-family:var(--mono);font-size:.72rem;background:var(--timbre-100);
  color:var(--timbre-800);border-radius:100px;padding:1px 7px}
.panel-nav a.activo .cuenta{background:rgba(255,255,255,.18);color:#fff}

.vacio{text-align:center;padding:44px 24px;color:var(--tinta-500)}
.vacio h3{color:var(--tinta);margin-bottom:8px}

/* Ficha de datos en dos columnas (perfil y verificacion del panel) */
.ficha{display:grid;grid-template-columns:150px 1fr;gap:10px 18px;margin:0;font-size:.9rem}
.ficha dt{color:var(--tinta-500)}
.ficha dd{margin:0}
@media(max-width:520px){.ficha{grid-template-columns:1fr;gap:2px 0}
  .ficha dd{margin-bottom:10px}}

/* Aviso de error dentro de formularios */
.aviso.error{background:#FEF3F2;border-color:#F3C6C0;color:#B42318}

/* Los formularios de Django renderizan controles pelados. En vez de agregar
   class="input" en cada widget, se estilan por elemento dentro de .campo:
   asi un ModelForm sale bien sin tocar ni un widget. */
.campo input:not([type=checkbox]):not([type=radio]),
.campo select,
.campo textarea,
form .form-select{
  width:100%;background:var(--blanco);border:1.5px solid var(--borde-fuerte);
  border-radius:var(--r-m);padding:13px 15px;font-size:1rem;
  transition:border-color .15s ease,box-shadow .15s ease}
.campo input:focus,.campo select:focus,.campo textarea:focus,form .form-select:focus{
  outline:none;border-color:var(--timbre);box-shadow:0 0 0 4px var(--timbre-050)}
.campo textarea{min-height:130px;resize:vertical;line-height:1.5}

/* ============================================================
   RETRATOS E ILUSTRACIONES
   ============================================================ */
.retrato{position:relative;display:grid;place-items:center;width:64px;height:64px;
  border-radius:50%;overflow:hidden;flex:none;background:var(--papel);
  border:1px solid var(--borde)}
.retrato img{width:100%;height:100%;object-fit:cover}
.retrato-sm{width:44px;height:44px}
.retrato-lg{width:104px;height:104px}

/* Sin foto va la balanza sola, a opacidad plena: ya no compite con nada
   encima, asi que puede leerse como el objeto que es. */
.retrato-balanza{background:linear-gradient(160deg,#FFFFFF,#EEEFF6)}
.retrato-balanza svg{width:86%;height:86%}

.ilustracion{display:block;width:100%;height:auto}
.lamina{border-radius:var(--r-m);overflow:hidden;margin-bottom:14px;background:var(--papel)}
.lamina img{display:block;width:100%;height:auto;aspect-ratio:120/84;object-fit:cover}

.abog-fila{display:flex;gap:14px;align-items:flex-start}

/* ============================================================
   CREDITOS
   El precio nunca aparece solo: al lado va su desglose y su rango.
   ============================================================ */
.saldo{display:inline-flex;align-items:baseline;gap:7px;border-radius:100px;
  padding:7px 15px;background:var(--tinta);color:#fff;white-space:nowrap}
.saldo b{font-family:var(--display);font-size:1.05rem;line-height:1}
.saldo small{font-size:.76rem;color:#A8AEC0}

.oportunidad{margin-bottom:14px}
.op-cab{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.op-resumen{font-size:.92rem;margin:0}
.op-motivo{font-size:.82rem;color:var(--plazo);margin:10px 0 0}
.cod{font-size:.78rem;color:var(--tinta-300)}

.op-precio{display:grid;grid-template-columns:1fr 210px;gap:22px;align-items:end;
  border-top:1px solid var(--borde);margin-top:16px;padding-top:15px}
@media(max-width:640px){.op-precio{grid-template-columns:1fr;align-items:stretch}}

.op-rango{display:inline-block;border-radius:100px;padding:3px 11px;font-size:.72rem;
  font-weight:600;letter-spacing:.02em;margin-bottom:9px}
.rango-basico{background:#EDF3EF;color:#2F6B52;border:1px solid #D3E4DA}
.rango-estandar{background:#EEF0F5;color:var(--tinta-700);border:1px solid #E1E4EC}
.rango-complejo{background:#FFF7E8;color:#9A6608;border:1px solid #F5E0B8}
.rango-critico{background:var(--plazo-100);color:var(--plazo);border:1px solid #F7D3BB}

.desglose{border-collapse:collapse;font-size:.85rem}
.desglose td{padding:3px 0;color:var(--tinta-500)}
.desglose td:last-child{text-align:right;padding-left:24px;color:var(--tinta-700)}
.desglose .total td{border-top:1px solid var(--borde);padding-top:6px;
  font-weight:600;color:var(--tinta)}
.op-pesos{font-size:.8rem;color:var(--tinta-300);margin:8px 0 0}

.op-accion{display:flex;flex-direction:column;gap:8px;justify-content:flex-end}
.op-falta,.op-queda{font-size:.79rem;color:var(--tinta-500);margin:0;text-align:center}
.op-falta{color:var(--plazo)}
.op-falta a{color:var(--timbre);font-weight:600;text-decoration:underline}

.datos-contacto{display:flex;flex-direction:column;gap:3px;background:var(--verificado-100);
  border:1px solid #BFE8D7;border-radius:var(--r-m);padding:12px 14px;font-size:.85rem}
.datos-contacto small{color:var(--verificado);font-size:.75rem;margin-top:3px}

.rangos{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px}
.rangos > div{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.rangos small{font-family:var(--mono);font-size:.76rem;color:var(--tinta-700)}
.rangos em{font-style:normal;font-size:.78rem;color:var(--tinta-500)}

.paquetes{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px}
.paquete{position:relative;border:1px solid var(--borde);border-radius:var(--r-l);
  padding:22px 16px 18px;background:var(--blanco);text-align:center;display:flex;
  flex-direction:column;gap:2px}
.paquete.destacado{border:1.5px solid var(--timbre);box-shadow:var(--sombra-m)}
.paquete-sello{position:absolute;top:-11px;left:50%;transform:translateX(-50%)}
/* El descuento va arriba a la derecha: es lo que distingue un tramo del otro. */
.paquete-desc{position:absolute;top:10px;right:11px;font-family:var(--mono);
  font-size:.7rem;font-weight:500;color:var(--verificado);
  background:var(--verificado-100);border:1px solid #BFE8D7;
  border-radius:100px;padding:1px 7px}
.paquete-creditos{font-family:var(--display);font-size:2rem;line-height:1}
.paquete small{color:var(--tinta-500);font-size:.8rem;margin-bottom:10px}
.paquete-unidad{font-size:.95rem;font-weight:600;color:var(--tinta)}
.paquete-precio{font-size:.78rem;color:var(--tinta-300)}
.paquete-ahorro{font-size:.75rem;color:var(--verificado);font-weight:600;margin-top:5px}
.paquete .btn{margin-top:auto;padding-top:12px}
.paquete .btn{margin-top:14px}

.tabla .der{text-align:right}
.tabla .suma{color:var(--verificado);font-weight:600}
.tabla .resta{color:var(--tinta-700)}

/* ---------- eleccion de paquete y medio de pago ---------- */
.paquete{cursor:pointer}
.paquete input[type=radio],.medio input[type=radio]{position:absolute;opacity:0;
  width:0;height:0;pointer-events:none}
.paquete:has(input:checked){border:1.5px solid var(--timbre);box-shadow:var(--sombra-m)}
.paquete:has(input:focus-visible),.medio:has(input:focus-visible){
  outline:2.5px solid var(--timbre);outline-offset:3px}

.medios{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:11px}
.medio{position:relative;display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  border:1px solid var(--borde);border-radius:var(--r-m);padding:15px 16px;
  background:var(--blanco);transition:border-color .14s ease,box-shadow .14s ease}
.medio:hover{border-color:var(--borde-fuerte)}
.medio:has(input:checked){border:1.5px solid var(--timbre);box-shadow:var(--sombra-s)}
/* El punto de seleccion se dibuja aca y no con el radio nativo, que no se
   puede estilar de forma pareja entre navegadores. */
.medio::before{content:"";width:17px;height:17px;border-radius:50%;flex:none;
  border:1.5px solid var(--borde-fuerte);margin-top:2px;transition:all .14s ease}
.medio:has(input:checked)::before{border:5px solid var(--timbre);background:var(--blanco)}
.medio-cuerpo{display:flex;flex-direction:column;gap:4px;min-width:0}
.medio-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.medio-desc{font-size:.84rem;color:var(--tinta-500)}
.medio-pie{font-size:.78rem;color:var(--tinta-300);font-family:var(--mono)}

/* ============================================================
   INGRESO Y RESULTADO DEL CASO
   ============================================================ */
.bloque{margin-bottom:16px}
.bloque h3{margin-bottom:14px}

/* Lectura en vivo del relato */
.lectura{border-top:1px dashed var(--borde-fuerte);margin-top:4px;padding:15px 0 0;
  display:grid;gap:9px;background:none}
.lectura-cab{display:flex;gap:9px;align-items:center;flex-wrap:wrap;font-size:.88rem}
.lectura-conf{font-size:.74rem;color:var(--tinta-300)}
.lectura-motivos{font-size:.83rem;color:var(--tinta-500)}
.lectura-motivos.urgente{color:var(--plazo);font-weight:500}
.lectura-docs{font-size:.83rem;color:var(--tinta-500)}
.lectura-riesgo{font-size:.85rem;color:var(--plazo);font-weight:600;
  background:var(--plazo-100);border:1px solid #F7D3BB;border-radius:var(--r-s);
  padding:10px 12px}

.preguntas{margin:0;padding-left:18px;display:grid;gap:5px;font-size:.89rem;
  color:var(--tinta-700)}
.razones{margin:0;padding:0;list-style:none;display:grid;gap:7px;font-size:.88rem;
  color:var(--tinta-700)}
.razones li{display:grid;grid-template-columns:16px 1fr;gap:8px}
.razones li::before{content:"";width:6px;height:6px;border-radius:50%;margin-top:7px;
  background:var(--verificado)}
.razones.reparos li::before{background:var(--plazo)}

.desglose-match{margin-top:16px;border-top:1px solid var(--borde);padding-top:12px}
.desglose-match summary{cursor:pointer;font-size:.85rem;color:var(--tinta-500);
  font-weight:500;list-style:none}
.desglose-match summary::-webkit-details-marker{display:none}
.desglose-match summary::before{content:"▸ ";color:var(--tinta-300)}
.desglose-match[open] summary::before{content:"▾ "}
.desglose-match .barras{margin-top:12px;display:grid;gap:7px}

/* ============================================================
   ACCESO Y ACREDITACION
   ============================================================ */
.sociales{display:grid;gap:9px}
.social{justify-content:flex-start;gap:12px;padding-left:18px}
.marca-social{display:grid;place-items:center;width:20px;height:20px;flex:none;
  font-family:var(--display);font-weight:700;font-size:.95rem}
.separador{display:flex;align-items:center;gap:12px;margin:18px 0;
  font-size:.8rem;color:var(--tinta-300)}
.separador::before,.separador::after{content:"";flex:1;height:1px;background:var(--borde)}

.materias{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:7px}
.materias ul{margin:0;padding:0;list-style:none;display:contents}
.materias li{display:flex}
.materias label{display:flex;align-items:center;gap:8px;font-size:.88rem;
  border:1px solid var(--borde);border-radius:var(--r-s);padding:9px 11px;
  cursor:pointer;width:100%}
.materias label:has(input:checked){border-color:var(--timbre);background:var(--timbre-050)}
.materias input{accent-color:var(--timbre);flex:none}

/* El muro: lo que ve un abogado sin acreditar en vez de los casos. */
.muro{border-left:3px solid var(--plazo)}

.documentos{display:grid;gap:8px}
.documento{display:flex;justify-content:space-between;align-items:center;gap:12px;
  border:1px solid var(--borde);border-radius:var(--r-m);padding:13px 15px}
.documento.listo{border-color:#BFE8D7;background:var(--verificado-100)}
.doc-info{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:.9rem}
.doc-estado{font-family:var(--mono);font-size:.74rem;color:var(--verificado);
  font-weight:500;white-space:nowrap}
.doc-estado.pendiente{color:var(--tinta-300)}

/* Botón social todavía sin credenciales: se ve, pero no promete lo que no puede. */
.social.pendiente{opacity:.5;cursor:not-allowed;pointer-events:none;position:relative}
.social.pendiente small{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-300);margin-left:auto}

/* Proveedor ofrecido pero todavia sin conectar: se muestra igual, marcado.
   Esconderlo dejaba la pantalla mintiendo por omision. */
.social.apagado{opacity:.55;cursor:default;pointer-events:none}
.social.apagado em{margin-left:auto;font-style:normal;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-300)}

/* ============================================================
   ACCESO DE ABOGADOS EN LA BARRA
   Es la segunda puerta del sitio y estaba escondida en un enlace de texto.
   Ahora tiene el tamano de una puerta, sin robarle el primer plano al boton
   de contar un caso, que sigue siendo lo que la mayoria viene a hacer.
   ============================================================ */
.btn-abogado{display:inline-flex;align-items:center;gap:11px;padding:8px 18px 8px 14px;
  background:var(--blanco);color:var(--tinta);border:1px solid var(--borde-fuerte);
  border-radius:100px;text-align:left;white-space:nowrap}
.btn-abogado:hover{background:var(--blanco);border-color:var(--tinta);
  box-shadow:var(--sombra-m);transform:translateY(-1px)}
.icono-abogado{display:grid;place-items:center;width:34px;height:34px;flex:none;
  border-radius:11px;background:var(--tinta);color:#fff}
.icono-abogado svg{width:21px;height:21px}
.etiqueta-abogado{display:flex;flex-direction:column;line-height:1.2}
.etiqueta-abogado b{font-size:.9rem;font-weight:600}
.etiqueta-abogado small{font-size:.72rem;color:var(--tinta-500);font-weight:400}

/* En pantallas chicas se queda el icono solo: sigue siendo un blanco grande
   para el dedo, que es lo que importa ahi. */
@media(max-width:760px){
  .btn-abogado{padding:5px;gap:0;border-color:transparent}
  .btn-abogado .etiqueta-abogado{display:none}
  .icono-abogado{width:38px;height:38px;border-radius:12px}
  .icono-abogado svg{width:23px;height:23px}
}

/* ---------- casos liberados a las 48 horas ---------- */
.pill-libre{background:var(--verificado-100);border-color:#BFE8D7;color:var(--verificado)}
.desglose tr.liberacion td{color:var(--verificado)}
.oportunidad.libre{border-color:#BFE8D7}
.op-tachado{font-size:.84rem;color:var(--tinta-500);margin:0}
.op-tachado s{color:var(--tinta-300)}
.op-tachado b{color:var(--verificado)}
.liberados{margin-top:34px;border-top:1px solid var(--borde);padding-top:26px}
.liberados > h3{margin-bottom:6px}
.liberados > .sub{margin-bottom:18px;font-size:.89rem}

/* ---------- solapas de oportunidades ---------- */
.solapas{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.solapa{display:inline-flex;align-items:center;gap:8px;border-radius:100px;
  padding:8px 15px;font-size:.88rem;font-weight:500;color:var(--tinta-700);
  border:1px solid var(--borde);background:var(--blanco);transition:all .14s ease}
.solapa:hover{border-color:var(--borde-fuerte)}
.solapa.activa{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.solapa .cuenta{font-family:var(--mono);font-size:.72rem;border-radius:100px;
  padding:1px 7px;background:var(--papel);color:var(--tinta-500)}
.solapa.activa .cuenta{background:rgba(255,255,255,.18);color:#fff}
.solapa.gratis:not(.activa){border-color:#BFE8D7;color:var(--verificado)}
.solapa.gratis:not(.activa) .cuenta{background:var(--verificado-100);color:var(--verificado)}
.solapa.gratis.activa{background:var(--verificado);border-color:var(--verificado)}

/* El tope se lee distinto de la liberacion: uno recorta, el otro regala. */
.desglose tr.tope td{color:var(--tinta-300)}

/* ============================================================
   SERVICIOS: LO QUE CONTRATA LA PERSONA
   ============================================================ */
.servicios{display:grid;gap:11px}
.servicio{position:relative;display:flex;flex-direction:column;gap:7px;cursor:pointer;
  border:1px solid var(--borde);border-radius:var(--r-m);padding:16px 17px;
  background:var(--blanco);transition:border-color .14s ease,box-shadow .14s ease}
.servicio:hover{border-color:var(--borde-fuerte)}
.servicio input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.servicio:has(input:checked){border:1.5px solid var(--timbre);box-shadow:var(--sombra-s)}
.servicio:has(input:focus-visible){outline:2.5px solid var(--timbre);outline-offset:3px}
/* Lo que todavia no se puede contratar se muestra igual, apagado: esconderlo
   deja a la persona sin saber que existe. */
.servicio.pronto{opacity:.55;cursor:default;background:var(--papel)}
.servicio-cab{display:flex;align-items:center;justify-content:space-between;gap:10px}
.servicio-cab b{font-size:1rem}
.servicio-precio{font-size:1rem;font-weight:600}
.servicio-resumen{font-size:.87rem;color:var(--tinta-500)}
.servicio-lista{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:4px}
.servicio-lista li{display:grid;grid-template-columns:15px 1fr;gap:7px;
  font-size:.84rem;color:var(--tinta-700)}
.servicio-lista li::before{content:"";width:6px;height:6px;border-radius:50%;
  margin-top:7px;background:var(--verificado)}
.servicio-lista.fuera li{color:var(--tinta-500)}
.servicio-lista.fuera li::before{background:var(--tinta-300)}

.contratado{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap}
.contratado h4{margin-bottom:3px}
.contratado p{font-size:.87rem;color:var(--tinta-500);margin:0}
.contratado-precio{font-size:1.2rem;font-weight:600}

/* Invitación a recorrer el flujo con un caso de ejemplo. Solo con DEBUG. */
.ejemplo-invita{display:flex;align-items:flex-start;gap:13px;margin-bottom:20px;
  border-style:dashed;border-color:var(--borde-fuerte)}
.ejemplo-invita:hover{border-color:var(--tinta);box-shadow:var(--sombra-s)}
.ejemplo-invita b{display:block;font-size:.94rem;color:var(--tinta)}
.ejemplo-invita small{display:block;font-size:.83rem;color:var(--tinta-500);
  margin-top:3px}
.ejemplo-marca{flex:none;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;background:var(--tinta);color:#fff;border-radius:100px;
  padding:3px 10px;margin-top:2px}

/* Tarjetas guardadas -------------------------------------------------------
   Lo que se ve de una tarjeta son cuatro digitos y una marca. No hay mas,
   porque no guardamos mas. */
.medio.medio-inactivo{opacity:.55;cursor:not-allowed}
.casilla{display:flex;gap:9px;align-items:flex-start;cursor:pointer;
  font-size:.9rem;line-height:1.45}
/* Ofrecer guardar una tarjeta que ya esta guardada no significa nada. */
.medios-tarjeta:has(#otra-tarjeta:not(:checked)) + .casilla{display:none}
.casilla input{margin-top:3px;flex:none}
.fila-tarjeta{display:flex;justify-content:space-between;align-items:center;
  gap:14px;padding:11px 0;border-bottom:1px solid var(--borde)}
.fila-tarjeta:last-of-type{border-bottom:0}
.fila-tarjeta b{display:block;font-size:.94rem}
.fila-tarjeta small{display:block;font-size:.8rem;font-family:var(--mono)}
.fila-tarjeta form{margin:0}
.btn-chico{padding:6px 13px;font-size:.83rem}

/* --- Menú móvil a pantalla completa (hamburguesa) ------------------------ */
/* Las tres barras del boton, que se cruzan en una X cuando el menu esta abierto. */
.hamb{flex-direction:column;gap:0}
.hamb span{display:block;width:18px;height:2px;background:var(--tinta);border-radius:2px;
  transition:transform .2s ease,opacity .2s ease}
.hamb span+span{margin-top:4px}
body.menu-abierto .hamb span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-abierto .hamb span:nth-child(2){opacity:0}
body.menu-abierto .hamb span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Donde se muestra la hamburguesa, las acciones se corren a la derecha; en
   pantallas de telefono se guardan dentro del menu y la barra queda limpia. */
@media(max-width:1000px){ .nav-acciones{margin-left:auto} }
@media(max-width:560px){ .nav-acciones{display:none} .hamb{margin-left:auto} }

/* El panel ocupa todo lo que hay bajo la barra, respetando el notch. */
body.menu-abierto{overflow:hidden}
.menu-movil{top:calc(68px + env(safe-area-inset-top,0px));
  padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}
.menu-movil.abierto{display:flex;flex-direction:column;gap:2px}
.menu-movil a{color:var(--tinta)}
.menu-movil a.activo{color:var(--timbre-800)}
.menu-movil-acciones{margin-top:auto;display:flex;flex-direction:column;gap:10px;
  padding-top:22px;border-top:1px solid var(--borde)}
.menu-movil-acciones .btn{margin-top:0}
.menu-movil-acciones form{margin:0}

/* --- Páginas legales (términos, privacidad) ------------------------------ */
.texto-legal h3{margin:28px 0 8px;font-size:1.12rem}
.texto-legal p{margin:0 0 12px;color:var(--tinta-700)}
.texto-legal a{color:var(--timbre-800);text-decoration:underline;text-underline-offset:2px}

.pie-legal-enlaces{display:flex;gap:18px}
.pie-legal-enlaces a{color:inherit;text-decoration:underline;text-underline-offset:2px}