
:root{--mint:#15B8A6;--gold:#C8A96A;--slate:#0F172A;--ink:#1f2937;--lav:#A78BFA;--bg:#FAFFFE;--card:#FFFFFF;--muted:#64748b;--shadow:0 10px 20px rgba(0,0,0,.06)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.7}
a{color:var(--mint);text-decoration:none}a:hover{text-decoration:underline}img{max-width:100%;height:auto}
.container{max-width:1100px;margin:0 auto;padding:1.2rem}.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{position:static;width:auto;height:auto;background:#000;color:#fff;padding:.5rem}
.btn{display:inline-block;padding:.8rem 1.1rem;border-radius:1rem;background:var(--mint);color:#fff;font-weight:700;border:none;box-shadow:var(--shadow)}.btn:hover{opacity:.95;text-decoration:none;transform:translateY(-1px)}.btn--secondary{background:var(--slate)}.btn--sm{padding:.45rem .7rem;font-weight:600}.btn--wa{background:#25D366}
.badge{display:inline-block;padding:.25rem .6rem;border-radius:999px;background:#E6FFFA;color:#0f766e;font-size:.8rem;border:1px solid #CCF5EF}
.grid{display:grid;gap:1.3rem}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}
.card{border:1px solid #eef2f2;border-radius:1.2rem;padding:1.1rem;background:var(--card);box-shadow:var(--shadow)}
.topbar{display:flex;align-items:center;gap:.9rem;justify-content:flex-end;background:linear-gradient(90deg,#edfffb,#f9fffe);color:#334155;padding:.4rem 1rem;font-size:.95rem;border-bottom:1px solid #e2e8f0}
.topbar__item{display:flex;align-items:center;gap:.4rem;white-space:nowrap}.topbar__item svg{width:18px;height:18px;fill:#334155}.btn--wa svg{width:18px;height:18px;fill:#fff;margin-right:.35rem}
@media (max-width:540px){.topbar{justify-content:space-between}.topbar .label{display:none}.btn--wa .label{display:none}.btn--wa{display:flex;align-items:center;justify-content:center;padding:.55rem .6rem}}
.site-header .navwrap{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border-bottom:1px solid #e2e8f0;background:#ffffffb0;backdrop-filter:saturate(120%) blur(4px);position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;color:var(--slate)}.brand__name{color:var(--slate);font-weight:800}
.nav{display:flex;gap:1rem;align-items:center}.menu-toggle{display:none}
@media (max-width:850px){.menu-toggle{display:inline-block;background:#f0fdfa;border:1px solid #c7f1ea;border-radius:.6rem;padding:.5rem .7rem}.nav{display:none;flex-direction:column;position:absolute;top:72px;right:12px;background:#fff;border:1px solid #eee;border-radius:.8rem;padding:1rem;box-shadow:var(--shadow)}.nav.open{display:flex}}
.hero{display:grid;gap:1.2rem;align-items:center;padding:2rem 0;grid-template-columns:1.2fr .8fr}.hero h1{font-size:clamp(2rem,3.6vw,2.8rem);margin:.2rem 0;color:var(--slate);letter-spacing:.2px}
.lead{font-size:1.14rem;color:#334155}.kpis{display:flex;gap:1rem;flex-wrap:wrap}.kpis .card{min-width:240px}.section{margin:2rem 0}.section h2{color:var(--slate)}
.hero__img{border-radius:1.2rem;overflow:hidden;border:1px solid #e2e8f0;box-shadow:var(--shadow);background:#fff}.hero__img img{display:block;width:100%;height:auto}
@media (max-width:900px){.hero{grid-template-columns:1fr}.hero__img{display:none}}
.site-footer{background:#0f172a;color:#cbd5e1;padding:2rem 1rem;margin-top:2rem}.site-footer a{color:#cbd5e1}.footer__cols{display:grid;gap:1rem;grid-template-columns:2fr 1fr 1fr;max-width:1100px;margin:0 auto}
@media (max-width:900px){.footer__cols{grid-template-columns:1fr}}
.copy{max-width:1100px;margin:1rem auto 0;opacity:.8}.disclaimer{max-width:1100px;margin:0 auto .5rem;font-size:.9rem;opacity:.8}
.list{list-style:none;margin:0;padding:0}.list li{margin:.3rem 0}.table{border-collapse:collapse;width:100%}.table th,.table td{border:1px solid #eee;padding:.6rem;text-align:left}
.breadcrumbs{font-size:.9rem;margin:.5rem 0}.breadcrumbs a{color:#64748b}blockquote{border-left:4px solid var(--mint);padding:.6rem .9rem;background:#f5fffd;border-radius:.6rem}
.banner{background:linear-gradient(180deg,#f0fffd 0,#ffffff 100%);border:1px solid #e2e8f0;border-radius:1.2rem;box-shadow:var(--shadow);padding:1.4rem}
.map-embed iframe{width:100%;height:360px;border:0;border-radius:1rem;box-shadow:var(--shadow)}
/* Quita la franja blanca bajo las imágenes dentro de las cards */
.thumb img,
.hero__img img {
  display: block;      /* deja de ser inline -> sin espacio de línea */
  width: 100%;
  height: auto;
}

/* Asegura que la imagen llene el contenedor con bordes redondeados */
.thumb {
  padding: 0;          /* por si había padding interno */
  overflow: hidden;    /* respeta el border-radius del contenedor */
  border-radius: 12px; /* ajusta al radio que uses en las cards */
}

/* Alternativa (si prefieres mantener inline):
.thumb img { vertical-align: bottom; } */


/* ====== Contraste base ====== */
:root{
  --brand-mint: #15B8A6;        /* tu menta */
  --brand-mint-dark: #0E6B62;   /* menta oscura accesible p/ texto blanco (AA) */
  --brand-gold: #C8A96A;
  --ink: #0F172A;               /* texto principal, contrasta 17:1 con blanco */
  --bg: #FAFBFB;
  --wa-green-accessible: #0C7D44; /* verde WA accesible con texto blanco (≥5:1) */
  --chip-bg: #D6F3EE;           /* menta muy clara para badges */
}

/* Texto general y enlaces */
body { color: var(--ink); background: var(--bg); }
a { color: var(--ink); text-decoration: none; }
a:hover, a:focus { color: var(--brand-mint-dark); text-decoration: underline; }

/* ====== Botones ====== */
/* Botón primario (antes: menta #15B8A6 con texto blanco = 2.49:1 FAIL) */
/* Opción 1: mantener menta y poner texto oscuro (AA 7.17:1) */
.btn { background: var(--brand-mint); color: var(--ink); border: none; }
.btn:hover { filter: brightness(0.95); }

/* Opción 2 (si prefieres texto blanco): usa la menta oscura accesible */
/* .btn { background: var(--brand-mint-dark); color:#fff; } */

/* Botón WhatsApp (antes: #25D366 con blanco = 1.98:1 FAIL) */
.btn--wa, .btn.btn--wa {
  background: var(--wa-green-accessible); /* #0C7D44 */
  color: #fff;                             /* 5.21:1 OK */
}
.btn--wa .label { color: #fff; }

/* Botón oscuro (si lo usas) ya cumple con blanco */
.btn--dark { background: var(--ink); color:#fff; }

/* Tamaños pequeños siguen cumpliendo si mantienen los colores arriba */
.btn--sm { color: inherit; }

/* ====== Nav superior y migas ====== */
.navwrap a, .topbar a, .breadcrumb a { color: var(--ink); }
.navwrap a:hover, .topbar a:hover, .breadcrumb a:hover { color: var(--brand-mint-dark); }

/* ====== Badges / chips (Ejecutivos, Pacientes, etc.) ====== */
.badge, .chip, .pill {
  background: var(--chip-bg);  /* #D6F3EE */
  color: var(--brand-mint-dark); /* contraste 5.43:1 OK */
}

/* ====== Imágenes (evita franja blanca inferior) ====== */
.thumb img, .hero__img img { display:block; width:100%; height:auto; }
.thumb { overflow:hidden; border-radius:12px; }

/* ====== Estados de foco visibles ====== */
a:focus, button:focus, .btn:focus {
  outline: 2px solid var(--brand-mint-dark);
  outline-offset: 2px;
}

/* ====== Botón primario (accesible AA) ====== */
/* Versión recomendada: fondo menta oscura con texto blanco */
.btn--primary {
  background: var(--brand-mint-dark); /* #0E6B62 */
  color: #fff;
}
.btn--primary .label { color:#fff; }
.btn--primary:hover { filter: brightness(0.95); }
.btn--primary:focus {
  outline: 2px solid #073A36; /* anillo visible */
  outline-offset: 2px;
}

/* Si el primario apunta a WhatsApp, usa verde accesible */
a.btn--primary[href*="wa.me"]{
  background: var(--wa-green-accessible); /* #0C7D44 */
  color:#fff;
}

/* Alternativa (si prefieres fondo menta claro con texto oscuro):
.btn--primary {
  background: var(--brand-mint);    /* #15B8A6 */
  color: var(--ink);                /* #0F172A  -> contraste 7.17:1 */
}
*/

html { scroll-behavior: smooth; }

/* Ajusta el valor a la altura real de tu header si es fijo */
#terapias, #terapias-title { scroll-margin-top: 88px; }

#para-quien .bullets { margin:.5rem 0 .25rem; padding-left:1.1rem; }
#para-quien .bullets li { margin:.125rem 0; }


