:root {
    --green-900: #0c2c1f;   /* forest, hero bg */
    --green-800: #123b2a;   /* dark cards */
    --green-700: #1c5138;
    --green-500: #2f8f5b;   /* primary green */
    --lime-500:  #7cc243;   /* bright accent */
    --lime-400:  #93d155;
    --mint-100:  #eaf5e6;   /* soft section bg */
    --mint-50:   #f4faf1;
    --ink:       #1e2a22;
    --muted:     #5f6f65;
    --line:      #e2ece0;
    --white:     #ffffff;
}

* { box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, Segoe UI, Roboto, sans-serif;
    color: var(--ink);
    background: var(--white);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h3, h4 {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 700;
    color: var(--green-900);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

h1, h2 {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    color: var(--green-900);
    line-height: 1.12;
    letter-spacing: -0.005em;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }

/* Título de página con acento */
main > section:first-of-type h1 {
    position: relative;
    padding-bottom: .9rem;
    margin-bottom: 1.6rem;
}
main > section:first-of-type h1::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 64px; height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--lime-500), var(--green-500));
}
.hero-dark h1::after { background: linear-gradient(90deg, var(--lime-400), #fff); }

a { color: var(--green-700); text-decoration: none; }
a:hover { color: var(--lime-500); }

.text-muted { color: var(--muted) !important; }
.lead-muted { color: var(--muted); font-size: 1.06rem; }

/* ---------- Eyebrow pill ---------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--mint-100);
    color: var(--green-700);
    border-radius: 50px;
    padding: .35rem .9rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .72rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.eyebrow::before {
    content: "\2731";
    color: var(--lime-500);
    font-size: .85rem;
}
.hero-dark .eyebrow {
    background: rgba(255,255,255,.1);
    color: #d7ead0;
}

/* ---------- Nav ---------- */
.site-nav {
    border-bottom: 1px solid var(--line);
    padding: .7rem 0;
    background: rgba(255,255,255,.9);
    backdrop-filter: saturate(180%) blur(10px);
    box-shadow: 0 1px 0 rgba(12,44,31,.04), 0 8px 24px -16px rgba(12,44,31,.25);
}
.site-nav .navbar-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding-top: 0;
    padding-bottom: 0;
}
.brand-mark {
    width: 40px; height: 40px;
    border-radius: 11px;
    background: linear-gradient(150deg, var(--green-600, var(--green-500)), var(--green-900));
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .02em;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(12,44,31,.18);
}
.brand-text {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--green-900);
    letter-spacing: .005em;
}
.brand-sub { font-weight: 400; font-style: italic; color: var(--green-500); }
@media (max-width: 400px) { .brand-text { font-size: 1rem; } }
.site-nav .container { flex-wrap: nowrap; gap: 1rem; }
.desktop-nav { gap: .15rem; }
.site-nav .navbar-nav { gap: .15rem; }
.site-nav .nav-item .nav-link {
    position: relative;
    color: var(--ink);
    font-weight: 500;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .11em;
    padding: .5rem .95rem;
    transition: color .18s ease;
}
.site-nav .nav-item .nav-link::after {
    content: "";
    position: absolute;
    left: .95rem; right: .95rem; bottom: .15rem;
    height: 2px;
    background: linear-gradient(90deg, var(--lime-500), var(--green-500));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}
.site-nav .nav-item .nav-link:hover,
.site-nav .nav-item .nav-link.active { color: var(--green-900); }
.site-nav .nav-item .nav-link:hover::after,
.site-nav .nav-item .nav-link.active::after { transform: scaleX(1); }

.lang-toggle {
    font-size: .72rem;
    letter-spacing: .08em;
    border: 1px solid var(--line);
    border-radius: 50px;
    padding: .4rem .85rem !important;
    margin-left: .6rem;
}
.lang-toggle::after { display: none !important; }
.lang-toggle:hover { border-color: var(--green-500); background: var(--mint-50); }
@media (min-width: 992px) {
    .site-nav .navbar-nav { align-items: center; }
    .lang-toggle { margin-left: 1rem; }
}
@media (max-width: 991px) {
    .site-nav .nav-item .nav-link::after { display: none; }
    .lang-toggle { margin-left: 0; }
    .site-nav .container { justify-content: space-between; }
}

