/* Trámites y Derechos — hoja de estilos del sitio
   Depende de tokens.css. Web oscura por defecto (Azul Toga / Azul Códice).
   Regla viva: los literales claros (#FDFDFD, #B1C4E4, #FFB55E) solo se usan
   dentro de contextos que son oscuros siempre. Ver references/web.md. */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--td-toga);
  color:var(--td-papel);
  font-family:var(--td-texto);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

/* ---------- Tipografía ---------- */

h1,h2,h3{
  font-family:var(--td-display);font-weight:900;
  font-variation-settings:'wdth' 87.5;
  text-transform:uppercase;line-height:.92;letter-spacing:-.01em;
  margin:0 0 var(--td-sp-5);
}
h1{font-size:clamp(38px,7vw,var(--td-fs-9))}
h2{font-size:clamp(30px,5vw,var(--td-fs-7))}
h3{font-size:var(--td-fs-4);line-height:1.15}

/* El marcador ámbar pinta la caja de contenido de la fuente, más alta que la
   caja de línea de 0,92: sin esto invade el renglón de arriba y toca el de
   abajo. Se afloja solo el bloque que lleva marcador, no todos los titulares. */
:is(h1,h2,h3,p):has(.td-mark){line-height:1.24}

p{margin:0 0 var(--td-sp-4);max-width:68ch}

.antetitulo{
  font-family:var(--td-texto);font-weight:800;font-size:var(--td-fs-1);
  letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 var(--td-sp-3);
}
.seccion--oscura .antetitulo{color:var(--td-ambar)}

.bajada{font-size:var(--td-fs-4);line-height:1.55;max-width:60ch}
.seccion--oscura .bajada,.hero .bajada{color:var(--td-bruma)}

/* ---------- Estructura ---------- */

.contenedor{width:min(1120px,92vw);margin-inline:auto}

.seccion{padding:var(--td-sp-8) 0}
@media (min-width:900px){.seccion{padding:88px 0}}
.seccion--oscura{background:var(--td-toga)}
.seccion--codice{background:var(--td-codice)}
.seccion + .seccion{border-top:1px solid var(--td-line)}

.saltar{
  position:absolute;left:-9999px;
  background:var(--td-ambar);color:var(--td-toga);
  padding:var(--td-sp-3) var(--td-sp-5);font-weight:800;border-radius:var(--td-r-sm);
}
.saltar:focus{left:var(--td-sp-4);top:var(--td-sp-4);z-index:100}

/* ---------- Cabecera ---------- */

.cabecera{
  background:var(--td-toga);
  border-bottom:1px solid var(--td-line);
  position:sticky;top:0;z-index:50;
}
.cabecera__fila{
  display:flex;align-items:center;gap:var(--td-sp-5);
  min-height:72px;
}
/* El relleno vertical no es estético: la imagen mide 38 px y el logo es un
   enlace al inicio. Con 4 px arriba y abajo el objetivo táctil llega a 46 y
   cumple el mínimo de 44 del manual. */
.cabecera__logo{display:block;margin-right:auto;padding:4px 0}
.cabecera__logo img{height:38px;width:auto}

.nav{display:none;gap:var(--td-sp-5);align-items:center}
@media (min-width:900px){.nav{display:flex}}
/* `:not(.btn)` no es cosmética: `.nav a` (0,1,1) le gana a `.btn--primario`
   (0,1,0), así que sin esto el botón de la barra heredaba el blanco y el
   `padding:… 0` del enlace de menú —texto blanco sobre ámbar y las letras
   pegadas a los costados de la cápsula—. Cualquier regla de enlace que
   envuelva un contexto donde pueda caer un `.btn` tiene que excluirlo. */
.nav a:not(.btn){
  color:var(--td-papel);text-decoration:none;
  font-weight:600;font-size:15px;
  padding:var(--td-sp-2) 0;border-bottom:2px solid transparent;
}
.nav a:not(.btn):hover,.nav a:not(.btn)[aria-current="page"]{border-bottom-color:var(--td-ambar)}

/* Menú móvil: <details>, sin JavaScript */
.menu{margin-left:auto}
@media (min-width:900px){.menu{display:none}}
.menu>summary{
  list-style:none;cursor:pointer;
  min-width:44px;min-height:44px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--td-line);border-radius:var(--td-r-sm);
}
.menu>summary::-webkit-details-marker{display:none}
.menu__barras{display:block;width:20px;height:2px;background:var(--td-papel);position:relative}
.menu__barras::before,.menu__barras::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:var(--td-papel);
}
.menu__barras::before{top:-6px}
.menu__barras::after{top:6px}
.menu__panel{
  position:absolute;left:0;right:0;
  background:var(--td-codice);border-bottom:1px solid var(--td-line);
  padding:var(--td-sp-4) 4vw var(--td-sp-6);
  display:flex;flex-direction:column;gap:var(--td-sp-2);
}
.menu__panel a:not(.btn){
  color:var(--td-papel);text-decoration:none;font-weight:600;
  padding:var(--td-sp-3) 0;border-bottom:1px solid var(--td-line);
}

/* ---------- Botones ---------- */

