/* Sembrando Oportunidades | Estilos institucionales consolidados */
:root {
  --so-forest: #417a5b;
  --so-forest-dark: #35684d;
  --so-forest-hover: #315f46;
  --so-accent: #b5d5bc;
  --so-ink: #26352d;
  --so-muted: #66766d;
  --so-surface: #ffffff;
  --so-background: #fafbf8;
  --so-line: #e1e9e2;
  --so-mist: #eaf3ea;
  --bs-primary: #417a5b;
  --bs-primary-rgb: 65,122,91;
  --bs-success: #417a5b;
  --bs-success-rgb: 65,122,91;
  --bs-body-color: #26352d;
  --bs-body-bg: #fafbf8;
  --bs-border-color: #e1e9e2;
}
html {scroll-behavior:smooth;}
body.so-app {background:var(--so-background); color:var(--so-ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.6;}
/* Top bar: blanca, ligera, accesible */
.so-topbar,.navbar-so {background:rgba(255,255,255,.97)!important;color:var(--so-ink)!important;border-bottom:1px solid var(--so-line)!important;box-shadow:0 2px 16px rgba(32,65,46,.025);}
.so-topbar .navbar {min-height:72px;}
.so-brand,.so-topbar .navbar-brand,.so-topbar .nav-link {color:var(--so-ink)!important;}
.so-brand {font-weight:550;letter-spacing:-.035em;font-size:1.08rem;}
.so-brand:hover,.so-topbar .nav-link:hover {color:var(--so-forest)!important;}
.so-brand-mark {display:inline-flex;align-items:center;justify-content:center;background:var(--so-mist);border-radius:12px;width:38px;height:38px;margin-right:8px;}
.so-topbar .nav-link {font-weight:500;font-size:.93rem;}
.so-topbar .navbar-toggler {background:#fff;border-color:var(--so-line);}
.so-user-label {color:var(--so-muted);font-size:.86rem;}
.so-user-label strong {color:var(--so-ink);}
.so-login-btn {color:var(--so-forest)!important;background:var(--so-mist);border:1px solid #dceade;padding:.48rem 1rem;border-radius:999px;font-weight:600;}
.so-login-btn:hover {color:#fff!important;background:var(--so-forest);border-color:var(--so-forest);}
.so-sidebar-toggle {color:var(--so-forest);border:1px solid var(--so-line);background:var(--so-mist);border-radius:10px;}
.so-sidebar-toggle:hover {color:var(--so-forest-dark);background:#dcebdd;}
.so-topbar .btn-outline-light {color:var(--so-forest);border-color:#c8dacd;border-radius:999px;}
.so-topbar .btn-outline-light:hover {background:var(--so-mist);color:var(--so-forest-dark);border-color:var(--so-accent);}
/* Workspace y navegación interna */
.so-workspace {display:flex;min-height:calc(100vh - 72px);}
.so-sidebar {--bs-offcanvas-width:264px;width:264px;flex:0 0 264px;background:#fff;border-right:1px solid var(--so-line);}
.so-sidebar .offcanvas-body {overflow-y:auto;}
.so-sidebar-heading {padding:.65rem .65rem 1.1rem;border-bottom:1px solid var(--so-line);}
.so-sidebar-eyebrow {color:#7c8c80;font-size:.67rem;font-weight:700;letter-spacing:.11em;margin-bottom:.4rem;}
.so-nav-group-label {font-size:.67rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#88978d;margin:1.45rem .75rem .5rem;}
.so-side-link {display:flex;align-items:center;gap:.75rem;padding:.72rem .85rem;margin-bottom:.25rem;border-radius:12px;color:#516357;text-decoration:none;font-size:.92rem;transition:background-color .16s,color .16s;}
.so-side-link:hover {background:#f2f7f2;color:var(--so-forest-dark);}
.so-side-link.active {background:var(--so-mist);color:var(--so-forest-dark);font-weight:650;box-shadow:none;}
.so-side-disabled {color:#9aa69e;cursor:default;flex-wrap:wrap;}
.so-side-disabled:hover {background:transparent;color:#9aa69e;}
.so-side-disabled small {font-size:.7rem;}
.so-sidebar-footer {border-top:1px solid var(--so-line);padding-top:1rem;}
.so-workspace-content {flex:1;min-width:0;background:var(--so-background);}
.so-workspace-content main {padding:0;}
.so-workspace-content .container {max-width:1320px;}
/* Tipografía, superficies y tarjetas */
h1,h2,h3,h4,h5,h6 {color:var(--so-ink);letter-spacing:-.025em;}
h1 {font-weight:680;}
p {line-height:1.7;}
.card,.card-so {background:#fff;border:1px solid var(--so-line)!important;border-radius:17px;box-shadow:0 6px 24px rgba(41,77,53,.035)!important;}
.card-header {background:#fcfdfb;border-bottom:1px solid var(--so-line);}
.card-so {padding:1.5rem;}
.modal-content {border:1px solid var(--so-line);border-radius:18px;box-shadow:0 20px 65px rgba(38,53,45,.12);}
.modal-header,.modal-footer {border-color:var(--so-line);}
/* Acciones: verde solo cuando importa */
.btn {border-radius:10px;font-weight:550;transition:background-color .15s,border-color .15s,box-shadow .15s;}
.btn-so,.btn-primary,.btn-success {background:var(--so-forest)!important;border-color:var(--so-forest)!important;color:#fff!important;}
.btn-so:hover,.btn-primary:hover,.btn-success:hover {background:var(--so-forest-hover)!important;border-color:var(--so-forest-hover)!important;}
.btn-outline-primary,.btn-outline-success {color:var(--so-forest);border-color:#b9d1bf;}
.btn-outline-primary:hover,.btn-outline-success:hover {color:#fff;background:var(--so-forest);border-color:var(--so-forest);}
.btn-secondary {background:#edf1ed;border-color:#e3eae3;color:#44574a;}
.btn-secondary:hover {background:#e0e8e0;border-color:#d2ded3;color:#26352d;}
.btn:focus-visible,.so-side-link:focus-visible,a:focus-visible {outline:3px solid #a7cbb0;outline-offset:2px;box-shadow:none;}
.form-control,.form-select {border-color:#dbe5dc;border-radius:10px;padding:.62rem .78rem;background-color:#fff;}
.form-control:focus,.form-select:focus {border-color:#83b293;box-shadow:0 0 0 .2rem rgba(65,122,91,.11);}
.form-label {font-weight:550;color:#405247;}
a {color:var(--so-forest);}
a:hover {color:var(--so-forest-dark);}
/* Tablas, estados y mensajes */
.table {--bs-table-bg:transparent;--bs-table-hover-bg:#f7faf7;color:var(--so-ink);}
.table thead th {background:#f5f8f5!important;color:#526458;font-size:.83rem;font-weight:650;border-bottom-color:var(--so-line);}
.table td,.table th {padding:.9rem .85rem;border-bottom-color:#e9efe9;}
.badge.text-bg-success {background:#e5f2e8!important;color:#286545!important;}
.badge.text-bg-info {background:#e8f1f3!important;color:#376875!important;}
.alert-success {background:#edf7ee;border-color:#d3e8d6;color:#2d6643;}
.alert-danger {background:#fff1ef;border-color:#f4d8d3;color:#963f37;}
/* Pie discreto */
.so-footer,.footer-so {background:#f5f8f4!important;color:#5b6b61!important;border-top:1px solid var(--so-line);padding:1.35rem 0;}
.so-footer strong,.footer-so strong {color:var(--so-ink);}
.so-footer-private {border-top:1px solid var(--so-line);}
/* Componentes existentes que podrían conservar fondos oscuros */
.bg-success-subtle {background:#eaf3ea!important;}
.text-success {color:var(--so-forest)!important;}
@media (max-width:991.98px) {
  .so-sidebar {width:var(--bs-offcanvas-width);}
  .so-sidebar .offcanvas-body {display:flex;}
  .so-workspace {display:block;}
  .so-workspace-content {width:100%;}
  .so-topbar .navbar {min-height:64px;}
}
@media (max-width:575.98px) {
  .so-brand {font-size:.9rem;}
  .so-brand-mark {width:32px;height:32px;}
  .card-so {padding:1rem;}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto;}
  *,*::before,*::after {transition-duration:.01ms!important;animation-duration:.01ms!important;}
}

/* Secciones públicas */
.section-so {padding-top:clamp(3.5rem,6vw,5.5rem);padding-bottom:clamp(3.5rem,6vw,5.5rem);}
.section-so .section-title-so {color:#26352d!important;font-weight:720;letter-spacing:-.035em;}
.section-so .card-so {height:100%;transition:transform .2s ease,box-shadow .2s ease;}
.section-so .card-so:hover {transform:translateY(-2px);box-shadow:0 12px 28px rgba(41,77,53,.065)!important;}

/* ==============================================================
   v3 — Verde institucional exclusivamente en header y footer.
   Mantiene la portada clara y el menú lateral minimalista.
   ============================================================== */
:root { --so-chrome: #245c45; --so-chrome-deep: #1d4938; }
.so-topbar, .navbar-so {
  background: var(--so-chrome) !important;
  color: #fff !important;
  border-bottom: 1px solid var(--so-chrome-deep) !important;
  box-shadow: 0 3px 16px rgba(24, 63, 46, .12);
}
.so-topbar .so-brand,
.so-topbar .navbar-brand,
.so-topbar .navbar-brand strong,
.so-topbar .nav-link,
.so-topbar .so-user-label,
.so-topbar .so-user-label strong { color: #fff !important; }
.so-topbar .nav-link:hover,
.so-topbar .nav-link:focus-visible,
.so-topbar .so-brand:hover { color: #e0f0df !important; }
.so-topbar .so-brand-mark { background: rgba(255,255,255,.16); }
.so-topbar .so-login-btn {
  background: #f3f8f1;
  color: #245c45 !important;
  border-color: #f3f8f1;
}
.so-topbar .so-login-btn:hover { background: #e0f0df; color: #1d4938 !important; border-color: #e0f0df; }
.so-topbar .btn-outline-light { color: #fff; border-color: rgba(255,255,255,.75); }
.so-topbar .btn-outline-light:hover { background: #fff; color: #245c45; border-color: #fff; }
.so-topbar .so-sidebar-toggle { color: #245c45; background: #f3f8f1; border-color: #f3f8f1; }
.so-topbar .navbar-toggler { background: #f3f8f1; border-color: rgba(255,255,255,.5); }
.so-footer, .footer-so {
  background: var(--so-chrome) !important;
  color: #edf7ef !important;
  border-top: 1px solid var(--so-chrome-deep);
  padding: 1.6rem 0;
}
.so-footer strong, .footer-so strong { color: #fff !important; }
.so-footer .small, .footer-so .small { color: #d8e9dd !important; }
.so-footer-private { border-top-color: var(--so-chrome-deep); }

/* Galería de métodos hidropónicos */
.so-method-card { padding:0 !important; overflow:hidden; display:flex; flex-direction:column; }
.so-method-image { width:100%; aspect-ratio: 880 / 390; height:auto; object-fit:cover; display:block; background:#eef4eb; }
.so-method-body { padding:1.35rem 1.4rem 1.5rem; flex:1; }
.so-method-body h3 { color:#263e33; font-size:1.3rem; font-weight:700; }
.so-method-body p { color:#5e7067; line-height:1.65; margin-bottom:0; }
.so-method-body .text-success { color:#3d8060 !important; font-size:.78rem; letter-spacing:.07em; }
@media(max-width:575.98px){ .so-method-body{padding:1.15rem;} }


/* ================================================
   SEMBRANDO OPORTUNIDADES
   Portada pública definitiva
   ================================================ */

.hero-so.hero-so-light {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 640px;
    padding: 0 !important;
    background: #f8faf6 !important;
    color: #26352d !important;
}

/* Fotografía extendida hasta el borde derecho */
.hero-so-light .so-hero-visual {
    position: absolute;
    z-index: 0;
    inset: 0 0 0 38%;
    overflow: hidden;
}

.hero-so-light .so-hero-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Degradado entre texto y fotografía */
.hero-so.hero-so-light::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        #f8faf6 0%,
        #f8faf6 26%,
        rgba(248, 250, 246, .99) 34%,
        rgba(248, 250, 246, .92) 41%,
        rgba(248, 250, 246, .62) 50%,
        rgba(248, 250, 246, .18) 62%,
        transparent 76%
    );
}

/* Hojas decorativas */
.hero-so.hero-so-light::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 0;
    width: 230px;
    pointer-events: none;
    opacity: .35;
    background: url("../img/hojas-decorativas.svg")
                left center / 230px auto no-repeat;
}

/* Contenedor y contenido */
.hero-so-light .hero-so-container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1320px;
    padding-top: 80px;
    padding-bottom: 80px;
}

.hero-so-light .so-hero-content {
    position: relative;
    max-width: 540px;
}

.hero-so-light .hero-so-eyebrow {
    margin-bottom: 1.5rem;
    color: #417a5b !important;
    font-size: .78rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .13em;
}

.hero-so-light h1 {
    margin: 0 0 1.5rem;
    color: #1c342a !important;
    font-size: clamp(3rem, 4.2vw, 4.5rem);
    font-weight: 750;
    line-height: 1.08;
    letter-spacing: -.045em;
}

.hero-so-light h1 span {
    display: block;
    color: #417a5b !important;
}

.hero-so-light .hero-so-lead {
    max-width: 510px;
    margin-bottom: 1.1rem;
    color: #263c32 !important;
    font-size: clamp(1.15rem, 1.5vw, 1.4rem);
    line-height: 1.55;
}

.hero-so-light .hero-so-description {
    max-width: 490px;
    margin-bottom: 1.8rem;
    color: #5e7065 !important;
    font-size: 1rem;
    line-height: 1.75;
}

.hero-so-light .hero-so-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.hero-so-light .hero-so-actions .btn {
    border-radius: 999px;
    padding: .85rem 1.35rem;
    font-size: .94rem;
}

/* Tabletas y móviles */
@media (max-width: 991.98px) {
    .hero-so.hero-so-light {
        display: block;
        min-height: 0;
        padding-bottom: 300px !important;
    }

    .hero-so-light .hero-so-container {
        padding-top: 55px;
        padding-bottom: 40px;
    }

    .hero-so-light .so-hero-content {
        max-width: 680px;
    }

    .hero-so-light .so-hero-visual {
        inset: auto 0 0 0;
        height: 330px;
    }

    .hero-so.hero-so-light::before {
        background: linear-gradient(
            180deg,
            #f8faf6 0%,
            #f8faf6 45%,
            rgba(248,250,246,.94) 58%,
            transparent 85%
        );
    }

    .hero-so.hero-so-light::after {
        width: 130px;
        opacity: .18;
        background-size: 130px auto;
    }
}

@media (max-width: 575.98px) {
    .hero-so.hero-so-light {
        padding-bottom: 230px !important;
    }

    .hero-so-light .hero-so-container {
        padding-top: 40px;
        padding-bottom: 30px;
    }

    .hero-so-light h1 {
        font-size: clamp(2.5rem, 10vw, 3.2rem);
    }

    .hero-so-light .so-hero-visual {
        height: 260px;
    }

    .hero-so-light .hero-so-actions .btn {
        width: 100%;
    }

    .hero-so.hero-so-light::after {
        width: 85px;
        background-size: 85px auto;
    }
}

