:root {
    --navy: #0b1f6e;
    --navy-dark: #071447;
    --steel: #4b5563;
    --ink: #171717;
    --muted: #5b6470;
    --bg: #f3f5f8;
    --white: #fff;
    --line: #e4e8ee;
    --ok: #0f7a4a;
    --err: #b42318;
    --cookie-accent: #0b1f6e;
    --cookie-accent-dark: #071447;
    --cookie-accent-soft: #e7ecf8;
    --cookie-ink: #171717;
    --header-h: 4.5rem;
    --radius: 12px;
    --shadow: 0 10px 30px rgba(7, 20, 71, 0.08);
    --font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--white);
    line-height: 1.55;
}
img, picture, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 0.6rem; }
h1 { font-size: clamp(2rem, 4vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; color: var(--muted); }
.container { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; }
.skip-link {
    position: absolute; left: -999px; top: 0;
}
.skip-link:focus { left: 1rem; top: 1rem; background: #fff; padding: 0.5rem 1rem; z-index: 10; }

.topbar {
    background: var(--navy-dark);
    color: #d7def0;
    font-size: 0.85rem;
}
.topbar__inner {
    display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem;
    padding: 0.45rem 0;
}
.topbar a { color: inherit; }
.topbar__mobile { margin-left: auto; }

.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}
.site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    min-height: var(--header-h); gap: 1rem;
}
.logo img { height: 52px; width: auto; }
.nav { display: flex; align-items: center; gap: 1.1rem; }
.nav a { color: var(--ink); font-weight: 600; }
.nav a.btn { color: #fff; }
.nav a.btn:hover { color: #fff; }
.nav-toggle-btn {
    display: none; width: 44px; height: 44px;
    border: 1px solid var(--line); border-radius: 8px;
    align-items: center; justify-content: center; flex-direction: column; gap: 5px;
    cursor: pointer;
}
.nav-toggle-btn span { width: 18px; height: 2px; background: var(--navy); }

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--navy); color: #fff; font-weight: 700;
    padding: 0.8rem 1.2rem; border-radius: 8px; border: 0;
    min-height: 44px; cursor: pointer;
}
.btn:hover { background: var(--navy-dark); text-decoration: none; color: #fff; }
.btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.7); }
.btn--ghost:hover { background: #fff; color: var(--navy); }
.btn--small { padding: 0.55rem 0.95rem; }
.text-link { font-weight: 700; }

.eyebrow {
    color: var(--navy); font-weight: 800; letter-spacing: 0.08em;
    text-transform: uppercase; font-size: 0.75rem; margin-bottom: 0.45rem;
}

.hero {
    position: relative; min-height: min(78vh, 720px);
    display: grid; align-items: end; color: #fff; overflow: hidden;
}
.hero__media, .hero__overlay { position: absolute; inset: 0; }
.hero__media picture {
    position: absolute; inset: 0; opacity: 0;
    animation: heroFade 18s infinite;
}
.hero__media picture:nth-child(1) { animation-delay: 0s; opacity: 1; }
.hero__media picture:nth-child(2) { animation-delay: 6s; }
.hero__media picture:nth-child(3) { animation-delay: 12s; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__overlay { background: linear-gradient(180deg, rgba(7,20,71,0.25) 0%, rgba(7,20,71,0.78) 100%); }
.hero__content { position: relative; z-index: 1; padding: 5rem 0 3.5rem; }
.hero__content h1, .hero__content .lead, .hero .eyebrow { color: #fff; }
.hero__content .lead { font-size: 1.15rem; max-width: 40rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }

@keyframes heroFade {
    0% { opacity: 0; }
    6% { opacity: 1; }
    30% { opacity: 1; }
    38% { opacity: 0; }
    100% { opacity: 0; }
}

.intro { padding: 4rem 0; background: var(--bg); }
.intro-grid, .why-grid, .cards, .service-grid, .gallery-grid, .contact-grid, .footer-grid {
    display: grid; gap: 1.25rem;
}
.intro-grid, .why-grid, .cards { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.intro article, .card, .why article, .service, .contact-form {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.25rem; box-shadow: var(--shadow);
}

.about, .services, .gallery, .why, .contact, .legal { padding: 4.5rem 0; }
.about { background: #fff; }
.about-tabs { margin-top: 1.5rem; }
.about-tabs input { position: absolute; opacity: 0; pointer-events: none; }
.about-tabs__nav {
    display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem;
}
.about-tabs__nav label {
    padding: 0.55rem 0.9rem; border-radius: 999px; cursor: pointer;
    background: var(--cookie-accent-soft); font-weight: 700;
}
#tab-fortalezas:checked ~ .about-tabs__nav label[for="tab-fortalezas"],
#tab-mision:checked ~ .about-tabs__nav label[for="tab-mision"],
#tab-vision:checked ~ .about-tabs__nav label[for="tab-vision"],
#tab-objetivos:checked ~ .about-tabs__nav label[for="tab-objetivos"] {
    background: var(--navy); color: #fff;
}
.about-panels > * { display: none; }
#tab-fortalezas:checked ~ .about-panels #panel-fortalezas { display: grid; }
#tab-mision:checked ~ .about-panels #panel-mision,
#tab-vision:checked ~ .about-panels #panel-vision,
#tab-objetivos:checked ~ .about-panels #panel-objetivos { display: block; }
.checklist { margin: 0; padding-left: 1.1rem; color: var(--muted); }
.checklist li { margin-bottom: 0.4rem; }

.cta-band { background: var(--navy); color: #fff; }
.cta-band__inner {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1.5rem; padding: 2.5rem 0; flex-wrap: wrap;
}
.cta-band h2, .cta-band p { color: #fff; margin-bottom: 0.4rem; }
.cta-band .btn { background: #fff; color: var(--navy); }

.service-grid { grid-template-columns: repeat(2, 1fr); }
.service { padding: 0; overflow: hidden; }
.service img { width: 100%; height: 220px; object-fit: cover; }
.service div { padding: 1.1rem 1.2rem 1.3rem; }

.gallery { background: var(--bg); }
.gallery-grid { grid-template-columns: repeat(3, 1fr); }
.gallery figure { margin: 0; background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.gallery img { width: 100%; height: 240px; object-fit: cover; }
.gallery figcaption { padding: 0.7rem 0.9rem 0.9rem; font-weight: 700; font-size: 0.92rem; }

.contact { background: #fff; }
.contact-grid { grid-template-columns: 0.9fr 1.1fr; align-items: start; }
.contact-list { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.contact-list li { margin-bottom: 0.9rem; }
.contact-list strong { display: block; font-size: 0.8rem; color: var(--navy); }
.contact-form label, .contact-form .check { display: block; font-weight: 700; margin-bottom: 0.85rem; }
.contact-form input, .contact-form textarea {
    width: 100%; margin-top: 0.35rem; padding: 0.7rem 0.8rem;
    border: 1px solid var(--line); border-radius: 8px; font: inherit;
}
.contact-form .check { display: flex; gap: 0.55rem; font-weight: 500; align-items: flex-start; }
.contact-form .check input { width: auto; margin-top: 0.25rem; }
.contact-form span, .field-error { color: var(--err); font-weight: 500; font-size: 0.85rem; }
.form-ok { background: #e8f7ef; color: var(--ok); padding: 0.7rem 0.9rem; border-radius: 8px; }
.form-error { background: #fde8e6; color: var(--err); padding: 0.7rem 0.9rem; border-radius: 8px; }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

.page-hero { background: var(--navy); color: #fff; padding: 3rem 0 2rem; }
.page-hero h1 { margin: 0; }
.legal-content { max-width: 46rem; }
.legal-content h2 { margin-top: 1.8rem; }
.legal-content ul { color: var(--muted); }

.site-footer { background: #0d1324; color: #c9d0de; padding: 3rem 0 1.2rem; }
.footer-grid { grid-template-columns: 1.3fr 1fr 1fr; margin-bottom: 2rem; }
.footer-brand, .footer-title { color: #fff; font-weight: 800; margin-bottom: 0.6rem; }
.site-footer a, .site-footer p { color: inherit; display: block; margin-bottom: 0.35rem; }
.footer-bottom {
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1rem; font-size: 0.88rem;
}
.footer-bottom p, .footer-bottom a { display: inline; }

.whatsapp {
    position: fixed; right: 18px; bottom: 18px; z-index: 40;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25d366; color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.whatsapp:hover { text-decoration: none; filter: brightness(1.05); }

@media (max-width: 860px) {
    .nav-toggle-btn { display: inline-flex; }
    .nav {
        display: none; position: absolute; left: 0; right: 0; top: 100%;
        background: #fff; border-bottom: 1px solid var(--line);
        flex-direction: column; align-items: stretch; padding: 0.75rem 1rem 1rem;
    }
    .nav-toggle:checked ~ .nav { display: flex; }
    .service-grid, .gallery-grid, .contact-grid, .footer-grid { grid-template-columns: 1fr; }
    .hero { min-height: 70vh; }
    .topbar__mobile { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero__media picture { animation: none; opacity: 0; }
    .hero__media picture:first-child { opacity: 1; }
}