/* /assets/css/sitio.css
   Lo que comparten TODAS las páginas de cuidatusclientes.mx: tipografías,
   colores, botones, la navegación fija, el menú móvil y el pie (Figma "Landing
   profesional", 29-sep-2026). Vive aquí y no copiado en cada página para que la
   portada, el blog, preguntas y los legales no se desincronicen.
   La portada carga esto y encima sus estilos propios. */
@font-face { font-family:'Montserrat'; font-weight:800; font-style:normal; font-display:swap; src:url('/assets/fonts/Montserrat_w800.woff2') format('woff2'), url('/assets/fonts/Montserrat_w800.ttf') format('truetype'); }
@font-face { font-family:'Montserrat'; font-weight:700; font-style:normal; font-display:swap; src:url('/assets/fonts/Montserrat_w700.woff2') format('woff2'), url('/assets/fonts/Montserrat_w700.ttf') format('truetype'); }
@font-face { font-family:'GoogleSans'; font-weight:400; font-style:normal; font-display:swap; src:url('/assets/fonts/GoogleSans_w400.woff2') format('woff2'), url('/assets/fonts/GoogleSans_w400.ttf') format('truetype'); }
@font-face { font-family:'GoogleSans'; font-weight:700; font-style:normal; font-display:swap; src:url('/assets/fonts/GoogleSans_w700.woff2') format('woff2'), url('/assets/fonts/GoogleSans_w700.ttf') format('truetype'); }
:root {
  --verde-noche:#003320; --verde:#00925d; --lima:#cedd7a; --lima-hover:#d8e68c;
  --crema:#fafaf8; --blanco:#fff; --manila:#f0e5cb;
  --texto:#282727; --gris:#66766d; --salvia:#c3d8cb; --raya:#dce4dc;
  --ancho:1200px; --canal:120px; --nav:88px;
  --titulo:'Montserrat',sans-serif; --cuerpo:'GoogleSans',sans-serif;
}
.envoltura { width:100%; max-width:calc(var(--ancho) + 2 * var(--canal)); margin:0 auto; padding:0 var(--canal); }
.boton { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:54px; padding:16px 24px; border:none; border-radius:100px; font-family:var(--cuerpo); font-weight:700; font-size:15px; line-height:22px; text-decoration:none; cursor:pointer; white-space:nowrap; transition:background .15s ease, transform .15s ease; }
.boton:active { transform:translateY(1px); }
.boton-lima { background:var(--lima); color:var(--verde-noche); }
.boton-lima:hover { background:var(--lima-hover); }
.boton-verde { background:var(--verde); color:#fff; }
.boton-verde:hover { background:#007a4e; }
.boton-blanco { background:#fff; color:var(--verde-noche); }
.boton-ancho { width:100%; }
.nav { position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid transparent; transition:border-color .2s ease, box-shadow .2s ease; }
.nav.con-sombra { border-bottom-color:var(--raya); box-shadow:0 6px 24px rgba(0,51,32,.06); }
.nav .envoltura { height:var(--nav); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav-logo img { height:62px; width:auto; }
.nav-enlaces { display:flex; align-items:center; gap:32px; }
.nav-enlaces a { font-size:15px; line-height:23px; color:var(--verde-noche); text-decoration:none; }
.nav-enlaces a:hover { color:var(--verde); }
.nav-acciones { display:flex; align-items:center; gap:20px; }
.nav-entrar { font-size:15px; color:var(--verde-noche); text-decoration:none; }
.nav-entrar:hover { color:var(--verde); }
.hamburguesa { display:none; background:none; border:none; width:44px; height:44px; border-radius:10px; cursor:pointer; color:var(--verde-noche); }
.hamburguesa svg { width:26px; height:26px; margin:auto; }
.menu-movil { position:fixed; inset:0; z-index:200; background:#fff; display:none; flex-direction:column; padding:20px 24px 32px; }
.menu-movil.abierto { display:flex; }
.menu-movil-cabeza { display:flex; align-items:center; justify-content:space-between; margin-bottom:32px; }
.menu-movil-cabeza img { height:52px; width:auto; }
.menu-movil-cerrar { background:none; border:none; font-size:28px; width:44px; height:44px; cursor:pointer; color:var(--verde-noche); }
.menu-movil nav { display:flex; flex-direction:column; }
.menu-movil nav a { font-family:var(--titulo); font-weight:700; font-size:24px; line-height:32px; color:var(--verde-noche); text-decoration:none; padding:14px 0; border-bottom:1px solid var(--raya); }
.menu-movil .boton { margin-top:auto; }
.pie { padding:32px 0; }
.pie .envoltura { display:flex; flex-direction:column; gap:24px; }
.pie-logo img { height:62px; width:auto; }
.pie-fila { display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.pie-fila p { color:var(--gris); font-size:15px; line-height:23px; }
.pie-enlaces { display:flex; flex-wrap:wrap; gap:8px 28px; }
.pie-enlaces a { color:var(--verde-noche); font-size:15px; line-height:23px; text-decoration:none; }
.pie-enlaces a:hover { color:var(--verde); }
.pie-redes { display:flex; gap:16px; }
.pie-redes a { color:var(--verde-noche); display:flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:50%; }
.pie-redes a:hover { background:#fff; color:var(--verde); }

/* Los componentes compartidos miden con border-box aunque la página no lo haga. */
.nav, .nav *, .menu-movil, .menu-movil *, .pie, .pie * { box-sizing:border-box; }
/* Las páginas viejas le daban estilo al elemento <nav> a secas; aquí adentro no. */
.nav nav, .menu-movil nav, .pie nav { padding:0; border:0; background:none; }
.pie p { margin:0; }
.nav a, .menu-movil a, .pie a { text-decoration:none; }

@media (max-width: 1180px){
  :root { --canal:48px; }
  .nav-enlaces { gap:22px; }
}
@media (max-width: 860px){
  :root { --canal:20px; --nav:72px; }
  .nav-enlaces, .nav-acciones .nav-entrar, .nav-acciones .boton { display:none; }
  .hamburguesa { display:flex; }
  .nav-logo img { height:50px; }
  .pie-fila { flex-direction:column; align-items:flex-start; }
}

/* ── Páginas de contenido (blog, preguntas, legales) ──
   Traían Fraunces + DM Sans y otra paleta. Se remapean sus variables a la del
   sitio y los títulos pasan a Montserrat, el cuerpo a Google Sans. */
body.pagina {
  --g:var(--verde); --gl:#eef4d6; --dk:var(--verde-noche); --gr:var(--gris);
  --bg:var(--crema); --bdr:var(--raya); --meta:var(--gris);
  font-family:var(--cuerpo); color:var(--texto); background:var(--crema);
  -webkit-font-smoothing:antialiased;
}
body.pagina h1, body.pagina h2, body.pagina h3, body.pagina h4 {
  font-family:var(--titulo) !important; font-weight:700 !important;
  letter-spacing:-.02em; color:var(--verde-noche);
}
body.pagina h1 { font-weight:800 !important; }
body.pagina em, body.pagina i { font-family:inherit; }
body.pagina .legal-indice { top:calc(var(--nav) + 16px); }

/* El botón del menú se ve igual aunque la página tenga su propio .boton
   (/contrata trae uno cuadrado con sombra). */
.nav .boton, .menu-movil .boton {
  border-radius:100px; padding:16px 24px; min-height:54px; font-size:15px;
  line-height:22px; box-shadow:none; transform:none;
}
@media (max-width: 860px){ .nav .nav-acciones .boton { display:none; } }
.nav .boton-verde:hover, .menu-movil .boton-verde:hover { background:#007a4e; }

/* Las tablas de los artículos y los legales son más anchas que un celular:
   se deslizan de lado dentro de su espacio en vez de empujar la página. */
@media (max-width: 860px){
  body.pagina table { display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* ── Aviso de cookies (/assets/js/cookies.js) ──────────────────────────────
   Abajo a la izquierda: el botón del chat vive abajo a la derecha. */
.cookies { position:fixed; left:16px; bottom:16px; z-index:70; width:calc(100% - 32px); max-width:440px; box-sizing:border-box; background:var(--blanco); color:var(--texto); border:1px solid var(--raya); border-radius:16px; box-shadow:0 12px 32px rgba(0,51,32,.18); padding:20px; font-family:var(--cuerpo); font-size:14px; line-height:1.5; }
.cookies h2 { font-family:var(--titulo); font-size:16px; line-height:1.3; color:var(--verde-noche); margin:0 0 8px; }
.cookies p { margin:0 0 16px; }
.cookies a { color:var(--verde); text-decoration:underline; }
.cookies-botones { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.cookies button { font:inherit; font-weight:700; border-radius:100px; padding:10px 18px; cursor:pointer; border:1px solid var(--verde-noche); background:var(--blanco); color:var(--verde-noche); }
.cookies button.principal { background:var(--verde-noche); color:var(--blanco); }
.cookies button.liga { border-color:transparent; background:none; text-decoration:underline; padding:10px 6px; }
.cookies button:focus-visible, .cookies input:focus-visible, .pie-cookies:focus-visible { outline:2px solid var(--verde); outline-offset:2px; }
.cookies-opcion { display:flex; gap:16px; align-items:flex-start; justify-content:space-between; padding:12px 0; border-top:1px solid var(--raya); cursor:pointer; }
.cookies-opcion strong { display:block; color:var(--verde-noche); }
.cookies-opcion span span { color:var(--gris); font-size:13px; }
.cookies-opcion input { width:20px; height:20px; margin:2px 0 0; flex:none; accent-color:var(--verde); cursor:pointer; }
.cookies-opcion input:disabled { cursor:default; }
.cookies-opcion:last-of-type { margin-bottom:12px; }
.pie-enlaces .pie-cookies { font:inherit; font-size:15px; line-height:23px; color:var(--verde-noche); background:none; border:0; padding:0; cursor:pointer; }
.pie-enlaces .pie-cookies:hover { color:var(--verde); }