/* ═══════════════════════════════════════════════════════════════════
   articulo.css — chrome del blog. Se carga DESPUÉS de cleandate.css y
   solo en las guías: la landing no lo necesita.

   Usa las variables de cleandate.css, no valores sueltos, para que el
   blog y la landing se lean como un mismo sistema.
   ═══════════════════════════════════════════════════════════════════ */

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

.cont{width:min(1180px,100% - 2.5rem);margin-inline:auto}

/* OJO: `.sep` NO es un espaciador genérico. En este artículo es un punto
   separador dentro de la línea de firma. Estilarlo con padding de sección
   partía esa línea en dos. Se scopa a <section> y punto. */
section.sep{padding:var(--s16) 0}

/* ── Línea de tiempo de la caducidad ─────────────────────────────
   `.linea-t` es una <ol>, no una divisoria: cada <li> lleva `.cuando`
   (el momento) y `.qué` (el hecho). La regla vertical se dibuja con un
   borde en el <li>, no con un pseudo-elemento posicionado, para que el
   último tramo pueda cortarse limpio. */
.linea-t{list-style:none;margin:var(--s8) 0;padding:0}
.linea-t li{
  position:relative;
  border-left:2px solid var(--line-2);
  padding:0 0 var(--s8) var(--s8);
}
.linea-t li:last-child{border-left-color:transparent;padding-bottom:0}
.linea-t li::before{
  content:"";position:absolute;left:-7px;top:.35rem;
  width:12px;height:12px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px var(--surface);
}
.linea-t li:last-child::before{background:var(--jade)}

.linea-t .cuando{
  display:inline-block;
  font-family:var(--font-display);font-weight:700;
  font-size:var(--text-xs);letter-spacing:.1em;
  color:var(--accent);
  background:var(--accent-soft);
  border-radius:999px;padding:.2rem .7rem;margin-bottom:.4rem;
}
.linea-t li:last-child .cuando{color:var(--jade);background:var(--jade-soft)}

.linea-t .qué{
  display:block;
  font-family:var(--font-display);font-weight:700;
  font-size:var(--text-lg);line-height:1.35;
  color:var(--ink);margin-bottom:.35rem;
}
.linea-t p{margin:0;color:var(--muted);line-height:1.7;font-size:var(--text-sm)}

/* ── Barra de progreso de lectura ────────────────────────────────
   Fija arriba. Es lo único de la página que se pinta en cada scroll,
   y solo cambia `transform`: nunca `width`, que forzaría relayout. */
.progreso{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:60;
  background:var(--accent);transform-origin:0 50%;transform:scaleX(0);
  will-change:transform;
}

/* ── Migas ──────────────────────────────────────────────────────── */
.migas{font-size:var(--text-sm);color:var(--muted);padding:var(--s6) 0 0}
.migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0}
.migas li+li::before{content:"/";margin-right:.4rem;color:var(--line-2)}
.migas a{color:var(--muted);text-decoration:none}
.migas a:hover{color:var(--accent);text-decoration:underline}

/* ── Rejilla del artículo: cuerpo + índice lateral ──────────────── */
/* `.art-grid` vive dentro de <header class="art-head">: es titular + foto.
   El cuerpo con el índice lateral es `.art-body`, más abajo. Tenerlos
   claros importa porque las dos son rejillas de dos columnas y es fácil
   darle a una el reparto de la otra. */
.art-grid{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(1.75rem,4vw,3.5rem);align-items:center;
}
@media (max-width:860px){ .art-grid{grid-template-columns:1fr} }
.art-head h1{font-size:var(--text-3xl);line-height:1.1;letter-spacing:-.03em;margin-bottom:var(--s4)}
.entradilla{font-size:var(--text-lg);line-height:1.7;color:var(--muted);max-width:44ch}

/* La foto de cabecera. El `figcaption` va DEBAJO, no encima: superpuesto
   sobre una imagen clara el texto se pierde, y recortado por el
   `overflow:hidden` del contenedor se corta. */
.art-foto{width:100%;margin:var(--s8) 0}
.art-foto img{
  width:100%;height:auto;display:block;
  border-radius:20px;background:var(--paper-blue);
}
.art-foto figcaption{
  margin-top:var(--s3);
  font-size:var(--text-xs);color:var(--muted);
  line-height:1.6;text-align:center;
}

