/* ============================================================
   Fundación Cuidados Paliativos · estilos compartidos
   ============================================================ */
:root{
  --teal:#2A6A73; --teal-dark:#1B4A52; --teal-ink:#153B42;
  --sage:#65B49E; --mint:#E9F4EE; --cream:#FBF5EA;
  --marigold:#F5B940; --marigold-dk:#E3A72E;
  --body:#3A4A4D; --soft:#68797C; --fine:#6E7B78; --line:#E3E9E6;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Mulish',-apple-system,sans-serif;color:var(--body);font-size:16px;line-height:1.6;background:#fff;-webkit-font-smoothing:antialiased;}
/* foco visible para navegación por teclado (nuestro público incluye personas mayores) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--marigold);outline-offset:2px;border-radius:4px;
}
/* height:auto es obligatorio: sin él, un <img> con atributos width/height
   conserva la altura del atributo cuando el CSS solo le fija el ancho, y sale
   estirado. Pasó con el retrato del fundador el 22 ago. Las reglas que sí
   fijan altura a propósito (.brand img, .foot-brand img) van después y ganan. */
img{display:block;max-width:100%;height:auto;}
a{color:inherit;}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px;}
.kicker{font-size:13.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:12px;}

.btn{white-space:nowrap;display:inline-block;background:var(--marigold);color:var(--teal-ink);font-family:'Mulish',sans-serif;font-weight:800;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;padding:15px 30px;border-radius:6px;border:none;cursor:pointer;text-decoration:none;text-align:center;}
.btn:hover{background:var(--marigold-dk);}
.btn.ghost{background:#fff;border:1.5px solid var(--teal);color:var(--teal);}
.btn.ghost:hover{background:var(--mint);}
.btn.ghost-inv{background:transparent;border:1.5px solid #fff;color:#fff;}
.btn.ghost-inv:hover{background:rgba(255,255,255,.12);}

/* ---------- announce (solo home) ---------- */
.announce{background:var(--teal-dark);color:#DFEDE6;font-size:13.5px;text-align:center;padding:10px 16px;}
.announce b{color:#fff;}
.announce a{color:var(--marigold);font-weight:700;text-decoration:none;}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line);}
.header-in{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px;}
.brand{flex:none;display:flex;align-items:center;gap:10px;text-decoration:none;}
.brand img{height:42px;width:auto;display:block;}
.brand-txt{line-height:1;}
.brand-txt .bt1{display:block;font-size:9.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin-bottom:3px;}
.brand-txt .bt2{display:block;font-size:16.5px;font-weight:900;letter-spacing:-.005em;text-transform:uppercase;color:var(--teal);line-height:1.05;}
@media(max-width:520px){
  .brand img{height:36px;}
  .brand-txt .bt1{font-size:8px;letter-spacing:.18em;margin-bottom:2px;}
  .brand-txt .bt2{font-size:13.5px;}
}
nav.main{display:flex;align-items:center;gap:26px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
nav.main a{text-decoration:none;color:var(--teal-ink);white-space:nowrap;}
nav.main a:hover,nav.main a.active{color:var(--teal);}
/* ---------- submenú del nav · 22 ago 2026 ----------
   Renta de equipo dejó de ser item de primer nivel y cuelga de Servicios.
   Abre con :hover Y con :focus-within — por eso NO necesita JS y funciona
   con teclado: al tabular al botón padre, que vive dentro de .has-sub, el
   submenú se hace visible y recién entonces sus enlaces entran al tab order.
   ⚠️ ACTUALIZADO 24 ago: el padre ya NO es un enlace. Antes era «Servicios» y
   apuntaba a servicios.html, lo que obligaba a que un hijo repitiera destino
   («Todos los servicios»). Ahora es la categoría «Cómo cuidamos» y sus dos
   hijos son las dos páginas reales. */
nav.main .has-sub{position:relative;display:flex;align-items:center;gap:5px;}
/* El padre del desplegable ya NO es un enlace: «Cómo cuidamos» es una
   categoría, no una página. Es un <button> y no un <span> por una razón
   concreta: el panel abre con :focus-within y un span NO recibe foco — con
   span se rompería el acceso por teclado. El botón no navega a ningún lado;
   solo existe para etiquetar y para ser enfocable.
   El font/letter-spacing van explícitos porque los botones no heredan la
   tipografía del nav por defecto. */
nav.main .sub-lbl{font-family:'Mulish',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink);
  background:none;border:none;padding:0;cursor:default;white-space:nowrap;}
nav.main .has-sub:hover .sub-lbl,nav.main .sub-lbl.active{color:var(--teal);}
nav.main .sub-caret{width:9px;height:9px;flex:none;stroke:currentColor;stroke-width:2.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;color:var(--teal-ink);transition:transform .2s ease,color .2s ease;}
nav.main .has-sub:hover .sub-caret,nav.main .has-sub:focus-within .sub-caret{transform:rotate(180deg);color:var(--teal);}
nav.main .submenu{position:absolute;top:100%;left:-14px;min-width:206px;background:#fff;
  border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(10,35,40,.13);
  padding:6px;margin-top:10px;opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:60;}
nav.main .has-sub:hover .submenu,nav.main .has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:none;}
nav.main .submenu a{display:block;padding:10px 12px;border-radius:7px;font-size:12.5px;}
nav.main .submenu a:hover,nav.main .submenu a.active{background:var(--mint);color:var(--teal-dark);}
/* puente invisible sobre los 10px de margen: sin él el puntero cruza el hueco
   entre el padre y el panel, pierde el hover y el menú se cierra en la cara */
nav.main .has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:12px;}
.nav-cta{display:flex;align-items:center;gap:12px;}
.btn-give{padding:11px 22px;font-size:12.5px;}
.btn-refer{padding:10px 20px;font-size:12.5px;background:var(--teal);border:1.5px solid var(--teal);color:#fff;}
.btn-refer:hover{background:var(--teal-dark);border-color:var(--teal-dark);}
.wa-mini{width:40px;height:40px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;flex:none;}
.wa-mini svg{width:22px;height:22px;fill:#fff;}
.lang-toggle{white-space:nowrap;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12px;font-weight:700;padding:7px 13px;cursor:pointer;color:var(--soft);font-family:'Mulish',sans-serif;}
.lang-toggle b{color:var(--teal);}

/* hamburguesa + menú móvil */
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;align-items:center;justify-content:center;flex:none;}
.burger svg{width:22px;height:22px;stroke:var(--teal-ink);stroke-width:2.2;fill:none;stroke-linecap:round;}
.burger svg .bar{transition:opacity .2s, transform .2s;transform-origin:center;}
/* ⚠️ La X ya NO se hace morfeando las tres barras. Se intentó dos veces
   (rotar, y rotar con scaleX) y siempre salía un aspa: las barras miden 16 de
   los 24 del viewBox y giran sobre el centro del view-box, así que las
   diagonales quedaban largas y desiguales a la vista.
   Ahora las barras se apagan y la X se dibuja con los pseudoelementos del
   BOTÓN: dos trazos idénticos de 17px cruzados a ±45° sobre el centro exacto.
   Es geometría, no aproximación — y no toca el SVG de ninguna de las 13
   páginas. */
.burger[aria-expanded="true"] .bar{opacity:0;}
.burger{position:relative;}
.burger[aria-expanded="true"]::before,
.burger[aria-expanded="true"]::after{
  content:"";position:absolute;left:50%;top:50%;width:17px;height:2.2px;
  background:var(--teal-ink);border-radius:2px;}
.burger[aria-expanded="true"]::before{transform:translate(-50%,-50%) rotate(45deg);}
.burger[aria-expanded="true"]::after{transform:translate(-50%,-50%) rotate(-45deg);}
.m-nav{display:none;background:#fff;border-top:1px solid var(--line);}
.m-nav.open{display:block;}
.m-nav a{display:block;padding:15px 24px;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink);text-decoration:none;border-bottom:1px solid var(--line);}
.m-nav a.active{color:var(--teal);}
/* en móvil el submenú NO es acordeón: es una lista plana con el hijo
   indentado. Menos piezas que se rompan y un toque menos para el usuario. */
.m-nav a.m-sub{padding-left:44px;font-size:13px;color:var(--soft);text-transform:none;letter-spacing:.02em;}
.m-nav a.m-sub::before{content:"└";position:absolute;margin-left:-19px;color:var(--line);}
.m-nav a.m-sub.active{color:var(--teal);}
/* rótulo de sección en el menú móvil: mismo lugar que ocupaba el enlace
   padre, pero sin ser enlace. Sus dos hijos van indentados debajo. */
.m-nav .m-lbl{display:block;padding:15px 24px 9px;font-size:14px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink);}
.m-nav .m-lbl.active{color:var(--teal);}
.m-nav .m-extra{display:flex;align-items:center;gap:12px;padding:16px 24px;}
.m-nav .m-refer{color:var(--teal);}
/* zona de aprieto: el menú tiene prioridad sobre el texto de la marca */
@media(max-width:1200px){
  .brand-txt{display:none;}
  nav.main{gap:20px;}
  .nav-cta{gap:8px;}
}
@media(max-width:1040px){
  nav.main{display:none;}
  .lang-toggle,.wa-mini,.btn-refer{display:none;}
  .m-nav .lang-toggle{display:inline-block;}
  /* ⚠️ El padding y el borde NO son de adorno: .wa-mini es un <a> dentro de
     .m-nav, así que hereda `.m-nav a{padding:15px 24px;border-bottom:1px}`.
     Con box-sizing:border-box, 48px de padding horizontal dentro de un círculo
     de 40px dejan el contenido en ancho CERO y el ícono de WhatsApp se
     aplasta hasta desaparecer. Solo se pisaba `display`, que no bastaba. */
  .m-nav .wa-mini{display:flex;padding:0;border-bottom:none;}
  .burger{display:flex;}
}

