:root {
 --deep: #0f2d5b;
 --teal: #00a884;
 --blue: #0077e6;
 --yellow: #ffc845;
 --red: #e1061b;
 --purple: #7a3ff2;
 --ink: #122033;
 --muted: #637083;
 --soft: #f4f7fa;
 --surface: #fff;
 --line: #dfe6ee;
 --shadow: 0 18px 50px rgba(20, 50, 80, 0.08);
 --font-scale: 1;
 --radius: 20px;
}
* {
 box-sizing: border-box;
}
html {
 scroll-behavior: smooth;
 font-size: calc(16px * var(--font-scale));
}
body {
 margin: 0;
 min-height: 100vh;
 display: flex;
 flex-direction: column;
 color: var(--ink);
 font-family: Inter, system-ui, sans-serif;
 background: var(--surface);
 line-height: 1.55;
}
.skip-link {
 position: fixed;
 left: 12px;
 top: -60px;
 z-index: 2000;
 background: var(--deep);
 color: #fff;
 padding: 10px 14px;
 border-radius: 8px;
}
.skip-link:focus {
 top: 12px;
}
a,
button,
input,
select,
textarea {
 transition: 0.2s ease;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
 outline: 3px solid color-mix(in srgb, var(--teal), transparent 45%);
 outline-offset: 2px;
}
.site-header {
 position: sticky;
 top: 0;
 z-index: 1030;
 background: color-mix(in srgb, var(--surface), transparent 7%);
 backdrop-filter: blur(16px);
 box-shadow: 0 2px 18px rgba(0, 0, 0, 0.08);
 border-bottom: 1px solid color-mix(in srgb, var(--line), transparent 20%);
}
.navbar {
 min-height: 78px;
}
.navbar-brand {
 display: flex;
 align-items: center;
 max-width: 360px;
}
.brand-logo-img {
 display: block;
 width: auto;
 height: 83px;
 max-width: min(360px, 88vw);
 object-fit: contain;
}
.nav-link {
 color: var(--ink) !important;
 font-weight: 600;
}
.nav-link:hover {
 color: var(--teal) !important;
}
.utility-link {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 5px;
 min-width: 38px;
 height: 38px;
 border: 1px solid rgba(255, 255, 255, 0.18);
 border-radius: 10px;
 background: rgba(255, 255, 255, 0.07);
 color: #fff;
 text-decoration: none;
}
.utility-link:hover {
 background: rgba(255, 255, 255, 0.15);
 color: #fff;
}
.portal-section {
 padding: 100px 0;
 scroll-margin-top: 72px;
}
.hero {
 background: linear-gradient(135deg, var(--deep), #071a38);
 color: #fff;
 overflow: hidden;
}
.hero-grid {
 display: grid;
 grid-template-columns: 1.05fr 0.95fr;
 gap: 60px;
 align-items: center;
}
.eyebrow {
 font-size: 0.76rem;
 font-weight: 800;
 letter-spacing: 0.16em;
 color: var(--teal);
 display: inline-block;
 margin-bottom: 14px;
}
.hero h1,
.section-head h2,
.split-panel h2,
.renewal-box h2,
.contact-grid h2 {
 font-family: Montserrat, sans-serif;
 font-weight: 800;
 line-height: 1.02;
}
.hero h1 {
 font-size: clamp(3rem, 7vw, 6.3rem);
 margin: 0 0 24px;
}
.hero h1 span {
 color: var(--teal);
}
.hero .lead {
 max-width: 720px;
 color: rgba(255, 255, 255, 0.78);
 font-size: 1.15rem;
 line-height: 1.75;
}
.need-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
}
.btn-primary {
 background: var(--teal);
 border-color: var(--teal);
 color: #fff;
}
.btn-primary:hover {
 background: #008f70;
 border-color: #008f70;
}
.hero-orbit {
 min-height: 480px;
 position: relative;
 display: grid;
 place-items: center;
}
.orbit-ring {
 position: absolute;
 border: 1px solid rgba(255, 255, 255, 0.22);
 border-radius: 50%;
 animation: spin 18s linear infinite;
}
.ring-1 {
 width: 310px;
 height: 310px;
}
.ring-2 {
 width: 450px;
 height: 450px;
 animation-direction: reverse;
 animation-duration: 26s;
}
.orbit-core {
 width: 150px;
 height: 150px;
 border-radius: 50%;
 background: linear-gradient(135deg, var(--teal), var(--blue));
 display: grid;
 place-items: center;
 font: 800 3rem Montserrat;
 box-shadow: 0 30px 90px rgba(0, 168, 132, 0.25);
 z-index: 2;
}
.orbit-core small {
 display: block;
 font: 700 0.7rem Inter;
 position: absolute;
 margin-top: 72px;
}
.orbit-node {
 position: absolute;
 padding: 10px 14px;
 border: 1px solid rgba(255, 255, 255, 0.2);
 background: rgba(255, 255, 255, 0.06);
 border-radius: 999px;
 font-size: 0.72rem;
 font-weight: 800;
 backdrop-filter: blur(8px);
}
.n1 {
 top: 40px;
}
.n2 {
 right: 15px;
 top: 45%;
}
.n3 {
 bottom: 42px;
}
.n4 {
 left: 10px;
 top: 45%;
}
@keyframes spin {
 to {
 transform: rotate(360deg);
 }
}
.section-head {
 max-width: 850px;
 margin-bottom: 44px;
}
.section-head h2 {
 font-size: clamp(2rem, 4vw, 4rem);
 margin-bottom: 18px;
}
.section-head p {
 color: var(--muted);
 font-size: 1.08rem;
 line-height: 1.75;
}
.ecosystem-grid,
.solution-grid,
.portfolio-grid,
.network-actions {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: 16px;
}
.ecosystem-grid article,
.solution-card,
.network-card {
 border: 1px solid var(--line);
 border-radius: var(--radius);
 padding: 28px;
 background: var(--surface);
 transition: 0.25s;
}
.ecosystem-grid article:hover,
.solution-card:hover,
.network-card:hover {
 transform: translateY(-4px);
 box-shadow: var(--shadow);
}
.ecosystem-grid i {
 font-size: 2rem;
 color: var(--teal);
}
h3 {
 font-family: Montserrat, sans-serif;
 font-size: 1.1rem;
 margin: 18px 0 8px;
}
.ecosystem-grid p,
.solution-card p,
.network-card span {
 color: var(--muted);
 line-height: 1.6;
}
.steps-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 12px;
}
.step-card {
 border: 1px solid var(--line);
 background: var(--surface);
 color: var(--ink);
 text-align: left;
 padding: 24px;
 border-radius: 16px;
 min-height: 140px;
}
.step-card:hover,
.step-card.active {
 border-color: var(--teal);
 box-shadow: 0 12px 30px rgba(0, 168, 132, 0.1);
}
.step-card span {
 font: 800 0.72rem Montserrat;
 color: var(--teal);
}
.step-card strong,
.step-card small {
 display: block;
}
.step-card strong {
 margin: 25px 0 5px;
 font-family: Montserrat;
}
.step-card small {
 color: var(--muted);
}
.step-detail {
 margin-top: 18px;
 background: var(--deep);
 color: #fff;
 border-radius: 18px;
 padding: 25px;
}
.solution-grid {
 grid-template-columns: repeat(5, 1fr);
}
.solution-card {
 min-height: 260px;
}
.solution-icon {
 width: 42px;
 height: 42px;
 display: grid;
 place-items: center;
 border-radius: 12px;
 background: color-mix(in srgb, var(--teal), transparent 88%);
 color: var(--teal);
 font-size: 1.2rem;
 margin-bottom: 18px;
}
.solution-index {
 font: 800 0.7rem Montserrat;
 color: var(--teal);
}
.text-link {
 color: var(--deep);
 font-weight: 800;
 text-decoration: none;
}
.portfolio-toolbar {
 display: flex;
 gap: 12px;
 max-width: 950px;
 margin-bottom: 25px;
}
.portfolio-toolbar .input-group {
 flex: 1;
}
.portfolio-toolbar .form-select {
 max-width: 330px;
}
.portfolio-grid {
 grid-template-columns: repeat(3, 1fr);
}
.portfolio-card {
 border: 1px solid var(--line);
 border-radius: var(--radius);
 padding: 24px;
 background: var(--surface);
 min-height: 300px;
}
.portfolio-card .logo-placeholder {
 width: 56px;
 height: 56px;
 border-radius: 15px;
 background: var(--soft);
 display: grid;
 place-items: center;
 font: 800 1rem Montserrat;
 color: var(--deep);
 margin-bottom: 20px;
}
.portfolio-card h3 {
 margin-top: 0;
}
.portfolio-meta {
 font-size: 0.78rem;
 color: var(--teal);
 font-weight: 700;
}
.portfolio-card p {
 color: var(--muted);
 line-height: 1.65;
}
.tag {
 display: inline-block;
 background: var(--soft);
 border-radius: 999px;
 padding: 6px 10px;
 font-size: 0.72rem;
 margin: 2px;
}
.portfolio-footer {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 align-items: center;
 border-top: 1px solid var(--line);
 margin-top: 20px;
 padding-top: 15px;
 font-size: 0.72rem;
}
.portfolio-footer span {
 color: var(--muted);
}
.split-panel,
.renewal-box,
.contact-grid {
 background: var(--soft);
 border-radius: 28px;
 padding: 50px;
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 50px;
 align-items: center;
}
.launch-list {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 12px;
}
.launch-list div {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: 14px;
 padding: 18px;
}
.launch-list b {
 color: var(--teal);
 margin-right: 10px;
}
.renewal-box {
 background: linear-gradient(135deg, #edf8f5, #eef5ff);
}
.network-actions {
 grid-template-columns: repeat(3, 1fr);
}
.network-card {
 text-decoration: none;
 color: inherit;
 display: flex;
 flex-direction: column;
 gap: 8px;
}
.network-card i {
 font-size: 2rem;
 color: var(--blue);
}
.contact-grid {
 background: var(--deep);
 color: #fff;
}
.contact-grid p {
 color: rgba(255, 255, 255, 0.72);
 line-height: 1.7;
}
.contact-form {
 background: #fff;
 color: var(--ink);
 padding: 30px;
 border-radius: 20px;
}
.contact-form label {
 font-size: 0.8rem;
 font-weight: 700;
 margin-bottom: 6px;
}
.footer {
 background: #071a38;
 color: #fff;
}
.preferences-panel {
 position: fixed;
 right: 0;
 top: 0;
 width: min(390px, 100%);
 height: 100vh;
 background: var(--surface);
 color: var(--ink);
 z-index: 2000;
 transform: translateX(105%);
 transition: transform 0.25s ease;
 box-shadow: -20px 0 60px rgba(0, 0, 0, 0.2);
}
.preferences-panel.open {
 transform: translateX(0);
}
.preferences-head {
 height: 72px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0 24px;
 border-bottom: 1px solid var(--line);
}
.preferences-body {
 padding: 24px;
 overflow: auto;
 height: calc(100% - 72px);
}
.preferences-body > label {
 display: block;
 font-size: 0.78rem;
 font-weight: 800;
 margin: 22px 0 8px;
}
.preference-buttons {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}
.pref-btn {
 border: 1px solid var(--line);
 background: var(--surface);
 color: var(--ink);
 border-radius: 10px;
 padding: 9px 12px;
 text-decoration: none;
}
.pref-btn:hover,
.pref-btn.active {
 border-color: var(--teal);
 background: color-mix(in srgb, var(--teal), transparent 90%);
}
.preferences-backdrop {
 position: fixed;
 inset: 0;
 background: rgba(0, 0, 0, 0.38);
 z-index: 1999;
 opacity: 0;
 visibility: hidden;
 transition: 0.25s;
}
.preferences-panel.open + .preferences-backdrop {
 opacity: 1;
 visibility: visible;
}
.empty-state {
 grid-column: 1/-1;
 text-align: center;
 padding: 70px 20px;
 color: var(--muted);
 border: 1px dashed var(--line);
 border-radius: 20px;
}
.empty-state i {
 font-size: 2rem;
 color: var(--teal);
}
html[data-texto="large"] {
 --font-scale: 1.1;
}
html[data-texto="xlarge"] {
 --font-scale: 1.2;
}
html[data-contraste="high"] body {
 filter: contrast(1.12);
}
html[data-movimiento="reduced"] *,
html[data-movimiento="reduced"] *::before,
html[data-movimiento="reduced"] *::after {
 animation-duration: 0.001ms !important;
 animation-iteration-count: 1 !important;
 scroll-behavior: auto !important;
 transition-duration: 0.001ms !important;
}
@media (prefers-color-scheme: dark) {
 html[data-tema="auto"] {
 --ink: #e9eef5;
 --muted: #aab5c4;
 --soft: #152235;
 --surface: #0d1725;
 --line: #2b3a4d;
 }
}
html[data-tema="dark"] {
 --ink: #e9eef5;
 --muted: #aab5c4;
 --soft: #152235;
 --surface: #0d1725;
 --line: #2b3a4d;
}
html[data-tema="dark"] .text-link {
 color: #7cc5ff;
}
html[data-tema="dark"] .contact-form {
 background: #fff;
 color: #122033;
}
html[data-tema="dark"] .portfolio-card .logo-placeholder {
 background: #17273c;
 color: #fff;
}
html[data-tema="dark"] .navbar-toggler {
 border-color: rgba(255, 255, 255, 0.3);
}
@media (max-width: 991px) {
 .hero-grid,
 .split-panel,
 .renewal-box,
 .contact-grid {
 grid-template-columns: 1fr;
 }
 .ecosystem-grid,
 .solution-grid {
 grid-template-columns: repeat(2, 1fr);
 }
 .portfolio-grid {
 grid-template-columns: repeat(2, 1fr);
 }
 .steps-grid {
 grid-template-columns: repeat(2, 1fr);
 }
 .hero-orbit {
 min-height: 380px;
 }
 .network-actions {
 grid-template-columns: 1fr;
 }
 .portal-section {
 padding: 72px 0;
 }
 .mainNav {
 display: none;
 }
}
@media (max-width: 575px) {
 .ecosystem-grid,
 .solution-grid,
 .portfolio-grid,
 .steps-grid,
 .launch-list {
 grid-template-columns: 1fr;
 }
 .portfolio-toolbar {
 display: block;
 }
 .portfolio-toolbar .form-select {
 max-width: none;
 margin-top: 10px;
 }
 .hero h1 {
 font-size: 3rem;
 }
 .hero-orbit {
 min-height: 300px;
 }
 .ring-1 {
 width: 220px;
 height: 220px;
 }
 .ring-2 {
 width: 300px;
 height: 300px;
 }
 .orbit-core {
 width: 110px;
 height: 110px;
 font-size: 2.2rem;
 }
 .orbit-node {
 font-size: 0.62rem;
 }
 .split-panel,
 .renewal-box,
 .contact-grid {
 padding: 28px;
 }
 .utility-link {
 min-width: 34px;
 }
}

/* Identidad visual E-RENOVAR */
.brand-logo picture {
 display: block;
}
.footer-logo {
 width: auto;
 height: 58px;
 max-width: 320px;
 object-fit: contain;
}
.brand-gradient {
 background: linear-gradient(
 90deg,
 var(--teal),
 var(--yellow),
 var(--red),
 var(--blue),
 var(--purple)
 );
 background-size: 220% 100%;
 animation: brandFlow 8s ease infinite;
}
@keyframes brandFlow {
 0%,
 100% {
 background-position: 0% 50%;
 }
 50% {
 background-position: 100% 50%;
 }
}
html[data-tema="dark"] .site-header {
 background: color-mix(in srgb, var(--deep), transparent 4%);
 border-bottom-color: rgba(255, 255, 255, 0.12);
}
html[data-tema="dark"] .nav-link {
 color: rgba(255, 255, 255, 0.82) !important;
}
html[data-tema="dark"] .nav-link:hover {
 color: #fff !important;
}
html[data-tema="dark"] .navbar-toggler {
 border-color: rgba(255, 255, 255, 0.28);
}
@media (max-width: 575px) {
 .navbar {
 min-height: 68px;
 }
 .brand-logo-img {
 height: 43px;
 max-width: 230px;
 }
 .footer-logo {
 height: 48px;
 max-width: 280px;
 }
}

.brand-identity-strip {
 padding-top: 18px;
}
.brand-identity-line {
 height: 4px;
 border-radius: 999px;
 width: 100%;
 opacity: 0.9;
}
.brand-dot {
 display: inline-block;
 width: 18px;
 height: 18px;
 border-radius: 50%;
}
.dot-teal {
 background: var(--teal);
}
.dot-yellow {
 background: var(--yellow);
}
.dot-red {
 background: var(--red);
}
.dot-blue {
 background: var(--blue);
}
.dot-purple {
 background: var(--purple);
}

.brand-logo-dark {
 display: none !important;
}
html[data-tema="dark"] .brand-logo-light {
 display: none !important;
}
html[data-tema="dark"] .brand-logo-dark {
 display: block !important;
}
@media (prefers-color-scheme: dark) {
 html[data-tema="auto"] .brand-logo-light {
 display: none !important;
 }
 html[data-tema="auto"] .brand-logo-dark {
 display: block !important;
 }
}

/* Sistema visual robusto claro/oscuro */
:root {
 --heading: #122033;
 --card: var(--surface);
 --input-bg: var(--surface);
 --input-text: var(--ink);
}
html[data-tema="dark"] {
 --heading: #e9eef5;
 --input-bg: #111e2f;
 --input-text: #e9eef5;
}
html[data-tema="light"] {
 --heading: #122033;
 --input-bg: #fff;
 --input-text: #122033;
}
@media (prefers-color-scheme: dark) {
 html[data-tema="auto"] {
 --heading: #e9eef5;
 --input-bg: #111e2f;
 --input-text: #e9eef5;
 }
}
@media (prefers-color-scheme: light) {
 html[data-tema="auto"] {
 --heading: #122033;
 --input-bg: #fff;
 --input-text: #122033;
 }
}
body {
 background: var(--surface);
 color: var(--ink);
}
.site-header {
 background: var(--deep) !important;
 color: #fff;
 border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}
.site-header .nav-link {
 color: rgba(255, 255, 255, 0.88) !important;
}
.site-header .nav-link:hover {
 color: #fff !important;
}
.section-head h2,
h2,
h3,
.split-panel h2,
.renewal-box h2,
.contact-grid h2 {
 color: var(--heading);
}
.section-surface {
 background: var(--surface);
 color: var(--ink);
}
.section-soft {
 background: var(--soft);
 color: var(--ink);
}
.ecosystem-grid article,
.solution-card,
.network-card,
.step-card,
.portfolio-card,
.launch-list div {
 background: var(--card);
 color: var(--ink);
 border-color: var(--line);
}
.ecosystem-grid article p,
.solution-card p,
.network-card span,
.portfolio-card p,
.section-head p {
 color: var(--muted);
}
.split-panel,
.renewal-box {
 background: var(--soft);
 color: var(--ink);
}
html[data-tema="dark"] .renewal-box {
 background: linear-gradient(135deg, #142d2a, #172b45);
}
.portfolio-toolbar .input-group-text,
.portfolio-toolbar .form-control,
.portfolio-toolbar .form-select,
.contact-form .form-control,
.contact-form .form-select {
 background: var(--input-bg);
 color: var(--input-text);
 border-color: var(--line);
}
.form-control::placeholder {
 color: var(--muted);
}
.form-select option {
 background: var(--input-bg);
 color: var(--input-text);
}
.portfolio-card .logo-placeholder {
 background: var(--soft);
 color: var(--heading);
}
.tag {
 background: var(--soft);
 color: var(--ink);
}
.text-link {
 color: var(--deep);
}
html[data-tema="dark"] .text-link {
 color: #7cc5ff;
}
html[data-tema="dark"] .portfolio-card .logo-placeholder {
 background: #17273c;
 color: #fff;
}
html[data-tema="dark"] .contact-form {
 background: #111e2f;
 color: #e9eef5;
 border: 1px solid #2b3a4d;
}
html[data-tema="dark"] .contact-form .form-control,
html[data-tema="dark"] .contact-form .form-select {
 background: #0d1725;
 color: #e9eef5;
 border-color: #34465c;
}
html[data-tema="dark"] .contact-form label {
 color: #e9eef5;
}
html[data-tema="dark"] .offcanvas {
 background: #0d1725;
 color: #e9eef5;
}
html[data-tema="dark"] .offcanvas .nav-link {
 color: #e9eef5 !important;
}
html[data-tema="dark"] .preferences-panel {
 background: #0d1725;
 color: #e9eef5;
}
html[data-tema="dark"] .pref-btn {
 background: #111e2f;
 color: #e9eef5;
 border-color: #34465c;
}
.needs-grid {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: 16px;
}
.need-card {
 display: flex;
 flex-direction: column;
 gap: 10px;
 padding: 25px;
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: var(--card);
 color: var(--ink);
 text-decoration: none;
 min-height: 210px;
 transition: 0.25s;
}
.need-card:hover {
 transform: translateY(-4px);
 box-shadow: var(--shadow);
 border-color: var(--teal);
 color: var(--ink);
}
.need-card i {
 font-size: 2rem;
 color: var(--teal);
}
.need-card strong {
 font: 700 1.05rem Montserrat;
 color: var(--heading);
}
.need-card span {
 color: var(--muted);
 line-height: 1.55;
}
.need-card b {
 margin-top: auto;
 color: var(--teal);
 font-size: 0.82rem;
}
.stats-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 18px;
}
.stats-grid article {
 background: var(--card);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 padding: 35px;
}
.stats-grid strong {
 display: block;
 font: 800 clamp(2.8rem, 6vw, 5rem) Montserrat;
 color: var(--teal);
 line-height: 1;
}
.stats-grid span {
 display: block;
 margin-top: 10px;
 color: var(--muted);
 font-weight: 700;
}
@media (max-width: 991px) {
 .needs-grid {
 grid-template-columns: repeat(2, 1fr);
 }
}
@media (max-width: 575px) {
 .needs-grid,
 .stats-grid {
 grid-template-columns: 1fr;
 }
}

/* ==========================================================
 E-RENOVAR · SISTEMA VISUAL v10
 Componentes resistentes a claro, oscuro y alto contraste.
 Los módulos no definen colores propios fuera del sistema.
 ========================================================== */

:root {
 --heading: #122033;
 --card: #ffffff;
 --input-bg: #ffffff;
 --input-text: #122033;
 --section-alt: #f4f7fa;
 --section-dark: #071a38;
 --on-brand: #ffffff;
 --link: #0f2d5b;
 --focus: #00a884;
}

html[data-tema="light"] {
 --ink: #122033;
 --muted: #637083;
 --soft: #f4f7fa;
 --surface: #ffffff;
 --line: #dfe6ee;
 --heading: #122033;
 --card: #ffffff;
 --input-bg: #ffffff;
 --input-text: #122033;
 --section-alt: #f4f7fa;
 --link: #0f2d5b;
}

html[data-tema="dark"] {
 --ink: #e9eef5;
 --muted: #aeb9c8;
 --soft: #152235;
 --surface: #0d1725;
 --line: #2b3a4d;
 --heading: #f4f7fb;
 --card: #111e2f;
 --input-bg: #0d1725;
 --input-text: #e9eef5;
 --section-alt: #101d2d;
 --link: #7cc5ff;
}

html[data-tema="auto"] {
 --ink: #122033;
 --muted: #637083;
 --soft: #f4f7fa;
 --surface: #ffffff;
 --line: #dfe6ee;
 --heading: #122033;
 --card: #ffffff;
 --input-bg: #ffffff;
 --input-text: #122033;
 --section-alt: #f4f7fa;
 --link: #0f2d5b;
}

@media (prefers-color-scheme: dark) {
 html[data-tema="auto"] {
 --ink: #e9eef5;
 --muted: #aeb9c8;
 --soft: #152235;
 --surface: #0d1725;
 --line: #2b3a4d;
 --heading: #f4f7fb;
 --card: #111e2f;
 --input-bg: #0d1725;
 --input-text: #e9eef5;
 --section-alt: #101d2d;
 --link: #7cc5ff;
 }
}

/* Superficies */
body {
 background: var(--surface);
 color: var(--ink);
}
.section-surface {
 background: var(--surface) !important;
 color: var(--ink);
}
.section-soft {
 background: var(--section-alt) !important;
 color: var(--ink);
}
.section-head h2,
.section-head p,
h2,
h3,
h4,
h5,
h6 {
 color: var(--heading);
}
.section-head p {
 color: var(--muted) !important;
}

/* Orientación: tarjetas siempre en bloque, nunca como enlaces corridos */
#necesidades .needs-grid {
 display: grid !important;
 grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
 gap: 18px !important;
 align-items: stretch;
}
#necesidades .need-card {
 display: flex !important;
 width: 100%;
 min-width: 0;
 min-height: 235px;
 flex-direction: column !important;
 align-items: flex-start;
 justify-content: flex-start;
 gap: 12px;
 padding: 28px !important;
 margin: 0;
 overflow: hidden;
 border: 1px solid var(--line) !important;
 border-radius: 22px !important;
 background: var(--card) !important;
 color: var(--ink) !important;
 text-decoration: none !important;
 box-shadow: 0 10px 30px rgba(15, 45, 91, 0.06);
}
#necesidades .need-card:hover {
 transform: translateY(-4px);
 border-color: var(--teal) !important;
 box-shadow: 0 18px 40px rgba(15, 45, 91, 0.12);
}
#necesidades .need-card i {
 display: grid;
 place-items: center;
 width: 48px;
 height: 48px;
 flex: 0 0 48px;
 border-radius: 14px;
 background: color-mix(in srgb, var(--teal), transparent 88%);
 color: var(--teal) !important;
 font-size: 1.35rem;
}
#necesidades .need-card strong {
 display: block;
 margin: 4px 0 0;
 color: var(--heading) !important;
 font-family: Montserrat, sans-serif;
 font-size: 1.05rem;
 line-height: 1.25;
}
#necesidades .need-card span {
 display: block;
 color: var(--muted) !important;
 line-height: 1.55;
}
#necesidades .need-card b {
 display: block;
 margin-top: auto;
 color: var(--teal) !important;
 font-size: 0.82rem;
}
#necesidades .need-card b span {
 display: inline;
 color: inherit;
}