.btn{
  font-family:var(--td-texto);font-weight:800;font-size:15px;
  padding:13px 26px;border-radius:var(--td-r-sm);
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;text-decoration:none;border:2px solid transparent;
  transition:transform .15s ease,opacity .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--primario{background:var(--td-ambar);color:var(--td-toga)}
.btn--secundario{border-color:var(--td-papel);color:var(--td-papel)}
.btn--secundario:hover{background:rgba(253,253,253,.08)}
.botonera{display:flex;flex-wrap:wrap;gap:var(--td-sp-3);margin-top:var(--td-sp-6)}

/* ---------- Hero ---------- */

.hero{
  background:var(--td-g01-toga);
  padding:var(--td-sp-8) 0 88px;
  position:relative;overflow:hidden;
}
@media (min-width:900px){.hero{padding:112px 0 104px}}
.hero__trama{
  position:absolute;inset:auto -80px -80px auto;
  width:340px;height:340px;pointer-events:none;
}
.hero .contenedor{position:relative;z-index:1}
.hero h1{max-width:16ch}
.hero__firma{
  font-family:var(--td-acento);font-weight:600;font-size:var(--td-fs-5);
  color:var(--td-ambar);margin:0 0 var(--td-sp-4);
}

/* ---------- Rejillas y tarjetas ---------- */

.rejilla{display:grid;gap:var(--td-sp-5)}
@media (min-width:760px){.rejilla--3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:760px){.rejilla--2{grid-template-columns:repeat(2,1fr)}}

.tarjeta{
  border:1px solid var(--td-line);border-radius:var(--td-r-md);
  padding:var(--td-sp-6);
  display:flex;flex-direction:column;
  background:rgba(253,253,253,.02);
}
.tarjeta h3{margin-bottom:var(--td-sp-3)}
/* El numeral también es un <p>, y `.tarjeta p` (0,1,1) le ganaba a
   `.tarjeta__numero` (0,1,0): se dibujaba a 16 px en Celeste Bruma, con el
   contorno ámbar comiéndose el glifo, y además heredaba el `flex:1`. */
.tarjeta p:not(.tarjeta__numero){color:var(--td-bruma);font-size:16px;flex:1}
/* Numeral sólido — recurso gráfico 5 del manual, corregido el 29-08-2026.
   Antes era un numeral con contorno desplazado: relleno gris claro y contorno
   ámbar corrido. Se sustituye por una cifra sólida porque el contorno peleaba
   con la legibilidad de la propia cifra, y el principio rector del manual dice
   que si un recurso baja la legibilidad, se elimina. Sólido, sin contorno y a
   un solo peldaño de la escala por sobre el titular al que acompaña. */
.tarjeta__numero{
  font-family:var(--td-display);font-weight:900;font-size:var(--td-fs-5);
  font-variation-settings:'wdth' 87.5;
  color:var(--td-ambar);
  line-height:1;margin-bottom:var(--td-sp-4);
}
.tarjeta__enlace{
  color:var(--td-ambar);font-weight:800;font-size:15px;text-decoration:none;
  border-bottom:2px solid var(--td-ambar);align-self:flex-start;
  margin-top:var(--td-sp-5);padding-bottom:2px;
  position:relative;
}
/* El enlace mide 30 px de alto y el mínimo táctil del manual es 44. En vez de
   engordarlo con relleno —que separaría el filete ámbar del texto y cambiaría
   el diseño— se agranda solo la zona sensible con un rectángulo transparente
   centrado. Se ve igual y se toca bien. Dentro de la tarjeta solo hay párrafos,
   así que no le roba el toque a nada. */
.tarjeta__enlace::after{
  content:"";position:absolute;left:0;right:0;
  top:50%;transform:translateY(-50%);height:44px;
}

/* ---------- Perfiles ---------- */

.perfil{display:flex;flex-direction:column;gap:var(--td-sp-4)}
@media (min-width:600px){.perfil{flex-direction:row;align-items:flex-start;gap:var(--td-sp-6)}}
.perfil__foto{
  width:132px;height:132px;flex:none;
  border-radius:var(--td-r-md);object-fit:cover;
  border:1px solid var(--td-line);
}
/* Sube a (0,2,0) para ganarle a `.perfil p`, que si no le impone 16 px. */
.perfil .perfil__cargo{
  color:var(--td-ambar);font-weight:800;font-size:var(--td-fs-1);
  letter-spacing:.1em;text-transform:uppercase;margin:0 0 var(--td-sp-3);
}
.perfil p{color:var(--td-bruma);font-size:16px}

/* ---------- Fotografía ---------- */
/* Las fotos del sitio son en blanco y negro, decisión de Andrea del 02-09-2026.
   Un gris neutro sobre el Azul Toga se lee como una isla apagada, ajena a la
   paleta, así que la foto va dentro de un marco que le echa encima un velo del
   degradado oficial G-01 con `mix-blend-mode:color`. Ese modo toma el matiz y la
   saturación de la capa de arriba y el brillo de la de abajo: tiñe sin aclarar
   ni oscurecer, así que la foto sigue leyéndose como blanco y negro y de paso
   queda dentro del 60/30/10 de la marca, porque no aporta ni un color nuevo.

   La intensidad es una sola variable. Para dejar las fotos en gris absoluto,
   `--td-velo-foto:0` en `:root`. El `isolation:isolate` no es decorativo: sin él
   la mezcla se calcularía contra el fondo de la página y no contra la foto. */

.foto{
  position:relative;isolation:isolate;display:block;margin:0;
  border-radius:var(--td-r-md);overflow:hidden;
  border:1px solid var(--td-line);
}
.foto img{display:block;width:100%;height:auto}
.foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(165deg,#141B3A 0%,#2A2F9E 100%);
  mix-blend-mode:color;opacity:var(--td-velo-foto,.16);
}

/* Las fotos vienen en 4:5. A todo el ancho de media rejilla quedarían más altas
   que el texto que acompañan, así que se topan y se centran en su columna. */
.foto--vertical{max-width:420px;margin-inline:auto}

/* ---------- Lista de garantías ---------- */

.lista{list-style:none;margin:0;padding:0;display:grid;gap:var(--td-sp-3)}
/* Viñeta absoluta, no flex: en un contenedor flex cada trozo inline
   (el <strong> y el texto suelto) se convierte en su propio ítem y la
   línea se parte en columnas. */
.lista li{
  position:relative;padding-left:var(--td-sp-5);
  color:var(--td-bruma);font-size:16px;
}
.lista li::before{
  content:"";position:absolute;left:0;top:9px;
  width:8px;height:8px;border-radius:2px;background:var(--td-ambar);
}
.lista strong{color:var(--td-papel);font-weight:800}

/* ---------- Enlaces dentro del cuerpo de texto ---------- */
/* Hasta el 02-09-2026 el sitio no tenía ni un enlace suelto en medio de un
   párrafo: todos eran botones o `.tarjeta__enlace`, que traen su propio color.
   El primero que apareció —las remisiones a las guías del blog desde la sección
   de Cortes de Apelaciones— cayó en el azul por defecto del navegador y quedó
   ilegible sobre el Azul Toga. Sobre fondo oscuro el manual manda Ámbar Salle, y
   subrayado siempre visible: en una web legal, saber qué es enlace importa más
   que la limpieza visual. */

.seccion--oscura .lista a,
.seccion--oscura .fuentes a,
.seccion--oscura .aviso a,
.seccion--oscura p a:not(.btn):not(.tarjeta__enlace){
  color:var(--td-ambar);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}

/* ---------- Índice de anclas ---------- */
/* Servicios pasó de tres apartados a seis y quedó en unos 7.100 px de alto: sin
   un índice, el que entra buscando una cosa concreta tiene que recorrerlo entero.

   Dos detalles que no son estéticos:
   · El `scroll-margin-top` va porque la cabecera es `position:sticky`. Sin él, al
     saltar a un ancla el titular queda debajo de la barra y parece que el enlace
     no funcionó.
   · El relleno de 13 px deja las cápsulas en 45 px de alto. El mínimo táctil del
     manual es 44: con 11 px se quedaban en 41, medido en el navegador. */

.indice{
  background:var(--td-codice);
  border-bottom:1px solid var(--td-line);
  padding:var(--td-sp-4) 0;
}
.indice ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--td-sp-2);
}
.indice a{
  display:block;padding:13px 18px;
  border:1px solid var(--td-line);border-radius:var(--td-r-pill);
  color:var(--td-papel);text-decoration:none;
  font-size:14px;font-weight:800;line-height:1.2;
}
.indice a:hover,.indice a:focus-visible{
  border-color:var(--td-ambar);color:var(--td-ambar);
}

