:root{
  --tinta:#14181C;
  --marfil:#F4F1EC;
  --marfil-alt:#FDFCFA;
  --vino:#5C2A2B;
  --azul:#1B3B54;
  --grafito:#4B4F54;
  --piedra:#C7C5C1;              /* solo bordes y adornos */
  --piedra-texto:#63666A;        /* el mismo gris, pero legible: #C7C5C1 daba
                                    1.53:1 sobre el marfil, muy por debajo del
                                    4.5:1 que exige WCAG AA para texto normal */
  --bronce:#A8763E;
  --bronce-texto:#8A5F2E;
  --borde:#E4E0D8;
  --serif-wordmark:'Times New Roman', Times, serif;
  --sans:'Nunito', sans-serif;
  --meta:'Aptos','Segoe UI', system-ui, sans-serif;
  --container:1160px;
  /* Radios de esquina. El sitio nacía todo en 2px y por eso se sentía
     rígido y frío; unas esquinas más suaves bajan la formalidad sin
     quitarle seriedad, que es justo lo que un cliente necesita para
     confiar. */
  --radio:14px;          /* tarjetas y cajas */
  --radio-chico:10px;    /* botones, campos, controles */
  --sombra-suave:0 10px 30px rgba(20,24,28,.06);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  margin:0;
  background:var(--marfil);
  color:var(--tinta);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100vw;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--container);margin:0 auto;padding:0 32px;}
@media (max-width:640px){.wrap{padding:0 20px;}}

/* ── plantilla de presentación de servicio en línea ──
   Un servicio se explica y muestra su precio ANTES de pedir cuenta. El
   acceso va al final, enmarcado como un paso menor. Se usa igual en todas
   las pantallas de servicio para que la experiencia sea la misma. */
.hero-serv{text-align:center;max-width:660px;margin:0 auto 40px;}
.hero-serv h1{font-size:clamp(26px,4vw,38px);line-height:1.15;margin:14px 0 16px;}
.hero-serv p.lead{font-size:16px;color:var(--grafito);line-height:1.85;}
.precio-chip{display:inline-block;margin-top:18px;font-family:var(--meta);font-size:14px;
  color:var(--tinta);background:var(--marfil-alt);border:1px solid var(--borde);
  border-radius:var(--radio-chico);padding:10px 18px;}
.precio-chip b{color:var(--vino);}
.pasos-serv{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:900px;
  margin:0 auto 40px;}
@media (max-width:720px){.pasos-serv{grid-template-columns:1fr;gap:14px;}}
.paso-serv{border:1px solid var(--borde);background:#fff;border-radius:var(--radio);padding:22px 22px 24px;}
.paso-serv .np{font-family:var(--meta);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--bronce-texto);}
.paso-serv h4{font-size:16px;margin:8px 0 6px;color:var(--tinta);}
.paso-serv p{font-size:13.5px;color:var(--grafito);line-height:1.7;}
.incluye-serv{max-width:660px;margin:0 auto 36px;border-left:2px solid var(--bronce);
  background:var(--marfil-alt);padding:20px 24px;}
.incluye-serv .t{font-family:var(--meta);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bronce-texto);margin-bottom:8px;}
.incluye-serv ul{margin:0;padding-left:18px;color:var(--grafito);font-size:14px;line-height:1.9;}
.acceso-titulo{text-align:center;max-width:520px;margin:0 auto 14px;}

.eyebrow{
  font-family:var(--meta);
  font-size:12px;
  font-weight:700;
  letter-spacing:.32em;
  padding-left:.32em;
  text-transform:uppercase;
  color:var(--bronce-texto);
}
h1,h2,h3{font-family:var(--sans);font-weight:500;margin:0;color:var(--tinta);}
.section{padding:118px 0;}
@media (max-width:900px){.section{padding:80px 0;}}
.section-head{max-width:620px;margin-bottom:56px;}
.section-head h2{font-size:clamp(30px,4vw,44px);line-height:1.15;margin-top:14px;}
.section-head h2 em{font-style:italic;color:var(--vino);font-weight:500;}
.section-head p{color:var(--grafito);font-size:17px;margin-top:16px;}

/* ---------- arco divisor (elemento gráfico de firma) ---------- */
.arco{display:block;width:100%;height:28px;margin:0 auto;}
.arco path{fill:none;stroke:var(--piedra);stroke-width:1;}
.arco.oscuro path{stroke:#2a2f35;}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:40;
  background:rgba(244,241,236,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--borde);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:84px;gap:28px;}
.brand{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.brand img{height:34px;width:auto;}
.brand-word{display:flex;flex-direction:column;line-height:1;}
.brand-word .name{font-family:var(--serif-wordmark);font-size:22px;letter-spacing:.14em;padding-left:.14em;color:var(--tinta);}
.brand-word .tag{font-family:var(--meta);font-size:9px;letter-spacing:.4em;padding-left:.4em;text-transform:uppercase;color:var(--grafito);margin-top:3px;}
nav.links{display:flex;align-items:center;gap:22px;flex-wrap:nowrap;}
nav.links a{white-space:nowrap;
  font-family:var(--meta);font-size:13.5px;font-weight:600;letter-spacing:.03em;
  color:var(--grafito);position:relative;padding:6px 0;
  transition:color .2s ease;
}
nav.links a:hover{color:var(--vino);}
nav.links a.cta{
  background:var(--tinta);color:var(--marfil);padding:10px 22px;border-radius:var(--radio-chico);
  font-weight:700;letter-spacing:.05em;
}
nav.links a.cta:hover{background:var(--vino);color:var(--marfil);}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;}
.burger span{display:block;width:22px;height:1.5px;background:var(--tinta);margin:5px 0;}
@media (max-width:1120px){
  /* El drawer va en `vw/vh` y NO en `inset`: el header tiene
     `backdrop-filter`, que lo vuelve el bloque contenedor de sus hijos
     `position:fixed`, así que `inset:84px 0 0 0` se resolvía contra el
     header (84px de alto) y el panel colapsaba, dejando los enlaces
     encimados sobre el hero. Con medidas de viewport cubre la pantalla
     completa, y el z-index lo pone por encima del contenido. */
  nav.links{
    position:fixed;top:0;left:0;width:100vw;height:100dvh;
    background:var(--marfil);z-index:50;
    flex-direction:column;justify-content:flex-start;align-items:flex-start;
    padding:104px 32px 40px;gap:28px;overflow-y:auto;
    transform:translateX(100%);transition:transform .3s ease;
  }
  nav.links.open{transform:translateX(0);}
  nav.links a{font-size:20px;}
  .burger{display:block;position:relative;z-index:60;}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:96px 0 80px;}
.hero-mark{
  position:absolute;right:-6%;top:50%;transform:translateY(-50%);
  width:640px;max-width:70vw;opacity:.10;pointer-events:none;
}
.hero .wrap{position:relative;z-index:1;}
.hero-loc{font-family:var(--meta);font-size:13px;letter-spacing:.18em;padding-left:.18em;color:var(--grafito);text-transform:uppercase;}
.hero h1{
  font-size:clamp(40px,6vw,74px);line-height:1.08;margin-top:22px;max-width:820px;
  font-weight:400;
}
.hero h1 em{font-style:italic;color:var(--vino);font-weight:500;}
.hero p.lead{font-size:19px;color:var(--grafito);max-width:520px;margin-top:26px;}
.hero .ctas{display:flex;gap:16px;margin-top:40px;flex-wrap:wrap;}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--meta);font-size:13.5px;font-weight:700;letter-spacing:.02em;
  padding:15px 28px;border:1px solid var(--tinta);border-radius:999px;
  transition:all .2s ease;
}
.btn.solid{background:var(--tinta);color:var(--marfil);}
.btn.solid:hover{background:var(--vino);border-color:var(--vino);}
.btn.ghost{background:transparent;color:var(--tinta);}
.btn.ghost:hover{background:var(--tinta);color:var(--marfil);}

