/* Tema de Tu Salud Es Importante (tusaludesimportante.com): cálido y cercano.

   Coral sobre crema con tinta ciruela para lo oscuro, Nunito (redonda) en todo, formas muy
   redondeadas, botones en píldora y sombras blandas teñidas de coral.
   Mismas variables que static/css/sitios/saludator.css (ahí se explica el formato «R G B»);
   debajo, los retoques propios, siempre bajo html[data-sitio="tusaludesimportante"]. */
:root {
    /* 50–700, coral; 800–950, ciruela: lo que en Saludator es azul marino aquí es tinta */
    --marca-50: 255 244 240;
    --marca-100: 255 228 219;
    --marca-200: 255 199 182;
    --marca-300: 255 160 137;
    --marca-400: 244 105 75;
    --marca-500: 212 67 34;
    --marca-600: 185 58 28;
    --marca-700: 154 48 24;
    --marca-800: 109 37 69;
    --marca-900: 74 26 58;
    --marca-950: 46 16 38;

    --neutro-50: 253 249 244;
    --neutro-100: 248 241 231;
    --neutro-200: 239 227 211;
    --neutro-300: 224 207 186;
    --neutro-400: 179 160 140;
    --neutro-500: 123 106 90;
    --neutro-600: 95 82 70;
    --neutro-700: 73 62 53;
    --neutro-800: 48 40 34;
    --neutro-900: 33 27 23;
    --neutro-950: 19 15 12;

    --fuente-texto: 'Nunito';
    --fuente-titulos: 'Nunito';

    --radio-md: 0.75rem;
    --radio-lg: 1rem;
    --radio-xl: 1.25rem;
    --radio-2xl: 1.75rem;
    --radio-3xl: 2.25rem;

    --sombra-suave: 0 24px 48px -20px rgb(var(--marca-500) / 0.18);
    --sombra-tarjeta: 0 16px 34px -14px rgb(var(--marca-600) / 0.28);

    --logo-rotulo: 74 26 58;
    --fondo-noche: 24 13 20;
    /* Amarillo mantequilla de los fondos decorativos */
    --acento: 255 214 138;
}

/* ---------------------------------------------------------------- retoques del sitio
   Solo aspecto: nada de esto cambia el contenido ni el orden de las páginas. Los ganchos
   (.glass-nav, .nav-cta, .logo-sitio, .firma-correduria, .hero-*, #comparador…) son clases e
   identificadores de las plantillas comunes. Lo que pone un fondo claro lleva
   :not([data-theme="dark"]): el modo noche de la portada (su botón de la luna) manda. */

/* Titulares gruesos y redondos */
html[data-sitio="tusaludesimportante"] :is(h1, h2, h3, h4):not(.uppercase) { font-weight: 800; letter-spacing: -0.01em; }
html[data-sitio="tusaludesimportante"] .hero-title { font-weight: 900; }

/* Una portada cercana: texto y fotografía de familia en dos columnas. */
html[data-sitio="tusaludesimportante"] #hero .hero-marco {
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 1.5rem 0;
}
/* De noche, la portada repinta .bg-white y .shadow-card con !important (ver inicio.html). */
html[data-sitio="tusaludesimportante"][data-theme="dark"] #hero .hero-marco {
    background-color: transparent !important;
    box-shadow: none !important;
}
html[data-sitio="tusaludesimportante"] #hero .hero-media {
    border-radius: 5rem 1.5rem 5rem 1.5rem;
    box-shadow: none;
}
html[data-sitio="tusaludesimportante"] #hero .hero-media img { object-position: center 35%; }
html[data-sitio="tusaludesimportante"] #hero .hero-actions a { border-radius: 999px; }
html[data-sitio="tusaludesimportante"] #hero .hero-title span {
    background: none;
    color: rgb(var(--marca-600));
    -webkit-text-fill-color: currentColor;
}
html[data-sitio="tusaludesimportante"] #hero .market-analysis-card {
    top: auto;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    width: auto;
    border-radius: 1.25rem;
}
@media (min-width: 1024px) {
    html[data-sitio="tusaludesimportante"] #hero:not(.hero-compacto) .hero-content > div {
        display: grid;
        grid-template-columns: 1.08fr 1fr;
        align-items: center;
        gap: 3rem;
        padding: 2rem 0 3rem;
    }
    html[data-sitio="tusaludesimportante"] #hero .hero-marco { order: 0; }
    html[data-sitio="tusaludesimportante"] #hero .hero-marco > div {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    html[data-sitio="tusaludesimportante"] #hero .hero-title { font-size: clamp(2rem, 3vw, 3.4rem); }
    html[data-sitio="tusaludesimportante"] #hero .hero-media img { height: clamp(420px, 58vh, 600px); }
}
@media (max-width: 767px) {
    html[data-sitio="tusaludesimportante"] #hero .hero-media img { height: 340px; object-fit: cover; }
}
html[data-sitio="tusaludesimportante"] body { font-weight: 500; }

/* Casillas y botones de opción nativos con el color de la marca */
html[data-sitio="tusaludesimportante"] :is(input[type="checkbox"], input[type="radio"]) { accent-color: rgb(var(--marca-600)); }

/* Logotipo y firma */
html[data-sitio="tusaludesimportante"] .logo-sitio { height: 46px; }
html[data-sitio="tusaludesimportante"] .firma-correduria { margin: -2px 0 0 49px; }
html[data-sitio="tusaludesimportante"] footer .logo-sitio { height: 42px; }
html[data-sitio="tusaludesimportante"] footer .firma-correduria { margin: -2px 0 1rem 45px; }

