/* Tema visual de consultiasalud.cl (solo se publica en ese dominio; ver build-consultiasalud.sh).
   Mismo contenido que dermiaskin.cl, con colores y tipografía propios: azul petróleo y menta.
   assets/consultia.js marca <html> con .cs-home (portada) o .cs-app (agenda, ficha, panel, etc.). */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

/* ---------- Portada (index.html) ---------- */
html.cs-home{--paper:#f2f8f8;--white:#ffffff;--ink:#10282d;--muted:#52666b;--wine:#0f6b78;--line:#d3e5e8;--sage:#e3f2ee;--sand:#e4f0f4;--serif:"Manrope",system-ui,sans-serif}
html.cs-home body{font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif}
html.cs-home h1,html.cs-home h2{font-weight:800;letter-spacing:-.03em}
html.cs-home h3{font-weight:700}
html.cs-home .site-header{background:rgba(242,248,248,.97)}
html.cs-home .brand{font-family:"Manrope",sans-serif;font-weight:800;letter-spacing:-.02em;font-size:26px}
html.cs-home .brand span{color:#2bb39a}
html.cs-home .btn{border-radius:999px}
html.cs-home .btn:hover{background:#0b5561}
html.cs-home .btn.outline:hover{background:#e0f1f1}
html.cs-home .mobile-contact{background:rgba(242,248,248,.98)!important}
html.cs-home .consult-card{border-radius:22px;background:#fff;border-color:#d3e5e8}
html.cs-home .consult-card.podo{background:#eef8f6}
html.cs-home .consult-card.cura{background:#eef4fb}
html.cs-home .consult-card.ocupa{background:#fdf5ec}
html.cs-home .consult-card.nutri{background:#eff8f0}
html.cs-home .brand-cover{display:none!important}
html.cs-home .navlinks>a{white-space:nowrap}
@media(max-width:1060px){html.cs-home .navlinks>a:not(.btn){display:none}html.cs-home .navlinks>a.nav-agenda{display:inline-flex}}
@media(max-width:640px){html.cs-home .navlinks>a.nav-agenda{display:none}html.cs-home .brand{font-size:22px}}

.cs-hero{padding:48px 0 8px}
.cs-hero-box{background:linear-gradient(150deg,#0f6b78 0%,#0b3c47 100%);color:#fff;border-radius:32px;padding:clamp(28px,5vw,56px);position:relative;overflow:hidden;box-shadow:0 30px 70px -40px rgba(11,60,71,.75)}
.cs-hero-box::before{content:"";position:absolute;right:-80px;top:-80px;width:280px;height:280px;border-radius:50%;background:rgba(43,179,154,.22)}
.cs-hero-box::after{content:"";position:absolute;right:120px;bottom:-110px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.06)}
.cs-hero-box>*{position:relative}
.cs-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);color:#d8f3ee;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px;border-radius:999px}
.cs-tag i{width:8px;height:8px;border-radius:50%;background:#2bb39a;display:block}
.cs-hero h1{color:#fff;font-size:clamp(40px,6vw,74px);margin:20px 0 8px;line-height:1.02}
.cs-hero h1 span{color:#5fd6bf}
.cs-hero .cs-sub{color:#fff;font-size:clamp(19px,2.4vw,27px);font-weight:600;letter-spacing:-.01em;max-width:760px;line-height:1.3}
.cs-hero .cs-text{color:#cfe4e6;font-size:16px;max-width:640px;margin:16px 0 26px}
.cs-actions{display:flex;gap:12px;flex-wrap:wrap}
.cs-actions .btn{background:#2bb39a;border-color:#2bb39a;color:#062a30}
.cs-actions .btn:hover{background:#5fd6bf;border-color:#5fd6bf}
.cs-actions .btn.outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.cs-actions .btn.outline:hover{background:rgba(255,255,255,.1)}
.cs-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.cs-chips a{color:#fff;text-decoration:none;font-size:13px;font-weight:600;padding:7px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06)}
.cs-chips a:hover{background:rgba(255,255,255,.16)}
.cs-trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font-size:13px;color:#b9d8db;font-weight:600}
.cs-trust span::before{content:"✓ ";color:#5fd6bf}
@media(max-width:640px){.cs-hero{padding:22px 0 0}.cs-hero-box{border-radius:24px}.cs-actions .btn{width:100%}}

/* ---------- Plataforma (agenda, ficha, panel, consulta, mis datos…) ---------- */
html.cs-app body{background:linear-gradient(180deg,#f2f8f8,#dfeef0)!important;color:#10282d;font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif}
html.cs-app .serif{font-family:"Manrope",system-ui,sans-serif!important;font-weight:800;letter-spacing:-.02em}
html.cs-app .cs-brand span{color:#2bb39a}
html.cs-app .inp{border-color:#cfe1e4}
html.cs-app .inp:focus{outline:2px solid #2bb39a;outline-offset:1px}
html.cs-app .lbl,html.cs-app .muted{color:#5b6f74}
html.cs-app .card{border-color:#d3e5e8;border-radius:18px;box-shadow:0 10px 30px -24px rgba(11,60,71,.45)}
html.cs-app .btn{background:#0f6b78;border-color:#0f6b78}
html.cs-app .btn:hover:not(:disabled){background:#0b5561;border-color:#0b5561}
html.cs-app .btn.sec{background:transparent;color:#0f6b78}
html.cs-app .btn.dark{background:#0b2f3a;border-color:#0b2f3a}
html.cs-app .pill{background:#e0f1f1;color:#0f5561}
html.cs-app .tab,html.cs-app .slot{border-color:#d3e5e8}
html.cs-app .tab.on,html.cs-app .nav a.on{background:#0f6b78!important;border-color:#0f6b78!important;color:#fff!important}
html.cs-app .slot.on{background:#0f6b78;border-color:#0f6b78}
html.cs-app :focus-visible{outline-color:#2bb39a}
html.cs-app .text-\[\#b08672\]{color:#0f6b78!important}
html.cs-app .border-stone-200{border-color:#d3e5e8!important}
html.cs-app[data-theme=dark] body{background:linear-gradient(180deg,#0b1d22,#071317)!important;color:#e3f1f2}
html.cs-app[data-theme=dark] .card,html.cs-app[data-theme=dark] .tab:not(.on),html.cs-app[data-theme=dark] .slot:not(.on),html.cs-app[data-theme=dark] .bg-white{background:#10272d!important;border-color:#1f3d44!important;color:#e3f1f2}
html.cs-app[data-theme=dark] .inp{background:#0c2025;border-color:#1f3d44;color:#e3f1f2}
html.cs-app[data-theme=dark] .muted,html.cs-app[data-theme=dark] .lbl{color:#94b3b8}
html.cs-app[data-theme=dark] .pill{background:#14353b;color:#8fe0cf}
html.cs-app[data-theme=dark] .nav a.on,html.cs-app[data-theme=dark] .tab.on,html.cs-app[data-theme=dark] .btn.dark{background:#2bb39a!important;border-color:#2bb39a!important;color:#062a30!important}
