/* ═══════════════════════════════════════════════════════════════════
   PÁGINAS SUELTAS — hoja compartida
   Conecta Senior S.A.S. | NIT 901882682-5

   Las páginas del sitio que NO son la aplicación: la de producto
   (/manilla-adulto-mayor) y la legal (/politica-datos). Comparten
   barra, pie, botones y ritmo de secciones, así que comparten hoja:
   con una por página, la barra de una se queda atrás cuando se
   retoca la otra.

   ── POR QUÉ NO REUTILIZA index.css ──────────────────────────────────
   index.css son 43 KB con los estilos de TODO el sitio, y sus clases
   dan por hecho la maquinaria de la página única: .page, .subp, el
   menú que se abre y se cierra por JavaScript, el banner fijo. Una
   página suelta que reutilizara esas clases arrastraría también
   index.js —14 000 líneas de aplicación— solo para pintar un texto.
   Misma decisión que ya tomaron comprar.css y kids.css.

   ── LA PALETA ───────────────────────────────────────────────────────
   Es la de la marca, sin cambios: fondo oscuro y dorado. Kids invirtió
   la paleta porque su público es otro; esta página le habla al mismo
   visitante que la home y tiene que parecer la misma casa.

   Los tamaños de base son los de index.css —1 rem de cuerpo, algo más
   grandes de lo habitual— porque una parte de quien lee esto es el
   propio adulto mayor.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --gold:#C9A535;--gold-l:#E8C96D;--gold-dim:rgba(201,165,53,.12);
  --dark:#181B21;--dmid:#1E2229;--dcard:#252931;
  --dborder:rgba(201,165,53,.18);
  --txt:#F0EAD6;--muted:#9A9080;--soft:#C8BEA8;
  --nav:66px;--r:3px;
  /* Color semántico para lo urgente. Es aparte del dorado de marca a
     propósito: el acento de marca dice «esto es nuestro» y este dice
     «esto no puede esperar». Si fueran el mismo, en una guía sobre una
     persona perdida no se distinguiría lo decorativo de lo que hay que
     hacer ya. */
  --alerta:#E08B6E;--alerta-tenue:rgba(224,139,110,.10);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--dark);color:var(--txt);
  font-family:'Raleway',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:300;font-size:1rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
/* `height:auto` NO es decorativo: la imagen declara width y height en el
   HTML —hace falta para que el navegador reserve su sitio y la página no
   dé el salto al cargar— y sin esto `max-width:100%` reduce el ancho
   pero deja el alto clavado en el número del atributo. La foto sale
   estirada. Es el mismo estirón que dio el logo de Kids. */
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-l);text-decoration:underline}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
em{font-style:italic;color:var(--gold-l)}

.m-wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem)}

/* ── Navegación ──────────────────────────────────────────────── */
.m-nav{
  position:sticky;top:0;z-index:50;height:var(--nav);
  display:flex;align-items:center;gap:1rem;
  padding:0 clamp(1rem,4vw,2.5rem);
  background:rgba(24,27,33,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--dborder);
}
.m-brand{display:flex;align-items:center;gap:.6rem}
.m-brand:hover{text-decoration:none}
.m-brand img{height:38px;width:auto;object-fit:contain}
.m-brand-txt{display:flex;flex-direction:column;line-height:1.05}
.m-brand-txt .b1{font-size:.68rem;letter-spacing:.26em;color:var(--soft);font-weight:600}
.m-brand-txt .b2{font-size:.68rem;letter-spacing:.26em;color:var(--gold);font-weight:700}
.m-nav-sp{flex:1}
.m-nav-secs{display:flex;align-items:center;gap:clamp(.9rem,2.5vw,1.5rem)}
.m-nav-link{font-size:.86rem;color:var(--soft);letter-spacing:.02em;white-space:nowrap}
.m-nav-link:hover{color:var(--gold);text-decoration:none}

/* ── LA BARRA EN EL MÓVIL ─────────────────────────────────────────
   Antes estos enlaces eran `display:none` bajo 760 px. En una página
   de doce pantallas de alto eso dejaba las preguntas frecuentes
   inalcanzables salvo bajando entera —y el móvil es de donde viene
   casi todo el tráfico—.

   Ahora bajan a una segunda fila que se desliza de lado si no caben.
   Deslizar es preferible a un menú de hamburguesa: se ven sin pulsar
   nada, y con tres enlaces un menú desplegable es más trabajo para
   quien lo usa que la propia lista. */