.seccion[id]{scroll-margin-top:88px}


/* ---------- Aviso y fuentes sobre fondo oscuro ---------- */
/* `.aviso` y `.fuentes` nacieron para los artículos del blog, que van sobre
   Blanco Papel: por eso usan Ámbar Tinta y texto en Azul Toga. Puestas tal cual
   sobre el Azul Toga de las secciones oscuras, el filete se apaga y el texto de
   las fuentes queda invisible, 1,2:1.

   Estas dos variantes reponen los colores que el manual manda sobre oscuro
   —Ámbar Salle y Celeste Bruma— sin tocar las reglas originales, que siguen
   siendo las correctas en su contexto. Se usan en la página de privacidad. */

.seccion--oscura .aviso{
  border-left-color:var(--td-ambar);
  background:rgba(255,181,94,.08);
  color:var(--td-bruma);
}
.seccion--oscura .aviso strong{color:var(--td-papel)}
.seccion--oscura .aviso .aviso__titulo{color:var(--td-ambar)}

.seccion--oscura .fuentes{
  border-top-color:var(--td-line);
  color:var(--td-bruma);
}
/* ---------- Cierre / CTA ---------- */

.cierre{background:var(--td-g04-bruma);text-align:center}
.cierre .contenedor{display:flex;flex-direction:column;align-items:center}
.cierre p{margin-inline:auto;text-align:center}
.cierre .botonera{justify-content:center}

/* ---------- Pie ---------- */

.pie{background:var(--td-codice);padding:var(--td-sp-8) 0 var(--td-sp-6);font-size:15px}
.pie__fila{display:grid;gap:var(--td-sp-6)}
@media (min-width:760px){.pie__fila{grid-template-columns:1.4fr 1fr 1fr}}
.pie h4{
  font-family:var(--td-texto);font-weight:800;font-size:var(--td-fs-1);
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--td-papel);margin:0 0 var(--td-sp-4);
}
/* Los enlaces del pie medían 18 px de alto: es donde más se falla el toque,
   porque van apilados y muy juntos. El relleno de 13 px los deja en 44, el
   mínimo del manual, y el `gap` baja a cero para que el ritmo visual de la
   columna no cambie: antes había 30 px de un enlace al siguiente, ahora 44. */
