/* =================================================================
   Proyecto: Elegibla — web estática
   Autor:    claudedev / Leo (Leoncio)
   Método:   Hoja única. Tokens de marca + sistema visual del diseño
             aprobado (Main/Diagnostico/Guias/Guia/Identidad).
             Mobile-first; punto de quiebre de maquetación 920px. El menú
             compacto (hamburguesa) conmuta a nav de escritorio en 1100px.
   Versión:  1.0.0
   Fecha:    2026-09-17
   ================================================================= */

/* ---- Tokens ---- */
:root {
  --yeso: #EEF0EC;      /* fondo */
  --grafito: #1E2328;   /* texto */
  --azul: #1D3FBF;      /* botones y enlaces */
  --azul-hover: #142C85;
  --rojo: #D9412B;      /* solo el trazo de "elegido", 1 vez por pantalla */
  --gris: #5B636B;      /* texto secundario */
  --gris-2: #3A4048;
  --linea: #C9CEC8;     /* separadores sobre yeso */
  --linea-oscura: #3A4048;
  --blanco: #FFFFFF;
  --gris-borde: #8C939A;
  --azul-suave: #E3E7F7;
  --sobre-oscuro: #B9C0C6;
  --placeholder: #D9DDD8;

  --tipo-titular: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --tipo-texto: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ancho-max: 1440px;
  --pad-x: 20px;
  --radio: 6px;
  --radio-g: 10px;
}
@media (min-width: 920px) { :root { --pad-x: 96px; } }

/* ---- Fuentes autoalojadas (subset latino, OFL) ---- */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Base ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--yeso);
  color: var(--grafito);
  font-family: var(--tipo-texto);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--tipo-titular); margin: 0; font-optical-sizing: auto; }
p { margin: 0; }
img { max-width: 100%; display: block; }
picture { display: block; }
a { color: var(--azul); }
a:hover { color: var(--azul-hover); }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
input:focus-visible, textarea:focus-visible, button:focus-visible { outline-offset: 2px; }