/* Indicadores */
#estadisticas .stats-grid {
 display: grid !important;
 grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
 gap: 18px !important;
}
#estadisticas .stats-grid article {
 min-width: 0;
 background: var(--card) !important;
 color: var(--ink) !important;
 border: 1px solid var(--line) !important;
 border-radius: 22px !important;
 padding: 35px !important;
 box-shadow: 0 10px 30px rgba(15, 45, 91, 0.05);
}
#estadisticas .stats-grid strong {
 color: var(--teal) !important;
}
#estadisticas .stats-grid span {
 color: var(--muted) !important;
}

/* Todas las tarjetas del portal comparten la misma lógica visual */
.ecosystem-grid article,
.solution-card,
.network-card,
.step-card,
.portfolio-card,
.launch-list div {
 background: var(--card) !important;
 color: var(--ink) !important;
 border-color: var(--line) !important;
}
.ecosystem-grid article p,
.solution-card p,
.network-card span,
.portfolio-card p,
.step-card small {
 color: var(--muted) !important;
}
.solution-icon {
 background: color-mix(in srgb, var(--teal), transparent 88%) !important;
 color: var(--teal) !important;
}
.text-link {
 color: var(--link) !important;
}
.tag {
 background: var(--soft) !important;
 color: var(--ink) !important;
 border: 1px solid var(--line);
}

/* Paneles con identidad de marca */
.split-panel,
.renewal-box {
 background: var(--soft) !important;
 color: var(--ink) !important;
}
html[data-tema="dark"] .renewal-box,
html[data-tema="auto"] .renewal-box {
 background: linear-gradient(135deg, #142d2a, #172b45) !important;
}
.contact-grid {
 background: var(--deep) !important;
 color: #fff !important;
}
.contact-grid h2 {
 color: #fff !important;
}
.contact-grid p {
 color: rgba(255, 255, 255, 0.78) !important;
}
.contact-form {
 background: var(--card) !important;
 color: var(--ink) !important;
 border: 1px solid var(--line) !important;
}
.contact-form label {
 color: var(--ink) !important;
}
.contact-form .form-control,
.contact-form .form-select {
 background: var(--input-bg) !important;
 color: var(--input-text) !important;
 border-color: var(--line) !important;
}

/* Alto contraste real: no usamos filter global, porque destruye la lectura de componentes */
html[data-contraste="high"] {
 --line: #64748b;
}
html[data-contraste="high"] body {
 font-weight: 500;
}
html[data-contraste="high"] .portal-section {
 border-bottom: 1px solid var(--line);
}
html[data-contraste="high"] .need-card,
html[data-contraste="high"] .stats-grid article,
html[data-contraste="high"] .solution-card,
html[data-contraste="high"] .network-card,
html[data-contraste="high"] .portfolio-card,
html[data-contraste="high"] .step-card {
 border-width: 2px !important;
}
html[data-contraste="high"] .section-head p,
html[data-contraste="high"] .need-card span,
html[data-contraste="high"] .stats-grid span {
 color: var(--ink) !important;
}

@media (max-width: 991px) {
 #necesidades .needs-grid {
 grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 }
 #estadisticas .stats-grid {
 grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 }
}
@media (max-width: 575px) {
 #necesidades .needs-grid,
 #estadisticas .stats-grid {
 grid-template-columns: 1fr !important;
 }
}

/* v11 — contraste alto: modifica también la barra superior y el hero. */
html[data-contraste="high"] .site-header {
 background: #000 !important;
 border-bottom-color: #fff !important;
 box-shadow: none !important;
}
html[data-contraste="high"] .site-header .nav-link,
html[data-contraste="high"] .site-header .navbar-brand,
html[data-contraste="high"] .site-header .utility-link {
 color: #fff !important;
}
html[data-contraste="high"] .site-header .utility-link {
 background: #000 !important;
 border-color: #fff !important;
}
html[data-contraste="high"] .hero {
 background: #000 !important;
 color: #fff !important;
 border-bottom: 2px solid #fff;
}
html[data-contraste="high"] .hero .lead {
 color: #fff !important;
}
html[data-contraste="high"] .orbit-ring {
 border-color: #fff !important;
}
html[data-contraste="high"] .orbit-node {
 background: #000 !important;
 border-color: #fff !important;
 color: #fff !important;
}
html[data-contraste="high"] .orbit-core {
 background: #fff !important;
 color: #000 !important;
 box-shadow: none !important;
}
html[data-contraste="high"] .step-detail {
 background: #000 !important;
 color: #fff !important;
 border: 2px solid #fff;
}
html[data-contraste="high"] .footer {
 background: #000 !important;
 color: #fff !important;
 border-top: 2px solid #fff;
}
html[data-contraste="high"] .contact-grid {
 background: #000 !important;
 border: 2px solid #fff;
}
html[data-contraste="high"] .btn-primary {
 background: #fff !important;
 color: #000 !important;
 border-color: #fff !important;
}
html[data-contraste="high"] .btn-outline-light {
 color: #fff !important;
 border-color: #fff !important;
}

/* v11 — evita que un módulo antiguo sin estructura se muestre como enlaces corridos. */
#necesidades:not(:has(.needs-grid)) {
 display: none !important;
}
#estadisticas:not(:has(.stats-grid)) {
 display: none !important;
}

/* v12 — contraste alto usa siempre la versión del logotipo preparada para fondos oscuros. */
html[data-contraste="high"] .brand-logo-light {
 display: none !important;
}
html[data-contraste="high"] .brand-logo-dark {
 display: block !important;
}
html[data-contraste="high"] .footer-logo {
 content: url("../brand/logo-dark.png");
}

/* v14 · Directorio y oportunidades */
.directory-toolbar {
 display: flex;
 gap: 12px;
 max-width: 980px;
 margin-bottom: 18px;
}
.directory-toolbar .input-group {
 flex: 1;
}
.directory-toolbar .form-select {
 max-width: 260px;
}
.directory-summary {
 color: var(--muted);
 font-size: 0.88rem;
 margin-bottom: 22px;
}
.directory-summary strong {
 color: var(--heading);
}
.directory-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 18px;
}
.directory-card {
 display: flex;
 flex-direction: column;
 min-width: 0;
 padding: 25px;
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: var(--card);
 color: var(--ink);
 box-shadow: 0 10px 30px rgba(15, 45, 91, 0.05);
}
.directory-card:hover {
 transform: translateY(-3px);
 box-shadow: var(--shadow);
}
.directory-card-top {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
}
.directory-icon {
 width: 46px;
 height: 46px;
 display: grid;
 place-items: center;
 border-radius: 14px;
 background: color-mix(in srgb, var(--teal), transparent 88%);
 color: var(--teal);
}
.directory-status {
 font-size: 0.68rem;
 font-weight: 800;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--muted);
}
.directory-card h3 {
 margin-top: 18px;
 color: var(--heading);
}
.directory-card p {
 color: var(--muted);
 line-height: 1.6;
}
.directory-card .directory-open {
 margin-top: auto;
 align-self: flex-start;
 border: 0;
 background: none;
 padding: 8px 0;
}
.portal-modal {
 background: var(--card);
 color: var(--ink);
 border: 1px solid var(--line);
}
.portal-modal .modal-header,
.portal-modal .modal-footer {
 border-color: var(--line);
}
.directory-detail-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 22px;
}
.directory-detail-wide {
 grid-column: 1/-1;
}
.directory-label {
 display: block;
 font-size: 0.72rem;
 font-weight: 800;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--teal);
 margin-bottom: 6px;
}
.directory-detail-grid p {
 color: var(--muted);
 margin-bottom: 0;
}
.directory-detail-grid ul {
 color: var(--muted);
 margin-bottom: 0;
}
.opportunity-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 18px;
}
.opportunity-card {
 display: flex;
 flex-direction: column;
 padding: 30px;
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: var(--card);
 color: var(--ink);
 text-decoration: none;
 min-height: 250px;
}
.opportunity-card:hover {
 transform: translateY(-4px);
 border-color: var(--teal);
 box-shadow: var(--shadow);
 color: var(--ink);
}
.opportunity-card i {
 font-size: 2rem;
 color: var(--teal);
}
.opportunity-card p {
 color: var(--muted);
 line-height: 1.6;
}
.opportunity-card span {
 margin-top: auto;
 color: var(--teal);
 font-weight: 800;
 font-size: 0.82rem;
}
html[data-contraste="high"] .site-header,
html[data-contraste="high"] .hero {
 background: #000 !important;
 color: #fff !important;
}
html[data-contraste="high"] .directory-card,
html[data-contraste="high"] .opportunity-card,
html[data-contraste="high"] .portal-modal {
 border-width: 2px;
}
@media (max-width: 991px) {
 .directory-grid {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 .opportunity-grid {
 grid-template-columns: 1fr 1fr;
 }
}
@media (max-width: 575px) {
 .directory-toolbar,
 .directory-detail-grid {
 display: grid;
 grid-template-columns: 1fr;
 }
 .directory-toolbar .form-select {
 max-width: none;
 }
 .directory-grid,
 .opportunity-grid {
 grid-template-columns: 1fr;
 }
}

/* v15 — separación visual y semántica de Portafolio, ER Red y Oportunidades */
.section-action {
 margin-top: 2rem;
 text-align: center;
}
.network-map {
 position: relative;
 min-height: 420px;
 border: 1px solid var(--line);
 border-radius: 28px;
 background: var(--card);
 overflow: hidden;
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 1rem;
 padding: 2rem;
}
.network-map:before,
.network-map:after {
 content: "";
 position: absolute;
 inset: 12% 24%;
 border: 1px solid var(--line);
 border-radius: 50%;
 pointer-events: none;
}
.network-map:after {
 inset: 24% 34%;
}
.network-center {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 width: 120px;
 height: 120px;
 border-radius: 50%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 background: var(--surface);
 border: 2px solid var(--teal);
 z-index: 2;
}
.network-center span {
 font-family: Montserrat, sans-serif;
 font-size: 2rem;
 font-weight: 800;
 color: var(--heading);
}
.network-center small {
 color: var(--teal);
 font-weight: 700;
 letter-spacing: 0.12em;
}
.network-node {
 position: relative;
 z-index: 3;
 display: flex;
 flex-direction: column;
 gap: 0.35rem;
 width: min(280px, 100%);
 padding: 1.2rem;
 border: 1px solid var(--line);
 border-radius: 18px;
 background: var(--surface);
 box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
}
.network-node i {
 color: var(--teal);
 font-size: 1.35rem;
}
.network-node strong {
 color: var(--heading);
}
.network-node span {
 color: var(--muted);
 font-size: 0.92rem;
}
.network-node-1 {
 justify-self: start;
}
.network-node-2 {
 justify-self: end;
}
.network-node-3 {
 justify-self: start;
 align-self: end;
}
.network-node-4 {
 justify-self: end;
 align-self: end;
}
.network-footer {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 margin-top: 1.5rem;
 padding-top: 1.5rem;
 border-top: 1px solid var(--line);
}
.network-footer p {
 margin: 0;
 color: var(--muted);
 max-width: 760px;
}
.opportunity-flow {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1rem;
 position: relative;
}
.opportunity-step {
 position: relative;
 padding: 1.6rem;
 border: 1px solid var(--line);
 border-radius: 20px;
 background: var(--card);
 min-height: 240px;
}
.opportunity-number {
 position: absolute;
 top: 1rem;
 right: 1rem;
 font-size: 0.78rem;
 font-weight: 800;
 color: var(--teal);
 letter-spacing: 0.1em;
}
.opportunity-step i {
 font-size: 1.5rem;
 color: var(--teal);
}
.opportunity-step h3 {
 margin: 1.2rem 0 0.6rem;
 color: var(--heading);
}
.opportunity-step p {
 color: var(--muted);
 margin: 0;
}
.opportunity-note {
 display: flex;
 align-items: center;
 gap: 1rem;
 margin-top: 1rem;
 padding: 1.2rem 1.4rem;
 border: 1px solid var(--line);
 border-radius: 18px;
 background: var(--soft);
}
.opportunity-note strong {
 color: var(--heading);
}
.opportunity-note span {
 color: var(--muted);
 flex: 1;
}
.opportunity-note .btn {
 white-space: nowrap;
}
@media (max-width: 900px) {
 .network-map {
 grid-template-columns: 1fr;
 min-height: auto;
 }
 .network-center {
 position: relative;
 left: auto;
 top: auto;
 transform: none;
 margin: 0 auto 1rem;
 grid-column: 1;
 }
 .network-node-1,
 .network-node-2,
 .network-node-3,
 .network-node-4 {
 justify-self: stretch;
 align-self: auto;
 }
 .network-map:before,
 .network-map:after {
 display: none;
 }
 .opportunity-flow {
 grid-template-columns: 1fr;
 }
 .opportunity-note {
 flex-direction: column;
 align-items: flex-start;
 }
}
/* v16 — Portafolio como muestra de capacidades; Directorio como catálogo consultable */
.portfolio-focus-grid {
 display: grid;
 grid-template-columns: repeat(5, minmax(0, 1fr));
 gap: 16px;
}
.portfolio-focus-card {
 display: flex;
 flex-direction: column;
 min-width: 0;
 padding: 24px;
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: var(--card);
 color: var(--ink);
 min-height: 320px;
 transition: transform 0.2s ease, box-shadow 0.2s ease,
 border-color 0.2s ease;
}
.portfolio-focus-card:hover {
 transform: translateY(-4px);
 border-color: var(--teal);
 box-shadow: var(--shadow);
}
.portfolio-focus-icon {
 width: 48px;
 height: 48px;
 display: grid;
 place-items: center;
 border-radius: 14px;
 background: color-mix(in srgb, var(--teal), transparent 88%);
 color: var(--teal);
 font-size: 1.25rem;
 margin-bottom: 22px;
}
.portfolio-focus-label,
.portfolio-focus-examples {
 font-size: 0.68rem;
 font-weight: 800;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--teal);
}
.portfolio-focus-card h3 {
 margin: 0.45rem 0 0.65rem;
 color: var(--heading);
 font-size: 1.18rem;
}
.portfolio-focus-card p {
 color: var(--muted);
 line-height: 1.6;
 margin: 0;
}
.portfolio-focus-examples {
 margin-top: auto;
 padding-top: 20px;
 color: var(--muted);
 line-height: 1.55;
}
.portfolio-bottom {
 margin-top: 34px;
 padding: 28px;
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: var(--soft);
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 28px;
}
.portfolio-bottom h3 {
 margin: 0.35rem 0 0.5rem;
 color: var(--heading);
}
.portfolio-bottom p {
 margin: 0;
 color: var(--muted);
 max-width: 760px;
 line-height: 1.6;
}
html[data-contraste="high"] .portfolio-focus-card,
html[data-contraste="high"] .portfolio-bottom {
 border-width: 2px;
}
@media (max-width: 1199px) {
 .portfolio-focus-grid {
 grid-template-columns: repeat(3, minmax(0, 1fr));
 }
}
@media (max-width: 767px) {
 .portfolio-focus-grid {
 grid-template-columns: 1fr 1fr;
 }
 .portfolio-bottom {
 display: grid;
 grid-template-columns: 1fr;
 }
}
@media (max-width: 575px) {
 .portfolio-focus-grid {
 grid-template-columns: 1fr;
 }
}
.diagnostic-shell {
 max-width: 980px;
 margin: 0 auto;
 padding: clamp(1.25rem, 3vw, 2.5rem);
 background: var(--card);
 border: 1px solid var(--line);
 border-radius: 1.5rem;
 box-shadow: 0 1rem 3rem rgba(15, 45, 91, 0.08);
}
.diagnostic-progress {
 height: 0.45rem;
 background: var(--soft);
 border-radius: 999px;
 overflow: hidden;
 margin-bottom: 2rem;
}
.diagnostic-progress span {
 display: block;
 height: 100%;
 width: 20%;
 background: linear-gradient(90deg, var(--teal), var(--blue), var(--purple));
 transition: width 0.3s ease;
}
.diagnostic-question h3 {
 font-family: Montserrat, sans-serif;
 font-size: clamp(1.35rem, 2.5vw, 2rem);
 margin-bottom: 1.25rem;
 color: var(--heading);
}
.diagnostic-option {
 display: block;
 width: 100%;
 text-align: left;
 padding: 1rem 1.1rem;
 margin: 0.7rem 0;
 border: 1px solid var(--line);
 background: var(--surface);
 color: var(--ink);
 border-radius: 1rem;
 transition: 0.2s ease;
}
.diagnostic-option:hover,
.diagnostic-option.is-selected {
 border-color: var(--blue);
 box-shadow: 0 0 0 0.2rem rgba(0, 119, 230, 0.12);
 transform: translateY(-1px);
}
.diagnostic-actions {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
 margin-top: 1.5rem;
}
.diagnostic-step {
 color: var(--muted);
 font-size: 0.9rem;
}
.diagnostic-result[hidden] {
 display: none;
}
.diagnostic-result-grid {
 display: grid;
 grid-template-columns: repeat(5, minmax(0, 1fr));
 gap: 0.75rem;
}
.diagnostic-result-item {
 padding: 1rem;
 border: 1px solid var(--line);
 border-radius: 1rem;
 background: var(--soft);
 color: var(--ink);
}
.diagnostic-result-item strong {
 display: block;
 color: var(--heading);
}
@media (max-width: 767.98px) {
 .diagnostic-result-grid {
 grid-template-columns: 1fr 1fr;
 }
 .diagnostic-actions {
 flex-wrap: wrap;
 }
 .diagnostic-step {
 order: -1;
 width: 100%;
 text-align: center;
 }
}
html[data-contraste="high"] .diagnostic-shell,
html[data-contraste="high"] .diagnostic-option,
html[data-contraste="high"] .diagnostic-result-item {
 border-color: #fff;
 box-shadow: none;
}
html[data-contraste="high"] .diagnostic-option {
 background: #000;
 color: #fff;
}
html[data-contraste="high"] .diagnostic-shell {
 background: #000;
 color: #fff;
}