/* ---------- ticker de áreas ---------- */
.ticker-shell{border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);background:var(--marfil-alt);}
.ticker{
  display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
}
.ticker::-webkit-scrollbar{display:none;}
.ticker a{
  flex:none;display:flex;align-items:baseline;gap:10px;
  padding:18px 26px;font-family:var(--meta);font-size:13px;font-weight:600;color:var(--grafito);
  border-right:1px solid var(--borde);white-space:nowrap;transition:color .2s ease, background .2s ease;
}
.ticker a:hover{color:var(--vino);background:#F9F6F1;}
.ticker a .num{font-family:var(--sans);font-style:italic;color:var(--bronce-texto);font-size:13px;}

/* ---------- nosotros ---------- */
.nosotros-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:start;}
@media (max-width:840px){.nosotros-grid{grid-template-columns:1fr;gap:36px;}}
.nosotros-grid p{color:var(--grafito);font-size:17px;line-height:1.8;}
.nosotros-grid p strong{color:var(--tinta);}
.kw-panel{border-left:1px solid var(--piedra);padding-left:32px;}
.kw-panel .label{font-family:var(--meta);font-size:12px;font-weight:700;letter-spacing:.28em;padding-left:.28em;text-transform:uppercase;color:var(--grafito);}
.kw-panel .kws{font-family:var(--sans);font-style:italic;font-size:20px;line-height:2;color:var(--tinta);margin-top:14px;}