/* ── Índice ─────────────────────────────────────────────────────── */
.toc{position:sticky;top:var(--s8);font-size:var(--text-sm);
     border-left:2px solid var(--line);padding-left:var(--s4)}
.toc-t{font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);
       text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:var(--s3)}
.toc ol{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.55rem}
.toc a{color:var(--muted);text-decoration:none;line-height:1.45;display:block}
.toc a:hover,.toc a[aria-current="true"]{color:var(--accent)}
@media (max-width:960px){ .toc{position:static;border-left:0;padding-left:0;
  border-top:1px solid var(--line);padding-top:var(--s6);margin-top:var(--s8)} }

/* ── Prosa ──────────────────────────────────────────────────────── */
.prosa{max-width:44rem;font-size:var(--text-base);line-height:1.78;color:var(--ink-2)}
.prosa h2{font-size:clamp(1.5rem,3.2vw,2.05rem);line-height:1.25;letter-spacing:-.02em;
          margin:var(--s12) 0 var(--s4);scroll-margin-top:var(--s8)}
.prosa h3{font-size:var(--text-lg);margin:var(--s8) 0 var(--s3);letter-spacing:-.01em}
.prosa p{margin-bottom:var(--s4)}
/* `:not(.btn)` no es cosmético: sin él esta regla gana por especificidad a
   `.btn-primary{color:#fff}` y los botones dentro del texto salen azul
   sobre azul, es decir, invisibles. */
.prosa a:not(.btn){color:var(--accent)}
.prosa ul,.prosa ol{margin:0 0 var(--s4) 1.2rem;display:flex;flex-direction:column;gap:.5rem}
.prosa li{line-height:1.7}
.prosa strong{color:var(--ink)}

/* ── Bloques destacados ─────────────────────────────────────────── */
.destacado{
  border-left:4px solid var(--accent);background:var(--paper-blue);
  border-radius:0 14px 14px 0;padding:var(--s6);margin:var(--s8) 0;
}
.destacado p:last-child{margin-bottom:0}

/* Igual que `.sep`: `.dato` aquí es un dato EN LÍNEA de la firma, no una
   rejilla. La rejilla de cifras es `.dato-clave`, que va sola. */
.datos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
      gap:var(--s4);margin:var(--s8) 0}
.dato-clave{background:var(--surface);border:1px solid var(--line);border-radius:16px;
            padding:var(--s6);text-align:center}
.dato-clave b{display:block;font-family:var(--font-display);font-size:1.9rem;
              line-height:1;color:var(--accent);letter-spacing:-.03em;margin-bottom:.35rem}
.dato-clave span{font-size:var(--text-sm);color:var(--muted);line-height:1.5}

.bien::before{content:"✓ ";color:var(--jade);font-weight:700}
.mal::before {content:"✕ ";color:var(--coral);font-weight:700}

/* Cuerpo del artículo: prosa + índice pegajoso. El índice va SEGUNDO en
   el HTML pero se lee primero en pantallas anchas; en móvil cae debajo,
   que es donde estorba menos. */
/* El índice va PRIMERO en el HTML, así que la columna estrecha es la
   primera. Nada de `order`: el orden visual y el del documento coinciden,
   que es lo que espera quien navega con teclado o lector de pantalla.
   El `minmax(0,1fr)` de la prosa no es decorativo: sin ese 0 la columna
   crece hasta el ancho de la tabla más ancha y el `.scrollx` no recorta. */
.art-body{
  display:grid;grid-template-columns:250px minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);align-items:start;
}
.art-body > .prosa{min-width:0}
@media (max-width:960px){ .art-body{grid-template-columns:1fr} }

/* ── Tablas ─────────────────────────────────────────────────────── */
.scrollx{overflow-x:auto;margin:var(--s8) 0;-webkit-overflow-scrolling:touch}
.tabla{width:100%;border-collapse:collapse;font-size:var(--text-sm);min-width:34rem}
.tabla th,.tabla td{padding:.8rem 1rem;text-align:left;border-bottom:1px solid var(--line);
                    vertical-align:top;line-height:1.55}
.tabla thead th{background:var(--paper-blue);font-family:var(--font-display);
                font-weight:700;color:var(--ink);border-bottom:2px solid var(--line-2)}
.tabla tbody tr:last-child td{border-bottom:0}

/* ── Figuras ────────────────────────────────────────────────────── */
.fig{margin:var(--s8) 0}
.fig img{width:100%;height:auto;border-radius:16px;display:block}
.fig figcaption{font-size:var(--text-xs);color:var(--muted);margin-top:var(--s2);text-align:center}