.network-live,
.opportunity-live {
 margin-top: 1.25rem;
 padding: 1.4rem;
 border: 1px solid var(--line);
 border-radius: 20px;
 background: var(--card);
}
.network-live {
 display: grid;
 grid-template-columns: minmax(220px, 0.7fr) 1.3fr;
 gap: 1.25rem;
 align-items: start;
}
.network-live h3,
.opportunity-live h3 {
 margin: 0.35rem 0 0;
 color: var(--heading);
}
.network-relations {
 display: grid;
 gap: 0.55rem;
}
.network-relation {
 display: grid;
 grid-template-columns: 1fr auto 1fr;
 gap: 0.75rem;
 align-items: center;
 padding: 0.7rem 0.85rem;
 border-radius: 12px;
 background: var(--surface);
 border: 1px solid var(--line);
 font-size: 0.88rem;
}
.network-relation span {
 color: var(--teal);
 font-weight: 800;
 text-align: center;
 font-size: 0.72rem;
 text-transform: uppercase;
 letter-spacing: 0.04em;
}
.opportunity-live {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1rem;
}
.opportunity-live p {
 margin: 0.5rem 0 0;
 color: var(--muted);
}
.opportunity-metric {
 min-width: 150px;
 text-align: center;
 padding: 1rem;
 border-left: 1px solid var(--line);
}
.opportunity-metric strong {
 display: block;
 font: 800 2.4rem/1 Montserrat, sans-serif;
 color: var(--heading);
}
.opportunity-metric span {
 display: block;
 margin-top: 0.35rem;
 color: var(--muted);
 font-size: 0.8rem;
}
@media (max-width: 800px) {
 .network-live {
 grid-template-columns: 1fr;
 }
 .opportunity-live {
 flex-direction: column;
 align-items: flex-start;
 }
 .opportunity-metric {
 width: 100%;
 border-left: 0;
 border-top: 1px solid var(--line);
 }
}

/* v21 — los módulos públicos permanecen navegables aunque el núcleo de datos esté vacío o temporalmente no disponible. */
.network-live .network-empty-state,
.opportunity-live .opportunity-empty-state {
 color: var(--muted);
 margin: 0;
}
.network-live .network-empty-state strong,
.opportunity-live .opportunity-empty-state strong {
 color: var(--heading);
}

.diagnostic-priority {
 margin-top: 1.25rem;
 padding: 1.25rem;
 border: 1px solid var(--line);
 border-radius: 1rem;
 background: var(--surface);
}
.diagnostic-priority h4 {
 margin: 0.35rem 0 0.45rem;
 color: var(--heading);
 font-family: Montserrat, sans-serif;
}
.diagnostic-priority p {
 margin: 0;
 color: var(--muted);
 line-height: 1.55;
}
.diagnostic-priority-list {
 display: flex;
 flex-wrap: wrap;
 gap: 0.65rem;
 margin-top: 1rem;
 align-items: center;
}
.diagnostic-priority-pill {
 margin: 0.08rem 0;
 white-space: nowrap;
}
.diagnostic-priority-pill {
 display: inline-flex;
 align-items: center;
 padding: 0.5rem 0.8rem;
 border-radius: 999px;
 background: color-mix(in srgb, var(--teal), transparent 88%);
 border: 1px solid color-mix(in srgb, var(--teal), var(--line) 60%);
 color: var(--heading);
 font-weight: 700;
 font-size: 0.82rem;
}
.diagnostic-level {
 display: block;
 margin-top: 0.45rem;
 letter-spacing: 0.08em;
 color: var(--teal);
 font-size: 0.85rem;
}
.diagnostic-priority[hidden] {
 display: none;
}
@media (max-width: 575.98px) {
 .diagnostic-priority {
 padding: 1rem;
 }
 .diagnostic-priority-list {
 display: grid;
 grid-template-columns: 1fr;
 }
}
html[data-contraste="high"] .diagnostic-priority {
 border-width: 2px;
 background: #000;
}
html[data-contraste="high"] .diagnostic-priority-pill {
 border-color: #fff;
 background: #000;
 color: #fff;
}
/* v24 — experiencia de entrada y hero empresarial */
.hero-v24 {
 position: relative;
 min-height: calc(100vh - 78px);
 display: flex;
 align-items: center;
 background: radial-gradient(
 circle at 78% 42%,
 rgba(0, 168, 132, 0.18),
 transparent 28%
 ),
 radial-gradient(
 circle at 18% 18%,
 rgba(0, 119, 230, 0.18),
 transparent 26%
 ),
 linear-gradient(135deg, var(--deep), #071a38 68%, #06152d);
}
.hero-v24-inner {
 position: relative;
 z-index: 2;
}
.hero-v24 .hero-copy {
 position: relative;
 z-index: 3;
}
.hero-v24 h1 {
 max-width: 820px;
 letter-spacing: -0.045em;
}
.hero-v24 .lead {
 max-width: 680px;
}
.hero-proof-row {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
 margin: 30px 0 28px;
}
.hero-proof-row span {
 display: flex;
 align-items: center;
 gap: 7px;
 padding: 9px 12px;
 border: 1px solid rgba(255, 255, 255, 0.13);
 border-radius: 999px;
 background: rgba(255, 255, 255, 0.045);
 color: rgba(255, 255, 255, 0.68);
 font-size: 0.72rem;
}
.hero-proof-row b {
 color: #fff;
 font-family: Montserrat, sans-serif;
 letter-spacing: 0.03em;
}
.hero-glow {
 position: absolute;
 border-radius: 50%;
 filter: blur(2px);
 pointer-events: none;
}
.hero-glow-a {
 width: 260px;
 height: 260px;
 right: -100px;
 top: 12%;
 background: rgba(0, 168, 132, 0.12);
}
.hero-glow-b {
 width: 180px;
 height: 180px;
 left: 38%;
 bottom: -80px;
 background: rgba(122, 63, 242, 0.12);
}
.hero-orbit-v24 {
 min-height: 570px;
}
.hero-orbit-v24 .ring-1 {
 width: 280px;
 height: 280px;
 border-color: rgba(255, 255, 255, 0.22);
}
.hero-orbit-v24 .ring-2 {
 width: 430px;
 height: 430px;
 border-color: rgba(0, 168, 132, 0.27);
}
.hero-orbit-v24 .ring-3 {
 width: 540px;
 height: 540px;
 border: 1px dashed rgba(255, 255, 255, 0.12);
 animation: spin 34s linear infinite;
}
.hero-orbit-v24 .orbit-core {
 width: 158px;
 height: 158px;
 background: linear-gradient(145deg, var(--teal), var(--blue));
 box-shadow: 0 0 0 12px rgba(0, 168, 132, 0.06),
 0 30px 100px rgba(0, 168, 132, 0.28);
}
.hero-orbit-v24 .orbit-core strong {
 font: 800 3.25rem Montserrat;
 letter-spacing: -0.06em;
}
.hero-orbit-v24 .orbit-core small {
 margin-top: 78px;
 letter-spacing: 0.16em;
 text-transform: uppercase;
}
.hero-orbit-v24 .orbit-node {
 display: flex;
 align-items: center;
 gap: 7px;
 padding: 10px 13px;
 border-color: rgba(255, 255, 255, 0.14);
 background: rgba(7, 26, 56, 0.72);
 box-shadow: 0 12px 35px rgba(0, 0, 0, 0.16);
}
.hero-orbit-v24 .orbit-node i {
 color: var(--teal);
}
.hero-orbit-v24 .n1 {
 top: 45px;
 left: 22%;
}
.hero-orbit-v24 .n2 {
 right: 2%;
 top: 28%;
}
.hero-orbit-v24 .n3 {
 right: 7%;
 bottom: 23%;
}
.hero-orbit-v24 .n4 {
 left: 8%;
 top: auto;
 bottom: 20%;
}
.hero-orbit-v24 .n5 {
 left: 36%;
 bottom: 3%;
}
.orbit-grid {
 position: absolute;
 width: 420px;
 height: 420px;
 border-radius: 50%;
 background: radial-gradient(
 circle,
 rgba(255, 255, 255, 0.045) 1px,
 transparent 1.5px
 );
 background-size: 16px 16px;
 mask-image: radial-gradient(circle, #000 0 45%, transparent 72%);
 opacity: 0.65;
}
.entry-section {
 padding-top: 70px;
}
.entry-intro {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 50px;
 align-items: end;
 margin-bottom: 32px;
}
.entry-intro h2 {
 font: 800 clamp(2rem, 4vw, 3.8rem) / 1.03 Montserrat;
 margin: 0;
 letter-spacing: -0.035em;
 color: var(--ink);
}
.entry-intro p {
 max-width: 650px;
 margin: 0;
 color: var(--muted);
 font-size: 1.05rem;
 line-height: 1.75;
}
.entry-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 14px;
}
.entry-card {
 position: relative;
 display: grid;
 grid-template-columns: auto 1fr auto;
 gap: 16px;
 align-items: center;
 padding: 22px;
 border: 1px solid var(--line);
 border-radius: 22px;
 background: var(--surface);
 color: var(--ink);
 text-decoration: none;
 overflow: hidden;
 min-height: 132px;
 transition: transform 0.22s ease, box-shadow 0.22s ease,
 border-color 0.22s ease;
}
.entry-card:before {
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 bottom: 0;
 width: 3px;
 background: var(--entry-accent, var(--teal));
 opacity: 0.9;
}
.entry-card:hover {
 transform: translateY(-4px);
 border-color: color-mix(in srgb, var(--entry-accent), var(--line) 55%);
 box-shadow: var(--shadow);
 color: var(--ink);
}
.entry-number {
 position: absolute;
 right: 18px;
 top: 12px;
 font: 800 0.66rem Montserrat;
 color: var(--muted);
 opacity: 0.55;
}
.entry-icon {
 width: 48px;
 height: 48px;
 border-radius: 15px;
 display: grid;
 place-items: center;
 background: color-mix(in srgb, var(--entry-accent), transparent 88%);
 color: var(--entry-accent);
 font-size: 1.25rem;
}
.entry-copy {
 display: flex;
 flex-direction: column;
 gap: 5px;
 padding-right: 8px;
}
.entry-copy strong {
 font: 700 1rem Montserrat;
 color: var(--ink);
}
.entry-copy small {
 color: var(--muted);
 line-height: 1.45;
}
.entry-arrow {
 font-size: 1.35rem;
 color: var(--entry-accent);
 align-self: end;
}
.entry-card-teal {
 --entry-accent: var(--teal);
}
.entry-card-blue {
 --entry-accent: var(--blue);
}
.entry-card-purple {
 --entry-accent: var(--purple);
}
.entry-card-yellow {
 --entry-accent: #c89400;
}
.entry-card-red {
 --entry-accent: var(--red);
}
html[data-tema="dark"] .entry-card {
 background: #101d2e;
}
.entry-card-yellow .entry-icon {
 background: rgba(255, 200, 69, 0.12);
}
html[data-contraste="high"] .hero-v24 {
 background: #000 !important;
}
.hero-v24 .btn-outline-light:hover {
 background: #fff;
 color: #000;
}
.hero-v24 .eyebrow {
 color: #5fe0c0;
}
@media (max-width: 1100px) {
 .hero-orbit-v24 {
 min-height: 500px;
 }
 .hero-orbit-v24 .ring-3 {
 width: 470px;
 height: 470px;
 }
 .entry-grid {
 grid-template-columns: 1fr 1fr;
 }
 .entry-intro {
 grid-template-columns: 1fr;
 gap: 18px;
 }
}
@media (max-width: 767px) {
 .hero-v24 {
 min-height: auto;
 }
 .hero-proof-row {
 gap: 7px;
 }
 .hero-proof-row span {
 font-size: 0.66rem;
 }
 .hero-orbit-v24 {
 min-height: 390px;
 }
 .hero-orbit-v24 .ring-1 {
 width: 210px;
 height: 210px;
 }
 .hero-orbit-v24 .ring-2 {
 width: 310px;
 height: 310px;
 }
 .hero-orbit-v24 .ring-3 {
 width: 390px;
 height: 390px;
 }
 .hero-orbit-v24 .orbit-core {
 width: 120px;
 height: 120px;
 }
 .hero-orbit-v24 .orbit-core strong {
 font-size: 2.4rem;
 }
 .hero-orbit-v24 .orbit-core small {
 margin-top: 61px;
 font-size: 0.58rem;
 }
 .hero-orbit-v24 .n1 {
 left: 0;
 top: 22px;
 }
 .hero-orbit-v24 .n2 {
 right: 0;
 top: 30%;
 }
 .hero-orbit-v24 .n3 {
 right: 0;
 bottom: 18%;
 }
 .hero-orbit-v24 .n4 {
 left: 0;
 bottom: 18%;
 }
 .hero-orbit-v24 .n5 {
 left: 30%;
 bottom: 0;
 }
 .entry-grid {
 grid-template-columns: 1fr;
 }
 .entry-card {
 min-height: 116px;
 }
}

/* v24.2 — Preferencias: panel aislado del flujo y cierre robusto */
html,
body {
 max-width: 100%;
 overflow-x: hidden;
}
body.preferences-open {
 overflow: hidden;
}
.preferences-panel {
 position: fixed !important;
 top: 0 !important;
 right: 0 !important;
 bottom: 0 !important;
 left: auto !important;
 width: min(390px, calc(100vw - 16px)) !important;
 max-width: 100% !important;
 height: 100dvh !important;
 max-height: 100dvh !important;
 box-sizing: border-box !important;
 overflow: hidden !important;
 z-index: 2100 !important;
 transform: translate3d(105%, 0, 0);
 visibility: hidden;
 pointer-events: none;
}
.preferences-panel.open {
 transform: translate3d(0, 0, 0);
 visibility: visible;
 pointer-events: auto;
}
.preferences-head {
 flex: 0 0 72px;
}
.preferences-body {
 height: calc(100% - 72px);
 max-height: calc(100% - 72px);
 overflow-y: auto;
 overflow-x: hidden;
 -webkit-overflow-scrolling: touch;
}
.preferences-backdrop {
 position: fixed !important;
 inset: 0 !important;
 width: 100vw !important;
 height: 100dvh !important;
 z-index: 2099 !important;
 overflow: hidden;
 pointer-events: none;
}
.preferences-panel.open + .preferences-backdrop {
 pointer-events: auto;
}
@media (max-width: 575px) {
 .preferences-panel {
 width: min(360px, calc(100vw - 12px)) !important;
 }
 .preferences-head {
 padding: 0 18px;
 }
 .preferences-body {
 padding: 20px;
 }
}

/* ==========================================================
 E-RENOVAR v24.2 · Ajuste cosmético de navegación y Hero
 - navegación de escritorio en una sola línea
 - evita saltos de texto en menú y CTA
 - mantiene el logo proporcional
 - Hero v24 conserva su concepto, pero recupera jerarquía
 ========================================================== */
@media (min-width: 992px) {
 .site-header .navbar {
 min-height: 74px;
 }
 .site-header .navbar > .container-xl {
 flex-wrap: nowrap;
 }
 .site-header .navbar-brand.brand-logo {
 flex: 0 1 auto;
 max-width: 300px;
 margin-right: 10px;
 }
 .site-header .brand-logo-img {
 height: 88px;
 max-width: 300px;
 }
 #mainNav {
 min-width: 0;
 }
 #mainNav .navbar-nav {
 flex-wrap: nowrap;
 gap: 0.1rem !important;
 }
 #mainNav .nav-link {
 font-size: 0.82rem;
 line-height: 1.15;
 padding: 0.45rem 0.42rem;
 white-space: nowrap;
 letter-spacing: -0.01em;
 }
 #mainNav .btn {
 white-space: nowrap;
 font-size: 0.82rem;
 line-height: 1.2;
 padding: 0.48rem 0.68rem;
 }
 .site-header .utility-link {
 flex: 0 0 auto;
 }
}

/* El titular v24 fue diseñado para ocupar dos líneas; evitamos que la
 tipografía lo fuerce accidentalmente a cuatro líneas en escritorio. */
@media (min-width: 1200px) {
 .hero-v24 h1 {
 max-width: 850px;
 font-size: clamp(4.35rem, 5.25vw, 5.45rem);
 }
}
@media (min-width: 992px) and (max-width: 1199px) {
 .hero-v24 h1 {
 max-width: 700px;
 font-size: clamp(3.55rem, 5.5vw, 4.7rem);
 }
 .hero-grid {
 gap: 38px;
 }
}
@media (max-width: 991px) {
 .site-header .navbar-brand.brand-logo {
 max-width: 260px;
 }
 .site-header .brand-logo-img {
 max-width: 260px;
 height: 46px;
 }
}
@media (max-width: 575px) {
 .site-header .navbar-brand.brand-logo {
 max-width: 225px;
 }
 .site-header .brand-logo-img {
 max-width: 225px;
 height: 43px;
 }
 .hero-v24 h1 {
 font-size: clamp(2.75rem, 13vw, 4rem);
 }
}

/* v24.4 · ER 360 interactive experience */
.er360-section {
 background: linear-gradient(
 180deg,
 var(--surface) 0%,
 color-mix(in srgb, var(--soft), transparent 18%) 100%
 );
}
.er360-head {
 max-width: 900px;
}
.er360-timeline {
 display: grid;
 grid-template-columns: repeat(8, minmax(0, 1fr));
 gap: 0;
 border-top: 1px solid var(--line);
 border-bottom: 1px solid var(--line);
 margin-top: 32px;
}
.er360-step {
 position: relative;
 border: 0;
 background: transparent;
 color: var(--muted);
 padding: 22px 10px 20px;
 text-align: left;
 min-width: 0;
 cursor: pointer;
}
.er360-step-number {
 display: block;
 font: 800 0.68rem Montserrat;
 color: var(--teal);
 letter-spacing: 0.08em;
 margin-bottom: 8px;
}
.er360-step-name {
 display: block;
 font: 800 0.8rem Montserrat;
 line-height: 1.2;
 color: inherit;
}
.er360-step:hover,
.er360-step.active {
 color: var(--ink);
}
.er360-step.active:after {
 content: "";
 position: absolute;
 left: 10px;
 right: 10px;
 bottom: -1px;
 height: 3px;
 background: var(--teal);
 border-radius: 3px 3px 0 0;
}
.er360-step-line {
 position: absolute;
 right: 0;
 top: 31px;
 width: 1px;
 height: 28px;
 background: var(--line);
}
.er360-detail {
 display: grid;
 grid-template-columns: 90px 1fr auto;
 gap: 28px;
 align-items: center;
 margin-top: 24px;
 padding: 34px 36px;
 background: var(--deep);
 color: #fff;
 border-radius: 24px;
 box-shadow: 0 24px 60px rgba(15, 45, 91, 0.16);
}
.er360-detail-index {
 font: 800 clamp(3rem, 6vw, 5rem) Montserrat;
 line-height: 0.8;
 color: color-mix(in srgb, var(--teal), white 8%);
 opacity: 0.9;
}
.er360-detail-eyebrow {
 display: block;
 font-size: 0.68rem;
 font-weight: 800;
 letter-spacing: 0.14em;
 color: var(--teal);
 margin-bottom: 8px;
}
.er360-detail h3 {
 font-size: clamp(1.5rem, 2.6vw, 2.3rem);
 margin: 0 0 10px;
 color: #fff;
}
.er360-detail p {
 max-width: 760px;
 margin: 0;
 color: rgba(255, 255, 255, 0.76);
 line-height: 1.7;
}
.er360-capabilities {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-top: 18px;
}
.er360-capabilities span {
 border: 1px solid rgba(255, 255, 255, 0.18);
 border-radius: 999px;
 padding: 6px 10px;
 font-size: 0.72rem;
 color: rgba(255, 255, 255, 0.88);
 background: rgba(255, 255, 255, 0.04);
}
.er360-detail-cta {
 white-space: nowrap;
}
.er360-detail.is-refreshing {
 animation: er360Refresh 0.28s ease;
}
@keyframes er360Refresh {
 from {
 opacity: 0.5;
 transform: translateY(5px);
 }
 to {
 opacity: 1;
 transform: none;
 }
}
@media (max-width: 991px) {
 .er360-timeline {
 grid-template-columns: repeat(4, 1fr);
 }
 .er360-step:nth-child(4) .er360-step-line,
 .er360-step:nth-child(8) .er360-step-line {
 display: none;
 }
 .er360-detail {
 grid-template-columns: 70px 1fr;
 }
 .er360-detail-cta {
 grid-column: 2;
 justify-self: start;
 }
}
@media (max-width: 575px) {
 .er360-timeline {
 grid-template-columns: repeat(2, 1fr);
 }
 .er360-step {
 padding: 17px 10px;
 }
 .er360-step-line {
 display: none;
 }
 .er360-detail {
 grid-template-columns: 1fr;
 padding: 28px;
 }
 .er360-detail-index {
 font-size: 3rem;
 }
 .er360-detail-cta {
 grid-column: auto;
 }
 .er360-detail h3 {
 margin-bottom: 8px;
 }
}