.pie a:not(.btn){color:var(--td-bruma);text-decoration:none;display:block;padding:13px 0}
.pie a:not(.btn):hover{color:var(--td-ambar)}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.pie__logo img{height:44px;width:auto;margin-bottom:var(--td-sp-4)}
.pie__legal{
  max-width:none; /* si no, hereda los 68ch de `p` y el filete se queda corto */
  border-top:1px solid var(--td-line);margin-top:var(--td-sp-7);
  padding-top:var(--td-sp-5);color:var(--td-bruma);font-size:13px;
}

/* ---------- Botón flotante de WhatsApp ---------- */

.wa{
  position:fixed;right:16px;bottom:16px;z-index:60;
  width:56px;height:56px;border-radius:var(--td-r-pill);
  background:var(--td-ambar);color:var(--td-toga);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(20,27,58,.45);
}
.wa svg{width:28px;height:28px}

/* ---------- Testimonios ----------
   Solo para opiniones reales, con el consentimiento de quien la firma.
   Nunca se rellena con texto de ejemplo en producción. */

.testimonios{display:grid;gap:var(--td-sp-5)}
@media (min-width:700px){.testimonios{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.testimonios{grid-template-columns:repeat(3,1fr)}}

.testimonio{
  border:1px solid var(--td-line);border-radius:var(--td-r-md);
  padding:var(--td-sp-6);background:rgba(253,253,253,.02);
  display:flex;flex-direction:column;
}
.testimonio blockquote{
  margin:0 0 var(--td-sp-5);flex:1;
  font-family:var(--td-editorial);font-size:var(--td-fs-4);line-height:1.55;
  color:var(--td-papel);
}
.testimonio blockquote::before{
  content:"";display:block;width:28px;height:3px;
  background:var(--td-ambar);margin-bottom:var(--td-sp-4);
}
.testimonio figcaption{font-size:15px;color:var(--td-bruma)}
.testimonio .testimonio__quien{
  display:block;color:var(--td-papel);font-weight:800;
}

/* ---------- Agenda (Calendly) ---------- */

.agenda__quien{display:flex;flex-direction:column;gap:var(--td-sp-4);margin-bottom:var(--td-sp-6)}
@media (min-width:600px){.agenda__quien{flex-direction:row;align-items:center;gap:var(--td-sp-6)}}
.agenda__quien p{color:var(--td-bruma);font-size:16px;margin:0}
.agenda__cargo{
  color:var(--td-ambar);font-weight:800;font-size:var(--td-fs-1);
  letter-spacing:.1em;text-transform:uppercase;margin:0 0 var(--td-sp-3) !important;
}
.agenda__widget{
  min-width:320px;height:760px;
  border:1px solid var(--td-line);border-radius:var(--td-r-md);overflow:hidden;
}

/* ---------- Link in bio ---------- */

.bio{
  background:var(--td-g01-toga);
  min-height:100vh;
  padding:var(--td-sp-8) 0 var(--td-sp-8);
  position:relative;overflow:hidden;
}
.bio__trama{position:absolute;inset:auto -80px -80px auto;width:320px;height:320px;pointer-events:none}
.bio__caja{
  position:relative;z-index:1;
  width:min(440px,90vw);margin-inline:auto;text-align:center;
}
.bio__foto{
  width:120px;height:120px;border-radius:var(--td-r-pill);object-fit:cover;
  margin:0 auto var(--td-sp-5);border:2px solid rgba(253,253,253,.25);
}
.bio__nombre{font-size:var(--td-fs-6);margin-bottom:var(--td-sp-2)}
.bio .bio__cargo{
  color:var(--td-ambar);font-weight:800;font-size:var(--td-fs-1);
  letter-spacing:.1em;text-transform:uppercase;margin:0 0 var(--td-sp-4);
}
.bio__claim{
  font-family:var(--td-acento);font-size:var(--td-fs-5);
  color:var(--td-bruma);margin:0 auto var(--td-sp-7);max-width:24ch;
}
.bio__enlaces{display:grid;gap:var(--td-sp-3)}

/* ---------- Formulario de captación (pymes) ---------- */

.form{display:grid;gap:var(--td-sp-5);max-width:620px}
@media (min-width:640px){.form--2{grid-template-columns:1fr 1fr}}
.form__campo{display:flex;flex-direction:column;gap:var(--td-sp-2)}
.form__campo--ancho{grid-column:1/-1}
.form label{font-weight:800;font-size:14px;color:var(--td-papel)}
.form .form__ayuda{font-weight:400;font-size:13px;color:var(--td-bruma)}
.form input,.form select,.form textarea{
  font-family:var(--td-texto);font-size:16px;
  background:rgba(253,253,253,.06);color:var(--td-papel);
  border:1px solid var(--td-line);border-radius:var(--td-r-sm);
  padding:12px 14px;min-height:44px;width:100%;
}
.form textarea{min-height:120px;resize:vertical}
.form input::placeholder,.form textarea::placeholder{color:rgba(177,196,228,.65)}
.form select option{background:var(--td-codice);color:var(--td-papel)}
.form input:invalid:not(:placeholder-shown){border-color:var(--td-error)}

/* El honeypot: un campo que las personas no ven y los robots sí rellenan.
   `hidden` no sirve, hay quien lo respeta; esto lo saca del flujo visual
   pero lo deja en el formulario. */
.form__trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__legal{grid-column:1/-1;font-size:13px;color:var(--td-bruma);max-width:60ch}
.form__legal a{color:var(--td-ambar)}

@media (min-width:640px){.rejilla--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.rejilla--4{grid-template-columns:repeat(4,1fr)}}

/* ---------- Tabla de planes ----------
   Se desborda en horizontal dentro de su propia caja: el <body> nunca
   scrollea de lado. */

.planes{overflow-x:auto;margin-top:var(--td-sp-7);border:1px solid var(--td-line);border-radius:var(--td-r-md)}
.planes table{border-collapse:collapse;width:100%;min-width:760px;font-size:15px}
.planes th,.planes td{
  padding:var(--td-sp-4);text-align:left;
  border-bottom:1px solid var(--td-line);vertical-align:top;
}
.planes tbody th{font-weight:600;color:var(--td-bruma);font-size:14px}
.planes td{color:var(--td-papel)}
.planes tr:last-child th,.planes tr:last-child td{border-bottom:0}
.planes__nota{font-size:13px;color:var(--td-bruma);margin-top:var(--td-sp-4);max-width:68ch}

/* La cabecera es la ficha del plan, no un rótulo. El precio vive aquí, que es donde
   se decide, y no perdido en la primera fila del cuerpo. */
.planes thead th{
  background:rgba(253,253,253,.04);
  vertical-align:bottom;
  padding:var(--td-sp-5) var(--td-sp-4);
  width:23%;
}
/* La columna de conceptos queda fija al desplazar: mirando la tercera columna, sin
   ella ya no se sabe qué fila se está leyendo. El fondo tiene que ser opaco y del
   color de la sección, o el contenido se transparenta por debajo. */
.planes thead th:first-child,
.planes tbody th[scope="row"]{
  position:sticky;left:0;z-index:1;
  background:var(--td-toga);
  border-right:1px solid var(--td-line);
}
.planes thead th:first-child{width:31%}
/* En móvil las medidas tienen que cuadrar entre sí: con la columna fija en 140 px
   quedan 205 px visibles, y con la tabla en 700 px cada plan mide 187. Si el plan
   fuera más ancho que el hueco, quedaría siempre medio tapado por la columna fija. */
@media (max-width:900px){
  /* `table-layout:fixed` no es un detalle: con el reparto automático el navegador
     ensancha la columna de conceptos para que quepa el rótulo más largo, y entonces
     el plan deja de caber en el hueco y queda medio tapado por la columna fija. */
  .planes table{table-layout:fixed;min-width:700px}
  .planes thead th{width:180px}
  .planes thead th:first-child{width:160px}
}
.planes .plan__nombre{
  display:block;
  font-family:var(--td-display);font-weight:900;font-variation-settings:'wdth' 87.5;
  text-transform:uppercase;font-size:var(--td-fs-5);line-height:1;
  color:var(--td-papel);margin-bottom:var(--td-sp-2);
}
.planes .plan__quien{display:block;font-size:13px;font-weight:400;color:var(--td-bruma);margin-bottom:var(--td-sp-4)}
/* Precio: Figtree 800 blanco, según la regla 4 del manual para montos. */
.planes .plan__precio{
  display:block;font-family:var(--td-texto);font-weight:800;
  font-size:var(--td-fs-6);line-height:1;color:var(--td-papel);
}
.planes .plan__pesos{display:block;font-size:13px;font-weight:400;color:var(--td-bruma);margin-top:6px}

/* El plan del medio se promueve: en una tabla de tres, si ninguno destaca el ojo
   no elige. Aquí se concentra casi todo el ámbar de la pieza. */
.planes .planes__destacado{background:rgba(255,181,94,.08)}
.planes thead th.planes__destacado{
  background:rgba(255,181,94,.14);
  border-top:3px solid var(--td-ambar);
}
.planes .plan__chapa{
  display:inline-block;background:var(--td-ambar);color:var(--td-toga);
  font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--td-r-pill);margin-bottom:var(--td-sp-3);
}