/* Barra flotante: una píldora blanca separada del borde */
html[data-sitio="tusaludesimportante"]:not([data-theme="dark"]) .glass-nav {
    background: transparent;
    backdrop-filter: none;
    border-bottom: 0;
    top: 10px;
}
html[data-sitio="tusaludesimportante"]:not([data-theme="dark"]) .glass-nav > div:first-child {
    max-width: min(80rem, calc(100% - 20px));
    background: rgb(255 255 255 / 0.94);
    backdrop-filter: blur(12px);
    border-radius: 999px;
    box-shadow: 0 14px 34px -20px rgb(var(--marca-900) / 0.45), 0 0 0 1px rgb(var(--marca-100));
}
html[data-sitio="tusaludesimportante"] .glass-nav .h-20 { height: 4.25rem; }
html[data-sitio="tusaludesimportante"] #mobile-menu {
    left: 10px;
    width: calc(100% - 20px);
    margin-top: 8px;
    border: 0;
    border-radius: 1.5rem;
    overflow: hidden;
}
html[data-sitio="tusaludesimportante"] .nav-cta {
    background: rgb(var(--marca-500));
    box-shadow: 0 12px 22px -10px rgb(var(--marca-500) / 0.7);
    font-weight: 800;
}
html[data-sitio="tusaludesimportante"] .nav-cta:hover { background: rgb(var(--marca-600)); }

/* Botones principales en píldora */
html[data-sitio="tusaludesimportante"] :is(a, button)[class*="bg-brand-600"],
html[data-sitio="tusaludesimportante"] .hero-actions a { border-radius: 999px; }

/* Portada: fondo crema con dos luces en lugar de las manchas azules */
html[data-sitio="tusaludesimportante"]:not([data-theme="dark"]) #hero {
    background:
        radial-gradient(900px 520px at 88% 6%, rgb(var(--acento) / 0.38), transparent 62%),
        radial-gradient(720px 520px at 0% 92%, rgb(var(--marca-100)), transparent 62%),
        rgb(var(--neutro-50));
}
html[data-sitio="tusaludesimportante"] .hero-blob { display: none; }
html[data-sitio="tusaludesimportante"]:not([data-theme="dark"]) .hero-badge { background: #fff; border-color: rgb(var(--marca-100)); color: rgb(var(--marca-900)); }
html[data-sitio="tusaludesimportante"]:not([data-theme="dark"]) .hero-media {
    border-radius: 2.75rem 2.75rem 2.75rem 0.9rem;
    box-shadow: 0 34px 60px -32px rgb(var(--marca-600) / 0.5);
}
html[data-sitio="tusaludesimportante"]:not([data-theme="dark"]) .market-analysis-card { border-radius: 1.5rem; }
html[data-sitio="tusaludesimportante"]:not([data-theme="dark"]) .hero-partners { background: transparent; border-color: rgb(var(--marca-100)); }

/* Secciones: tarjetas blancas con sombra blanda sobre fondos cálidos */
html[data-sitio="tusaludesimportante"]:not([data-theme="dark"]) #funcionamiento { background: rgb(var(--neutro-50)); }
html[data-sitio="tusaludesimportante"]:not([data-theme="dark"]) #funcionamiento .bg-slate-50 {
    background: #fff;
    box-shadow: var(--sombra-suave);
}
html[data-sitio="tusaludesimportante"]:not([data-theme="dark"]) #tipos { background: rgb(var(--marca-50)); }

/* Pie melocotón con las esquinas de arriba redondeadas (también el de base.html) */
html[data-sitio="tusaludesimportante"]:not([data-theme="dark"]) footer {
    background: rgb(var(--marca-50));
    border-top: 0;
    border-radius: 2.75rem 2.75rem 0 0;
}
html[data-sitio="tusaludesimportante"]:not([data-theme="dark"]) footer .border-t { border-color: rgb(var(--marca-200)); }
html[data-sitio="tusaludesimportante"]:not([data-theme="dark"]) footer .text-slate-400 { color: rgb(var(--neutro-500)); }

/* Ilustración de la portada (templates/includes/sitios/tusaludesimportante/_portada.html) */
html[data-sitio="tusaludesimportante"] .il-fondo { fill: rgb(var(--marca-100)); }
html[data-sitio="tusaludesimportante"] .il-sol { fill: rgb(var(--acento)); }
html[data-sitio="tusaludesimportante"] .il-mancha { fill: rgb(var(--marca-200)); }
html[data-sitio="tusaludesimportante"] .il-mancha-2 { fill: rgb(var(--marca-300) / 0.55); }
html[data-sitio="tusaludesimportante"] .il-pulso { stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
html[data-sitio="tusaludesimportante"] .il-corazon { fill: rgb(var(--marca-500)); }
html[data-sitio="tusaludesimportante"] .il-cruz { fill: #fff; }
html[data-sitio="tusaludesimportante"] .il-persona-a { fill: rgb(var(--marca-900)); }
html[data-sitio="tusaludesimportante"] .il-persona-b { fill: rgb(var(--marca-600)); }
html[data-sitio="tusaludesimportante"] .il-persona-c { fill: #fff; }
html[data-sitio="tusaludesimportante"] .il-chispa { fill: rgb(var(--marca-400)); }