/* ============ paginas.css — estilos específicos por página ============ */

/* ================= HOME · Hero ================= */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-block: 140px 90px; }
.hero-glow {
  position: absolute; width: 760px; height: 760px; border-radius: 50%;
  background: radial-gradient(circle, rgba(241,76,47,0.17) 0%, rgba(241,76,47,0.05) 42%, transparent 68%);
  pointer-events: none; transform: translate(-50%, -50%); left: 68%; top: 42%;
  will-change: left, top;
}
.hero-block { position: absolute; background: var(--naranja); pointer-events: none; }
.hero-block--a { width: 54px; height: 84px; right: 12%; top: 20%; animation: float 9s ease-in-out infinite; }
.hero-block--b { width: 30px; height: 46px; right: 26%; bottom: 24%; background: transparent; border: 2px solid var(--naranja); opacity: 0.55; animation: float 7s ease-in-out 1.2s infinite reverse; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.hero .eyebrow { margin-bottom: 26px; color: var(--muted-on-dark); }
.hero h1 { font-size: clamp(2.5rem, 7.2vw, 6.1rem); }
.hero h1 .line { display: block; overflow: hidden; padding-block: 0.12em 0.08em; margin-block: -0.12em -0.08em; }
.hero h1 .line > span { display: block; transform: translateY(110%); animation: rise 0.7s cubic-bezier(0.2,0.7,0.2,1) forwards; }
.hero h1 .line:nth-child(2) > span { animation-delay: 0.12s; }
.hero h1 .line:nth-child(3) > span { animation-delay: 0.24s; }
@keyframes rise { to { transform: translateY(0); } }
.hl { color: #fff; background: var(--naranja); padding-inline: 0.14em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero-sub { max-width: 58ch; margin-top: 28px; color: #d8d6d4; font-size: clamp(1rem, 1.4vw, 1.13rem); }
.hero-sub strong { color: #fff; font-weight: 600; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

/* ================= HOME · Marquee ================= */
.marquee { background: var(--naranja); overflow: hidden; padding-block: 12px; white-space: nowrap; }
.marquee-track { display: inline-block; animation: slide 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { font-family: var(--anton); text-transform: uppercase; font-size: 1.05rem; letter-spacing: 0.08em; color: #fff; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ================= HOME · Stats ================= */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--line-on-dark); border-block: 1px solid var(--line-on-dark); }
.stat { background: var(--carbon); padding: 34px 28px; }
.stat b { display: block; font-family: var(--anton); font-weight: 400; font-size: 2.6rem; line-height: 1; color: var(--naranja); font-variant-numeric: tabular-nums; }
.stat small { display: block; margin-top: 10px; color: var(--muted-on-dark); font-size: 0.82rem; font-weight: 600; line-height: 1.45; }

/* ================= HOME · Cards de dolor / por qué ================= */
.pains { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.pain {
  background: var(--paper-2); border: 1px solid var(--line-on-light); border-radius: 8px; padding: 30px 26px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.pain:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(33,32,32,0.1); border-color: var(--naranja); }
.pain b { font-family: var(--anton); font-weight: 400; text-transform: uppercase; font-size: 1.12rem; display: block; margin-bottom: 8px; }
.pain p { margin: 0; color: var(--muted-on-light); font-size: 0.93rem; }
.pain .n { font-family: var(--anton); color: var(--naranja); font-size: 0.95rem; display: block; margin-bottom: 14px; }

/* ================= HOME · Soluciones: tabs de líneas ================= */
.ptabs { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 6px; margin-bottom: 28px; }
.ptab {
  flex: none; scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--carbon-2); border: 1px solid var(--line-on-dark); border-radius: 6px;
  color: var(--muted-on-dark); font-family: var(--mont); font-weight: 700; font-size: 0.84rem;
  padding: 12px 16px; cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.ptab .dot { width: 10px; height: 14px; background: var(--dot); flex: none; }
.ptab:hover { color: #fff; }
.ptab.active { color: #fff; border-bottom-color: var(--dot); background: var(--carbon-3); }
.ptab:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }

#soluciones { overflow: hidden; } /* el halo del panel (inset -10%) no debe crear scroll horizontal */
.ppanel-wrap { position: relative; }
.ppanel-wrap::before {
  content: ""; position: absolute; inset: -40px -10% auto; height: 320px;
  background: var(--line, var(--naranja)); opacity: 0.06; filter: blur(90px);
  pointer-events: none; transition: background-color 0.4s ease;
}
.ppanel {
  position: relative;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(26px, 4vw, 56px);
  background: var(--carbon-2); border: 1px solid var(--line-on-dark);
  border-top: 3px solid var(--line, var(--naranja));
  border-radius: 10px; padding: clamp(26px, 3.6vw, 44px);
  transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.4s ease;
}
.ppanel.swap { opacity: 0; transform: translateY(10px); }
@media (max-width: 860px) { .ppanel { grid-template-columns: 1fr; } }
.ppanel .ico { width: 46px; height: 46px; color: var(--line, var(--naranja)); transition: color 0.4s ease; margin-bottom: 14px; }
.ppanel .avail {
  display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--line-on-dark); color: var(--muted-on-dark);
  padding: 5px 10px; border-radius: 4px; margin-bottom: 14px; margin-left: 12px; vertical-align: 6px;
}
.ppanel h3 { font-family: var(--anton); font-weight: 400; text-transform: uppercase; font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0 0 4px; }
.ppanel .psub { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-on-dark); margin-bottom: 12px; }
.ppanel .desc { color: #d8d6d4; font-size: 0.98rem; margin: 0 0 18px; }
.ppanel .plabel { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-on-dark); display: block; margin-bottom: 8px; }
.ppanel .prob { color: #d8d6d4; font-size: 0.92rem; margin: 0; }
.ppanel .line-logo { display: block; width: min(230px, 70%); margin-bottom: 20px; }
.line-logo img { display: block; width: 100%; height: auto; }
.pchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.pchips li {
  font-size: 0.8rem; font-weight: 600; color: #e8e6e4;
  border: 1px solid var(--line, var(--naranja)); border-radius: 4px; padding: 7px 12px;
  transition: border-color 0.4s ease, transform 0.2s ease;
}
.pchips li:hover { transform: translateY(-2px); }
.ppanel .pnote { margin: 18px 0 0; font-size: 0.75rem; color: var(--muted-on-dark); }
/* bloques extendidos del panel */
.prob-list { margin: 10px 0 0; padding-left: 18px; color: #d8d6d4; font-size: 0.93rem; display: grid; gap: 6px; }
.prob-list li { line-height: 1.5; }
.ptag { font-weight: 700; color: #fff; margin-top: 14px; }
/* pestañas estilo lineup */
#soluciones .ptabs { gap: clamp(2px, 1.4vw, 20px); justify-content: safe center; align-items: stretch; padding-bottom: 10px; margin-bottom: 30px; border-bottom: 1px solid var(--line-on-dark); }
.ptabs .ptab { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; background: none; border: none; border-radius: 0; padding: 8px 18px 16px; color: var(--muted-on-dark); opacity: 0.62; transition: opacity 0.25s ease, color 0.25s ease; position: relative; cursor: pointer; scroll-snap-align: start; }
.ptabs .ptab img { height: 48px; width: auto; display: block; margin-inline: auto; }
.ptabs .ptab .ptab-name { font-size: 0.8rem; font-weight: 600; white-space: nowrap; color: inherit; letter-spacing: 0.01em; }
.ptabs .ptab::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 6px; height: 3px; border-radius: 2px; background: var(--dot); opacity: 0; transition: opacity 0.25s ease; }
.ptabs .ptab:hover { opacity: 0.92; color: #fff; background: none; }
.ptabs .ptab.active { opacity: 1; color: #fff; background: none; border: none; }
.ptabs .ptab.active::after { opacity: 1; }
.ptabs .ptab:focus-visible { outline: 2px solid var(--dot); outline-offset: 3px; }
@media (max-width: 640px) {
  .ptabs .ptab img { height: 42px; }
  .ptabs .ptab { padding: 6px 12px 14px; }
}

/* ================= Migas de pan (páginas internas) ================= */
.crumbs { font-size: 0.8rem; font-weight: 600; color: var(--muted-on-dark); margin-bottom: 28px; }
.crumbs a { color: #e8e6e4; text-decoration: none; border-bottom: 1px solid var(--line-on-dark); }
.crumbs a:hover { color: #fff; border-color: var(--naranja); }

/* ================= HOME · Calculadora solar (tarifa DAC) ================= */
.scenario-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.slider-box { position: sticky; top: 120px; }
@media (max-width: 860px) { .scenario-grid { grid-template-columns: 1fr; } .slider-box { position: static; } }
.slider-value { font-family: var(--anton); font-size: clamp(4rem, 8.6vw, 6.4rem); line-height: 1; color: var(--carbon); font-variant-numeric: tabular-nums; }
.slider-value .pct { color: var(--sol-deep); margin-left: 12px; }
.slider-label { color: var(--muted-on-light); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 6px; }
input[type="range"].scenario-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 2px; background: #e3e0db; margin-top: 40px; cursor: pointer;
}
input[type="range"].scenario-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--sol); border: 4px solid var(--paper);
  box-shadow: 0 0 0 2px var(--sol-deep), 0 6px 18px rgba(222,154,43,0.45);
  transition: transform 0.15s ease;
}
input[type="range"].scenario-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"].scenario-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--sol); border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--sol-deep);
}
input[type="range"].scenario-slider:focus-visible { outline: 3px solid var(--sol-deep); outline-offset: 6px; }
.slider-ticks { display: flex; justify-content: space-between; margin-top: 14px; }
.slider-ticks button {
  background: none; border: none; cursor: pointer;
  font-family: var(--mont); font-weight: 700; font-size: 0.85rem; color: var(--muted-on-light);
  padding: 6px 4px; border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.slider-ticks button.active, .slider-ticks button:hover { color: var(--carbon); border-color: var(--sol-deep); }
.slider-ticks button:focus-visible { outline: 2px solid var(--sol-deep); outline-offset: 2px; }
.scenario-card {
  background: var(--paper-2); border: 1px solid var(--line-on-light); border-top: 3px solid var(--sol);
  border-radius: 10px; padding: clamp(26px, 3.6vw, 40px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.scenario-card.swap { opacity: 0; transform: translateY(10px); }
.scenario-card h3 { font-family: var(--anton); font-weight: 400; text-transform: uppercase; font-size: 1.5rem; margin: 0 0 6px; color: var(--carbon); }
.scenario-card .who { color: var(--sol-deep); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; }
.scenario-card p { color: #44413f; font-size: 0.95rem; }
.meter { margin-top: 22px; }
.meter + .meter { margin-top: 16px; }
.meter label { display: flex; justify-content: space-between; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-on-light); margin-bottom: 7px; }
.meter .track { height: 8px; background: #e9e6e1; border-radius: 4px; overflow: hidden; }
.meter .fill { height: 100%; background: var(--sol-deep); border-radius: 4px; width: 0; transition: width 0.6s cubic-bezier(0.2,0.7,0.2,1); }
.scenario-note { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-on-light); font-size: 0.78rem; color: var(--muted-on-light); }
.solar-cta { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }
.calc-dac { display: inline-block; background: var(--sol); color: var(--carbon); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 10px; border-radius: 3px; margin-bottom: 14px; }
.calc-gen { margin: 0 0 16px; font-size: 0.85rem; color: var(--muted-on-light); }
.calc-rows { border-top: 1px solid rgba(33,32,32,0.12); margin-bottom: 14px; }
.calc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(33,32,32,0.12); font-size: 0.92rem; }
.calc-row b { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 1.05rem; }

/* ================= HOME · Proceso ================= */
.proc-band { position: relative; overflow: hidden; }
.watermark {
  position: absolute; right: -30px; bottom: -70px;
  font-family: var(--anton); font-size: clamp(180px, 26vw, 380px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.05);
  pointer-events: none; user-select: none;
}
.steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: 22px; }
.step::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--carbon-3); }
.step::after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background: var(--naranja); transition: width 0.8s cubic-bezier(0.2,0.7,0.2,1); }
.step.is-in::after { width: 100%; }
.step .k { font-family: var(--anton); font-size: 2rem; color: var(--naranja); display: block; }
.step b { font-family: var(--anton); font-weight: 400; text-transform: uppercase; display: block; margin: 8px 0 6px; font-size: 1.02rem; }
.step p { margin: 0; color: var(--muted-on-dark); font-size: 0.85rem; }
.proc-note { margin-top: 32px; font-size: 0.9rem; color: var(--muted-on-dark); }
.proc-note a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--naranja); }

/* ================= HOME · Por qué ================= */
.why { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-bottom: clamp(48px, 7vw, 80px); }

/* ================= HOME · CTA final ================= */
.cta-final { position: relative; overflow: hidden; }
.cta-final::before {
  content: ""; position: absolute; width: 900px; height: 900px; border-radius: 50%;
  background: radial-gradient(circle, rgba(241,76,47,0.14) 0%, transparent 62%);
  top: -300px; right: -250px; pointer-events: none;
}
.cta-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(36px, 6vw, 80px); align-items: center; position: relative; }
@media (max-width: 860px) { .cta-grid { grid-template-columns: 1fr; } }

/* ================= HOME · Hero unificado (namespace uh-) ================= */
.uh-hero { --uh-env: #f14c2f; --uh-ink: #fff; }
.uh-hero.hero { padding-block: 116px 96px; }
.uh-grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 52px); align-items: center; }
.uh-hero h1 { font-size: clamp(2.5rem, 8.4vw, 6.1rem); }
.uh-hero .hero-sub { font-size: clamp(1rem, 2.3vw, 1.22rem); }
.uh-stagewrap { position: relative; order: -1; width: min(100%, 540px); margin-inline: auto; }
.uh-stage { position: relative; width: 100%; aspect-ratio: 1403/843; }
.uh-base { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity 0.45s ease; }
.uh-plate { position: absolute; left: 42.05%; top: 64.29%; width: 55.38%; height: 31.91%; perspective: 1100px; }
.uh-flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.45,0.05,0.2,1); }
.uh-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.uh-face img { width: 100%; height: 100%; display: block; }
.uh-face--back { transform: rotateX(180deg); }
.uh-hero.uh-fademode .uh-flip { transition: none; transform: none !important; }
.uh-hero.uh-fademode .uh-face { transition: opacity 0.45s ease; transform: none; }
.uh-halo {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 42% at 64% 40%, color-mix(in srgb, var(--uh-env) 15%, transparent), transparent 72%);
  transition: background 0.7s ease;
}
.uh-sketch { position: absolute; inset: 0; pointer-events: none; }
.uh-sketch svg { width: 100%; height: 100%; display: block; }
.uh-l { transition: opacity 0.9s ease; }
.uh-l1, .uh-l2 { will-change: transform; transition: opacity 0.9s ease, transform 0.4s ease-out; }
.uh-l2, .uh-l3, .uh-l4 { opacity: 0; }
.uh-hero[data-phase="2"] .uh-l2 { opacity: 1; }
.uh-hero[data-phase="3"] .uh-l2, .uh-hero[data-phase="3"] .uh-l3 { opacity: 1; }
.uh-hero[data-phase="4"] .uh-l2, .uh-hero[data-phase="4"] .uh-l3, .uh-hero[data-phase="4"] .uh-l4 { opacity: 1; }
.uh-accent { color: var(--uh-env); transition: color 0.7s ease; }
.uh-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.uh-hero.uh-live .uh-draw { animation: uhDraw 1.1s ease forwards; }
.uh-hero.uh-live .uh-l2 .uh-draw { animation-delay: 0.42s; }
@keyframes uhDraw { to { stroke-dashoffset: 0; } }
.uh-dots { display: flex; gap: 9px; justify-content: center; list-style: none; margin: 20px 0 0; padding: 0; }
.uh-dots li { width: 7px; height: 7px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); transition: background 0.4s ease, border-color 0.4s ease; }
.uh-dots li.on { background: var(--uh-env); border-color: var(--uh-env); }
.uh-cue {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted-on-dark); text-decoration: none;
  opacity: 0; transition: opacity 0.8s ease 0.9s, color 0.2s ease;
}
.uh-hero.uh-live .uh-cue { opacity: 1; }
.uh-cue:hover { color: #fff; }
.uh-cue svg { animation: uhNudge 2.8s ease-in-out infinite; }
@keyframes uhNudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.uh-hero .hero-glow {
  background: radial-gradient(circle at center, color-mix(in srgb, var(--uh-env) 22%, transparent), transparent 62%);
  transition: background 0.7s ease;
}
.uh-hero .hero-block--a { background: var(--uh-env); transition: background 0.7s ease; }
.uh-hero .hero-block--b { border-color: var(--uh-env); transition: border-color 0.7s ease; }
.uh-hero .eyebrow::before { background: var(--uh-env); transition: background 0.7s ease; }
.uh-hero .hl { background: var(--uh-env); color: var(--uh-ink); transition: background 0.7s ease, color 0.7s ease; }
.uh-hero .btn--solid { background: var(--uh-env); color: var(--uh-ink); transition: background 0.7s ease, color 0.7s ease, filter 0.2s ease; }
.uh-hero .btn--solid:hover { background: var(--uh-env); filter: brightness(0.88); }
.uh-stagewrap, .uh-hero .hero-ctas { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.uh-hero.uh-live .uh-stagewrap { opacity: 1; transform: none; transition-delay: 0.22s; }
.uh-hero.uh-live .hero-ctas { opacity: 1; transform: none; transition-delay: 0.4s; }
.no-js .uh-stagewrap, .no-js .hero-ctas, .no-js .uh-cue { opacity: 1; transform: none; }
@media (max-width: 374px) {
  .uh-hero h1 { font-size: clamp(2rem, 11.4vw, 2.4rem); }
}

/* ================= HOME · En números ================= */
.stats-band { padding-block: clamp(64px, 9vw, 110px); }
.stats-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.stats-title { margin: 0; text-align: right; font-size: clamp(1.8rem, 3.6vw, 2.9rem); }
.stats-band .stat { padding: 30px 26px 36px; }
.stats-band .stat b { color: #fff; font-size: clamp(2.6rem, 4.6vw, 4.2rem); }
.stats-band .stat--hl b { color: var(--naranja); }
.stats-band .stat small { margin-top: 12px; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; line-height: 1.6; }
.stats-band .stats { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .stats-band .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .stats-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .stats-title { text-align: left; }
}
@media (max-width: 480px) { .stats-band .stats { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .hero h1 .line > span { animation: none; transform: none; }
  .hero-block--a, .hero-block--b { animation: none; }
  .marquee-track { animation: none; }
  .step::after { transition: none; }
  .hero-glow { display: none; }
  .uh-draw { animation: none !important; stroke-dashoffset: 0; }
  .uh-cue svg { animation: none; }
  .uh-stagewrap, .uh-hero .hero-ctas, .uh-cue { opacity: 1; transform: none; transition: none; }
}

/* ================= PÁGINAS DE LÍNEA · bloque de presentación premium (encargo §8) ================= */
.linea {
  --linea: var(--naranja);
  --linea-luz: color-mix(in srgb, var(--linea) 82%, #ffffff);
  --linea-sombra: color-mix(in srgb, var(--linea) 74%, #000000);
  --line: var(--linea); /* compatibilidad con componentes existentes */
}
/* fondo: Negro Carbón + fibra de carbono sutil en CSS puro + retícula técnica */
.lp-hero {
  position: relative; color: var(--ink-light);
  background:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.025) 0 1px, transparent 1px 4px),
    var(--carbon);
  background-size: 72px 72px, 72px 72px, auto, auto, auto;
  padding-block: clamp(80px, 10vw, 140px);
  padding-top: clamp(130px, 14vw, 190px);
  overflow: hidden;
}
/* logotipo de submarca: PNG oficial tal cual, fondo transparente, centrado,
   sin recuadro, borde, contorno ni fondo adicional (Dirección, 27-ago-2026).
   Tamaño contenido: arriba y centrado, sin abarcar de lado a lado en ninguna pantalla. */
.lp-logo { margin: clamp(8px, 2vw, 18px) 0 clamp(40px, 6vw, 64px); text-align: center; }
.lp-logo img { display: block; width: min(64%, 320px); height: auto; margin-inline: auto; }
@media (max-width: 560px) { .lp-logo img { width: min(70%, 250px); } }
.lp-copy .eyebrow { color: var(--muted-on-dark); }
/* El bloque de texto del hero de línea: alineado a la izquierda en pantallas
   grandes (estilo original) y centrado bajo el logo solo en celular
   (indicación de Dirección, 27-ago-2026). */
@media (max-width: 700px) {
  .lp-copy--center { max-width: 860px; margin-inline: auto; text-align: center; }
  .lp-copy--center .lp-desc { margin-inline: auto; }
  .lp-copy--center .lp-chips { justify-content: center; }
  .lp-copy--center .lp-ctas { justify-content: center; }
}
.lp-copy .eyebrow::before { background: var(--linea); }
.lp-copy h1 {
  font-family: var(--anton); font-weight: 400; text-transform: uppercase;
  color: #ffffff; font-size: clamp(2.6rem, 5vw, 4.2rem);
  line-height: 0.95; letter-spacing: 0.01em; margin: 0 0 14px;
}
.lp-sub {
  display: block; font-family: var(--mont); font-weight: 700; text-transform: uppercase;
  color: var(--linea); font-size: 0.8rem; letter-spacing: 0.18em; margin-bottom: 26px;
}
.lp-desc { color: #d8d6d4; font-size: 1.02rem; line-height: 1.75; max-width: 62ch; margin: 0 0 26px; }
/* cápsulas metálicas "¿Qué hacemos?" */
.lp-chips-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-on-dark); margin-bottom: 12px; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 11px; margin: 0 0 30px; padding: 0; list-style: none; }
.lp-chips li {
  display: inline-flex; align-items: center; min-height: 44px; max-width: 100%;
  padding: 10px 18px; border-radius: 999px;
  background: var(--metal-medio);
  border: 1px solid color-mix(in srgb, var(--linea) 55%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  color: #e8e6e4; font-size: 0.83rem; font-weight: 600; line-height: 1.35;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.lp-chips li:hover { border-color: var(--linea); transform: translateY(-2px); }
/* botones */
.lp-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.lp-btn-main {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 17px 30px; border-radius: 5px; border: none; cursor: pointer; text-decoration: none;
  font-family: var(--mont); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em;
  color: var(--carbon);
  background: linear-gradient(160deg, var(--linea-luz) 0%, var(--linea) 45%, var(--linea-sombra) 100%);
  background-size: 130% 130%; background-position: 0% 0%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
  transition: background-position 0.3s ease;
}
.lp-btn-main:hover { background-position: 90% 90%; }
.lp-btn-main .arr { transition: transform 0.2s ease; }
.lp-btn-main:hover .arr { transform: translateX(4px); }
.lp-btn-main:focus-visible, .lp-ctas .btn--ghost-light:focus-visible { outline: 3px solid var(--linea); outline-offset: 3px; }
.lp-ctas .btn--ghost-light { border-width: 1.5px; border-color: rgba(255,255,255,0.45); }
/* los cuatro pasos numerados */
.lp-steps-band { margin-top: clamp(72px, 9vw, 110px); padding-top: clamp(40px, 5vw, 56px); border-top: 1px solid var(--line-on-dark); }
.lp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; padding: 0; margin: 0; }
@media (max-width: 960px) { .lp-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lp-steps { grid-template-columns: 1fr; } }
.lp-step {
  position: relative; border-radius: 6px; padding: 26px 22px 24px;
  background: radial-gradient(120% 100% at 50% 0%, #2f2d2d 0%, #232222 60%, #1e1d1d 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 34px rgba(0,0,0,0.3);
  transition: transform 0.22s ease, filter 0.22s ease;
}
.lp-step::before {
  content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 34%;
  background: var(--linea); border-radius: 2px 0 0 0;
  transition: width 0.26s ease;
}
.lp-step:hover { transform: translateY(-4px); filter: brightness(1.06); }
.lp-step:hover::before { width: 100%; }
.lp-step .k { font-family: var(--anton); font-size: 2rem; color: var(--linea); display: block; }
.lp-step b { font-family: var(--anton); font-weight: 400; text-transform: uppercase; color: #fff; display: block; margin: 8px 0 6px; font-size: 1.02rem; }
.lp-step p { margin: 0; color: #a6a6a6; font-size: 0.86rem; }
@media (prefers-reduced-motion: reduce) {
  .lp-step, .lp-step::before, .lp-chips li, .lp-btn-main { transition: none; }
  .lp-step:hover { transform: none; filter: none; }
  .lp-step:hover::before { width: 34%; }
}
/* dentro de una página de línea, el método toma el acento de la línea (Manual §08) */
.linea .step .k { color: var(--linea); }
.linea .step::after { background: var(--linea); }
.linea .eyebrow::before { background: var(--linea); }
.linea ::selection { background: var(--linea); color: var(--carbon); }

/* ================= PÁGINAS DE LÍNEA · secciones de contenido ================= */
.lp-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 860px) { .lp-two { grid-template-columns: 1fr; } }
.lp-list { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 9px; font-size: 0.95rem; }
.band--light .lp-list { color: #44413f; }
.band--dark .lp-list { color: #d8d6d4; }
.lp-h3 { font-family: var(--anton); font-weight: 400; text-transform: uppercase; font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin: 0 0 10px; }
.lp-kicker { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 10px; }
.band--light .lp-kicker { color: var(--muted-on-light); }
.band--dark .lp-kicker { color: var(--muted-on-dark); }
.lp-note { font-size: 0.78rem; margin-top: 26px; }
.band--light .lp-note { color: var(--muted-on-light); }
.band--dark .lp-note { color: var(--muted-on-dark); }
/* tablas comparativas (checklist SEO #11) */
.lp-table-wrap { overflow-x: auto; margin-top: 26px; }
.lp-table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 0.9rem; }
.lp-table th, .lp-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line-on-light); vertical-align: top; }
.band--dark .lp-table th, .band--dark .lp-table td { border-color: var(--line-on-dark); }
.lp-table th { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.band--light .lp-table th { color: var(--muted-on-light); }
.band--dark .lp-table th { color: var(--muted-on-dark); }
.lp-table td b { font-weight: 700; }
/* enlaces relacionados */
.lp-rel { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 30px; }
.lp-rel a {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: var(--carbon-2); border: 1px solid var(--line-on-dark); border-radius: 8px;
  padding: 18px 20px; color: #e8e6e4; min-height: 64px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.lp-rel a:hover, .lp-rel a:focus-visible { transform: translateY(-3px); border-color: var(--rel, var(--naranja)); color: #fff; }
.lp-rel img { width: 40px; height: auto; flex: none; }
.lp-rel b { display: block; font-size: 0.92rem; }
.lp-rel small { display: block; font-size: 0.74rem; color: var(--muted-on-dark); }

/* ================= Herramientas interactivas de línea (Fase 4) ================= */
.tool-card {
  background: var(--carbon-2); border: 1px solid var(--line-on-dark);
  border-top: 3px solid var(--linea, var(--naranja)); border-radius: 10px;
  padding: clamp(24px, 3.4vw, 40px);
}
.tool-lede { color: #d8d6d4; font-size: 0.95rem; margin: 0; max-width: 66ch; }
.tool-seg { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.tool-seg button {
  min-height: 44px; padding: 10px 16px; border-radius: 999px;
  background: var(--metal-medio); border: 1px solid var(--line-on-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  color: #e8e6e4; font-family: var(--mont); font-weight: 600; font-size: 0.85rem; cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.tool-seg button:hover { border-color: var(--linea, var(--naranja)); transform: translateY(-2px); }
.tool-seg button[aria-pressed="true"] {
  border-color: var(--linea, var(--naranja));
  background: color-mix(in srgb, var(--linea, var(--naranja)) 16%, var(--metal-medio));
  color: #fff;
}
.tool-seg button:focus-visible { outline: 3px solid var(--linea, var(--naranja)); outline-offset: 2px; }
.tool-result { margin-top: 24px; border-top: 1px solid var(--line-on-dark); padding-top: 20px; }
.tool-result[hidden] { display: none; }
.tool-result h3 { font-family: var(--anton); font-weight: 400; text-transform: uppercase; font-size: 1.15rem; margin: 0 0 10px; color: #fff; }
.tool-result p { color: #d8d6d4; font-size: 0.93rem; margin: 0 0 10px; }
.tool-result ul { margin: 8px 0 0; padding-left: 20px; color: #d8d6d4; font-size: 0.92rem; display: grid; gap: 7px; }
.tool-badges { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 16px; padding: 0; list-style: none; }
.tool-badges li {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 7px 12px; border-radius: 4px;
  border: 1px solid var(--line-on-dark); color: var(--muted-on-dark);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.tool-badges li.on { background: var(--linea, var(--naranja)); color: var(--carbon); border-color: var(--linea, var(--naranja)); }
.tool-note { font-size: 0.78rem; color: var(--muted-on-dark); margin: 16px 0 0; }
.tool-cta-row { margin-top: 20px; display: flex; gap: 14px; flex-wrap: wrap; }
/* autoevaluación ESG: enunciados con Sí / En parte / No */
.et-item { border-bottom: 1px solid var(--line-on-dark); padding: 14px 0; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.et-item p { margin: 0; color: #e8e6e4; font-size: 0.92rem; flex: 1 1 300px; }
.et-item .tool-seg { margin: 0; flex: none; }
.et-item .tool-seg button { min-height: 40px; padding: 8px 14px; font-size: 0.8rem; }
.et-pilar { font-family: var(--anton); font-weight: 400; text-transform: uppercase; color: var(--linea, var(--naranja)); font-size: 1.05rem; margin: 26px 0 4px; }
.et-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 14px 0 6px; }
.et-level { border: 1px solid var(--line-on-dark); border-radius: 8px; padding: 16px; }
.et-level b { display: block; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-on-dark); margin-bottom: 6px; }
.et-level span { font-family: var(--anton); text-transform: uppercase; font-size: 1.05rem; color: var(--linea, var(--naranja)); }
/* mapa de desperdicio (Agua y Suelo): diagrama de flujo */
.at-diag { margin: 22px 0 8px; }
.at-diag svg { width: 100%; height: auto; display: block; }
.at-node { fill: var(--carbon); stroke: rgba(255,255,255,0.25); stroke-width: 1; transition: stroke 0.25s ease, fill 0.25s ease; }
.at-node.on { stroke: var(--linea); stroke-width: 2; fill: color-mix(in srgb, var(--linea) 14%, var(--carbon)); }
.at-label { fill: #e8e6e4; font-family: var(--mont); font-size: 13px; font-weight: 600; }
.at-flow { stroke: rgba(255,255,255,0.3); stroke-width: 1.4; fill: none; }
.at-flow.on { stroke: var(--linea); stroke-width: 2; }
/* selects del configurador Movimientos */
.tool-selects { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 18px; }
.tool-selects label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-on-dark); display: grid; gap: 7px; min-width: 0; }
.tool-selects select {
  font-family: var(--mont); font-size: 0.95rem; color: #fff;
  background: var(--carbon); border: 1px solid var(--carbon-3); border-radius: 5px; padding: 12px 14px;
  width: 100%; min-width: 0;
}
.tool-selects select:focus-visible { outline: 3px solid var(--linea, var(--naranja)); outline-offset: 2px; }
/* tabla de sistemas de referencia (Energía y Luz) */
.ex-pan-det { margin-top: 22px; }
.ex-pan-det summary { cursor: pointer; font-weight: 700; font-size: 0.88rem; color: #e8e6e4; min-height: 44px; display: flex; align-items: center; }
.ex-pan-det summary:focus-visible { outline: 3px solid var(--sol); outline-offset: 3px; }
.ex-pan-det .lp-table th, .ex-pan-det .lp-table td { border-color: var(--line-on-dark); color: #d8d6d4; }

/* ================= Energía y Luz · elevación premium del bloque de presentación (§8.10) ================= */
.energia .ex-hero {
  background:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.025) 0 1px, transparent 1px 4px),
    var(--carbon);
  background-size: 72px 72px, 72px 72px, auto, auto, auto;
}
.energia .ex-hero { overflow: hidden; } /* recorta la banda extendida del logo */
.energia .ex-hero-side .ex-trust { margin-top: 0; }
/* la etiqueta "Servicio estrella" es un span inline: sin inline-block su margen
   inferior no empuja al título y se ve encimada. Separación aprobada por
   Dirección: 28 px (bitácora 53) */
.energia .ex-svc .tag { display: inline-block; margin-bottom: 28px; }

/* ================= /soluciones/ · página pillar ================= */
.pillar-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.pillar-card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  background: var(--carbon-2); border: 1px solid var(--line-on-dark); border-top: 3px solid var(--pc, var(--naranja));
  border-radius: 10px; padding: 28px 26px;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.pillar-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.35); }
.pillar-card img { width: 56px; height: auto; }
.pillar-card h2 { font-family: var(--anton); font-weight: 400; text-transform: uppercase; font-size: 1.3rem; margin: 0; }
.pillar-card .psub { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-on-dark); }
.pillar-card p { margin: 0; color: #d8d6d4; font-size: 0.92rem; flex: 1; }
.pillar-card .plink { color: #fff; font-weight: 700; font-size: 0.88rem; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.pillar-card .plink .arr { transition: transform 0.2s ease; }
.pillar-card .plink:hover .arr, .pillar-card .plink:focus-visible .arr { transform: translateX(4px); }
.pillar-card .plink:focus-visible { outline: 3px solid var(--pc, var(--naranja)); outline-offset: 3px; }
.pillar-card a.stretch::after { content: ""; position: absolute; inset: 0; }

/* ================= Páginas de texto (nosotros / legal) ================= */
.prose { max-width: 76ch; }
.prose h2 { font-family: var(--anton); font-weight: 400; text-transform: uppercase; font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin: 40px 0 12px; }
.prose h3 { font-size: 1.02rem; margin: 28px 0 8px; }
.prose p, .prose li { font-size: 0.97rem; }
.band--light .prose p, .band--light .prose li { color: #44413f; }
.band--dark .prose p, .band--dark .prose li { color: #d8d6d4; }
.prose ul, .prose ol { padding-left: 22px; display: grid; gap: 8px; }
.prose a { color: inherit; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--naranja); }
.aviso-borrador {
  border: 1.5px dashed var(--naranja); border-radius: 8px; padding: 16px 20px;
  font-size: 0.85rem; font-weight: 600; max-width: 76ch; margin-bottom: 34px;
}


/* ================= PÁGINA ENERGÍA Y LUZ (namespace ex-) ================= */

/* ============================================================
   Página extendida · ENERGÍA Y LUZ · namespace ex- (ago-2026)
   Se muestra con body.energia-open (router #linea-0).
   Reutiliza tokens y componentes del sitio; accent: var(--sol).
   ============================================================ */
.energia{display:none;}
body.energia-open .energia{display:block;}
body.energia-open .home-view{display:none;}
body.energia-open .hoja{display:none;}
.energia:focus{outline:none;}
.energia .band{padding-block:clamp(64px,9vw,110px); scroll-margin-top:126px;}
.energia .eyebrow::before{background:var(--sol);}
.energia ::selection{background:var(--sol); color:var(--carbon);}
.energia .display .exhl{background:var(--sol); color:var(--carbon); padding-inline:0.14em; box-decoration-break:clone; -webkit-box-decoration-break:clone;}
.ex-micro{font-size:0.74rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted-on-dark); margin:16px 0 0;}
.ex-tagchip{display:inline-block; background:var(--sol); color:var(--carbon); font-size:0.66rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:6px 10px; border-radius:3px;}
.ex-note{font-size:0.78rem; color:var(--muted-on-dark); max-width:80ch;}
.band--light .ex-note{color:var(--muted-on-light);}
.ex-disc{margin-top:clamp(28px,4vw,40px); padding-top:18px; border-top:1px solid var(--line-on-dark); font-size:0.78rem; color:var(--muted-on-dark); max-width:86ch;}
.band--light .ex-disc{border-color:var(--line-on-light); color:var(--muted-on-light);}

/* ---------- 01 · Hero ---------- */
.energia .ex-hero{padding-top:150px;}
@media (max-width:480px){ .energia .ex-hero{padding-top:160px;} }
.ex-hero-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:clamp(30px,5vw,70px); align-items:start;}
@media (max-width:900px){ .ex-hero-grid{grid-template-columns:1fr;} }
.energia .ex-hero h1.display{font-size:clamp(2.3rem,5.6vw,4.6rem);}
.ex-hero h1 span{display:block;}
.ex-hero .lede{margin-top:22px;}
.ex-hero-side{display:grid; gap:18px;}
.ex-hero-logo{border-top:3px solid var(--sol); max-width:380px;}
.ex-trust{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0;}
.ex-trust li{font-size:0.7rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted-on-dark); border:1px solid var(--line-on-dark); border-radius:4px; padding:6px 10px;}
.ex-trust li::before{content:""; display:inline-block; width:7px; height:11px; background:var(--sol); margin-right:8px; vertical-align:-1px;}
.ex-aud{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:clamp(34px,5vw,54px); padding-top:22px; border-top:1px solid var(--line-on-dark);}
.ex-aud-label{font-size:0.72rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted-on-dark); margin-right:6px;}
.ex-aud button{background:none; border:1px solid var(--line-on-dark); border-radius:4px; color:#d8d6d4; font-family:var(--mont); font-weight:600; font-size:0.82rem; padding:8px 14px; cursor:pointer; transition:color .2s, border-color .2s, background .2s;}
.ex-aud button:hover{color:#fff; border-color:rgba(255,255,255,0.4);}
.ex-aud button.active{background:var(--sol); border-color:var(--sol); color:var(--carbon); font-weight:700;}
.ex-aud button:focus-visible{outline:3px solid var(--sol); outline-offset:2px;}

/* ---------- Subnavegación sticky ---------- */
.ex-nav{position:sticky; top:var(--ex-navh, 66px); z-index:40; background:rgba(33,32,32,0.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-block:1px solid var(--line-on-dark);}
.ex-nav-inner{display:flex; gap:clamp(14px,2.4vw,30px); overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.ex-nav-inner::-webkit-scrollbar{display:none;}
.ex-nav a{flex:none; color:var(--muted-on-dark); text-decoration:none; font-size:0.8rem; font-weight:600; padding-block:13px 11px; border-bottom:2px solid transparent; transition:color .2s, border-color .2s;}
.ex-nav a:hover{color:#fff;}
.ex-nav a.active{color:#fff; border-color:var(--sol);}
.ex-nav a:focus-visible{outline:2px solid var(--sol); outline-offset:-2px;}

/* ---------- 02 · Tesis Reducir / Optimizar / Generar ---------- */
.ex-verbs{position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.ex-verbs::before{content:""; position:absolute; top:44px; left:10%; right:10%; height:2px; background:linear-gradient(90deg, var(--sol), rgba(222,154,43,0.2)); pointer-events:none;}
@media (max-width:860px){ .ex-verbs{grid-template-columns:1fr;} .ex-verbs::before{display:none;} }
.ex-verb{position:relative; background:var(--paper-2); border:1px solid var(--line-on-light); border-radius:8px; padding:30px 26px 26px; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;}
.ex-verb:hover{transform:translateY(-4px); box-shadow:0 16px 36px rgba(33,32,32,0.1); border-color:var(--sol-deep);}
.ex-verb .n{position:relative; z-index:1; display:inline-block; font-family:var(--anton); font-size:1rem; color:var(--carbon); background:var(--sol); padding:6px 10px; margin-bottom:16px;}
.ex-verb b{font-family:var(--anton); font-weight:400; text-transform:uppercase; font-size:1.35rem; display:block; margin-bottom:8px; color:var(--carbon);}
.ex-verb p{margin:0 0 18px; color:var(--muted-on-light); font-size:0.93rem;}
.ex-verb .kpi{font-size:0.68rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--sol-deep); border-top:1px solid var(--line-on-light); padding-top:12px; display:block;}

/* ---------- 03 · Servicios core ---------- */
.ex-core{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
@media (max-width:860px){ .ex-core{grid-template-columns:1fr;} }
.ex-svc{background:var(--carbon-2); border:1px solid var(--line-on-dark); border-radius:10px; padding:clamp(24px,3vw,34px); display:flex; flex-direction:column; align-items:flex-start; gap:0; transition:transform .25s ease, border-color .25s ease;}
.ex-svc:hover{transform:translateY(-4px); border-color:rgba(255,189,89,0.5);}
.ex-svc .tag{font-size:0.64rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--sol); border:1px solid rgba(255,189,89,0.45); border-radius:4px; padding:5px 9px; margin-bottom:16px;}
.ex-svc h3{font-family:var(--anton); font-weight:400; text-transform:uppercase; font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.05; margin:0 0 10px;}
.ex-svc p{margin:0 0 14px; color:#d8d6d4; font-size:0.93rem;}
.ex-svc .ben{font-size:0.85rem; font-weight:700; color:#fff; margin:0 0 18px;}
.ex-svc .ben::before{content:""; display:inline-block; width:8px; height:12px; background:var(--sol); margin-right:9px; vertical-align:-1px;}
.ex-svc .go{margin-top:auto; font-weight:700; font-size:0.88rem; color:var(--sol); text-decoration:none; display:inline-flex; align-items:center; gap:8px;}
.ex-svc .go .arr{transition:transform .2s ease;}
.ex-svc .go:hover .arr{transform:translateX(4px);}
.ex-svc .go:focus-visible{outline:2px solid var(--sol); outline-offset:3px;}
.ex-svc--star{grid-column:1 / -1; border-top:3px solid var(--sol); display:grid; grid-template-columns:1.2fr 0.8fr; gap:clamp(20px,3vw,44px); align-items:center;}
@media (max-width:860px){ .ex-svc--star{grid-template-columns:1fr;} }
.ex-svc--star .tag{background:var(--sol); color:var(--carbon); border-color:var(--sol);}
.ex-svc--star h3{font-size:clamp(1.6rem,3vw,2.2rem);}
.ex-svc-star-side{display:grid; gap:10px; border-left:1px solid var(--line-on-dark); padding-left:clamp(18px,2.4vw,34px);}
@media (max-width:860px){ .ex-svc-star-side{border-left:none; border-top:1px solid var(--line-on-dark); padding-left:0; padding-top:18px;} }
.ex-svc-star-side li{list-style:none; font-size:0.88rem; color:#d8d6d4;}
.ex-svc-star-side ul{margin:0; padding:0; display:grid; gap:9px;}
.ex-svc-star-side li::before{content:""; display:inline-block; width:8px; height:12px; background:var(--sol); margin-right:10px; vertical-align:-1px;}

/* ---------- 04 · Solar Intelligence ---------- */
.ex-flowline{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:clamp(26px,4vw,40px) 0;}
.ex-flowline .f{font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--carbon); background:var(--paper-2); border:1px solid rgba(33,32,32,0.25); border-radius:4px; padding:9px 12px;}
.ex-flowline .fa{color:var(--sol-deep); font-weight:700;}
.ex-solar-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(30px,5vw,64px); align-items:start;}
@media (max-width:860px){ .ex-solar-grid{grid-template-columns:1fr;} }
.ex-deliv{margin:18px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:10px 22px;}
@media (max-width:560px){ .ex-deliv{grid-template-columns:1fr;} }
.ex-deliv li{font-size:0.88rem; color:#44413f;}
.ex-deliv li::before{content:""; display:inline-block; width:8px; height:12px; background:var(--sol-deep); margin-right:10px; vertical-align:-1px;}
.ex-pipe{list-style:none; margin:0; padding:0; position:relative;}
.ex-pipe::before{content:""; position:absolute; left:10px; top:12px; bottom:12px; width:2px; background:linear-gradient(var(--sol), rgba(222,154,43,0.15));}
.ex-pipe li{position:relative; padding:0 0 18px 36px; font-size:0.9rem; color:#44413f;}
.ex-pipe li:last-child{padding-bottom:0;}
.ex-pipe li::before{content:""; position:absolute; left:4px; top:4px; width:14px; height:14px; border-radius:50%; background:var(--paper); border:3px solid var(--sol-deep);}
.ex-pipe b{font-family:var(--anton); font-weight:400; text-transform:uppercase; font-size:0.95rem; display:block; color:var(--carbon);}
.ex-quote{font-family:var(--anton); font-weight:400; text-transform:uppercase; font-size:clamp(1.1rem,2vw,1.4rem); color:var(--carbon); border-left:4px solid var(--sol); padding-left:16px; margin:clamp(26px,4vw,40px) 0 0;}

/* ---------- 05 · Calculadora + dashboard ---------- */
.ex-calcgrid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(30px,5vw,64px); align-items:start;}
@media (max-width:900px){ .ex-calcgrid{grid-template-columns:1fr;} }
.energia .mini-form label{color:var(--muted-on-dark);}
.ex-form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:480px){ .ex-form-row{grid-template-columns:1fr;} }
.ex-seg{display:flex; gap:0; border:1px solid var(--carbon-3); border-radius:5px; overflow:hidden;}
.ex-seg button{flex:1; background:var(--carbon); border:none; color:var(--muted-on-dark); font-family:var(--mont); font-weight:700; font-size:0.82rem; padding:12px 10px; cursor:pointer; transition:background .2s, color .2s; min-height:44px;}
.ex-seg button + button{border-left:1px solid var(--carbon-3);}
.ex-seg button[aria-pressed="true"]{background:var(--sol); color:var(--carbon);}
.ex-seg button:focus-visible{outline:2px solid var(--sol); outline-offset:-3px;}
.energia .mini-form .btn--sol{justify-content:center;}
.ex-err{display:none; font-size:0.8rem; font-weight:600; color:#ffb4a3; margin:0;}
.ex-err.show{display:block;}
.ex-optchip{font-size:0.62rem; font-weight:700; letter-spacing:0.1em; color:var(--muted-on-dark); border:1px solid var(--carbon-3); border-radius:3px; padding:2px 6px; margin-left:8px; vertical-align:1px;}
.ex-dash{margin-top:clamp(36px,5vw,56px); border:1px solid var(--line-on-dark); border-top:3px solid var(--sol); border-radius:10px; background:var(--carbon-2); padding:clamp(24px,3.4vw,40px); display:none;}
.ex-dash.on{display:block;}
.ex-dash-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px;}
.ex-dash-head .t{font-size:0.72rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted-on-dark);}
.ex-dash-sum{font-size:0.85rem; color:var(--muted-on-dark); margin:0 0 18px;}
.ex-dash h3{font-family:var(--anton); font-weight:400; text-transform:uppercase; font-size:clamp(1.3rem,2.6vw,1.9rem); margin:0 0 24px; max-width:26ch;}
.ex-dash h3 .num{color:var(--sol);}
.ex-calcing{display:none; align-items:center; gap:14px; padding:26px 0; color:#d8d6d4; font-size:0.92rem;}
.ex-dash[data-state="calculating"] .ex-calcing{display:flex;}
.ex-dash[data-state="calculating"] .ex-dash-body{display:none;}
.ex-spin{width:22px; height:22px; border-radius:50%; border:3px solid var(--carbon-3); border-top-color:var(--sol); animation:exspin 0.8s linear infinite; flex:none;}
@keyframes exspin{to{transform:rotate(360deg);}}
.ex-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px; background:var(--line-on-dark); border:1px solid var(--line-on-dark); margin-bottom:20px;}
.ex-kpi{background:var(--carbon); padding:22px 20px;}
.ex-kpi b{display:block; font-family:var(--anton); font-weight:400; font-size:clamp(1.7rem,3vw,2.4rem); line-height:1; color:var(--sol); font-variant-numeric:tabular-nums; min-height:1em;}
.ex-kpi small{display:block; margin-top:9px; color:var(--muted-on-dark); font-size:0.68rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; line-height:1.5;}
.ex-kpi.pend b{font-family:var(--mont); font-weight:700; font-size:0.85rem; color:var(--muted-on-dark); text-transform:none; line-height:1.4; padding-top:8px;}
.ex-sys{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:4px 0 18px;}
.ex-sys .lbl{font-size:0.68rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted-on-dark); margin-right:4px;}
.ex-sys button{background:none; border:1px solid var(--carbon-3); border-radius:4px; color:#d8d6d4; font-family:var(--mont); font-weight:700; font-size:0.84rem; padding:9px 13px; cursor:pointer; transition:border-color .2s, color .2s, background .2s; min-height:40px;}
.ex-sys button:hover{border-color:var(--sol);}
.ex-sys button.active{background:var(--sol); border-color:var(--sol); color:var(--carbon);}
.ex-sys button:focus-visible{outline:2px solid var(--sol); outline-offset:2px;}
.ex-dash-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:20px;}
.ex-lead{margin-top:24px; border-top:1px solid var(--line-on-dark); padding-top:22px;}
.ex-lead p.q{font-weight:700; color:#fff; margin:0 0 14px; font-size:0.95rem;}
.ex-lead .fields{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:12px;}
@media (max-width:720px){ .ex-lead .fields{grid-template-columns:1fr;} }
.ex-partial{display:none; border-top:1px solid var(--line-on-dark); margin-top:6px; padding-top:18px;}
.ex-partial.on{display:block;}
.ex-partial p{color:#d8d6d4; font-size:0.92rem; margin:0 0 14px; max-width:70ch;}

/* ---------- 06 · Escenarios de cobertura ---------- */
.ex-esc-note{margin-top:20px; padding-top:16px; border-top:1px solid var(--line-on-light); font-size:0.78rem; color:var(--muted-on-light);}
.ex-esc-eyebrow{display:block; color:var(--sol-deep); font-weight:700; font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; margin-bottom:8px;}
.ex-esc-use{margin-top:20px; background:none; border:none; cursor:pointer; font-family:var(--mont); font-weight:700; font-size:0.86rem; color:var(--carbon); padding:0; border-bottom:2px solid var(--sol-deep); transition:color .2s;}
.ex-esc-use:hover{color:var(--sol-deep);}
.ex-esc-use:focus-visible{outline:2px solid var(--sol-deep); outline-offset:3px;}

/* ---------- 07 · BESS + flujo energético ---------- */
.ex-bess-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(30px,5vw,60px); align-items:start;}
@media (max-width:900px){ .ex-bess-grid{grid-template-columns:1fr;} }
.ex-seg--bess{max-width:420px; margin:24px 0;}
.ex-bess-mode h3{font-family:var(--anton); font-weight:400; text-transform:uppercase; font-size:1.3rem; margin:0 0 10px;}
.ex-bess-mode p{color:#d8d6d4; font-size:0.94rem; margin:0 0 12px; max-width:56ch;}
.ex-bess-mode ul{margin:0 0 12px; padding-left:18px; color:#d8d6d4; font-size:0.9rem; display:grid; gap:6px;}
.ex-bessdiag{background:var(--carbon-2); border:1px solid var(--line-on-dark); border-radius:10px; padding:clamp(14px,2vw,24px);}
.ex-bessdiag svg{width:100%; height:auto; display:block;}
.ex-bessdiag .nodo rect{fill:var(--carbon); stroke:rgba(255,255,255,0.28); stroke-width:1.2;}
.ex-bessdiag .nodo text{fill:#e8e6e4; font-family:var(--mont); font-weight:700; font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase;}
.ex-bessdiag .nodo .sub{fill:var(--muted-on-dark); font-size:9.5px; font-weight:600; letter-spacing:0.06em;}
.ex-bessdiag .cable{stroke:rgba(255,255,255,0.16); stroke-width:1.4; fill:none;}
.ex-bessdiag .flujo{stroke:var(--sol); stroke-width:2.2; fill:none; stroke-dasharray:5 9; opacity:0; transition:opacity .35s ease;}
.ex-bessdiag .flujo.on{opacity:1; animation:exflow 1.1s linear infinite;}
@keyframes exflow{to{stroke-dashoffset:-14;}}
.ex-bessdiag .nodo{transition:opacity .35s ease;}
.ex-bessdiag .nodo.dim{opacity:0.28;}
.ex-bessdiag .tacha{stroke:rgba(255,255,255,0.5); stroke-width:1.6; opacity:0; transition:opacity .35s ease;}
.ex-bessdiag .tacha.on{opacity:1;}
@media (prefers-reduced-motion: reduce){ .ex-bessdiag .flujo.on{animation:none;} }

/* ---------- 08 · Certificaciones ---------- */
.ex-certgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:900px;}
@media (max-width:720px){ .ex-certgrid{grid-template-columns:1fr;} }
.ex-cert-card{background:var(--paper-2); border:1px solid var(--line-on-light); border-top:3px solid var(--sol); border-radius:8px; padding:30px 26px;}
.ex-cert-card .code{font-family:var(--anton); font-weight:400; font-size:clamp(1.8rem,3.4vw,2.6rem); color:var(--carbon); display:block; line-height:1;}
.ex-cert-card .chip{display:inline-block; font-size:0.64rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; background:var(--sol); color:var(--carbon); border-radius:3px; padding:5px 9px; margin:14px 0;}
.ex-cert-card b{display:block; font-family:var(--anton); font-weight:400; text-transform:uppercase; font-size:1.05rem; color:var(--carbon); margin-bottom:8px;}
.ex-cert-card p{margin:0; color:var(--muted-on-light); font-size:0.9rem;}

/* ---------- 09 · Ecosistema interactivo ---------- */
.ex-eco-stage{position:relative; background:var(--carbon-2); border:1px solid var(--line-on-dark); border-radius:10px; overflow:visible; padding:clamp(10px,1.6vw,22px);}
.ex-eco-stage svg{width:100%; height:auto; display:block;}
.ex-eco-svg .tr{stroke:rgba(255,255,255,0.32); stroke-width:1.3; fill:none;}
.ex-eco-svg .tf{fill:rgba(255,255,255,0.05); stroke:rgba(255,255,255,0.32); stroke-width:1.3;}
.ex-eco-svg .ac{stroke:var(--sol); fill:none; stroke-width:1.5;}
.ex-eco-svg .af{fill:var(--sol);}
.ex-eco-svg .afs{fill:rgba(255,189,89,0.18); stroke:var(--sol); stroke-width:1.3;}
.ex-eco-svg text{fill:var(--muted-on-dark); font-family:var(--mont); font-weight:600; font-size:11px; letter-spacing:0.08em;}
.ex-hs{position:absolute; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; background:var(--carbon); border:1.5px solid var(--sol); color:var(--sol); font-family:var(--mont); font-weight:700; font-size:0.74rem; cursor:pointer; z-index:4; transition:background .2s, color .2s;}
.ex-hs:hover, .ex-hs[aria-expanded="true"]{background:var(--sol); color:var(--carbon);}
.ex-hs::after{content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid rgba(255,189,89,0.45); animation:exhs 2.6s ease-out infinite;}
@keyframes exhs{0%{transform:scale(0.85); opacity:0.9;} 70%{transform:scale(1.25); opacity:0;} 100%{opacity:0;}}
.ex-hs:focus-visible{outline:3px solid var(--sol); outline-offset:3px;}
.ex-hs-card{position:absolute; width:min(300px,44%); background:var(--carbon-2); border:1px solid var(--line-on-dark); border-top:3px solid var(--sol); border-radius:8px; padding:18px 18px 16px; z-index:5; display:none; box-shadow:0 18px 44px rgba(0,0,0,0.45);}
.ex-hs-card.open{display:block;}
.ex-hs-card b{font-family:var(--anton); font-weight:400; text-transform:uppercase; font-size:1rem; display:block; margin-bottom:6px;}
.ex-hs-card p{margin:0 0 8px; color:#d8d6d4; font-size:0.84rem;}
.ex-hs-card .ben{font-size:0.76rem; font-weight:700; color:var(--sol); margin:0 0 10px;}
.ex-hs-card a{font-size:0.8rem; font-weight:700; color:#fff; text-decoration:none; border-bottom:2px solid var(--sol);}
.ex-eco-wrap{position:relative;}
.ex-eco-list{display:contents;}
@media (max-width:860px){
  .ex-hs{display:none;}
  .ex-eco-list{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px;}
  .ex-eco-list .ex-hs-card{display:block; position:static; width:auto; box-shadow:none;}
}
@media (max-width:560px){ .ex-eco-list{grid-template-columns:1fr;} }
@media (prefers-reduced-motion: reduce){ .ex-hs::after{animation:none; opacity:0;} }

/* ---------- 10 · Portafolio 9 soluciones ---------- */
.ex-leg{display:flex; flex-wrap:wrap; gap:10px 26px; margin:0 0 clamp(28px,4vw,40px); padding:18px 20px; background:var(--paper-2); border:1px solid var(--line-on-light); border-radius:8px;}
.ex-leg span{font-size:0.78rem; color:var(--muted-on-light);}
.ex-leg b{font-size:0.68rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--carbon); margin-right:6px;}
.ex-leg b::before{content:""; display:inline-block; width:7px; height:11px; background:var(--sol-deep); margin-right:7px; vertical-align:-1px;}
.ex-port{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media (max-width:1000px){ .ex-port{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .ex-port{grid-template-columns:1fr;} }
.ex-pcard{background:var(--paper-2); border:1px solid var(--line-on-light); border-radius:8px; padding:26px 24px; display:flex; flex-direction:column; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;}
.ex-pcard:hover{transform:translateY(-4px); box-shadow:0 16px 36px rgba(33,32,32,0.1); border-color:var(--sol-deep);}
.ex-pcard .cat{align-self:flex-start; font-size:0.62rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--sol-deep); border:1px solid rgba(222,154,43,0.5); border-radius:3px; padding:4px 8px; margin-bottom:14px;}
.ex-pcard b{font-family:var(--anton); font-weight:400; text-transform:uppercase; font-size:1.08rem; color:var(--carbon); display:block; margin-bottom:8px; line-height:1.1;}
.ex-pcard p{margin:0 0 12px; color:var(--muted-on-light); font-size:0.87rem;}
.ex-pcard .ben{font-size:0.8rem; font-weight:700; color:var(--carbon); margin:0 0 14px;}
.ex-pcard .ben::before{content:""; display:inline-block; width:7px; height:11px; background:var(--sol-deep); margin-right:8px; vertical-align:-1px;}
.ex-cap{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto;}
.ex-cap span{font-size:0.6rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted-on-light); border:1px solid var(--line-on-light); border-radius:3px; padding:4px 7px;}
.ex-pcard--star{grid-column:1 / -1; border-top:3px solid var(--sol); display:grid; grid-template-columns:auto 1fr; gap:8px 40px;}
@media (max-width:720px){ .ex-pcard--star{grid-template-columns:1fr;} }
.ex-pcard--star .cat{background:var(--sol); color:var(--carbon); border-color:var(--sol);}
.ex-pcard--star b{font-size:clamp(1.3rem,2.4vw,1.7rem);}
.ex-pcard--aux{background:transparent; border-style:dashed;}
.ex-pcard--aux:hover{border-style:solid;}

/* ---------- 11 · Casos tipo ---------- */
.ex-casos{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px;}
.ex-caso{background:var(--carbon-2); border:1px solid var(--line-on-dark); border-radius:8px; padding:24px 22px; transition:border-color .3s ease, background .3s ease;}
.ex-caso.is-aud{border-color:var(--sol); background:var(--carbon-3);}
.ex-caso b{font-family:var(--anton); font-weight:400; text-transform:uppercase; font-size:1.05rem; display:block; margin-bottom:12px;}
.ex-caso .lb{display:block; font-size:0.62rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--muted-on-dark); margin:10px 0 4px;}
.ex-caso p{margin:0; color:#d8d6d4; font-size:0.85rem;}
.ex-caso .ruta{color:var(--sol); font-weight:600; font-size:0.82rem;}
.ex-caso .cita{margin-top:12px; padding-top:12px; border-top:1px solid var(--line-on-dark); font-size:0.8rem; color:var(--muted-on-dark); font-style:italic;}

/* ---------- 12 · Método (banda clara) ---------- */
.ex-steps{position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:20px;}
@media (max-width:960px){ .ex-steps{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .ex-steps{grid-template-columns:1fr;} }
.ex-step{position:relative; padding-top:22px;}
.ex-step::before{content:""; position:absolute; top:0; left:0; width:100%; height:2px; background:#dedad4;}
.ex-step::after{content:""; position:absolute; top:0; left:0; width:0; height:2px; background:var(--sol-deep); transition:width .8s cubic-bezier(0.2,0.7,0.2,1);}
.ex-step.is-in::after{width:100%;}
.ex-step .k{font-family:var(--anton); font-size:2rem; color:var(--sol-deep); display:block;}
.ex-step b{font-family:var(--anton); font-weight:400; text-transform:uppercase; display:block; margin:8px 0 6px; font-size:1.02rem; color:var(--carbon);}
.ex-step p{margin:0; color:var(--muted-on-light); font-size:0.85rem;}
@media (prefers-reduced-motion: reduce){ .ex-step::after{transition:none;} .ex-spin{animation:none;} .ex-verb, .ex-svc, .ex-pcard{transition:none;} }

/* ---------- 13 · CTA final ---------- */
.ex-cta{position:relative; overflow:hidden;}
.ex-cta::before{content:""; position:absolute; width:900px; height:900px; border-radius:50%; background:radial-gradient(circle, rgba(255,189,89,0.13) 0%, transparent 62%); top:-300px; right:-250px; pointer-events:none;}
.ex-cta .wrap{position:relative;}
.ex-cta-links{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; align-items:center;}
.ex-cta-alt{font-size:0.85rem; font-weight:700; color:#e8e6e4; text-decoration:none; border-bottom:2px solid var(--sol);}
.ex-cta-alt:hover{color:#fff;}

/* ---------- Táctil móvil: objetivos >= 44 px ---------- */
@media (max-width:860px){
  .ex-aud button{min-height:44px;}
  #ex-escenarios .slider-ticks button{min-height:44px; padding:10px 8px;}
  .ex-sys button{min-height:44px;}
  .ex-nav a{padding-block:15px 13px;}
}

/* ---------- Barra CTA móvil ---------- */
.ex-sticky{display:none;}
@media (max-width:860px){
  body.energia-open .ex-sticky{display:block; position:fixed; inset-inline:0; bottom:0; z-index:45; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(33,32,32,0.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-top:1px solid var(--line-on-dark); transition:transform .3s ease;}
  body.energia-open .ex-sticky.hide{transform:translateY(110%);}
  .ex-sticky .btn{width:100%; box-sizing:border-box; justify-content:center; padding:13px 20px;}
}

/* ================= Ajustes de contraste WCAG 2.2 AA (Fase 6) =================
   El ámbar --sol-deep (2.2:1 sobre claro) y el naranja (3.6:1) no alcanzan AA
   como TEXTO sobre fondos claros; estos tonos equivalentes sí. Los usos de
   marca sobre fondo oscuro y los elementos decorativos no cambian. */
:root { --sol-ink: #8a5f10; --naranja-text: #d4381c; }
.scenario-card .who { color: var(--sol-ink); }
.slider-value .pct { color: var(--sol-ink); }
.ex-verb .kpi { color: var(--sol-ink); }
.ex-flowline .fa { color: var(--sol-ink); }
.ex-esc-eyebrow { color: var(--sol-ink); }
.ex-esc-use:hover { color: var(--sol-ink); }
.pain .n { color: var(--naranja-text); }

/* La etiqueta "Servicio estrella" es un span inline: en bloque para que su
   margen inferior aplique y no se encime con el título (Dirección, 27-ago-2026) */
.ex-svc .tag { display: inline-block; }
.ex-svc--star .tag { margin-bottom: 28px; }