@media(max-width:760px){
  .m-nav{flex-wrap:wrap;height:auto;min-height:var(--nav);padding-top:.7rem;padding-bottom:.4rem}
  .m-nav-secs{
    order:3;flex-basis:100%;
    margin-top:.55rem;padding-bottom:.45rem;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .m-nav-secs::-webkit-scrollbar{display:none}
  .m-nav-link{font-size:.82rem}
}

/* Con la barra pegada arriba, un salto a #preguntas deja el titular
   DEBAJO de ella. `scroll-margin-top` es lo que hace que el enlace
   caiga donde la persona espera y no dos líneas más abajo. Se reserva
   el alto de la barra —mayor en el móvil, que lleva dos filas— más un
   respiro. */
section[id],div[id]{scroll-margin-top:calc(var(--nav) + 1.2rem)}
@media(max-width:760px){
  section[id],div[id]{scroll-margin-top:calc(var(--nav) + 3.2rem)}
}

/* ── Botones ─────────────────────────────────────────────────── */
.m-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Raleway',sans-serif;font-size:.78rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:.72rem 1.5rem;border-radius:var(--r);border:1px solid transparent;
  transition:background .2s,color .2s,border-color .2s;white-space:nowrap;
}
.m-btn:hover{text-decoration:none}
.m-btn-p{background:var(--gold);color:var(--dark);border-color:var(--gold)}
.m-btn-p:hover{background:var(--gold-l);color:var(--dark)}
.m-btn-s{background:transparent;color:var(--gold);border-color:var(--gold)}
.m-btn-s:hover{background:var(--gold-dim);color:var(--gold-l)}
.m-btn-lg{font-size:.82rem;padding:.92rem 1.9rem}

/* ── Ritmo de secciones ──────────────────────────────────────── */
.m-sec{padding:clamp(3rem,7vw,5.5rem) 0}
.m-sec-alt{background:var(--dmid)}
.m-lbl{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.9rem;
}
.m-h1{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
  font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.1;letter-spacing:-.01em;
  text-wrap:balance;
}
.m-h2{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
  font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.18;text-wrap:balance;
}
.m-h3{font-size:1.05rem;font-weight:600;color:var(--txt);letter-spacing:.01em}
.m-lead{font-size:1.08rem;color:var(--soft);max-width:60ch;margin-top:1.1rem}
.m-p{color:var(--soft);max-width:66ch;margin-top:1rem}
.m-center{text-align:center;max-width:44rem;margin:0 auto clamp(2rem,4vw,3rem)}
.m-center .m-p{margin-left:auto;margin-right:auto}

/* ── Portada ─────────────────────────────────────────────────── */
.m-hero{padding:clamp(3rem,7vw,6rem) 0;border-bottom:1px solid var(--dborder)}
.m-hero-grid{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:center}
@media(min-width:900px){.m-hero-grid{grid-template-columns:1.05fr .95fr}}
.m-hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.m-hero-img img{border-radius:var(--r);border:1px solid var(--dborder)}
.m-hero-nota{margin-top:1.3rem;font-size:.88rem;color:var(--muted);max-width:52ch}

/* ── Pasos ───────────────────────────────────────────────────── */
.m-pasos{display:grid;gap:1.4rem;counter-reset:paso}
@media(min-width:820px){.m-pasos{grid-template-columns:repeat(3,1fr)}}
.m-paso{
  background:var(--dcard);border:1px solid var(--dborder);border-radius:var(--r);
  padding:1.6rem 1.5rem;
}
.m-paso-n{
  font-size:.78rem;font-weight:700;letter-spacing:.18em;color:var(--gold);
  display:block;margin-bottom:.7rem;font-variant-numeric:tabular-nums;
}
.m-paso h3{margin-bottom:.55rem}
.m-paso p{color:var(--soft);font-size:.95rem}

/* ── Listas ──────────────────────────────────────────────────── */
.m-lista{list-style:none;display:grid;gap:1rem;max-width:70ch}
.m-lista li{position:relative;padding-left:1.6rem;color:var(--soft)}
.m-lista li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:.42rem;height:.42rem;border-radius:50%;background:var(--gold);
}
.m-lista b,.m-lista strong{color:var(--txt);font-weight:600}

