:root {
    --bg: #0d171c;
    --bg-soft: #142229;
    --bg-card: #1b2b33;
    --bg-card-2: #22343c;

    --white: #f4f7f7;
    --text: #d2dcde;
    --muted: #91a2a8;

    --teal: #46aaa8;
    --teal-light: #72c8c2;
    --teal-dark: #247d7d;

    --border: rgba(255, 255, 255, 0.10);

    --light-bg: #e8eff0;
    --light-card: #f5f7f7;

    --dark-text: #18282e;
    --dark-muted: #62757c;
}


/* =========================
   RESET
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Manrope", sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
}

.container {
    width: min(1225px, calc(100% - 48px));
    margin: 0 auto;
}


/* =========================
   HEADER
========================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    background: rgba(13, 23, 28, 0.94);
    backdrop-filter: blur(16px);

    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.header-inner {
    min-height: 86px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;

    text-decoration: none;
    flex-shrink: 0;
}

.brand img {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.brand-text strong {
    color: var(--white);
    font-size: 17px;
    font-weight: 800;
}

.brand-text span {
    color: #8ea0a5;
    font-size: 12px;
    letter-spacing: 0.08em;
    margin-top: 4px;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 34px;
}

.main-nav a {
    color: #d7e0e1;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: 0.2s ease;
}

.main-nav a:hover {
    color: var(--teal-light);
}

.header-button {
    background: #2c9190;
    color: white;

    padding: 14px 23px;
    border-radius: 8px;

    text-decoration: none;
    font-size: 14px;
    font-weight: 800;

    transition: 0.2s ease;
    white-space: nowrap;
}

.header-button:hover {
    background: var(--teal);
    transform: translateY(-1px);
}


/* =========================
   HERO
========================= */

.hero {
    min-height: 610px;

    background:
        radial-gradient(
            circle at 78% 48%,
            rgba(70,170,168,0.12),
            transparent 35%
        ),
        var(--bg);

    display: flex;
    align-items: center;
}

.hero-grid {
    display: grid;
    grid-template-columns: 48% 52%;
    align-items: center;
}

.hero-content {
    padding: 80px 0;
    position: relative;
    z-index: 2;
}

.eyebrow {
    display: inline-block;

    color: var(--teal-light);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 0.25em;

    margin-bottom: 20px;
}

.hero h1 {
    max-width: 700px;

    color: var(--white);

    font-size: clamp(48px, 5vw, 74px);
    line-height: 0.98;

    letter-spacing: -0.055em;
    font-weight: 800;
}

.hero h1 span {
    color: var(--teal-light);
}

.hero p {
    max-width: 610px;

    color: #aebec2;

    font-size: 17px;
    line-height: 1.8;

    margin-top: 28px;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-top: 34px;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;

    padding: 0 25px;

    border-radius: 7px;

    text-decoration: none;

    font-size: 14px;
    font-weight: 800;

    transition: 0.2s ease;
}

.button-primary {
    background: var(--teal);
    color: white;
}

.button-primary:hover {
    background: var(--teal-light);
    color: #102126;
}

.button-secondary {
    border: 1px solid rgba(255,255,255,0.18);
    color: white;
}

.button-secondary:hover {
    border-color: var(--teal);
    color: var(--teal-light);
}

.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
}

.hero-visual img {
    width: 620px;
    max-width: none;

    margin-left: -10px;
}


/* =========================
   BENEFITS
========================= */

.benefits {
    background: #112027;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 14px;

    min-height: 105px;

    padding: 18px 22px;

    border-right: 1px solid rgba(255,255,255,0.07);
}

.benefit-item:last-child {
    border-right: none;
}

.benefit-icon {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(70,170,168,0.15);
    color: var(--teal-light);

    font-size: 20px;
    font-weight: 500;
}

.benefit-item strong {
    display: block;

    color: var(--white);

    font-size: 13px;
    font-weight: 800;
}