/* Quince filas seguidas no se escanean: se agrupan. El rótulo del grupo va en
   blanco y no en ámbar, para que el ámbar siga significando «este es el plan». */
.planes .planes__grupo th{
  background:var(--td-codice);
  font-family:var(--td-texto);font-weight:800;
  font-size:var(--td-fs-1);letter-spacing:.14em;text-transform:uppercase;
  color:var(--td-papel);
  padding:var(--td-sp-3) var(--td-sp-4);
}
/* La celda del grupo abarca las cuatro columnas, así que fijarla no sirve de nada:
   el que se tiene que quedar quieto es el rótulo. */
.planes .planes__grupo th span{position:sticky;left:var(--td-sp-4);display:inline-block}

/* La promesa de la marca es el plazo de respuesta: esa fila pesa más. */
.planes .planes__fila--clave td{font-weight:800;font-size:16px}
.planes .planes__no{color:var(--td-bruma);opacity:.5}

/* La tabla no cabe bajo 900 px y se desplaza dentro de su caja. Hay que decirlo
   con texto, no solo con el corte visual. */
.planes__pista{display:none}
@media (max-width:900px){
  .planes__pista{
    display:flex;align-items:center;gap:var(--td-sp-2);
    font-size:14px;font-weight:800;color:var(--td-ambar);
    margin-top:var(--td-sp-3);
  }
  .planes__pista::before{
    content:"";flex:none;width:18px;height:18px;background:currentColor;
    -webkit-mask:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
            mask:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  }
}