.m-casos{display:grid;gap:1.1rem}
@media(min-width:760px){.m-casos{grid-template-columns:repeat(2,1fr)}}
.m-caso{
  background:var(--dcard);border:1px solid var(--dborder);border-radius:var(--r);
  padding:1.3rem 1.4rem;
}
.m-caso b{display:block;color:var(--txt);font-weight:600;margin-bottom:.3rem}
.m-caso span{color:var(--soft);font-size:.95rem}

/* ── Planes ──────────────────────────────────────────────────── */
.m-planes{display:grid;gap:1.4rem}
@media(min-width:820px){.m-planes{grid-template-columns:repeat(3,1fr)}}
.m-plan{
  background:var(--dcard);border:1px solid var(--dborder);border-radius:var(--r);
  padding:1.7rem 1.5rem;display:flex;flex-direction:column;gap:.6rem;
}
.m-plan-precio{
  display:inline-block;align-self:flex-start;
  background:var(--gold-dim);border:1px solid var(--dborder);border-radius:2px;
  padding:.28rem .8rem;font-size:.82rem;font-weight:600;color:var(--gold-l);
  font-variant-numeric:tabular-nums;
}
.m-plan h3{font-size:1.15rem;font-weight:600;color:var(--txt)}
.m-plan p{color:var(--soft);font-size:.95rem}
.m-plan-renov{font-size:.85rem;color:var(--muted)}
.m-planes-nota{margin-top:1.6rem;font-size:.88rem;color:var(--muted);max-width:70ch}
.m-planes-cta{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.8rem}

/* ── Privacidad ──────────────────────────────────────────────── */
.m-priv{
  background:var(--dcard);border:1px solid var(--dborder);
  border-left:3px solid var(--gold);border-radius:0 var(--r) var(--r) 0;
  padding:1.4rem 1.6rem;max-width:74ch;color:var(--soft);
}
.m-priv strong{color:var(--txt)}

/* ── Preguntas frecuentes ────────────────────────────────────── */
/* <details> y no un acordeón por JavaScript: el navegador ya sabe
   abrirlo y cerrarlo, se puede buscar dentro con Ctrl+F aunque esté
   cerrado, y —lo que importa aquí— la respuesta está en el HTML, que
   es la condición para poder marcarla como FAQPage sin engañar a
   nadie. Un acordeón que pinte la respuesta con JS deja el marcado
   prometiendo un texto que la persona no ve. */
.m-faqs{max-width:74ch;margin:0 auto}
.m-faq{border-bottom:1px solid var(--dborder)}
.m-faq[open]{background:rgba(201,165,53,.04)}
.m-faq summary{
  cursor:pointer;list-style:none;padding:1.15rem 2.4rem 1.15rem .2rem;
  font-weight:600;color:var(--txt);position:relative;
}
.m-faq summary::-webkit-details-marker{display:none}
.m-faq summary::after{
  content:"+";position:absolute;right:.4rem;top:50%;transform:translateY(-50%);
  color:var(--gold);font-size:1.3rem;font-weight:400;line-height:1;
}
.m-faq[open] summary::after{content:"–"}
.m-faq summary:hover{color:var(--gold-l)}
.m-faq p{padding:0 2.4rem 1.25rem .2rem;color:var(--soft);margin:0}

/* ── Cierre ──────────────────────────────────────────────────── */
.m-cierre{text-align:center;max-width:46rem;margin:0 auto}
.m-cierre .m-p{margin-left:auto;margin-right:auto}
.m-cierre-cta{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:2rem}

/* ── Migas ───────────────────────────────────────────────────── */
.m-migas{font-size:.8rem;color:var(--muted);padding-top:1.4rem}
.m-migas a{color:var(--muted)}
.m-migas a:hover{color:var(--gold)}
.m-migas span{padding:0 .4rem;opacity:.6}

/* ── Pie ─────────────────────────────────────────────────────── */
.m-foot{
  background:var(--dmid);border-top:1px solid var(--dborder);
  padding:2.6rem 0;text-align:center;color:var(--muted);font-size:.86rem;
}
.m-foot-links{display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:center;margin-bottom:1rem}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