.benefit-item p {
    color: #819298;

    font-size: 11px;

    margin-top: 3px;
}


/* =========================
   GENERAL
========================= */

.section-light {
    background: var(--light-bg);
    color: var(--dark-text);
}

.section-dark {
    background: var(--bg);
    color: var(--text);
}

.section-heading {
    max-width: 850px;
}

.section-heading h2,
.about h2,
.laboratories h2,
.private-attention h2,
.team h2 {
    color: var(--dark-text);

    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.02;

    letter-spacing: -0.045em;
    font-weight: 800;
}

.section-heading p {
    color: var(--dark-muted);

    font-size: 16px;
    line-height: 1.8;

    max-width: 820px;

    margin-top: 24px;
}


/* =========================
   ABOUT
========================= */

.about {
    padding: 95px 0 55px;
}

.about-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;

    gap: 100px;

    align-items: start;
}

.about h2 {
    max-width: 600px;
}

.about-text {
    padding-top: 45px;
}

.about-text p {
    color: var(--dark-muted);

    font-size: 16px;
    line-height: 1.9;

    margin-bottom: 20px;
}

.about-text strong {
    color: var(--dark-text);
}


/* =========================
   SYMPTOMS
========================= */

.symptoms {
    padding: 60px 0 55px;
}

.section-gray {
    background: #e6edef;
}

.symptoms .section-heading h2 {
    color: var(--dark-text);

    font-size: clamp(48px, 5vw, 68px);
    line-height: 1;

    letter-spacing: -0.055em;
}

.symptoms-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 22px;

    margin-top: 50px;
}

.symptom-card {
    min-height: 0;

    padding: 36px;

    background: #f4f7f7;

    border: 1px solid #d2dcde;
    border-radius: 10px;

    transition: 0.2s ease;
}

.symptom-card:hover {
    transform: translateY(-3px);
    border-color: var(--teal);
}

.symptom-card.featured {
    border-color: #52b8b5;
}

.symptom-card h3 {
    color: #213238;

    font-size: 22px;
    line-height: 1.3;

    margin-bottom: 16px;
}

.symptom-card p {
    color: #687b82;

    font-size: 15px;
    line-height: 1.85;

    margin-bottom: 17px;
}


/* =========================
   SÍNTOMAS - CONTENIDO AMPLIADO
========================= */

.symptoms-special {
    margin-top: 75px;
    max-width: 900px;
}

.symptoms-special h2 {
    color: var(--dark-text);

    font-size: clamp(36px, 4vw, 54px);
    line-height: 1.05;

    letter-spacing: -0.045em;

    margin-bottom: 25px;
}

.symptoms-special p {
    color: #52666d;

    font-size: 16px;
    line-height: 1.85;

    margin-bottom: 22px;
}

.symptoms-special strong {
    color: #263b42;
}

.symptoms-quote {
    margin: 35px 0;

    padding: 28px 32px;

    background: #dce7e8;

    border-left: 4px solid var(--teal);

    border-radius: 6px;
}

.symptoms-quote strong {
    color: #263b42;

    font-size: 17px;
    line-height: 1.65;
}

.symptoms-final {
    font-size: 17px !important;
}

/* =========================
   SUPPLEMENTATION
========================= */

.supplementation {
    padding: 55px 0;
}

.supplementation-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;

    gap: 100px;
}

.supplementation-title h2 {
    color: var(--dark-text);

    font-size: clamp(38px, 3.5vw, 48px);
    line-height: 1.05;

    letter-spacing: -0.045em;
    font-weight: 800;

    max-width: 1100px;
}

.supplementation-title h2 span {
    color: var(--teal);
}

.supplementation-content {
    padding-top: 5px;
}

.supplementation-content p {
    color: #50666d;

    font-size: 16px;
    line-height: 1.85;

    margin-bottom: 25px;
}