/* v24.5 — puente ER 360 → Soluciones */
.er360-related {
 margin-top: 20px;
}
.er360-related-label {
 display: block;
 font-size: 0.7rem;
 font-weight: 800;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--muted);
 margin-bottom: 9px;
}
.er360-related-list {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
}
.er360-related-chip {
 appearance: none;
 border: 1px solid var(--line);
 background: var(--soft);
 color: var(--ink);
 border-radius: 999px;
 padding: 7px 11px;
 font: inherit;
 font-size: 0.76rem;
 font-weight: 700;
 cursor: pointer;
 transition: transform 0.2s ease, border-color 0.2s ease,
 background 0.2s ease, color 0.2s ease;
}
.er360-related-chip:hover,
.er360-related-chip:focus-visible {
 border-color: var(--teal);
 color: var(--teal);
 transform: translateY(-1px);
 outline: none;
}
.solution-card {
 transition: opacity 0.25s ease, transform 0.25s ease,
 border-color 0.25s ease, box-shadow 0.25s ease;
}
.solution-card.is-related {
 border-color: var(--teal) !important;
 box-shadow: 0 14px 36px rgba(0, 168, 132, 0.13);
 transform: translateY(-3px);
}
.solution-card.is-dimmed {
 opacity: 0.48;
}
@media (max-width: 575px) {
 .er360-related-list {
 gap: 6px;
 }
 .er360-related-chip {
 font-size: 0.72rem;
 padding: 6px 9px;
 }
 .solution-card.is-dimmed {
 opacity: 1;
 }
}

/* ==========================================================
 E-RENOVAR v24.6 · ER 360 / órbita hero verdaderamente responsiva
 La composición conserva su geometría y escala proporcionalmente
 según ancho, orientación y espacio disponible.
 ========================================================== */
.hero-orbit-v24 {
 width: 100%;
 max-width: 620px;
 margin-inline: auto;
 min-height: clamp(420px, 42vw, 570px);
 aspect-ratio: 1 / 1;
}
.hero-orbit-v24 .ring-1,
.hero-orbit-v24 .ring-2,
.hero-orbit-v24 .ring-3,
.hero-orbit-v24 .orbit-grid {
 width: var(--orbit-size, min(540px, 42vw));
 height: var(--orbit-size, min(540px, 42vw));
}
.hero-orbit-v24 .ring-1 {
 --orbit-size: min(280px, 21.8vw);
}
.hero-orbit-v24 .ring-2 {
 --orbit-size: min(430px, 33.5vw);
}
.hero-orbit-v24 .ring-3 {
 --orbit-size: min(540px, 42vw);
}
.hero-orbit-v24 .orbit-grid {
 --orbit-size: min(420px, 32.8vw);
}
.hero-orbit-v24 .orbit-core {
 width: clamp(112px, 12.35vw, 158px);
 height: clamp(112px, 12.35vw, 158px);
}
.hero-orbit-v24 .orbit-core strong {
 font-size: clamp(2.35rem, 3.25vw, 3.25rem);
}
.hero-orbit-v24 .orbit-core small {
 margin-top: clamp(56px, 6.1vw, 78px);
 font-size: clamp(0.55rem, 0.7vw, 0.7rem);
}
.hero-orbit-v24 .orbit-node {
 font-size: clamp(0.62rem, 0.72vw, 0.72rem);
 padding: clamp(8px, 0.7vw, 10px) clamp(10px, 0.9vw, 13px);
}
.hero-orbit-v24 .n1 {
 top: 8%;
 left: 22%;
}
.hero-orbit-v24 .n2 {
 right: 2%;
 top: 28%;
}
.hero-orbit-v24 .n3 {
 right: 7%;
 bottom: 23%;
}
.hero-orbit-v24 .n4 {
 left: 8%;
 top: auto;
 bottom: 20%;
}
.hero-orbit-v24 .n5 {
 left: 36%;
 bottom: 3%;
}

@media (max-width: 1199px) and (min-width: 992px) {
 .hero-orbit-v24 {
 min-height: clamp(430px, 46vw, 520px);
 }
 .hero-orbit-v24 .ring-1 {
 --orbit-size: min(280px, 23vw);
 }
 .hero-orbit-v24 .ring-2 {
 --orbit-size: min(430px, 35vw);
 }
 .hero-orbit-v24 .ring-3 {
 --orbit-size: min(500px, 46vw);
 }
 .hero-orbit-v24 .orbit-grid {
 --orbit-size: min(390px, 34vw);
 }
}

@media (max-width: 991px) {
 .hero-v24 .hero-grid {
 grid-template-columns: 1fr;
 gap: 24px;
 }
 .hero-orbit-v24 {
 max-width: min(620px, 100%);
 min-height: clamp(330px, 72vw, 520px);
 aspect-ratio: 1 / 1;
 }
 .hero-orbit-v24 .ring-1 {
 --orbit-size: min(280px, 42vw);
 }
 .hero-orbit-v24 .ring-2 {
 --orbit-size: min(430px, 64vw);
 }
 .hero-orbit-v24 .ring-3 {
 --orbit-size: min(540px, 82vw);
 }
 .hero-orbit-v24 .orbit-grid {
 --orbit-size: min(420px, 64vw);
 }
 .hero-orbit-v24 .orbit-core {
 width: clamp(108px, 21vw, 158px);
 height: clamp(108px, 21vw, 158px);
 }
 .hero-orbit-v24 .orbit-core small {
 margin-top: clamp(54px, 10.3vw, 78px);
 }
}

@media (max-width: 575px) {
 .hero-v24 {
 overflow: hidden;
 }
 .hero-orbit-v24 {
 min-height: clamp(300px, 88vw, 420px);
 margin-top: 4px;
 }
 .hero-orbit-v24 .ring-1 {
 --orbit-size: 52vw;
 }
 .hero-orbit-v24 .ring-2 {
 --orbit-size: 73vw;
 }
 .hero-orbit-v24 .ring-3 {
 --orbit-size: 88vw;
 }
 .hero-orbit-v24 .orbit-grid {
 --orbit-size: 70vw;
 }
 .hero-orbit-v24 .orbit-core {
 width: 25vw;
 height: 25vw;
 min-width: 94px;
 min-height: 94px;
 max-width: 126px;
 max-height: 126px;
 }
 .hero-orbit-v24 .orbit-core strong {
 font-size: clamp(2rem, 9vw, 2.55rem);
 }
 .hero-orbit-v24 .orbit-core small {
 margin-top: 13vw;
 font-size: 0.52rem;
 }
 .hero-orbit-v24 .orbit-node {
 font-size: 0.62rem;
 padding: 8px 10px;
 gap: 5px;
 }
 .hero-orbit-v24 .n1 {
 left: 5%;
 top: 7%;
 }
 .hero-orbit-v24 .n2 {
 right: 1%;
 top: 27%;
 }
 .hero-orbit-v24 .n3 {
 right: 2%;
 bottom: 21%;
 }
 .hero-orbit-v24 .n4 {
 left: 3%;
 bottom: 20%;
 }
 .hero-orbit-v24 .n5 {
 left: 35%;
 bottom: 3%;
 }
}

@media (max-width: 380px) {
 .hero-orbit-v24 {
 min-height: 295px;
 }
 .hero-orbit-v24 .orbit-node {
 font-size: 0.56rem;
 padding: 7px 8px;
 }
 .hero-orbit-v24 .orbit-node i {
 font-size: 0.7rem;
 }
 .hero-orbit-v24 .n1 {
 left: 2%;
 }
 .hero-orbit-v24 .n4 {
 left: 1%;
 }
}

@media (orientation: landscape) and (max-width: 991px) {
 .hero-v24 .hero-grid {
 gap: 18px;
 }
 .hero-orbit-v24 {
 min-height: clamp(290px, 68vh, 460px);
 max-height: 460px;
 }
}

@media (prefers-reduced-motion: reduce) {
 .hero-orbit-v24 .orbit-ring {
 animation: none;
 }
}

