/* /assets/site.css — estilos compartidos del sitio público healthy.cx */

:root {
    --verde-oscuro:#07566a;
    --verde:#6bc42d;
    --verde-claro:#eaf8ef;
    --texto:#17353d;
    --gris:#60737a;
    --blanco:#ffffff;
    --radio:18px;
    --sombra:0 14px 35px rgba(0,92,112,.09);
}

* { 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(107,196,45,.14), transparent 22%),
        radial-gradient(circle at 92% 92%, rgba(0,167,207,.10), 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:108px;
    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);
}

.nav-toggle {
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:42px;
    height:42px;
    padding:0;
    border:1px solid rgba(23,74,42,.14);
    border-radius:10px;
    background:var(--blanco);
    cursor:pointer;
}

.nav-toggle span {
    display:block;
    width:20px;
    height:2px;
    margin:0 auto;
    background:var(--verde-oscuro);
    border-radius:2px;
    transition:transform .2s ease, opacity .2s ease;
}

.nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ---------- banners promocionales ---------- */
.site-banners {
    position:relative;
    width:100%;
    margin:4px auto 28px;
    border-radius:20px;
    box-shadow:0 16px 38px rgba(23,74,42,.11);
}

.site-banners.banner-size-large { max-width:1180px; }
.site-banners.banner-size-medium { max-width:970px; }
.site-banners.banner-size-compact { max-width:728px; }
.site-banners.banner-position-after_hero,
.site-banners.banner-position-after_precautions { margin-top:28px; margin-bottom:32px; }

.site-banner-slides,
.site-banner-slide,
.site-banner-link,
.site-banner-link picture {
    display:block;
    width:100%;
}

.site-banner-slide[hidden] { display:none; }

.site-banner-link {
    overflow:hidden;
    border-radius:20px;
    background:#eef2e9;
}

a.site-banner-link:focus-visible {
    outline:3px solid var(--verde);
    outline-offset:3px;
}

.site-banner-link img {
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:4 / 1;
    object-fit:cover;
}

.site-banner-slide.banner-size-medium .site-banner-link img { aspect-ratio:5 / 1; }
.site-banner-slide.banner-size-compact .site-banner-link img { aspect-ratio:728 / 90; }

.site-banner-controls {
    position:absolute;
    left:50%;
    bottom:10px;
    z-index:2;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:8px;
    padding:5px 7px;
    border-radius:999px;
    background:rgba(17,35,23,.64);
    backdrop-filter:blur(5px);
}

.site-banner-arrow,
.site-banner-dots button {
    appearance:none;
    border:0;
    padding:0;
    background:transparent;
    color:#fff;
    cursor:pointer;
}

.site-banner-arrow {
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    border-radius:50%;
    font-size:1.5rem;
    line-height:1;
}

.site-banner-arrow:hover,
.site-banner-arrow:focus-visible { background:rgba(255,255,255,.2); }

.site-banner-dots { display:flex; align-items:center; gap:6px; }

.site-banner-dots button {
    width:8px;
    height:8px;
    border:1px solid rgba(255,255,255,.9);
    border-radius:50%;
}