/* ---------- servicios ---------- */
.servicios-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--borde);border:1px solid var(--borde);}
@media (max-width:760px){.servicios-grid{grid-template-columns:1fr;}}
.servicio-card{
  background:var(--marfil-alt);padding:36px 38px;display:flex;flex-direction:column;gap:10px;
  transition:background .22s ease;
}
.servicio-card:hover{background:#fff;}
.servicio-card .num{font-family:var(--sans);font-style:italic;font-size:22px;color:var(--bronce-texto);}
.servicio-card h3{font-size:19px;font-weight:600;}
.servicio-card p{font-size:14.5px;color:var(--grafito);margin:0;}

/* ---------- justicia alternativa (oscuro) ---------- */
.ja{background:var(--tinta);color:var(--marfil);}
.ja .eyebrow{color:var(--bronce);}
.ja .section-head h2{color:var(--marfil);}
.ja .section-head h2 em{color:#d79a72;}
.ja .section-head p{color:#C7C5C1;}
.ja-badge{
  display:inline-flex;align-items:center;gap:12px;padding:10px 20px;
  border:1px solid #2a2f35;margin-bottom:28px;
}
.ja-badge .n{font-family:var(--sans);font-size:26px;font-style:italic;color:var(--bronce);}
.ja-badge .t{font-family:var(--meta);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#C7C5C1;line-height:1.4;}
.ja-content{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;margin-top:20px;}
@media (max-width:840px){.ja-content{grid-template-columns:1fr;gap:40px;}}
.ja-content>p{color:#C7C5C1;font-size:16px;line-height:1.85;}
.ja-list{display:flex;flex-direction:column;gap:26px;}
.ja-item{display:flex;gap:20px;}
.ja-item .rn{font-family:var(--meta);font-size:13px;color:var(--bronce);padding-top:3px;min-width:22px;}
.ja-item p{margin:0;font-size:15px;color:#e8e6e2;line-height:1.7;}
.ja-item p strong{color:#fff;}

/* ---------- contratos / convenios (nuevo apartado) ---------- */
.expediente{background:var(--marfil-alt);border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);}
.exp-top{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
@media (max-width:900px){.exp-top{grid-template-columns:1fr;gap:40px;}}
.exp-top p{color:var(--grafito);font-size:17px;line-height:1.8;margin-top:16px;}
.exp-steps{display:flex;flex-direction:column;gap:0;border:1px solid var(--borde);background:#fff;}
.exp-step{display:flex;gap:20px;padding:26px 28px;border-bottom:1px solid var(--borde);}
.exp-step:last-child{border-bottom:none;}
.exp-step .sn{font-family:var(--sans);font-style:italic;font-size:24px;color:var(--bronce);min-width:32px;}
.exp-step h4{font-size:16px;font-weight:700;margin:0 0 4px;}
.exp-step p{font-size:14px;color:var(--grafito);margin:0;line-height:1.6;}
.exp-cta{margin-top:44px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.exp-note{font-family:var(--meta);font-size:12.5px;color:var(--grafito);}

/* ---------- testimonio ---------- */
.testi{text-align:center;max-width:760px;margin:0 auto;padding:100px 32px;}
.testi svg{margin:0 auto 20px;display:block;}
.testi blockquote{
  font-size:clamp(21px,2.6vw,28px);font-style:italic;color:var(--tinta);margin:0;line-height:1.55;font-weight:400;
}
.testi cite{display:block;font-style:normal;font-family:var(--meta);font-size:13px;color:var(--grafito);margin-top:24px;letter-spacing:.03em;}

/* ---------- contacto ---------- */
.contacto-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;}
@media (max-width:900px){.contacto-grid{grid-template-columns:1fr;gap:44px;}}
.info-row{display:flex;flex-direction:column;gap:26px;margin-top:8px;}
.info-item .label{font-family:var(--meta);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--bronce-texto);}
.info-item .val{font-size:16px;margin-top:6px;color:var(--tinta);}
.info-item .val a:hover{color:var(--vino);}
form.consulta{display:flex;flex-direction:column;gap:18px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field label{font-family:var(--meta);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grafito);}
.field input,.field textarea,.field select{
  font-family:var(--sans);font-size:15px;padding:14px 16px;border:1px solid var(--piedra);
  background:#fff;color:var(--tinta);border-radius:var(--radio-chico);
}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--azul);outline-offset:1px;border-color:var(--azul);}
.field textarea{resize:vertical;min-height:120px;}
.consulta .btn{align-self:flex-start;border:none;cursor:pointer;}
.form-note{font-family:var(--meta);font-size:12.5px;color:var(--grafito);margin-top:6px;}

/* ---------- footer ---------- */
footer{background:var(--tinta);color:#C7C5C1;padding:80px 0 32px;}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px;padding-bottom:56px;border-bottom:1px solid #2a2f35;}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr;gap:36px;}}
.foot-brand .brand-word .name{color:var(--marfil);}
.foot-brand p{font-size:14.5px;color:#9a9a95;margin-top:18px;max-width:320px;line-height:1.7;}
.foot-col .label{font-family:var(--meta);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#9A9A94;margin-bottom:18px;}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.foot-col a,.foot-col span{font-size:14.5px;color:#C7C5C1;}
.foot-col a:hover{color:var(--bronce);}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:28px;flex-wrap:wrap;gap:12px;}
.foot-bottom p{font-family:var(--meta);font-size:12.5px;color:#8E8E88;margin:0;}

/* ---------- modal aviso ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(20,24,28,.6);display:none;align-items:center;justify-content:center;z-index:100;padding:24px;}
.modal-backdrop.open{display:flex;}
.modal{background:var(--marfil-alt);max-width:680px;width:100%;max-height:80vh;overflow-y:auto;padding:44px;position:relative;}
.modal h3{font-size:24px;margin-bottom:6px;}
.modal .sub{font-family:var(--meta);font-size:12.5px;color:var(--grafito);margin-bottom:24px;}
.modal p{color:var(--grafito);font-size:14.5px;line-height:1.75;}
.modal-close{position:absolute;top:20px;right:20px;background:none;border:0;font-size:22px;cursor:pointer;color:var(--grafito);}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
:focus-visible{outline:2px solid var(--azul);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto !important;transition:none !important;}}

/* ============================================================
   PÁGINAS DE ÁREA DE PRÁCTICA · agregado 25-jul-2026
   ============================================================ */

/* Hero de área */
.area-hero{position:relative;overflow:hidden;background:var(--marfil);
  padding:clamp(46px,7vw,86px) 0 clamp(40px,6vw,68px);border-bottom:1px solid var(--borde)}
.area-hero .wrap{position:relative;z-index:2}
.area-hero .hero-mark{position:absolute;right:-70px;top:-40px;width:min(420px,42vw);
  opacity:.05;z-index:1;pointer-events:none}
.area-hero h1{font-size:clamp(30px,4.6vw,52px);line-height:1.1;letter-spacing:-.5px;
  margin:16px 0 22px;font-weight:700;color:var(--tinta)}
.area-hero h1 em{font-style:italic;color:var(--vino)}
.area-hero .lead{max-width:74ch;font-size:clamp(15.5px,1.45vw,17.5px);line-height:1.75;color:var(--grafito)}
.area-hero .ctas{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}

.crumbs{font-family:var(--meta);font-size:12.5px;color:var(--grafito);margin-bottom:26px;letter-spacing:.2px}
.crumbs a{color:var(--grafito);text-decoration:none;border-bottom:1px solid transparent;transition:.2s}
.crumbs a:hover{color:var(--vino);border-bottom-color:var(--vino)}
.crumbs span{margin:0 7px;color:var(--piedra-texto)}
.crumbs b{color:var(--tinta);font-weight:600}

.area-hero-top{display:flex;align-items:center;gap:16px}
.area-num{font-family:var(--serif-wordmark);font-style:italic;font-size:34px;line-height:1;
  color:var(--bronce);min-width:44px}

/* Qué comprende */
.comp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:40px;
  background:var(--borde);border:1px solid var(--borde)}
.comp-item{background:var(--marfil-alt);padding:30px 30px 32px;transition:background .25s}
.comp-item:hover{background:#fff}
.comp-item h3{font-size:17.5px;font-weight:700;color:var(--tinta);margin-bottom:11px;letter-spacing:-.2px}
.comp-item p{font-size:15px;line-height:1.72;color:var(--grafito);margin:0}

/* Para quién */
.quien-band{background:var(--azul);color:#EDEAE4}
/* Sobre el azul oscuro el gris CLARO es el legible; --piedra-texto
   existe para fondos claros. No confundirlos. */
.quien-band .eyebrow{color:#C7C5C1}
.quien-band h2{color:#fff}
.quien-band h2 em{color:#D9A86A;font-style:italic}
.quien-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.quien-card{border-top:2px solid rgba(255,255,255,.22);padding-top:22px}
.quien-card h3{font-size:17px;font-weight:700;color:#fff;margin-bottom:10px}
.quien-card p{font-size:14.8px;line-height:1.7;color:#C8CDD3;margin:0}

/* Cómo trabajamos */
.pasos-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 44px;margin-top:44px}
.paso{display:flex;gap:20px;align-items:flex-start}
.paso .pn{font-family:var(--serif-wordmark);font-style:italic;font-size:26px;line-height:1;
  color:var(--bronce);min-width:34px;padding-top:2px}
.paso h4{font-size:16.5px;font-weight:700;color:var(--tinta);margin-bottom:8px}
.paso p{font-size:14.8px;line-height:1.7;color:var(--grafito);margin:0}

/* Banda de llamada a la acción */
.cta-band{background:var(--tinta);color:#EDEAE4;padding:clamp(52px,6vw,78px) 0;text-align:center}
.cta-band h2{font-size:clamp(24px,3.1vw,34px);color:#fff;margin-bottom:16px;font-weight:700;letter-spacing:-.4px}
.cta-band p{max-width:62ch;margin:0 auto;font-size:15.5px;line-height:1.75;color:#B9BFC6}
.cta-band .ctas{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-band .btn.ghost{border-color:rgba(255,255,255,.35);color:#EDEAE4}
.cta-band .btn.ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}

/* Materias relacionadas */
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.rel-card{display:block;text-decoration:none;background:var(--marfil-alt);border:1px solid var(--borde);
  padding:26px 24px 28px;transition:.25s}
.rel-card:hover{border-color:var(--bronce);transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(20,24,28,.07)}
.rel-card .num{font-family:var(--serif-wordmark);font-style:italic;font-size:20px;color:var(--bronce-texto);display:block;margin-bottom:10px}
.rel-card h3{font-size:16.5px;font-weight:700;color:var(--tinta);margin-bottom:8px}
.rel-card p{font-size:14.3px;line-height:1.65;color:var(--grafito);margin:0}

/* Distintivo 370 dentro del hero */
.ja-badge-inline{display:inline-flex;align-items:center;gap:16px;margin-top:30px;
  border:1px solid var(--borde);background:var(--marfil-alt);padding:14px 22px 14px 18px}
.ja-badge-inline .n{font-family:var(--serif-wordmark);font-size:38px;line-height:1;color:var(--vino)}
.ja-badge-inline .t{font-family:var(--meta);font-size:12px;line-height:1.45;color:var(--grafito);
  text-transform:uppercase;letter-spacing:.7px}

/* ---- Portada: tarjetas de área enlazables ---- */
a.servicio-card{text-decoration:none;display:block}
a.servicio-card:hover h3{color:var(--vino)}
.servicio-card .ver{font-family:var(--meta);font-size:12px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--bronce-texto);margin-top:14px;display:inline-block;opacity:0;transform:translateX(-6px);transition:.25s}
a.servicio-card:hover .ver{opacity:1;transform:translateX(0)}

/* ---- Portada: bloque Servicios en línea ---- */
.linea-band{background:var(--marfil);border-top:1px solid var(--borde);border-bottom:1px solid var(--borde)}
.linea-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:44px}
.linea-card{background:var(--marfil-alt);border:1px solid var(--borde);padding:34px 32px 36px;
  display:flex;flex-direction:column;transition:.25s}
.linea-card:hover{border-color:var(--bronce);box-shadow:0 14px 36px rgba(20,24,28,.07)}
.linea-card .eyebrow{margin-bottom:14px}
.linea-card h3{font-size:clamp(21px,2.4vw,26px);line-height:1.22;font-weight:700;color:var(--tinta);
  margin-bottom:14px;letter-spacing:-.3px}
.linea-card h3 em{font-style:italic;color:var(--vino)}
.linea-card>p{font-size:15px;line-height:1.72;color:var(--grafito);margin-bottom:22px}
.linea-pasos{border-top:1px solid var(--borde);padding-top:20px;margin-bottom:26px;display:grid;gap:14px}
.linea-paso{display:flex;gap:14px;align-items:flex-start}
.linea-paso .sn{font-family:var(--serif-wordmark);font-style:italic;font-size:17px;color:var(--bronce-texto);min-width:22px;line-height:1.4}
.linea-paso b{display:block;font-size:14.5px;color:var(--tinta);font-weight:700;margin-bottom:3px}
.linea-paso span{font-size:13.8px;line-height:1.62;color:var(--grafito)}
.linea-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.linea-precio{font-family:var(--meta);font-size:13px;color:var(--grafito)}
.linea-precio b{color:var(--tinta);font-size:14.5px}

/* ---- Responsive ---- */
@media (max-width:900px){
  .comp-grid{grid-template-columns:1fr}
  .quien-grid{grid-template-columns:1fr;gap:22px}
  .pasos-grid{grid-template-columns:1fr;gap:26px}
  .rel-grid{grid-template-columns:1fr}
  .linea-grid{grid-template-columns:1fr}
  .area-hero .hero-mark{right:-90px;width:60vw;opacity:.04}
}
@media (max-width:560px){
  .area-hero-top{gap:12px}
  .area-num{font-size:28px;min-width:34px}
  .comp-item{padding:24px 22px 26px}
  .linea-card{padding:28px 24px 30px}
  .crumbs{font-size:11.5px}
}

.field select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%234B4F54' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;cursor:pointer}

/* Tres servicios en línea (agregado 27-jul-2026) */
.linea-grid.tres{grid-template-columns:repeat(3,1fr);gap:22px}

/* Seis servicios en tres columnas: con dos, la retícula quedaba en tres
   filas altísimas y el sexto servicio caía muy por debajo del pliegue.
   A partir de 1100 px caben tres; abajo baja a dos y luego a una. */
.linea-grid.seis,.linea-grid.siete,.linea-grid.doce{grid-template-columns:repeat(3,1fr);gap:22px}
.linea-grid.seis .linea-card,.linea-grid.siete .linea-card,.linea-grid.doce .linea-card{padding:30px 26px 32px}
.linea-grid.seis .linea-card h3,.linea-grid.siete .linea-card h3,.linea-grid.doce .linea-card h3{font-size:clamp(18px,1.8vw,21px)}
.linea-grid.seis .linea-card p,.linea-grid.siete .linea-card p,.linea-grid.doce .linea-card p{font-size:14.5px}
.linea-grid.seis .linea-paso span,.linea-grid.siete .linea-paso span,.linea-grid.doce .linea-paso span{font-size:12.5px}
@media (max-width:1100px){.linea-grid.seis,.linea-grid.siete,.linea-grid.doce{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.linea-grid.seis,.linea-grid.siete,.linea-grid.doce{grid-template-columns:1fr}}
.linea-grid.tres .linea-card{padding:30px 26px 32px}
.linea-grid.tres .linea-card h3{font-size:clamp(19px,1.9vw,22px)}
@media (max-width:1100px){.linea-grid.tres{grid-template-columns:1fr}}
/* Cuatro servicios en línea: 2x2. Con tres columnas la cuarta tarjeta
   quedaba huérfana en el segundo renglón. */
.linea-grid.cuatro{grid-template-columns:repeat(2,1fr);gap:24px}
.linea-grid.cuatro .linea-card{padding:32px 28px 34px}
.linea-grid.cuatro .linea-card h3{font-size:clamp(20px,2vw,24px)}
/* Con un número impar de tarjetas, la última quedaba huérfana en media
   fila. Se le deja ocupar el ancho completo, que además le da peso al
   servicio más nuevo. */
.linea-grid.cuatro .linea-card:last-child:nth-child(odd){grid-column:1/-1}
@media (max-width:900px){.linea-grid.cuatro{grid-template-columns:1fr}}


/* Distintivo de aviso de privacidad en el encabezado.
   Va ARRIBA y visible en todas las pantallas porque el aviso debe estar
   a disposición del titular ANTES de recabar cualquier dato, incluida la
   huella técnica que deja el solo hecho de entrar al sitio (art. 15 y 17
   LFPDPPP). En el pie no cumple: ahí se lee después. */
.av-privacidad{display:inline-flex;align-items:center;gap:7px;
  font-family:var(--meta);font-size:11.5px;font-weight:700;letter-spacing:.05em;
  color:var(--bronce-texto);text-decoration:none;padding:7px 13px;
  border:1px solid var(--bronce);border-radius:var(--radio-chico);background:var(--marfil-alt);
  white-space:nowrap;transition:.2s}
.av-privacidad:hover{background:var(--bronce);color:#fff}
.av-privacidad svg{flex-shrink:0}
@media (max-width:640px){.av-privacidad .txt{display:none}
  .av-privacidad{padding:7px 9px}}


/* ── Los dos caminos de la portada ──────────────────────────────────
   El sitio vende dos cosas distintas: trámites que se resuelven solos
   y asuntos que necesitan un abogado. Antes competían en la misma
   página y ganaba el que estaba más arriba; ahora cada uno tiene su
   puerta. */
.caminos{padding-top:56px;padding-bottom:8px}
.camino-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.camino{display:block;border:1px solid var(--borde);background:var(--marfil-alt);
  padding:34px 32px 30px;text-decoration:none;transition:.25s;position:relative}
.camino:hover{border-color:var(--bronce);background:#fff;transform:translateY(-2px)}
.camino .ico{font-size:26px;line-height:1;color:var(--bronce);margin-bottom:16px}
.camino h3{font-size:clamp(21px,2.2vw,26px);color:var(--tinta);margin:8px 0 12px;line-height:1.25}
.camino p{font-size:15px;color:var(--grafito);line-height:1.75;margin:0 0 20px;max-width:46ch}
.camino .ver{font-family:var(--meta);font-size:12.5px;font-weight:700;letter-spacing:.04em;
  color:var(--bronce-texto)}
.camino.alt:hover{border-color:var(--vino)}
.camino.alt .ico{color:var(--vino)}
.camino.alt .ver{color:var(--vino)}
@media (max-width:820px){.camino-grid{grid-template-columns:1fr}
  .camino{padding:26px 24px 24px}}

/* Foco visible de teclado en toda la navegación: sin esto, quien
   navega con tabulador no sabe dónde está parado (WCAG 2.4.7). */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--bronce);outline-offset:3px;border-radius:var(--radio-chico)}


/* --- Iconos de servicio, derivados del isotipo ---
   Ver assets/iconos.svg: cada uno es una esfera con degradado y un arco
   que la cruza, que es la gramática del logotipo reducida a 48 px. */
.linea-ico{width:52px;height:52px;margin-bottom:16px}
.linea-ico svg{width:100%;height:100%;display:block}
.linea-card:hover .linea-ico svg{transform:scale(1.04);transition:transform .25s ease}
.area-ico{width:46px;height:46px;margin-bottom:14px}
.area-ico svg{width:100%;height:100%;display:block}
@media (max-width:700px){.linea-ico{width:44px;height:44px}}

.area-hero-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.area-hero-top .area-ico{width:44px;height:44px;margin:0;flex-shrink:0}


/* --- Marca del Centro Privado de Justicia Alternativa 370 ---
   El Centro es una entidad distinta del despacho, aunque vinculada, y su
   logotipo comparte la misma familia visual (dos esferas, vino y azul,
   con arcos). Se le da aire propio para que no se lea como un sello
   más de LEX ART, pero sin romper la página. */
.cpja-marca{margin:30px 0 6px;max-width:520px}
/* El PNG original venía con fondo blanco sólido y se leía como una
   calcomanía pegada sobre el marfil. Se le quitó el fondo por
   inundación desde los bordes, respetando los blancos interiores del
   logotipo, y se recortó al contenido. */
.cpja-marca img{width:100%;height:auto;max-width:430px}
.cpja-pie{font-family:var(--meta);font-size:12.5px;line-height:1.7;
  color:var(--piedra-texto);margin-top:12px;padding-left:2px;max-width:52ch}
.ja .cpja-pie{color:#C7C5C1}
/* Sobre el fondo oscuro del bloque de Justicia Alternativa se usa la
   versión en blanco, que es la que el manual de marca prevé. */
.ja .cpja-marca img{content:none}
@media (max-width:640px){.cpja-marca img{max-width:100%}}
.servicio-card.cpja{position:relative}

/* ---------- entrar a la cuenta ---------- */
/* Cinco pantallas usan este formulario y ninguna tenía estilo para el
   campo de texto: `.campo input` no existía en ningún lado, así que el
   navegador dibujaba su recuadro de fábrica. Tres páginas al menos
   habían copiado a mano las reglas de la etiqueta y de las pestañas;
   las dos más nuevas ni eso, y ahí la etiqueta quedaba pegada a un lado
   del recuadro. El único elemento que se veía bien era el botón de
   Google, porque ese trae su estilo dentro del script.

   Se define una sola vez aquí y se borran las copias de las páginas: la
   pantalla donde el cliente escribe su contraseña no puede depender de
   que alguien se acuerde de pegar el bloque al crear la siguiente.

   Encerrar el formulario en una tarjeta no es adorno. Un campo suelto
   sobre el fondo de la página no se lee como un lugar donde entregar
   una contraseña; delimitarlo, y decir debajo qué se hace con ella, es
   lo que responde a la desconfianza legítima de quien la escribe. */
.acceso-caja{background:var(--marfil-alt);border:1px solid var(--borde);
  border-radius:var(--radio-chico);padding:30px 30px 24px}
@media (max-width:520px){.acceso-caja{padding:24px 20px 20px}}

/* Control segmentado: dos opciones excluyentes se leen mejor como un
   interruptor de dos casillas que como dos pestañas subrayadas, que es
   lo que había y obligaba a buscar cuál estaba activa. */
.tabs-acceso{display:grid;grid-template-columns:1fr 1fr;
  border:1px solid var(--borde);border-radius:var(--radio-chico);background:#fff;
  margin:0 0 22px;overflow:hidden}
.tabs-acceso button{appearance:none;background:none;border:none;padding:12px 10px;
  font-family:var(--meta);font-size:12.5px;font-weight:700;letter-spacing:.03em;
  color:var(--piedra-texto);cursor:pointer;transition:background .18s ease,color .18s ease}
.tabs-acceso button:hover{color:var(--tinta);background:var(--marfil)}
.tabs-acceso button.sel,.tabs-acceso button.sel:hover{background:var(--tinta);color:#fff}

.campo{margin-bottom:16px}
.campo label{display:block;font-family:var(--meta);font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--grafito);margin-bottom:7px}
.campo input{width:100%;font-family:var(--sans);font-size:15px;color:var(--tinta);
  padding:12px 14px;background:#fff;border:1px solid var(--piedra);border-radius:var(--radio-chico);
  transition:border-color .16s ease,box-shadow .16s ease}
.campo input:hover{border-color:var(--grafito)}
.campo input:focus{outline:none;border-color:var(--vino);
  box-shadow:0 0 0 3px rgba(92,42,43,.10)}
/* Chrome pinta el autorrelleno de amarillo y rompía el marfil. */
.campo input:-webkit-autofill{-webkit-box-shadow:0 0 0 40px #fff inset;
  -webkit-text-fill-color:var(--tinta)}

/* Escribir una contraseña a ciegas en el teléfono es donde la gente
   abandona el registro. El ojo va dentro del campo, no debajo. */
.campo.clave{position:relative}
.campo.clave input{padding-right:48px}
.campo .ojo{position:absolute;right:5px;bottom:4px;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;background:none;border:none;
  cursor:pointer;color:var(--piedra-texto);border-radius:var(--radio-chico);padding:0}
.campo .ojo:hover{color:var(--vino);background:var(--marfil)}
.campo .ojo:focus-visible{outline:2px solid var(--vino);outline-offset:1px}

.alert{padding:14px 18px;font-size:14px;margin-bottom:22px;
  border-left:3px solid var(--vino);background:#FBF3F2;color:var(--vino)}
.alert.ok{border-color:#2e6b3e;background:#F0F6F1;color:#2e6b3e}

.acceso-legal{font-size:12px;color:var(--piedra-texto);margin:14px 0 0;line-height:1.6}
.acceso-legal a{color:var(--grafito);text-decoration:underline;
  text-underline-offset:2px;text-decoration-color:var(--piedra)}
.acceso-seguro{display:flex;align-items:flex-start;gap:9px;margin-top:20px;
  padding-top:16px;border-top:1px solid var(--borde);
  font-family:var(--meta);font-size:11.5px;line-height:1.65;color:var(--piedra-texto)}
.acceso-seguro svg{flex:none;width:13px;height:15px;margin-top:2px;color:var(--bronce-texto)}

/* Recuperar la contraseña. El enlace va debajo del botón de entrar,
   discreto pero presente: quien no lo encuentra en ese momento no
   busca en el menú, escribe un correo al despacho, y ése es el trabajo
   que esta pantalla existe para evitar. */
.olvide{display:block;width:100%;margin-top:14px;padding:6px 0;background:none;
  border:none;cursor:pointer;font-family:var(--meta);font-size:12.5px;
  color:var(--grafito);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--piedra)}
.olvide:hover{color:var(--vino);text-decoration-color:var(--vino)}

.recuperar h3{font-size:18px;margin:0 0 8px}
.recuperar > p{font-size:13.5px;color:var(--grafito);line-height:1.7;margin:0 0 20px}
.recuperar .btn.solid{width:100%;justify-content:center;border:none;cursor:pointer}
.recuperar .recVolver{display:block;width:100%;margin-top:14px;padding:6px 0;
  background:none;border:none;cursor:pointer;font-family:var(--meta);font-size:12.5px;
  color:var(--grafito);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--piedra)}
.recuperar .recVolver:hover{color:var(--vino);text-decoration-color:var(--vino)}
.recuperar .btn.solid:disabled{opacity:.6;cursor:default}

/* ---------- iconos de las áreas de práctica ---------- */
/* Las diez páginas de detalle ya traían su icono; la retícula del inicio
   no, y se leía como diez recuadros de texto idénticos donde había que
   leer el título para saber de qué materia se trataba. El icono resuelve
   eso antes de la lectura.

   El numeral romano no se quita, se corre a la derecha: deja de disputar
   la entrada de la tarjeta y pasa a hacer lo que siempre hizo, numerar. */
.servicio-card .card-top{display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:4px}
.card-ico{width:44px;height:44px;flex:none}
.card-ico svg{width:100%;height:100%;display:block;transition:transform .25s ease}
a.servicio-card:hover .card-ico svg{transform:scale(1.06)}
@media (max-width:760px){.card-ico{width:40px;height:40px}}

/* El sello del Centro Privado pasó de la cabecera al pie de su tarjeta.
   Arriba no funcionaba por dos razones que se acumulaban: el logotipo es
   una banda de 6:1 metida en una composición vertical, y su texto repite
   palabra por palabra el título que va debajo, de modo que la tarjeta
   decía «Justicia Alternativa» dos veces.

   Abajo, a lo ancho y separado por una línea, recupera su proporción
   natural y se lee como lo que es: la credencial del centro, no un
   segundo encabezado. */
.cpja-aval{display:block;border-top:1px solid var(--borde);padding-top:15px;margin-top:4px}
.cpja-aval img{display:block;width:100%;max-width:225px;height:auto;opacity:.88;
  transition:opacity .22s ease}
a.servicio-card.cpja:hover .cpja-aval img{opacity:1}
@media (max-width:760px){.cpja-aval img{max-width:200px}}

/* Aclaraciones al pie de un procedimiento. Es una caja de lectura, no
   una advertencia: la barra de bronce la separa del paso a paso sin
   gritarle al lector, que es el tono correcto cuando lo que se dice es
   «esto no funciona como usted quizá supone». */
.nota-cpja{background:var(--marfil-alt);border-left:2px solid var(--bronce);
  padding:20px 24px;margin:34px 0 0;max-width:78ch}
.nota-cpja p{font-size:14px;color:var(--grafito);line-height:1.85;margin:0}
.nota-cpja p + p{margin-top:12px}
.nota-cpja b{color:var(--tinta)}

/* La sede del Centro. Va aparte del domicilio fiscal del despacho a
   propósito: son dos direcciones distintas y confundirlas en un
   documento del Centro es un defecto atacable, así que tampoco se
   mezclan aquí. */
.sede-cpja{font-family:var(--meta);font-size:12.5px;color:var(--piedra-texto);
  line-height:1.75;margin-top:16px}
.sede-cpja b{display:block;color:var(--tinta);letter-spacing:.1em;
  font-size:10.5px;margin-bottom:4px}

/* Lista de comprobaciones del PAC en el panel: sobria, sin viñeta
   redonda, porque enumera hechos y no argumentos. */
.lista-fina{list-style:none;padding:0;margin:12px 0 0}
.lista-fina li{font-family:var(--meta);font-size:12.5px;color:var(--grafito);
  padding:7px 0;border-bottom:1px solid var(--borde);line-height:1.6}
.lista-fina li:last-child{border-bottom:none}

/* ── Ganchos del héroe: las tres pruebas gratuitas ──────────────────
   Van arriba y no en una tarjeta perdida: es lo único del sitio que el
   visitante puede comprobar sin pagar ni registrarse, y es la razón por
   la que se queda. */
.hero-pruebas{margin-top:32px;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:8px 18px;max-width:70ch}
.hero-pruebas > span{font-family:var(--meta);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--piedra-texto)}
.hero-pruebas a{font-size:14.5px;color:var(--vino);text-decoration:none;
  border-bottom:1px solid rgba(92,42,43,.32);padding-bottom:2px;
  transition:border-color .15s,color .15s}
.hero-pruebas a:hover{border-bottom-color:var(--vino)}
@media (max-width:640px){
  .hero-pruebas{flex-direction:column;gap:10px}
  .hero-pruebas > span{margin-bottom:2px}
}

/* ── Lo que nos distingue: sustituye a la nube de palabras sueltas ──
   Cuatro afirmaciones comprobables valen más que nueve adjetivos. */
.dist-lista{list-style:none;padding:0;margin:14px 0 0}
.dist-lista li{padding:14px 0;border-bottom:1px solid var(--borde)}
.dist-lista li:last-child{border-bottom:none;padding-bottom:0}
.dist-lista b{display:block;font-family:var(--display);font-size:15px;
  color:var(--tinta);margin-bottom:5px;letter-spacing:.01em}
.dist-lista span{display:block;font-size:13px;color:var(--grafito);line-height:1.75}

/* ── Banda de cifras: prueba dura, sin adjetivos ─────────────────── */
.cifras{border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);
  background:var(--marfil-alt);padding:34px 0}
.cifras .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.cifra{text-align:left}
.cifra .n{font-family:var(--display);font-size:clamp(26px,3.2vw,34px);
  color:var(--vino);line-height:1.05}
.cifra .t{font-size:13px;color:var(--grafito);line-height:1.65;margin-top:8px;
  max-width:26ch}
@media (max-width:820px){.cifras .wrap{grid-template-columns:1fr 1fr;gap:24px 20px}}
@media (max-width:460px){.cifras .wrap{grid-template-columns:1fr}}

/* ── Banda de ayuda: la salida a un humano ─────────────────────────
   Va al final de cada pantalla de servicio, justo antes del pie. Quien
   se atora a mitad de un formulario legal no vuelve mañana: cierra la
   pestaña. Un toque para escribirle a un abogado convierte ese abandono
   en una conversación, y de paso permite ofrecerle el servicio correcto
   a quien entró al equivocado. */
.banda-ayuda{border-top:1px solid var(--borde);background:var(--marfil-alt);
  padding:34px 0;margin-top:56px}
.banda-ayuda .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:28px;flex-wrap:wrap}
.banda-ayuda .ba-texto{flex:1;min-width:260px;max-width:62ch}
.banda-ayuda .ba-texto b{display:block;font-family:var(--display);
  font-size:18px;color:var(--tinta);margin-bottom:7px}
.banda-ayuda .ba-texto span{font-size:14px;color:var(--grafito);line-height:1.8}
.banda-ayuda .ba-botones{display:flex;gap:10px;flex-wrap:wrap;flex:none}
@media (max-width:640px){
  .banda-ayuda .wrap{flex-direction:column;align-items:flex-start}
  .banda-ayuda .ba-botones{width:100%}
  .banda-ayuda .ba-botones .btn{flex:1;text-align:center}
}

/* ── Indicador de avance para los flujos por pasos ─────────────────
   Un formulario largo sin señal de cuánto falta se abandona más que el
   mismo formulario con la señal. Es la mejora más barata que existe. */
.avance{display:flex;align-items:center;gap:0;margin:0 0 34px;flex-wrap:wrap}
.avance .pt{display:flex;align-items:center;gap:9px;font-family:var(--meta);
  font-size:11.5px;letter-spacing:.06em;color:var(--piedra-texto);
  text-transform:uppercase;white-space:nowrap}
.avance .pt .bola{width:22px;height:22px;border-radius:50%;flex:none;
  border:1px solid var(--piedra);display:grid;place-items:center;
  font-size:11px;color:var(--piedra-texto);background:#fff}
.avance .pt.hecho .bola{background:var(--vino);border-color:var(--vino);color:#fff}
.avance .pt.aqui .bola{border-color:var(--vino);color:var(--vino);
  box-shadow:0 0 0 3px rgba(92,42,43,.10)}
.avance .pt.aqui{color:var(--tinta)}
.avance .liga{flex:1;height:1px;background:var(--borde);margin:0 12px;min-width:18px}
@media (max-width:700px){
  .avance .pt span.et{display:none}
  .avance .liga{margin:0 6px}
}

/* ── Asistente del sitio ───────────────────────────────────────────
   No salta solo. Aparece como burbuja discreta y se abre cuando la
   persona lo pide: un panel que tapa el contenido a los tres segundos
   es la práctica más extendida de la web y la más odiada. */
#lex-chat{position:fixed;right:20px;bottom:20px;z-index:9000;
  font-family:var(--cuerpo,inherit)}
.lex-burbuja{display:flex;align-items:center;gap:9px;border:1px solid var(--tinta);
  background:var(--tinta);color:#fff;padding:12px 18px;border-radius:40px;
  cursor:pointer;font:inherit;font-size:14px;box-shadow:0 6px 22px rgba(0,0,0,.16);
  transition:transform .15s,opacity .15s}
.lex-burbuja:hover{transform:translateY(-2px)}
.lex-burbuja.oculto{display:none}
@media (max-width:520px){.lex-burbuja span{display:none}
  .lex-burbuja{padding:14px;border-radius:50%}}

/* El atributo hidden debe ganarle al display:flex, o la X no cierra nada.
   Es el defecto que nadie ve hasta que pulsa la equis y no pasa. */
.lex-panel[hidden]{display:none !important}
.lex-panel{width:min(390px,calc(100vw - 32px));height:min(560px,calc(100vh - 100px));
  background:#fff;border:1px solid var(--borde);border-radius:var(--radio-chico);
  box-shadow:0 18px 50px rgba(0,0,0,.20);display:flex;flex-direction:column;
  overflow:hidden}
.lex-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 18px;background:var(--tinta);color:#fff;flex:none}
.lex-cab b{display:block;font-family:var(--display);font-size:15px;letter-spacing:.02em}
.lex-cab span{display:block;font-size:12px;opacity:.75;margin-top:3px;line-height:1.5}
.lex-cab button{background:none;border:none;color:#fff;font-size:24px;line-height:1;
  cursor:pointer;opacity:.7;padding:0 2px}
.lex-cab button:hover{opacity:1}

.lex-cuerpo{flex:1;overflow-y:auto;padding:18px;background:var(--marfil,#F7F5F2)}
.lex-msg{margin-bottom:14px;max-width:88%}
.lex-msg p{margin:0;font-size:14px;line-height:1.75;padding:11px 15px;
  border:1px solid var(--borde);background:#fff;color:var(--grafito)}
.lex-msg.yo{margin-left:auto}
.lex-msg.yo p{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.lex-msg.esperando p{opacity:.55;font-style:italic}
.lex-msg a{color:var(--vino);text-decoration:underline}
.lex-msg.yo a{color:#fff}

.lex-sugerencias{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.lex-sugerencias button{text-align:left;font:inherit;font-size:13.5px;
  padding:11px 15px;border:1px solid var(--borde);background:#fff;
  color:var(--tinta);cursor:pointer;transition:border-color .15s}
.lex-sugerencias button:hover{border-color:var(--vino)}

.lex-pie{flex:none;border-top:1px solid var(--borde);background:#fff;padding:12px 14px}
.lex-entrada{display:flex;align-items:flex-end;gap:8px}
.lex-entrada textarea{flex:1;resize:none;font:inherit;font-size:14px;
  padding:10px 12px;border:1px solid var(--piedra);border-radius:var(--radio-chico);
  max-height:110px;line-height:1.5}
.lex-entrada button{flex:none;width:40px;height:40px;border:none;
  background:var(--vino);color:#fff;font-size:19px;cursor:pointer;border-radius:var(--radio-chico)}
.lex-wa{display:block;text-align:center;margin-top:10px;font-size:12.5px;
  color:var(--piedra-texto);text-decoration:none}
.lex-wa:hover{color:var(--vino);text-decoration:underline}

@media print{#lex-chat{display:none}}

/* ── Banda del Departamento Legal Externo en el índice ─────────────
   Es la oferta B2B de mayor valor; merece su propia banda ancha, no una
   tarjeta más en la retícula. Fondo oscuro para separarla visualmente
   del resto y darle peso. */
.banda-de{background:var(--tinta);color:#fff;padding:64px 0}
.banda-de .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:center}
.banda-de .eyebrow{color:var(--bronce)}
.banda-de h2{font-size:clamp(26px,3.4vw,38px);line-height:1.15;margin:14px 0 16px;color:#fff}
.banda-de h2 em{font-style:italic;color:#E4B27A}
.banda-de p{font-size:15.5px;line-height:1.85;color:rgba(255,255,255,.82);max-width:56ch}
.banda-de .precio-linea{font-family:var(--meta);font-size:13px;letter-spacing:.04em;
  color:#E4B27A;margin-top:20px}
.banda-de .ctas{margin-top:26px}
.banda-de .btn.solid{background:#fff;color:var(--tinta);border-color:#fff}
.banda-de .btn.ghost{border-color:rgba(255,255,255,.4);color:#fff}
.banda-de .lista-de{list-style:none;padding:0;margin:0}
.banda-de .lista-de li{padding:13px 0;border-top:1px solid rgba(255,255,255,.15);
  font-size:14px;color:rgba(255,255,255,.9);display:flex;gap:12px;line-height:1.6}
.banda-de .lista-de li:first-child{border-top:none}
.banda-de .lista-de b{color:#E4B27A;flex:none}
@media (max-width:820px){.banda-de .wrap{grid-template-columns:1fr;gap:30px}}

/* ── Banda de empresas v2 (28-ago): que jale el ojo y provoque el clic ──
   Tres imanes: insignia con latido, mini-duelo con drama, y una tarjeta
   de precio clara flotando sobre el fondo oscuro: el contraste más
   fuerte de toda la portada, que se lee como producto comprable. */
.banda-de{position:relative;overflow:hidden}
.banda-de::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 65% 85% at 82% 50%, rgba(92,42,43,.5), transparent 70%)}
.banda-de .wrap{position:relative}
.insignia-de{display:inline-flex;align-items:center;gap:9px;font-family:var(--meta);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  color:var(--tinta);background:#E4B27A;padding:8px 15px;border-radius:2px;margin-bottom:16px}
.insignia-de::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--tinta);animation:latido-de 2.2s ease-in-out infinite}
@keyframes latido-de{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.insignia-de::before{animation:none}}
.duelo-teaser{margin-top:24px;border-left:2px solid #E4B27A;padding:5px 0 5px 18px;
  display:flex;flex-direction:column;gap:7px;font-size:13.5px;line-height:1.7}
.duelo-teaser .dt-esc{font-family:var(--meta);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:800;color:#E4B27A}
.duelo-teaser .dt-sin{color:rgba(255,255,255,.68)}
.duelo-teaser .dt-con{color:#fff}
.duelo-teaser b{color:#E4B27A}
.duelo-teaser .dt-link{color:#fff;font-weight:700;text-decoration:none;
  border-bottom:1px solid rgba(228,178,122,.6);align-self:flex-start;margin-top:5px;
  transition:color .2s ease}
.duelo-teaser .dt-link:hover{color:#E4B27A}
.tarjeta-de{background:#fff;color:var(--tinta);border-radius:6px;
  padding:30px 30px 26px;box-shadow:0 24px 60px rgba(0,0,0,.35);
  transform:rotate(-.4deg);transition:transform .25s ease, box-shadow .25s ease}
.tarjeta-de:hover{transform:rotate(0) translateY(-4px);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.tarjeta-de .td-et{font-family:var(--meta);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--piedra-texto);font-weight:700}
.tarjeta-de .td-precio{font-family:var(--display);color:var(--vino);
  font-size:46px;line-height:1;margin:12px 0 2px;display:flex;align-items:baseline;
  gap:9px;flex-wrap:wrap}
.tarjeta-de .td-precio small{font-family:var(--meta);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--piedra-texto)}
.tarjeta-de .td-precio span{font-family:var(--meta);font-size:12px;color:var(--grafito)}
.tarjeta-de ul{list-style:none;padding:0;margin:16px 0 0}
.tarjeta-de li{display:flex;gap:12px;font-size:13.5px;color:var(--grafito);
  padding:8px 0;border-top:1px solid var(--borde);line-height:1.55}
.tarjeta-de li:first-child{border-top:none}
.tarjeta-de li b{color:var(--vino);flex:none;font-family:var(--display);min-width:22px}
.tarjeta-de .td-cta{display:block;text-align:center;margin-top:18px}
.banda-de .tarjeta-de .btn.solid{background:var(--vino);color:#fff;border-color:var(--vino)}
.banda-de .tarjeta-de .btn.solid:hover{background:var(--tinta);border-color:var(--tinta)}
.tarjeta-de .td-nota{display:block;text-align:center;font-family:var(--meta);
  font-size:11px;letter-spacing:.05em;color:var(--piedra-texto);margin-top:12px}
.hero-empresa{margin-top:18px}
.hero-empresa a{font-family:var(--meta);font-size:12.5px;letter-spacing:.05em;
  color:var(--vino);font-weight:800;text-decoration:none;
  border-bottom:1px solid var(--bronce);padding-bottom:2px;transition:color .2s ease}
.hero-empresa a:hover{color:var(--tinta)}

/* ═══════════════ Capa de suavizado (22-ago, tarde) ═══════════════
   Tomás pidió un sitio menos cuadrado y menos serio: más aire, esquinas
   redondeadas y campos amables. Esta capa va al final para ganar por
   especificidad sin tener que editar cada componente viejo. */

/* Todos los campos de formulario, parejos y suaves */
input:not([type=checkbox]):not([type=radio]),
select, textarea{
  border-radius:var(--radio-chico) !important;
  border:1px solid #DAD5CC;
  background:#fff;
  transition:border-color .18s ease, box-shadow .18s ease;
}
input:not([type=checkbox]):focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--vino);
  box-shadow:0 0 0 3px rgba(92,42,43,.10);
}

/* Tarjetas y cajas con borde de 1px: se redondean y ganan un respiro */
.linea-card,.plan,.dolor,.caja-rfc,.coti,.paq,.diag,.salud-caja,
.aviso-caja,.persona-card,.card,.cifra,.comparativa tr{
  border-radius:var(--radio);
}
.paq,.plan{border-radius:var(--radio)}
.aviso-caja{border-radius:0 var(--radio) var(--radio) 0}

/* La caja de "Su cuenta": el punto que Tomás señaló. De caja rígida en
   blanco y negro a una tarjeta cálida, con las pestañas como píldoras. */
.acceso-caja{background:var(--marfil-alt);border:1px solid var(--borde);
  border-radius:var(--radio);padding:30px;max-width:440px;box-shadow:var(--sombra-suave)}
.acceso-caja .titulo{font-family:var(--display,var(--sans));font-size:19px;
  color:var(--tinta);margin:0 0 6px}
.acceso-caja .intro{font-size:14px;color:var(--grafito);line-height:1.7;margin:0 0 20px}
.acceso-tabs{display:inline-flex;background:#EFEBE3;border-radius:999px;padding:4px;margin-bottom:18px}
.acceso-tabs button{border:none;background:transparent;cursor:pointer;
  font-family:var(--meta);font-size:12.5px;font-weight:700;letter-spacing:.02em;
  color:var(--grafito);padding:9px 20px;border-radius:999px;transition:all .18s ease}
.acceso-tabs button.sel{background:#fff;color:var(--tinta);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.acceso-caja .campo{width:100%;padding:13px 15px;margin-bottom:12px;font-size:15px}
.acceso-caja .btn{width:100%;justify-content:center}

/* Un respiro extra entre secciones de servicio: menos apretado = menos serio */
.servicio-card{border-radius:0}


/* ── Claridad primero (2-sep-2026) ──────────────────────────────────
   Varios lectores dijeron lo mismo: «no se entiende qué venden». La
   causa era de jerarquía, no de contenido: el título grande llevaba el
   gancho poético («Suba su contrato y mándelo a firmar») y lo que se
   vende iba en la letra chica de arriba. El ojo lee primero lo grande,
   así que el visitante se llevaba la emoción y no el producto. Ahora el
   título dice el nombre del servicio y el gancho baja a subtítulo:
   primero entiendo qué es, luego me seduce. */
.linea-card h3{font-size:20px;line-height:1.28;margin-bottom:6px}
.linea-gancho{font-family:var(--display);font-style:italic;font-size:15.5px;
  line-height:1.55;color:var(--vino);margin:0 0 12px}
@media (max-width:560px){.linea-card h3{font-size:18.5px}
  .linea-gancho{font-size:14.5px}}

/* El gancho, ahora subtítulo de las páginas de servicio (2-sep-2026).
   Misma corrección que en la portada: el H1 nombra el servicio y la
   frase que seduce va debajo, en cursiva vino. */
.gancho-serv{font-family:var(--display);font-style:italic;
  font-size:clamp(17px,2.2vw,22px);line-height:1.45;color:var(--vino);
  margin:10px 0 18px;max-width:44ch}
.hero-serv h1{margin-bottom:4px}

/* Navegador entre áreas de práctica (2-sep-2026): quien llega a un área
   por una búsqueda quedaba en un callejón; para ver otra materia tenía
   que volver al inicio y bajar. Ahora las diez están siempre a un clic. */
.otras-areas{border-top:1px solid var(--borde);background:var(--marfil-alt);
  padding:34px 20px 40px;margin-top:50px}
.otras-areas .oa-titulo{display:block;font-family:var(--meta);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bronce-texto,#8A5F2E);
  font-weight:800;margin-bottom:16px;text-align:center}
.otras-areas .oa-lista{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;
  max-width:960px;margin:0 auto}
.otras-areas a{font-family:var(--meta);font-size:13px;color:var(--grafito);
  text-decoration:none;border:1px solid var(--borde);background:#fff;
  padding:9px 16px;border-radius:999px;transition:all .2s ease}
.otras-areas a:hover{border-color:var(--vino);color:var(--vino)}
.otras-areas a.aqui{background:var(--vino);border-color:var(--vino);color:#fff;font-weight:700}

/* Elegir quién captura, y las ligas por parte (2-sep-2026).
   El backend ya sabía repartir el llenado entre varias personas; la
   pantalla no lo ofrecía, así que el arrendador terminaba persiguiendo
   por teléfono la CURP del inquilino. Aquí se ofrece. */
.opt-captura{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--borde);
  background:#fff;border-radius:6px;padding:14px 16px;margin-bottom:10px;cursor:pointer;
  transition:border-color .2s ease,background .2s ease}
.opt-captura:hover{border-color:var(--bronce)}
.opt-captura input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--vino)}
.opt-captura b{display:block;font-size:14.5px;color:var(--tinta);margin-bottom:3px}
.opt-captura small{display:block;font-size:13px;color:var(--grafito);line-height:1.6}
.opt-captura:has(input:checked){border-color:var(--vino);background:var(--marfil-alt)}
.parte-liga{border:1px solid var(--borde);background:#fff;border-radius:6px;
  padding:14px 16px;margin-bottom:10px}
.parte-liga .rol{font-family:var(--meta);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bronce-texto,#8A5F2E);font-weight:800}
.parte-liga .quien{font-size:14.5px;color:var(--tinta);font-weight:600;margin:4px 0 10px}
.parte-liga .acciones{display:flex;gap:8px;flex-wrap:wrap}
.parte-liga .acciones a,.parte-liga .acciones button{font-family:var(--meta);font-size:12.5px;
  font-weight:700;text-decoration:none;border-radius:999px;padding:8px 15px;cursor:pointer;
  border:1px solid var(--borde);background:#fff;color:var(--grafito)}
.parte-liga .acciones .wa{background:#25D366;border-color:#25D366;color:#fff}
.parte-liga .acciones .cor{background:var(--vino);border-color:var(--vino);color:#fff}
.parte-liga .listo{color:#2E6B3E;font-weight:700;font-size:13px}
/* ─────────────────── Servicios en línea, rejilla breve ───────────────────
 *
 * Doce recuadros de unos 230 px en lugar de doce tarjetas de mil. El
 * detalle vive en la página de cada servicio; aquí sólo va lo que el
 * cliente necesita para decidir dónde entrar: qué es, para qué sirve y
 * cuánto cuesta.
 *
 * El recuadro entero es un enlace. Que sólo el botón lleve a algún lado
 * es de las cosas que hacen sentir un sitio «poco intuitivo»: el ojo lee
 * la ficha como una unidad y el dedo le da clic donde caiga. */
.sv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.sv-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--borde);
  padding:26px 24px 22px;text-decoration:none;color:inherit;position:relative;
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease}
.sv-card:hover{border-color:var(--vino);transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(28,32,38,.08)}
.sv-card:focus-visible{outline:2px solid var(--vino);outline-offset:3px}
.sv-ico{width:38px;height:38px;color:var(--vino);margin-bottom:14px}
.sv-ico svg{width:100%;height:100%;display:block}
.sv-rubro{font-family:var(--meta);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bronce-texto);margin-bottom:7px}
.sv-card h3{font-size:18px;line-height:1.3;color:var(--tinta);margin:0 0 8px;font-weight:700}
.sv-card p{font-size:13.8px;line-height:1.6;color:var(--grafito);margin:0 0 18px;flex:1}
.sv-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:14px;border-top:1px solid var(--borde)}
.sv-precio{font-family:var(--meta);font-size:13px;font-weight:700;color:var(--tinta)}
.sv-flecha{font-size:17px;color:var(--vino);transition:transform .22s ease}
.sv-card:hover .sv-flecha{transform:translateX(4px)}

@media (max-width:1000px){.sv-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media (max-width:620px){
  .sv-grid{grid-template-columns:1fr;gap:14px}
  /* En celular el recuadro se acuesta: el ícono a un lado y el texto al
     otro, para que quepan más de dos en pantalla y se pueda comparar. */
  .sv-card{padding:20px 18px;display:grid;grid-template-columns:34px 1fr;
    column-gap:15px;row-gap:0;align-items:start}
  .sv-ico{width:30px;height:30px;margin:2px 0 0;grid-row:1/4}
  .sv-rubro{grid-column:2;margin-bottom:4px}
  .sv-card h3{grid-column:2;font-size:16.5px;margin-bottom:5px}
  .sv-card p{grid-column:2;font-size:13.2px;margin-bottom:12px}
  .sv-pie{grid-column:2;padding-top:11px}
  .sv-card:hover{transform:none;box-shadow:none}
}

/* ───────────────────────── Movimiento sobrio ─────────────────────────
 *
 * Sin librerías: nada que descargar, nada que se rompa cuando su autor
 * abandone el proyecto. Son dos recursos que el navegador ya trae.
 *
 * 1. `animation-timeline: view()` liga la aparición de un bloque a su
 *    entrada en pantalla. Donde el navegador no lo soporte, el bloque
 *    simplemente se ve, sin animación: nunca queda invisible. Ése es el
 *    motivo de no hacerlo con JavaScript, donde un error deja la página
 *    en blanco.
 * 2. `@view-transition` suaviza el salto entre páginas, para que ir de
 *    la portada a un servicio no sea un parpadeo blanco.
 *
 * Y la regla que manda sobre todas: si la persona pidió movimiento
 * reducido en su sistema, aquí no se mueve nada. Para alguien con
 * vértigo o migraña vestibular eso no es una preferencia estética. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes lx-entrar{
      from{opacity:0;transform:translateY(18px)}
      to{opacity:1;transform:none}
    }
    .section > .wrap > *, .sv-card, .area-card, .camino-card{
      animation:lx-entrar linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 22%;
    }
    /* El encabezado principal no se anima: es lo primero que se ve y
       aparecer tarde en la portada se siente como una página lenta. */
    .hero .wrap > *{animation:none}
  }
}

@view-transition{navigation:auto}
@media (prefers-reduced-motion: reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}