/* ---------- Tabla de riesgo ---------- */

.riesgo{overflow-x:auto;margin-top:var(--td-sp-6)}
.riesgo table{border-collapse:collapse;width:100%;min-width:520px;font-size:16px}
.riesgo th,.riesgo td{padding:var(--td-sp-4) var(--td-sp-4);text-align:left;border-bottom:1px solid var(--td-line)}
.riesgo thead th{color:var(--td-bruma);font-size:var(--td-fs-1);letter-spacing:.12em;text-transform:uppercase;font-weight:800}
.riesgo td:first-child{color:var(--td-bruma)}
.riesgo td:last-child{font-weight:800;white-space:nowrap}


/* Texto solo para lectores de pantalla: los <caption> de las tablas y las
   cabeceras de columna que visualmente sobran pero el lector necesita. */
.visualmente-oculto{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- Artículos del blog ----------
   Única zona clara del sitio: Blanco Papel con texto Azul Toga y Crimson
   Pro a 20/1,75, según la regla de artículos del manual. Todo el ámbar de
   texto que entre aquí pasa a Ámbar Tinta; el Ámbar Salle solo sobrevive
   dentro de `.dato`, que es oscuro siempre. */

.articulo{background:var(--td-papel);color:var(--td-toga)}
.articulo__cuerpo{
  width:min(720px,92vw);margin-inline:auto;
  padding:var(--td-sp-8) 0;
  font-family:var(--td-editorial);font-size:20px;line-height:1.75;
}
@media (min-width:900px){.articulo__cuerpo{padding:88px 0}}

.articulo__cuerpo p{max-width:none;margin:0 0 var(--td-sp-5)}
.articulo__cuerpo h2{
  font-size:clamp(26px,4vw,var(--td-fs-6));
  margin:var(--td-sp-8) 0 var(--td-sp-5);
}
.articulo__cuerpo h3{
  font-size:var(--td-fs-4);
  margin:var(--td-sp-7) 0 var(--td-sp-4);
}
.articulo__cuerpo h2:first-child,.articulo__cuerpo h3:first-child{margin-top:0}
/* La cabecera es fija: sin este margen, saltar desde el sumario deja el
   título del apartado escondido debajo de ella. */
.articulo__cuerpo [id]{scroll-margin-top:88px}
.articulo__cuerpo>ul,.articulo__cuerpo>ol{margin:0 0 var(--td-sp-5);padding-left:1.2em}
.articulo__cuerpo li{margin-bottom:var(--td-sp-3)}
.articulo__cuerpo li::marker{color:var(--td-ambar-tinta)}
.articulo__cuerpo strong{font-weight:700}

/* El enlace del cuerpo lleva subrayado siempre: en una web legal importa
   más saber qué es enlace que la limpieza visual. */
.articulo__cuerpo a{color:var(--td-ambar-tinta);text-decoration:underline;text-underline-offset:3px}
.articulo__cuerpo a:hover{text-decoration-thickness:2px}

/* Cabecera del artículo: oscura, para no romper la continuidad con el
   resto del sitio ni con la cabecera fija. */
/* La portada vive dentro de `.articulo`, que es claro, así que tiene que
   reponer los colores de fondo oscuro uno por uno: si no, hereda el Azul
   Toga del cuerpo y el titular desaparece sobre su propio fondo. */
.articulo__portada{background:var(--td-g04-bruma);color:var(--td-papel);padding:var(--td-sp-8) 0;position:relative;overflow:hidden}
.articulo__portada .antetitulo{color:var(--td-ambar)}
.articulo__portada .bajada{color:var(--td-bruma)}
@media (min-width:900px){.articulo__portada{padding:88px 0 var(--td-sp-8)}}
.articulo__portada .contenedor{position:relative;z-index:1}
.articulo__portada h1{font-size:clamp(30px,5.4vw,var(--td-fs-7));max-width:22ch}
.articulo__migas{font-size:14px;color:var(--td-bruma);margin:0 0 var(--td-sp-5)}
/* Táctil, 02-09-2026: las migas medían 18 px de alto. Se agranda solo la zona
   sensible en vertical, con el mismo recurso del sumario, para no separar el
   filete del texto. En horizontal se quedan en su ancho real —«Blog» son 28 px—
   pero van en una sola fila y separadas por una barra, así que un toque no cae
   nunca en la miga equivocada. */
.articulo__migas a{color:var(--td-bruma);text-decoration:none;border-bottom:1px solid rgba(177,196,228,.4);position:relative}
.articulo__migas a::after{
  content:"";position:absolute;left:0;right:0;
  top:50%;transform:translateY(-50%);height:44px;
}
.articulo__migas a:hover{color:var(--td-ambar);border-bottom-color:var(--td-ambar)}
.articulo__ficha{
  display:flex;flex-wrap:wrap;gap:var(--td-sp-2) var(--td-sp-5);
  font-family:var(--td-texto);font-size:14px;color:var(--td-bruma);
  margin:var(--td-sp-6) 0 0;padding-top:var(--td-sp-5);border-top:1px solid var(--td-line);
}
.articulo__ficha strong{color:var(--td-papel);font-weight:800}

/* Sumario: en guías de este largo, quien llega de Google busca un paso
   concreto, no la lectura completa. */
.sumario{
  font-family:var(--td-texto);font-size:16px;line-height:1.6;
  border:1px solid rgba(32,41,80,.18);border-radius:var(--td-r-md);
  padding:var(--td-sp-5) var(--td-sp-6);margin:0 0 var(--td-sp-7);
  background:rgba(32,41,80,.03);
}
.sumario h2{
  font-family:var(--td-texto);font-weight:800;
  font-size:var(--td-fs-1);letter-spacing:.14em;
  margin:0 0 var(--td-sp-4);color:var(--td-ambar-tinta);
}
.sumario ol{margin:0;padding-left:1.3em}
/* Táctil, 02-09-2026. Los enlaces del sumario medían 19 px de alto y estaban a
   8 px unos de otros: en un móvil eso es una ruleta. No es prosa, es una lista
   de navegación, así que le corresponde el mínimo de 44 px del manual.

   Va en dos piezas y las dos hacen falta:
   · El relleno va en el `li`, no en el `<a>`, porque el numeral lo dibuja el
     `::marker` alineado a la primera línea del elemento: con relleno en el
     enlace, la cifra se despega del texto.
   · La zona sensible del enlace se agranda con un rectángulo transparente
     centrado, igual que en `.tarjeta__enlace`. Con 13 px de relleno el paso de
     un enlace al siguiente queda en 52 px, medido en el navegador, así que las
     zonas de 44 no se pisan y ninguna le roba el toque a la de al lado. */
.sumario li{margin-bottom:0;padding-block:13px}
.sumario li a{position:relative}
.sumario li a::after{
  content:"";position:absolute;left:0;right:0;
  top:50%;transform:translateY(-50%);height:44px;
}

/* Pasos numerados: el mismo numeral sólido, en versión clara, así que la cifra
   va en Ámbar Tinta. Sobre Blanco Papel el Ámbar Salle no se usa nunca. */
.pasos{list-style:none;margin:0 0 var(--td-sp-6);padding:0;counter-reset:paso}
.pasos>li{
  counter-increment:paso;position:relative;
  padding-left:56px;margin-bottom:var(--td-sp-6);
}
.pasos>li::before{
  content:counter(paso,decimal-leading-zero);
  position:absolute;left:0;top:2px;
  font-family:var(--td-display);font-weight:900;font-variation-settings:"wdth" 87.5;
  font-size:var(--td-fs-5);line-height:1;
  color:var(--td-ambar-tinta);
}
.pasos h3{margin-top:0}

/* Dato duro — plazo, monto, artículo de ley. Fondo oscuro siempre, así
   que el Figtree 800 blanco de la regla 4 se cumple al pie de la letra. */
.dato{
  background:var(--td-codice);color:var(--td-papel);
  border-radius:var(--td-r-md);padding:var(--td-sp-5) var(--td-sp-6);
  margin:0 0 var(--td-sp-6);
  font-family:var(--td-texto);font-size:16px;line-height:1.6;
}
.dato .dato__que{
  display:block;font-size:var(--td-fs-1);letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:var(--td-ambar);margin-bottom:var(--td-sp-2);
}
.dato .dato__valor{display:block;font-weight:800;font-size:var(--td-fs-5);line-height:1.15}
.dato p{margin:var(--td-sp-3) 0 0;color:var(--td-bruma);font-size:15px}

/* Aviso: lo que hay que leer antes de equivocarse. */
.aviso{
  border-left:4px solid var(--td-ambar-tinta);
  background:rgba(168,90,18,.06);
  border-radius:0 var(--td-r-sm) var(--td-r-sm) 0;
  padding:var(--td-sp-5) var(--td-sp-6);margin:0 0 var(--td-sp-6);
  font-family:var(--td-texto);font-size:16px;line-height:1.6;
}
.aviso p{margin-bottom:var(--td-sp-3)}
.aviso p:last-child{margin-bottom:0}
.aviso .aviso__titulo{
  font-weight:800;font-size:var(--td-fs-1);letter-spacing:.12em;text-transform:uppercase;
  color:var(--td-ambar-tinta);margin:0 0 var(--td-sp-2);
}

/* Cita literal de norma. */
.articulo__cuerpo blockquote{
  margin:0 0 var(--td-sp-6);padding-left:var(--td-sp-5);
  border-left:3px solid rgba(32,41,80,.25);
  font-style:italic;color:rgba(32,41,80,.85);
}
.articulo__cuerpo blockquote p:last-child{margin-bottom:0}
.articulo__cuerpo blockquote cite{
  display:block;font-style:normal;font-family:var(--td-texto);
  font-size:14px;font-weight:600;margin-top:var(--td-sp-3);color:var(--td-ambar-tinta);
}

.figura{margin:0 0 var(--td-sp-6)}
.figura img{border-radius:var(--td-r-md);border:1px solid rgba(32,41,80,.15)}
.figura figcaption{
  font-family:var(--td-texto);font-size:14px;line-height:1.5;
  color:rgba(32,41,80,.7);margin-top:var(--td-sp-3);
}

.tabla{overflow-x:auto;margin:0 0 var(--td-sp-6);border:1px solid rgba(32,41,80,.18);border-radius:var(--td-r-md)}
.tabla table{border-collapse:collapse;width:100%;min-width:440px;font-family:var(--td-texto);font-size:16px}
.tabla th,.tabla td{padding:var(--td-sp-3) var(--td-sp-4);text-align:left;border-bottom:1px solid rgba(32,41,80,.14)}
.tabla thead th{
  background:rgba(32,41,80,.05);font-weight:800;
  font-size:var(--td-fs-1);letter-spacing:.1em;text-transform:uppercase;
}
.tabla tbody th{font-weight:600}
.tabla td{font-variant-numeric:tabular-nums}
.tabla tr:last-child th,.tabla tr:last-child td{border-bottom:0}
.tabla caption{
  font-family:var(--td-texto);font-size:14px;color:rgba(32,41,80,.7);
  text-align:left;padding:var(--td-sp-3) var(--td-sp-4);
}

/* Descarga de un formato editable. */
.descarga{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--td-sp-4);
  border:1px solid rgba(32,41,80,.18);border-radius:var(--td-r-md);
  padding:var(--td-sp-5) var(--td-sp-6);margin:0 0 var(--td-sp-6);
  font-family:var(--td-texto);font-size:16px;
}
.descarga p{margin:0;flex:1 1 240px}
.articulo__cuerpo .descarga a{
  background:var(--td-ambar);color:var(--td-toga);
  font-weight:800;font-size:15px;padding:13px 26px;border-radius:var(--td-r-sm);
  text-decoration:none;min-height:44px;display:inline-flex;align-items:center;
}