/* v24.7 — conexión Soluciones → Portafolio */
.solution-card[data-solution] {
 cursor: pointer;
}
.solution-card.solution-active {
 border-color: var(--er-accent, #00b894);
 box-shadow: 0 18px 45px rgba(0, 184, 148, 0.12);
 transform: translateY(-2px);
}
.solution-projects {
 margin-top: clamp(2rem, 5vw, 4rem);
 padding: clamp(1.25rem, 3vw, 2rem);
 border: 1px solid var(--er-border, rgba(255, 255, 255, 0.12));
 border-radius: 1.5rem;
 background: var(--er-panel, rgba(255, 255, 255, 0.03));
}
.solution-projects-head {
 margin-bottom: 1.25rem;
}
.solution-projects-head h3 {
 margin: 0.35rem 0 0.5rem;
}
.solution-projects-head p {
 margin: 0;
 max-width: 70ch;
 color: var(--er-muted, #9aa5b1);
}
.solution-projects-grid {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 1rem;
}
.solution-project-card {
 padding: 1.15rem;
 border: 1px solid var(--er-border, rgba(255, 255, 255, 0.1));
 border-radius: 1rem;
 background: var(--er-surface, rgba(0, 0, 0, 0.12));
 min-width: 0;
}
.solution-project-top {
 display: flex;
 justify-content: space-between;
 gap: 0.75rem;
 align-items: center;
 font-size: 0.72rem;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 color: var(--er-muted, #9aa5b1);
}
.solution-project-mark {
 display: inline-grid;
 place-items: center;
 width: 2rem;
 height: 2rem;
 border-radius: 50%;
 border: 1px solid currentColor;
}
.solution-project-card h4 {
 margin: 1rem 0 0.5rem;
}
.solution-project-card p {
 font-size: 0.9rem;
 line-height: 1.55;
 color: var(--er-muted, #9aa5b1);
 margin: 0 0 1rem;
}
.solution-projects-empty {
 margin: 0;
 color: var(--er-muted, #9aa5b1);
}
.directory-focus {
 outline: 2px solid var(--er-accent, #00b894);
 outline-offset: 4px;
}
@media (max-width: 1199.98px) {
 .solution-projects-grid {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}
@media (max-width: 575.98px) {
 .solution-projects {
 border-radius: 1rem;
 padding: 1rem;
 }
 .solution-projects-grid {
 grid-template-columns: 1fr;
 }
 .solution-project-card {
 padding: 1rem;
 }
}

/* v24.8 — Botón flotante volver al inicio */
.back-to-top {
 position: fixed;
 right: clamp(16px, 2vw, 28px);
 bottom: clamp(16px, 2vw, 28px);
 width: 50px;
 height: 50px;
 display: grid;
 place-items: center;
 border: 1px solid color-mix(in srgb, var(--teal), white 20%);
 border-radius: 50%;
 background: var(--teal);
 color: #fff;
 box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
 z-index: 1500;
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transform: translateY(12px);
 transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease,
 background 0.2s ease, box-shadow 0.2s ease;
}
.back-to-top i {
 font-size: 1.15rem;
 line-height: 1;
}
.back-to-top:hover {
 background: #008f70;
 color: #fff;
 transform: translateY(-2px);
 box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}
.back-to-top.is-visible {
 opacity: 1;
 visibility: visible;
 pointer-events: auto;
 transform: translateY(0);
}
.back-to-top:focus-visible {
 outline: 3px solid color-mix(in srgb, var(--teal), white 35%);
 outline-offset: 4px;
}
html[data-tema="dark"] .back-to-top {
 box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45);
}
html[data-contraste="high"] .back-to-top {
 border: 2px solid #fff;
}
@media (max-width: 575px) {
 .back-to-top {
 right: 14px;
 bottom: 14px;
 width: 46px;
 height: 46px;
 }
}
@media (prefers-reduced-motion: reduce) {
 .back-to-top {
 transition: none;
 }
}

/* v24.9 — Red real por proyecto */
.project-network-panel {
 margin-top: 26px;
 padding: 24px;
 border: 1px solid var(--line);
 border-radius: 20px;
 background: var(--soft);
}
.project-network-head h3 {
 margin: 7px 0 6px;
 font-family: Montserrat, sans-serif;
 font-size: 1.2rem;
}
.project-network-head p {
 margin: 0;
 color: var(--muted);
 line-height: 1.6;
}
.project-network-columns {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 18px;
 margin-top: 20px;
}
.project-network-columns > div {
 min-width: 0;
}
.project-network-list {
 display: grid;
 gap: 9px;
 margin-top: 9px;
}
.project-network-item {
 padding: 12px 14px;
 border: 1px solid var(--line);
 border-radius: 13px;
 background: var(--surface);
}
.project-network-item strong {
 display: block;
 font-size: 0.9rem;
}
.project-network-item span {
 display: block;
 color: var(--muted);
 font-size: 0.76rem;
 margin-top: 3px;
 line-height: 1.45;
}
.project-network-empty {
 padding: 12px 14px;
 border: 1px dashed var(--line);
 border-radius: 13px;
 color: var(--muted);
 font-size: 0.8rem;
}
@media (max-width: 767px) {
 .project-network-columns {
 grid-template-columns: 1fr;
 }
 .project-network-panel {
 padding: 18px;
 }
}

/* v24.10 — Diagnóstico → Ecosistema */
.diagnostic-ecosystem {
 margin-top: clamp(1.5rem, 4vw, 2.75rem);
 padding: clamp(1.15rem, 3vw, 1.75rem);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: var(--card);
}
.diagnostic-ecosystem-head h4 {
 margin: 0.35rem 0 0.45rem;
 color: var(--heading);
 font-family: Montserrat, sans-serif;
 font-size: clamp(1.2rem, 2.4vw, 1.65rem);
}
.diagnostic-ecosystem-head p {
 margin: 0;
 max-width: 72ch;
 color: var(--muted);
 line-height: 1.6;
}
.diagnostic-ecosystem-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 1rem;
 margin-top: 1.25rem;
}
.diagnostic-ecosystem-subhead {
 grid-column: 1/-1;
 padding: 0.35rem 0 0.15rem;
 margin-top: 0.35rem;
 border-bottom: 1px solid var(--line);
}
.diagnostic-ecosystem-subhead span {
 display: block;
 color: var(--heading);
 font-family: Montserrat, sans-serif;
 font-size: 1rem;
 font-weight: 800;
}
.diagnostic-ecosystem-subhead small {
 display: block;
 margin: 0.25rem 0 0.65rem;
 color: var(--muted);
 font-size: 0.86rem;
 line-height: 1.5;
}
.diagnostic-ecosystem-card {
 display: flex;
 flex-direction: column;
 min-width: 0;
 padding: 1rem;
 border: 1px solid var(--line);
 border-radius: 16px;
 background: var(--surface);
}
.diagnostic-ecosystem-card.is-project {
 background: var(--card);
}
.diagnostic-ecosystem-card-top {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 0.7rem;
}
.diagnostic-ecosystem-card-icon {
 width: 2.2rem;
 height: 2.2rem;
 display: grid;
 place-items: center;
 border-radius: 11px;
 background: color-mix(in srgb, var(--teal), transparent 88%);
 color: var(--teal);
}
.diagnostic-ecosystem-card-type {
 font-size: 0.68rem;
 font-weight: 800;
 letter-spacing: 0.07em;
 text-transform: uppercase;
 color: var(--muted);
}
.diagnostic-ecosystem-card h5 {
 margin: 1rem 0 0.45rem;
 color: var(--heading);
 font-family: Montserrat, sans-serif;
}
.diagnostic-ecosystem-card p {
 margin: 0;
 color: var(--muted);
 font-size: 0.88rem;
 line-height: 1.55;
}
.diagnostic-ecosystem-card-area {
 margin-top: 0.55rem;
 font-size: 0.72rem;
 font-weight: 700;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 color: var(--teal);
}
.diagnostic-ecosystem-card .text-link {
 margin-top: auto;
 padding-top: 1rem;
 align-self: flex-start;
}
@media (max-width: 991px) {
 .diagnostic-ecosystem-grid {
 grid-template-columns: 1fr 1fr;
 }
}
@media (max-width: 575px) {
 .diagnostic-ecosystem {
 padding: 1rem;
 border-radius: 1rem;
 }
 .diagnostic-ecosystem-grid {
 grid-template-columns: 1fr;
 }
}
html[data-contraste="high"] .diagnostic-ecosystem,
html[data-contraste="high"] .diagnostic-ecosystem-card {
 border-width: 2px;
}

/* v25 — consolidación responsive y accesibilidad */
/* v26 — diagnóstico ER 360: 20 preguntas, niveles y áreas prioritarias */
html,
body {
 max-width: 100%;
 overflow-x: clip;
}
body.preferences-open {
 position: fixed;
 inset: 0;
 width: 100%;
 overflow: hidden;
}
.portal-section,
.site-header,
main,
footer {
 min-width: 0;
}
img,
svg,
video,
canvas {
 max-width: 100%;
 height: auto;
}
.container-xl {
 width: 100%;
}
.navbar-nav {
 min-width: 0;
}
.navbar-nav .nav-link {
 white-space: nowrap;
}
.hero-grid > *,
.split-panel > *,
.renewal-box > *,
.contact-grid > * {
 min-width: 0;
}
.hero .lead,
.section-head p,
.portfolio-card p,
.solution-card p,
.network-card span {
 overflow-wrap: anywhere;
}
.preferences-panel {
 max-width: 100vw;
 overscroll-behavior: contain;
}
.preferences-body {
 overscroll-behavior: contain;
 scrollbar-gutter: stable;
}
.back-to-top {
 right: max(18px, env(safe-area-inset-right));
 bottom: max(18px, env(safe-area-inset-bottom));
}
@media (max-width: 1199.98px) {
 .navbar-nav {
 gap: 0.15rem !important;
 }
 .navbar-nav .nav-link {
 font-size: 0.82rem;
 }
 .hero-grid {
 gap: 38px;
 }
 .hero h1 {
 font-size: clamp(2.8rem, 6vw, 5.2rem);
 }
 .solution-grid {
 grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 .ecosystem-grid {
 grid-template-columns: repeat(3, minmax(0, 1fr));
 }
}
@media (max-width: 991.98px) {
 .navbar {
 min-height: 70px;
 }
 .brand-logo-img {
 height: 46px;
 }
 .hero-grid {
 grid-template-columns: 1fr;
 }
 .hero-copy {
 max-width: 850px;
 }
 .hero-orbit {
 min-height: 430px;
 }
 .solution-grid,
 .ecosystem-grid {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 .portfolio-grid {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 .network-live {
 grid-template-columns: 1fr;
 }
}
@media (max-width: 767.98px) {
 .portal-section {
 padding: 72px 0;
 }
 .hero h1 {
 font-size: clamp(2.45rem, 11vw, 4rem);
 }
 .hero .lead {
 font-size: 1rem;
 }
 .hero-orbit {
 min-height: 340px;
 }
 .ring-1 {
 width: min(62vw, 270px);
 height: min(62vw, 270px);
 }
 .ring-2 {
 width: min(84vw, 360px);
 height: min(84vw, 360px);
 }
 .orbit-core {
 width: 118px;
 height: 118px;
 font-size: 2.35rem;
 }
 .orbit-node {
 max-width: 120px;
 text-align: center;
 padding: 8px 10px;
 }
 .n1 {
 top: 12px;
 }
 .n2 {
 right: 2px;
 top: 43%;
 }
 .n3 {
 bottom: 12px;
 }
 .n4 {
 left: 2px;
 top: 43%;
 }
 .solution-grid,
 .ecosystem-grid,
 .portfolio-grid {
 grid-template-columns: 1fr;
 }
 .split-panel,
 .renewal-box,
 .contact-grid {
 padding: 28px;
 gap: 28px;
 }
 .diagnostic-ecosystem-grid {
 grid-template-columns: 1fr !important;
 }
 .network-relation {
 grid-template-columns: 1fr;
 text-align: left;
 }
 .network-relation span {
 text-align: left;
 }
 .opportunity-note .btn {
 width: 100%;
 }
}
@media (max-width: 575.98px) {
 .site-header .container-xl {
 padding-left: 12px;
 padding-right: 12px;
 }
 .brand-logo-img {
 height: 42px;
 max-width: 205px;
 }
 .utility-link {
 min-width: 34px;
 width: 34px;
 padding: 0;
 }
 .hero-orbit {
 min-height: 300px;
 }
 .orbit-core {
 width: 96px;
 height: 96px;
 font-size: 2rem;
 }
 .orbit-core small {
 margin-top: 58px;
 font-size: 0.62rem;
 }
 .orbit-node {
 font-size: 0.62rem;
 max-width: 100px;
 }
 .need-actions .btn {
 width: 100%;
 }
 .preferences-panel {
 width: 100%;
 }
 .preferences-head {
 height: 64px;
 padding: 0 18px;
 }
 .preferences-body {
 height: calc(100% - 64px);
 padding: 18px;
 }
 .preference-buttons {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 .pref-btn {
 width: 100%;
 }
 .back-to-top {
 width: 44px;
 height: 44px;
 }
}
@media (orientation: landscape) and (max-height: 600px) and (max-width: 991.98px) {
 .hero-orbit {
 min-height: 280px;
 }
 .portal-section {
 padding: 58px 0;
 }
}
@media (prefers-reduced-motion: reduce) {
 html {
 scroll-behavior: auto !important;
 }
}

/* v26.4 — trazabilidad del proyecto dentro del diagnóstico */
.diagnostic-project-relation {
 margin: 0.15rem 0 1rem;
 font-size: 0.78rem;
 line-height: 1.45;
 color: var(--er-muted, #6b7a90);
}
.diagnostic-project-relation span {
 font-weight: 700;
 color: var(--er-text, #0f2d5b);
}

/* v29 — arquitectura multipágina + navegación compacta */
.site-header .navbar {
 min-height: 72px;
}
.site-header .navbar-nav .nav-link {
 font-size: 0.86rem;
 padding: 0.65rem 0.6rem;
}
.site-header .navbar-nav .nav-link i {
 font-size: 0.78rem;
 opacity: 0.85;
}
.site-header .dropdown-menu {
 min-width: 235px;
 padding: 0.5rem;
 border: 1px solid var(--line);
 border-radius: 14px;
 background: var(--surface);
 box-shadow: 0 18px 45px rgba(15, 45, 91, 0.16);
}
.site-header .dropdown-item {
 border-radius: 10px;
 padding: 0.65rem 0.75rem;
 color: var(--ink);
 font-weight: 600;
 font-size: 0.88rem;
}
.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus {
 background: color-mix(in srgb, var(--teal), transparent 90%);
 color: var(--teal);
}
.site-header .dropdown-item i {
 width: 1.15rem;
 color: var(--teal);
}
.mobile-nav-list {
 display: flex;
 flex-direction: column;
 gap: 0.35rem;
}
.mobile-nav-list > .nav-link {
 padding: 0.8rem 0.7rem;
 border-radius: 10px;
}
.mobile-nav-group {
 padding: 0.65rem 0;
 border-top: 1px solid var(--line);
}
.mobile-nav-group strong {
 display: block;
 padding: 0.35rem 0.7rem 0.5rem;
 color: var(--teal);
 font-size: 0.72rem;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}
.mobile-nav-group .nav-link {
 padding: 0.55rem 0.7rem;
 color: var(--ink) !important;
 border-radius: 9px;
}
.mobile-nav-group .nav-link:hover {
 background: color-mix(in srgb, var(--teal), transparent 90%);
}
.page-intro {
 padding: clamp(52px, 8vw, 92px) 0 34px;
 background: var(--soft);
 border-bottom: 1px solid var(--line);
}
.page-intro h1 {
 font-family: Montserrat, sans-serif;
 font-weight: 800;
 font-size: clamp(2.25rem, 5vw, 4.8rem);
 line-height: 1.02;
 margin: 0;
}
.page-intro p {
 max-width: 820px;
 color: var(--muted);
 font-size: 1.05rem;
 margin: 1rem 0 0;
}
@media (max-width: 1199px) {
 .site-header .navbar-nav .nav-link {
 font-size: 0.8rem;
 padding-left: 0.4rem;
 padding-right: 0.4rem;
 }
 .site-header .navbar-nav .nav-link i {
 display: none;
 }
}
@media (max-width: 991px) {
 .site-header .navbar-nav .nav-link {
 font-size: 1rem;
 }
 .site-header .dropdown-menu {
 border: 0;
 box-shadow: none;
 }
 .site-header .navbar {
 min-height: 68px;
 }
}

/* E-RENOVAR v29.1 · Perfil corporativo / Nosotros */
.corporate-section {
 background: var(--surface);
}
.corporate-hero-grid {
 display: grid;
 grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
 gap: clamp(28px, 5vw, 72px);
 align-items: stretch;
}
.corporate-hero-grid > div:first-child {
 align-self: center;
}
.corporate-section h2 {
 font-family: Montserrat, sans-serif;
 font-weight: 800;
 color: var(--deep);
 font-size: clamp(2.2rem, 4.5vw, 4.5rem);
 line-height: 1.02;
 letter-spacing: -0.035em;
 margin: 0 0 20px;
}
.corporate-lead {
 max-width: 900px;
 color: var(--muted);
 font-size: clamp(1.05rem, 1.6vw, 1.25rem);
 line-height: 1.75;
 margin: 0 0 28px;
}
.corporate-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
}
.corporate-facts {
 display: flex;
 flex-direction: column;
 gap: 10px;
 background: var(--soft);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 padding: clamp(20px, 3vw, 30px);
 box-shadow: var(--shadow);
}
.corporate-fact {
 display: flex;
 flex-direction: column;
 gap: 5px;
 padding: 14px 0;
 border-bottom: 1px solid var(--line);
 min-width: 0;
}
.corporate-fact:first-child {
 padding-top: 0;
}
.corporate-fact:last-child {
 padding-bottom: 0;
 border-bottom: 0;
}
.corporate-fact span {
 display: flex;
 align-items: center;
 gap: 9px;
 color: var(--muted);
 font-size: 0.75rem;
 font-weight: 800;
 letter-spacing: 0.07em;
 text-transform: uppercase;
}
.corporate-fact span i {
 width: 18px;
 text-align: center;
 color: var(--teal);
 font-size: 0.9rem;
}
.corporate-fact strong,
.corporate-fact a {
 display: block;
 max-width: 100%;
 overflow-wrap: anywhere;
 word-break: break-word;
 color: var(--ink);
 font-size: 1rem;
 font-weight: 700;
 line-height: 1.45;
}
.corporate-fact a {
 text-decoration: none;
}
.corporate-fact a:hover {
 color: var(--teal);
}
.corporate-profile-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 18px;
}
.corporate-card {
 height: 100%;
 padding: 28px;
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: 0 10px 30px rgba(20, 50, 80, 0.04);
}
.corporate-card-wide {
 grid-column: 1/-1;
}
.corporate-card p {
 color: var(--muted);
 line-height: 1.75;
 margin: 12px 0 0;
}
.corporate-card ul {
 margin: 14px 0 0;
 padding-left: 1.15rem;
 color: var(--muted);
}
.corporate-card li {
 padding: 4px 0;
 line-height: 1.6;
}
.corporate-card .directory-label {
 display: inline-flex;
 align-items: center;
 color: var(--teal);
 font-size: 0.72rem;
 font-weight: 800;
 letter-spacing: 0.1em;
 text-transform: uppercase;
}
@media (max-width: 991px) {
 .corporate-hero-grid {
 grid-template-columns: 1fr;
 }
 .corporate-facts {
 margin-top: 4px;
 }
 .corporate-profile-grid {
 grid-template-columns: 1fr;
 }
 .corporate-card-wide {
 grid-column: auto;
 }
}
@media (max-width: 575px) {
 .corporate-actions .btn {
 width: 100%;
 }
 .corporate-facts {
 padding: 20px;
 }
 .corporate-card {
 padding: 22px;
 }
 .corporate-section h2 {
 font-size: clamp(2.15rem, 12vw, 3.3rem);
 }
}

/* ==========================================================
 E-RENOVAR v29.2 · Tema coherente + barra superior
 La cabecera y el hero forman parte del mismo sistema visual
 y responden a claro / oscuro / automático.
 ========================================================== */
:root {
 --chrome-bg: #ffffff;
 --chrome-text: #122033;
 --chrome-border: #dfe6ee;
 --hero-start: #f7fbff;
 --hero-end: #e9f5f2;
 --hero-text: #122033;
 --hero-muted: #526174;
 --hero-ring: rgba(15, 45, 91, 0.16);
 --hero-node-bg: rgba(255, 255, 255, 0.76);
 --hero-node-border: rgba(15, 45, 91, 0.14);
 --hero-node-text: #122033;
 --hero-proof-bg: rgba(15, 45, 91, 0.045);
 --hero-proof-border: rgba(15, 45, 91, 0.12);
 --hero-proof-text: #526174;
}

html[data-tema="light"] {
 --chrome-bg: #ffffff;
 --chrome-text: #122033;
 --chrome-border: #dfe6ee;
 --hero-start: #f7fbff;
 --hero-end: #e9f5f2;
 --hero-text: #122033;
 --hero-muted: #526174;
 --hero-ring: rgba(15, 45, 91, 0.16);
 --hero-node-bg: rgba(255, 255, 255, 0.78);
 --hero-node-border: rgba(15, 45, 91, 0.14);
 --hero-node-text: #122033;
 --hero-proof-bg: rgba(15, 45, 91, 0.045);
 --hero-proof-border: rgba(15, 45, 91, 0.12);
 --hero-proof-text: #526174;
}

html[data-tema="dark"] {
 --chrome-bg: #0f2d5b;
 --chrome-text: #ffffff;
 --chrome-border: rgba(255, 255, 255, 0.14);
 --hero-start: #0f2d5b;
 --hero-end: #071a38;
 --hero-text: #ffffff;
 --hero-muted: rgba(255, 255, 255, 0.78);
 --hero-ring: rgba(255, 255, 255, 0.2);
 --hero-node-bg: rgba(255, 255, 255, 0.06);
 --hero-node-border: rgba(255, 255, 255, 0.18);
 --hero-node-text: #ffffff;
 --hero-proof-bg: rgba(255, 255, 255, 0.045);
 --hero-proof-border: rgba(255, 255, 255, 0.13);
 --hero-proof-text: rgba(255, 255, 255, 0.7);
}

html[data-tema="auto"] {
 --chrome-bg: #ffffff;
 --chrome-text: #122033;
 --chrome-border: #dfe6ee;
 --hero-start: #f7fbff;
 --hero-end: #e9f5f2;
 --hero-text: #122033;
 --hero-muted: #526174;
 --hero-ring: rgba(15, 45, 91, 0.16);
 --hero-node-bg: rgba(255, 255, 255, 0.78);
 --hero-node-border: rgba(15, 45, 91, 0.14);
 --hero-node-text: #122033;
 --hero-proof-bg: rgba(15, 45, 91, 0.045);
 --hero-proof-border: rgba(15, 45, 91, 0.12);
 --hero-proof-text: #526174;
}

@media (prefers-color-scheme: dark) {
 html[data-tema="auto"] {
 --chrome-bg: #0f2d5b;
 --chrome-text: #ffffff;
 --chrome-border: rgba(255, 255, 255, 0.14);
 --hero-start: #0f2d5b;
 --hero-end: #071a38;
 --hero-text: #ffffff;
 --hero-muted: rgba(255, 255, 255, 0.78);
 --hero-ring: rgba(255, 255, 255, 0.2);
 --hero-node-bg: rgba(255, 255, 255, 0.06);
 --hero-node-border: rgba(255, 255, 255, 0.18);
 --hero-node-text: #ffffff;
 --hero-proof-bg: rgba(255, 255, 255, 0.045);
 --hero-proof-border: rgba(255, 255, 255, 0.13);
 --hero-proof-text: rgba(255, 255, 255, 0.7);
 }
}

/* Barra superior: una sola superficie, sin solapamientos */
.site-header {
 background: var(--chrome-bg) !important;
 color: var(--chrome-text) !important;
 border-bottom: 1px solid var(--chrome-border) !important;
 box-shadow: 0 4px 18px rgba(15, 45, 91, 0.08);
 backdrop-filter: blur(14px);
}
.site-header .navbar {
 min-height: 72px;
 padding-top: 0.45rem;
 padding-bottom: 0.45rem;
}
.site-header .container-fluid {
 min-width: 0;
 gap: 1rem;
}
.site-header .navbar-brand.brand-logo {
 flex: 0 1 230px;
 min-width: 185px;
 max-width: 230px;
 margin-right: 0.25rem;
}
/*
.site-header .brand-logo-img {
 height: 48px;
 max-width: 230px;
 width: auto;
}
*/
.site-header #mainNav {
 min-width: 0;
 flex: 1 1 auto;
}
.site-header .navbar-nav {
 min-width: 0;
 width: 100%;
 justify-content: center;
 gap: 0 !important;
}
.site-header .navbar-nav .nav-item {
 min-width: 0;
}
.site-header .navbar-nav .nav-link {
 color: var(--chrome-text) !important;
 font-size: 0.78rem;
 font-weight: 700;
 padding: 0.58rem 0.42rem;
 border-radius: 9px;
 white-space: nowrap;
}
.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link:focus-visible {
 color: var(--teal) !important;
 background: color-mix(in srgb, var(--teal), transparent 93%);
}
.site-header .navbar-nav .nav-link i {
 font-size: 0.72rem;
}
.site-header .dropdown-menu {
 background: var(--surface);
 border-color: var(--line);
 box-shadow: 0 18px 45px rgba(15, 45, 91, 0.16);
}
.site-header .dropdown-item {
 color: var(--ink);
}
.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus {
 color: var(--teal);
 background: color-mix(in srgb, var(--teal), transparent 90%);
}
.site-header .header-cta {
 white-space: nowrap;
 font-size: 0.78rem;
 padding: 0.58rem 0.8rem;
}
.site-header .utility-link {
 min-width: 36px;
 width: 36px;
 height: 36px;
 border-color: color-mix(in srgb, var(--chrome-text), transparent 78%);
 background: color-mix(in srgb, var(--chrome-text), transparent 94%);
 color: var(--chrome-text);
}
.site-header .utility-link:hover {
 background: color-mix(in srgb, var(--teal), transparent 88%);
 color: var(--teal);
 border-color: var(--teal);
}
.site-header .navbar-toggler {
 border-color: color-mix(in srgb, var(--chrome-text), transparent 72%);
 padding: 0.35rem 0.5rem;
}
.site-header .navbar-toggler-icon {
 filter: none;
}
html[data-tema="dark"] .site-header .navbar-toggler-icon,
html[data-tema="auto"] .site-header .navbar-toggler-icon {
 filter: brightness(0) invert(1);
}

/* Hero: cambia realmente de superficie al cambiar el tema */
.hero,
.hero-v24 {
 background: radial-gradient(
 circle at 78% 42%,
 rgba(0, 168, 132, 0.14),
 transparent 28%
 ),
 radial-gradient(
 circle at 18% 18%,
 rgba(0, 119, 230, 0.1),
 transparent 26%
 ),
 linear-gradient(
 135deg,
 var(--hero-start),
 var(--hero-end) 68%,
 var(--hero-start)
 ) !important;
 color: var(--hero-text) !important;
}
.hero-v24 .lead {
 color: var(--hero-muted) !important;
}
.hero-v24 .eyebrow {
 color: var(--teal) !important;
}
.hero-v24 h1,
.hero-v24 h2,
.hero-v24 h3,
.hero-v24 h4,
.hero-v24 h5,
.hero-v24 h6 {
 color: var(--hero-text) !important;
}
.hero-proof-row span {
 border-color: var(--hero-proof-border);
 background: var(--hero-proof-bg);
 color: var(--hero-proof-text);
}
.hero-proof-row b {
 color: var(--hero-text);
}
.hero-orbit-v24 .orbit-ring {
 border-color: var(--hero-ring);
}
.hero-v24 .orbit-node {
 background: var(--hero-node-bg);
 border-color: var(--hero-node-border);
 color: var(--hero-node-text);
 box-shadow: 0 10px 28px rgba(15, 45, 91, 0.06);
}
.hero-v24 .orbit-node i {
 color: var(--teal);
}
.hero-v24 .btn-outline-light {
 color: var(--hero-text) !important;
 border-color: color-mix(
 in srgb,
 var(--hero-text),
 transparent 35%
 ) !important;
}
.hero-v24 .btn-outline-light:hover,
.hero-v24 .btn-outline-light:focus-visible {
 color: var(--chrome-bg) !important;
 background: var(--hero-text) !important;
 border-color: var(--hero-text) !important;
}
html[data-tema="dark"] .hero-v24 .btn-outline-light,
html[data-tema="auto"] .hero-v24 .btn-outline-light {
 color: #fff !important;
 border-color: rgba(255, 255, 255, 0.65) !important;
}
html[data-tema="dark"] .hero-v24 .btn-outline-light:hover,
html[data-tema="dark"] .hero-v24 .btn-outline-light:focus-visible,
html[data-tema="auto"] .hero-v24 .btn-outline-light:hover,
html[data-tema="auto"] .hero-v24 .btn-outline-light:focus-visible {
 color: #0f2d5b !important;
 background: #fff !important;
 border-color: #fff !important;
}

/* En claro el isotipo usa la versión preparada para fondos claros. */
html[data-tema="light"] .brand-logo-light,
html[data-tema="auto"] .brand-logo-light {
 display: block !important;
}
html[data-tema="light"] .brand-logo-dark,
html[data-tema="auto"] .brand-logo-dark {
 display: none !important;
}
@media (prefers-color-scheme: dark) {
 html[data-tema="auto"] .brand-logo-light {
 display: none !important;
 }
 html[data-tema="auto"] .brand-logo-dark {
 display: block !important;
 }
}

/* El header deja de competir con el contenido cuando el ancho se reduce. */
@media (max-width: 1399.98px) {
 .site-header .navbar-brand.brand-logo {
 flex-basis: 205px;
 min-width: 170px;
 max-width: 205px;
 }
 .site-header .brand-logo-img {
 max-width: 205px;
 height: 45px;
 }
 .site-header .navbar-nav .nav-link {
 font-size: 0.74rem;
 padding-left: 0.3rem;
 padding-right: 0.3rem;
 }
 .site-header .navbar-nav .nav-link i {
 display: none;
 }
 .site-header .header-cta {
 padding-left: 0.65rem;
 padding-right: 0.65rem;
 }
}
@media (max-width: 1199.98px) {
 .site-header .container-fluid {
 gap: 0.55rem;
 }
 .site-header .navbar-brand.brand-logo {
 flex-basis: 185px;
 min-width: 155px;
 max-width: 185px;
 }
 .site-header .brand-logo-img {
 max-width: 185px;
 height: 42px;
 }
 .site-header .navbar-nav .nav-link {
 font-size: 0.7rem;
 padding-left: 0.22rem;
 padding-right: 0.22rem;
 }
 .site-header .header-cta {
 font-size: 0.7rem;
 padding-left: 0.55rem;
 padding-right: 0.55rem;
 }
}
@media (max-width: 991.98px) {
 .site-header .navbar {
 min-height: 68px;
 }
 .site-header .navbar-brand.brand-logo {
 flex: 0 1 auto;
 min-width: 0;
 max-width: 230px;
 }
 .site-header .brand-logo-img {
 height: 46px;
 max-width: 230px;
 }
 .site-header .navbar-collapse {
 padding-top: 0.8rem;
 }
 .site-header .navbar-nav {
 width: auto;
 align-items: stretch !important;
 }
 .site-header .navbar-nav .nav-link {
 font-size: 1rem;
 padding: 0.75rem 0.7rem;
 }
 .site-header .navbar-nav .nav-link i {
 display: inline-block;
 }
 .site-header .header-cta {
 font-size: 0.85rem;
 }
}
@media (max-width: 575.98px) {
 .site-header .container-fluid {
 padding-left: 12px !important;
 padding-right: 12px !important;
 }
 .site-header .brand-logo-img {
 height: 42px;
 max-width: 205px;
 }
 .site-header .utility-link {
 width: 34px;
 height: 34px;
 min-width: 34px;
 }
 .site-header .header-cta {
 display: none;
 }
}

/* v29.2 · Malla orbital coherente con el tema */
.hero-v24 .orbit-grid {
 background: radial-gradient(
 circle,
 var(--hero-ring) 1px,
 transparent 1.5px
 );
 opacity: 0.7;
}
.cookie-consent {
 position: fixed;
 left: 1rem;
 right: 1rem;
 bottom: 1rem;
 z-index: 1080;
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 1rem;
 padding: 1rem 1.25rem;
 background: var(--surface, #fff);
 color: var(--text, #132b4f);
 border: 1px solid var(--border, rgba(15, 45, 91, 0.15));
 border-radius: 1rem;
 box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.18);
}
.cookie-consent p {
 max-width: 70ch;
}
.news-media {
 margin: 1.5rem 0;
}
.news-media figcaption {
 font-size: 0.85rem;
 color: var(--bs-secondary-color);
 margin-top: 0.5rem;
}
.prose-content iframe {
 max-width: 100%;
 border: 0;
 border-radius: 1rem;
}
.news-content p,
.news-content li {
 line-height: 1.8;
}
.news-content table {
 width: 100%;
 margin: 1rem 0;
 border-collapse: collapse;
}
.news-content th,
.news-content td {
 border: 1px solid var(--border, rgba(15, 45, 91, 0.15));
 padding: 0.65rem;
}
.news-card .news-thumb {
 height: 210px;
 object-fit: cover;
}
@media (max-width: 767.98px) {
 .cookie-consent {
 flex-direction: column;
 align-items: stretch;
 bottom: 0.5rem;
 left: 0.5rem;
 right: 0.5rem;
 }
 .cookie-consent .d-flex {
 width: 100%;
 }
 .cookie-consent .btn {
 flex: 1;
 }
}

/* v30.3 · Footer al pie cuando el contenido no ocupa el alto de la ventana */
main#contenido {
 flex: 1 0 auto;
 width: 100%;
}
.footer {
 flex-shrink: 0;
}

.password-toggle {
 min-width: 46px;
}
.password-toggle i {
 pointer-events: none;
}

/* v32 — selector de idioma compacto y resultados de encuestas */
.language-switcher {
 display: inline-flex;
 align-items: center;
}
.language-switcher-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 5px;
 width: 38px;
 height: 34px;
 padding: 0;
 border: 1px solid var(--line);
 border-radius: 10px;
 background: var(--surface);
 color: var(--ink);
 cursor: pointer;
 transition: 0.18s ease;
}
.language-switcher-btn:hover,
.language-switcher-btn:focus-visible {
 border-color: var(--teal);
 color: var(--teal);
 transform: translateY(-1px);
}
.language-switcher-btn img {
 display: block;
 width: 18px;
 height: 14px;
 object-fit: cover;
 border-radius: 2px;
 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.language-switcher-btn i {
 font-size: 0.58rem;
}
html[data-tema="dark"] .language-switcher-btn {
 background: var(--card);
 border-color: rgba(255, 255, 255, 0.18);
 color: var(--ink);
}
.survey-summary {
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 min-width: 90px;
}
.survey-summary strong {
 font: 800 1.45rem Montserrat;
 color: var(--teal);
}
.survey-summary span {
 font-size: 0.72rem;
 color: var(--muted);
}
.survey-result .progress {
 height: 9px;
 border-radius: 99px;
 background: var(--soft);
 overflow: hidden;
}
.survey-result .progress-bar {
 background: var(--teal);
 border-radius: 99px;
}
.news-media {
 margin-top: 1.5rem;
}
.news-media figcaption {
 font-size: 0.78rem;
 color: var(--muted);
 margin-top: 0.5rem;
}
.news-media-pdf {
 background: var(--soft);
}

/* v33 - selector de idioma y noticias */
.language-switcher {
 display: inline-flex;
 align-items: center;
}
.language-switcher-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 5px;
 width: 42px;
 height: 38px;
 padding: 0;
 border: 1px solid var(--line);
 border-radius: 10px;
 background: var(--surface);
 color: var(--ink);
 box-shadow: 0 2px 8px rgba(15, 45, 91, 0.06);
 cursor: pointer;
}
.language-switcher-btn:hover {
 border-color: var(--teal);
 background: color-mix(in srgb, var(--teal), transparent 94%);
}
.language-switcher-btn img {
 display: block;
 width: 18px;
 height: 14px;
 object-fit: cover;
 border-radius: 2px;
}
.language-switcher-btn i {
 font-size: 0.65rem;
 color: var(--muted);
}
.news-thumb {
 display: block;
 aspect-ratio: 16/9;
 object-fit: cover;
 background: var(--soft);
}
.news-card {
 overflow: hidden;
}
.news-card .news-thumb {
 margin: -0.25rem -0.25rem 1rem;
 width: calc(100% + 0.5rem);
 max-width: none;
}
.news-content {
 font-size: 1.04rem;
}
.news-media-image img {
 display: block;
 width: 100%;
 height: auto;
}
.news-media-pdf,
.news-media-audio {
 background: var(--soft);
}

/* ==========================================================
 E-RENOVAR · NEWSROOM v1
 Magazine editorial system for index + article detail.
 Uses the portal visual variables; no module-specific palette.
 ========================================================== */
.news-module {
 background: var(--surface);
 color: var(--ink);
}
.news-index-hero {
 position: relative;
 isolation: isolate;
 overflow: hidden;
 background: linear-gradient(115deg, var(--deep), #071a38);
 color: #fff;
 background-image: linear-gradient(
 90deg,
 rgba(7, 26, 56, 0.97) 0%,
 rgba(7, 26, 56, 0.82) 42%,
 rgba(7, 26, 56, 0.38) 100%
 ),
 var(--news-index-image);
 background-position: center;
 background-size: cover;
}
.news-index-hero-inner {
 min-height: 320px;
 padding-top: 74px;
 padding-bottom: 68px;
 display: grid;
 grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
 gap: 45px;
 align-items: end;
}
.news-index-hero h1 {
 font: 800 clamp(2.5rem, 5vw, 4.7rem) / 1.02 Montserrat;
 margin: 0 0 18px;
 letter-spacing: -0.04em;
 max-width: 900px;
 color: #fff;
}
.news-index-hero p {
 max-width: 760px;
 margin: 0;
 color: rgba(255, 255, 255, 0.82);
 font-size: 1.05rem;
 line-height: 1.7;
}
.news-eyebrow-light {
 color: #5fe0c0 !important;
}
.news-search {
 display: flex;
 align-items: center;
 background: rgba(255, 255, 255, 0.1);
 border: 1px solid rgba(255, 255, 255, 0.24);
 border-radius: 13px;
 padding: 4px;
 backdrop-filter: blur(12px);
}
.news-search input {
 min-width: 0;
 flex: 1;
 border: 0;
 background: transparent;
 color: #fff;
 padding: 11px 13px;
 outline: 0;
}
.news-search input::placeholder {
 color: rgba(255, 255, 255, 0.7);
}
.news-search button {
 width: 42px;
 height: 42px;
 border: 0;
 border-radius: 10px;
 background: var(--teal);
 color: #fff;
}
.news-category-bar {
 display: flex;
 gap: 8px;
 overflow: auto;
 padding-bottom: 18px;
 scrollbar-width: thin;
}
.news-filter {
 border: 1px solid rgba(255, 255, 255, 0.2);
 background: rgba(255, 255, 255, 0.08);
 color: #fff;
 border-radius: 999px;
 padding: 8px 16px;
 font-size: 0.75rem;
 font-weight: 800;
 white-space: nowrap;
}
.news-filter:hover,
.news-filter.is-active {
 background: #fff;
 color: var(--deep);
 border-color: #fff;
}
.news-index-body {
 padding-top: 52px;
 padding-bottom: 90px;
}
.news-section-heading {
 display: flex;
 align-items: center;
 gap: 15px;
 margin-bottom: 20px;
}
.news-section-heading h2 {
 margin: 0;
 font: 800 1.05rem Montserrat;
 text-transform: uppercase;
 letter-spacing: 0.07em;
 color: var(--heading);
}
.news-section-heading span {
 height: 1px;
 background: var(--line);
 flex: 1;
}
.news-featured-grid {
 display: grid;
 grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.85fr);
 gap: 22px;
}
.news-featured-main,
.news-side-feature,
.news-trend-card,
.news-more-item {
 background: var(--card);
 border: 1px solid var(--line);
 min-width: 0;
}
.news-featured-main {
 border-radius: 18px;
 overflow: hidden;
 box-shadow: var(--shadow);
}
.news-featured-image {
 display: block;
 position: relative;
 aspect-ratio: 16/8.8;
 overflow: hidden;
 background: var(--soft);
}
.news-featured-image img,
.news-side-feature-image img,
.news-trend-image img,
.news-more-thumb img,
.news-highlight-card > img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}
.news-featured-image img,
.news-side-feature-image img,
.news-trend-image img,
.news-more-thumb img {
 transition: transform 0.35s ease;
}
.news-featured-main:hover img,
.news-side-feature:hover img,
.news-trend-card:hover img,
.news-more-item:hover img {
 transform: scale(1.035);
}
.news-featured-badge {
 position: absolute;
 left: 18px;
 bottom: 18px;
 background: var(--teal);
 color: #fff;
 padding: 6px 10px;
 border-radius: 6px;
 font-size: 0.68rem;
 font-weight: 800;
 text-transform: uppercase;
}
.news-featured-copy {
 padding: 22px;
}
.news-card-meta {
 display: flex;
 gap: 14px;
 flex-wrap: wrap;
 color: var(--muted);
 font-size: 0.72rem;
}
.news-featured-copy h3 {
 margin: 10px 0 8px;
 font: 800 clamp(1.55rem, 3vw, 2.35rem) / 1.08 Montserrat;
 letter-spacing: -0.03em;
}
.news-featured-copy h3 a,
.news-side-feature h3 a,
.news-trend-card h3 a,
.news-more-item h3 a {
 color: var(--heading);
 text-decoration: none;
}
.news-featured-copy p,
.news-side-feature p,
.news-trend-card p,
.news-more-item p {
 color: var(--muted);
 line-height: 1.65;
 margin: 0;
}
.news-featured-side {
 display: grid;
 gap: 16px;
}
.news-side-feature {
 display: grid;
 grid-template-columns: 150px minmax(0, 1fr);
 gap: 16px;
 border-radius: 16px;
 padding: 10px;
}
.news-side-feature-image {
 display: block;
 aspect-ratio: 1/1;
 overflow: hidden;
 border-radius: 11px;
 background: var(--soft);
}
.news-side-feature h3 {
 font-size: 1rem;
 line-height: 1.25;
 margin: 5px 0 6px;
}
.news-side-feature p {
 font-size: 0.78rem;
}
.news-card-category {
 display: inline-block;
 color: var(--teal);
 font-size: 0.66rem;
 font-weight: 900;
 text-transform: uppercase;
 letter-spacing: 0.05em;
}
.news-trending-section {
 padding-top: 48px;
}
.news-trending-grid {
 display: grid;
 grid-template-columns: repeat(5, minmax(0, 1fr));
 gap: 14px;
}
.news-trend-card {
 border-radius: 14px;
 overflow: hidden;
 padding-bottom: 15px;
}
.news-trend-image {
 display: block;
 position: relative;
 aspect-ratio: 16/9;
 background: var(--soft);
 overflow: hidden;
 margin-bottom: 12px;
}
.news-trend-image b {
 position: absolute;
 top: 9px;
 left: 9px;
 display: grid;
 place-items: center;
 width: 25px;
 height: 25px;
 border-radius: 50%;
 background: var(--deep);
 color: #fff;
 font-size: 0.72rem;
}
.news-trend-card .news-card-category,
.news-trend-card h3,
.news-trend-card p {
 margin-left: 13px;
 margin-right: 13px;
}
.news-trend-card h3 {
 font: 700 0.93rem/1.3 Montserrat;
 margin-top: 6px;
 margin-bottom: 7px;
}
.news-trend-card p {
 font-size: 0.75rem;
}
.news-more-section {
 padding-top: 52px;
}
.news-more-layout {
 display: grid;
 grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
 gap: 24px;
 align-items: start;
}
.news-more-list {
 display: grid;
 gap: 12px;
}
.news-more-item {
 display: grid;
 grid-template-columns: 145px minmax(0, 1fr);
 gap: 17px;
 border-radius: 13px;
 padding: 10px;
}
.news-more-thumb {
 display: block;
 aspect-ratio: 4/3;
 border-radius: 9px;
 overflow: hidden;
 background: var(--soft);
}
.news-more-item h3 {
 font: 700 1rem/1.3 Montserrat;
 margin: 5px 0 6px;
}
.news-more-item p {
 font-size: 0.8rem;
 margin-bottom: 7px;
}
.news-highlight-card {
 position: sticky;
 top: 95px;
 min-height: 430px;
 border-radius: 17px;
 overflow: hidden;
 background: var(--deep);
 color: #fff;
 box-shadow: var(--shadow);
}
.news-highlight-card > img {
 position: absolute;
 inset: 0;
 opacity: 0.72;
}
.news-highlight-overlay {
 position: absolute;
 inset: auto 0 0;
 padding: 28px;
 background: linear-gradient(
 0deg,
 rgba(7, 26, 56, 0.98),
 rgba(7, 26, 56, 0.06)
 );
 min-height: 62%;
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
}
.news-highlight-overlay span {
 font-size: 0.67rem;
 font-weight: 900;
 letter-spacing: 0.1em;
 color: #5fe0c0;
}
.news-highlight-overlay h3 {
 color: #fff;
 font: 800 clamp(1.45rem, 3vw, 2.25rem) / 1.08 Montserrat;
 margin: 8px 0 18px;
}
.news-filter-empty {
 margin-top: 20px;
 padding: 35px;
 border: 1px dashed var(--line);
 border-radius: 15px;
 text-align: center;
 color: var(--muted);
}
.news-detail-hero {
 position: relative;
 isolation: isolate;
 overflow: hidden;
 min-height: 570px;
 color: #fff;
 background: var(--deep);
 background-image: linear-gradient(
 90deg,
 rgba(4, 15, 31, 0.9) 0%,
 rgba(4, 15, 31, 0.56) 55%,
 rgba(4, 15, 31, 0.22) 100%
 ),
 var(--news-hero-image);
 background-position: center;
 background-size: cover;
}
.news-detail-hero-inner {
 min-height: 570px;
 display: grid;
 grid-template-columns: minmax(0, 1fr) 300px;
 gap: 35px;
 align-items: end;
 padding-top: 70px;
 padding-bottom: 54px;
}
.news-detail-hero-copy {
 max-width: 850px;
}
.news-meta {
 display: flex;
 gap: 13px;
 align-items: center;
 flex-wrap: wrap;
 font-size: 0.72rem;
}
.news-meta-light {
 color: rgba(255, 255, 255, 0.85);
}
.news-category-pill {
 display: inline-flex;
 padding: 6px 10px;
 border-radius: 5px;
 background: var(--teal);
 color: #fff;
 font-weight: 900;
 text-transform: uppercase;
 letter-spacing: 0.04em;
}
.news-detail-hero h1 {
 font: 800 clamp(2.7rem, 5.8vw, 5.3rem) / 0.98 Montserrat;
 color: #fff;
 letter-spacing: -0.045em;
 margin: 18px 0 18px;
 max-width: 920px;
}
.news-detail-hero-copy > p {
 font-size: 1.12rem;
 line-height: 1.65;
 max-width: 780px;
 margin: 0;
 color: rgba(255, 255, 255, 0.86);
}
.news-hero-related {
 display: grid;
 gap: 9px;
}
.news-related-mini {
 display: grid;
 grid-template-columns: 58px minmax(0, 1fr);
 align-items: center;
 gap: 10px;
 padding: 7px;
 border-radius: 10px;
 background: rgba(7, 26, 56, 0.78);
 color: #fff;
 text-decoration: none;
 border: 1px solid rgba(255, 255, 255, 0.1);
 backdrop-filter: blur(8px);
}
.news-related-mini-image {
 width: 58px;
 height: 47px;
 border-radius: 6px;
 overflow: hidden;
 background: rgba(255, 255, 255, 0.1);
}
.news-related-mini-image img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.news-related-mini > span:last-child {
 font-size: 0.74rem;
 font-weight: 700;
 line-height: 1.3;
}
.news-detail-toolbar {
 min-height: 78px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 18px;
 border-bottom: 1px solid var(--line);
}
.news-author {
 display: flex;
 align-items: center;
 gap: 11px;
}
.news-author-avatar {
 width: 43px;
 height: 43px;
 border-radius: 50%;
 display: grid;
 place-items: center;
 background: var(--deep);
 color: #fff;
}
.news-author strong,
.news-author small {
 display: block;
}
.news-author strong {
 font-size: 0.82rem;
}
.news-author small {
 font-size: 0.72rem;
 color: var(--muted);
}
.news-actions {
 display: flex;
 gap: 7px;
 flex-wrap: wrap;
}
.news-action {
 display: inline-flex;
 align-items: center;
 gap: 7px;
 border: 1px solid var(--line);
 background: var(--card);
 color: var(--ink);
 border-radius: 8px;
 padding: 8px 11px;
 font-size: 0.72rem;
 font-weight: 800;
 text-decoration: none;
}
.news-action:hover {
 border-color: var(--teal);
 color: var(--teal);
}
.news-action-primary {
 background: var(--teal);
 border-color: var(--teal);
 color: #fff;
}
.news-action-primary:hover {
 color: #fff;
 background: #008f70;
}
.news-detail-layout {
 display: grid;
 grid-template-columns: minmax(0, 1fr) 310px;
 gap: 42px;
 padding: 48px 0 85px;
}
.news-detail-main {
 min-width: 0;
}
.news-prose {
 font-size: 1.06rem;
 color: var(--ink);
}
.news-prose p,
.news-prose li {
 line-height: 1.9;
}
.news-prose h2,
.news-prose h3,
.news-prose h4 {
 font-family: Montserrat;
 color: var(--heading);
 margin-top: 2.1rem;
}
.news-prose img {
 max-width: 100%;
 height: auto;
 border-radius: 14px;
}
.news-prose blockquote {
 border-left: 4px solid var(--teal);
 padding: 15px 20px;
 background: var(--soft);
 border-radius: 0 12px 12px 0;
 color: var(--muted);
}
.news-sidebar-card {
 background: var(--card);
 border: 1px solid var(--line);
 border-radius: 15px;
 padding: 18px;
 margin-bottom: 14px;
}
.news-sidebar-title {
 font: 800 0.8rem Montserrat;
 text-transform: uppercase;
 letter-spacing: 0.07em;
 color: var(--heading);
 padding-bottom: 13px;
 border-bottom: 1px solid var(--line);
 margin-bottom: 9px;
}
.news-detail-sidebar {
 position: relative;
}
.news-related-list {
 display: grid;
}
.news-related-row {
 display: grid;
 grid-template-columns: 66px minmax(0, 1fr);
 gap: 10px;
 padding: 10px 0;
 border-bottom: 1px solid var(--line);
 text-decoration: none;
 color: var(--ink);
}
.news-related-row:last-child {
 border-bottom: 0;
}
.news-related-thumb {
 width: 66px;
 height: 53px;
 border-radius: 7px;
 overflow: hidden;
 background: var(--soft);
}
.news-related-thumb img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.news-related-row strong {
 display: block;
 font-size: 0.76rem;
 line-height: 1.3;
}
.news-related-row small {
 display: block;
 margin-top: 5px;
 color: var(--muted);
 font-size: 0.65rem;
}
.news-tags-card {
 display: flex;
 flex-wrap: wrap;
 gap: 7px;
}
.news-tags-card .news-sidebar-title {
 width: 100%;
}
.news-tag {
 background: var(--soft);
 border: 1px solid var(--line);
 border-radius: 999px;
 padding: 6px 9px;
 color: var(--muted);
 font-size: 0.68rem;
 font-weight: 800;
}
.news-gallery-block,
.news-media-block {
 margin-top: 45px;
}
.news-subheading {
 display: flex;
 align-items: center;
 gap: 12px;
 margin-bottom: 15px;
}
.news-subheading span {
 font: 800 0.82rem Montserrat;
 text-transform: uppercase;
 letter-spacing: 0.07em;
 color: var(--heading);
}
.news-subheading i {
 height: 1px;
 flex: 1;
 background: var(--line);
}
.news-gallery-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 10px;
}
.news-gallery-item {
 position: relative;
 display: block;
 aspect-ratio: 4/3;
 overflow: hidden;
 border-radius: 12px;
 background: var(--soft);
}
.news-gallery-item img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.3s ease;
}
.news-gallery-item:hover img {
 transform: scale(1.04);
}
.news-gallery-item span {
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 padding: 9px 10px;
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
 color: #fff;
 font-size: 0.67rem;
}
.news-media {
 margin: 18px 0;
}
.news-media-image img {
 width: 100%;
 border-radius: 13px;
}
.news-media figcaption {
 font-size: 0.72rem;
 color: var(--muted);
 margin-top: 6px;
}
.news-media-video video,
.news-media-video iframe {
 border-radius: 13px;
}
.news-media-pdf,
.news-media-audio {
 background: var(--soft) !important;
 border-color: var(--line) !important;
}
.news-empty-detail {
 min-height: 65vh;
 display: grid;
 place-items: center;
 text-align: center;
 align-content: center;
 padding: 80px 20px;
}
.news-empty-icon {
 width: 64px;
 height: 64px;
 display: grid;
 place-items: center;
 border-radius: 18px;
 background: var(--soft);
 color: var(--teal);
 font-size: 1.7rem;
 margin-bottom: 18px;
}
.news-empty-detail h1 {
 font: 800 2.2rem Montserrat;
 color: var(--heading);
 margin: 0 0 10px;
}
.news-empty-detail p {
 color: var(--muted);
 margin: 0 0 24px;
}
.news-action.is-copied {
 border-color: var(--teal);
 color: var(--teal);
}
html[data-tema="dark"] .news-side-feature,
html[data-tema="dark"] .news-trend-card,
html[data-tema="dark"] .news-more-item,
html[data-tema="dark"] .news-sidebar-card {
 background: var(--card);
}
@media (max-width: 991.98px) {
 .news-index-hero-inner {
 grid-template-columns: 1fr;
 min-height: 390px;
 }
 .news-search {
 max-width: 520px;
 }
 .news-featured-grid,
 .news-more-layout {
 grid-template-columns: 1fr;
 }
 .news-trending-grid {
 grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 .news-highlight-card {
 position: relative;
 min-height: 330px;
 }
 .news-detail-hero-inner {
 grid-template-columns: 1fr;
 min-height: 620px;
 }
 .news-hero-related {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 .news-detail-layout {
 grid-template-columns: 1fr;
 }
 .news-detail-sidebar {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 14px;
 }
 .news-sidebar-card {
 margin-bottom: 0;
 }
 .news-tags-card {
 align-content: start;
 }
}
@media (max-width: 767.98px) {
 .news-index-hero-inner {
 padding-top: 54px;
 padding-bottom: 44px;
 }
 .news-index-body {
 padding-top: 36px;
 }
 .news-featured-side {
 gap: 10px;
 }
 .news-side-feature {
 grid-template-columns: 105px minmax(0, 1fr);
 }
 .news-trending-grid {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 .news-detail-hero {
 min-height: 600px;
 }
 .news-detail-hero-inner {
 min-height: 600px;
 padding-top: 50px;
 padding-bottom: 32px;
 }
 .news-detail-hero h1 {
 font-size: clamp(2.35rem, 10vw, 4rem);
 }
 .news-detail-toolbar {
 align-items: flex-start;
 flex-direction: column;
 padding: 17px 0;
 }
 .news-actions {
 width: 100%;
 }
 .news-action {
 flex: 1;
 justify-content: center;
 }
 .news-detail-layout {
 padding-top: 32px;
 }
 .news-detail-sidebar {
 grid-template-columns: 1fr;
 }
 .news-gallery-grid {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 .news-more-item {
 grid-template-columns: 115px minmax(0, 1fr);
 }
}
@media (max-width: 480px) {
 .news-trending-grid {
 grid-template-columns: 1fr;
 }
 .news-side-feature {
 grid-template-columns: 90px minmax(0, 1fr);
 }
 .news-side-feature p {
 display: none;
 }
 .news-featured-copy {
 padding: 17px;
 }
 .news-more-item {
 grid-template-columns: 95px minmax(0, 1fr);
 }
 .news-more-item p {
 display: none;
 }
 .news-highlight-card {
 min-height: 300px;
 }
 .news-hero-related {
 grid-template-columns: 1fr;
 }
 .news-gallery-grid {
 grid-template-columns: 1fr 1fr;
 }
 .news-action {
 font-size: 0.67rem;
 padding: 8px 7px;
 }
}

/* v37 · Mi cuenta: perfil persistente y guardado inmediato */
.account-page .account-head {
 margin-bottom: 24px;
}
.account-statusbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 24px;
 padding: 14px 18px;
 margin-bottom: 22px;
 border: 1px solid var(--line);
 border-radius: 14px;
 background: var(--card);
 box-shadow: 0 5px 20px rgba(15, 45, 91, 0.05);
}
.account-statusbar > div:first-child {
 display: flex;
 flex-direction: column;
 gap: 3px;
 min-width: 0;
}
.account-statusbar strong {
 font-size: 0.78rem;
 color: var(--muted);
 font-weight: 700;
}
.account-statusbar strong.is-saving {
 color: var(--teal);
}
.account-statusbar strong.is-saved {
 color: var(--teal);
}
.account-statusbar strong.is-error {
 color: #dc3545;
}
.account-statusbar span {
 font-size: 0.68rem;
 color: var(--muted);
}
.account-progress {
 display: grid;
 grid-template-columns: auto minmax(110px, 180px) auto;
 align-items: center;
 gap: 9px;
 font-size: 0.68rem;
 color: var(--muted);
 min-width: 250px;
}
.account-progress .progress {
 height: 7px;
 background: var(--soft);
 border-radius: 999px;
}
.account-progress .progress-bar {
 background: var(--teal);
 border-radius: 999px;
 transition: width 0.35s ease;
}
.account-progress b {
 font-size: 0.72rem;
 color: var(--heading);
}
.account-card,
.account-side-card {
 border: 1px solid var(--line);
 background: var(--card);
 border-radius: 16px;
 box-shadow: 0 7px 25px rgba(15, 45, 91, 0.045);
}
.account-card {
 padding: 24px;
}
.account-card-head {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 20px;
}
.account-live-dot {
 width: 9px;
 height: 9px;
 border-radius: 50%;
 background: var(--teal);
 box-shadow: 0 0 0 5px color-mix(in srgb, var(--teal), transparent 84%);
 margin-top: 8px;
 flex: none;
}
.account-page .form-control {
 min-height: 44px;
}
.account-page textarea.form-control {
 min-height: 110px;
 resize: vertical;
}
.account-readonly {
 background: var(--soft) !important;
}
.account-save-feedback {
 font-size: 0.78rem;
 font-weight: 700;
 color: var(--muted);
}
.account-save-feedback.is-success {
 color: var(--teal);
}
.account-save-feedback.is-error {
 color: #dc3545;
}
.account-side-card {
 padding: 20px;
}
.account-avatar {
 width: 52px;
 height: 52px;
 display: grid;
 place-items: center;
 border-radius: 14px;
 background: linear-gradient(135deg, var(--deep), var(--teal));
 color: #fff;
 margin-bottom: 15px;
}
.account-diagnostics .list-group-item {
 background: transparent;
 border-color: var(--line);
}
html[data-tema="dark"] .account-statusbar,
html[data-tema="dark"] .account-card,
html[data-tema="dark"] .account-side-card {
 box-shadow: none;
}
.account-page [data-account-submit].is-loading {
 pointer-events: none;
 opacity: 0.7;
}
@media (max-width: 767.98px) {
 .account-statusbar {
 align-items: stretch;
 flex-direction: column;
 }
 .account-progress {
 min-width: 0;
 width: 100%;
 grid-template-columns: auto 1fr auto;
 }
 .account-card {
 padding: 18px;
 }
}

/* E-RENOVAR · Galería de Noticias: visor modal independiente de Bootstrap */
.news-gallery-modal {
 position: fixed;
 inset: 0;
 z-index: 1080;
 display: none;
 align-items: center;
 justify-content: center;
 padding: 16px;
 background: rgba(2, 9, 19, 0.86);
}
.news-gallery-modal.is-open {
 display: flex;
}
.news-gallery-modal-dialog {
 position: relative;
 width: min(1400px, 100%);
 height: min(94dvh, 920px);
 display: flex;
 flex-direction: column;
 background: #071a38;
 color: #fff;
 border: 1px solid rgba(255, 255, 255, 0.14);
 border-radius: 16px;
 overflow: hidden;
 box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}
.news-gallery-modal-header,
.news-gallery-modal-footer {
 flex: 0 0 auto;
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 12px 16px;
 border-color: rgba(255, 255, 255, 0.12);
}
.news-gallery-modal-header {
 justify-content: space-between;
 border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.news-gallery-modal-title-wrap {
 min-width: 0;
 flex: 1;
}
.news-gallery-modal-title {
 margin: 0;
 color: #fff;
 font-size: 0.95rem;
 font-weight: 700;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.news-gallery-modal-counter {
 display: block;
 color: rgba(255, 255, 255, 0.58);
 font-size: 0.68rem;
 font-weight: 800;
 letter-spacing: 0.05em;
 margin-bottom: 2px;
}
.news-gallery-modal-close {
 border: 0;
 background: transparent;
 color: #fff;
 font-size: 1.8rem;
 line-height: 1;
 padding: 2px 8px;
 cursor: pointer;
 opacity: 0.85;
}
.news-gallery-modal-close:hover,
.news-gallery-modal-close:focus-visible {
 opacity: 1;
 outline: 2px solid rgba(255, 255, 255, 0.55);
 outline-offset: 2px;
 border-radius: 6px;
}
.news-gallery-modal-body {
 position: relative;
 flex: 1 1 auto;
 min-height: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 12px 68px;
 background: #020913;
 overflow: hidden;
}
.news-gallery-stage {
 width: 100%;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: auto;
 overscroll-behavior: contain;
 touch-action: pan-y;
 outline: 0;
}
.news-gallery-viewer {
 display: block;
 max-width: 100%;
 max-height: 100%;
 width: auto;
 height: auto;
 object-fit: contain;
 user-select: none;
 -webkit-user-drag: none;
 transform-origin: center center;
 transition: transform 0.16s ease;
}
.news-gallery-nav {
 position: absolute;
 top: 50%;
 z-index: 2;
 transform: translateY(-50%);
 width: 46px;
 height: 46px;
 border: 1px solid rgba(255, 255, 255, 0.24);
 border-radius: 50%;
 background: rgba(0, 0, 0, 0.48);
 color: #fff;
 display: grid;
 place-items: center;
 cursor: pointer;
}
.news-gallery-nav:hover,
.news-gallery-nav:focus-visible {
 background: rgba(0, 0, 0, 0.78);
 outline: 2px solid rgba(255, 255, 255, 0.35);
 outline-offset: 2px;
}
.news-gallery-prev {
 left: 14px;
}
.news-gallery-next {
 right: 14px;
}
.news-gallery-nav[hidden] {
 display: none;
}
.news-gallery-modal-footer {
 justify-content: space-between;
 border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.news-gallery-actions {
 display: flex;
 align-items: center;
 gap: 6px;
 flex-wrap: wrap;
}
.news-gallery-action {
 min-width: 38px;
 min-height: 36px;
 border: 1px solid rgba(255, 255, 255, 0.25);
 border-radius: 7px;
 background: transparent;
 color: #fff;
 padding: 7px 10px;
 cursor: pointer;
 text-decoration: none;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 6px;
}
.news-gallery-action:hover,
.news-gallery-action:focus-visible {
 background: rgba(255, 255, 255, 0.12);
 color: #fff;
 outline: 2px solid rgba(255, 255, 255, 0.35);
 outline-offset: 2px;
}
.news-gallery-hint {
 font-size: 0.66rem;
 color: rgba(255, 255, 255, 0.58);
 text-align: right;
}
.news-gallery-modal.is-open .news-gallery-viewer {
 will-change: transform;
}
@media (max-width: 767.98px) {
 .news-gallery-modal {
 padding: 0;
 }
 .news-gallery-modal-dialog {
 width: 100%;
 height: 100dvh;
 border-radius: 0;
 border: 0;
 }
 .news-gallery-modal-body {
 padding: 8px 42px;
 }
 .news-gallery-modal-footer {
 padding: 8px 10px;
 }
 .news-gallery-hint {
 display: none;
 }
 .news-gallery-actions {
 width: 100%;
 justify-content: center;
 }
 .news-gallery-title-wrap {
 max-width: calc(100% - 44px);
 }
 .news-gallery-nav {
 width: 36px;
 height: 36px;
 }
 .news-gallery-prev {
 left: 6px;
 }
 .news-gallery-next {
 right: 6px;
 }
 .news-gallery-modal-header {
 padding: 9px 10px;
 }
 .news-gallery-modal-title {
 font-size: 0.82rem;
 }
}
@media (orientation: landscape) and (max-height: 600px) and (max-width: 991.98px) {
 .news-gallery-modal-header {
 padding: 6px 10px;
 }
 .news-gallery-modal-body {
 padding: 5px 48px;
 }
 .news-gallery-modal-footer {
 padding: 5px 10px;
 }
 .news-gallery-modal-dialog {
 height: 100dvh;
 }
}
@media (prefers-reduced-motion: reduce) {
 .news-gallery-viewer {
 transition: none;
 }
}

/* Noticias · visor modal unificado de video, audio y PDF */
.news-media-modal {
 position: fixed;
 inset: 0;
 z-index: 1090;
 display: none;
 align-items: center;
 justify-content: center;
 padding: clamp(8px, 2vw, 20px);
 background: rgba(2, 9, 19, 0.88);
}
.news-media-modal.is-open {
 display: flex;
}
.news-media-modal-dialog {
 position: relative;
 width: min(1400px, 100%);
 height: min(94dvh, 920px);
 display: flex;
 flex-direction: column;
 background: var(--deep, #071a38);
 color: #fff;
 border: 1px solid rgba(255, 255, 255, 0.14);
 border-radius: 16px;
 overflow: hidden;
 box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}
.news-media-modal-header,
.news-media-modal-footer {
 flex: 0 0 auto;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding: 12px 16px;
 border-color: rgba(255, 255, 255, 0.12);
 background: rgba(7, 26, 56, 0.96);
}
.news-media-modal-header {
 border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.news-media-modal-footer {
 border-top: 1px solid rgba(255, 255, 255, 0.12);
 justify-content: flex-end;
}
.news-media-modal-header h2 {
 margin: 2px 48px 0 0;
 color: #fff;
 font: 700 clamp(0.9rem, 2vw, 1.15rem) / 1.25 Montserrat, sans-serif;
 max-width: min(75vw, 900px);
 overflow-wrap: anywhere;
}
.news-media-modal-eyebrow {
 display: block;
 color: var(--teal, #00a884);
 font-size: 0.62rem;
 font-weight: 800;
 letter-spacing: 0.12em;
 text-transform: uppercase;
}
.news-media-modal-close {
 width: 42px;
 height: 42px;
 flex: 0 0 42px;
 border: 1px solid rgba(255, 255, 255, 0.2);
 border-radius: 10px;
 background: rgba(255, 255, 255, 0.08);
 color: #fff;
 font-size: 1.65rem;
 line-height: 1;
 cursor: pointer;
}
.news-media-modal-close:hover,
.news-media-modal-close:focus-visible {
 background: rgba(255, 255, 255, 0.16);
 outline: 2px solid var(--teal, #00a884);
 outline-offset: 2px;
}
.news-media-modal-body {
 flex: 1 1 auto;
 min-height: 0;
 display: grid;
 place-items: center;
 padding: clamp(8px, 2vw, 22px);
 overflow: auto;
 background: #020914;
}
.news-media-modal-video {
 display: block;
 width: min(1200px, 100%);
 max-height: 100%;
 border-radius: 10px;
 background: #000;
}
.news-media-modal-audio {
 width: min(850px, 100%);
}
.news-media-modal-frame {
 display: block;
 width: 100%;
 height: 100%;
 min-height: 0;
 border: 0;
 background: #fff;
 border-radius: 8px;
}
.news-media-modal-image {
 display: block;
 max-width: 100%;
 max-height: 100%;
 width: auto;
 height: auto;
 object-fit: contain;
 border-radius: 8px;
}
.news-media-modal-original {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 38px;
 padding: 8px 12px;
 border-radius: 9px;
 background: var(--teal, #00a884);
 border: 1px solid var(--teal, #00a884);
 color: #fff;
 text-decoration: none;
 font-weight: 800;
 font-size: 0.72rem;
}
.news-media-modal-original:hover {
 color: #fff;
 filter: brightness(0.94);
}
.news-media-preview {
 position: relative;
 overflow: hidden;
 border-radius: 13px;
 background: #020914;
 cursor: pointer;
}
.news-media-preview-video {
 display: block;
 width: 100%;
 height: 100%;
 min-height: 180px;
 object-fit: cover;
 filter: brightness(0.72);
}
.news-media-external-placeholder {
 position: absolute;
 inset: 0;
 display: grid;
 place-items: center;
 align-content: center;
 gap: 8px;
 color: #fff;
 background: linear-gradient(
 135deg,
 rgba(7, 26, 56, 0.96),
 rgba(0, 168, 132, 0.48)
 );
 font-weight: 800;
}
.news-media-external-placeholder i {
 font-size: 3rem;
}
.news-media-open-badge {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 7px 10px;
 border-radius: 999px;
 background: rgba(7, 26, 56, 0.82);
 color: #fff;
 font-size: 0.68rem;
 font-weight: 800;
}
.news-media-preview > .news-media-open-badge {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
}
.news-media-modal-trigger {
 cursor: pointer;
}
.news-media-modal-trigger:focus-visible,
.news-media-image-trigger:focus-visible {
 outline: 3px solid var(--teal, #00a884);
 outline-offset: 3px;
}
.news-media-image-trigger {
 display: block;
 width: 100%;
 padding: 0;
 border: 0;
 background: transparent;
 cursor: zoom-in;
 border-radius: 13px;
}
.news-media-image-trigger img {
 display: block;
}
.news-media-icon {
 width: 44px;
 height: 44px;
 flex: 0 0 44px;
 display: grid;
 place-items: center;
 border-radius: 12px;
 background: color-mix(in srgb, var(--teal, #00a884), transparent 84%);
 color: var(--teal, #00a884);
 font-size: 1.15rem;
}
body.news-media-modal-open,
body.news-gallery-modal-open {
 overflow: hidden;
}
@media (max-width: 767.98px) {
 .news-media-modal {
 padding: 0;
 }
 .news-media-modal-dialog {
 width: 100%;
 height: 100dvh;
 max-height: none;
 border-radius: 0;
 border-left: 0;
 border-right: 0;
 }
 .news-media-modal-header {
 padding: 10px 12px;
 }
 .news-media-modal-header h2 {
 font-size: 0.86rem;
 margin-right: 8px;
 }
 .news-media-modal-body {
 padding: 8px;
 }
 .news-media-modal-footer {
 padding: 9px 12px;
 padding-bottom: max(9px, env(safe-area-inset-bottom));
 }
 .news-media-modal-close {
 width: 38px;
 height: 38px;
 flex-basis: 38px;
 }
 .news-media-preview-video {
 min-height: 140px;
 }
}
@media (orientation: landscape) and (max-height: 560px) {
 .news-media-modal-header {
 padding: 7px 12px;
 }
 .news-media-modal-footer {
 padding: 6px 12px;
 }
 .news-media-modal-dialog {
 height: 100dvh;
 }
}
@media (prefers-reduced-motion: reduce) {
 .news-media-modal,
 .news-media-preview-video {
 transition: none !important;
 }
}

/* Noticias: búsqueda lateral e interacciones */
.news-more-sidebar {
 display: grid;
 gap: 14px;
 position: sticky;
 top: 95px;
 align-content: start;
}
.news-sidebar-search {
 display: grid;
 gap: 9px;
}
.news-search-input-wrap {
 display: flex;
 align-items: center;
 gap: 8px;
 border: 1px solid var(--line);
 background: var(--soft);
 border-radius: 10px;
 padding: 0 10px;
}
.news-search-input-wrap i {
 color: var(--teal);
 font-size: 0.8rem;
}
.news-search-input-wrap input {
 width: 100%;
 min-width: 0;
 border: 0;
 background: transparent;
 outline: 0;
 padding: 10px 0;
 color: var(--ink);
 font-size: 0.78rem;
}
.news-sidebar-search .btn {
 justify-self: start;
}
.news-search-clear {
 font-size: 0.7rem;
 color: var(--muted);
 text-decoration: none;
}
.news-sidebar-category-links {
 display: flex;
 flex-wrap: wrap;
 gap: 7px;
}
.news-sidebar-chip {
 display: inline-flex;
 padding: 6px 9px;
 border-radius: 999px;
 border: 1px solid var(--line);
 background: var(--soft);
 color: var(--muted);
 font-size: 0.67rem;
 font-weight: 800;
 text-decoration: none;
}
.news-sidebar-chip:hover,
.news-sidebar-chip.is-active {
 border-color: var(--teal);
 background: rgba(0, 168, 133, 0.08);
 color: var(--teal);
}
.news-more-sidebar .news-highlight-card {
 position: relative;
 top: auto;
 min-height: 360px;
}
.news-interactions {
 margin-top: 48px;
 padding: 22px;
 border: 1px solid var(--line);
 border-radius: 16px;
 background: var(--card);
 box-shadow: var(--shadow);
}
.news-interactions-summary {
 display: flex;
 gap: 18px;
 flex-wrap: wrap;
 color: var(--muted);
 font-size: 0.72rem;
 padding-bottom: 15px;
 border-bottom: 1px solid var(--line);
}
.news-interactions-summary i {
 color: var(--teal);
 margin-right: 4px;
}
.news-interactions .news-subheading {
 margin-top: 18px;
}
.news-interactions .news-subheading small {
 margin-left: auto;
 color: var(--muted);
 font-size: 0.68rem;
}
.news-reactions {
 display: flex;
 gap: 9px;
 flex-wrap: wrap;
}
.news-reaction {
 min-width: 72px;
 border: 1px solid var(--line);
 background: var(--card);
 border-radius: 12px;
 padding: 8px 7px;
 display: grid;
 place-items: center;
 gap: 2px;
 cursor: pointer;
 transition: 0.18s ease;
}
.news-reaction span {
 font-size: 1.35rem;
 line-height: 1;
}
.news-reaction b {
 font-size: 0.68rem;
 color: var(--muted);
}
.news-reaction small {
 font-size: 0.58rem;
 color: var(--muted);
 font-weight: 700;
}
.news-reaction:hover,
.news-reaction.is-active {
 border-color: var(--teal);
 background: rgba(0, 168, 133, 0.07);
 transform: translateY(-1px);
}
.news-reaction.is-active b,
.news-reaction.is-active small {
 color: var(--teal);
}
.news-comments-head {
 display: flex;
 justify-content: space-between;
 gap: 15px;
 align-items: center;
 margin-top: 24px;
 margin-bottom: 10px;
}
.news-comments-head strong {
 font: 800 0.85rem Montserrat;
 color: var(--heading);
}
.news-comments-head span {
 font-size: 0.68rem;
 color: var(--muted);
}
.news-comment-form textarea {
 width: 100%;
 min-height: 110px;
 resize: vertical;
 border: 1px solid var(--line);
 border-radius: 11px;
 padding: 12px;
 background: var(--card);
 color: var(--ink);
 outline: 0;
}
.news-comment-form textarea:focus {
 border-color: var(--teal);
 box-shadow: 0 0 0 3px rgba(0, 168, 133, 0.08);
}
.news-comment-form > div {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 12px;
 margin-top: 8px;
}
.news-comment-form small {
 color: var(--muted);
 font-size: 0.65rem;
}
.news-login-prompt {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 15px;
 border: 1px dashed var(--line);
 border-radius: 12px;
 background: var(--soft);
}
.news-login-prompt > i {
 color: var(--teal);
 font-size: 1.1rem;
}
.news-login-prompt div {
 flex: 1;
}
.news-login-prompt strong {
 font-size: 0.78rem;
}
.news-login-prompt p {
 margin: 3px 0 0;
 color: var(--muted);
 font-size: 0.68rem;
}
.news-comments-list {
 display: grid;
 gap: 10px;
 margin-top: 15px;
}
.news-comment {
 display: grid;
 grid-template-columns: 38px minmax(0, 1fr);
 gap: 10px;
 padding: 12px 0;
 border-top: 1px solid var(--line);
}
.news-comment-avatar {
 width: 38px;
 height: 38px;
 border-radius: 50%;
 overflow: hidden;
 display: grid;
 place-items: center;
 background: var(--deep);
 color: #fff;
}
.news-comment-avatar img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.news-comment strong {
 font-size: 0.75rem;
}
.news-comment small {
 margin-left: 8px;
 color: var(--muted);
 font-size: 0.62rem;
}
.news-comment p {
 margin: 4px 0 0;
 color: var(--ink);
 font-size: 0.76rem;
 line-height: 1.55;
 white-space: pre-wrap;
}
.news-comments-empty {
 padding: 18px;
 border: 1px dashed var(--line);
 border-radius: 11px;
 text-align: center;
 color: var(--muted);
 font-size: 0.72rem;
}
.news-author-avatar {
 overflow: hidden;
}
.news-author-avatar img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
@media (max-width: 991.98px) {
 .news-more-sidebar {
 position: relative;
 top: auto;
 }
 .news-interactions {
 margin-top: 32px;
 }
 .news-comments-head {
 align-items: flex-start;
 flex-direction: column;
 }
 .news-login-prompt {
 align-items: flex-start;
 flex-wrap: wrap;
 }
}
@media (max-width: 575.98px) {
 .news-reaction {
 min-width: 65px;
 }
 .news-comment-form > div {
 align-items: flex-start;
 flex-direction: column;
 }
 .news-login-prompt .btn {
 width: 100%;
 }
}

/* Noticias: metadatos editoriales junto al autor */
.news-publication-info {
 display: flex;
 align-items: center;
 gap: 18px;
 min-width: 0;
 flex-wrap: wrap;
}
.news-publication-meta {
 display: flex;
 align-items: center;
 gap: 12px;
 flex-wrap: wrap;
 color: var(--muted);
 font-size: 0.68rem;
}
.news-publication-meta span {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 white-space: nowrap;
}
.news-publication-meta i {
 color: var(--teal);
}
.news-publication-meta b {
 font-weight: 800;
 color: var(--ink);
}
@media (max-width: 767.98px) {
 .news-publication-info {
 width: 100%;
 gap: 10px;
 }
 .news-publication-meta {
 width: 100%;
 gap: 8px;
 }
 .news-publication-meta span {
 font-size: 0.64rem;
 }
 .news-actions {
 width: 100%;
 }
}

/* Corrección tema oscuro — módulo Nosotros / perfil corporativo */
html[data-tema="dark"] .corporate-section h2 {
 color: var(--heading, #e9eef5);
}

@media (prefers-color-scheme: dark) {
 html[data-tema="auto"] .corporate-section h2 {
 color: var(--heading, #e9eef5);
 }
}

/* E-RENOVAR — corrección global de contraste para tema oscuro */
html[data-tema="dark"] .corporate-section h2,
html[data-tema="dark"] .section-head h2,
html[data-tema="dark"] .section-head p,
html[data-tema="dark"] h2,
html[data-tema="dark"] h3,
html[data-tema="dark"] h4,
html[data-tema="dark"] h5,
html[data-tema="dark"] h6,
html[data-tema="dark"] .need-card strong,
html[data-tema="dark"] .directory-summary strong,
html[data-tema="dark"] .directory-card h3,
html[data-tema="dark"] .network-center span,
html[data-tema="dark"] .network-node strong,
html[data-tema="dark"] .opportunity-step h3,
html[data-tema="dark"] .opportunity-note strong,
html[data-tema="dark"] .portfolio-focus-card h3,
html[data-tema="dark"] .portfolio-bottom h3,
html[data-tema="dark"] .diagnostic-question h3,
html[data-tema="dark"] .diagnostic-result-item strong,
html[data-tema="dark"] .diagnostic-priority h4,
html[data-tema="dark"] .diagnostic-ecosystem-head h4,
html[data-tema="dark"] .diagnostic-ecosystem-subhead span,
html[data-tema="dark"] .diagnostic-ecosystem-card h5,
html[data-tema="dark"] .news-section-heading h2,
html[data-tema="dark"] .news-sidebar-title,
html[data-tema="dark"] .news-subheading span,
html[data-tema="dark"] .news-empty-detail h1,
html[data-tema="dark"] .news-comments-head strong,
html[data-tema="dark"] .account-progress b {
 color: var(--heading) !important;
}

html[data-tema="dark"] .text-link {
 color: #7cc5ff !important;
}

html[data-tema="dark"] .portfolio-card .logo-placeholder {
 color: var(--heading) !important;
}

@media (prefers-color-scheme: dark) {
 html[data-tema="auto"] .corporate-section h2,
 html[data-tema="auto"] .section-head h2,
 html[data-tema="auto"] .section-head p,
 html[data-tema="auto"] h2,
 html[data-tema="auto"] h3,
 html[data-tema="auto"] h4,
 html[data-tema="auto"] h5,
 html[data-tema="auto"] h6,
 html[data-tema="auto"] .need-card strong,
 html[data-tema="auto"] .directory-summary strong,
 html[data-tema="auto"] .directory-card h3,
 html[data-tema="auto"] .network-center span,
 html[data-tema="auto"] .network-node strong,
 html[data-tema="auto"] .opportunity-step h3,
 html[data-tema="auto"] .opportunity-note strong,
 html[data-tema="auto"] .portfolio-focus-card h3,
 html[data-tema="auto"] .portfolio-bottom h3,
 html[data-tema="auto"] .diagnostic-question h3,
 html[data-tema="auto"] .diagnostic-result-item strong,
 html[data-tema="auto"] .diagnostic-priority h4,
 html[data-tema="auto"] .diagnostic-ecosystem-head h4,
 html[data-tema="auto"] .diagnostic-ecosystem-subhead span,
 html[data-tema="auto"] .diagnostic-ecosystem-card h5,
 html[data-tema="auto"] .news-section-heading h2,
 html[data-tema="auto"] .news-sidebar-title,
 html[data-tema="auto"] .news-subheading span,
 html[data-tema="auto"] .news-empty-detail h1,
 html[data-tema="auto"] .news-comments-head strong,
 html[data-tema="auto"] .account-progress b {
 color: var(--heading) !important;
 }

 html[data-tema="auto"] .text-link {
 color: #7cc5ff !important;
 }

 html[data-tema="auto"] .portfolio-card .logo-placeholder {
 color: var(--heading) !important;
 }
}

/* Corrección global de contraste para textos secundarios en tema oscuro/automático */
:root {
 --link: #0f2d5b;
}
html[data-tema="dark"] {
 --link: #7cc5ff;
}
html[data-tema="dark"] .brand-identity-strip p.text-body-secondary,
html[data-tema="dark"] .text-body-secondary,
html[data-tema="dark"] .section-head p,
html[data-tema="dark"] .portal-section p {
 color: var(--muted) !important;
}
@media (prefers-color-scheme: dark) {
 html[data-tema="auto"] {
 --link: #7cc5ff;
 }
 html[data-tema="auto"] .brand-identity-strip p.text-body-secondary,
 html[data-tema="auto"] .text-body-secondary,
 html[data-tema="auto"] .section-head p,
 html[data-tema="auto"] .portal-section p {
 color: var(--muted) !important;
 }
}
html[data-tema="dark"] .brand-identity-strip,
html[data-tema="dark"] .brand-identity-strip p,
html[data-tema="dark"] .brand-identity-strip .text-body-secondary {
 color: var(--muted);
}
@media (prefers-color-scheme: dark) {
 html[data-tema="auto"] .brand-identity-strip,
 html[data-tema="auto"] .brand-identity-strip p,
 html[data-tema="auto"] .brand-identity-strip .text-body-secondary {
 color: var(--muted);
 }
}

/* ==========================================================
 E-RENOVAR · DARK MODE — CONTRASTE GLOBAL
 Fallback para modo oscuro del sistema cuando data-tema
 todavía no está presente en <html>.
 ========================================================== */
@media (prefers-color-scheme: dark) {
 html .text-body-secondary,
 html .brand-identity-strip p.text-body-secondary,
 html .brand-identity-strip p,
 html .section-head p,
 html .portal-section p {
 color: #aab5c4 !important;
 }

 html .brand-identity-strip .text-body-secondary {
 color: #aab5c4 !important;
 }

 html .corporate-section h2,
 html .section-head h2,
 html h2,
 html h3,
 html h4,
 html h5,
 html h6 {
 color: #e9eef5;
 }
}

/* Dark theme explícito: máxima prioridad frente a utilidades Bootstrap */
html[data-tema="dark"] .text-body-secondary,
html[data-tema="dark"] .brand-identity-strip p.text-body-secondary,
html[data-tema="dark"] .brand-identity-strip p,
html[data-tema="dark"] .section-head p,
html[data-tema="dark"] .portal-section p {
 color: #aab5c4 !important;
}

/* FAQ · Corrección completa de contraste para tema oscuro */
html[data-tema="dark"] #faq .accordion-item,
html[data-tema="auto"] #faq .accordion-item {
 background: #101d2e !important;
 border-color: #2b3a4d !important;
 color: #e9eef5 !important;
}

html[data-tema="dark"] #faq .accordion-button,
html[data-tema="auto"] #faq .accordion-button {
 background: #16263a !important;
 color: #e9eef5 !important;
 box-shadow: none !important;
 border-color: #2b3a4d !important;
}

html[data-tema="dark"] #faq .accordion-button:not(.collapsed),
html[data-tema="auto"] #faq .accordion-button:not(.collapsed) {
 background: #1d3552 !important;
 color: #ffffff !important;
}

html[data-tema="dark"] #faq .accordion-button::after,
html[data-tema="auto"] #faq .accordion-button::after {
 filter: brightness(0) invert(1) !important;
}

html[data-tema="dark"] #faq .accordion-body,
html[data-tema="auto"] #faq .accordion-body {
 background: #0f1b2b !important;
 color: #c6d0dc !important;
 border-top: 1px solid #2b3a4d !important;
}

html[data-tema="dark"] #faq .accordion-body p,
html[data-tema="dark"] #faq .accordion-body li,
html[data-tema="dark"] #faq .accordion-body span,
html[data-tema="dark"] #faq .accordion-body div,
html[data-tema="auto"] #faq .accordion-body p,
html[data-tema="auto"] #faq .accordion-body li,
html[data-tema="auto"] #faq .accordion-body span,
html[data-tema="auto"] #faq .accordion-body div {
 color: #c6d0dc !important;
}

html[data-tema="dark"] #faq .accordion-body strong,
html[data-tema="dark"] #faq .accordion-body b,
html[data-tema="auto"] #faq .accordion-body strong,
html[data-tema="auto"] #faq .accordion-body b {
 color: #f2f5f8 !important;
}

html[data-tema="dark"] #faq .accordion-body a,
html[data-tema="auto"] #faq .accordion-body a {
 color: #7cc5ff !important;
}

@media (prefers-color-scheme: dark) {
 html[data-tema="auto"] #faq .accordion-item {
 background: #101d2e !important;
 border-color: #2b3a4d !important;
 color: #e9eef5 !important;
 }

 html[data-tema="auto"] #faq .accordion-button {
 background: #16263a !important;
 color: #e9eef5 !important;
 box-shadow: none !important;
 border-color: #2b3a4d !important;
 }

 html[data-tema="auto"] #faq .accordion-button:not(.collapsed) {
 background: #1d3552 !important;
 color: #ffffff !important;
 }

 html[data-tema="auto"] #faq .accordion-body {
 background: #0f1b2b !important;
 color: #c6d0dc !important;
 border-top-color: #2b3a4d !important;
 }
}

/* ==========================================================
   E-RENOVAR · HOME FRONTEND — modernización exclusiva de inicio
   No altera la estructura ni los componentes de las demás páginas.
   ========================================================== */

#inicio.home-hero {
  position: relative;
  min-height: min(760px, calc(100vh - 78px));
  display: flex;
  align-items: center;
  isolation: isolate;
  background:
    radial-gradient(circle at 82% 35%, color-mix(in srgb, var(--blue), transparent 78%), transparent 28%),
    radial-gradient(circle at 18% 100%, color-mix(in srgb, var(--purple), transparent 86%), transparent 30%),
    linear-gradient(135deg, var(--deep), #071a38 72%);
}

#inicio.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .32;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 90%);
}

#inicio.home-hero .hero-v24-inner {
  position: relative;
  z-index: 2;
}

#inicio.home-hero .hero-copy {
  position: relative;
  z-index: 3;
}

#inicio.home-hero h1 {
  max-width: 850px;
  letter-spacing: -.045em;
  text-wrap: balance;
}

#inicio.home-hero .lead {
  max-width: 650px;
}

#inicio.home-hero .hero-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 22px 0 24px;
}

#inicio.home-hero .hero-proof-row span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  color: rgba(255,255,255,.72);
  font-size: .74rem;
  backdrop-filter: blur(10px);
}

#inicio.home-hero .hero-proof-row b {
  color: #fff;
  font-weight: 800;
}

#inicio.home-hero .hero-orbit {
  min-height: 530px;
}

#inicio.home-hero .orbit-ring {
  border-color: rgba(100,211,255,.20);
  box-shadow: inset 0 0 30px rgba(0,168,132,.035);
}