.site-banner-dots button.is-active { background:#fff; }
.site-banner-dots button:focus-visible { outline:2px solid #fff; outline-offset:2px; }

.site-banners.banner-size-compact .site-banner-controls { bottom:5px; padding:3px 6px; }
.site-banners.banner-size-compact .site-banner-arrow { width:22px; height:22px; font-size:1.25rem; }
.site-banners.banner-size-compact .site-banner-dots button { width:6px; height:6px; }

/* ---------- 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-image {
    display:block;
    width:100%;
    height:365px;
    object-fit:cover;
    border-radius:24px;
    margin:0 0 24px;
    box-shadow:0 20px 45px rgba(23,74,42,.12);
}

.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;
}

/* ---------- public search ---------- */
.search-panel { margin:30px 0 10px; padding:24px; border-radius:20px; background:linear-gradient(135deg,#edf7ef,#fff); border:1px solid rgba(23,74,42,.14); box-shadow:var(--sombra); }
.plant-total { margin:28px 0 0; text-align:center; color:var(--verde-oscuro); font-size:1.1rem; }
.search-panel h2 { margin:0 0 16px; color:var(--verde-oscuro); font-size:1.35rem; }
.public-search-form { display:grid; grid-template-columns:minmax(220px,2fr) minmax(190px,1fr) auto; gap:12px; align-items:end; }
.search-field { display:grid; gap:6px; color:var(--verde-oscuro); font-size:.82rem; font-weight:700; }
.search-field input,.search-field select { width:100%; min-height:46px; padding:10px 13px; border:1px solid rgba(23,74,42,.25); border-radius:11px; background:#fff; color:#25342a; font:inherit; font-weight:400; }
.public-search-form button { min-height:46px; padding:10px 22px; border:0; border-radius:11px; background:var(--verde-oscuro); color:#fff; font-weight:800; cursor:pointer; }
.public-search-form button:hover { background:var(--verde); }
.clear-search { align-self:center; color:var(--verde-oscuro); font-weight:700; }
.search-count { margin:12px 0 0; color:var(--gris); font-size:.9rem; }
.search-type { margin-bottom:8px; color:var(--verde); font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.condition-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.condition-tags span { padding:4px 8px; border-radius:999px; background:var(--verde-claro); color:var(--verde-oscuro); font-size:.7rem; font-weight:700; }

/* ---------- 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;
}

.detail-body p { margin:0 0 16px; }
.detail-body p:last-child { margin-bottom:0; }
.detail-body ul, .detail-body ol { margin:0 0 16px; padding-left:1.4em; }
.detail-body li { margin:0 0 6px; }
.detail-body a { color:var(--verde-oscuro); text-decoration:underline; }
.detail-body strong { color:var(--verde-oscuro); }
.detail-body h2, .detail-body h3 { color:var(--verde-oscuro); margin:22px 0 10px; }
.detail-body img { max-width:100%; height:auto; border-radius:12px; margin:12px 0; }

.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; }

.prep-blocks {
    display:flex;
    flex-direction:column;
    gap:16px;
    margin:0 0 24px;
}

.prep-page-card {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin:28px 0;
    padding:22px 24px;
    border:1px solid rgba(23,74,42,.14);
    border-left:4px solid var(--verde);
    border-radius:16px;
    background:linear-gradient(135deg, rgba(237,245,227,.92), rgba(255,255,255,.96));
    box-shadow:0 10px 28px rgba(23,74,42,.05);
}
.prep-page-card h2 { margin:4px 0 7px; color:var(--verde-oscuro); font-size:1.25rem; }
.prep-page-card p { margin:0; color:#4d5951; line-height:1.55; }
.prep-page-kicker { color:#59724d; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.prep-page-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    flex:0 0 auto;
    min-height:42px;
    padding:10px 17px;
    border-radius:999px;
    background:var(--verde-oscuro);
    color:#fff;
    font-size:.88rem;
    font-weight:800;
    text-align:center;
    text-decoration:none;
}
.prep-page-button:hover { background:#0f3a20; }
.prep-page-header { margin-bottom:20px; }

.prep-disclaimer {
    margin:0 0 16px;
    padding:14px 18px;
    border-left:4px solid #d5a63d;
    border-radius:0 12px 12px 0;
    background:#fff9e9;
    color:#5d4a1b;
    line-height:1.6;
}

.prep-origin-note {
    margin:0 0 22px;
    color:#4d5951;
    font-size:.94rem;
    line-height:1.6;
}

.prep-block {
    padding:20px 24px;
    border-radius:16px;
    background:rgba(255,255,255,.9);
    border:1px solid rgba(23,74,42,.10);
    border-left:4px solid var(--verde);
}

.prep-block h3 {
    margin:0 0 10px;
    color:var(--verde-oscuro);
    font-size:1.1rem;
}
.prep-block h2 { margin:0 0 10px; color:var(--verde-oscuro); font-size:1.2rem; }

.prep-block .prep-instrucciones {
    margin:0 0 10px;
    color:#3a4139;
    font-size:.98rem;
    line-height:1.65;
}

.prep-block .prep-contraindicaciones {
    margin:0;
    padding:10px 14px;
    border-radius:10px;
    background:#fdf6ec;
    color:#8a5a12;
    font-size:.9rem;
    line-height:1.55;
}

.prep-sources {
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid rgba(23,74,42,.1);
    color:#526057;
    font-size:.86rem;
    line-height:1.5;
}
.prep-sources ul { margin:6px 0 0; padding-left:19px; }
.prep-sources li + li { margin-top:4px; }
.prep-sources a { color:var(--verde-oscuro); font-weight:700; }

.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);
}

/* ---------- recomendaciones afiliadas ---------- */
.affiliate-contextual {
    display:grid;
    grid-template-columns:72px minmax(0, 1fr) auto;
    align-items:center;
    gap:18px;
    margin:26px 0;
    padding:18px 20px;
    border:1px solid rgba(23,74,42,.14);
    border-left:4px solid var(--verde);
    border-radius:16px;
    background:linear-gradient(135deg, rgba(237,245,227,.92), rgba(255,255,255,.96));
    box-shadow:0 10px 28px rgba(23,74,42,.05);
}

.affiliate-contextual > .affiliate-image-link,
.affiliate-contextual > .affiliate-placeholder {
    width:72px;
    height:72px;
    border-radius:12px;
    object-fit:contain;
    background:#fff;
    border:1px solid rgba(23,74,42,.10);
}
.affiliate-contextual > .affiliate-image-link { display:block; overflow:hidden; }
.affiliate-contextual > .affiliate-image-link img { display:block; width:100%; height:100%; object-fit:contain; }

.affiliate-placeholder {
    display:grid;
    place-items:center;
    color:var(--verde);
    font-size:2rem;
    font-weight:300;
    background:linear-gradient(135deg, #f4f8ec, #fff);
}

.affiliate-contextual-copy { min-width:0; }
.affiliate-contextual-copy strong {
    display:block;
    margin-top:4px;
    color:var(--verde-oscuro);
    font-size:1.05rem;
}
.affiliate-contextual-copy p {
    margin:5px 0 0;
    color:#4d5951;
    font-size:.9rem;
    line-height:1.5;
}
.affiliate-contextual-disclosure {
    display:block; margin-top:6px; color:var(--gris); font-size:.68rem; line-height:1.35;
}

.affiliate-kicker,
.affiliate-role {
    color:#59724d;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.affiliate-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:42px;
    padding:10px 17px;
    border-radius:999px;
    background:var(--verde-oscuro);
    color:#fff;
    font-size:.88rem;
    font-weight:800;
    line-height:1.15;
    text-align:center;
    text-decoration:none;
    white-space:nowrap;
    transition:transform .18s ease, background .18s ease;
}
.affiliate-button:hover { background:#0f3a20; transform:translateY(-1px); }
.affiliate-button:focus-visible { outline:3px solid rgba(115,180,43,.45); outline-offset:3px; }

.affiliate-section {
    margin:38px 0 30px;
    padding:28px;
    border:1px solid rgba(23,74,42,.11);
    border-radius:22px;
    background:rgba(255,255,255,.82);
    box-shadow:var(--sombra);
}
.affiliate-section-head { max-width:760px; margin-bottom:20px; }
.affiliate-section-head h2 {
    margin:6px 0 7px;
    color:var(--verde-oscuro);
    font-size:clamp(1.35rem, 2.6vw, 1.8rem);
}
.affiliate-section-head p {
    margin:0;
    color:var(--gris);
    font-size:.92rem;
    line-height:1.55;
}
.affiliate-grid {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:14px;
}
.affiliate-card {
    display:flex;
    flex-direction:column;
    min-width:0;
    overflow:hidden;
    border:1px solid rgba(23,74,42,.11);
    border-radius:16px;
    background:#fff;
}
.affiliate-media {
    display:grid;
    place-items:center;
    min-height:150px;
    padding:12px;
    background:linear-gradient(135deg, #f6f9f0, #fff);
    border-bottom:1px solid rgba(23,74,42,.08);
}
.affiliate-media img,
.affiliate-media .affiliate-placeholder {
    width:100%;
    height:126px;
    object-fit:contain;
    border-radius:10px;
}
.affiliate-media .affiliate-image-link { display:block; width:100%; }
.affiliate-card-body {
    display:flex;
    flex:1;
    flex-direction:column;
    align-items:flex-start;
    padding:17px;
}
.affiliate-card h3 {
    margin:6px 0 8px;
    color:var(--verde-oscuro);
    font-size:1.03rem;
    line-height:1.3;
}
.affiliate-card p {
    flex:1;
    margin:0 0 16px;
    color:#4d5951;
    font-size:.87rem;
    line-height:1.5;
}
.affiliate-card .affiliate-button { width:100%; margin-top:auto; }
.affiliate-disclosure {
    margin:17px 0 0;
    color:var(--gris);
    font-size:.75rem;
    line-height:1.5;
}

@media (max-width:950px) {
    .affiliate-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width:650px) {
    .affiliate-contextual {
        grid-template-columns:58px minmax(0, 1fr);
        gap:13px;
        padding:16px;
    }
    .affiliate-contextual > .affiliate-image-link,
    .affiliate-contextual > .affiliate-placeholder { width:58px; height:58px; }
    .affiliate-contextual .affiliate-button { grid-column:1 / -1; width:100%; }
    .affiliate-section { padding:20px 16px; }
    .affiliate-grid { grid-template-columns:1fr; }
    .affiliate-media { min-height:135px; }
    .prep-page-card { align-items:flex-start; flex-direction:column; }
    .prep-page-button { width:100%; }
}

/* ---------- 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 .footer-nav a {
    margin-left:16px;
    text-decoration:none;
    color:var(--gris);
}

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

/* ---------- formulario de contacto ---------- */
.alert-ok, .alert-error {
    max-width:640px;
    padding:14px 18px;
    border-radius:12px;
    font-size:.95rem;
    line-height:1.55;
    margin:0 auto 20px;
}

.alert-ok { background:var(--verde-claro); color:var(--verde-oscuro); border:1px solid #cfe6b0; }
.alert-error { background:#fdeceb; color:#9c2b1f; border:1px solid #f3c3bd; }

.contact-form {
    display:flex;
    flex-direction:column;
    gap:16px;
    max-width:640px;
    margin:28px auto 0;
    text-align:left;
}

.contact-form label {
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:.9rem;
    font-weight:700;
    color:var(--verde-oscuro);
}

.contact-form input[type=text],
.contact-form input[type=email],
.contact-form textarea {
    padding:11px 12px;
    border:1px solid rgba(23,74,42,.18);
    border-radius:10px;
    font-size:1rem;
    font-family:inherit;
    color:var(--texto);
    resize:vertical;
}

.contact-form textarea { line-height:1.5; }

.form-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.form-actions { margin-top:4px; }

.btn-primary {
    padding:12px 26px;
    border:none;
    border-radius:999px;
    background:var(--verde-oscuro);
    color:#fff;
    font-weight:700;
    font-size:1rem;
    cursor:pointer;
}

.btn-primary:hover { background:#123a20; }

/* Honeypot: oculto visualmente pero presente en el DOM para atrapar bots. */
.hp-field {
    position:absolute;
    left:-9999px;
    top:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
}

@media (max-width:600px) {
    .form-row { grid-template-columns:1fr; }
}

@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; }
    .public-search-form { grid-template-columns:1fr; }

    .nav-toggle { display:flex; }

    .site-nav {
        display:none;
        width:100%;
        order:3;
        flex-direction:column;
        gap:2px;
        margin-top:14px;
        padding:10px;
        background:var(--blanco);
        border:1px solid rgba(23,74,42,.10);
        border-radius:16px;
        box-shadow:var(--sombra);
    }

    .site-nav.open { display:flex; }

    .site-nav a { padding:12px 14px; }

    .site-banners { margin-top:0; border-radius:15px; }
    .site-banner-link { border-radius:15px; }
    .site-banner-slide.banner-size-large .site-banner-link img { aspect-ratio:2 / 1; }
    .site-banner-slide.banner-size-medium .site-banner-link img { aspect-ratio:5 / 2; }
    .site-banner-slide.banner-size-compact .site-banner-link img { aspect-ratio:16 / 5; }
    .site-banner-controls { bottom:7px; }

    .hero-image { height:200px; border-radius:16px; }

    .site-footer .wrap { flex-direction:column; align-items:center; text-align:center; }
    .site-footer .footer-nav { order:1; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px; }
    .site-footer .footer-nav a { margin-left:0; }
    .site-footer .footer-copy { order:2; }
}