/* ═══════════════════════════════════════════════════════════════════
   PÁGINA LEGAL — /politica-datos
   ═══════════════════════════════════════════════════════════════════ */

/* Un texto legal se lee cuando se puede leer. La medida se aprieta a
   66 caracteres y el cuerpo sube a 1.05 rem: es la página que abre
   alguien mayor justo antes de marcar una casilla de consentimiento. */
.m-legal{max-width:70ch;margin:0 auto}

.m-doc{
  background:var(--dcard);border:1px solid var(--dborder);border-radius:var(--r);
  padding:clamp(1.4rem,3.5vw,2.2rem);margin-top:1.6rem;
}
.m-doc h2{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
  font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.2;color:var(--txt);
  margin-bottom:.5rem;text-wrap:balance;
}
.m-doc-sello{
  display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;
  font-size:.78rem;color:var(--muted);letter-spacing:.02em;
  padding-bottom:1.1rem;margin-bottom:1.3rem;border-bottom:1px solid var(--dborder);
  font-variant-numeric:tabular-nums;
}
.m-doc-sello b{color:var(--gold);font-weight:600}
.m-doc p{color:var(--soft);font-size:1.05rem;line-height:1.75}
.m-doc p + p{margin-top:1.1rem}
/* El rótulo con el que abre cada párrafo —DATOS RECOLECTADOS,
   FINALIDADES, DERECHOS ARCO— es lo que hace navegable un muro de
   texto legal: se busca con la vista, no leyendo desde arriba. */
.m-doc p b{color:var(--txt);font-weight:600;letter-spacing:.03em}

.m-legal-intro{color:var(--soft);max-width:66ch;margin-top:1.1rem}
.m-legal-canal{
  background:var(--dcard);border:1px solid var(--dborder);
  border-left:3px solid var(--gold);border-radius:0 var(--r) var(--r) 0;
  padding:1.2rem 1.4rem;margin-top:1.8rem;color:var(--soft);
}
.m-legal-canal h3{color:var(--txt);font-size:1rem;font-weight:600;margin-bottom:.5rem}
.m-legal-canal ul{list-style:none;margin-top:.7rem;display:grid;gap:.35rem}
.m-legal-canal li{font-size:.95rem}
.m-legal-canal li b{color:var(--txt);font-weight:600}

/* Si la consulta a la base falla, la página NO se queda en blanco: dice
   que no pudo cargarse y da el correo. Una página legal vacía es peor
   que un enlace roto, porque parece que la política no existe. */
.m-legal-fallo{
  background:var(--dcard);border:1px solid var(--dborder);
  border-left:3px solid var(--gold);border-radius:0 var(--r) var(--r) 0;
  padding:1.3rem 1.5rem;margin-top:1.6rem;color:var(--soft);
}


/* ═══════════════════════════════════════════════════════════════════
   GUÍAS — /guias/…
   ═══════════════════════════════════════════════════════════════════ */

.m-art{max-width:68ch;margin:0 auto}
.m-art .m-p,.m-art .m-lista{max-width:none}

/* La entradilla hace de resumen: quien llega desde el buscador decide
   en esa primera pantalla si la página responde a lo que preguntó. */
.m-art-lead{font-size:1.12rem;color:var(--soft);margin-top:1.2rem;line-height:1.7}

.m-art h2{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
  font-size:clamp(1.6rem,3.6vw,2.1rem);line-height:1.2;
  margin-top:2.8rem;text-wrap:balance;
}
.m-art h3{font-size:1.05rem;font-weight:600;margin-top:1.8rem;color:var(--txt)}

/* Lo que no puede esperar. Marcado en un color propio y no en el
   dorado de marca: en una guía sobre una persona perdida, el lector
   está buscando qué hacer AHORA, no leyendo de arriba abajo. */
.m-urgente{
  background:var(--alerta-tenue);border:1px solid var(--alerta);
  border-left-width:3px;border-radius:0 var(--r) var(--r) 0;
  padding:1.2rem 1.4rem;margin-top:1.6rem;color:var(--soft);
}
.m-urgente h3{margin-top:0;color:var(--alerta);font-size:1rem;letter-spacing:.01em}
.m-urgente p{margin-top:.5rem}
.m-urgente b{color:var(--txt)}