.quote-box {
    margin-top: 32px;

    padding: 25px 28px;

    background: #dce6e7;

    border-left: 3px solid var(--teal);

    color: #31454b;

    font-size: 15px;
    line-height: 1.7;
}


/* =========================
   LABORATORIES
========================= */

.laboratories {
    padding: 110px 0;
}

.laboratories-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;

    gap: 100px;
}

.laboratories-grid > div:last-child {
    padding-top: 40px;
}

.laboratories h2 {
    max-width: 650px;
}

.laboratories p {
    color: var(--dark-muted);

    font-size: 16px;
    line-height: 1.85;

    margin-bottom: 22px;
}


/* =========================
   TEAM
========================= */

.team {
    padding: 115px 0;
}

.team h2 {
    color: white;

    max-width: 850px;
}

.team .section-heading p {
    color: #9eb0b5;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 16px;

    margin-top: 55px;
}

.team-card {
    padding: 28px;

    background: #182a32;

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 9px;
}

.team-card-icon {
    font-size: 30px;
    margin-bottom: 18px;
}

.team-card strong {
    display: block;

    color: white;

    font-size: 15px;

    margin-bottom: 14px;
}

.team-card p {
    color: #9eb0b5;

    font-size: 13px;
    line-height: 1.7;

    margin-bottom: 16px;
}

.team-card span {
    display: block;

    color: #84989e;

    font-size: 12px;
    line-height: 1.7;

    margin-top: 8px;
}


/* =========================
   PRIVATE ATTENTION
========================= */

.private-attention {
    padding: 100px 0;
}

.private-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;

    gap: 100px;
}

.private-grid > div:last-child {
    padding-top: 35px;
}

.private-attention p {
    color: var(--dark-muted);

    font-size: 16px;
    line-height: 1.8;

    margin-bottom: 18px;
}


/* =========================
   CONTACT
========================= */

.contact {
    padding: 110px 0 120px;

    background:
        linear-gradient(
            120deg,
            #1c6265,
            #102b32
        );
}

.contact-header {
    max-width: 850px;
}

.contact-header .eyebrow {
    color: #c3e4e1;
}

.contact h2 {
    color: white;

    font-size: clamp(48px, 5vw, 70px);
    line-height: 0.98;

    letter-spacing: -0.06em;

    font-weight: 800;
}

.contact h2 span {
    color: var(--teal-light);
}

.contact-header p {
    max-width: 760px;

    color: #c0d1d2;

    font-size: 16px;
    line-height: 1.8;

    margin-top: 28px;
}


/* =========================
   CONTACT METHODS
========================= */

.contact-methods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 18px;

    margin-top: 55px;
}

.contact-method {
    min-height: 150px;

    display: flex;
    align-items: center;

    gap: 18px;

    padding: 25px;

    background: #f7f9f9;

    border-radius: 10px;

    text-decoration: none;

    transition: 0.25s ease;
}

.contact-method:hover {
    transform: translateY(-5px);
    background: white;
}

.contact-icon {
    width: 64px;
    height: 64px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e3eded;
}

.contact-icon svg {
    width: 31px;
    height: 31px;

    fill: #247d7d;
}

