/*
 * Tema claro de todo lo que no es el panel: páginas de venta, legales,
 * informativas, contenido (blog, tutoriales, ayuda, antu), acceso y cuenta
 * (login, registro, recuperar contraseña, verificar correo, bienvenida) y
 * soporte del usuario. El panel sigue con dashboard.css y su propio tema.
 *
 * Comparte con la portada (home.css) los tokens, la tipografía y el lenguaje
 * visual: superficies limpias, cifras y muestras del producto en vez de adornos,
 * turquesa para la marca y lo confirmado, rojo apagado para los gastos. La
 * portada conserva su hoja propia porque se imprime en el HTML; estas páginas
 * enlazan esta, que el navegador guarda entre una y otra. Un test compara los
 * tokens de las dos hojas para que no se separen.
 *
 * Todo cuelga de body.publico: el panel, que sigue con finantu.css y
 * dashboard.css, no cambia. landing.css ya no existe.
 */

/* ============================================================
   Tokens
   ============================================================ */
body.publico{
  --paper:#ffffff;
  --paper-2:#f4f5f2;
  --ink:#111816;
  --ink-2:#3b4542;
  --ink-3:#5a6561;
  --rule:#e1e4df;
  --brand:#00d4aa;
  --brand-ink:#0f766e;
  --brand-wash:#e6f7f3;
  --expense:#b42318;
  --ink-bg:#0f1715;
  --on-ink:#eef2f1;
  --on-ink-2:#a7b3af;
  --rule-ink:rgba(238,242,241,.14);
  --fs-small:.875rem;
  --fs-body:1.0625rem;
  --fs-h3:1.1875rem;
  --fs-h2:clamp(1.625rem,1.15rem + 1.7vw,2.5rem);
  --fs-h1:clamp(2.125rem,1.25rem + 2vw,3rem);
  --lh-body:1.55;
  --gutter:24px;
  --space-section:clamp(64px,8vw,104px);
  --radius-control:8px;
  --radius-sm:10px;
  --radius-surface:18px;
  --shadow-soft:0 1px 2px rgba(17,24,22,.05),0 12px 32px -14px rgba(17,24,22,.12);
  --ease:cubic-bezier(.2,.7,.2,1);
  --sans:'Open Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Variables que lee el CSS crítico del encabezado (site-header.php). */
  --site-header-bg:#ffffff;
  --border:#e1e4df;
  --border-2:#c9cec8;
  --surface:#ffffff;
  --text:#111816;
  --text-2:#3b4542;
  --text-3:#5a6561;
  --green:#00d4aa;

  /* Alias claros de las demás variables de finantu.css. Los estilos propios
     de las páginas migradas (cuenta, soporte, bienvenida) todavía las nombran;
     así se leen en claro sin reescribir cada regla. */
  --bg:#f4f5f2;
  --surface-2:#f4f5f2;
  --surface-3:#eceee9;
  --green-dim:#e6f7f3;
  --green-glow:rgba(0,212,170,.18);
  --red:#b42318;
  --red-dim:#fef3f2;
  --red-glow:rgba(180,35,24,.14);
  --blue:#2563eb;
  --blue-dim:#eff4ff;
  --amber:#a16207;
  --amber-dim:#fefce8;
  --purple:#7c3aed;
  --purple-dim:#f5f0ff;
  --mono:var(--sans);
  --radius:14px;
  --radius-xs:7px;

  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  color-scheme:light;
  interpolate-size:allow-keywords;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:var(--lh-body);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Reposición mínima. Sin finantu.css estas páginas no heredan ninguna. */
body.publico *,
body.publico *::before,
body.publico *::after{box-sizing:border-box}
body.publico :where(h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote){margin:0}
body.publico :where(ul,ol){padding:0;list-style:none}
body.publico img{max-width:100%}
body.publico a{color:inherit}
body.publico .pub-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.publico .is-expense{color:var(--expense)}
body.publico .is-income,
body.publico .is-ok{color:var(--brand-ink)}
body.publico :is(a,button,summary,input,select,textarea):focus-visible{outline:2px solid var(--brand-ink);outline-offset:3px;border-radius:2px}

/* ============================================================
   Encabezado
   El CSS crítico del partial define la estructura; aquí va el tema claro.
   ============================================================ */
body.publico .fin-site-header{
  background:#ffffff;
  border-bottom:1px solid var(--rule);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body.publico .fin-site-nav a{
  color:var(--ink-2);
  font-size:1rem;
  font-weight:500;
  text-decoration:underline;
  text-decoration-color:transparent;
  text-decoration-thickness:1.5px;
  text-underline-offset:10px;
  transition:color .2s ease,text-decoration-color .2s ease,text-underline-offset .25s var(--ease);
}
body.publico .fin-site-nav a:hover,
body.publico .fin-site-nav a.is-active,
body.publico .fin-site-nav a[aria-current="page"]{color:var(--ink);text-decoration-color:var(--brand);text-underline-offset:6px}
body.publico .fin-site-cta{
  color:#04241f;
  background:var(--brand);
  border-color:var(--brand);
  border-radius:var(--radius-control);
  box-shadow:none;
  font-size:.875rem;
  font-weight:700;
  transform:none;
  transition:background-color .2s ease;
}
body.publico .fin-site-cta:hover{background:#00bf99;box-shadow:none;transform:none}
body.publico .fin-site-link-muted,
body.publico .fin-site-user{font-family:var(--sans);font-size:.8125rem;color:var(--ink-3)}
body.publico .fin-site-icon-btn{background:#ffffff;border-color:var(--rule);color:var(--ink-2)}
/* Menú en teléfono: el CSS crítico lo envuelve; aquí se guarda tras el botón. */
@media(max-width:860px){
  body.publico .fin-site-header-inner .fin-site-nav{
    display:none;
    order:3;
    width:100%;
    flex-basis:100%;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    padding:6px 0 12px;
    border-top:1px solid var(--rule);
  }
  body.publico .fin-site-header-inner .fin-site-nav-state:checked ~ .fin-site-nav{display:flex}
  body.publico .fin-site-header-inner .fin-site-nav a{width:100%;min-height:46px;margin:0;padding:0 2px}
}

/* ============================================================
   Secciones y títulos
   ============================================================ */
body.publico .pub-section{padding:var(--space-section) var(--gutter);background:var(--paper)}
body.publico .pub-band{background:var(--paper-2)}
body.publico .pub-dark{background:var(--ink-bg);color:var(--on-ink)}
body.publico .pub-inner{width:min(100%,1160px);margin:0 auto}
body.publico .pub-heading{max-width:680px;margin:0 0 48px}
body.publico .pub-h2{
  color:var(--ink);
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.015em;
  text-wrap:balance;
}
body.publico .pub-sub{max-width:580px;margin-top:16px;color:var(--ink-2);font-size:var(--fs-body);line-height:var(--lh-body);text-wrap:pretty}
body.publico .pub-dark .pub-h2{color:var(--on-ink)}
body.publico .pub-dark .pub-sub{color:var(--on-ink-2)}
body.publico .pub-prose{max-width:720px;color:var(--ink-2);font-size:1.125rem;line-height:1.6}
body.publico .pub-prose+.pub-prose{margin-top:16px}

/* ============================================================
   Botones y enlaces
   ============================================================ */
body.publico .pub-btn,
body.publico .ln-hero-btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 24px;
  color:#04241f;
  background:var(--brand);
  border:1px solid var(--brand);
  border-radius:var(--radius-control);
  font-size:1rem;
  font-weight:700;
  text-decoration:none;
  transition:background-color .2s ease,border-color .2s ease,transform .15s ease;
}
body.publico .pub-btn:hover,
body.publico .ln-hero-btn-primary:hover{background:#00bf99;border-color:#00bf99}
body.publico .pub-btn:active{transform:scale(.98)}
body.publico .pub-btn-outline,
body.publico .ln-hero-btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 22px;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--ink);
  border-radius:var(--radius-control);
  font-size:1rem;
  font-weight:700;
  text-decoration:none;
  transition:background-color .2s ease,color .2s ease;
}
body.publico .pub-btn-outline:hover,
body.publico .ln-hero-btn-ghost:hover{color:#ffffff;background:var(--ink)}
body.publico .pub-link{
  color:var(--ink);
  font-weight:700;
  text-decoration:underline;
  text-decoration-color:var(--brand);
  text-decoration-thickness:1.5px;
  text-underline-offset:5px;
  transition:color .2s ease,text-underline-offset .25s var(--ease);
}
body.publico .pub-link:hover{color:var(--brand-ink);text-underline-offset:8px}
body.publico .pub-dark .pub-link{color:var(--on-ink)}
body.publico .pub-dark .pub-link:hover{color:var(--brand)}
body.publico .pub-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:32px}
body.publico .pub-note{color:var(--ink-3);font-size:var(--fs-small);line-height:1.45}
body.publico .pub-dark .pub-note{color:var(--on-ink-2)}

/* ============================================================
   Hero de página: texto a la izquierda y una muestra del producto
   ============================================================ */
body.publico .pub-hero{padding:clamp(40px,6vw,88px) var(--gutter) var(--space-section)}
body.publico .pub-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,72px);
  align-items:center;
}
body.publico .pub-title{
  color:var(--ink);
  font-size:var(--fs-h1);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.015em;
  text-wrap:balance;
}
body.publico .pub-lead{max-width:560px;margin-top:24px;color:var(--ink-2);font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.5;text-wrap:pretty}
body.publico .pub-lead strong{color:var(--ink);font-weight:700}
body.publico .pub-hero-visual{position:relative;min-width:0;display:flex;justify-content:center}
body.publico .pub-hero-visual figcaption{position:absolute;right:0;bottom:-28px;color:var(--ink-3);font-size:.8125rem}

