:root{
  --bg:#f3f6f9;--surface:#fff;--text:#17242d;--text-soft:#667782;--muted:#94a3ad;
  --primary:#0b7169;--secondary:#2563d9;--border:#e1e8ed;
  --shadow:0 14px 35px rgba(17,37,52,.07);--radius-lg:18px
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{min-height:100vh;font-family:"Segoe UI",Inter,Roboto,Arial,sans-serif;font-size:14px;line-height:1.55;color:var(--text);background:radial-gradient(circle at 5% 5%,rgba(37,99,217,.05),transparent 25%),var(--bg);-webkit-font-smoothing:antialiased}

.hero{min-height:185px;display:flex;align-items:center;padding:42px 24px 56px;color:#fff;background:linear-gradient(120deg,#073f43,#0b7169 44%,#285ed1);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;width:360px;height:360px;right:-100px;top:-230px;border-radius:50%;background:rgba(255,255,255,.09);filter:blur(10px)}
.hero-content{width:min(1180px,100%);margin:auto;position:relative;z-index:2}
.brand{display:flex;align-items:center;gap:18px}
.brand-icon{width:58px;height:58px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:35px;border-radius:16px;background:rgba(255,255,255,.12);box-shadow:0 8px 20px rgba(0,0,0,.12);backdrop-filter:blur(8px)}
.brand h1{font-size:clamp(1.8rem,3vw,2.55rem);font-weight:720;letter-spacing:-.04em;margin-bottom:4px}
.brand p{max-width:760px;color:rgba(255,255,255,.82);font-size:.91rem}

main{width:min(1180px,calc(100% - 34px));margin:-27px auto 70px;position:relative;z-index:10}
.search-panel,.dashboard{background:rgba(255,255,255,.97);border:1px solid rgba(211,221,228,.9);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.search-panel{padding:25px;margin-bottom:18px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px}
.eyebrow,.panel-kicker{display:block;margin-bottom:4px;color:var(--primary);font-size:.68rem;font-weight:750;letter-spacing:.11em}
.section-heading h2{font-size:1.15rem;letter-spacing:-.02em}
.status-chip{padding:6px 10px;border-radius:30px;background:#edf8f5;color:#176b63;font-size:.72rem;white-space:nowrap}

.field label{display:block;margin-bottom:6px;color:#40535e;font-size:.76rem;font-weight:650}
input,textarea{width:100%;border:1px solid #d8e2e8;border-radius:10px;background:#f9fbfc;color:var(--text);font-family:inherit;font-size:.83rem;padding:11px 13px;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}
textarea{min-height:75px;resize:vertical}
input:focus,textarea:focus{background:#fff;border-color:rgba(37,99,217,.52);box-shadow:0 0 0 4px rgba(37,99,217,.07)}
input::placeholder,textarea::placeholder{color:#a0adb8}

.global-search-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}
.secondary-button{height:40px;padding:0 18px;border:1px solid #d3dee5;border-radius:9px;background:#fff;color:#31515e;font-family:inherit;font-size:.79rem;font-weight:650;cursor:pointer;transition:.2s}
.secondary-button:hover{background:#f4f8fa;border-color:#b9cad3;transform:translateY(-1px)}
.secondary-button:disabled{opacity:.55;cursor:wait}
.search-results{margin-top:12px;border:1px solid #dce5ea;border-radius:11px;overflow:hidden;background:#fff;box-shadow:0 10px 25px rgba(17,37,52,.07)}
.place-result{display:flex;justify-content:space-between;align-items:center;gap:15px;width:100%;padding:12px 14px;border:0;border-bottom:1px solid #edf1f3;background:#fff;text-align:left;cursor:pointer}
.place-result:last-child{border-bottom:0}.place-result:hover{background:#f4f9f8}
.place-main{display:block;color:#243a45;font-size:.78rem;font-weight:650}
.place-detail{display:block;margin-top:2px;color:#7b8b95;font-size:.68rem}
.place-type{flex-shrink:0;padding:4px 7px;border-radius:20px;background:#eef5f8;color:#607984;font-size:.61rem}
.place-empty{padding:14px;color:#7a8993;font-size:.76rem}
.selected-place{margin-top:12px;padding:11px 13px;border:1px solid #cee9e2;border-radius:10px;background:#f0faf7}
.selected-place strong{display:block;color:#216a62;font-size:.76rem}
.selected-place span{display:block;margin-top:2px;color:#5f7772;font-size:.68rem}
.need-field{margin-top:17px}

.search-actions{display:flex;align-items:center;gap:15px;margin-top:16px}
#analizar{height:40px;display:inline-flex;align-items:center;gap:14px;padding:0 17px;border:0;border-radius:9px;background:linear-gradient(110deg,var(--primary),var(--secondary));color:#fff;font-family:inherit;font-size:.79rem;font-weight:650;cursor:pointer;box-shadow:0 8px 18px rgba(37,99,217,.17)}
#analizar:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 11px 24px rgba(37,99,217,.23)}
#analizar:disabled{opacity:.45;cursor:not-allowed;transform:none}
.process-status{color:var(--text-soft);font-size:.76rem}

.dashboard{padding:25px;animation:dashboardEntrada .45s ease-out}
.hidden{display:none!important}
.dashboard-header{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:20px}
.dashboard-header h2{margin-bottom:2px;font-size:1.45rem;letter-spacing:-.03em}
.dashboard-header p{color:var(--text-soft);font-size:.79rem}
.dashboard-meta{display:flex;align-items:center;gap:9px;color:var(--text-soft);font-size:.68rem}
.dashboard-meta strong,.dashboard-meta span{display:block}
.live-dot{width:8px;height:8px;border-radius:50%;background:#18a67b;box-shadow:0 0 0 5px rgba(24,166,123,.10)}

.metrics-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:20px}
.metric-card{display:flex;align-items:center;gap:10px;padding:14px;min-width:0;background:linear-gradient(145deg,#fff,#f8fafc);border:1px solid var(--border);border-radius:13px;box-shadow:0 5px 15px rgba(17,37,52,.04)}
.metric-card:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(17,37,52,.08)}
.metric-icon{width:37px;height:37px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:11px;background:#f0f5f8;font-size:18px}
.metric-label{display:block;color:var(--text-soft);font-size:.67rem}
.metric-value{display:block;margin:1px 0;color:#16313c;font-size:1.22rem;line-height:1.15}
.metric-card small{color:#9aa8b2;font-size:.59rem}

.dashboard-tabs{display:flex;gap:3px;padding:4px;margin-bottom:18px;overflow-x:auto;border:1px solid var(--border);border-radius:11px;background:#f4f7f9}
.tab-button{padding:8px 13px;flex-shrink:0;border:0;border-radius:8px;background:transparent;color:#687983;font-family:inherit;font-size:.72rem;font-weight:600;cursor:pointer}
.tab-button:hover{color:var(--primary);background:rgba(255,255,255,.8)}
.tab-button.active{background:#fff;color:var(--primary);box-shadow:0 2px 9px rgba(17,37,52,.08)}

.workspace-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.7fr);gap:15px;margin-bottom:15px}
.content-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-bottom:15px}
.panel{background:#fff;border:1px solid var(--border);border-radius:13px;padding:17px;box-shadow:0 5px 18px rgba(17,37,52,.035)}
.panel-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.panel-header h3{font-size:.9rem;letter-spacing:-.01em}
.source-badge{padding:4px 7px;border-radius:20px;background:#edf4ff;color:#3565ad;font-size:.61rem;white-space:nowrap}
.source-badge.user{background:#f2efff;color:#7058a8}
#mapa{width:100%;height:390px;border-radius:10px;overflow:hidden;background:#e9eef1;border:1px solid #e0e7eb}

.diagnosis-panel{min-height:390px}
.diagnosis-item{display:flex;gap:9px;padding:10px 0;border-bottom:1px solid #edf1f4}
.diagnosis-item:last-child{border-bottom:0}
.diagnosis-icon{width:21px;flex-shrink:0;font-size:13px}
.diagnosis-item strong{display:block;color:#334853;font-size:.74rem}
.diagnosis-item span{display:block;margin-top:2px;color:var(--text-soft);font-size:.68rem;line-height:1.4}

.tab-panel{display:none}
.tab-panel.active{display:block;animation:aparecer .3s ease-out}
.data-row{display:grid;grid-template-columns:145px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid #eef2f4}
.data-row:last-child{border-bottom:0}
.data-label{color:#7b8992;font-size:.7rem}
.data-value{color:#324852;font-size:.74rem;font-weight:600;word-break:break-word}
.data-value a{color:var(--secondary);text-decoration:none}
.need-panel p{color:#435863;font-size:.78rem}
.coming-soon{max-width:650px;margin:auto;padding:45px 20px;text-align:center}
.coming-soon>span{display:block;margin-bottom:10px;font-size:28px}
.coming-soon h3{margin-bottom:7px}
.coming-soon p{color:var(--text-soft);font-size:.76rem}

.sources-bar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:17px;padding-top:15px;border-top:1px solid var(--border);color:var(--text-soft);font-size:.68rem}
.sources-bar>div{display:flex;flex-wrap:wrap;gap:5px}
.source-pill{padding:4px 8px;border:1px solid #e0e6ea;border-radius:20px;background:#f6f8fa;color:#94a0a8}
.source-pill.active{background:#eef8f5;border-color:#d7eee8;color:#22766d}

.marcador-emoji{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(20,50,65,.08);border-radius:50%;background:rgba(255,255,255,.96);box-shadow:0 4px 12px rgba(17,37,52,.20);font-size:16px}

/* Clima */
.climate-layout{display:grid;gap:15px}
.climate-current-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.climate-card{display:flex;align-items:center;gap:11px;min-height:82px;padding:13px;border:1px solid #e4eaee;border-radius:11px;background:linear-gradient(145deg,#fff,#f7fafb)}
.climate-card-icon{width:35px;height:35px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:9px;background:#eef5f8;font-size:18px}
.climate-card-label{display:block;color:#74848e;font-size:.66rem}
.climate-card-value{display:block;margin-top:2px;color:#243c48;font-size:.95rem}
.climate-card small{display:block;margin-top:1px;color:#9aa6ae;font-size:.59rem}
.forecast-table{display:grid;gap:6px}
.forecast-row{display:grid;grid-template-columns:1.4fr repeat(5,1fr);align-items:center;gap:10px;padding:10px 12px;border:1px solid #e8edf0;border-radius:9px;background:#fafcfd}
.forecast-day strong{display:block;color:#2e4651;font-size:.72rem}
.forecast-day span{display:block;margin-top:2px;color:#7b8992;font-size:.62rem}
.forecast-value span{display:block;color:#929da5;font-size:.57rem}
.forecast-value strong{display:block;margin-top:2px;color:#415762;font-size:.69rem}
.climate-message{padding:45px 20px;text-align:center}
.climate-message>span{display:block;margin-bottom:8px;font-size:28px}
.climate-message h3{margin-bottom:5px}
.climate-message p{color:#7a8993;font-size:.73rem}
.climate-note p{margin-top:6px;color:#667883;font-size:.71rem}

/* Agua */
.water-layout{display:grid;gap:15px}
.water-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.water-card{padding:15px;border:1px solid #e2e9ed;border-radius:12px;background:linear-gradient(145deg,#fff,#f7fafc)}
.water-card-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;margin-bottom:9px;border-radius:10px;background:#eef7fb;font-size:19px}
.water-card-label{display:block;color:#74848e;font-size:.66rem}
.water-card-value{display:block;margin-top:2px;color:#183944;font-size:1.2rem}
.water-card small{display:block;margin-top:3px;color:#9aa8b1;font-size:.6rem}
.water-meteo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.water-indicator{padding:14px;border:1px solid #e5eaee;border-radius:11px;background:#fafcfd}
.water-indicator span{display:block;color:#82909a;font-size:.65rem}
.water-indicator strong{display:block;margin-top:3px;color:#304953;font-size:1rem}
.water-indicator small{display:block;margin-top:3px;color:#9aa6ae;font-size:.6rem}
.water-list{display:grid;gap:7px}
.water-list-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid #e8edef;border-radius:9px;background:#fafcfd}
.water-list-icon{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:#eef6f9}
.water-list-main strong{display:block;color:#314a55;font-size:.72rem}
.water-list-main span{display:block;margin-top:2px;color:#84929a;font-size:.62rem}
.water-distance{color:#5d7380;font-size:.65rem;font-weight:650;white-space:nowrap}
.water-alert{padding:14px 16px;border:1px solid #f1dfbf;border-radius:11px;background:#fffaf1}
.water-alert strong{display:block;color:#715121;font-size:.75rem}
.water-alert p{margin-top:5px;color:#796b53;font-size:.7rem}
.water-quality-list{display:grid;gap:8px}
.water-quality-item{padding:10px 12px;border-bottom:1px solid #edf1f3}
.water-quality-item:last-child{border-bottom:0}
.water-quality-item strong{display:block;color:#334a55;font-size:.72rem}
.water-quality-item span{display:block;margin-top:2px;color:#778891;font-size:.66rem}
.water-loading{padding:45px 20px;text-align:center}
.water-loading>span{display:block;margin-bottom:8px;font-size:28px}
.water-loading p{margin-top:5px;color:#7a8993;font-size:.73rem}

.empty-message{color:var(--muted);font-size:.73rem}
.leaflet-popup-content{font-family:"Segoe UI",Arial,sans-serif;font-size:.75rem}

@keyframes dashboardEntrada{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes aparecer{from{opacity:0}to{opacity:1}}

@media(max-width:1100px){
  .metrics-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .metrics-grid{grid-template-columns:repeat(2,1fr)}
  .workspace-grid,.content-grid{grid-template-columns:1fr}
  .diagnosis-panel{min-height:auto}
  .climate-current-grid{grid-template-columns:repeat(2,1fr)}
  .forecast-row{grid-template-columns:1fr 1fr 1fr}
  .water-summary-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .global-search-row{grid-template-columns:1fr}
  .secondary-button{width:100%}
}
@media(max-width:600px){
  .hero{min-height:150px;padding:30px 18px 45px}
  .brand{align-items:flex-start}
  .brand-icon{width:46px;height:46px;font-size:27px}
  .brand h1{font-size:1.48rem}
  main{width:calc(100% - 18px);margin-top:-20px}
  .search-panel,.dashboard{padding:17px}
  .section-heading,.dashboard-header,.sources-bar{flex-direction:column;align-items:flex-start}
  .metric-card{padding:12px}
  .metric-icon{display:none}
  #mapa{height:330px}
  .search-actions{flex-direction:column;align-items:stretch}
  #analizar{justify-content:center}
  .data-row{grid-template-columns:1fr}
  .climate-current-grid{grid-template-columns:1fr 1fr}
  .forecast-row{grid-template-columns:1fr 1fr}
  .water-summary-grid,.water-meteo-grid{grid-template-columns:1fr 1fr}
  .water-list-item{grid-template-columns:auto 1fr}
  .water-distance{grid-column:2}
}


/* ======================================================
   MÓDULO HIDROGEOLOGÍA
   ====================================================== */

.hydro-layout {
    display: grid;
    gap: 15px;
}

.hydro-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.hydro-card {
    padding: 16px;
    border: 1px solid #e2e9ed;
    border-radius: 12px;
    background: linear-gradient(145deg, #ffffff, #f8fafc);
}

.hydro-card-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 9px;
    border-radius: 10px;
    background: #eef5f8;
    font-size: 19px;
}

.hydro-card h4 {
    color: #29434e;
    font-size: 0.78rem;
    margin-bottom: 5px;
}

.hydro-card p {
    color: #71828c;
    font-size: 0.68rem;
    line-height: 1.5;
}

.hydro-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
    padding: 4px 8px;
    border-radius: 20px;
    background: #f3f6f8;
    color: #687d88;
    font-size: 0.61rem;
}

.hydro-status.available {
    background: #edf8f5;
    color: #1f766d;
}

.hydro-status.regional {
    background: #fff7e8;
    color: #86611e;
}

.hydro-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.hydro-button,
.hydro-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid #d5e0e6;
    border-radius: 9px;
    background: white;
    color: #2e5f6b;
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
}

.hydro-button.primary {
    border-color: transparent;
    background: linear-gradient(110deg, #0b7169, #2563d9);
    color: white;
}

.hydro-button:hover,
.hydro-link:hover {
    transform: translateY(-1px);
}

.hydro-source-list {
    display: grid;
    gap: 8px;
}

.hydro-source-item {
    padding: 11px 12px;
    border-bottom: 1px solid #edf1f3;
}

.hydro-source-item:last-child {
    border-bottom: 0;
}

.hydro-source-item strong {
    display: block;
    color: #334a55;
    font-size: 0.72rem;
}

.hydro-source-item span {
    display: block;
    margin-top: 3px;
    color: #7a8b94;
    font-size: 0.66rem;
}

.hydro-note {
    padding: 14px 16px;
    border: 1px solid #f0dfbf;
    border-radius: 11px;
    background: #fffaf1;
}

.hydro-note strong {
    display: block;
    color: #725223;
    font-size: 0.74rem;
}

.hydro-note p {
    margin-top: 5px;
    color: #796b54;
    font-size: 0.69rem;
}

.hydro-loading {
    padding: 45px 20px;
    text-align: center;
}

.hydro-loading > span {
    display: block;
    margin-bottom: 8px;
    font-size: 28px;
}

.hydro-loading p {
    margin-top: 5px;
    color: #7a8993;
    font-size: 0.73rem;
}

@media (max-width: 800px) {
    .hydro-grid {
        grid-template-columns: 1fr;
    }
}


/* ======================================================
   CONSOLIDACIÓN V4 · MAPA, LEYENDA Y CLUSTERS
   ====================================================== */

.map-legend {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid #e2e8ec;
    border-radius: 10px;
    background: #fafcfd;
}

.map-legend-title {
    margin-bottom: 7px;
    color: #334a55;
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.map-legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 12px;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #667983;
    font-size: .64rem;
}

.legend-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.legend-symbol.emoji {
    width: 20px;
    height: 20px;
    font-size: 13px;
}

.legend-symbol.igrac {
    width: 15px;
    height: 15px;
    border: 2px solid #8b5cf6;
    border-radius: 4px;
    background:
        repeating-linear-gradient(
            135deg,
            rgba(139,92,246,.26) 0,
            rgba(139,92,246,.26) 3px,
            rgba(255,255,255,.9) 3px,
            rgba(255,255,255,.9) 6px
        );
}

.legend-igrac.is-inactive {
    opacity: .46;
}

.legend-igrac.is-active {
    opacity: 1;
    color: #5b42a6;
    font-weight: 650;
}

.legend-igrac.is-error {
    opacity: 1;
    color: #a23b4b;
}

.map-legend-note {
    margin-top: 7px;
    color: #95a2aa;
    font-size: .59rem;
}

/* Aspecto más sobrio de los grupos de marcadores. */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
    background: rgba(11, 113, 105, .18);
}

.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
    background: rgba(11, 113, 105, .88);
    color: #fff;
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 700;
}

.marker-cluster span {
    line-height: 30px;
}

@media (max-width: 600px) {
    .map-legend-items {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}


/* ======================================================
   V5 · DIAGNÓSTICO INTELIGENTE
   ====================================================== */

.smart-layout {
    display: grid;
    gap: 15px;
}

.smart-loading {
    padding: 48px 20px;
    text-align: center;
}

.smart-loading > span {
    display: block;
    margin-bottom: 9px;
    font-size: 30px;
}

.smart-loading h3 {
    margin-bottom: 6px;
}

.smart-loading p {
    max-width: 620px;
    margin: auto;
    color: #778993;
    font-size: .74rem;
}

.smart-hero-panel {
    background:
        linear-gradient(
            135deg,
            rgba(11,113,105,.045),
            rgba(37,99,217,.035)
        ),
        #fff;
}

.smart-objective-badge {
    padding: 5px 9px;
    border: 1px solid #d9e8e6;
    border-radius: 999px;
    background: #eff8f6;
    color: #176b63;
    font-size: .64rem;
    font-weight: 650;
    white-space: nowrap;
}

.smart-summary {
    color: #3e5560;
    font-size: .79rem;
    line-height: 1.7;
}

.smart-summary strong {
    color: #203b46;
}

.smart-context-strip {
    display: grid;
    grid-template-columns: 1.3fr 1.3fr .8fr;
    gap: 9px;
    margin-top: 15px;
}

.smart-context-strip > div {
    padding: 10px 12px;
    border: 1px solid #e4eaee;
    border-radius: 10px;
    background: rgba(255,255,255,.78);
}

.smart-context-strip span {
    display: block;
    color: #8a98a1;
    font-size: .59rem;
}

.smart-context-strip strong {
    display: block;
    margin-top: 2px;
    color: #344e59;
    font-size: .69rem;
    word-break: break-word;
}

.smart-signal-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 9px;
}

.smart-signal-card {
    min-width: 0;
    padding: 13px;
    border: 1px solid #e3e9ed;
    border-radius: 12px;
    background:
        linear-gradient(
            145deg,
            #fff,
            #f8fafb
        );
}

.smart-signal-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    border-radius: 9px;
    background: #eef5f8;
    font-size: 17px;
}

.smart-signal-label {
    display: block;
    color: #7a8a94;
    font-size: .61rem;
}

.smart-signal-value {
    display: block;
    margin-top: 2px;
    color: #203e49;
    font-size: 1rem;
}

.smart-signal-card small {
    display: block;
    margin-top: 3px;
    color: #9aa7af;
    font-size: .55rem;
}

.smart-two-column {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 15px;
}

.smart-confidence-list {
    display: grid;
}

.smart-confidence-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 9px;
    align-items: start;
    padding: 10px 0;
    border-bottom: 1px solid #edf1f3;
}

.smart-confidence-row:last-child {
    border-bottom: 0;
}

.smart-confidence-dot {
    width: 10px;
    height: 10px;
    margin-top: 4px;
    border-radius: 50%;
}

.smart-confidence-dot.high {
    background: #27b37e;
}

.smart-confidence-dot.medium {
    background: #e7aa2f;
}

.smart-confidence-dot.low {
    background: #e75c54;
}

.smart-confidence-dot.unknown {
    background: #9ca9b1;
}

.smart-confidence-row strong {
    display: block;
    color: #334c57;
    font-size: .71rem;
}

.smart-confidence-row span:not(.smart-confidence-dot):not(.smart-confidence-label) {
    display: block;
    margin-top: 2px;
    color: #7b8b94;
    font-size: .64rem;
}

.smart-confidence-label {
    padding: 3px 7px;
    border-radius: 999px;
    font-size: .55rem;
    font-weight: 700;
    white-space: nowrap;
}

.smart-confidence-label.high {
    background: #edf9f4;
    color: #1f7e62;
}

.smart-confidence-label.medium {
    background: #fff7e7;
    color: #8a631b;
}

.smart-confidence-label.low {
    background: #fff0ef;
    color: #a14641;
}

.smart-confidence-label.unknown {
    background: #f1f4f6;
    color: #74838c;
}

.smart-decision-box {
    padding: 13px;
    border-radius: 11px;
}

.smart-decision-box + .smart-decision-box {
    margin-top: 9px;
}

.smart-decision-box strong {
    display: block;
    font-size: .72rem;
}

.smart-decision-box p {
    margin-top: 4px;
    font-size: .65rem;
    line-height: 1.5;
}

.smart-decision-box.good {
    border: 1px solid #d4ece4;
    background: #f1faf7;
    color: #356c5e;
}

.smart-decision-box.stop {
    border: 1px solid #f0d9d6;
    background: #fff5f4;
    color: #80504b;
}

.smart-actions-list {
    display: grid;
    gap: 7px;
}

.smart-action-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 11px;
    padding: 11px 12px;
    border: 1px solid #e6ecef;
    border-radius: 10px;
    background: #fafcfd;
}

.smart-action-number {
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            #0b7169,
            #2563d9
        );
    color: #fff;
    font-size: .65rem;
    font-weight: 750;
}

.smart-action-content strong {
    display: block;
    color: #314b56;
    font-size: .72rem;
}

.smart-action-content p {
    margin-top: 2px;
    color: #788993;
    font-size: .65rem;
}

.smart-action-link {
    margin-top: 7px;
    padding: 5px 8px;
    border: 1px solid #d5e2e7;
    border-radius: 7px;
    background: #fff;
    color: #176b63;
    font-family: inherit;
    font-size: .59rem;
    font-weight: 650;
    cursor: pointer;
}

.smart-action-link:hover {
    background: #f2f8f7;
}

.smart-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.smart-source-pill {
    padding: 4px 8px;
    border: 1px solid #dbe8e5;
    border-radius: 999px;
    background: #f0f8f6;
    color: #28756d;
    font-size: .6rem;
}

.smart-refresh-button {
    padding: 5px 9px;
    border: 1px solid #d7e1e6;
    border-radius: 8px;
    background: #fff;
    color: #4c6570;
    font-family: inherit;
    font-size: .61rem;
    font-weight: 650;
    cursor: pointer;
}

.smart-refresh-button:hover {
    background: #f6f9fa;
}

.smart-method-note {
    margin-top: 10px;
    color: #87969f;
    font-size: .63rem;
    line-height: 1.55;
}

@media (max-width: 1100px) {
    .smart-signal-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .smart-two-column {
        grid-template-columns: 1fr;
    }

    .smart-context-strip {
        grid-template-columns: 1fr;
    }
}

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

    .smart-confidence-row {
        grid-template-columns: auto 1fr;
    }

    .smart-confidence-label {
        grid-column: 2;
        justify-self: start;
    }
}


/* ======================================================
   V6 PREMIUM · IDENTIDAD Y NAVEGACIÓN
   ====================================================== */

body {
    overflow-x: hidden;
}

.premium-hero {
    min-height: 520px;
    padding: 0;
    align-items: stretch;
    isolation: isolate;
    perspective: 1200px;
}

.hero-network {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .8;
    pointer-events: auto;
    z-index: 0;
}

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .5;
    pointer-events: none;
    z-index: 0;
}

.hero-glow-one {
    width: 440px;
    height: 440px;
    left: -120px;
    bottom: -260px;
    background: rgba(58, 226, 197, .28);
}

.hero-glow-two {
    width: 520px;
    height: 520px;
    right: -120px;
    top: -280px;
    background: rgba(93, 143, 255, .34);
}

.premium-hero-content {
    width: min(1260px, calc(100% - 40px));
    padding: 20px 0 58px;
}

.premium-topbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto minmax(180px, 1fr);
    align-items: center;
    gap: 20px;
    min-height: 70px;
    position: relative;
    z-index: 20;
}

.premium-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    color: #fff;
    text-decoration: none;
}

.premium-brand-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    font-size: 26px;
}

.premium-brand-copy strong,
.premium-brand-copy span {
    display: block;
}

.premium-brand-copy strong {
    font-size: .82rem;
    letter-spacing: -.01em;
}

.premium-brand-copy span {
    margin-top: 2px;
    color: rgba(255,255,255,.66);
    font-size: .61rem;
}

.premium-main-nav {
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background: rgba(5, 45, 58, .28);
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(1,17,26,.12);
}

.view-switch {
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 13px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: rgba(255,255,255,.72);
    font-family: inherit;
    font-size: .68rem;
    font-weight: 650;
    cursor: pointer;
    transition: all .2s ease;
}

.view-switch:hover {
    color: #fff;
    background: rgba(255,255,255,.08);
}

.view-switch.active {
    color: #103e46;
    background: rgba(255,255,255,.92);
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

.premium-actions {
    display: flex;
    justify-content: flex-end;
}

.language-control {
    position: relative;
}

.language-toggle {
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-family: inherit;
    font-size: .68rem;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(16px);
}

.language-chevron {
    color: rgba(255,255,255,.65);
}

.language-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 9px);
    width: 270px;
    padding: 10px;
    border: 1px solid rgba(226,236,241,.9);
    border-radius: 14px;
    background: rgba(255,255,255,.97);
    color: #243a45;
    box-shadow: 0 24px 70px rgba(11,29,39,.23);
    backdrop-filter: blur(24px);
    z-index: 1000;
}

.language-menu-head {
    padding: 7px 8px 10px;
}

.language-menu-head strong,
.language-menu-head span {
    display: block;
}

.language-menu-head strong {
    font-size: .76rem;
}

.language-menu-head span {
    margin-top: 2px;
    color: #8b99a1;
    font-size: .6rem;
}

.language-option {
    width: 100%;
    padding: 8px 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #40545f;
    font-family: inherit;
    font-size: .68rem;
    text-align: left;
    cursor: pointer;
}

.language-option:hover {
    background: #f1f7f7;
    color: #176b63;
}

.language-divider {
    height: 1px;
    margin: 8px 2px;
    background: #e7edf0;
}

.google-language-label {
    padding: 3px 8px 8px;
}

.google-language-label span,
.google-language-label small {
    display: block;
}

.google-language-label span {
    color: #526771;
    font-size: .67rem;
    font-weight: 700;
}

.google-language-label small {
    margin-top: 2px;
    color: #95a1a8;
    font-size: .57rem;
}

.google-language-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

.google-language-grid button {
    min-height: 32px;
    padding: 4px;
    border: 1px solid #e2e8ec;
    border-radius: 8px;
    background: #f8fafb;
    color: #485d68;
    font-family: inherit;
    font-size: .58rem;
    cursor: pointer;
}

.google-language-grid button:hover {
    background: #eef7f5;
    border-color: #d3e8e2;
}

.google-translate-full {
    width: 100%;
    margin-top: 8px;
    padding: 9px 10px;
    border: 0;
    border-radius: 9px;
    background: linear-gradient(110deg, #0b7169, #2563d9);
    color: #fff;
    font-family: inherit;
    font-size: .64rem;
    font-weight: 650;
    cursor: pointer;
}

.language-toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    max-width: 360px;
    padding: 12px 14px;
    border: 1px solid #d7e5e2;
    border-radius: 11px;
    background: rgba(255,255,255,.96);
    color: #3b535d;
    box-shadow: 0 18px 45px rgba(15,36,46,.17);
    font-size: .68rem;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: .22s ease;
    z-index: 9999;
}

.language-toast.show {
    opacity: 1;
    transform: translateY(0);
}


/* ======================================================
   V6 PREMIUM · HERO 3D
   ====================================================== */

.premium-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
    gap: 50px;
    align-items: center;
    min-height: 380px;
    position: relative;
    z-index: 5;
}

.premium-kicker {
    display: block;
    margin-bottom: 13px;
    color: rgba(200,255,240,.76);
    font-size: .65rem;
    font-weight: 780;
    letter-spacing: .14em;
}

.premium-hero-copy h1 {
    max-width: 730px;
    margin: 0;
    color: #fff;
    font-size: clamp(2.45rem, 5vw, 4.8rem);
    font-weight: 760;
    line-height: .98;
    letter-spacing: -.065em;
    text-wrap: balance;
}

.premium-hero-copy > p {
    max-width: 700px;
    margin-top: 19px;
    color: rgba(255,255,255,.73);
    font-size: .94rem;
    line-height: 1.7;
}

.premium-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 24px;
}

.hero-primary-action,
.hero-secondary-action {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 0 17px;
    border-radius: 10px;
    font-family: inherit;
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.hero-primary-action {
    border: 0;
    background: #fff;
    color: #154c53;
    box-shadow: 0 13px 34px rgba(2,21,31,.18);
}

.hero-secondary-action {
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.07);
    color: #fff;
    backdrop-filter: blur(12px);
}

.hero-primary-action:hover,
.hero-secondary-action:hover {
    transform: translateY(-2px);
}

.hero-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 22px;
    color: rgba(255,255,255,.63);
    font-size: .61rem;
}

.premium-orb-stage {
    min-height: 350px;
    position: relative;
    display: grid;
    place-items: center;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.premium-orb {
    width: 245px;
    height: 245px;
    position: relative;
    border: 1px solid rgba(222,255,249,.34);
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 27%, rgba(255,255,255,.32), transparent 16%),
        radial-gradient(circle at 58% 64%, rgba(59,222,192,.25), transparent 38%),
        linear-gradient(145deg, rgba(100,230,218,.16), rgba(61,113,231,.22));
    box-shadow:
        inset -24px -28px 60px rgba(3,32,52,.3),
        inset 18px 17px 42px rgba(255,255,255,.07),
        0 40px 80px rgba(3,28,44,.31);
    transform-style: preserve-3d;
    transition: transform .14s ease-out;
    animation: orbFloat 6s ease-in-out infinite;
}

.orb-grid {
    position: absolute;
    inset: 15px;
    border-radius: 50%;
    opacity: .55;
}

.orb-grid-a {
    border-left: 1px solid rgba(203,255,247,.42);
    border-right: 1px solid rgba(203,255,247,.42);
    transform: rotateY(52deg);
}

.orb-grid-b {
    border-top: 1px solid rgba(203,255,247,.38);
    border-bottom: 1px solid rgba(203,255,247,.38);
    transform: rotateX(62deg);
}

.orb-core {
    position: absolute;
    inset: 28%;
    border-radius: 50%;
    background: rgba(150,255,238,.06);
    box-shadow: 0 0 45px rgba(116,246,224,.22);
}

.orb-highlight {
    position: absolute;
    width: 54px;
    height: 30px;
    left: 42px;
    top: 37px;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    filter: blur(7px);
    transform: rotate(-30deg);
}

.orb-orbit {
    position: absolute;
    border: 1px solid rgba(196,240,255,.18);
    border-radius: 50%;
    transform-style: preserve-3d;
}

.orbit-one {
    width: 320px;
    height: 130px;
    transform: rotateX(67deg) rotateZ(14deg);
    animation: orbitRotate 13s linear infinite;
}

.orbit-two {
    width: 290px;
    height: 110px;
    transform: rotateX(75deg) rotateZ(-28deg);
    animation: orbitRotateReverse 16s linear infinite;
}

.orb-floating-card {
    position: absolute;
    min-width: 108px;
    padding: 9px 11px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 11px;
    background: rgba(8,64,75,.46);
    box-shadow: 0 14px 30px rgba(3,28,42,.19);
    backdrop-filter: blur(15px);
    color: #fff;
    transform: translateZ(30px);
    animation: cardFloat 5s ease-in-out infinite;
}

.orb-floating-card span {
    float: left;
    margin-right: 8px;
    font-size: 16px;
}

.orb-floating-card strong,
.orb-floating-card small {
    display: block;
}

.orb-floating-card strong {
    font-size: .64rem;
}

.orb-floating-card small {
    margin-top: 1px;
    color: rgba(255,255,255,.57);
    font-size: .52rem;
}

.orb-floating-card.card-a {
    left: 0;
    top: 80px;
}

.orb-floating-card.card-b {
    right: -6px;
    top: 35px;
    animation-delay: -1.5s;
}

.orb-floating-card.card-c {
    right: 24px;
    bottom: 42px;
    animation-delay: -3s;
}

@keyframes orbFloat {
    0%, 100% { transform: translateY(0) rotateY(-7deg); }
    50% { transform: translateY(-10px) rotateY(7deg); }
}

@keyframes orbitRotate {
    from { transform: rotateX(67deg) rotateZ(14deg) rotate(0deg); }
    to { transform: rotateX(67deg) rotateZ(14deg) rotate(360deg); }
}

@keyframes orbitRotateReverse {
    from { transform: rotateX(75deg) rotateZ(-28deg) rotate(360deg); }
    to { transform: rotateX(75deg) rotateZ(-28deg) rotate(0deg); }
}

@keyframes cardFloat {
    0%,100% { transform: translateZ(30px) translateY(0); }
    50% { transform: translateZ(30px) translateY(-7px); }
}


/* ======================================================
   V6 · VISTAS
   ====================================================== */

.app-view {
    animation: appViewIn .35s ease;
}

@keyframes appViewIn {
    from {
        opacity: 0;
        transform: translateY(7px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#vistaTerritorio > .search-panel {
    margin-top: -48px;
}

.resources-view {
    margin-top: -48px;
}


/* ======================================================
   V6 · CENTRO DE RECURSOS
   ====================================================== */

.resource-command-panel {
    padding: 27px;
    border: 1px solid rgba(211,221,228,.9);
    border-radius: 19px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(247,250,252,.98)
        );
    box-shadow: var(--shadow);
}

.resource-command-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 20px;
    align-items: start;
}

.resource-command-head h2 {
    margin-top: 1px;
    font-size: 1.28rem;
    letter-spacing: -.025em;
}

.resource-command-head p {
    max-width: 700px;
    margin-top: 5px;
    color: #70818b;
    font-size: .75rem;
}

.resource-context-card {
    padding: 13px 14px;
    border: 1px solid #dce6e9;
    border-radius: 12px;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f5faf9
        );
    transform-style: preserve-3d;
    transition: transform .18s ease, box-shadow .18s ease;
}

.resource-context-label,
.resource-context-card strong,
.resource-context-card span {
    display: block;
}

.resource-context-label {
    color: #7c8e96;
    font-size: .59rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.resource-context-card strong {
    margin-top: 4px;
    color: #294751;
    font-size: .72rem;
}

.resource-context-card > span:last-child {
    margin-top: 3px;
    color: #84939b;
    font-size: .61rem;
    line-height: 1.45;
}

.resource-search-shell {
    margin-top: 20px;
    padding: 13px;
    border: 1px solid #e0e7eb;
    border-radius: 14px;
    background: #f8fafb;
}

.resource-search-main {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
}

.resource-search-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #eef5f5;
    color: #176b63;
    font-size: 18px;
}

.resource-search-main input {
    height: 42px;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: .8rem;
}

.resource-search-main input:focus {
    box-shadow: none;
}

#resourceSearchButton {
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    background: linear-gradient(110deg, #0b7169, #2563d9);
    color: #fff;
    font-family: inherit;
    font-size: .68rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(37,99,217,.13);
}

.resource-filter-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: end;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e9eef1;
}

.resource-filter-field > span {
    display: block;
    margin-bottom: 4px;
    color: #7b8b94;
    font-size: .58rem;
}

.resource-filter-field select {
    width: 100%;
    height: 35px;
    padding: 0 9px;
    border: 1px solid #dae3e8;
    border-radius: 8px;
    background: #fff;
    color: #415761;
    font-family: inherit;
    font-size: .64rem;
    outline: none;
}

.resource-context-button {
    height: 35px;
    padding: 0 11px;
    border: 1px solid #d8e3e7;
    border-radius: 8px;
    background: #fff;
    color: #647984;
    font-family: inherit;
    font-size: .62rem;
    font-weight: 650;
    cursor: pointer;
}

.resource-context-button.is-ready {
    color: #176b63;
    border-color: #cfe5df;
}

.resource-context-button.active {
    background: #eef8f5;
    color: #176b63;
}

.resource-category-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 9px;
    margin-top: 17px;
}

.resource-category-card {
    position: relative;
    min-height: 112px;
    padding: 13px;
    border: 1px solid #e1e8ec;
    border-radius: 12px;
    background: #fff;
    color: #334b56;
    text-align: left;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.resource-category-card:hover {
    box-shadow: 0 14px 28px rgba(15,40,53,.08);
}

.resource-category-card.active {
    border-color: #badfd7;
    background:
        linear-gradient(
            145deg,
            #f7fcfb,
            #f3f7fd
        );
}

.resource-category-icon {
    display: block;
    margin-bottom: 8px;
    font-size: 19px;
}

.resource-category-card strong,
.resource-category-card small {
    display: block;
}

.resource-category-card strong {
    font-size: .68rem;
}

.resource-category-card small {
    margin-top: 2px;
    color: #89979f;
    font-size: .57rem;
}

.resource-category-count {
    position: absolute;
    right: 10px;
    top: 10px;
    min-width: 23px;
    height: 23px;
    display: grid;
    place-items: center;
    padding: 0 5px;
    border-radius: 999px;
    background: #eff5f7;
    color: #627884;
    font-size: .56rem;
    font-weight: 750;
}

.resource-intelligence-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin: 13px 0;
    padding: 10px 14px;
    border: 1px solid #e0e7eb;
    border-radius: 11px;
    background: rgba(255,255,255,.76);
    color: #70828c;
    font-size: .62rem;
    backdrop-filter: blur(12px);
}

.resource-intelligence-bar > div:first-child {
    display: flex;
    align-items: center;
    gap: 7px;
}

.resource-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #23af7c;
    box-shadow: 0 0 0 5px rgba(35,175,124,.09);
}

.resource-intelligence-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.resource-intelligence-tags span {
    padding: 3px 7px;
    border-radius: 999px;
    background: #f2f6f8;
    color: #71838d;
    font-size: .55rem;
}

.resource-results-section {
    padding: 25px;
    border: 1px solid rgba(211,221,228,.9);
    border-radius: 18px;
    background: rgba(255,255,255,.95);
    box-shadow: var(--shadow);
}

.resource-results-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 17px;
}

.resource-results-head h2 {
    font-size: 1.08rem;
}

.resource-results-head p {
    margin-top: 4px;
    color: #7d8d96;
    font-size: .67rem;
}

.resource-results-meta {
    min-width: 80px;
    padding: 9px 11px;
    border: 1px solid #e2e8ec;
    border-radius: 10px;
    background: #f8fafb;
    text-align: center;
}

.resource-results-meta strong,
.resource-results-meta span {
    display: block;
}

.resource-results-meta strong {
    color: #1d4d55;
    font-size: 1rem;
}

.resource-results-meta span {
    color: #87959d;
    font-size: .55rem;
}

.resource-results-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.resource-result-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 15px;
    border: 1px solid #e1e8ec;
    border-radius: 14px;
    background:
        linear-gradient(
            150deg,
            #fff,
            #f9fbfc
        );
    box-shadow: 0 7px 18px rgba(18,42,53,.035);
    transform-style: preserve-3d;
    transition:
        transform .16s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.resource-result-card:hover {
    border-color: #d2e1e5;
    box-shadow: 0 18px 38px rgba(18,42,53,.1);
}

.resource-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.resource-card-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #eef5f6;
    font-size: 20px;
}

.resource-match {
    text-align: right;
}

.resource-match strong,
.resource-match span {
    display: block;
}

.resource-match strong {
    color: #226a63;
    font-size: .73rem;
}

.resource-match span {
    color: #9aa6ad;
    font-size: .5rem;
}

.resource-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

.resource-badge {
    padding: 3px 6px;
    border-radius: 999px;
    font-size: .52rem;
    font-weight: 650;
}

.resource-badge.verified {
    background: #eef9f5;
    color: #24755f;
}

.resource-badge.conceptual {
    background: #f4f0fb;
    color: #725a9d;
}

.resource-badge.review {
    background: #fff6e7;
    color: #8c641d;
}

.resource-badge.neutral {
    background: #f2f5f7;
    color: #6f8089;
}

.resource-card-copy {
    margin-top: 12px;
}

.resource-card-category {
    color: #0b7169;
    font-size: .54rem;
    font-weight: 760;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.resource-card-copy h3 {
    margin-top: 3px;
    color: #2c4652;
    font-size: .82rem;
    line-height: 1.25;
}

.resource-card-entity {
    display: block;
    margin-top: 4px;
    color: #74868f;
    font-size: .59rem;
    font-weight: 650;
}

.resource-card-copy p {
    margin-top: 8px;
    color: #6f818b;
    font-size: .65rem;
    line-height: 1.55;
}

.resource-topic-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 10px;
}

.resource-topic-tags span {
    padding: 3px 6px;
    border-radius: 999px;
    background: #f1f5f7;
    color: #71838d;
    font-size: .51rem;
}

.resource-card-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 7px;
    margin-top: 11px;
    padding: 9px;
    border: 1px solid #e8edf0;
    border-radius: 9px;
    background: #fafcfd;
}

.resource-card-note > span {
    color: #607987;
    font-size: .66rem;
}

.resource-card-note p {
    color: #7e8d95;
    font-size: .57rem;
    line-height: 1.45;
}

.resource-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 13px;
}

.resource-card-action {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border-radius: 8px;
    background: #eef7f5;
    color: #176b63;
    font-size: .58rem;
    font-weight: 700;
    text-decoration: none;
}

.resource-card-action.disabled {
    background: #f4f2f8;
    color: #75698c;
    cursor: default;
}

.resource-save-button {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border: 1px solid #dfe7eb;
    border-radius: 8px;
    background: #fff;
    color: #71838d;
    font-size: 15px;
    cursor: pointer;
}

.resource-save-button.saved {
    color: #d28a1d;
    background: #fff9ef;
    border-color: #f0deb9;
}

.resource-empty {
    padding: 55px 20px;
    text-align: center;
}

.resource-empty > span {
    display: block;
    font-size: 28px;
}

.resource-empty h3 {
    margin-top: 7px;
    font-size: .82rem;
}

.resource-empty p {
    margin-top: 4px;
    color: #84939c;
    font-size: .65rem;
}

.resource-roadmap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 13px;
}

.resource-roadmap-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding: 14px;
    border: 1px solid #dfe7eb;
    border-radius: 12px;
    background: rgba(255,255,255,.84);
    transform-style: preserve-3d;
    transition: transform .18s ease, box-shadow .18s ease;
}

.resource-roadmap-card > span {
    font-size: 18px;
}

.resource-roadmap-card strong {
    display: block;
    color: #36515d;
    font-size: .67rem;
}

.resource-roadmap-card p {
    margin-top: 3px;
    color: #7d8d96;
    font-size: .58rem;
    line-height: 1.5;
}


/* ======================================================
   V6 · REVEAL
   ====================================================== */

.reveal-on-scroll,
.resource-result-card,
.resource-roadmap-card {
    opacity: 0;
    transform: translateY(9px);
}

.reveal-on-scroll.is-visible,
.resource-result-card.is-visible,
.resource-roadmap-card.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity .4s ease,
        transform .4s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


/* ======================================================
   V6 · RESPONSIVE
   ====================================================== */

@media (max-width: 1050px) {
    .premium-topbar {
        grid-template-columns: 1fr auto;
    }

    .premium-main-nav {
        order: 3;
        grid-column: 1 / -1;
        justify-self: center;
    }

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

    .resource-category-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

@media (max-width: 850px) {
    .premium-hero {
        min-height: auto;
    }

    .premium-hero-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .premium-orb-stage {
        min-height: 270px;
    }

    .premium-orb {
        width: 190px;
        height: 190px;
    }

    .orbit-one {
        width: 250px;
    }

    .orbit-two {
        width: 225px;
    }

    .resource-command-head {
        grid-template-columns: 1fr;
    }

    .resource-filter-row {
        grid-template-columns: 1fr 1fr;
    }

    .resource-context-button {
        grid-column: 1 / -1;
    }

    .resource-roadmap {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .premium-hero-content {
        width: min(100% - 22px, 1260px);
    }

    .premium-topbar {
        grid-template-columns: 1fr auto;
    }

    .premium-brand-copy span {
        display: none;
    }

    .premium-main-nav {
        width: 100%;
    }

    .view-switch {
        flex: 1;
        justify-content: center;
    }

    .premium-hero-copy h1 {
        font-size: 2.35rem;
    }

    .premium-hero-copy > p {
        font-size: .78rem;
    }

    .premium-orb-stage {
        display: none;
    }

    #vistaTerritorio > .search-panel,
    .resources-view {
        margin-top: -20px;
    }

    .resource-command-panel,
    .resource-results-section {
        padding: 17px;
    }

    .resource-search-main {
        grid-template-columns: auto 1fr;
    }

    #resourceSearchButton {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .resource-filter-row {
        grid-template-columns: 1fr;
    }

    .resource-context-button {
        grid-column: auto;
    }

    .resource-category-grid {
        grid-template-columns: 1fr 1fr;
    }

    .resource-results-grid {
        grid-template-columns: 1fr;
    }

    .resource-intelligence-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .language-menu {
        position: fixed;
        right: 12px;
        left: 12px;
        top: 75px;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .premium-orb,
    .orb-orbit,
    .orb-floating-card {
        animation: none !important;
    }

    .tilt-card {
        transform: none !important;
    }

    .reveal-on-scroll,
    .resource-result-card,
    .resource-roadmap-card {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ======================================================
   V6.1 · TARJETAS 3D = NAVEGACIÓN REAL
   ====================================================== */

.orb-nav-card {
    appearance: none;
    border: 1px solid rgba(255,255,255,.16);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    user-select: none;
    outline: none;
    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.orb-nav-card:hover {
    border-color: rgba(215,255,247,.46);
    background: rgba(10,76,88,.72);
    box-shadow:
        0 18px 38px rgba(2,24,38,.26),
        0 0 0 1px rgba(137,242,222,.06);
    filter: brightness(1.06);
}

.orb-nav-card:focus-visible {
    border-color: rgba(255,255,255,.8);
    box-shadow:
        0 0 0 3px rgba(139,238,224,.28),
        0 18px 38px rgba(2,24,38,.28);
}

.orb-nav-card::after {
    content: "↗";
    position: absolute;
    right: 9px;
    top: 8px;
    color: rgba(255,255,255,.48);
    font-size: .56rem;
    opacity: 0;
    transform: translate(-3px, 3px);
    transition:
        opacity .18s ease,
        transform .18s ease;
}

.orb-nav-card:hover::after,
.orb-nav-card:focus-visible::after {
    opacity: 1;
    transform: translate(0, 0);
}

.orb-nav-card:active {
    filter: brightness(.96);
}



/* ======================================================
   V6.2 · CONFORT VISUAL
   Fondo ambiental + superficies menos blancas
   ====================================================== */

:root {
    --bg:
        #edf4f6;

    --surface:
        rgba(249, 252, 252, .86);

    --surface-soft:
        rgba(243, 249, 249, .80);

    --surface-blue:
        rgba(243, 247, 253, .80);

    --surface-green:
        rgba(240, 249, 246, .80);

    --surface-warm:
        rgba(249, 248, 243, .78);

    --border:
        rgba(194, 211, 219, .72);

    --shadow:
        0 18px 46px rgba(26, 55, 68, .075);
}


/* Fondo general: ya no es blanco plano */
body {
    position: relative;
    background:
        linear-gradient(
            135deg,
            rgba(225, 245, 240, .88) 0%,
            rgba(238, 246, 249, .92) 38%,
            rgba(233, 240, 252, .90) 100%
        );
    background-attachment: fixed;
}


/* Imagen ambiental fija */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;

    background-image:
        url("fondo-red-global.svg");

    background-size:
        cover;

    background-position:
        center top;

    background-repeat:
        no-repeat;

    opacity:
        .88;

    transform:
        scale(1.03);

    animation:
        ambientBackgroundDrift
        34s
        ease-in-out
        infinite
        alternate;
}


/* Capa adicional para evitar zonas demasiado claras */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 10% 22%,
            rgba(77, 188, 169, .08),
            transparent 28%
        ),
        radial-gradient(
            circle at 87% 30%,
            rgba(68, 117, 215, .08),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            rgba(224, 240, 242, .15),
            rgba(235, 243, 249, .28)
        );
}


@keyframes ambientBackgroundDrift {
    0% {
        transform:
            scale(1.03)
            translate3d(0, 0, 0);
    }

    50% {
        transform:
            scale(1.045)
            translate3d(-8px, 5px, 0);
    }

    100% {
        transform:
            scale(1.035)
            translate3d(7px, -5px, 0);
    }
}


/* ======================================================
   GRANDES BLOCS
   ====================================================== */

.search-panel,
.dashboard,
.resource-command-panel,
.resource-results-section {
    background:
        linear-gradient(
            145deg,
            rgba(250, 253, 253, .88),
            rgba(242, 248, 250, .82)
        );

    border-color:
        rgba(187, 207, 216, .76);

    box-shadow:
        0 22px 55px rgba(25, 53, 67, .075),
        inset 0 1px 0 rgba(255, 255, 255, .66);

    backdrop-filter:
        blur(13px)
        saturate(112%);

    -webkit-backdrop-filter:
        blur(13px)
        saturate(112%);
}


/* Buscar territorio: suave mezcla verde / azul */
.search-panel {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 96% 5%,
            rgba(71, 122, 220, .09),
            transparent 28%
        ),
        radial-gradient(
            circle at 9% 92%,
            rgba(61, 177, 157, .09),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            rgba(248, 252, 251, .91),
            rgba(239, 247, 250, .86)
        );
}


.search-panel::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 200px;
    right: -95px;
    bottom: -105px;
    border-radius: 50%;
    pointer-events: none;

    background:
        repeating-radial-gradient(
            ellipse at center,
            rgba(35, 123, 139, .050) 0 1px,
            transparent 1px 15px
        );

    transform:
        rotate(-12deg);

    opacity:
        .85;
}


/* Dashboard general */
.dashboard {
    background:
        linear-gradient(
            150deg,
            rgba(248, 252, 252, .88),
            rgba(240, 247, 250, .84)
        );
}


/* ======================================================
   PANELES DE INFORMACIÓN
   ====================================================== */

.panel {
    background:
        linear-gradient(
            145deg,
            rgba(250, 253, 252, .88),
            rgba(244, 249, 250, .82)
        );

    border-color:
        rgba(194, 210, 217, .70);

    box-shadow:
        0 10px 30px rgba(31, 61, 73, .055),
        inset 0 1px 0 rgba(255, 255, 255, .62);

    backdrop-filter:
        blur(9px);

    -webkit-backdrop-filter:
        blur(9px);
}


/* Alternancia cromática muy suave */
.panel:nth-of-type(3n + 1) {
    background:
        linear-gradient(
            145deg,
            rgba(246, 252, 249, .90),
            rgba(238, 248, 245, .82)
        );
}


.panel:nth-of-type(3n + 2) {
    background:
        linear-gradient(
            145deg,
            rgba(248, 251, 254, .90),
            rgba(239, 245, 252, .82)
        );
}


.panel:nth-of-type(3n) {
    background:
        linear-gradient(
            145deg,
            rgba(250, 251, 248, .90),
            rgba(245, 247, 243, .82)
        );
}


/* El mapa debe conservar buena lectura */
.map-frame,
#mapa {
    background:
        #e9f0f2;
}


/* ======================================================
   TARJETAS KPI / AGUA / HIDRO / DIAGNÓSTICO
   ====================================================== */

.metric-card,
.water-card,
.hydro-card,
.smart-signal-card,
.resource-result-card,
.resource-roadmap-card,
.resource-category-card,
.resource-context-card {
    background:
        linear-gradient(
            145deg,
            rgba(251, 253, 253, .90),
            rgba(241, 248, 249, .83)
        );

    border-color:
        rgba(196, 212, 219, .72);

    box-shadow:
        0 8px 24px rgba(28, 58, 72, .050);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


/* Métricas con matices alternos */
.metric-card:nth-child(2n),
.smart-signal-card:nth-child(2n),
.water-card:nth-child(2n) {
    background:
        linear-gradient(
            145deg,
            rgba(247, 251, 254, .92),
            rgba(237, 245, 252, .84)
        );
}


.metric-card:nth-child(3n),
.smart-signal-card:nth-child(3n),
.water-card:nth-child(3n) {
    background:
        linear-gradient(
            145deg,
            rgba(247, 252, 249, .92),
            rgba(237, 248, 244, .84)
        );
}


/* ======================================================
   PESTAÑAS
   ====================================================== */

.dashboard-tabs {
    background:
        linear-gradient(
            90deg,
            rgba(230, 240, 243, .82),
            rgba(232, 239, 249, .80)
        );

    border-color:
        rgba(188, 205, 215, .72);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


.tab-button.active {
    background:
        linear-gradient(
            145deg,
            rgba(253, 255, 255, .96),
            rgba(243, 250, 249, .94)
        );

    box-shadow:
        0 7px 19px rgba(34, 63, 75, .085);
}


/* ======================================================
   CENTRO DE RECURSOS
   ====================================================== */

.resource-command-panel {
    background:
        radial-gradient(
            circle at 12% 12%,
            rgba(53, 180, 156, .075),
            transparent 29%
        ),
        radial-gradient(
            circle at 94% 4%,
            rgba(69, 120, 221, .075),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(248, 252, 251, .90),
            rgba(239, 247, 250, .85)
        );
}


.resource-results-section {
    background:
        linear-gradient(
            155deg,
            rgba(249, 252, 252, .88),
            rgba(240, 247, 250, .84)
        );
}


.resource-search-shell,
.resource-intelligence-bar {
    background:
        rgba(239, 247, 248, .76);

    border-color:
        rgba(193, 210, 218, .70);

    backdrop-filter:
        blur(9px);

    -webkit-backdrop-filter:
        blur(9px);
}


/* ======================================================
   INPUTS
   ====================================================== */

input,
textarea,
select {
    background:
        rgba(248, 252, 252, .82);

    border-color:
        rgba(188, 207, 216, .82);
}


input:focus,
textarea:focus,
select:focus {
    background:
        rgba(253, 255, 255, .94);
}


/* ======================================================
   AVISOS Y BLOQUES SECUNDARIOS
   ====================================================== */

.water-indicator,
.water-list-item,
.hydro-source-item,
.smart-action-item,
.smart-decision-box,
.resource-card-note {
    background:
        rgba(244, 249, 249, .77);

    border-color:
        rgba(198, 213, 220, .68);
}


.water-alert,
.hydro-note {
    background:
        rgba(252, 247, 235, .82);
}


/* ======================================================
   EFECTO DE PROFUNDIDAD AL HACER SCROLL
   ====================================================== */

main {
    isolation:
        isolate;
}


main::before {
    content: "";
    position: absolute;
    inset: 0 -42px;
    z-index: -1;
    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .07),
            rgba(222, 238, 243, .15)
        );

    border-radius:
        28px;

    filter:
        blur(2px);
}


/* ======================================================
   CONFORT / ACCESIBILIDAD
   ====================================================== */

@media (prefers-reduced-motion: reduce) {
    body::before {
        animation:
            none !important;
    }
}


@media (max-width: 700px) {
    body::before {
        opacity:
            .72;

        background-position:
            52% top;
    }


    .search-panel,
    .dashboard,
    .resource-command-panel,
    .resource-results-section {
        backdrop-filter:
            blur(9px);

        -webkit-backdrop-filter:
            blur(9px);
    }
}


/* ======================================================
   V6.3 · FONDO INMERSIVO GLOBAL
   Continuidad visual con la cabecera azul/verde
   ====================================================== */

:root {
    --immersive-deep:
        #0d3f52;

    --immersive-mid:
        #155f67;

    --immersive-blue:
        #234f85;

    --immersive-aqua:
        #1d756f;

    --glass-strong:
        rgba(246, 251, 252, .88);

    --glass-medium:
        rgba(238, 247, 249, .80);

    --glass-blue:
        rgba(235, 242, 251, .82);

    --glass-green:
        rgba(234, 247, 243, .82);
}


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

html {
    background:
        #0f4455;
}


body {
    min-height:
        100vh;

    background:
        radial-gradient(
            circle at 14% 15%,
            rgba(55, 202, 176, .22),
            transparent 30%
        ),
        radial-gradient(
            circle at 87% 22%,
            rgba(72, 120, 219, .25),
            transparent 34%
        ),
        radial-gradient(
            circle at 46% 72%,
            rgba(37, 142, 151, .18),
            transparent 37%
        ),
        linear-gradient(
            155deg,
            #103f53 0%,
            #155a66 29%,
            #174f6e 56%,
            #173d66 78%,
            #123d52 100%
        );

    background-attachment:
        fixed;
}


/* Fondo SVG anterior: ahora funciona como textura sobre el azul */
body::before {
    opacity:
        .22;

    mix-blend-mode:
        screen;

    filter:
        saturate(.85)
        contrast(.96);

    animation-duration:
        42s;
}


/* Halos de luz que recuerdan a la cabecera */
body::after {
    background:
        radial-gradient(
            circle at 5% 34%,
            rgba(89, 234, 205, .15),
            transparent 25%
        ),
        radial-gradient(
            circle at 96% 42%,
            rgba(101, 151, 244, .16),
            transparent 29%
        ),
        radial-gradient(
            circle at 45% 88%,
            rgba(82, 208, 206, .11),
            transparent 31%
        ),
        linear-gradient(
            180deg,
            rgba(4, 37, 54, .03),
            rgba(5, 30, 51, .13)
        );
}


/* Canvas ambiental inferior */
.page-ambient-canvas {
    position:
        fixed;

    inset:
        0;

    width:
        100vw;

    height:
        100vh;

    pointer-events:
        none;

    z-index:
        -1;

    opacity:
        .88;
}


/* ======================================================
   CONTINUIDAD ENTRE HERO Y CONTENIDO
   ====================================================== */

.premium-hero {
    box-shadow:
        0 18px 60px
        rgba(0, 23, 36, .22);
}


main {
    position:
        relative;

    z-index:
        1;

    padding-bottom:
        70px;
}


/* La antigua lámina blanca debajo del main desaparece */
main::before {
    background:
        linear-gradient(
            180deg,
            rgba(232, 247, 247, .045),
            rgba(219, 236, 244, .028)
        );

    border:
        1px solid
        rgba(188, 225, 228, .035);

    filter:
        none;
}


/* ======================================================
   PANELES PRINCIPALES DE CRISTAL
   ====================================================== */

.search-panel,
.dashboard,
.resource-command-panel,
.resource-results-section {
    border:
        1px solid
        rgba(217, 238, 240, .37);

    background:
        linear-gradient(
            145deg,
            rgba(246, 251, 251, .90),
            rgba(231, 243, 247, .84)
        );

    box-shadow:
        0 24px 60px
        rgba(2, 28, 42, .22),
        inset 0 1px 0
        rgba(255, 255, 255, .74);

    backdrop-filter:
        blur(18px)
        saturate(120%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(120%);
}


/* Halo azul/verde reflejado en los paneles */
.search-panel,
.resource-command-panel {
    background:
        radial-gradient(
            circle at 6% 10%,
            rgba(44, 170, 151, .11),
            transparent 30%
        ),
        radial-gradient(
            circle at 96% 3%,
            rgba(75, 120, 211, .11),
            transparent 33%
        ),
        linear-gradient(
            145deg,
            rgba(247, 252, 251, .91),
            rgba(230, 242, 247, .84)
        );
}


.dashboard,
.resource-results-section {
    background:
        linear-gradient(
            155deg,
            rgba(244, 250, 250, .90),
            rgba(229, 241, 247, .84)
        );
}


/* ======================================================
   PANELES INTERIORES
   ====================================================== */

.panel {
    border:
        1px solid
        rgba(202, 221, 227, .76);

    background:
        linear-gradient(
            145deg,
            rgba(250, 253, 253, .88),
            rgba(233, 244, 247, .81)
        );

    box-shadow:
        0 12px 32px
        rgba(5, 39, 53, .09),
        inset 0 1px 0
        rgba(255, 255, 255, .72);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


/* Variaciones cromáticas suaves, más visibles que V6.2 */
.panel:nth-of-type(4n + 1) {
    background:
        linear-gradient(
            145deg,
            rgba(244, 252, 249, .90),
            rgba(223, 241, 237, .82)
        );
}


.panel:nth-of-type(4n + 2) {
    background:
        linear-gradient(
            145deg,
            rgba(245, 250, 254, .90),
            rgba(225, 236, 249, .83)
        );
}


.panel:nth-of-type(4n + 3) {
    background:
        linear-gradient(
            145deg,
            rgba(244, 251, 252, .90),
            rgba(224, 240, 244, .83)
        );
}


.panel:nth-of-type(4n) {
    background:
        linear-gradient(
            145deg,
            rgba(249, 250, 247, .90),
            rgba(237, 241, 235, .84)
        );
}


/* ======================================================
   KPI Y TARJETAS
   ====================================================== */

.metric-card,
.water-card,
.hydro-card,
.smart-signal-card,
.resource-result-card,
.resource-roadmap-card,
.resource-category-card,
.resource-context-card {
    border:
        1px solid
        rgba(200, 220, 226, .72);

    background:
        linear-gradient(
            145deg,
            rgba(251, 254, 254, .87),
            rgba(231, 244, 246, .80)
        );

    box-shadow:
        0 10px 28px
        rgba(4, 38, 52, .085);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


.metric-card:hover,
.water-card:hover,
.hydro-card:hover,
.smart-signal-card:hover,
.resource-result-card:hover,
.resource-category-card:hover {
    border-color:
        rgba(167, 216, 217, .82);

    box-shadow:
        0 16px 34px
        rgba(2, 31, 46, .13),
        0 0 0 1px
        rgba(88, 187, 174, .035);
}


/* ======================================================
   PESTAÑAS
   ====================================================== */

.dashboard-tabs {
    border:
        1px solid
        rgba(192, 218, 226, .64);

    background:
        linear-gradient(
            90deg,
            rgba(218, 238, 239, .82),
            rgba(220, 231, 246, .82)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .55);
}


.tab-button {
    color:
        #52707c;
}


.tab-button:hover {
    color:
        #176b63;

    background:
        rgba(255, 255, 255, .35);
}


.tab-button.active {
    color:
        #154f56;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .95),
            rgba(232, 247, 244, .92)
        );

    box-shadow:
        0 8px 20px
        rgba(5, 43, 55, .12);
}


/* ======================================================
   INPUTS / BÚSQUEDAS
   ====================================================== */

input,
textarea,
select {
    border-color:
        rgba(174, 203, 213, .82);

    background:
        rgba(241, 249, 249, .82);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .55);
}


input:focus,
textarea:focus,
select:focus {
    border-color:
        rgba(69, 147, 161, .70);

    background:
        rgba(250, 254, 254, .96);

    box-shadow:
        0 0 0 3px
        rgba(45, 151, 151, .09);
}


/* ======================================================
   CENTRO DE RECURSOS
   ====================================================== */

.resource-intelligence-bar,
.resource-search-shell {
    border:
        1px solid
        rgba(192, 216, 223, .72);

    background:
        linear-gradient(
            145deg,
            rgba(233, 246, 245, .76),
            rgba(228, 239, 249, .75)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .5);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


.resource-result-card:nth-child(3n + 1) {
    background:
        linear-gradient(
            145deg,
            rgba(248, 253, 251, .90),
            rgba(227, 242, 237, .82)
        );
}


.resource-result-card:nth-child(3n + 2) {
    background:
        linear-gradient(
            145deg,
            rgba(248, 251, 254, .90),
            rgba(228, 237, 249, .82)
        );
}


.resource-result-card:nth-child(3n) {
    background:
        linear-gradient(
            145deg,
            rgba(247, 252, 252, .90),
            rgba(227, 241, 244, .82)
        );
}


/* ======================================================
   DIAGNÓSTICO / DECISIONES
   ====================================================== */

.smart-hero-panel {
    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(63, 177, 156, .10),
            transparent 30%
        ),
        radial-gradient(
            circle at 96% 5%,
            rgba(70, 118, 212, .09),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(247, 252, 251, .91),
            rgba(229, 242, 247, .84)
        );
}


.smart-decision-box.good {
    border-color:
        rgba(112, 190, 166, .46);

    background:
        linear-gradient(
            145deg,
            rgba(232, 249, 242, .87),
            rgba(218, 241, 235, .80)
        );
}


.smart-decision-box.stop {
    border-color:
        rgba(213, 157, 151, .42);

    background:
        linear-gradient(
            145deg,
            rgba(253, 240, 238, .88),
            rgba(247, 231, 229, .82)
        );
}


/* ======================================================
   MAPA / BLOQUES BLANCOS DE TERCEROS
   ====================================================== */

.map-frame {
    border:
        1px solid
        rgba(180, 207, 217, .82);

    box-shadow:
        0 13px 32px
        rgba(3, 33, 47, .14);
}


/* ======================================================
   SEPARACIÓN ENTRE SECCIONES
   ====================================================== */

.tab-content {
    position:
        relative;
}


.tab-panel {
    position:
        relative;
}


.tab-panel::before {
    content:
        "";

    position:
        absolute;

    inset:
        -18px -10px;

    z-index:
        -1;

    pointer-events:
        none;

    border-radius:
        22px;

    background:
        radial-gradient(
            circle at 7% 20%,
            rgba(66, 184, 163, .055),
            transparent 31%
        ),
        radial-gradient(
            circle at 92% 74%,
            rgba(70, 117, 207, .055),
            transparent 32%
        );
}


/* ======================================================
   SCROLLBAR (navegadores compatibles)
   ====================================================== */

html {
    scrollbar-color:
        #4d8793
        #153f50;
}


::-webkit-scrollbar {
    width:
        11px;
}


::-webkit-scrollbar-track {
    background:
        #153f50;
}


::-webkit-scrollbar-thumb {
    border:
        3px solid
        #153f50;

    border-radius:
        999px;

    background:
        linear-gradient(
            #4d9d96,
            #5177a9
        );
}


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

@media (max-width: 700px) {
    body {
        background:
            linear-gradient(
                160deg,
                #104658,
                #175864 42%,
                #173f62 100%
            );

        background-attachment:
            scroll;
    }


    body::before {
        opacity:
            .16;
    }


    .page-ambient-canvas {
        opacity:
            .58;
    }


    .search-panel,
    .dashboard,
    .resource-command-panel,
    .resource-results-section {
        backdrop-filter:
            blur(13px);

        -webkit-backdrop-filter:
            blur(13px);
    }
}


@media (prefers-reduced-motion: reduce) {
    .page-ambient-canvas {
        opacity:
            .62;
    }
}


/* ======================================================
   V6.4 · NAVEGACIÓN AMPLIADA
   ====================================================== */

.premium-main-nav {
    max-width: 720px;
    overflow-x: auto;
    scrollbar-width: none;
}

.premium-main-nav::-webkit-scrollbar {
    display: none;
}

.hero-cinematic-action {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid rgba(143, 246, 226, .25);
    border-radius: 10px;
    background:
        linear-gradient(
            135deg,
            rgba(76, 211, 187, .13),
            rgba(94, 140, 229, .11)
        );
    color: #dffef7;
    font-family: inherit;
    font-size: .68rem;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(12px);
    transition: .2s ease;
}

.hero-cinematic-action:hover {
    transform: translateY(-2px);
    border-color: rgba(176, 255, 239, .45);
    box-shadow: 0 10px 30px rgba(0, 28, 42, .16);
}


/* ======================================================
   V6.4 · SISTEMA GENERAL
   ====================================================== */

.knowledge-view,
.projects-network-view,
.action-view {
    margin-top: -48px;
}

.ecosystem-command-panel,
.ecosystem-content-panel {
    border: 1px solid rgba(217, 238, 240, .37);
    border-radius: 18px;
    background:
        radial-gradient(
            circle at 6% 7%,
            rgba(55, 187, 164, .10),
            transparent 29%
        ),
        radial-gradient(
            circle at 95% 8%,
            rgba(73, 121, 217, .10),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(246, 251, 251, .90),
            rgba(230, 242, 247, .84)
        );
    box-shadow:
        0 24px 60px rgba(2, 28, 42, .20),
        inset 0 1px 0 rgba(255,255,255,.74);
    backdrop-filter: blur(18px) saturate(118%);
    -webkit-backdrop-filter: blur(18px) saturate(118%);
}

.ecosystem-command-panel {
    padding: 27px;
}

.ecosystem-content-panel {
    padding: 23px;
    margin-top: 13px;
}

.ecosystem-title-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 20px;
    align-items: start;
}

.ecosystem-command-panel h2,
.ecosystem-content-panel h2 {
    margin-top: 2px;
    color: #284753;
    font-size: 1.2rem;
    letter-spacing: -.03em;
}

.ecosystem-command-panel p {
    max-width: 760px;
    margin-top: 6px;
    color: #6f838d;
    font-size: .73rem;
    line-height: 1.6;
}

.ecosystem-section-head {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 15px;
}

.ecosystem-method-tag {
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(239, 247, 247, .9);
    color: #5e777f;
    font-size: .57rem;
    white-space: nowrap;
}

.ecosystem-feature-button {
    min-height: 78px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 11px;
    align-items: center;
    padding: 13px 15px;
    border: 1px solid rgba(166, 208, 208, .65);
    border-radius: 13px;
    background:
        linear-gradient(
            135deg,
            rgba(233, 249, 244, .94),
            rgba(232, 240, 252, .91)
        );
    color: #28565d;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(8, 44, 56, .08);
}

.ecosystem-feature-button > span {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #0b7169, #2563d9);
    color: white;
}

.ecosystem-feature-button strong,
.ecosystem-feature-button small {
    display: block;
}

.ecosystem-feature-button strong {
    font-size: .68rem;
}

.ecosystem-feature-button small {
    margin-top: 2px;
    color: #7a8c95;
    font-size: .56rem;
}

.ecosystem-primary-button,
.ecosystem-outline-button {
    min-height: 36px;
    padding: 0 12px;
    border-radius: 9px;
    font-family: inherit;
    font-size: .63rem;
    font-weight: 700;
    cursor: pointer;
}

.ecosystem-primary-button {
    border: 0;
    background: linear-gradient(110deg, #0b7169, #2563d9);
    color: #fff;
}

.ecosystem-outline-button {
    border: 1px solid #bfd7dc;
    background: rgba(247,252,252,.84);
    color: #176b63;
}


/* ======================================================
   CONOCIMIENTO
   ====================================================== */

.knowledge-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px 170px;
    gap: 9px;
    margin-top: 19px;
}

.knowledge-search-box {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-items: center;
    padding: 0 10px;
    border: 1px solid rgba(184, 207, 216, .82);
    border-radius: 10px;
    background: rgba(242,249,249,.82);
}

.knowledge-search-box input {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.knowledge-search-row select {
    border-radius: 10px;
}

.knowledge-topic-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 11px;
}

.knowledge-topic {
    padding: 6px 10px;
    border: 1px solid rgba(193, 211, 219, .78);
    border-radius: 999px;
    background: rgba(244,249,250,.76);
    color: #687d87;
    font-family: inherit;
    font-size: .59rem;
    cursor: pointer;
}

.knowledge-topic.active {
    border-color: #acd8cf;
    background: #e8f6f2;
    color: #176b63;
    font-weight: 700;
}

.knowledge-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 13px 0;
}

.knowledge-stats-strip > div {
    padding: 10px 12px;
    border: 1px solid rgba(209, 229, 232, .30);
    border-radius: 10px;
    background: rgba(10, 61, 73, .35);
    color: rgba(255,255,255,.85);
    backdrop-filter: blur(10px);
}

.knowledge-stats-strip strong,
.knowledge-stats-strip span {
    display: block;
}

.knowledge-stats-strip strong {
    font-size: .9rem;
}

.knowledge-stats-strip span {
    color: rgba(255,255,255,.59);
    font-size: .55rem;
}

.knowledge-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
}

.knowledge-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 15px;
    border: 1px solid rgba(193, 215, 221, .74);
    border-radius: 14px;
    background:
        linear-gradient(
            145deg,
            rgba(249, 253, 252, .90),
            rgba(229, 243, 246, .82)
        );
    box-shadow: 0 10px 26px rgba(4,39,52,.075);
    transform-style: preserve-3d;
}

.knowledge-card-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}

.knowledge-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(226, 241, 241, .9);
    font-size: 20px;
}

.knowledge-format {
    color: #6e818a;
    font-size: .52rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.knowledge-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

.knowledge-badge {
    padding: 3px 6px;
    border-radius: 999px;
    font-size: .51rem;
    font-weight: 650;
}

.knowledge-badge.conceptual {
    background: #f3eff9;
    color: #735e91;
}

.knowledge-badge.production {
    background: #fff5df;
    color: #8a641d;
}

.knowledge-badge.reference {
    background: #eaf7f2;
    color: #24755f;
}

.knowledge-badge.status {
    background: #edf2f5;
    color: #687c86;
}

.knowledge-card h3 {
    margin-top: 10px;
    color: #294650;
    font-size: .79rem;
    line-height: 1.3;
}

.knowledge-author {
    display: block;
    margin-top: 4px;
    color: #71848d;
    font-size: .57rem;
}

.knowledge-description {
    margin-top: 8px;
    color: #6c8089;
    font-size: .64rem;
    line-height: 1.55;
}

.knowledge-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 10px;
}

.knowledge-topics span {
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(231, 240, 243, .88);
    color: #68808a;
    font-size: .50rem;
}

.knowledge-caution {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 7px;
    margin-top: 10px;
    padding: 8px;
    border-radius: 9px;
    background: rgba(247, 249, 246, .73);
    color: #76878e;
}

.knowledge-caution p {
    font-size: .55rem;
    line-height: 1.45;
}

.knowledge-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
}

.knowledge-lang,
.knowledge-pending-link,
.knowledge-card-footer a {
    color: #70838c;
    font-size: .53rem;
}

.knowledge-card-footer a {
    color: #176b63;
    text-decoration: none;
    font-weight: 700;
}

.knowledge-translation-panel {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 18px;
    align-items: center;
    margin-top: 13px;
    padding: 20px 22px;
    border: 1px solid rgba(199, 226, 226, .25);
    border-radius: 17px;
    background:
        linear-gradient(
            125deg,
            rgba(8, 70, 78, .64),
            rgba(30, 68, 105, .62)
        );
    color: white;
    box-shadow: 0 18px 44px rgba(0,27,40,.17);
}

.knowledge-translation-panel h3 {
    margin-top: 2px;
    font-size: .86rem;
}

.knowledge-translation-panel p {
    margin-top: 4px;
    color: rgba(255,255,255,.66);
    font-size: .62rem;
    line-height: 1.55;
}

.translation-visual {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    position: relative;
    font-size: 26px;
}

.translation-ring {
    position: absolute;
    border: 1px solid rgba(153, 241, 224, .24);
    border-radius: 50%;
}

.translation-ring.ring-a {
    inset: 3px;
    animation: ecosystemSpin 12s linear infinite;
}

.translation-ring.ring-b {
    inset: 14px;
    border-style: dashed;
    animation: ecosystemSpinReverse 9s linear infinite;
}

@keyframes ecosystemSpin {
    to { transform: rotate(360deg); }
}

@keyframes ecosystemSpinReverse {
    to { transform: rotate(-360deg); }
}

.ecosystem-empty {
    padding: 45px 15px;
    text-align: center;
    color: #778991;
}

.ecosystem-empty > span {
    display: block;
    font-size: 28px;
}

.ecosystem-empty strong {
    display: block;
    margin-top: 6px;
    font-size: .75rem;
}

.ecosystem-empty p {
    margin-top: 3px;
    font-size: .6rem;
}


/* ======================================================
   PROYECTOS
   ====================================================== */

.projects-command-panel {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 20px;
    align-items: center;
}

.project-principles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.project-principles span {
    padding: 7px 9px;
    border: 1px solid rgba(185, 215, 217, .60);
    border-radius: 9px;
    background: rgba(239, 249, 247, .76);
    color: #55747b;
    font-size: .56rem;
}

.project-map-layout {
    display: grid;
    grid-template-columns: 1.55fr .75fr;
    gap: 13px;
}

.project-map-panel,
.projects-side-panel {
    margin-top: 13px;
}

#projectsMap {
    height: 410px;
    border: 1px solid rgba(173, 203, 214, .8);
    border-radius: 13px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(3,34,47,.13);
}

.projects-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 9px;
    color: #6e828b;
    font-size: .55rem;
}

.project-dot {
    width: 8px;
    height: 8px;
    display: inline-block;
    margin-right: 4px;
    border-radius: 50%;
}

.project-dot.pilot {
    background: #169b72;
}

.project-dot.idea {
    background: #d29631;
}

.project-dot.future {
    background: #6477a6;
}

.projects-side-panel h3 {
    margin-top: 3px;
    color: #2c4c56;
    font-size: .85rem;
}

.projects-side-panel > p {
    margin-top: 7px;
    color: #71848d;
    font-size: .63rem;
    line-height: 1.55;
}

.project-rule {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 9px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid rgba(198, 217, 224, .72);
    border-radius: 10px;
    background: rgba(240,247,248,.74);
}

.project-rule > span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg,#0b7169,#2563d9);
    color: white;
    font-size: .55rem;
}

.project-rule strong,
.project-rule small {
    display: block;
}

.project-rule strong {
    color: #36535d;
    font-size: .63rem;
}

.project-rule small {
    margin-top: 2px;
    color: #7d8f97;
    font-size: .54rem;
}

.projects-side-panel .ecosystem-primary-button {
    width: 100%;
    margin-top: 13px;
}

.project-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.project-filter {
    padding: 5px 8px;
    border: 1px solid #d2dfe3;
    border-radius: 999px;
    background: #f4f8f9;
    color: #687d86;
    font-family: inherit;
    font-size: .54rem;
    cursor: pointer;
}

.project-filter.active {
    background: #e7f6f1;
    color: #176b63;
    border-color: #b9ded5;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.project-card {
    padding: 14px;
    border: 1px solid rgba(196,216,223,.76);
    border-radius: 13px;
    background:
        linear-gradient(
            145deg,
            rgba(248,253,252,.90),
            rgba(228,242,246,.82)
        );
    box-shadow: 0 10px 26px rgba(4,39,52,.075);
    transform-style: preserve-3d;
}

.project-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.project-card-icon {
    font-size: 22px;
}

.project-status {
    padding: 3px 6px;
    border-radius: 999px;
    font-size: .50rem;
    font-weight: 700;
}

.project-status.pilot {
    background: #e9f7f1;
    color: #1f795e;
}

.project-status.idea {
    background: #fff5e1;
    color: #8d641d;
}

.project-status.future {
    background: #eef1f7;
    color: #61729a;
}

.project-location {
    display: block;
    margin-top: 9px;
    color: #0b7169;
    font-size: .52rem;
    font-weight: 700;
}

.project-card h3 {
    margin-top: 3px;
    color: #2d4c56;
    font-size: .75rem;
    line-height: 1.3;
}

.project-field {
    margin-top: 10px;
}

.project-field strong {
    display: block;
    color: #526b75;
    font-size: .56rem;
}

.project-field p {
    margin-top: 3px;
    color: #74868f;
    font-size: .57rem;
    line-height: 1.48;
}

.project-field.learning {
    padding: 8px;
    border-radius: 8px;
    background: rgba(232,245,242,.72);
}

.project-precision {
    display: block;
    margin-top: 10px;
    color: #89969c;
    font-size: .49rem;
}


/* ======================================================
   ACCIÓN
   ====================================================== */

.action-command-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px;
    gap: 20px;
    align-items: center;
}

.action-pulse {
    width: 115px;
    height: 115px;
    justify-self: end;
    position: relative;
    display: grid;
    place-items: center;
}

.action-pulse > div {
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(80,179,164,.30);
    border-radius: 50%;
    animation: actionPulse 3.2s ease-out infinite;
}

.action-pulse > div:nth-child(2) {
    inset: 28px;
    animation-delay: -1.2s;
}

.action-pulse > span {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg,#0b7169,#2563d9);
    color: white;
    font-size: 18px;
    box-shadow: 0 10px 28px rgba(17,92,102,.20);
}

@keyframes actionPulse {
    0% { transform: scale(.72); opacity: .1; }
    60% { opacity: .55; }
    100% { transform: scale(1.12); opacity: 0; }
}

.action-generator-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

.action-generator-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.action-generator-form label > span {
    display: block;
    margin-bottom: 4px;
    color: #70838c;
    font-size: .56rem;
}

.action-generator-form select {
    width: 100%;
    height: 36px;
}

.action-generator-form .ecosystem-primary-button {
    grid-column: 1 / -1;
}

.action-recommendation-panel {
    min-height: 260px;
}

.action-placeholder {
    min-height: 190px;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
    color: #73868f;
}

.action-placeholder > span {
    font-size: 27px;
}

.action-placeholder strong {
    margin-top: 6px;
    font-size: .72rem;
}

.action-placeholder p {
    margin-top: 3px;
    font-size: .58rem;
}

.action-generated-icon {
    margin-top: 10px;
    font-size: 30px;
}

.action-recommendation-panel h3 {
    margin-top: 5px;
    color: #2f505a;
    font-size: .84rem;
}

.action-generated-description {
    margin-top: 5px;
    color: #71848d;
    font-size: .62rem;
    line-height: 1.55;
}

.action-generated-step {
    margin-top: 9px;
    padding: 8px;
    border-radius: 9px;
    background: rgba(238,246,247,.78);
}

.action-generated-step strong {
    display: block;
    color: #4e6973;
    font-size: .56rem;
}

.action-generated-step p {
    margin-top: 2px;
    color: #76878f;
    font-size: .55rem;
    line-height: 1.45;
}

.action-generated-step.material {
    background: rgba(237,247,243,.82);
}

.action-recommendation-panel .ecosystem-outline-button {
    margin-top: 10px;
}

.action-ideas-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
}

.action-idea-card {
    padding: 14px;
    border: 1px solid rgba(195,216,223,.74);
    border-radius: 13px;
    background:
        linear-gradient(
            145deg,
            rgba(248,253,252,.90),
            rgba(229,243,246,.82)
        );
    box-shadow: 0 10px 26px rgba(4,39,52,.075);
    transform-style: preserve-3d;
}

.action-idea-icon {
    display: block;
    font-size: 24px;
}

.action-idea-type {
    display: block;
    width: fit-content;
    margin-top: 8px;
    padding: 3px 6px;
    border-radius: 999px;
    background: #e9f5f3;
    color: #26746b;
    font-size: .50rem;
}

.action-idea-card h3 {
    margin-top: 5px;
    color: #2f4d57;
    font-size: .73rem;
}

.action-idea-card > p {
    margin-top: 5px;
    color: #71848d;
    font-size: .59rem;
    line-height: 1.5;
}

.action-materials {
    margin-top: 10px;
    padding: 8px;
    border-radius: 8px;
    background: rgba(238,246,247,.72);
}

.action-materials strong,
.action-materials span {
    display: block;
}

.action-materials strong {
    color: #566e77;
    font-size: .53rem;
}

.action-materials span {
    margin-top: 2px;
    color: #7c8c94;
    font-size: .52rem;
    line-height: 1.45;
}


/* ======================================================
   CINEMATIC INTRO
   ====================================================== */

.cinematic-open {
    overflow: hidden;
}

.cinematic-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: grid;
    place-items: center;
    padding: 18px;
    background:
        radial-gradient(
            circle at center,
            rgba(10,67,77,.42),
            rgba(1,15,24,.92)
        );
    backdrop-filter: blur(16px);
}

.cinematic-shell {
    width: min(1180px, 96vw);
    position: relative;
    border: 1px solid rgba(187,240,233,.19);
    border-radius: 20px;
    overflow: hidden;
    background: #071a25;
    box-shadow:
        0 40px 100px rgba(0,0,0,.52),
        0 0 0 1px rgba(255,255,255,.025);
}

.cinematic-close {
    position: absolute;
    right: 13px;
    top: 11px;
    z-index: 30;
    width: 35px;
    height: 35px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    background: rgba(2,20,28,.46);
    color: white;
    font-size: 20px;
    cursor: pointer;
    backdrop-filter: blur(10px);
}

.cinematic-scene {
    height: min(68vh, 630px);
    min-height: 430px;
    position: relative;
    overflow: hidden;
    background: #102b36;
    transition: background 1.2s ease;
}

.cinematic-noise {
    position: absolute;
    inset: 0;
    z-index: 8;
    opacity: .08;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 20% 20%, white 0 1px, transparent 1px),
        radial-gradient(circle at 80% 35%, white 0 1px, transparent 1px);
    background-size: 9px 9px, 13px 13px;
    mix-blend-mode: overlay;
}

.cinematic-horizon {
    position: absolute;
    inset: 0;
    transition: 1.3s ease;
}

.scene-chaos .cinematic-horizon {
    background:
        linear-gradient(
            180deg,
            #32444b 0%,
            #6b7774 55%,
            #403f3b 100%
        );
}

.scene-threshold .cinematic-horizon {
    background:
        linear-gradient(
            110deg,
            #4a5554 0%,
            #465954 44%,
            #638a77 51%,
            #3d8b79 66%,
            #69a8a0 100%
        );
}

.scene-regenerative .cinematic-horizon {
    background:
        linear-gradient(
            180deg,
            #67a6bf 0%,
            #8dc8c0 50%,
            #4f9877 100%
        );
}

.scene-paradigm .cinematic-horizon {
    background:
        radial-gradient(
            circle at 60% 30%,
            rgba(112,231,205,.45),
            transparent 23%
        ),
        linear-gradient(
            135deg,
            #0f5361,
            #1b7b72 46%,
            #235986
        );
}

.cinematic-city {
    position: absolute;
    bottom: 24%;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    transition: 1.25s ease;
}

.cinematic-city span {
    display: block;
    width: 34px;
    background: #26343b;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
}

.city-chaos {
    left: 3%;
}

.city-chaos span:nth-child(1) { height: 96px; }
.city-chaos span:nth-child(2) { height: 150px; }
.city-chaos span:nth-child(3) { height: 112px; }
.city-chaos span:nth-child(4) { height: 185px; }
.city-chaos span:nth-child(5) { height: 125px; }
.city-chaos span:nth-child(6) { height: 172px; }
.city-chaos span:nth-child(7) { height: 105px; }
.city-chaos span:nth-child(8) { height: 145px; }
.city-chaos span:nth-child(9) { height: 119px; }

.city-future {
    right: 4%;
    opacity: .07;
    transform: translateX(60px);
}

.city-future span {
    width: 48px;
    border-radius: 22px 22px 4px 4px;
    background: linear-gradient(180deg,#b9e2d8,#438d82);
}

.city-future span:nth-child(1) { height: 95px; }
.city-future span:nth-child(2) { height: 135px; }
.city-future span:nth-child(3) { height: 105px; }
.city-future span:nth-child(4) { height: 155px; }
.city-future span:nth-child(5) { height: 118px; }
.city-future span:nth-child(6) { height: 87px; }

.cinematic-trees {
    position: absolute;
    left: 47%;
    bottom: 23%;
    display: flex;
    gap: 0;
    opacity: .18;
    transform: scale(.72);
    transition: 1.2s ease;
}

.cinematic-trees i {
    color: #214c3b;
    font-style: normal;
    font-size: 64px;
    margin-left: -12px;
}

.cinematic-people {
    position: absolute;
    right: 16%;
    bottom: 18%;
    display: flex;
    gap: 12px;
    opacity: 0;
    transition: 1.2s ease;
}

.cinematic-people i {
    position: relative;
    color: #d8eee5;
    font-style: normal;
    font-size: 14px;
}

.cinematic-people i::after {
    content: "";
    position: absolute;
    width: 3px;
    height: 18px;
    left: 50%;
    top: 12px;
    background: #d8eee5;
    transform: translateX(-50%);
}

.scene-threshold .city-chaos {
    opacity: .48;
    transform: translateX(-35px);
}

.scene-threshold .cinematic-trees {
    opacity: .9;
    transform: scale(1);
}

.scene-threshold .city-future {
    opacity: .32;
    transform: translateX(25px);
}

.scene-regenerative .city-chaos,
.scene-paradigm .city-chaos {
    opacity: .02;
    transform: translateX(-90px);
}

.scene-regenerative .cinematic-trees,
.scene-paradigm .cinematic-trees {
    opacity: .75;
    left: 29%;
    transform: scale(1.12);
}

.scene-regenerative .city-future,
.scene-paradigm .city-future {
    opacity: .88;
    transform: translateX(0);
}

.scene-regenerative .cinematic-people,
.scene-paradigm .cinematic-people {
    opacity: .92;
}

.cinematic-copy {
    position: absolute;
    left: 7%;
    bottom: 8%;
    z-index: 20;
    max-width: 660px;
    padding: 20px 22px;
    border-left: 2px solid rgba(150,238,220,.64);
    background: linear-gradient(90deg, rgba(4,24,31,.70), transparent);
    color: white;
    backdrop-filter: blur(4px);
}

.cinematic-copy > span {
    color: #9fe7d9;
    font-size: .59rem;
    font-weight: 760;
    letter-spacing: .12em;
}

.cinematic-copy h2 {
    margin-top: 5px;
    font-size: clamp(1.65rem, 3vw, 3rem);
    line-height: 1.05;
    letter-spacing: -.04em;
}

.cinematic-copy p {
    max-width: 580px;
    margin-top: 7px;
    color: rgba(255,255,255,.72);
    font-size: .75rem;
    line-height: 1.6;
}

.cinematic-controls {
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    background: rgba(4,22,30,.96);
}

.cinematic-controls > button {
    min-height: 34px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.82);
    font-family: inherit;
    font-size: .61rem;
    cursor: pointer;
}

.cinematic-progress {
    display: flex;
    gap: 6px;
    margin-right: auto;
}

.cinematic-progress .cinematic-dot {
    width: 25px;
    height: 4px;
    min-height: 4px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.17);
}

.cinematic-progress .cinematic-dot.active {
    background: #72cfbd;
}

.cinematic-auto {
    background: linear-gradient(110deg,#0b7169,#2563d9) !important;
}


/* ======================================================
   MODAL PROYECTO
   ====================================================== */

.ecosystem-modal {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(2,21,30,.72);
    backdrop-filter: blur(13px);
}

.ecosystem-modal-card {
    width: min(620px, 95vw);
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    padding: 24px;
    border: 1px solid rgba(205,230,232,.52);
    border-radius: 17px;
    background:
        linear-gradient(
            145deg,
            rgba(247,252,251,.98),
            rgba(230,242,247,.97)
        );
    box-shadow: 0 35px 90px rgba(0,0,0,.35);
}

.ecosystem-modal-close {
    position: absolute;
    right: 12px;
    top: 10px;
    width: 31px;
    height: 31px;
    border: 1px solid #d7e1e5;
    border-radius: 50%;
    background: white;
    color: #566d77;
    font-size: 18px;
    cursor: pointer;
}

.ecosystem-modal-card h2 {
    margin-top: 3px;
    color: #2e4e58;
    font-size: 1rem;
}

.ecosystem-modal-note {
    margin-top: 5px;
    color: #74868f;
    font-size: .61rem;
    line-height: 1.5;
}

.ecosystem-modal-card form {
    display: grid;
    gap: 10px;
    margin-top: 15px;
}

.ecosystem-modal-card label > span {
    display: block;
    margin-bottom: 4px;
    color: #647b85;
    font-size: .57rem;
}

.ecosystem-modal-card input,
.ecosystem-modal-card textarea {
    width: 100%;
}

.ecosystem-modal-card textarea {
    min-height: 85px;
    resize: vertical;
}

.proposal-saved {
    margin-top: 10px;
    padding: 9px;
    border-radius: 8px;
    background: #eaf7f1;
    color: #28775f;
    font-size: .61rem;
}


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

@media (max-width: 1150px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 900px) {
    .knowledge-view,
    .projects-network-view,
    .action-view {
        margin-top: -20px;
    }

    .ecosystem-title-grid,
    .projects-command-panel,
    .project-map-layout,
    .action-generator-layout {
        grid-template-columns: 1fr;
    }

    .project-principles {
        grid-template-columns: 1fr 1fr;
    }

    .action-pulse {
        justify-self: center;
    }

    .knowledge-search-row {
        grid-template-columns: 1fr 1fr;
    }

    .knowledge-search-box {
        grid-column: 1 / -1;
    }

    .knowledge-translation-panel {
        grid-template-columns: 70px 1fr;
    }

    .knowledge-translation-panel .ecosystem-outline-button {
        grid-column: 1 / -1;
    }
}

@media (max-width: 650px) {
    .ecosystem-command-panel,
    .ecosystem-content-panel {
        padding: 17px;
    }

    .knowledge-stats-strip,
    .knowledge-grid,
    .projects-grid,
    .action-ideas-grid {
        grid-template-columns: 1fr;
    }

    .knowledge-search-row,
    .action-generator-form {
        grid-template-columns: 1fr;
    }

    .knowledge-search-box,
    .action-generator-form .ecosystem-primary-button {
        grid-column: auto;
    }

    .project-principles {
        grid-template-columns: 1fr;
    }

    .knowledge-translation-panel {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .translation-visual {
        margin: auto;
    }

    #projectsMap {
        height: 330px;
    }

    .cinematic-modal {
        padding: 7px;
    }

    .cinematic-scene {
        min-height: 440px;
    }

    .cinematic-city {
        transform: scale(.7);
        transform-origin: bottom;
    }

    .cinematic-copy {
        left: 5%;
        right: 5%;
        bottom: 7%;
        padding: 14px;
    }

    .cinematic-controls {
        flex-wrap: wrap;
    }

    .cinematic-progress {
        order: 3;
        width: 100%;
    }

    .cinematic-narrate,
    .cinematic-auto {
        margin-left: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .translation-ring,
    .action-pulse > div {
        animation: none !important;
    }
}


/* ======================================================
   V6.5 · MEDIATECA AUDIOVISUAL
   ====================================================== */

.media-view {
    margin-top: -48px;
}

.media-command-panel,
.media-stage-panel,
.media-soundtrack-panel,
.media-comparison-panel,
.media-library-panel,
.media-music-sources {
    border: 1px solid rgba(217, 238, 240, .37);
    border-radius: 18px;
    background:
        radial-gradient(
            circle at 7% 8%,
            rgba(58, 190, 166, .10),
            transparent 29%
        ),
        radial-gradient(
            circle at 94% 5%,
            rgba(72, 120, 216, .11),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(246, 251, 251, .91),
            rgba(229, 242, 247, .84)
        );
    box-shadow:
        0 24px 60px rgba(2,28,42,.20),
        inset 0 1px 0 rgba(255,255,255,.72);
    backdrop-filter: blur(18px) saturate(118%);
    -webkit-backdrop-filter: blur(18px) saturate(118%);
}

.media-command-panel {
    min-height: 250px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 25px;
    align-items: center;
    padding: 27px;
    overflow: hidden;
}

.media-command-copy h2 {
    margin-top: 2px;
    color: #284753;
    font-size: 1.25rem;
    letter-spacing: -.03em;
}

.media-command-copy > p {
    max-width: 760px;
    margin-top: 7px;
    color: #6f838d;
    font-size: .73rem;
    line-height: 1.6;
}

.media-command-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 17px;
}

.media-orbital-visual {
    width: 250px;
    height: 220px;
    justify-self: center;
    position: relative;
    display: grid;
    place-items: center;
    perspective: 800px;
}

.media-core {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 34% 28%,
            #87e3d0,
            #256b83 72%
        );
    color: white;
    font-size: 20px;
    box-shadow:
        0 18px 45px rgba(4,49,63,.25),
        0 0 50px rgba(77,202,180,.20);
}

.media-orbit {
    position: absolute;
    border: 1px solid rgba(64,148,159,.22);
    border-radius: 50%;
}

.media-orbit-a {
    width: 220px;
    height: 90px;
    transform: rotateX(68deg) rotateZ(16deg);
    animation: ecosystemSpin 13s linear infinite;
}

.media-orbit-b {
    width: 180px;
    height: 170px;
    transform: rotateY(66deg) rotateZ(-20deg);
    animation: ecosystemSpinReverse 17s linear infinite;
}

.media-node {
    position: absolute;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(176,215,218,.60);
    border-radius: 50%;
    background: rgba(239,249,248,.90);
    box-shadow: 0 8px 24px rgba(4,44,57,.10);
}

.media-node.node-a { left: 18px; top: 82px; }
.media-node.node-b { right: 26px; top: 38px; }
.media-node.node-c { right: 20px; bottom: 28px; }
.media-node.node-d { left: 70px; top: 18px; }

.media-layout {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 13px;
    margin-top: 13px;
}

.media-stage-panel,
.media-soundtrack-panel,
.media-comparison-panel,
.media-library-panel {
    padding: 23px;
}

.media-duration,
.media-license-safe,
.media-reference-badge,
.media-method-tag {
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(235,245,246,.88);
    color: #657d86;
    font-size: .54rem;
    white-space: nowrap;
}

.media-license-safe {
    background: #e7f6f1;
    color: #24765f;
}

.media-script-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 12px;
}

.media-script-tab {
    padding: 6px 9px;
    border: 1px solid #d2e0e4;
    border-radius: 999px;
    background: rgba(246,250,251,.80);
    color: #657a84;
    font-family: inherit;
    font-size: .56rem;
    cursor: pointer;
}

.media-script-tab.active {
    border-color: #b9ded5;
    background: #e7f6f1;
    color: #176b63;
    font-weight: 700;
}

.media-script-content {
    max-height: 510px;
    overflow-y: auto;
    padding-right: 8px;
}

.media-script-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.media-script-meta strong {
    color: #34545e;
    font-size: .68rem;
}

.media-script-meta span {
    color: #82929a;
    font-size: .55rem;
}

.media-script-content > p {
    display: grid;
    grid-template-columns: 27px 1fr;
    gap: 8px;
    margin-top: 7px;
    padding: 9px 10px;
    border: 1px solid rgba(203,220,226,.62);
    border-radius: 9px;
    background: rgba(241,248,249,.66);
    color: #687d87;
    font-size: .62rem;
    line-height: 1.62;
}

.media-script-content > p > span {
    color: #2e8378;
    font-size: .51rem;
    font-weight: 750;
}

.media-narration-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid rgba(198,215,221,.62);
}

.media-narration-controls button {
    min-height: 33px;
    padding: 0 9px;
    border: 1px solid #ccdde1;
    border-radius: 8px;
    background: rgba(247,251,251,.88);
    color: #54707a;
    font-family: inherit;
    font-size: .56rem;
    cursor: pointer;
}

.media-narration-controls label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #748790;
    font-size: .54rem;
}

.media-narration-controls input {
    width: 110px;
}

.media-soundtrack-note {
    color: #71848d;
    font-size: .61rem;
    line-height: 1.55;
}

.soundtrack-presets {
    display: grid;
    gap: 7px;
    margin-top: 12px;
}

.soundtrack-preset {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 9px;
    padding: 10px;
    border: 1px solid rgba(198,216,223,.70);
    border-radius: 10px;
    background: rgba(242,248,249,.72);
    color: #506b75;
    text-align: left;
    cursor: pointer;
}

.soundtrack-preset.active {
    border-color: #aed7cf;
    background: rgba(229,247,241,.90);
}

.soundtrack-preset > span {
    grid-row: 1 / 3;
    align-self: center;
    font-size: 19px;
}

.soundtrack-preset strong,
.soundtrack-preset small {
    display: block;
}

.soundtrack-preset strong {
    font-size: .61rem;
}

.soundtrack-preset small {
    color: #809099;
    font-size: .51rem;
}

.soundtrack-controls {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.soundtrack-controls label {
    display: grid;
    gap: 4px;
    color: #71848d;
    font-size: .54rem;
}

.soundtrack-controls input {
    width: 100%;
}

.soundtrack-status {
    color: #788b94;
    font-size: .54rem;
    text-align: center;
}

.media-comparison-panel,
.media-library-panel {
    margin-top: 13px;
}

.venus-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}

.comparison-column {
    padding: 15px;
    border: 1px solid rgba(196,215,222,.73);
    border-radius: 13px;
    background: rgba(243,249,250,.73);
}

.comparison-column.venus {
    background:
        linear-gradient(
            145deg,
            rgba(240,246,253,.88),
            rgba(229,238,250,.80)
        );
}

.comparison-column.ours {
    background:
        linear-gradient(
            145deg,
            rgba(239,250,246,.88),
            rgba(225,242,237,.80)
        );
}

.comparison-label {
    display: block;
    margin-bottom: 7px;
    color: #50747c;
    font-size: .55rem;
    font-weight: 760;
    letter-spacing: .10em;
}

.comparison-item {
    margin-top: 8px;
    padding: 9px;
    border-radius: 9px;
    background: rgba(255,255,255,.44);
}

.comparison-item strong,
.comparison-difference strong {
    display: block;
    color: #405f69;
    font-size: .60rem;
}

.comparison-item p,
.comparison-difference p {
    margin-top: 3px;
    color: #72858e;
    font-size: .56rem;
    line-height: 1.5;
}

.comparison-source-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

.comparison-source-row a {
    padding: 5px 7px;
    border-radius: 7px;
    background: rgba(255,255,255,.58);
    color: #496b82;
    font-size: .51rem;
    font-weight: 650;
    text-decoration: none;
}

.comparison-difference {
    margin-top: 11px;
    padding: 10px;
    border: 1px solid rgba(126,190,173,.42);
    border-radius: 9px;
    background: rgba(231,247,241,.70);
}

.free-video-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 10px;
}

.free-video-card {
    min-width: 0;
    padding: 13px;
    border: 1px solid rgba(195,215,222,.74);
    border-radius: 13px;
    background:
        linear-gradient(
            145deg,
            rgba(249,253,252,.90),
            rgba(229,243,246,.82)
        );
    box-shadow: 0 10px 26px rgba(4,39,52,.07);
    transform-style: preserve-3d;
}

.free-video-visual {
    height: 95px;
    position: relative;
    display: grid;
    place-items: center;
    border-radius: 10px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(91,201,180,.32),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #1a5d69,
            #31557f
        );
}

.free-video-visual > span {
    font-size: 32px;
}

.free-video-visual > i {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.90);
    color: #24596a;
    font-style: normal;
    font-size: 10px;
}

.free-video-source {
    display: block;
    margin-top: 8px;
    color: #0b7169;
    font-size: .50rem;
    font-weight: 700;
}

.free-video-card h3 {
    margin-top: 3px;
    color: #31515b;
    font-size: .68rem;
}

.free-video-card > p {
    margin-top: 4px;
    color: #71848d;
    font-size: .55rem;
    line-height: 1.45;
}

.free-video-license {
    margin-top: 8px;
    padding: 7px;
    border-radius: 8px;
    background: rgba(239,246,247,.75);
}

.free-video-license strong,
.free-video-license span {
    display: block;
}

.free-video-license strong {
    color: #5a717a;
    font-size: .51rem;
}

.free-video-license span {
    margin-top: 2px;
    color: #829098;
    font-size: .48rem;
    line-height: 1.4;
}

.free-video-card > a {
    display: inline-flex;
    margin-top: 9px;
    padding: 5px 7px;
    border-radius: 7px;
    background: #eaf6f2;
    color: #176b63;
    font-size: .51rem;
    font-weight: 700;
    text-decoration: none;
}

.media-music-sources {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-top: 13px;
    padding: 16px 18px;
}

.media-music-sources > article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
}

.media-music-sources > article > span {
    font-size: 20px;
}

.media-music-sources strong {
    display: block;
    color: #3f5f69;
    font-size: .63rem;
}

.media-music-sources p {
    max-width: 740px;
    margin-top: 2px;
    color: #71848d;
    font-size: .55rem;
    line-height: 1.5;
}

.media-music-sources > a {
    padding: 7px 9px;
    border-radius: 8px;
    background: linear-gradient(110deg,#0b7169,#2563d9);
    color: white;
    font-size: .54rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .free-video-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .media-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 850px) {
    .media-view {
        margin-top: -20px;
    }

    .media-command-panel,
    .venus-comparison-grid {
        grid-template-columns: 1fr;
    }

    .media-orbital-visual {
        display: none;
    }

    .media-music-sources {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .media-command-panel,
    .media-stage-panel,
    .media-soundtrack-panel,
    .media-comparison-panel,
    .media-library-panel {
        padding: 17px;
    }

    .free-video-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .media-orbit {
        animation: none !important;
    }
}


/* ======================================================
   V6.6 · CONTACTO FLOTANTE
   Siempre visible mientras se navega por la página
   ====================================================== */

.floating-contact-button {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 8500;

    min-width: 162px;
    min-height: 54px;

    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 10px;
    align-items: center;

    padding: 8px 13px 8px 9px;

    border:
        1px solid
        rgba(171, 234, 224, .44);

    border-radius:
        15px;

    background:
        linear-gradient(
            135deg,
            rgba(8, 92, 93, .94),
            rgba(32, 82, 145, .95)
        );

    color:
        #ffffff;

    text-decoration:
        none;

    box-shadow:
        0 16px 42px
        rgba(0, 23, 37, .29),
        0 0 0 1px
        rgba(255, 255, 255, .035)
        inset;

    backdrop-filter:
        blur(16px)
        saturate(125%);

    -webkit-backdrop-filter:
        blur(16px)
        saturate(125%);

    overflow:
        hidden;

    isolation:
        isolate;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


.floating-contact-button::before {
    content:
        "";

    position:
        absolute;

    width:
        92px;

    height:
        92px;

    left:
        -35px;

    top:
        -45px;

    z-index:
        -1;

    border-radius:
        50%;

    background:
        rgba(90, 229, 207, .20);

    filter:
        blur(4px);
}


.floating-contact-button::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    pointer-events:
        none;

    background:
        linear-gradient(
            115deg,
            transparent 15%,
            rgba(255, 255, 255, .10) 45%,
            transparent 70%
        );

    transform:
        translateX(-120%);

    transition:
        transform .6s ease;
}


.floating-contact-button:hover {
    transform:
        translateY(-3px)
        scale(1.015);

    border-color:
        rgba(180, 250, 236, .72);

    box-shadow:
        0 21px 48px
        rgba(0, 23, 37, .35),
        0 0 24px
        rgba(71, 202, 184, .09);
}


.floating-contact-button:hover::after {
    transform:
        translateX(120%);
}


.floating-contact-button:focus-visible {
    outline:
        3px solid
        rgba(139, 232, 218, .64);

    outline-offset:
        4px;
}


.floating-contact-icon {
    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(255, 255, 255, .14);

    border-radius:
        11px;

    background:
        rgba(255, 255, 255, .11);

    color:
        #eafffb;

    font-size:
        17px;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .10);
}


.floating-contact-copy {
    min-width:
        0;

    display:
        block;

    line-height:
        1.05;
}


.floating-contact-copy strong,
.floating-contact-copy small {
    display:
        block;
}


.floating-contact-copy strong {
    color:
        #ffffff;

    font-size:
        .66rem;

    font-weight:
        780;

    letter-spacing:
        .01em;
}


.floating-contact-copy small {
    margin-top:
        3px;

    color:
        rgba(234, 255, 251, .66);

    font-size:
        .51rem;
}


.floating-contact-pulse {
    position:
        absolute;

    width:
        12px;

    height:
        12px;

    right:
        8px;

    top:
        8px;

    border:
        2px solid
        rgba(130, 239, 220, .40);

    border-radius:
        50%;

    animation:
        floatingContactPulse
        2.8s
        ease-out
        infinite;
}


@keyframes floatingContactPulse {
    0% {
        transform:
            scale(.55);

        opacity:
            .10;
    }

    45% {
        opacity:
            .66;
    }

    100% {
        transform:
            scale(2.25);

        opacity:
            0;
    }
}


/* Evitar que tape contenido al final de la página */
body {
    padding-bottom:
        max(
            env(safe-area-inset-bottom),
            8px
        );
}


/* ======================================================
   TABLET / MÓVIL
   ====================================================== */

@media (max-width: 700px) {
    .floating-contact-button {
        right:
            13px;

        bottom:
            calc(
                13px +
                env(safe-area-inset-bottom)
            );

        min-width:
            52px;

        width:
            52px;

        min-height:
            52px;

        height:
            52px;

        display:
            grid;

        grid-template-columns:
            1fr;

        padding:
            7px;

        border-radius:
            16px;
    }


    .floating-contact-icon {
        width:
            38px;

        height:
            38px;

        margin:
            auto;
    }


    .floating-contact-copy {
        position:
            absolute;

        width:
            1px;

        height:
            1px;

        padding:
            0;

        margin:
            -1px;

        overflow:
            hidden;

        clip:
            rect(0, 0, 0, 0);

        white-space:
            nowrap;

        border:
            0;
    }


    .floating-contact-pulse {
        right:
            3px;

        top:
            3px;
    }
}


@media (prefers-reduced-motion: reduce) {
    .floating-contact-pulse {
        animation:
            none !important;

        opacity:
            .55;
    }


    .floating-contact-button,
    .floating-contact-button::after {
        transition:
            none !important;
    }
}


/* ======================================================
   V6.7 · TRADUCTOR CORREGIDO
   ====================================================== */

.integrated-language-label {
    padding:
        7px 11px 4px;

    color:
        rgba(92, 116, 126, .72);

    font-size:
        .48rem;

    font-weight:
        760;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;
}


.language-option {
    position:
        relative;
}


.language-option.active {
    border-color:
        rgba(97, 191, 172, .52);

    background:
        linear-gradient(
            135deg,
            rgba(228, 247, 241, .96),
            rgba(229, 240, 252, .92)
        );

    color:
        #176b63;

    font-weight:
        760;

    box-shadow:
        inset 3px 0 0
        rgba(23, 126, 111, .72);
}


.language-option.active::after {
    content:
        "✓";

    position:
        absolute;

    right:
        10px;

    color:
        #21816f;

    font-weight:
        800;
}


.google-language-label > span::after {
    content:
        "";

    display:
        inline-block;

    width:
        5px;

    height:
        5px;

    margin-left:
        5px;

    border-radius:
        50%;

    background:
        #d49a35;

    vertical-align:
        middle;
}


/* ======================================================
   V6.8 · MÚSICA REAL + REPRODUCTOR FLOTANTE
   ====================================================== */

.real-soundtrack-presets {
    display:
        grid;

    gap:
        8px;

    margin-top:
        13px;
}


.real-soundtrack-card {
    width:
        100%;

    min-height:
        64px;

    display:
        grid;

    grid-template-columns:
        40px 1fr auto;

    gap:
        10px;

    align-items:
        center;

    padding:
        10px 11px;

    border:
        1px solid
        rgba(195, 216, 223, .74);

    border-radius:
        11px;

    background:
        linear-gradient(
            145deg,
            rgba(244, 250, 250, .88),
            rgba(232, 242, 248, .80)
        );

    color:
        #506b75;

    text-align:
        left;

    font-family:
        inherit;

    cursor:
        pointer;

    transition:
        .2s ease;
}


.real-soundtrack-card:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(128, 195, 184, .58);

    box-shadow:
        0 10px 24px
        rgba(5, 47, 59, .09);
}


.real-soundtrack-card.active {
    border-color:
        rgba(98, 188, 171, .66);

    background:
        linear-gradient(
            135deg,
            rgba(226, 247, 240, .94),
            rgba(228, 239, 252, .91)
        );

    box-shadow:
        inset 3px 0 0
        #178174;
}


.real-track-icon {
    width:
        40px;

    height:
        40px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    background:
        linear-gradient(
            135deg,
            rgba(17, 108, 103, .13),
            rgba(53, 96, 171, .12)
        );

    font-size:
        18px;
}


.real-track-copy strong,
.real-track-copy small {
    display:
        block;
}


.real-track-copy strong {
    color:
        #36565f;

    font-size:
        .62rem;
}


.real-track-copy small {
    margin-top:
        3px;

    color:
        #7a8c94;

    font-size:
        .51rem;
}


.real-track-check {
    width:
        23px;

    height:
        23px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        rgba(218, 235, 235, .70);

    color:
        transparent;

    font-size:
        .58rem;
}


.real-soundtrack-card.active
.real-track-check {
    background:
        #daf1ea;

    color:
        #187460;
}


.music-rights-note {
    display:
        grid;

    grid-template-columns:
        auto 1fr;

    gap:
        7px;

    margin-top:
        11px;

    padding:
        8px 9px;

    border:
        1px solid
        rgba(214, 200, 152, .35);

    border-radius:
        9px;

    background:
        rgba(250, 247, 234, .68);

    color:
        #7a7b70;
}


.music-rights-note p {
    font-size:
        .51rem;

    line-height:
        1.45;
}


/* Reproductor fijo: lado izquierdo para no chocar con Contacto */
.background-music-dock {
    position:
        fixed;

    left:
        22px;

    bottom:
        22px;

    z-index:
        8400;

    min-width:
        215px;

    min-height:
        54px;

    display:
        grid;

    grid-template-columns:
        38px 1fr 30px;

    gap:
        9px;

    align-items:
        center;

    padding:
        8px 9px;

    border:
        1px solid
        rgba(165, 229, 220, .28);

    border-radius:
        15px;

    background:
        linear-gradient(
            135deg,
            rgba(8, 65, 77, .91),
            rgba(28, 64, 112, .92)
        );

    color:
        white;

    box-shadow:
        0 16px 42px
        rgba(0, 23, 37, .26);

    backdrop-filter:
        blur(16px)
        saturate(125%);

    -webkit-backdrop-filter:
        blur(16px)
        saturate(125%);
}


.music-dock-play,
.music-dock-next {
    border:
        1px solid
        rgba(255, 255, 255, .12);

    background:
        rgba(255, 255, 255, .09);

    color:
        white;

    cursor:
        pointer;
}


.music-dock-play {
    width:
        38px;

    height:
        38px;

    border-radius:
        11px;

    font-size:
        13px;
}


.music-dock-next {
    width:
        30px;

    height:
        30px;

    border-radius:
        9px;

    color:
        rgba(232, 255, 250, .78);
}


.music-dock-info {
    min-width:
        0;
}


.music-dock-info strong,
.music-dock-info small {
    display:
        block;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;
}


.music-dock-info strong {
    max-width:
        125px;

    color:
        white;

    font-size:
        .58rem;
}


.music-dock-info small {
    max-width:
        132px;

    margin-top:
        3px;

    color:
        rgba(229, 251, 247, .58);

    font-size:
        .48rem;
}


@media (max-width: 700px) {
    .background-music-dock {
        left:
            13px;

        bottom:
            calc(
                13px +
                env(safe-area-inset-bottom)
            );

        min-width:
            52px;

        width:
            52px;

        min-height:
            52px;

        height:
            52px;

        display:
            grid;

        grid-template-columns:
            1fr;

        padding:
            7px;

        border-radius:
            16px;
    }


    .music-dock-info,
    .music-dock-next {
        display:
            none;
    }


    .music-dock-play {
        margin:
            auto;
    }
}


/* ======================================================
   V6.9 · VIDEO AMBIENTAL GLOBAL
   ====================================================== */

.global-video-background {
    position:
        fixed;

    inset:
        0;

    z-index:
        -8;

    width:
        100vw;

    height:
        100vh;

    overflow:
        hidden;

    pointer-events:
        none;

    background:
        #0d4052;
}


.global-background-video {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        100%;

    height:
        100%;

    min-width:
        100%;

    min-height:
        100%;

    object-fit:
        cover;

    object-position:
        center center;

    transform:
        translate(-50%, -50%)
        scale(1.035);

    opacity:
        .74;

    filter:
        saturate(.70)
        contrast(.92)
        brightness(.72);

    will-change:
        transform;
}


/*
  Capa azul/verde para que el vídeo mantenga
  el ADN visual de la portada.
*/
.global-video-tint {
    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at 11% 22%,
            rgba(21, 163, 142, .28),
            transparent 31%
        ),
        radial-gradient(
            circle at 88% 20%,
            rgba(47, 98, 192, .35),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(4, 61, 71, .68) 0%,
            rgba(9, 82, 91, .58) 38%,
            rgba(20, 60, 102, .66) 72%,
            rgba(5, 47, 65, .72) 100%
        );

    mix-blend-mode:
        normal;
}


/*
  Oscurece suavemente bordes para que paneles y textos
  conserven legibilidad.
*/
.global-video-vignette {
    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            ellipse at center,
            transparent 34%,
            rgba(0, 21, 31, .19) 72%,
            rgba(0, 17, 27, .38) 100%
        );
}


/*
  El fondo CSS anterior se vuelve semitransparente:
  ahora deja ver el vídeo entre los paneles.
*/
body {
    background:
        radial-gradient(
            circle at 14% 15%,
            rgba(55, 202, 176, .12),
            transparent 30%
        ),
        radial-gradient(
            circle at 87% 22%,
            rgba(72, 120, 219, .13),
            transparent 34%
        ),
        linear-gradient(
            155deg,
            rgba(16, 63, 83, .56) 0%,
            rgba(21, 90, 102, .50) 29%,
            rgba(23, 79, 110, .53) 56%,
            rgba(23, 61, 102, .58) 78%,
            rgba(18, 61, 82, .62) 100%
        );

    background-attachment:
        fixed;
}


/*
  La textura SVG y el canvas siguen presentes,
  pero más discretos para no competir con el vídeo.
*/
body::before {
    opacity:
        .11;
}


body::after {
    opacity:
        .72;
}


.page-ambient-canvas {
    opacity:
        .42;
}


/*
  Los paneles mantienen un cristal suficientemente opaco
  para poder leer incluso sobre imágenes en movimiento.
*/
.search-panel,
.dashboard,
.resource-command-panel,
.resource-results-section,
.ecosystem-command-panel,
.ecosystem-content-panel,
.media-command-panel,
.media-stage-panel,
.media-soundtrack-panel,
.media-comparison-panel,
.media-library-panel,
.media-music-sources {
    box-shadow:
        0 24px 62px
        rgba(0, 22, 34, .24),
        inset 0 1px 0
        rgba(255, 255, 255, .74);
}


/*
  El vídeo es puramente ambiental.
  En pantallas pequeñas se baja todavía más su presencia.
*/
@media (max-width: 700px) {
    .global-background-video {
        opacity:
            .48;

        filter:
            saturate(.63)
            contrast(.90)
            brightness(.68);
    }


    .global-video-tint {
        background:
            linear-gradient(
                160deg,
                rgba(10, 67, 82, .78),
                rgba(19, 78, 88, .72) 45%,
                rgba(20, 56, 94, .80)
            );
    }
}


@media (prefers-reduced-motion: reduce) {
    .global-background-video {
        opacity:
            .42;
    }
}


/* ======================================================
   V6.10 · VIDEOTECA THE VENUS PROJECT
   ====================================================== */

.venus-video-panel {
    margin-top:
        13px;

    padding:
        23px;

    border:
        1px solid
        rgba(217, 238, 240, .37);

    border-radius:
        18px;

    background:
        radial-gradient(
            circle at 7% 7%,
            rgba(55, 187, 164, .10),
            transparent 29%
        ),
        radial-gradient(
            circle at 95% 8%,
            rgba(73, 121, 217, .10),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            rgba(246, 251, 251, .91),
            rgba(230, 242, 247, .84)
        );

    box-shadow:
        0 24px 60px
        rgba(2, 28, 42, .20),
        inset 0 1px 0
        rgba(255, 255, 255, .74);

    backdrop-filter:
        blur(18px)
        saturate(118%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(118%);
}


.venus-video-intro {
    max-width:
        720px;

    margin-top:
        5px;

    color:
        #71848d;

    font-size:
        .61rem;

    line-height:
        1.5;
}


.venus-embed-badge {
    padding:
        5px 8px;

    border-radius:
        999px;

    background:
        #e9f5f2;

    color:
        #26766b;

    font-size:
        .53rem;

    white-space:
        nowrap;
}


.venus-video-toolbar {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        12px;

    align-items:
        center;

    flex-wrap:
        wrap;

    margin-top:
        13px;

    padding:
        9px;

    border:
        1px solid
        rgba(197, 217, 224, .69);

    border-radius:
        11px;

    background:
        rgba(239, 247, 248, .69);
}


.venus-documentary-switch,
.venus-language-switch {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        5px;

    align-items:
        center;
}


.venus-language-switch > span {
    margin-right:
        3px;

    color:
        #71858e;

    font-size:
        .53rem;
}


.venus-documentary-button,
.venus-language-button {
    min-height:
        31px;

    padding:
        0 9px;

    border:
        1px solid
        #d0dfe3;

    border-radius:
        8px;

    background:
        rgba(248, 251, 252, .85);

    color:
        #687d86;

    font-family:
        inherit;

    font-size:
        .54rem;

    cursor:
        pointer;

    transition:
        .18s ease;
}


.venus-documentary-button.active,
.venus-language-button.active {
    border-color:
        #a9d6cd;

    background:
        linear-gradient(
            135deg,
            #e6f6f1,
            #e8f0fb
        );

    color:
        #176b63;

    font-weight:
        750;
}


.venus-video-layout {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(260px, .55fr);

    gap:
        12px;

    margin-top:
        12px;
}


.venus-player-card,
.venus-video-info {
    border:
        1px solid
        rgba(194, 215, 222, .74);

    border-radius:
        13px;

    background:
        rgba(242, 249, 249, .78);

    box-shadow:
        0 10px 28px
        rgba(4, 39, 52, .075);
}


.venus-player-card {
    overflow:
        hidden;
}


.venus-player-shell {
    position:
        relative;

    width:
        100%;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #0d3543,
            #193e65
        );
}


.venus-youtube-player,
.venus-youtube-player iframe {
    width:
        100% !important;

    height:
        100% !important;
}


.venus-player-meta {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        12px;

    padding:
        11px 12px;
}


.venus-player-meta h3 {
    margin-top:
        3px;

    color:
        #32515b;

    font-size:
        .69rem;
}


.venus-player-meta p {
    margin-top:
        2px;

    color:
        #74868e;

    font-size:
        .52rem;
}


.venus-video-status {
    display:
        inline-flex;

    padding:
        3px 6px;

    border-radius:
        999px;

    background:
        #eef3f5;

    color:
        #667a83;

    font-size:
        .48rem;

    font-weight:
        700;
}


.venus-video-status.official {
    background:
        #e8f6f1;

    color:
        #20775e;
}


.venus-video-status.translated {
    background:
        #fff5e3;

    color:
        #8a651f;
}


.venus-open-youtube {
    flex:
        0 0 auto;

    padding:
        6px 8px;

    border-radius:
        8px;

    background:
        linear-gradient(
            110deg,
            #0b7169,
            #2563d9
        );

    color:
        white;

    font-size:
        .51rem;

    font-weight:
        700;

    text-decoration:
        none;
}


.venus-video-info {
    padding:
        14px;
}


.venus-video-info h3 {
    margin-top:
        3px;

    color:
        #31515b;

    font-size:
        .74rem;
}


.venus-video-info > p {
    margin-top:
        5px;

    color:
        #71848d;

    font-size:
        .57rem;

    line-height:
        1.5;
}


.venus-info-rule {
    display:
        grid;

    grid-template-columns:
        29px 1fr;

    gap:
        8px;

    margin-top:
        9px;

    padding:
        8px;

    border:
        1px solid
        rgba(197, 216, 223, .70);

    border-radius:
        9px;

    background:
        rgba(243, 248, 249, .70);
}


.venus-info-rule > span {
    width:
        29px;

    height:
        29px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        9px;

    background:
        rgba(226, 241, 239, .88);

    color:
        #23766b;

    font-size:
        .57rem;
}


.venus-info-rule strong,
.venus-info-rule small {
    display:
        block;
}


.venus-info-rule strong {
    color:
        #4e6872;

    font-size:
        .56rem;
}


.venus-info-rule small {
    margin-top:
        2px;

    color:
        #7c8c94;

    font-size:
        .49rem;

    line-height:
        1.4;
}


.venus-video-copyright-note {
    margin-top:
        10px;

    padding:
        9px;

    border:
        1px solid
        rgba(215, 194, 137, .33);

    border-radius:
        9px;

    background:
        rgba(250, 247, 232, .71);
}


.venus-video-copyright-note strong {
    display:
        block;

    color:
        #766c4d;

    font-size:
        .54rem;
}


.venus-video-copyright-note p {
    margin-top:
        2px;

    color:
        #837e6d;

    font-size:
        .49rem;

    line-height:
        1.45;
}


@media (max-width: 900px) {
    .venus-video-layout {
        grid-template-columns:
            1fr;
    }
}


@media (max-width: 600px) {
    .venus-video-panel {
        padding:
            17px;
    }


    .venus-player-meta {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .venus-open-youtube {
        width:
            100%;

        text-align:
            center;
    }
}



/* ======================================================
   V7.0 · QUALITÉ PREMIUM / UX / ROBUSTESSE
   ====================================================== */


/* ------------------------------------------------------
   TOASTS GLOBAUX
   ------------------------------------------------------ */

.rgs-toast-container {
    position:
        fixed;

    right:
        20px;

    bottom:
        92px;

    z-index:
        15000;

    width:
        min(
            360px,
            calc(
                100vw -
                28px
            )
        );

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

    pointer-events:
        none;
}


.rgs-toast {
    min-height:
        52px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        12px 15px;

    border:
        1px solid
        rgba(191, 213, 220, .78);

    border-left:
        4px solid
        #0b7169;

    border-radius:
        12px;

    background:
        rgba(248, 252, 252, .96);

    color:
        #334f59;

    box-shadow:
        0 14px 38px
        rgba(0, 22, 33, .18);

    backdrop-filter:
        blur(14px)
        saturate(118%);

    -webkit-backdrop-filter:
        blur(14px)
        saturate(118%);

    font-size:
        .64rem;

    line-height:
        1.45;

    transform:
        translateX(118%)
        scale(.98);

    opacity:
        0;

    transition:
        transform .36s
        cubic-bezier(
            .22,
            .8,
            .28,
            1.12
        ),
        opacity .28s ease;

    pointer-events:
        auto;
}


.rgs-toast.show {
    transform:
        translateX(0)
        scale(1);

    opacity:
        1;
}


.rgs-toast.success {
    border-left-color:
        #18806c;
}


.rgs-toast.error {
    border-left-color:
        #d55b55;
}


.rgs-toast.warning {
    border-left-color:
        #d89b3c;
}


.rgs-toast.info {
    border-left-color:
        #467bbb;
}


.rgs-toast .toast-icon {
    flex:
        0 0 auto;

    font-size:
        .9rem;
}


/* ------------------------------------------------------
   CARTES COHÉRENTES
   ------------------------------------------------------ */

.rgs-card,
:is(
    .metric-card,
    .water-card,
    .hydro-card,
    .smart-signal-card,
    .resource-result-card,
    .resource-roadmap-card,
    .resource-category-card,
    .resource-context-card,
    .knowledge-card,
    .project-card,
    .action-idea-card,
    .free-video-card,
    .comparison-column
) {
    border-radius:
        14px;

    backdrop-filter:
        blur(9px);

    -webkit-backdrop-filter:
        blur(9px);

    transition:
        transform .20s
        cubic-bezier(
            .25,
            .46,
            .45,
            .94
        ),
        box-shadow .20s ease,
        border-color .20s ease;
}


.rgs-card:hover,
:is(
    .metric-card,
    .water-card,
    .hydro-card,
    .smart-signal-card,
    .resource-result-card,
    .resource-roadmap-card,
    .resource-category-card,
    .resource-context-card,
    .knowledge-card,
    .project-card,
    .action-idea-card,
    .free-video-card,
    .comparison-column
):hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(120, 190, 180, .62);

    box-shadow:
        0 14px 32px
        rgba(0, 30, 40, .115);
}


/* ------------------------------------------------------
   CHARGEMENT / SQUELETTE
   ------------------------------------------------------ */

.rgs-skeleton {
    position:
        relative;

    overflow:
        hidden;

    border-radius:
        8px;

    background:
        rgba(218, 231, 235, .72);
}


.rgs-skeleton::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    transform:
        translateX(-110%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .48),
            transparent
        );

    animation:
        rgsSkeletonSweep
        1.45s
        ease-in-out
        infinite;
}


@keyframes rgsSkeletonSweep {
    to {
        transform:
            translateX(110%);
    }
}


/*
  Micro-interaction sur les états de chargement existants,
  sans réécrire tous les modules.
*/
:is(
    .water-loading,
    .smart-loading,
    .hydro-loading
) > span:first-child,
.climate-message > span:first-child {
    display:
        inline-grid;

    place-items:
        center;

    animation:
        rgsLoadingFloat
        1.8s
        ease-in-out
        infinite;
}


@keyframes rgsLoadingFloat {
    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-4px);
    }
}


/* ------------------------------------------------------
   ERREURS MODULES
   ------------------------------------------------------ */

.rgs-module-error {
    min-height:
        210px;

    display:
        grid;

    place-items:
        center;

    align-content:
        center;

    text-align:
        center;

    border-color:
        rgba(210, 132, 127, .42);

    background:
        linear-gradient(
            145deg,
            rgba(252, 245, 243, .92),
            rgba(243, 247, 248, .86)
        );
}


.rgs-module-error-icon {
    font-size:
        26px;
}


.rgs-module-error h3 {
    margin-top:
        6px;

    color:
        #73514f;

    font-size:
        .76rem;
}


.rgs-module-error p {
    max-width:
        520px;

    margin-top:
        5px;

    color:
        #7d7575;

    font-size:
        .58rem;

    line-height:
        1.5;
}


.rgs-retry-button {
    min-height:
        34px;

    margin-top:
        10px;

    padding:
        0 12px;

    border:
        1px solid
        rgba(181, 201, 207, .80);

    border-radius:
        9px;

    background:
        linear-gradient(
            135deg,
            #0b7169,
            #2563d9
        );

    color:
        white;

    font-family:
        inherit;

    font-size:
        .57rem;

    font-weight:
        700;

    cursor:
        pointer;
}


/* ------------------------------------------------------
   ACCESSIBILITÉ / PERFORMANCE
   ------------------------------------------------------ */

@media (max-width: 700px) {
    .rgs-toast-container {
        right:
            13px;

        bottom:
            78px;

        width:
            calc(
                100vw -
                26px
            );
    }
}


@media (prefers-reduced-motion: reduce) {
    .rgs-toast,
    .rgs-skeleton::after,
    :is(
        .water-loading,
        .smart-loading,
        .hydro-loading
    ) > span:first-child,
    .climate-message > span:first-child {
        animation:
            none !important;

        transition:
            none !important;
    }
}



/* ======================================================
   V7.2 · AUDIO / LOCUCIÓN CORREGIDOS
   ====================================================== */

.media-narration-status {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        30px;

    padding:
        0 9px;

    border:
        1px solid
        rgba(174, 208, 211, .58);

    border-radius:
        999px;

    background:
        rgba(239, 248, 248, .79);

    color:
        #5f767f;

    font-size:
        .51rem;
}


#mediaSpeakCurrent:disabled,
#mediaNarrateLong:disabled,
#mediaStopNarration:disabled {
    opacity:
        .48;

    cursor:
        not-allowed;
}



/* ======================================================
   V7.3 · EFECTOS PREMIUM 3D OPTIMIZADOS
   ====================================================== */


/* ------------------------------------------------------
   HERO PARALLAX
   ------------------------------------------------------ */

#parallax-hero {
    perspective:
        1200px;

    transform-style:
        preserve-3d;

    isolation:
        isolate;
}


.parallax-layer {
    --parallax-x:
        0px;

    --parallax-y:
        0px;

    transform:
        translate3d(
            var(--parallax-x),
            var(--parallax-y),
            0
        );

    transition:
        transform .22s
        cubic-bezier(
            .2,
            .7,
            .25,
            1
        );

    will-change:
        transform;
}


.parallax-deep {
    z-index:
        0;
}


.parallax-mid {
    z-index:
        2;
}


.parallax-close {
    z-index:
        4;
}


/* ------------------------------------------------------
   GLOW DINÁMICO
   ------------------------------------------------------ */

.hero-glow-dynamic {
    --glow-x:
        50%;

    --glow-y:
        42%;

    position:
        absolute;

    inset:
        -12%;

    z-index:
        0;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle at
            var(--glow-x)
            var(--glow-y),
            rgba(97, 237, 210, .18) 0%,
            rgba(70, 148, 235, .10) 22%,
            transparent 58%
        );

    filter:
        blur(7px);

    animation:
        rgsGlowBreath
        9s
        ease-in-out
        infinite alternate;

    will-change:
        opacity,
        transform;
}


@keyframes rgsGlowBreath {
    from {
        opacity:
            .68;

        transform:
            scale(1);
    }

    to {
        opacity:
            1;

        transform:
            scale(1.06);
    }
}


/* ------------------------------------------------------
   TILT PREMIUM SOBRE EL SISTEMA EXISTENTE
   ------------------------------------------------------ */

:is(
    .rgs-card,
    .water-card,
    .metric-card,
    .hydro-card,
    .smart-signal-card,
    .resource-result-card,
    .resource-roadmap-card,
    .knowledge-card,
    .project-card,
    .action-idea-card,
    .free-video-card
) {
    transform-style:
        preserve-3d;

    backface-visibility:
        hidden;

    will-change:
        transform;

    transition:
        transform .20s
        cubic-bezier(
            .22,
            .75,
            .28,
            1
        ),
        box-shadow .20s ease,
        border-color .20s ease;
}


:is(
    .rgs-card,
    .water-card,
    .metric-card,
    .hydro-card,
    .smart-signal-card,
    .resource-result-card,
    .resource-roadmap-card,
    .knowledge-card,
    .project-card,
    .action-idea-card,
    .free-video-card
):hover {
    box-shadow:
        0 18px 40px
        rgba(0, 24, 36, .15);

    border-color:
        rgba(120, 190, 180, .60);
}


/* ------------------------------------------------------
   REVEAL ESCALONADO
   ------------------------------------------------------ */

.rgs-reveal {
    opacity:
        0;

    transform:
        translate3d(
            0,
            14px,
            0
        )
        scale(.985);

    transition:
        opacity .48s ease
        var(
            --rgs-reveal-delay,
            0ms
        ),
        transform .48s
        cubic-bezier(
            .22,
            .7,
            .25,
            1
        )
        var(
            --rgs-reveal-delay,
            0ms
        );
}


.rgs-reveal.is-visible {
    opacity:
        1;

    transform:
        translate3d(
            0,
            0,
            0
        )
        scale(1);
}


/*
  Si une carte reçoit ensuite un transform inline de tilt,
  l'opacité reste indépendante et la carte demeure visible.
*/
.rgs-reveal.is-visible[style*="transform"] {
    opacity:
        1;
}


/* ------------------------------------------------------
   PERFORMANCE / ACCESSIBILITÉ
   ------------------------------------------------------ */

.rgs-page-hidden
.hero-glow-dynamic {
    animation-play-state:
        paused;
}


@media (
    hover:
        none
) {
    .parallax-layer {
        transform:
            none !important;
    }


    :is(
        .rgs-card,
        .water-card,
        .metric-card,
        .hydro-card,
        .smart-signal-card,
        .resource-result-card,
        .resource-roadmap-card,
        .knowledge-card,
        .project-card,
        .action-idea-card,
        .free-video-card
    ) {
        will-change:
            auto;
    }
}


@media (
    prefers-reduced-motion:
        reduce
) {
    .hero-glow-dynamic {
        animation:
            none !important;

        transform:
            none !important;
    }


    .parallax-layer {
        transform:
            none !important;

        transition:
            none !important;
    }


    .rgs-reveal,
    .rgs-reveal.is-visible {
        opacity:
            1 !important;

        transform:
            none !important;

        transition:
            none !important;
    }


    :is(
        .rgs-card,
        .water-card,
        .metric-card,
        .hydro-card,
        .smart-signal-card,
        .resource-result-card,
        .resource-roadmap-card,
        .knowledge-card,
        .project-card,
        .action-idea-card,
        .free-video-card
    ) {
        transform:
            none !important;

        transition:
            none !important;

        will-change:
            auto;
    }
}


/* ======================================================
   V7.4 · PRESENTACIÓN OFICIAL DEL PROYECTO · YOUTUBE
   ====================================================== */

.project-video-feature {
    position: relative;
    display: grid;
    grid-template-columns: minmax(260px, .58fr) minmax(0, 1.42fr);
    gap: 16px;
    margin-top: 14px;
    padding: 22px;
    border: 1px solid rgba(145, 213, 207, .34);
    border-radius: 20px;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 20%, rgba(35, 195, 163, .16), transparent 32%),
        radial-gradient(circle at 88% 14%, rgba(69, 121, 231, .18), transparent 36%),
        linear-gradient(145deg, rgba(10, 54, 72, .93), rgba(13, 67, 82, .89) 45%, rgba(21, 50, 89, .91));
    box-shadow:
        0 30px 74px rgba(0, 15, 28, .28),
        inset 0 1px 0 rgba(255, 255, 255, .07);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.project-video-feature::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 12%, rgba(104, 245, 218, .07) 48%, transparent 77%);
    transform: translateX(-45%);
    animation: rgsProjectVideoShine 8s ease-in-out infinite;
}

@keyframes rgsProjectVideoShine {
    0%, 55% { transform: translateX(-55%); }
    100% { transform: translateX(55%); }
}

.project-video-copy,
.project-video-player-card {
    position: relative;
    z-index: 1;
}

.project-video-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.project-video-copy .ecosystem-section-head {
    align-items: flex-start;
}

.project-video-copy .eyebrow {
    color: #72e4d0;
}

.project-video-copy h2 {
    margin-top: 5px;
    color: #f4fbff;
    font-size: clamp(1.08rem, 2vw, 1.62rem);
    line-height: 1.12;
}

.project-video-description {
    margin-top: 10px;
    max-width: 520px;
    color: rgba(229, 244, 248, .76);
    font-size: .62rem;
    line-height: 1.6;
}

.project-video-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 10px;
    padding: 5px 8px;
    border: 1px solid rgba(128, 222, 205, .23);
    border-radius: 999px;
    background: rgba(25, 117, 108, .18);
    color: #8cebd9;
    font-size: .49rem;
    font-weight: 700;
}

.project-video-badge[data-state="playing"] {
    border-color: rgba(106, 231, 201, .48);
    background: rgba(26, 157, 128, .24);
}

.project-video-badge[data-state="error"] {
    border-color: rgba(232, 158, 105, .45);
    color: #ffd1ad;
}

.project-video-actions {
    margin-top: 14px;
}

.project-video-youtube-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(157, 219, 215, .36);
    border-radius: 10px;
    background: rgba(238, 250, 251, .08);
    color: #e8fbff;
    font-size: .54rem;
    font-weight: 750;
    text-decoration: none;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.project-video-youtube-link:hover {
    transform: translateY(-2px);
    border-color: rgba(134, 231, 214, .68);
    background: rgba(238, 250, 251, .13);
}

.project-video-player-card {
    overflow: hidden;
    border: 1px solid rgba(150, 210, 219, .29);
    border-radius: 16px;
    background: rgba(3, 26, 38, .66);
    box-shadow: 0 18px 46px rgba(0, 9, 18, .32);
}

.project-video-player-shell {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(140deg, #071e2b, #123958);
}

.project-youtube-player,
.project-youtube-player iframe {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.project-video-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 11px 13px;
}

.project-video-footer strong,
.project-video-footer small {
    display: block;
}

.project-video-footer strong {
    color: #eaf8fb;
    font-size: .58rem;
}

.project-video-footer small {
    margin-top: 2px;
    color: rgba(217, 235, 240, .62);
    font-size: .48rem;
}

.project-video-source {
    flex: 0 0 auto;
    padding: 4px 7px;
    border-radius: 999px;
    background: rgba(91, 154, 190, .17);
    color: #a9cfde;
    font-size: .46rem;
}

@media (max-width: 900px) {
    .project-video-feature {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .project-video-feature {
        padding: 15px;
        border-radius: 15px;
    }

    .project-video-footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-video-feature::before {
        animation: none !important;
    }
}


/* ======================================================
   V7.5 · IMPULSOR / INICIATIVA CONECTADA
   ====================================================== */

.connected-initiative-feature {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        minmax(230px, .55fr)
        minmax(0, 1.45fr);

    gap:
        24px;

    margin-top:
        14px;

    padding:
        24px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(127, 211, 194, .30);

    border-radius:
        20px;

    background:
        radial-gradient(
            circle at 17% 28%,
            rgba(52, 211, 176, .15),
            transparent 34%
        ),
        radial-gradient(
            circle at 88% 14%,
            rgba(66, 128, 224, .13),
            transparent 33%
        ),
        linear-gradient(
            145deg,
            rgba(7, 46, 61, .92),
            rgba(14, 73, 78, .89) 46%,
            rgba(15, 46, 77, .92)
        );

    box-shadow:
        0 28px 72px
        rgba(0, 15, 28, .26),
        inset 0 1px 0
        rgba(255, 255, 255, .07);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}


.connected-initiative-feature::after {
    content:
        "";

    position:
        absolute;

    width:
        360px;

    height:
        360px;

    right:
        -150px;

    bottom:
        -190px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(69, 219, 184, .12),
            transparent 66%
        );

    pointer-events:
        none;
}


.connected-initiative-visual {
    position:
        relative;

    min-height:
        320px;

    display:
        grid;

    place-items:
        center;

    perspective:
        900px;

    transform-style:
        preserve-3d;
}


.connected-initiative-core {
    position:
        relative;

    z-index:
        4;

    width:
        145px;

    aspect-ratio:
        1;

    display:
        grid;

    place-items:
        center;

    align-content:
        center;

    border:
        1px solid
        rgba(132, 233, 211, .46);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle at 35% 28%,
            rgba(94, 245, 211, .32),
            rgba(18, 99, 103, .86) 48%,
            rgba(8, 39, 60, .96) 100%
        );

    box-shadow:
        0 0 0 12px
        rgba(59, 204, 177, .055),
        0 0 48px
        rgba(54, 226, 194, .21),
        inset 0 1px 0
        rgba(255, 255, 255, .22);
}


.connected-initiative-acronym {
    color:
        #f2fffc;

    font-size:
        1.55rem;

    font-weight:
        850;

    letter-spacing:
        .08em;
}


.connected-initiative-core small {
    margin-top:
        4px;

    font-size:
        .72rem;
}


.connected-initiative-orbit {
    position:
        absolute;

    inset:
        50% auto auto 50%;

    border:
        1px solid
        rgba(95, 214, 197, .24);

    border-radius:
        50%;

    transform:
        translate(-50%, -50%)
        rotateX(68deg);

    animation:
        connectedInitiativeOrbit
        16s
        linear
        infinite;
}


.connected-initiative-orbit.orbit-one {
    width:
        220px;

    height:
        220px;
}


.connected-initiative-orbit.orbit-two {
    width:
        285px;

    height:
        285px;

    animation-direction:
        reverse;

    animation-duration:
        23s;

    border-color:
        rgba(94, 142, 235, .20);
}


@keyframes connectedInitiativeOrbit {
    to {
        transform:
            translate(-50%, -50%)
            rotateX(68deg)
            rotateZ(360deg);
    }
}


.connected-initiative-node {
    position:
        absolute;

    z-index:
        5;

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(143, 226, 213, .26);

    border-radius:
        50%;

    background:
        rgba(8, 44, 61, .84);

    box-shadow:
        0 8px 24px
        rgba(0, 13, 26, .26);

    font-size:
        .82rem;
}


.connected-initiative-node.node-learn {
    top:
        15%;

    left:
        18%;
}


.connected-initiative-node.node-share {
    top:
        23%;

    right:
        12%;
}


.connected-initiative-node.node-create {
    bottom:
        17%;

    left:
        12%;
}


.connected-initiative-node.node-care {
    right:
        18%;

    bottom:
        13%;
}


.connected-initiative-copy {
    position:
        relative;

    z-index:
        2;

    align-self:
        center;
}


.connected-initiative-copy
.eyebrow {
    color:
        #75e5d1;
}


.connected-initiative-copy h2 {
    margin-top:
        4px;

    color:
        #f4fbff;

    font-size:
        clamp(
            1.16rem,
            2.1vw,
            1.7rem
        );

    line-height:
        1.12;
}


.connected-initiative-badge {
    padding:
        5px 8px;

    border:
        1px solid
        rgba(120, 213, 198, .28);

    border-radius:
        999px;

    background:
        rgba(24, 124, 111, .18);

    color:
        #9ceada;

    font-size:
        .49rem;

    white-space:
        nowrap;
}


.connected-initiative-lead {
    margin-top:
        9px;

    color:
        rgba(238, 249, 251, .90);

    font-size:
        .67rem;

    font-weight:
        650;

    line-height:
        1.55;
}


.connected-initiative-description {
    margin-top:
        11px;

    color:
        rgba(222, 240, 244, .72);

    font-size:
        .58rem;

    line-height:
        1.62;
}


.connected-initiative-principles {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        13px;
}


.connected-initiative-principles span {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        30px;

    padding:
        0 9px;

    border:
        1px solid
        rgba(145, 218, 211, .22);

    border-radius:
        999px;

    background:
        rgba(238, 250, 251, .06);

    color:
        #d7f2ef;

    font-size:
        .51rem;

    font-weight:
        700;
}


.connected-initiative-relation {
    margin-top:
        13px;

    padding:
        11px 12px;

    border:
        1px solid
        rgba(92, 166, 207, .24);

    border-radius:
        12px;

    background:
        linear-gradient(
            120deg,
            rgba(39, 123, 135, .13),
            rgba(47, 82, 151, .11)
        );
}


.connected-initiative-relation strong {
    display:
        block;

    color:
        #b6e9df;

    font-size:
        .55rem;
}


.connected-initiative-relation p {
    margin-top:
        4px;

    color:
        rgba(220, 238, 242, .67);

    font-size:
        .52rem;

    line-height:
        1.55;
}


.connected-initiative-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    flex-wrap:
        wrap;

    margin-top:
        14px;
}


.connected-initiative-primary {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        38px;

    padding:
        0 13px;

    border:
        1px solid
        rgba(100, 223, 197, .52);

    border-radius:
        10px;

    background:
        linear-gradient(
            120deg,
            #0e7c72,
            #2967b7
        );

    color:
        white;

    font-size:
        .54rem;

    font-weight:
        780;

    text-decoration:
        none;

    box-shadow:
        0 10px 25px
        rgba(0, 31, 51, .20);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


.connected-initiative-primary:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 14px 31px
        rgba(0, 35, 55, .28);
}


.connected-initiative-note {
    max-width:
        430px;

    color:
        rgba(203, 224, 230, .49);

    font-size:
        .46rem;

    line-height:
        1.45;
}


@media (
    max-width:
        850px
) {
    .connected-initiative-feature {
        grid-template-columns:
            1fr;
    }


    .connected-initiative-visual {
        min-height:
            245px;
    }
}


@media (
    max-width:
        560px
) {
    .connected-initiative-feature {
        padding:
            16px;
    }


    .connected-initiative-visual {
        min-height:
            220px;

        transform:
            scale(.92);
    }


    .connected-initiative-actions {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .connected-initiative-primary {
        width:
            100%;
    }
}


@media (
    prefers-reduced-motion:
        reduce
) {
    .connected-initiative-orbit {
        animation:
            none !important;
    }
}