.contact-method-text {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.contact-method-text span {
    color: #718187;

    font-size: 12px;
    font-weight: 600;

    margin-bottom: 5px;
}

.contact-method-text strong {
    color: #1c3036;

    font-size: 16px;
    line-height: 1.25;
}

.contact-arrow {
    margin-left: auto;

    color: #247d7d;

    font-size: 25px;
    font-weight: 500;
}


/* =========================
   FOOTER
========================= */

.site-footer {
    background: #081116;
}

.footer-main {
    min-height: 125px;

    display: grid;
    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    gap: 30px;
}

.footer-brand img {
    width: 48px;
    height: 48px;
}

.footer-brand .brand-text strong {
    font-size: 14px;
}

.footer-brand .brand-text span {
    font-size: 10px;
}

.footer-nav {
    display: flex;
    align-items: center;
    gap: 26px;
}

.footer-nav a {
    color: #829298;

    font-size: 12px;

    text-decoration: none;

    transition: 0.2s ease;
}

.footer-nav a:hover {
    color: var(--teal-light);
}

.footer-location {
    justify-self: end;

    color: #718187;

    font-size: 12px;
}

.footer-bottom {
    min-height: 65px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-top: 1px solid rgba(255,255,255,0.07);

    color: #596a70;

    font-size: 11px;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1050px) {

    .main-nav {
        gap: 18px;
    }

    .hero-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hero-visual img {
        width: 560px;
    }

    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .benefit-item:nth-child(2) {
        border-right: none;
    }

    .benefit-item:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255,255,255,0.07);
    }

    .symptoms-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-methods {
        grid-template-columns: 1fr;
    }

    .footer-main {
        grid-template-columns: 1fr;

        padding: 30px 0;
    }

    .footer-nav {
        flex-wrap: wrap;
    }

    .footer-location {
        justify-self: start;
    }
}


@media (max-width: 700px) {

    .container {
        width: min(100% - 32px, 600px);
    }


    /* HEADER */

    .header-inner {
        min-height: 76px;
    }

    .main-nav {
        display: none;
    }

    .header-button {
        padding: 11px 15px;
        font-size: 12px;
    }

    .brand img {
        width: 45px;
        height: 45px;
    }

    .brand-text strong {
        font-size: 15px;
    }

    .brand-text span {
        font-size: 10px;
    }


    /* HERO */

    .hero {
        min-height: auto;
    }

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-content {
        padding: 75px 0 20px;
    }

    .hero h1 {
        font-size: 48px;
    }

    .hero p {
        font-size: 15px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .button {
        width: 100%;
    }

    .hero-visual {
        overflow: hidden;
        margin-top: 15px;
    }

    .hero-visual img {
        width: 500px;
        max-width: 130%;
        margin-left: 0;
    }


    /* BENEFITS */

    .benefits-grid {
        grid-template-columns: 1fr;
    }

    .benefit-item {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.07);
    }

    .benefit-item:last-child {
        border-bottom: none;
    }


    /* SECTIONS */

    .about,
    .symptoms,
    .supplementation {
        padding: 45px 0;
    }

    .laboratories,
    .team,
    .private-attention,
    .contact {
        padding: 80px 0;
    }

    .about-grid,
    .supplementation-grid,
    .laboratories-grid,
    .private-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .about-text,
    .laboratories-grid > div:last-child,
    .private-grid > div:last-child {
        padding-top: 0;
    }


    /* SYMPTOMS */

    .symptoms-grid {
        grid-template-columns: 1fr;
    }

    .symptom-card {
        min-height: auto;
    }


    /* SYMPTOMS SPECIAL */

    .symptoms-special {
        margin-top: 55px;
    }

    .symptoms-quote {
        padding: 22px;
    }

    /* SUPPLEMENTATION */

    .supplementation-title h2 {
        font-size: 48px;
    }


    /* TEAM */

    .team-grid {
        grid-template-columns: 1fr;
    }


    /* CONTACT */

    .contact-method {
        min-height: 125px;
        padding: 20px;
    }

    .contact-icon {
        width: 56px;
        height: 56px;
    }

    .contact-icon svg {
        width: 27px;
        height: 27px;
    }

    .contact-method-text strong {
        font-size: 14px;
    }


    /* FOOTER */

    .footer-nav {
        gap: 15px;
    }

}

/* =========================
   SUPLEMENTACIÓN - SEPARADOR COMPACTO
========================= */

.symptoms {
    padding-bottom: 40px;
}

.supplementation {
    padding: 20px 0 30px;
}

.supplementation-title {
    margin: 0;
}

.supplementation-title h2 {
    margin: 0;
    max-width: 1050px;
    font-size: clamp(36px, 3.2vw, 44px);
    line-height: 1.05;
}

.laboratories {
    padding-top: 55px;
}