/* Fuentes legales: todo dato legal se puede rastrear hasta su norma. */
.fuentes{
  font-family:var(--td-texto);font-size:14px;line-height:1.6;
  border-top:1px solid rgba(32,41,80,.18);margin-top:var(--td-sp-8);padding-top:var(--td-sp-5);
  color:rgba(32,41,80,.75);
}
.fuentes h2{
  font-family:var(--td-texto);font-weight:800;
  font-size:var(--td-fs-1);letter-spacing:.14em;margin:0 0 var(--td-sp-3);
}
.fuentes ul{margin:0;padding-left:1.2em}
.fuentes li{margin-bottom:var(--td-sp-2)}

/* Navegación de la serie. */
.serie{display:grid;gap:var(--td-sp-4);margin-top:var(--td-sp-7)}
@media (min-width:640px){.serie{grid-template-columns:1fr 1fr}}
.articulo__cuerpo .serie a{
  font-family:var(--td-texto);text-decoration:none;
  border:1px solid rgba(32,41,80,.18);border-radius:var(--td-r-md);
  padding:var(--td-sp-4) var(--td-sp-5);display:block;color:var(--td-toga);
}
.articulo__cuerpo .serie a:hover{border-color:var(--td-ambar-tinta)}
.serie .serie__que{
  display:block;font-size:var(--td-fs-1);letter-spacing:.12em;text-transform:uppercase;
  font-weight:800;color:var(--td-ambar-tinta);margin-bottom:4px;
}
.serie .serie__titulo{display:block;font-weight:600;font-size:16px;line-height:1.4}
.serie .serie--siguiente{text-align:right}