/* Una cifra que sostiene un argumento va con su fuente pegada. Sin
   fuente es una afirmación; con fuente es un dato. */
.m-dato{
  display:flex;flex-direction:column;gap:.3rem;
  border-left:3px solid var(--gold);padding:.2rem 0 .2rem 1.2rem;
  margin-top:1.6rem;
}
.m-dato-n{
  font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(2rem,5vw,2.8rem);
  line-height:1;color:var(--gold-l);font-variant-numeric:tabular-nums;
}
.m-dato-t{color:var(--soft);max-width:56ch}
.m-dato-f{font-size:.8rem;color:var(--muted)}

/* Pasos numerados, para las guías que sí son una secuencia. */
.m-secuencia{list-style:none;counter-reset:paso;display:flex;flex-direction:column;gap:1.5rem;margin-top:1.4rem}
.m-secuencia > li{counter-increment:paso;display:grid;grid-template-columns:2rem 1fr;gap:0 1rem}
.m-secuencia > li::before{
  content:counter(paso,decimal-leading-zero);
  font-size:.8rem;font-weight:700;color:var(--gold);letter-spacing:.06em;
  padding-top:.32rem;font-variant-numeric:tabular-nums;
}
.m-secuencia h3{grid-column:2;margin:0;font-size:1.02rem}
.m-secuencia p,.m-secuencia ul{grid-column:2;margin-top:.4rem}
@media(max-width:34rem){
  .m-secuencia > li{grid-template-columns:1fr}
  .m-secuencia h3,.m-secuencia p,.m-secuencia ul{grid-column:1}
}

/* El bloque que lleva al producto. Va una sola vez y al final: en una
   guía, interrumpir la lectura con una oferta a mitad es lo que hace
   que la persona se vaya. */
.m-puente{
  background:var(--dcard);border:1px solid var(--dborder);
  border-radius:var(--r);padding:1.6rem 1.7rem;margin-top:3rem;
}
.m-puente h3{margin:0 0 .5rem;font-size:1.1rem;font-weight:600;color:var(--txt)}
.m-puente p{color:var(--soft)}
.m-puente .m-btn{margin-top:1.1rem}

.m-fuentes{
  margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--dborder);
  font-size:.88rem;color:var(--muted);
}
.m-fuentes h3{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:.7rem}
.m-fuentes ul{list-style:none;display:flex;flex-direction:column;gap:.45rem}
.m-fuentes li{padding-left:1.1rem;position:relative}
.m-fuentes li::before{content:"—";position:absolute;left:0;color:var(--gold)}


/* ── Seguir leyendo / índice de guías ───────────────────────────────
   Una guía que no lleva a ninguna parte es un callejón: quien llega
   desde el buscador, la lee y le sirve, no tiene forma de saber que
   hay más. Estas tarjetas son la salida, y son también lo que hace
   que las cuatro se sostengan entre sí en vez de depender cada una de
   un solo enlace desde la página de producto. */
.m-sigue{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--dborder)}
.m-sigue h2{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
  font-size:1.5rem;margin:0 0 1.2rem;
}
.m-sigue-grid{display:grid;gap:1rem;margin-top:1.6rem}
@media(min-width:700px){.m-sigue-grid{grid-template-columns:repeat(2,1fr)}}

.m-sigue-card{
  display:flex;flex-direction:column;gap:.45rem;
  background:var(--dcard);border:1px solid var(--dborder);border-radius:var(--r);
  padding:1.3rem 1.4rem;color:inherit;
  transition:border-color .2s,background .2s;
}
.m-sigue-card:hover{border-color:var(--gold);background:rgba(201,165,53,.05);text-decoration:none}
.m-sigue-card:hover .m-sigue-t{color:var(--gold-l)}
.m-sigue-etq{
  font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);
}
.m-sigue-t{font-size:1.02rem;font-weight:600;color:var(--txt);line-height:1.3;transition:color .2s}
.m-sigue-g{font-size:.92rem;color:var(--soft);line-height:1.6}
.m-sigue-todas{margin-top:1.2rem;font-size:.92rem}

/* En el índice caben de tres en tres: son tarjetas de navegación, no
   un final de lectura. */
@media(min-width:980px){.m-sigue-grid-indice{grid-template-columns:repeat(2,1fr)}}