/* ---------- hero interior ---------- */
.page-hero{background:var(--teal-dark);color:#fff;padding:64px 0;}
.page-hero .kicker{color:var(--marigold);}
.page-hero h1{font-family:'Source Serif 4',serif;font-weight:500;font-size:clamp(30px,4vw,48px);line-height:1.15;max-width:24ch;margin-bottom:14px;}
.page-hero p{color:#CFE2DA;max-width:58ch;font-size:16.5px;}

/* ---------- formularios ---------- */
form{background:#fff;border-radius:14px;padding:32px;box-shadow:0 4px 24px rgba(10,35,40,.08);}
.frow{margin-bottom:16px;}
.frow label{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink);margin-bottom:7px;}
.frow input,.frow select,.frow textarea{width:100%;border:1.5px solid var(--line);border-radius:8px;padding:12px 14px;font-family:'Mulish',sans-serif;font-size:15px;color:var(--teal-ink);outline:none;background:#fff;}
.frow input:focus,.frow select:focus,.frow textarea:focus{border-color:var(--teal);}
.frow2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
form .btn{width:100%;font-size:14px;padding:16px;}
/* consentimiento de datos · lo agrega el track legal */
.consent{display:flex;gap:11px;align-items:flex-start;background:var(--mint);border-radius:10px;padding:14px 16px;margin-bottom:18px;}
.consent input[type="checkbox"]{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--teal);cursor:pointer;}
.consent label{display:block;margin:0;font-size:13.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--body);line-height:1.6;cursor:pointer;}
.consent a{color:var(--teal);font-weight:700;}
.form-fine{font-size:11.5px;color:var(--fine);text-align:center;margin-top:12px;line-height:1.5;}
.form-ok{display:none;margin-top:14px;background:var(--mint);border-radius:8px;padding:12px 14px;font-size:13px;color:var(--teal-dark);line-height:1.5;}
/* Variante de error (21 ago 2026): si el envío falla, el usuario SIEMPRE
   lo ve y tiene la ruta de WhatsApp. Nunca fallar en silencio. */
.form-ok.err{background:#FBEAE7;color:#8A3A2E;}
.form-ok.err a{color:#8A3A2E;font-weight:800;text-decoration:underline;}

/* ---------- footer unificado ---------- */
footer{background:var(--teal-dark);color:#B9D0C8;padding:64px 0 40px;font-size:14.5px;}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:44px;margin-bottom:48px;}
footer h4{color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;}
footer a{color:#B9D0C8;text-decoration:none;display:block;margin-bottom:9px;}
footer a:hover{color:#fff;}
.foot-brand img{height:60px;width:auto;margin-bottom:16px;}
/* enlaces legales · los agrega el track legal, cuidado al tocar el footer */
.foot-legal{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:24px;}
.foot-legal a{display:inline;margin:0;font-weight:700;}
.foot-legal a:hover{text-decoration:underline;}
.foot-note{border-top:1px solid rgba(255,255,255,.14);padding-top:22px;font-size:12px;color:#93B3A9;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}
@media(max-width:900px){ .foot-grid{grid-template-columns:1fr;gap:30px;} }

/* ---------- whatsapp flotante ---------- */
.wa{position:fixed;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.25);z-index:50;
  transition:opacity .25s ease, transform .25s ease, visibility .25s;}
/* la pone waSegunHero() en site.js mientras el hero está a la vista.
   visibility además de opacity: con opacity sola seguiría siendo enfocable
   con el tabulador aunque no se vea. */
.wa.wa-oculto{opacity:0;visibility:hidden;transform:scale(.85) translateY(10px);pointer-events:none;}
@media (prefers-reduced-motion:reduce){ .wa{transition:none;} }
.wa svg{width:30px;height:30px;fill:#fff;}

/* ============================================================
   Escala de espaciado · referencia charity:water
   Múltiplos de 10/20. Nada de números sueltos.
   Hoy nadie las usa: quedan sembradas para la pasada por página
   y para cuando se rehagan index.html y referir.html.
   ============================================================ */
:root{
  --s05:5px; --s1:10px; --s2:20px; --s3:40px;
  --s4:60px;  --s5:80px; --s6:100px; --s7:120px;
}

/* ---------- móvil ≤640px ---------- */
@media(max-width:640px){
  body{font-size:17px;}
  .wrap{padding:0 18px;}
  /* el menú móvil no hereda de .wrap: se alinea a mano con el isotipo */
  .m-nav a{padding:15px 18px;}
  .m-nav .m-extra{padding:var(--s2) 18px;}
  form{padding:var(--s2) 18px;}
  .frow2{grid-template-columns:1fr;}
  .page-hero{padding:var(--s3) 0;}
  footer{padding:var(--s3) 0 var(--s2);}
  .foot-grid{gap:var(--s2);margin-bottom:var(--s3);}
}

/* ---------- iPhone SE ---------- */
@media(max-width:374px){
  footer{font-size:14px;}
  footer a{font-size:13px;}
}

/* Aterrizaje de anclas (21 ago 2026): cualquier destino de un enlace #ancla
   aterriza librando el header sticky, con aire — antes las secciones
   llegaban cortadas arriba. Las páginas que ya definían su propio
   scroll-margin lo conservan (sus reglas cargan después y ganan). */
[id]{scroll-margin-top:96px;}

/* Lada telefónica MX/US (21 ago 2026): dropdown chico junto al teléfono.
   México +52 por default; el corredor Tijuana-San Diego pide el +1. */
.tel-row{display:flex;gap:8px;}
.tel-row select.lada{flex:0 0 auto;width:auto;padding:12px 5px;font-size:13px;font-weight:700;color:var(--teal-dark);background:var(--mint);border-color:var(--mint);cursor:pointer;}
.tel-row select.lada:focus{border-color:var(--teal);}
.tel-row input{flex:1;min-width:0;}