/* /assets/site.css — estilos compartidos del sitio público salud.tips */

:root {
    --verde-oscuro:#174a2a;
    --verde:#73b42b;
    --verde-claro:#edf5e3;
    --texto:#252b27;
    --gris:#657068;
    --blanco:#ffffff;
    --radio:18px;
    --sombra:0 14px 35px rgba(23,74,42,.07);
}

* { box-sizing:border-box; }

html, body { margin:0; min-height:100%; }

body {
    font-family:Arial, Helvetica, sans-serif;
    color:var(--texto);
    background:
        radial-gradient(circle at 8% 6%, rgba(115,180,43,.13), transparent 22%),
        radial-gradient(circle at 92% 92%, rgba(23,74,42,.09), transparent 24%),
        #fbfcf8;
}

a { color:inherit; }

.wrap {
    width:min(1180px, calc(100% - 30px));
    margin:0 auto;
}

/* ---------- header / nav ---------- */
.site-header {
    padding:20px 0;
}

.site-header .wrap {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
}

.brand {
    display:inline-flex;
    align-items:center;
    text-decoration:none;
}

.brand-logo {
    display:block;
    height:100px;
    width:auto;
}

.site-nav {
    display:flex;
    flex-wrap:wrap;
    gap:6px 4px;
}

.site-nav a {
    text-decoration:none;
    color:var(--texto);
    font-size:.95rem;
    font-weight:600;
    padding:8px 14px;
    border-radius:999px;
}

.site-nav a:hover, .site-nav a.active {
    background:var(--verde-claro);
    color:var(--verde-oscuro);
}

/* ---------- breadcrumbs ---------- */
.breadcrumbs {
    font-size:.85rem;
    color:var(--gris);
    margin:0 0 18px;
}

.breadcrumbs a { text-decoration:none; color:var(--gris); }
.breadcrumbs a:hover { color:var(--verde-oscuro); }

/* ---------- hero ---------- */
.hero {
    text-align:center;
    padding:24px 0 12px;
}

.hero h1 {
    margin:0 0 12px;
    color:var(--verde-oscuro);
    font-size:clamp(1.9rem, 4.6vw, 3.1rem);
    line-height:1.05;
    letter-spacing:-.03em;
    font-weight:800;
}

.hero .tagline {
    margin:0 auto 14px;
    max-width:900px;
    color:var(--verde);
    font-size:clamp(1.1rem, 2vw, 1.4rem);
    line-height:1.35;
    font-weight:700;
}

.hero .intro {
    max-width:820px;
    margin:0 auto;
    color:#333a35;
    font-size:clamp(1rem, 1.4vw, 1.1rem);
    line-height:1.7;
}

/* ---------- section titles ---------- */
.section-title {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    margin:46px 0 18px;
}

.section-title h2 {
    margin:0;
    color:var(--verde-oscuro);
    font-size:clamp(1.3rem, 2vw, 1.7rem);
}

.section-title a {
    text-decoration:none;
    font-weight:700;
    font-size:.9rem;
    color:var(--verde);
    white-space:nowrap;
}

/* ---------- card grids ---------- */
.grid {
    display:grid;
    gap:18px;
}

.grid-4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.grid-2 { grid-template-columns:repeat(2, minmax(0,1fr)); }

.card {
    display:block;
    text-decoration:none;
    padding:24px 20px;
    border-radius:var(--radio);
    background:rgba(255,255,255,.9);
    border:1px solid rgba(23,74,42,.10);
    box-shadow:var(--sombra);
    transition:transform .15s ease, box-shadow .15s ease;
}

.card:hover {
    transform:translateY(-3px);
    box-shadow:0 20px 45px rgba(23,74,42,.12);
}

.card .icon {
    width:56px;
    height:56px;
    margin:0 0 14px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--verde-claro);
    font-size:1.6rem;
}

.card h3 {
    margin:0 0 8px;
    color:var(--verde-oscuro);
    font-size:1.1rem;
    line-height:1.25;
}

.card p {
    margin:0;
    color:var(--gris);
    font-size:.92rem;
    line-height:1.55;
}

.card .meta {
    margin-top:12px;
    font-size:.78rem;
    color:var(--verde);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.03em;
}

/* ---------- article / plant detail ---------- */
.detail-header {
    text-align:left;
    margin:8px 0 28px;
}

.detail-header .tag {
    display:inline-block;
    margin-bottom:10px;
    font-size:.8rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--verde);
}

.detail-header h1 {
    margin:0 0 12px;
    color:var(--verde-oscuro);
    font-size:clamp(1.7rem, 3.4vw, 2.4rem);
    line-height:1.12;
}

.detail-header .resumen {
    margin:0;
    color:var(--gris);
    font-size:1.1rem;
    line-height:1.6;
}

.detail-body {
    max-width:820px;
    font-size:1.05rem;
    line-height:1.75;
    color:#333a35;
}

.info-blocks {
    display:grid;
    gap:18px;
    margin:24px 0;
}

.info-block {
    padding:20px 22px;
    border-radius:16px;
    background:rgba(255,255,255,.9);
    border:1px solid rgba(23,74,42,.10);
}

.info-block h2 {
    margin:0 0 8px;
    color:var(--verde-oscuro);
    font-size:1.05rem;
}

.info-block p {
    margin:0;
    color:#3a4139;
    font-size:.98rem;
    line-height:1.65;
}

.info-block.precauciones {
    background:#fdf6ec;
    border-color:rgba(180,120,20,.18);
}

.info-block.precauciones h2 { color:#8a5a12; }

.empty-state {
    padding:40px 20px;
    text-align:center;
    color:var(--gris);
    border-radius:16px;
    background:rgba(255,255,255,.7);
    border:1px dashed rgba(23,74,42,.2);
}

/* ---------- compromiso / footer ---------- */
.commitment {
    display:grid;
    grid-template-columns:220px 1fr;
    gap:28px;
    align-items:center;
    margin:44px 0 10px;
    padding:22px 28px;
    border-radius:20px;
    background:linear-gradient(90deg, #edf5df 0%, #f7f9f1 100%);
    text-align:left;
}

.commitment strong { color:var(--verde-oscuro); font-size:1.1rem; }
.commitment p { margin:0; color:#4d5951; line-height:1.65; }

.disclaimer {
    margin:20px 0 0;
    padding:14px 18px;
    border-radius:12px;
    background:#fdf6ec;
    color:#7a5410;
    font-size:.85rem;
    line-height:1.55;
}

.site-footer {
    padding:34px 0 30px;
    margin-top:40px;
    border-top:1px solid rgba(23,74,42,.10);
}

.site-footer .wrap {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:14px;
    color:var(--gris);
    font-size:.9rem;
    line-height:1.7;
}

.site-footer strong { color:var(--verde-oscuro); }

.site-footer nav a {
    margin-left:16px;
    text-decoration:none;
    color:var(--gris);
}

.site-footer nav a:first-child { margin-left:0; }
.site-footer nav a:hover { color:var(--verde-oscuro); }

@media (max-width:900px) {
    .grid-4 { grid-template-columns:repeat(2, minmax(0,1fr)); }
    .grid-3 { grid-template-columns:repeat(2, minmax(0,1fr)); }
    .commitment { grid-template-columns:1fr; text-align:center; }
}

@media (max-width:600px) {
    .grid-4, .grid-3, .grid-2 { grid-template-columns:1fr; }
    .site-header .wrap { flex-direction:column; align-items:flex-start; }
    .site-nav { width:100%; }
}