/* ---------- Tabla que se desplaza ----------
   La tabla tiene min-width 440 px y en móvil no cabe: se desplaza dentro
   de su caja. Hay que avisarlo de dos formas, porque la marca prohíbe
   comunicar algo solo por color:

   1. Las sombras de los bordes, que aparecen y desaparecen solas según
      haya contenido oculto a ese lado. El truco es `background-attachment`:
      las dos capas `local` viajan con el desplazamiento y tapan las
      `scroll`, que están fijas. Sin JavaScript.
   2. Un texto explícito debajo, solo en pantallas donde de verdad no cabe. */

.tabla{
  background:
    linear-gradient(to right, var(--td-papel) 30%, rgba(253,253,253,0)) left / 40px 100% no-repeat local,
    linear-gradient(to left,  var(--td-papel) 30%, rgba(253,253,253,0)) right / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(32,41,80,.22), rgba(32,41,80,0)) left / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(32,41,80,.22), rgba(32,41,80,0)) right / 16px 100% no-repeat scroll;
}

.tabla__pista{display:none}

@media (max-width:760px){
  .articulo__cuerpo .tabla__pista{
    display:flex;align-items:center;gap:var(--td-sp-2);
    font-family:var(--td-texto);font-size:14px;font-weight:800;
    color:var(--td-ambar-tinta);   /* fondo claro: nunca Ámbar Salle */
    margin:calc(var(--td-sp-5) * -1) 0 var(--td-sp-6);
  }
  .articulo__cuerpo .tabla__pista::before{
    content:"";flex:none;width:18px;height:18px;
    background:currentColor;
    -webkit-mask:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
            mask:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  }
}