/* ── Autoría (E-E-A-T) ──────────────────────────────────────────── */
.quien-firma{display:flex;gap:var(--s4);align-items:flex-start;
             background:var(--paper);border:1px solid var(--line);
             border-radius:18px;padding:var(--s6);margin:var(--s12) 0}
.quien-firma .quien{flex:1}
.quien-firma .quien b{display:block;font-family:var(--font-display);color:var(--ink)}

/* ── Línea de firma: autor · fecha · tiempo de lectura ──────────────
   Una sola fila que envuelve en móvil. Los `.sep` son los puntos. */
.firma{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;
  margin-top:var(--s6);
  font-size:var(--text-sm);color:var(--muted);line-height:1.6;
}
.firma .quien{font-weight:600;color:var(--ink-2)}
.firma .dato{display:inline;white-space:nowrap}
.firma .sep{
  display:inline-block;width:4px;height:4px;border-radius:50%;
  background:var(--line-2);padding:0;margin:0;flex:0 0 auto;
}
@media (max-width:520px){ .firma .sep{display:none} .firma{gap:.25rem 1rem} }
.nota-testi{font-size:var(--text-xs);color:var(--muted);margin-top:var(--s4)}
.sub-com{font-size:var(--text-sm);color:var(--muted)}

/* ── Acordeones (FAQ) ───────────────────────────────────────────── */
.acc{border:1px solid var(--line);border-radius:14px;padding:var(--s4) var(--s6);
     margin-bottom:var(--s3);background:var(--surface)}
.acc summary{cursor:pointer;font-family:var(--font-display);font-weight:600;
             color:var(--ink);list-style:none;position:relative;padding-right:1.8rem}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";position:absolute;right:0;top:-.1rem;
                    font-size:1.3rem;color:var(--accent);line-height:1}
.acc[open] summary::after{content:"–"}
.acc[open] summary{margin-bottom:var(--s3)}
.acc p{margin:0 0 var(--s3);color:var(--ink-2);line-height:1.7}
.acc p:last-child{margin-bottom:0}

/* ── Servicios ──────────────────────────────────────────────────── */
.servicios{background:var(--paper-blue);border-radius:24px;padding:var(--s12) var(--s8);margin:var(--s16) 0}
.serv-cab{text-align:center;max-width:40rem;margin:0 auto var(--s8)}
.serv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--s4)}
.serv{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:var(--s6)}
.serv h3{font-size:var(--text-lg);margin-bottom:var(--s2)}
.serv p{font-size:var(--text-sm);color:var(--muted);line-height:1.65}