/* ---------- Buttons ---------- */
.btn {
    border-radius: 50px;
    font-weight: 600;
    letter-spacing: .01em;
    font-size: .9rem;
    padding: .8rem 1.9rem;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--lime-500); border-color: var(--lime-500); color: var(--green-900); }
.btn-primary:hover { background: var(--lime-400); border-color: var(--lime-400); color: var(--green-900); box-shadow: 0 10px 24px rgba(124,194,67,.35); }
.btn-outline-primary { color: var(--green-800); border-color: var(--green-800); }
.btn-outline-primary:hover { background: var(--green-800); border-color: var(--green-800); color: #fff; }
.btn-gold { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.btn-gold:hover { background: var(--green-800); border-color: var(--green-800); color: #fff; }
.hero-dark .btn-outline-primary { color: #fff; border-color: rgba(255,255,255,.5); }
.hero-dark .btn-outline-primary:hover { background: #fff; color: var(--green-900); border-color: #fff; }
.btn-sm { padding: .55rem 1.3rem; font-size: .82rem; }

/* ---------- Sections ---------- */
section { padding: 5rem 0; }
.section-soft { background: var(--mint-50); }
.section-mint { background: var(--mint-100); }

/* Encabezado de páginas internas (crea contraste con el navbar) */
.page-head {
    background:
        radial-gradient(circle at 88% 0%, rgba(124,194,67,.16), transparent 55%),
        linear-gradient(180deg, var(--mint-100), var(--mint-50));
    border-bottom: 1px solid var(--line);
    padding: 3.4rem 0 2.8rem;
}
.page-head h1 { margin-bottom: .5rem; }
.page-head .lead-muted { margin-bottom: 0; max-width: 640px; }
.page-head .eyebrow { background: #fff; box-shadow: 0 2px 10px rgba(12,44,31,.06); }

/* ---------- Hero ---------- */
.hero {
    padding: 5.5rem 0;
}
.hero-dark {
    background:
        radial-gradient(circle at 12% 20%, rgba(124,194,67,.22), transparent 45%),
        radial-gradient(circle at 90% 80%, rgba(47,143,91,.28), transparent 50%),
        linear-gradient(150deg, var(--green-900), var(--green-800));
    color: #eaf3e6;
}
.hero-dark h1, .hero-dark .tagline { color: #fff; }
.hero-dark .lead-muted { color: #c3d8bb; }
.hero .subtitle {
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .85rem;
    color: var(--lime-400);
    font-weight: 700;
}
.hero .tagline {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 5.2vw, 3.6rem);
    line-height: 1.1;
    letter-spacing: -0.005em;
    margin: 1rem 0 1.3rem;
}
.hero-photo {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 20px;
    background: rgba(255,255,255,.06);
}
.about-photo {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 20px;
    background: var(--mint-50);
}
.hero-photo-placeholder {
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: .9rem; text-align: center;
    border: 1px dashed var(--line);
}
.hero-dark .hero-photo-placeholder { color: #9db995; border-color: rgba(255,255,255,.25); }

/* ---------- Stat chips ---------- */
.stat-chip {
    display: inline-flex; align-items: center; gap: .6rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    padding: .8rem 1.1rem;
    color: #fff;
}
.stat-chip .n { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.25rem; }
.stat-chip .l { font-size: .78rem; color: #b9d0b0; }
.stat-chip .tick {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--lime-500); color: var(--green-900);
    display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700;
}

/* ---------- Service cards (3-tone, ref style) ---------- */
.svc-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 2.2rem 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow .22s, transform .22s;
}
.svc-card:hover { box-shadow: 0 20px 44px rgba(12,44,31,.12); transform: translateY(-4px); }
.svc-card h3 { font-size: 1.2rem; margin-bottom: .7rem; }
.svc-card p { font-size: .94rem; margin-bottom: 1.6rem; }
.svc-card .svc-body { flex-grow: 1; }
.svc-card::after {   /* decorative corner arc */
    content: "";
    position: absolute;
    right: -70px; bottom: -70px;
    width: 170px; height: 170px;
    border-radius: 50%;
    background: currentColor;
    opacity: .06;
}

.svc-icon { width: 40px; height: 40px; margin-bottom: 1.2rem; display: block; }

/* -- Light -- */
.svc-card--light { background: var(--mint-50); color: var(--green-900); }
.svc-card--light h3 { color: var(--green-900); }
.svc-card--light p { color: var(--muted); }
.svc-card--light .svc-icon { color: var(--green-800); }

/* -- Lime -- */
.svc-card--lime {
    background: linear-gradient(150deg, #9bd85f, #7cc243);
    border-color: transparent;
    color: var(--green-900);
}
.svc-card--lime h3 { color: var(--green-900); }
.svc-card--lime p { color: #1f3d24; }
.svc-card--lime .svc-icon { color: var(--green-900); }

/* -- Dark -- */
.svc-card--dark { background: var(--green-800); border-color: transparent; color: #eaf3e6; }
.svc-card--dark h3 { color: #fff; }
.svc-card--dark p { color: #bcd3b3; }
.svc-card--dark .svc-icon { color: var(--lime-400); }

/* -- "Explore More" pill link -- */
.svc-link {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: .4rem;
    border-radius: 50px;
    padding: .5rem 1.1rem;
    font-size: .82rem; font-weight: 600;
    border: 1px solid;
    transition: background .18s, color .18s;
}
.svc-card--light .svc-link { background: #fff; border-color: var(--line); color: var(--green-900); }
.svc-card--light .svc-link:hover { background: var(--green-800); border-color: var(--green-800); color: #fff; }
.svc-card--lime .svc-link { background: var(--green-900); border-color: var(--green-900); color: #fff; }
.svc-card--lime .svc-link:hover { background: #fff; border-color: #fff; color: var(--green-900); }
.svc-card--dark .svc-link { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.svc-card--dark .svc-link:hover { background: var(--lime-500); border-color: var(--lime-500); color: var(--green-900); }

/* ---------- Experience ---------- */
.exp-block {
    border-left: 3px solid var(--lime-500);
    padding-left: 1.5rem;
    margin-bottom: 2.5rem;
}
.exp-block h3 { font-size: 1.18rem; margin-bottom: .2rem; }
.exp-block .org { color: var(--muted); font-size: .9rem; margin-bottom: .8rem; }
.exp-list { list-style: none; padding: 0; margin: 0; }
.exp-list li { position: relative; padding-left: 1.6rem; margin-bottom: .45rem; font-size: .95rem; }
.exp-list li::before {
    content: "\2713"; position: absolute; left: 0; top: .05rem;
    width: 1.1rem; height: 1.1rem; border-radius: 50%;
    background: var(--mint-100); color: var(--green-500);
    font-size: .7rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* ---------- Recognition ---------- */
.rec-item { display: flex; gap: 1rem; padding: 1.4rem; background: #fff; border: 1px solid var(--line); border-radius: 16px; margin-bottom: 1rem; }
.rec-star { color: var(--lime-500); font-size: 1.3rem; line-height: 1.4; }
.rec-item h3 { font-size: 1.05rem; margin-bottom: .15rem; }
.rec-item .sub { color: var(--muted); font-size: .88rem; margin-bottom: .3rem; }
.rec-item p { margin: 0; font-size: .95rem; }

/* ---------- Profile ---------- */
.profile-photo {
    width: 100%; max-width: 360px;
    aspect-ratio: 4 / 5; object-fit: cover; object-position: center 15%;
    border-radius: 20px; background: var(--mint-50);
}
.info-list { list-style: none; padding: 0; }
.info-list li { padding: .35rem 0; font-size: .95rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.info-list li:last-child { border-bottom: 0; }

/* ---------- CTA band ---------- */
.cta-band {
    background:
        radial-gradient(circle at 80% 20%, rgba(124,194,67,.25), transparent 45%),
        linear-gradient(120deg, var(--green-900), var(--green-700));
    color: #fff;
    border-radius: 24px;
    padding: 3rem;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #c9ddc0; }

/* ---------- Gallery ---------- */
.gallery-grid { column-count: 3; column-gap: 16px; }
.gallery-grid img {
    width: 100%; height: auto; display: block;
    margin-bottom: 16px;
    border-radius: 14px; cursor: pointer;
    break-inside: avoid;
    transition: opacity .2s, transform .2s;
}
.gallery-grid img:hover { opacity: .92; transform: translateY(-2px); }
@media (max-width: 991px) { .gallery-grid { column-count: 2; } }
@media (max-width: 575px) { .gallery-grid { column-count: 1; } }
.lightbox {
    position: fixed; inset: 0; background: rgba(12,44,31,.93);
    display: none; align-items: center; justify-content: center; z-index: 1080; padding: 2rem;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 90vh; border-radius: 14px; }
.lightbox-close { position: absolute; top: 1.2rem; right: 1.6rem; color: #fff; font-size: 2rem; cursor: pointer; }

/* ---------- Forms ---------- */
.form-control, .form-select {
    border-radius: 12px;
    border-color: var(--line);
    padding: .75rem .95rem;
    font-size: .95rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--green-500);
    box-shadow: 0 0 0 .18rem rgba(47,143,91,.15);
}
.form-label { font-weight: 500; font-size: .9rem; }
.contact-info-box {
    background: var(--green-800);
    color: #eaf3e6;
    border-radius: 20px;
    padding: 2rem;
}
.contact-info-box a { color: #fff; }
.contact-info-box a:hover { color: var(--lime-400); }
.contact-info-box .footer-connect { color: var(--lime-400); }
.contact-info-box .label { text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--lime-400); font-weight: 700; margin-top: 1.1rem; }
.contact-info-box .text-muted { color: #b9d0b0 !important; }
.alert { border-radius: 12px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--green-900); color: #c3d5bc; padding: 3.5rem 0 2rem; }
.site-footer h2, .site-footer .footer-brand { color: #fff; }
.site-footer a { color: #c3d5bc; }
.site-footer a:hover { color: var(--lime-400); }
.footer-brand { font-family: 'Playfair Display', Georgia, serif; font-size: 1.4rem; letter-spacing: .01em; margin-bottom: .5rem; }
.footer-brand .brand-sub { font-style: italic; font-weight: 400; color: var(--lime-400); }
.footer-connect { text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; color: var(--lime-400); font-weight: 700; margin-bottom: .5rem; }
.footer-links li { margin-bottom: .35rem; font-size: .92rem; }
.footer-hr { border-color: rgba(255,255,255,.12); margin: 2rem 0 1.25rem; }

/* ---------- Navegación inferior (móvil, estilo app) ---------- */
.bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1091;
    display: flex;
    background: rgba(255,255,255,.96);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px -12px rgba(12,44,31,.3);
    padding: 6px max(8px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom));
}
.bn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 7px 2px 5px;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--muted);
    border-radius: 14px;
    transition: color .16s ease, background .16s ease;
}
.bn-item svg { width: 23px; height: 23px; }
.bn-item span { line-height: 1; }
.bn-item.active {
    color: var(--green-900);
    background: var(--mint-100);
}
.bn-item.active svg { color: var(--green-600, var(--green-500)); stroke-width: 2; }
.bn-item:active { background: var(--mint-50); }

@media (max-width: 991px) {
    body { padding-bottom: 70px; }
    .site-footer { margin-bottom: 0; }
}

/* ---------- Botones flotantes (redes) ---------- */
.floating-social {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fs-btn {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green-800);
    background: #fff;
    border: 1.5px solid var(--lime-500);
    box-shadow: 0 6px 20px rgba(12,44,31,.28), 0 0 0 4px rgba(124,194,67,.18);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.fs-btn svg { width: 26px; height: 26px; }
.fs-btn:hover {
    color: var(--green-900);
    background: var(--lime-500);
    border-color: var(--lime-500);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 28px rgba(124,194,67,.5);
}
.fs-btn::after { content: none; }
@media (max-width: 991px) {
    .floating-social { right: 14px; bottom: calc(78px + env(safe-area-inset-bottom)); gap: 10px; }
    .fs-btn { width: 48px; height: 48px; }
    .fs-btn svg { width: 23px; height: 23px; }
}

@media (max-width: 767px) {
    section { padding: 3.2rem 0; }
    .hero, .hero-dark { padding: 3.2rem 0; }
    .cta-band { padding: 2rem; }
}