#inicio.home-hero .ring-3 {
  width: 590px;
  height: 590px;
  animation-direction: reverse;
  animation-duration: 34s;
}

#inicio.home-hero .orbit-core {
  width: 168px;
  height: 168px;
  position: relative;
  background: radial-gradient(circle at 35% 30%, #38d9ff, var(--teal) 52%, #006da8);
  box-shadow: 0 0 0 16px rgba(0,168,132,.06), 0 28px 90px rgba(0,168,132,.35);
}

#inicio.home-hero .home-orbit-logo {
  width: 82px;
  height: auto;
  max-width: 78%;
  object-fit: contain;
  filter: drop-shadow(0 8px 15px rgba(0,0,0,.2));
}

#inicio.home-hero .orbit-core small {
  margin-top: 88px;
  color: rgba(255,255,255,.78);
  letter-spacing: .16em;
  text-transform: uppercase;
}

#inicio.home-hero .orbit-node {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-color: rgba(100,211,255,.18);
  box-shadow: 0 8px 25px rgba(0,0,0,.12);
}

#inicio.home-hero .orbit-node i {
  color: #38d9ff;
}

#inicio.home-hero .hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
}

#inicio.home-hero .hero-glow-a {
  width: 320px;
  height: 320px;
  right: -80px;
  top: 60px;
  background: color-mix(in srgb, var(--teal), transparent 90%);
}