/* Salto al contenido (accesibilidad) */
.saltar {
  position: absolute; left: -9999px; top: 0;
  background: var(--azul); color: #fff; padding: 12px 18px; border-radius: var(--radio);
  z-index: 100; font-weight: 600;
}
.saltar:focus { left: 12px; top: 12px; color: #fff; }
.oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Contenedor / secciones ---- */
.contenedor { max-width: var(--ancho-max); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.seccion { padding-top: 56px; padding-bottom: 56px; }
@media (min-width: 920px) { .seccion { padding-top: 104px; padding-bottom: 104px; } }
.seccion--oscura { background: var(--grafito); color: var(--yeso); }
.seccion--blanca { background: var(--blanco); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.seccion--azul { background: var(--azul); color: #fff; }
.seccion--oscura h1, .seccion--oscura h2, .seccion--oscura h3,
.seccion--azul h1, .seccion--azul h2, .seccion--azul h3 { color: #fff; }

/* ---- Tipografía fluida ---- */
.t-h1 { font-weight: 800; font-size: clamp(2.375rem, 1.4rem + 4.2vw, 4.75rem); line-height: 1; letter-spacing: -1.6px; }
.t-h2 { font-weight: 800; font-size: clamp(2rem, 1.3rem + 3vw, 3.75rem); line-height: 1.04; letter-spacing: -1.5px; }
.t-h2-mediano { font-weight: 800; font-size: clamp(1.875rem, 1.4rem + 2vw, 3rem); line-height: 1.04; letter-spacing: -1.3px; }
.t-h3 { font-weight: 700; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); letter-spacing: -0.5px; }
.t-intro { font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem); line-height: 1.55; }
.t-cuerpo { font-size: 1.0625rem; line-height: 1.6; }
@media (min-width: 920px) { .t-cuerpo { font-size: 1.125rem; } }
.t-gris { color: var(--gris); }
.t-secundario { color: var(--gris-2); }

/* ---- Botones y enlaces de acción ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px; border-radius: var(--radio);
  font-family: var(--tipo-texto); font-size: 1.0625rem; font-weight: 600;
  text-decoration: none; border: 0; cursor: pointer; line-height: 1.2;
}
@media (min-width: 920px) { .btn { min-height: 56px; } }
.btn--grande { min-height: 60px; padding: 0 28px; font-size: 1.125rem; }
.btn--primario { background: var(--azul); color: #fff; }
.btn--primario:hover { background: var(--azul-hover); color: #fff; }
.btn--sobre-azul { background: #fff; color: var(--azul); }
.btn--sobre-azul:hover { color: var(--azul-hover); }
.btn--fantasma { border: 2px solid var(--grafito); color: var(--grafito); background: transparent; }
.btn--fantasma:hover { color: var(--grafito); background: rgba(30,35,40,0.05); }
.enlace-accion { font-weight: 600; }
.bloque-btn { display: flex; }
.bloque-btn .btn { width: 100%; }
@media (min-width: 920px) { .bloque-btn .btn { width: auto; } }

/* ---- Cabecera / navegación ---- */
.cabecera { border-bottom: 1px solid var(--linea); background: var(--yeso); }
.cabecera__inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
@media (min-width: 920px) { .cabecera__inner { min-height: 88px; } }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--grafito); }
/* Wordmark de cabecera (identidad provisional, dirección C del brief 2026-09-20).
   Sustituyó al SVG círculo+check y al <span class="logo__texto">. width:auto
   mantiene el ratio intrínseco del SVG (viewBox), sin deformarlo. */
.logo__img { display: block; height: 28px; width: auto; }

.nav-btn {
  width: 48px; height: 48px; border: 0; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.nav { display: none; }
.nav a { color: var(--grafito); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--azul); font-weight: 600; text-decoration: underline; text-underline-offset: 6px; }

/* Menú móvil desplegable */
@media (max-width: 1099.98px) {
  .nav[data-abierto="true"] { display: flex; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; background: var(--yeso);
    border-bottom: 1px solid var(--linea); padding: 8px var(--pad-x) 20px; z-index: 40;
    box-shadow: 0 18px 30px rgba(30,35,40,0.12);
  }
  .cabecera { position: relative; }
  .nav a { padding: 14px 0; font-size: 1.0625rem; border-bottom: 1px solid var(--linea); min-height: 48px; display: flex; align-items: center; }
  .nav .btn { margin-top: 14px; }
}
@media (min-width: 1100px) {
  .nav-btn { display: none; }
  .nav { display: flex; align-items: center; gap: 36px; font-size: 17px; }
}

/* ---- Hero (Inicio) ---- */
.hero { display: flex; flex-direction: column; gap: 20px; padding-top: 40px; padding-bottom: 48px; }
.hero__texto { display: flex; flex-direction: column; gap: 20px; }
.hero__acciones { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.hero__medios { position: relative; margin-top: 8px; }
@media (min-width: 920px) {
  .hero { flex-direction: row; align-items: center; gap: 120px; padding-top: 88px; padding-bottom: 96px; }
  .hero__texto { flex: 1.05; gap: 28px; }
  .hero__texto p { max-width: 580px; }
  .hero__acciones { flex-direction: row; align-items: center; gap: 28px; margin-top: 8px; }
  .hero__medios { flex: 0.95; padding-bottom: 150px; }
}
.hero__foto { width: 100%; height: 260px; object-fit: cover; object-position: 60% center; border-radius: var(--radio-g); }
@media (min-width: 920px) { .hero__foto { height: 540px; object-position: 0% center; } }

/* ---- Mockup del chat + animación ---- */
.chat {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-g);
  padding: 18px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 14px 30px rgba(30,35,40,0.18); position: relative;
}
.chat__burbuja { align-self: flex-end; max-width: 300px; background: var(--azul-suave); border-radius: 14px; padding: 11px 14px; font-size: 15px; line-height: 1.45; }
.chat__intro { font-size: 15px; }
.chat__fila { padding: 9px 12px; border-bottom: 1px solid #E2E5E1; font-size: 15px; color: var(--gris); }
.chat__elegido { position: relative; padding: 12px; font-family: var(--tipo-titular); font-weight: 700; font-size: 21px; }
.chat__nota { font-size: 14px; color: var(--gris); margin-top: 10px; }
.chat__stroke-svg { position: absolute; left: -4px; top: -4px; }
@media (min-width: 920px) {
  .chat { position: absolute; left: -56px; bottom: 52px; width: 390px; padding: 24px; gap: 14px; box-shadow: 0 18px 40px rgba(30,35,40,0.18); }
  .chat__burbuja { max-width: 320px; font-size: 16px; padding: 12px 16px; }
  .chat__intro { font-size: 16px; line-height: 1.5; }
  .chat__fila { padding: 10px 14px; font-size: 17px; }
  .chat__elegido { padding: 14px; font-size: 23px; }
  .hero__medios .chat__nota { position: absolute; left: -56px; bottom: 0; width: 390px; }
}

/* Animación (idéntica al diseño) — respeta prefers-reduced-motion */
@keyframes elIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes elFocus { from { opacity: 0.15; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
@keyframes elDraw { to { stroke-dashoffset: 0; } }
@keyframes elDots { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes elHide { to { opacity: 0; height: 0; margin: 0; } }
.el-w { opacity: 0; animation: elIn 0.25s ease-out forwards; }
.el-dots { animation: elHide 0.2s 2.9s forwards; overflow: hidden; height: 18px; }
.el-dots span { display: inline-block; width: 8px; height: 8px; border-radius: 4px; background: var(--gris-borde); margin-right: 5px; animation: elDots 0.9s infinite; }
.el-name { opacity: 0.15; filter: blur(6px); animation: elFocus 0.9s 4.6s ease-out forwards; }
.el-stroke { stroke-dasharray: 560; stroke-dashoffset: 560; animation: elDraw 0.9s 5.5s ease-in-out forwards; }
@media (prefers-reduced-motion: reduce) {
  .el-w, .el-name { opacity: 1; filter: none; animation: none; }
  .el-dots { display: none; }
  .el-stroke { stroke-dashoffset: 0; animation: none; }
}

/* ---- Bloque problema (dos columnas) ---- */
.dos-col { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 920px) { .dos-col { flex-direction: row; gap: 96px; } .dos-col > * { flex: 1; } .dos-col__ancho { flex: 1.1; } }
.pila { display: flex; flex-direction: column; gap: 20px; }
.pila--ancha { gap: 24px; }

/* ---- Tres líneas (tarjetas) ---- */
.tarjetas { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 920px) { .tarjetas { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.tarjeta { display: flex; flex-direction: column; gap: 10px; padding: 24px 0; border-top: 1px solid var(--linea); }
.tarjeta:first-child { border-top: 2px solid var(--grafito); }
.tarjeta:last-child { border-bottom: 1px solid var(--linea); }
@media (min-width: 920px) {
  .tarjeta { gap: 18px; padding: 36px 40px 8px 0; border-top: 0; border-bottom: 0; border-right: 1px solid var(--linea); }
  .tarjeta:first-child { border-top: 0; }
  .tarjeta:last-child { border-right: 0; padding-right: 0; padding-left: 40px; }
  .tarjeta:nth-child(2) { padding-left: 40px; padding-right: 40px; }
}
.tarjeta__foto { width: 100%; height: 210px; object-fit: cover; border-radius: var(--radio); margin-bottom: 6px; }
@media (min-width: 920px) { .tarjeta__foto { height: 250px; margin-bottom: 8px; } }
.tarjeta__cita { font-style: italic; color: var(--gris); }

/* ---- Pasos numerados ---- */
.pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 920px) { .pasos { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 56px; } }
.paso { display: flex; gap: 18px; }
@media (min-width: 920px) { .paso { flex-direction: column; gap: 14px; } }
.paso__num { font-family: var(--tipo-titular); font-weight: 800; font-size: 44px; line-height: 1; color: var(--azul); flex-shrink: 0; }
@media (min-width: 920px) { .paso__num { font-size: 72px; } }
.paso__cuerpo { display: flex; flex-direction: column; gap: 6px; }

/* ---- Encabezado de sección con título grande ---- */
.bloque-titulo { display: flex; flex-direction: column; gap: 20px; }
.rejilla-56 { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 920px) { .rejilla-56 { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 56px; } }
.col-borde { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--gris); padding-top: 24px; }

/* ---- FAQ ---- */
.faq { display: flex; flex-direction: column; }
.faq__item { padding: 20px 0; border-top: 1px solid var(--linea); display: flex; flex-direction: column; gap: 8px; }
.faq__item:last-child { border-bottom: 1px solid var(--linea); }
.faq h3 { font-weight: 700; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }
.faq-bloque { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 920px) { .faq-bloque { flex-direction: row; gap: 96px; } .faq-bloque__titulo { flex: 0.7; } .faq-bloque__lista { flex: 1.3; } }

/* ---- Banda CTA ---- */
.cta { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 920px) { .cta { flex-direction: row; justify-content: space-between; align-items: center; gap: 64px; } .cta__texto { max-width: 760px; } }

/* ---- Bloque "quién te atiende" ---- */
.persona { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 920px) { .persona { flex-direction: row; align-items: center; gap: 80px; } }
.persona__foto { width: 100%; height: 380px; background: var(--placeholder); border-radius: var(--radio); display: flex; align-items: center; justify-content: center; color: var(--gris-2); flex-shrink: 0; }
@media (min-width: 920px) { .persona__foto { width: 420px; height: 500px; } }
.persona__cuerpo { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 920px) { .persona__cuerpo { gap: 24px; } .persona__cuerpo p { max-width: 640px; } }

/* ---- Formulario ---- */
.formulario { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-g); padding: 24px 20px; display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 920px) { .formulario { width: 520px; flex-shrink: 0; padding: 40px; gap: 20px; } }
.campo { display: flex; flex-direction: column; gap: 6px; }
label { font-size: 16px; font-weight: 600; }
label .opcional { font-weight: 400; color: var(--gris); }
input[type="text"], input[type="email"], input[type="url"], textarea {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 17px; color: var(--grafito);
  border: 1.5px solid var(--gris-borde); border-radius: var(--radio); padding: 0 14px; background: var(--blanco);
}
input[type="text"], input[type="email"], input[type="url"] { height: 52px; }
textarea { padding: 12px 14px; line-height: 1.5; resize: vertical; min-height: 120px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: 16px; line-height: 1.45; }
.check input { width: 24px; height: 24px; margin: 0; flex-shrink: 0; accent-color: var(--azul); }
.form-nota { font-size: 15px; color: var(--gris); }
/* Móvil: intro, formulario, revisión (en ese orden). Escritorio: intro+revisión | formulario */
.hero-form { display: flex; flex-direction: column; gap: 32px; }
.hero-form__intro { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 920px) {
  .hero-form {
    display: grid; grid-template-columns: minmax(0,1fr) 520px; column-gap: 80px; row-gap: 0;
    grid-template-areas: "intro form" "revision form"; align-items: start;
  }
  .hero-form__intro { grid-area: intro; padding-top: 12px; gap: 28px; }
  .hero-form .formulario { grid-area: form; }
  .hero-form .revision { grid-area: revision; }
}

/* Lista "lo que revisamos" */
.revision { display: flex; flex-direction: column; }
.revision h2 { padding-bottom: 14px; }
.revision__fila { padding: 14px 0; border-top: 1px solid var(--linea); }
.revision__fila:last-child { border-bottom: 1px solid var(--linea); }
@media (min-width: 920px) {
  .revision { border-top: 2px solid var(--grafito); margin-top: 16px; }
  .revision h2 { border: 0; padding: 22px 0 8px; }
  .revision__fila { display: flex; gap: 20px; }
  .revision__fila:first-of-type { border-top: 0; }
  .revision__fila strong { width: 180px; flex-shrink: 0; }
}
.revision h3 { font-weight: 700; font-size: 20px; }

/* ---- Guías: listado ---- */
.guias-cab { display: flex; flex-direction: column; gap: 22px; }
@media (min-width: 920px) { .guias-cab { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 64px; } .guias-cab__texto { max-width: 820px; } }
.temas { display: flex; gap: 12px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 22px; font-size: 16px; text-decoration: none; border: 1.5px solid var(--gris-borde); color: var(--grafito); }
.chip--activo { background: var(--grafito); color: #fff; border-color: var(--grafito); font-weight: 600; }
.destacada { display: flex; flex-direction: column; gap: 20px; padding: 32px; background: var(--grafito); border-radius: var(--radio-g); text-decoration: none; color: var(--yeso); }
@media (min-width: 920px) { .destacada { flex-direction: row; gap: 64px; padding: 56px; } .destacada__cuerpo { flex: 1.2; } .destacada__meta { flex: 0.8; border-left: 1px solid var(--linea-oscura); padding-left: 40px; justify-content: flex-end; } }
.destacada__cuerpo { display: flex; flex-direction: column; gap: 16px; }
.destacada__meta { display: flex; flex-direction: column; gap: 10px; font-size: 16px; color: var(--sobre-oscuro); }
.destacada h2 { color: #fff; }
.lista-guias { display: flex; flex-direction: column; }
.lista-guias__titulo { font-weight: 700; font-size: clamp(1.5rem,1.2rem+1vw,2rem); padding-bottom: 20px; border-bottom: 2px solid var(--grafito); }
.guia-fila { display: flex; flex-direction: column; gap: 10px; padding: 28px 0; border-bottom: 1px solid var(--linea); text-decoration: none; color: var(--grafito); }
.guia-fila__cat { font-size: 17px; color: var(--gris); }
.guia-fila__fecha { font-size: 16px; color: var(--gris); }
@media (min-width: 920px) {
  .guia-fila { display: grid; grid-template-columns: 220px minmax(0,1fr) 160px; gap: 40px; align-items: baseline; padding: 36px 0; }
  .guia-fila__fecha { text-align: right; }
}
.guia-fila h3 { font-weight: 700; font-size: clamp(1.5rem,1.2rem+1.2vw,2rem); letter-spacing: -0.5px; }

/* ---- Guía: artículo ---- */
.migas { display: flex; gap: 8px; flex-wrap: wrap; font-size: 15px; color: var(--gris); }
@media (min-width: 920px) { .migas { font-size: 16px; } }
.migas a { color: var(--gris); }
.articulo-cab { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 920px) { .articulo-cab { gap: 28px; max-width: 1060px; } }
.autor { display: flex; align-items: center; gap: 12px; }
.autor__foto { width: 44px; height: 44px; border-radius: 50%; background: var(--placeholder); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--gris-2); flex-shrink: 0; }
@media (min-width: 920px) { .autor__foto { width: 52px; height: 52px; } }
.autor__datos { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
@media (min-width: 920px) { .autor__datos { font-size: 16px; } }

.articulo-grid { display: flex; flex-direction: column; gap: 40px; }
@media (min-width: 920px) { .articulo-grid { flex-direction: row; gap: 96px; align-items: flex-start; } .articulo { width: 760px; flex-shrink: 0; } .articulo-aside { flex: 1; } }
.articulo { display: flex; flex-direction: column; gap: 22px; font-size: 18px; line-height: 1.65; }
@media (min-width: 920px) { .articulo { gap: 28px; font-size: 20px; line-height: 1.7; } }
.articulo h2 { font-weight: 700; font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem); line-height: 1.1; letter-spacing: -0.5px; margin-top: 8px; }
.articulo h3 { font-weight: 700; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }
.articulo ol, .articulo ul { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 16px; }
.respuesta-corta { background: var(--blanco); border: 1px solid var(--linea); border-top: 4px solid var(--azul); border-radius: var(--radio); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.respuesta-corta h2 { font-size: 20px; margin-top: 0; letter-spacing: 0; }
.caja-oscura { background: var(--grafito); color: var(--yeso); border-radius: var(--radio); padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; }
.caja-oscura h2 { color: #fff; font-size: 20px; margin-top: 0; letter-spacing: 0; }
.caja-azul { background: var(--azul); color: #fff; border-radius: var(--radio-g); padding: 24px 20px; display: flex; flex-direction: column; gap: 14px; }
.caja-azul h2 { color: #fff; margin-top: 0; }
.toc-movil { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); }
.toc-movil summary { padding: 0 18px; min-height: 52px; display: flex; align-items: center; font-weight: 600; font-size: 17px; cursor: pointer; }
.toc-movil__lista { padding: 0 18px 16px; display: flex; flex-direction: column; gap: 4px; font-size: 17px; }
.toc-movil__lista a { padding: 8px 0; }
.aside-toc { display: none; }
@media (min-width: 920px) {
  .toc-movil { display: none; }
  .aside-toc { display: flex; flex-direction: column; gap: 14px; padding-bottom: 28px; border-bottom: 1px solid var(--linea); }
  .articulo-aside { display: flex; flex-direction: column; gap: 32px; }
}
.ficha-autor { display: flex; gap: 14px; align-items: flex-start; padding-top: 22px; border-top: 2px solid var(--grafito); margin-top: 12px; }
.ficha-autor__foto { width: 56px; height: 56px; border-radius: 50%; background: var(--placeholder); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--gris-2); }
@media (min-width: 920px) { .ficha-autor__foto { width: 72px; height: 72px; } }
.ficha-autor__nombre { font-family: var(--tipo-titular); font-weight: 700; font-size: 20px; }
.relacionadas { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 920px) { .relacionadas { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 56px; } }
.relacionada { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 2px solid var(--grafito); text-decoration: none; color: var(--grafito); }
@media (min-width: 920px) { .relacionada { gap: 10px; padding-top: 24px; } }
.relacionada h3 { font-weight: 700; font-size: clamp(1.375rem,1.1rem+1vw,1.875rem); line-height: 1.15; }

/* ---- Pie ---- */
.pie { background: var(--grafito); color: var(--sobre-oscuro); }
.pie__inner { display: flex; flex-direction: column; gap: 20px; padding-top: 44px; padding-bottom: 44px; }
@media (min-width: 920px) { .pie__inner { flex-direction: row; justify-content: space-between; gap: 48px; padding-top: 64px; padding-bottom: 64px; } }
.pie__marca { display: flex; flex-direction: column; gap: 24px; max-width: 520px; }
/* Wordmark blanco del pie (identidad provisional). Tamaño aumentado un 70%
   (2026-09-20): de 23/26px a 39/44px (móvil/escritorio). Ancho renderizado
   ~173/195px (ratio SVG 4.44), por encima del mínimo de guía 146×33px.
   width:auto conserva el ratio del SVG. El gap de .pie__marca subió a 24px
   para mantener el espacio libre ≥ media altura del logo (guía de uso). */
.pie__logo-img { display: block; height: 39px; width: auto; }
@media (min-width: 920px) { .pie__logo-img { height: 44px; } }
.pie__cols { display: flex; flex-direction: column; gap: 0; }
@media (min-width: 920px) { .pie__cols { flex-direction: row; gap: 72px; } }
.pie__col { display: flex; flex-direction: column; }
.pie a, .pie span { color: var(--yeso); text-decoration: none; font-size: 16px; }
.pie a { padding: 10px 0; min-height: 44px; display: flex; align-items: center; }
@media (min-width: 920px) { .pie a { padding: 6px 0; min-height: 0; } .pie__col { gap: 12px; } }
.pie a:hover { color: #fff; text-decoration: underline; }

/* Aviso destacado dentro del cuerpo (marcadores de borrador) */
.marcador {
  background: #FBF3E8; border: 1px dashed #C9A24B; border-radius: var(--radio);
  padding: 14px 16px; font-size: 15px; color: #7A5B12;
}

/* Utilidades de espaciado puntuales */
.mt-8 { margin-top: 8px; }
.enlace-simple { color: var(--azul); font-weight: 600; }

/* =================================================================
   Hero de la PORTADA a DOS MITADES (Encargo hero-split). Solo la home
   (.hero--portada). Solo CSS, sin JS, sin background-image. La foto es
   un <img> (elemento LCP), opacidad 1.
   Izquierda: Yeso limpio + texto (contraste holgado, sin foto detrás).
   Derecha: foto del carpintero a sangre, con fundido por máscara hacia
   la izquierda; la tarjeta de chat encima, solapando la frontera; la
   nota "Ejemplo ilustrativo" va DENTRO de la tarjeta. Móvil (<1024px):
   una columna, foto en banda superior con el chat solapando su borde
   inferior y el texto debajo. Unidades svh. h1 ≥46px en 1366×768.
   ================================================================= */

/* --- Dos mitades: altura del hero y centrado vertical --- */
.hero--portada {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 0;
  height: calc(100svh - 89px); max-height: 860px;
}
.hero__izq { display: flex; align-items: center;
  padding: clamp(16px,2.2svh,36px) clamp(24px,3vw,56px) clamp(16px,2.2svh,36px) var(--pad-x); }
.hero__texto { display: flex; flex-direction: column; gap: clamp(10px,1.6svh,20px); max-width: 620px; }
.hero--portada .t-h1 { font-size: clamp(4rem, 10svh, 7.5rem); line-height: 1; letter-spacing: -0.02em; }
.hero--portada .t-intro { font-size: clamp(1.0625rem, 2svh, 1.25rem); }
.hero--portada .hero__acciones { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: clamp(16px,1.6vw,28px); margin-top: clamp(2px,0.8svh,8px); }

/* Mitad derecha: foto a sangre con fundido por máscara + chat encima */
.hero__der { position: relative; display: flex; align-items: center; justify-content: flex-start; }
.hero__foto-panel { position: absolute; inset: 0; z-index: 0; display: block; margin: 0; }
.hero__foto-img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 28%;
  filter: saturate(0.9) contrast(0.95); opacity: 1; display: block;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%);
          mask-image: linear-gradient(to right, transparent 0%, #000 22%); }
/* Respaldo si el navegador no soporta máscara: fundido con capa Yeso */
@supports not ((-webkit-mask-image: linear-gradient(#000,#000)) or (mask-image: linear-gradient(#000,#000))) {
  .hero__der::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to right, var(--yeso) 0%, rgba(238,240,236,0) 22%); }
}
/* Tarjeta de chat sobre la foto, solapando la frontera; escala con la altura */
.hero--portada .chat { position: relative; z-index: 2; width: 100%; max-width: 400px;
  margin-left: clamp(-72px, -4vw, -32px);
  padding: clamp(14px,2.2svh,24px); gap: clamp(8px,1.4svh,14px); }
.hero--portada .chat__burbuja { font-size: clamp(0.8rem,1.8svh,1rem); padding: clamp(8px,1.4svh,12px) clamp(11px,1.9svh,16px); }
.hero--portada .chat__intro { font-size: clamp(0.8rem,1.8svh,1rem); }
.hero--portada .chat__fila { font-size: clamp(0.85rem,1.9svh,1.0625rem); padding: clamp(7px,1.3svh,10px) clamp(10px,1.8svh,14px); }
.hero--portada .chat__elegido { font-size: clamp(1.05rem,2.6svh,1.4375rem); padding: clamp(9px,1.6svh,14px); }
.hero--portada .chat__stroke-svg { width: clamp(150px,26svh,220px); height: auto; }
/* Nota "Ejemplo ilustrativo" DENTRO de la tarjeta, al pie, en pequeño */
.hero--portada .chat__nota { margin-top: clamp(6px,1svh,12px); margin-bottom: 0; font-size: 12.5px; line-height: 1.35; color: var(--gris); }

@media (min-width: 1280px) { .hero--portada .chat { margin-left: -72px; } }

/* --- Móvil / tablet (<1024px): una columna, foto en banda superior --- */
@media (max-width: 1023px) {
  .hero--portada { display: flex; flex-direction: column; height: auto; max-height: none; }
  .hero__der { order: 0; display: block; position: relative; }
  .hero__foto-panel { position: relative; inset: auto; width: 100%; height: 38svh; }
  .hero__foto-img { object-position: 60% 22%; -webkit-mask-image: none; mask-image: none; }
  .hero--portada .chat { margin: -52px auto 0; max-width: min(360px, calc(100% - 32px)); }
  .hero__izq { order: 1; align-items: stretch; padding: clamp(28px,6vw,40px) var(--pad-x) clamp(32px,7vw,44px); }
  .hero__texto { max-width: none; gap: 18px; }
  .hero--portada .hero__acciones { flex-direction: column; align-items: stretch; gap: 16px; }
  /* En móvil el titular usa un tamaño base (≥34px) */
  .hero--portada .t-h1 { font-size: clamp(2.6rem, 8.5vw, 3.4rem); }
}

/* ── Consentimiento de cookies (Encargo analítica GA4, 2026-09-18) ── */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:1000;max-width:560px;margin:0 auto;background:var(--blanco);color:var(--grafito);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:0 10px 34px rgba(30,35,40,.20);padding:20px 22px}
.cookie-banner__texto{font-size:.95rem;line-height:1.5;margin:0 0 14px}
.cookie-banner__acciones{display:flex;gap:10px}
.cookie-banner__acciones .btn{flex:1 1 0;min-height:46px}
.cookie-banner__no{background:var(--grafito);color:#fff}
.cookie-banner__no:hover{background:#000}
.pie__config-cookies{display:block;background:none;border:0;padding:0;margin-top:8px;color:inherit;font:inherit;text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion: no-preference){.cookie-banner{animation:cc-in .25s ease-out}@keyframes cc-in{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}}

/* ── Planes de precios (Encargo pagina-precios, 2026-09-20) ──
   Clases propias; no altera ninguna regla existente. Tres columnas en
   escritorio, una en movil; la del medio se destaca (borde azul + elevacion). */
.planes { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 920px) { .planes { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; align-items: start; } }
.plan { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-g); padding: 28px 24px; display: flex; flex-direction: column; gap: 20px; }
.plan--destacado { border: 2px solid var(--azul); box-shadow: 0 18px 40px rgba(29,63,191,0.14); }
@media (min-width: 920px) { .plan--destacado { transform: translateY(-16px); } }
.plan__cab { display: flex; flex-direction: column; gap: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--linea); }
.plan__nombre { font-family: var(--tipo-titular); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.5px; }
.plan__precio { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan__cifra { font-family: var(--tipo-titular); font-weight: 800; font-size: 2.25rem; line-height: 1; letter-spacing: -1px; color: var(--grafito); }
.plan--destacado .plan__cifra { color: var(--azul); }
.plan__periodo { font-size: 1rem; color: var(--gris); }
.plan__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.plan__lista li { position: relative; padding-left: 30px; font-size: 1.0625rem; line-height: 1.5; }
.plan__lista li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D3FBF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 L10 18.5 L20 6'/%3E%3C/svg%3E"); }
.planes-nota { display: flex; flex-direction: column; gap: 18px; max-width: 760px; margin-top: 36px; }
.planes-nota .destacado-precio { font-weight: 700; }

/* ---- Guías del motor de blog (plantilla de guía v1, 2026-10-03) ----
   Imagen destacada 16:9, tabla comparativa, fuentes, nota de IA y fecha de
   actualización. Plantilla: docs/plantillas/guia.html. */
.articulo-imagen { margin: 0; aspect-ratio: 16 / 9; border-radius: var(--radio-g); overflow: hidden; background: var(--placeholder); }
.articulo-imagen img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 920px) { .articulo-imagen { max-width: 760px; } }
.articulo .tabla { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.articulo table { width: 100%; border-collapse: collapse; background: var(--blanco); border: 1px solid var(--linea); font-size: 16px; line-height: 1.5; }
@media (min-width: 920px) { .articulo table { font-size: 17px; } }
.articulo th, .articulo td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--linea); }
.articulo th { font-weight: 700; background: var(--azul-suave); }
.articulo tr:last-child td { border-bottom: 0; }
.fuentes { font-size: 16px; line-height: 1.55; color: var(--gris-2); }
@media (min-width: 920px) { .fuentes { font-size: 17px; } }
.fuentes a { overflow-wrap: anywhere; }
.nota-ia { font-size: 15px; line-height: 1.5; color: var(--gris); }