/* ============================================================
   Muestras del producto
   Conversación de WhatsApp y hoja del panel, a escala y con datos de ejemplo.
   ============================================================ */
body.publico .pub-chat{
  width:100%;
  max-width:340px;
  padding:7px;
  background:#ffffff;
  border:1.5px solid #2a3431;
  border-radius:28px;
  box-shadow:var(--shadow-soft);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
body.publico .pub-chat-head{display:flex;align-items:center;gap:8px;padding:10px 10px 8px}
body.publico .pub-chat-head img{width:30px;height:30px;border-radius:50%;object-fit:contain;background:var(--brand-wash)}
body.publico .pub-chat-head span{display:flex;flex-direction:column;line-height:1.2}
body.publico .pub-chat-head b{color:#111b21;font-size:.875rem;font-weight:700}
body.publico .pub-chat-head small{color:#667781;font-size:.75rem}
body.publico .pub-chat-body{display:flex;flex-direction:column;gap:8px;padding:14px 10px 16px;background:#efeae2;border-radius:0 0 22px 22px}
body.publico .pub-chat-day{align-self:center;padding:2px 10px;background:#ffffff;border-radius:6px;color:#54656f;font-size:.75rem;font-weight:500}
body.publico .pub-msg{max-width:88%;padding:7px 9px 5px;color:#111b21;font-size:.875rem;line-height:1.35}
body.publico .pub-msg.is-out{align-self:flex-end;background:#d9fdd3;border-radius:8px 0 8px 8px}
body.publico .pub-msg.is-in{align-self:flex-start;background:#ffffff;border-radius:0 8px 8px 8px}
body.publico .pub-msg time{display:block;margin-top:2px;color:#667781;font-size:.6875rem;text-align:right}

body.publico .pub-sheet{
  width:100%;
  max-width:420px;
  padding:20px 22px 12px;
  background:#ffffff;
  border:1px solid var(--rule);
  border-radius:var(--radius-surface);
  box-shadow:var(--shadow-soft);
}
body.publico .pub-sheet-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-bottom:10px}
body.publico .pub-sheet-head b{color:var(--ink);font-size:1rem;font-weight:700}
body.publico .pub-sheet-head small{color:var(--ink-3);font-size:.8125rem}
body.publico .pub-sheet dl>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--rule);font-size:.9375rem}
body.publico .pub-sheet dt{color:var(--ink-3)}
body.publico .pub-sheet dd{color:var(--ink);font-weight:700;text-align:right}
body.publico .pub-sheet .is-total dd{font-size:1.375rem;line-height:1.2}
body.publico .pub-sheet .is-amount dd{font-size:1.25rem}
body.publico .pub-sheet-status{display:flex;align-items:center;gap:8px;margin:4px 0 8px;color:var(--brand-ink);font-size:var(--fs-small);font-weight:700}
body.publico .pub-sheet-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand)}

/* ============================================================
   Pasos numerados con línea de avance
   ============================================================ */
body.publico .pub-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
body.publico .pub-steps::before{
  content:"";
  position:absolute;
  top:19px;
  left:20px;
  right:calc((100% - 60px) / 4 - 20px);
  height:2px;
  background:var(--brand);
}
body.publico .pub-steps li{position:relative;display:flex;flex-direction:column;min-width:0}
body.publico .pub-step-num{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  margin-bottom:20px;
  background:var(--ink);
  border-radius:50%;
  outline:6px solid var(--paper);
  color:#ffffff;
  font-weight:700;
}
body.publico .pub-band .pub-step-num{outline-color:var(--paper-2)}
body.publico .pub-steps li:last-child .pub-step-num{background:var(--brand);color:#04241f}
body.publico .pub-steps h3{color:var(--ink);font-size:var(--fs-h3);font-weight:700;line-height:1.3}
body.publico .pub-steps p{margin-top:6px;color:var(--ink-2);font-size:1rem;line-height:1.5}

/* ============================================================
   Recorrido de un mensaje: lista a la izquierda, muestra a la derecha
   ============================================================ */
body.publico .pub-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,88px);align-items:center}
body.publico .pub-flow{counter-reset:paso}
body.publico .pub-flow li{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  gap:4px 16px;
  padding:20px 0;
  border-top:1px solid var(--rule);
  counter-increment:paso;
}
body.publico .pub-flow li:last-child{border-bottom:1px solid var(--rule)}
body.publico .pub-flow li::before{
  content:counter(paso);
  grid-row:span 2;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  background:var(--brand-wash);
  border-radius:50%;
  color:var(--brand-ink);
  font-weight:700;
}
body.publico .pub-flow h3{color:var(--ink);font-size:var(--fs-h3);font-weight:700;line-height:1.3}
body.publico .pub-flow p{color:var(--ink-2);font-size:1rem;line-height:1.5}

/* ============================================================
   Puntos en dos columnas (claro y oscuro)
   ============================================================ */
body.publico .pub-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
body.publico .pub-points li{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:22px 24px;
  background:#ffffff;
  border:1px solid var(--rule);
  border-radius:var(--radius-surface);
  transition:border-color .3s ease;
}
body.publico .pub-points li:hover{border-color:var(--border-2)}
body.publico .pub-points b{display:flex;align-items:baseline;gap:10px;color:var(--ink);font-size:1.0625rem;font-weight:700;line-height:1.4}
/* Alineado a la primera línea: si el título ocupa dos, el punto no baja al medio. */
body.publico .pub-points b::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--brand);transform:translateY(-.1em)}
body.publico .pub-points span{color:var(--ink-2);font-size:1rem;line-height:1.5}
body.publico .pub-dark .pub-points li{background:rgba(238,242,241,.04);border-color:var(--rule-ink)}
body.publico .pub-dark .pub-points li:hover{border-color:rgba(238,242,241,.28)}
body.publico .pub-dark .pub-points b{color:var(--on-ink)}
body.publico .pub-dark .pub-points span{color:var(--on-ink-2)}

/* ============================================================
   Cierre
   ============================================================ */
body.publico .pub-cta{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px 48px}
body.publico .pub-cta .pub-h2{max-width:680px}
body.publico .pub-cta .pub-actions{margin-top:0}

/* ============================================================
   Pie
   ============================================================ */
body.publico .ln-footer{width:100%;padding:48px 30px 22px;background:var(--paper-2)}
body.publico .ln-footer-inner{
  display:grid;
  grid-template-columns:minmax(240px,1.45fr) repeat(3,minmax(170px,.75fr));
  gap:36px;
  align-items:start;
  width:min(100%,1160px);
  margin:0 auto 32px;
}
body.publico .ln-logo{display:flex;align-items:center;gap:8px}
body.publico .ln-footer .ln-logo-img{width:132px!important;max-width:132px!important;max-height:38px!important}
body.publico .ln-footer-tagline{max-width:280px;margin-top:10px;color:var(--ink-3);font-size:.875rem;line-height:1.55}
body.publico .ln-footer-col{display:flex;flex-direction:column;gap:8px}
body.publico .ln-footer-title{margin-bottom:4px;color:var(--ink-3);font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
body.publico .ln-footer-col a{color:var(--ink-2);font-size:.875rem;font-weight:500;line-height:1.45;text-decoration:none;transition:color .2s ease}
body.publico .ln-footer-col a:hover{color:var(--brand-ink)}
body.publico .ln-footer-copy{
  width:min(100%,1160px);
  margin:0 auto;
  padding-top:20px;
  border-top:1px solid var(--rule);
  color:var(--ink-3);
  font-size:.8125rem;
  text-align:center;
}

/* ============================================================
   Movimiento
   Solo entra la muestra del hero, con opacidad y desplazamiento. El texto no
   se anima: es lo primero que se pinta y no debe esperar a nada.
   ============================================================ */
@keyframes pub-rise{from{opacity:0;transform:translateY(18px)}}
@media (prefers-reduced-motion:no-preference){
  body.publico .pub-hero-visual>:first-child{animation:pub-rise .9s .15s var(--ease) backwards}
}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:1080px){
  body.publico .pub-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px}
  body.publico .pub-steps::before{display:none}
}
@media(max-width:980px){
  body.publico .ln-footer-inner{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:900px){
  body.publico .pub-hero-grid,
  body.publico .pub-split{grid-template-columns:1fr}
  body.publico .pub-hero-visual{justify-content:flex-start}
  body.publico .pub-hero-visual figcaption{position:static;margin-top:12px}
  body.publico .pub-hero-visual{flex-direction:column}
}
@media(max-width:768px){
  body.publico{--fs-body:1rem;--gutter:20px;--space-section:64px}
  body.publico .pub-hero{padding:32px var(--gutter) var(--space-section)}
  body.publico .pub-heading{margin-bottom:32px}
  body.publico .pub-lead{margin-top:16px}
  body.publico .pub-actions{flex-direction:column;align-items:flex-start;gap:10px;margin-top:24px}
  body.publico .pub-steps,
  body.publico .pub-points{grid-template-columns:1fr}
  body.publico .pub-cta{flex-direction:column;align-items:flex-start}
}
@media(max-width:640px){
  body.publico .ln-footer{padding:40px 20px 20px}
  body.publico .ln-footer-inner{grid-template-columns:1fr;gap:24px}
}
/* Área táctil de 44 px en los enlaces del pie, sin agrandar el texto. */
@media(max-width:860px),(pointer:coarse){
  body.publico .ln-footer-col{gap:14px}
  body.publico .ln-footer-col a{position:relative;display:inline-block}
  body.publico .ln-footer-col a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
}

/* ============================================================
   Documentos legales
   Privacidad, términos, eliminación de datos, condiciones de Plan Hogar,
   documentos legales y aceptación. Texto largo: columna angosta, cuerpo de
   lectura y enlaces subrayados.
   ============================================================ */
body.publico .legal-hero{max-width:calc(820px + 2 * var(--gutter));margin:0 auto;padding:clamp(40px,6vw,72px) var(--gutter) 28px}
body.publico .legal-kicker{margin-bottom:12px;color:var(--brand-ink);font-size:var(--fs-small);font-weight:700}
body.publico .legal-title{color:var(--ink);font-size:var(--fs-h1);font-weight:700;line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
body.publico .legal-sub{max-width:680px;margin-top:16px;color:var(--ink-2);font-size:1.125rem;line-height:1.55;text-wrap:pretty}
body.publico .legal-card{width:min(820px,calc(100% - 2 * var(--gutter)));margin:0 auto clamp(56px,8vw,96px);padding:clamp(24px,4vw,44px);background:#ffffff;border:1px solid var(--rule);border-radius:var(--radius-surface)}
body.publico .legal-card h2{margin:40px 0 12px;color:var(--ink);font-size:1.375rem;font-weight:700;line-height:1.3;letter-spacing:-.01em}
body.publico .legal-card h2:first-child{margin-top:0}
body.publico .legal-card h3{margin:24px 0 8px;color:var(--ink);font-size:1.0625rem;font-weight:700;line-height:1.35}
body.publico .legal-card p,
body.publico .legal-card li{color:var(--ink-2);font-size:1rem;line-height:1.7}
body.publico .legal-card p+p{margin-top:12px}
body.publico .legal-card ul,
body.publico .legal-card ol{margin:12px 0 16px;padding-left:22px}
body.publico .legal-card li+li{margin-top:8px}
body.publico .legal-card li::marker{color:var(--brand-ink)}
body.publico .legal-card strong{color:var(--ink);font-weight:700}
body.publico .legal-card a{color:var(--brand-ink);text-decoration:underline;text-decoration-color:rgba(15,118,110,.35);text-underline-offset:3px}
body.publico .legal-card a:hover{text-decoration-color:currentColor}
body.publico .legal-card table{width:100%;margin:16px 0;border-collapse:collapse;font-size:.9375rem}
body.publico .legal-card th,
body.publico .legal-card td{padding:10px 12px;border-bottom:1px solid var(--rule);color:var(--ink-2);text-align:left;vertical-align:top}
body.publico .legal-card th{background:var(--paper-2);color:var(--ink);font-weight:700}
body.publico .legal-note{margin:20px 0;padding:14px 16px;background:var(--brand-wash);border-left:3px solid var(--brand);border-radius:var(--radius-sm);color:var(--ink-2);font-size:.9375rem;line-height:1.6}
body.publico .legal-updated{margin-bottom:8px;color:var(--ink-3);font-size:var(--fs-small)}

/* Índice de documentos (/legal) */
body.publico .legal-card .legal-list{display:grid;gap:14px;margin:0;padding:0;list-style:none}
body.publico .legal-card .legal-list>li+li{margin-top:0}
body.publico .legal-card .legal-item{margin:0;padding:20px 22px;background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--radius-sm)}
body.publico .legal-item h2{margin:0 0 6px;font-size:1.125rem}
body.publico .legal-item p{margin:0 0 10px;font-size:.9375rem;line-height:1.55}
body.publico .legal-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:10px;color:var(--ink-3);font-size:.8125rem}
body.publico .legal-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border:1px solid var(--rule);border-radius:6px;font-size:.75rem;font-weight:600}
body.publico .legal-badge.ok{background:var(--brand-wash);border-color:rgba(15,118,110,.3);color:var(--brand-ink)}
body.publico .legal-badge.req{background:#fefce8;border-color:rgba(202,138,4,.4);color:#a16207}
body.publico .legal-card .legal-open{color:var(--brand-ink);font-size:.9375rem;font-weight:700;text-decoration:none}
body.publico .legal-card .legal-open:hover{text-decoration:underline}

/* ============================================================
   Páginas informativas
   Sobre nosotros, seguridad y privacidad, Plan Hogar.
   ============================================================ */
body.publico .info-hero{max-width:1160px;margin:0 auto;padding:clamp(48px,7vw,96px) var(--gutter) 32px}
body.publico .info-kicker{margin-bottom:14px;color:var(--brand-ink);font-size:var(--fs-small);font-weight:700}
body.publico .info-title{max-width:900px;color:var(--ink);font-size:var(--fs-h1);font-weight:700;line-height:1.06;letter-spacing:-.015em;text-wrap:balance}
body.publico .info-sub{max-width:720px;margin-top:20px;color:var(--ink-2);font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.55;text-wrap:pretty}
body.publico .info-hero .info-sub+p{margin-top:18px;color:var(--ink);font-size:1.125rem}
body.publico .info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1160px;margin:0 auto;padding:16px var(--gutter) clamp(48px,6vw,72px)}
body.publico .info-card{padding:24px;background:#ffffff;border:1px solid var(--rule);border-radius:var(--radius-surface);transition:border-color .3s ease}
body.publico .info-card:hover{border-color:var(--border-2)}
body.publico .info-card h2,
body.publico .info-card h3{margin-bottom:8px;color:var(--ink);font-size:var(--fs-h3);font-weight:700;line-height:1.3}
body.publico .info-card p,
body.publico .info-card li{color:var(--ink-2);font-size:1rem;line-height:1.55}
body.publico .info-card ul{margin:0;padding-left:18px}
body.publico .info-wide{grid-column:span 2;background:var(--paper-2)}
body.publico .info-section{max-width:1160px;margin:0 auto;padding:clamp(40px,6vw,72px) var(--gutter)}
body.publico .info-section h2{margin-bottom:16px;color:var(--ink);font-size:var(--fs-h2);font-weight:700;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
body.publico .info-section p{max-width:760px;color:var(--ink-2);font-size:var(--fs-body);line-height:1.6}
body.publico .info-section p+p{margin-top:12px}
body.publico .info-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px}
body.publico .info-item{padding:20px 22px;background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--radius-surface)}
body.publico .info-item strong{display:flex;align-items:baseline;gap:10px;margin-bottom:6px;color:var(--ink);font-weight:700}
body.publico .info-item strong::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--brand);transform:translateY(-.1em)}
body.publico .info-item span{display:block;color:var(--ink-2);font-size:1rem;line-height:1.5}
body.publico .info-cta{width:min(1112px,calc(100% - 2 * var(--gutter)));margin:clamp(16px,3vw,32px) auto clamp(56px,8vw,96px);padding:clamp(36px,5vw,64px) clamp(24px,5vw,56px);background:var(--ink-bg);border-radius:var(--radius-surface);color:var(--on-ink)}
body.publico .info-cta h2{max-width:680px;margin-bottom:12px;color:var(--on-ink);font-size:var(--fs-h2);font-weight:700;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
body.publico .info-cta p{max-width:640px;margin-bottom:28px;color:var(--on-ink-2);line-height:1.6}
body.publico .info-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
body.publico .info-cta .pub-btn-outline,
body.publico .info-cta .ln-hero-btn-ghost{border-color:rgba(238,242,241,.5);color:var(--on-ink)}
body.publico .info-cta .pub-btn-outline:hover,
body.publico .info-cta .ln-hero-btn-ghost:hover{background:var(--on-ink);color:var(--ink)}

@media(max-width:860px){
  body.publico .info-grid,
  body.publico .info-list{grid-template-columns:1fr}
  body.publico .info-wide{grid-column:span 1}
}
@media(max-width:640px){
  body.publico .legal-card{padding:22px 18px}
  body.publico .legal-card h2{margin-top:32px}
}