#inicio.home-hero .hero-glow-b {
  width: 250px;
  height: 250px;
  left: 34%;
  bottom: -150px;
  background: color-mix(in srgb, var(--purple), transparent 90%);
}

#necesidades.home-needs .section-head,
#estadisticas.home-stats .section-head {
  max-width: 900px;
}

#necesidades.home-needs .needs-grid {
  gap: 18px !important;
}

#necesidades.home-needs .home-need-card {
  --card-accent: var(--teal);
  position: relative;
  overflow: hidden;
  min-height: 245px;
  padding: 28px !important;
  border-radius: 24px !important;
  box-shadow: 0 12px 35px rgba(15,45,91,.055);
}

#necesidades.home-needs .home-need-card::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -50px;
  bottom: -60px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--card-accent), transparent 86%);
  pointer-events: none;
}

#necesidades.home-needs .home-need-idea { --card-accent: var(--yellow); }
#necesidades.home-needs .home-need-business { --card-accent: #35c8ff; }
#necesidades.home-needs .home-need-project { --card-accent: var(--purple); }
#necesidades.home-needs .home-need-ally { --card-accent: var(--teal); }
#necesidades.home-needs .home-need-solution { --card-accent: #ff6b6b; }

#necesidades.home-needs .need-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--card-accent), transparent 84%);
  color: var(--card-accent) !important;
  font-size: 1.3rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--card-accent), transparent 70%);
}