/* ── Cierre suave y formulario ──────────────────────────────────── */
.cta-suave{text-align:center;padding:var(--s12) 0}
.form-sec{background:var(--ink);color:#fff;border-radius:24px;padding:var(--s12) var(--s8);margin:var(--s16) 0}
.form-sec h2,.form-sec .lead{color:#fff}
.form-sec .lead{opacity:.78}

.tema{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;
      color:var(--accent);font-weight:700}
.ayuda{font-size:var(--text-sm);color:var(--muted)}

/* ═══════════════════════════════════════════════════════════════════
   AIRE — 2026-08-07
   Todo iba demasiado apretado y los titulares quedaban pisados por la
   cabecera fija al saltar desde el índice.
   ═══════════════════════════════════════════════════════════════════ */

/* La cabecera es fija: sin este margen, un salto de ancla deja el titular
   escondido detrás de ella. Se aplica a TODO lo que tenga id, no solo a
   los h2, porque el índice también apunta a secciones. */
h1[id],h2[id],h3[id],section[id],article[id]{scroll-margin-top:5.5rem}

/* La cabecera del artículo y el cuerpo iban pegados: la línea de firma
   terminaba y el índice arrancaba en la línea siguiente, sin respiro. */
.art-head{margin-bottom:var(--s12)}
.firma{margin-top:var(--s6);padding-bottom:var(--s2)}
.art-body{margin-top:var(--s10)}
.toc-t{margin-bottom:var(--s4)}
.toc ol{gap:.7rem}
@media (max-width:960px){
  .art-head{margin-bottom:var(--s8)}
  .art-body{margin-top:var(--s6)}
}

/* Separación entre bloques de contenido dentro de la prosa. */
.prosa h2{margin-top:var(--s16)}
.prosa h2:first-child{margin-top:0}
.prosa > :last-child{margin-bottom:0}

/* Los destacados y las cajas necesitan respirar por los dos lados. */
.destacado,.cuando,.scrollx,.fig,.quien-firma,.linea-t{margin-block:var(--s10)}

/* Testimonios: más aire entre tarjetas y con el titular. */
.muro{gap:var(--s6)}
.muro .testi{padding:var(--s6)}
.art-body + section,
section + section{margin-top:var(--s8)}

/* Servicios y formulario, que son bloques grandes de color. */
.servicios,.form-sec{margin-block:var(--s20)}

/* El cierre no debe quedar pegado a lo anterior. */
.cta-suave{padding-block:var(--s16)}

@media (max-width:640px){
  .prosa h2{margin-top:var(--s12)}
  .servicios,.form-sec{margin-block:var(--s16);padding:var(--s10) var(--s6)}
  .destacado,.cuando,.scrollx,.fig,.quien-firma,.linea-t{margin-block:var(--s8)}
}

/* ═══════════════════════════════════════════════════════════════════
   Formulario de la guía — 2026-08-07

   OJO: el marcado aquí NO es el de la landing. Allí es
   `<label class="campo"><span>…</span><input></label>`; aquí es
   `<div class="campo"><label for>…</label><input></div>`. Por eso las
   reglas de la landing (`.campo > span`) no alcanzaban nada y el
   `<select>` salía con el aspecto nativo del navegador.

   Todo en píldora, incluidos los campos.
   ═══════════════════════════════════════════════════════════════════ */

.form-sec .form-card{
  background:var(--surface);
  border-radius:24px;
  padding:var(--s8);
  margin-top:var(--s8);
  text-align:left;
}
@media (max-width:640px){ .form-sec .form-card{padding:var(--s6);border-radius:18px} }

.form-card .campo{margin-bottom:var(--s5)}

.form-card .campo > label{
  display:block;
  font-family:var(--font-body);
  font-size:var(--text-sm);
  font-weight:600;
  color:var(--ink-2);
  margin-bottom:var(--s2);
}

.form-card input[type="text"],
.form-card input[type="tel"],
.form-card input[type="email"],
.form-card select,
.form-card textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:var(--text-base);
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line-2);
  border-radius:999px;              /* píldora */
  padding:.85rem 1.25rem;
  transition:border-color .16s ease, box-shadow .16s ease;
}

/* El textarea no puede ser una píldora: con varias líneas el radio se
   come las esquinas del texto. Radio grande, pero no capsular. */
.form-card textarea{
  border-radius:20px;
  resize:vertical;min-height:6.5rem;line-height:1.6;
  padding:.9rem 1.25rem;
}

/* El <select> nativo trae su propia flecha y su propio alto. Se quita y
   se dibuja una, si no la píldora queda con un pico cuadrado al lado. */
.form-card select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:2.75rem;
  cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 1.35rem) 1.28rem, calc(100% - 1.05rem) 1.28rem;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
.form-card select:focus{
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),
                   linear-gradient(135deg,var(--accent) 50%,transparent 50%);
}

.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);
}
.form-card ::placeholder{color:var(--muted)}

.form-card .ayuda{margin-top:var(--s2);font-size:var(--text-xs)}

.form-card .consent{
  display:flex;gap:var(--s3);align-items:flex-start;
  margin:var(--s6) 0;
  font-size:var(--text-sm);line-height:1.6;color:var(--muted);cursor:pointer;
}
.form-card .consent input[type="checkbox"]{
  flex:0 0 auto;width:1.15rem;height:1.15rem;margin-top:.15rem;
  accent-color:var(--accent);cursor:pointer;
}
.form-card .consent a{color:var(--accent)}

.form-card button[type="submit"]{
  width:100%;
  border-radius:999px;
  padding:1rem 1.75rem;
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--text-base);
  border:0;
  background:var(--accent);
  color:#fff;
  cursor:pointer;
}
.form-card button[type="submit"]:hover{background:var(--accent-dark,#0043C4)}

/* Aviso del resultado del envío. */
.callout{
  border:1px solid var(--line-2);border-left:4px solid var(--jade);
  background:var(--jade-soft);border-radius:16px;
  padding:var(--s4) var(--s6);margin-bottom:var(--s4);text-align:left;
}
.callout .t{margin:0;font-weight:600;color:var(--ink)}
.callout.ojo{border-left-color:var(--coral);background:#FDF2F1}