#necesidades.home-needs .need-icon i {
  color: inherit !important;
  font-size: inherit;
}

#necesidades.home-needs .home-need-card strong {
  margin-top: 5px;
  font-size: 1.06rem;
}

#necesidades.home-needs .home-need-card b {
  color: var(--card-accent) !important;
}

#estadisticas.home-stats {
  position: relative;
  overflow: hidden;
}

#estadisticas.home-stats::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -220px;
  top: -180px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue), transparent 94%);
  pointer-events: none;
}

#estadisticas.home-stats .home-stats-head {
  position: relative;
  z-index: 1;
}

#estadisticas.home-stats .home-counter-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
}

#estadisticas.home-stats .home-counter-card {
  position: relative;
  overflow: hidden;
  min-height: 205px;
  padding: 28px !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, var(--card), color-mix(in srgb, var(--card), var(--teal) 3%)) !important;
}

#estadisticas.home-stats .home-counter-card::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -80px;
  bottom: -80px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--teal), transparent 92%);
}

#estadisticas.home-stats .home-counter-icon {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--teal), transparent 87%);
  color: var(--teal);
}

#estadisticas.home-stats .home-counter-card strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}

#estadisticas.home-stats .home-charts-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 18px;
  margin-top: 18px;
}

#estadisticas.home-stats .home-chart-card {
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 12px 35px rgba(15,45,91,.05);
}

#estadisticas.home-stats .home-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

#estadisticas.home-stats .home-chart-head h3 {
  margin: 5px 0 0;
  color: var(--heading);
}

#estadisticas.home-stats .home-chart-head > i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue), transparent 88%);
  color: var(--blue);
}

#estadisticas.home-stats .home-chart-kicker {
  color: var(--teal);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

#estadisticas.home-stats .home-donut-wrap {
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: center;
  gap: 30px;
}

#estadisticas.home-stats .home-donut {
  position: relative;
  width: 185px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--chart-a-color) 0 var(--chart-a), var(--chart-b-color) var(--chart-a) var(--chart-b), var(--chart-c-color) var(--chart-b) 100%);
  transform: rotate(-90deg);
}

#estadisticas.home-stats .home-donut::before {
  content: "";
  position: absolute;
  inset: 17px;
  border-radius: 50%;
  background: var(--card);
}

#estadisticas.home-stats .home-donut-center {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  transform: rotate(90deg);
}

#estadisticas.home-stats .home-donut-center strong {
  font: 800 2.1rem Montserrat;
  color: var(--heading);
  line-height: 1;
}

#estadisticas.home-stats .home-donut-center span {
  margin-top: 5px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

#estadisticas.home-stats .home-legend {
  display: grid;
  gap: 14px;
}

#estadisticas.home-stats .home-legend > div {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

#estadisticas.home-stats .home-legend strong {
  color: var(--heading);
  font-variant-numeric: tabular-nums;
}

#estadisticas.home-stats .legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

#estadisticas.home-stats .legend-a { background: var(--chart-a-color); }
#estadisticas.home-stats .legend-b { background: var(--chart-b-color); }
#estadisticas.home-stats .legend-c { background: var(--chart-c-color); }

#estadisticas.home-stats .home-bars {
  display: grid;
  gap: 13px;
}

#estadisticas.home-stats .home-bar-row {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) 28px;
  align-items: center;
  gap: 10px;
}

#estadisticas.home-stats .home-bar-label,
#estadisticas.home-stats .home-bar-row strong {
  color: var(--muted);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

#estadisticas.home-stats .home-bar-row strong {
  text-align: right;
  color: var(--heading);
}

#estadisticas.home-stats .home-bar-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line), transparent 15%);
}

#estadisticas.home-stats .home-bar-fill {
  display: block;
  width: var(--bar-width);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--blue));
  transform-origin: left center;
  animation: homeBarGrow 1.1s cubic-bezier(.2,.8,.2,1) both;
}

#estadisticas.home-stats .home-stats-note {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  color: var(--muted);
  font-size: .88rem;
}

#estadisticas.home-stats .home-stats-note i {
  color: var(--teal);
}

:root {
  --chart-a-color: var(--teal);
  --chart-b-color: var(--blue);
  --chart-c-color: var(--purple);
}

@keyframes homeBarGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  #inicio.home-hero .orbit-ring,
  #estadisticas.home-stats .home-bar-fill {
    animation: none !important;
  }
}

html[data-tema="dark"] #estadisticas.home-stats .home-counter-card,
html[data-tema="dark"] #estadisticas.home-stats .home-chart-card {
  box-shadow: 0 14px 45px rgba(0,0,0,.20);
}

@media (max-width: 1199px) {
  #estadisticas.home-stats .home-counter-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
  #estadisticas.home-stats .home-charts-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991px) {
  #inicio.home-hero {
    min-height: auto;
  }
  #inicio.home-hero .hero-grid {
    gap: 20px;
  }
  #inicio.home-hero .hero-orbit {
    min-height: 410px;
  }
  #inicio.home-hero .ring-3 {
    width: 460px;
    height: 460px;
  }
  #necesidades.home-needs .needs-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}

@media (max-width: 575px) {
  #inicio.home-hero .hero-proof-row span {
    width: 100%;
  }
  #inicio.home-hero .hero-orbit {
    min-height: 320px;
  }
  #inicio.home-hero .ring-3 {
    width: 320px;
    height: 320px;
  }
  #inicio.home-hero .orbit-core {
    width: 116px;
    height: 116px;
  }
  #inicio.home-hero .home-orbit-logo {
    width: 60px;
  }
  #inicio.home-hero .orbit-core small {
    margin-top: 65px;
    font-size: .55rem;
  }
  #inicio.home-hero .orbit-node {
    padding: 7px 9px;
    font-size: .59rem;
  }
  #necesidades.home-needs .needs-grid,
  #estadisticas.home-stats .home-counter-grid {
    grid-template-columns: 1fr !important;
  }
  #estadisticas.home-stats .home-donut-wrap {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  #estadisticas.home-stats .home-legend {
    width: 100%;
  }
  #estadisticas.home-stats .home-chart-card {
    padding: 22px;
  }
}

/* ==========================================================
   E-RENOVAR · RENOVACIÓN — CONTRASTE CORRECTO POR TEMA
   Corrección: modo claro / oscuro / automático
   ========================================================== */

/* Modo claro explícito */
html[data-tema="light"] .renewal-box,
html:not([data-tema]) .renewal-box {
  background: linear-gradient(135deg, #edf8f5, #eef5ff) !important;
  color: var(--ink, #14233b) !important;
}

html[data-tema="light"] .renewal-box h2,
html:not([data-tema]) .renewal-box h2 {
  color: var(--heading, #14233b) !important;
}

html[data-tema="light"] .renewal-box p,
html:not([data-tema]) .renewal-box p {
  color: var(--muted, #526783) !important;
}

/* Modo oscuro explícito */
html[data-tema="dark"] .renewal-box {
  background: linear-gradient(135deg, #142d2a, #172b45) !important;
  color: #e9eef5 !important;
}

html[data-tema="dark"] .renewal-box h2 {
  color: #f4f7fb !important;
}

html[data-tema="dark"] .renewal-box p {
  color: #aabbd0 !important;
}

/* Modo automático: claro cuando el sistema es claro */
html[data-tema="auto"] .renewal-box {
  background: linear-gradient(135deg, #edf8f5, #eef5ff) !important;
  color: var(--ink, #14233b) !important;
}

html[data-tema="auto"] .renewal-box h2 {
  color: var(--heading, #14233b) !important;
}

html[data-tema="auto"] .renewal-box p {
  color: var(--muted, #526783) !important;
}

/* Modo automático: oscuro solo si el sistema operativo es oscuro */
@media (prefers-color-scheme: dark) {
  html[data-tema="auto"] .renewal-box {
    background: linear-gradient(135deg, #142d2a, #172b45) !important;
    color: #e9eef5 !important;
  }

  html[data-tema="auto"] .renewal-box h2 {
    color: #f4f7fb !important;
  }

  html[data-tema="auto"] .renewal-box p {
    color: #aabbd0 !important;
  }
}