/* ==========================================================================
   TecnoGreen Soluciones Técnicas — hoja de estilos de producción
   Tokens y componentes recreados a partir del handoff de diseño (hifi).
   ========================================================================== */

:root{
  /* Color */
  --c-bone:      #F1F0EB;
  --c-ink:       #17171A;
  --c-black:     #111013;
  --c-footer:    #0d0c0f;
  --c-concrete:  #E3E1DA;
  --c-green-deep:#43893E;
  --c-green-mid: #52A862;
  --c-yellow:    #E9C531;
  --c-graphite:  #444245;
  --c-steel:     #86858A;
  --c-pending:   #b58a00;
  --c-media-bg:  #26252a;
  --c-panel-bg:  #1a191d;

  /* Type */
  --f-head: 'Saira Condensed', sans-serif;
  --f-body: 'Archivo', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', monospace;

  /* Layout */
  --max: 1440px;
  --pad: 32px;
}

@media (max-width: 640px){
  :root{ --pad: 20px; }
}

*, *::before, *::after{ box-sizing: border-box; }
/* scroll-behavior:smooth se evita a propósito: interfiere con el scrub
   de GSAP ScrollTrigger en la sección #ciclo (lo hace ir a saltos). */
body{
  margin: 0;
  background: var(--c-bone);
  color: var(--c-ink);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video{ max-width: 100%; display: block; }
a{ color: var(--c-green-deep); text-decoration: none; }
a:hover{ color: var(--c-green-mid); }
::selection{ background: var(--c-yellow); color: var(--c-ink); }
:focus-visible{ outline: 2px solid var(--c-yellow); outline-offset: 2px; }

.container{ max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

@keyframes tg-draw{ to{ stroke-dashoffset: 0; } }
@keyframes tg-marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@keyframes tg-blink{ 0%,100%{ opacity: 1; } 50%{ opacity: .25; } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ============ BOTONES ============ */
.btn{
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 26px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.7,.2,1), background-color .18s, border-color .18s, color .18s;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn .arrow{ color: var(--c-yellow); }
.btn-dark{ color: var(--c-bone); background: var(--c-ink); border-color: var(--c-ink); }
.btn-dark:hover{ color: #fff; background: var(--c-green-deep); border-color: var(--c-green-deep); }
.btn-outline{ color: var(--c-ink); background: transparent; border-color: rgba(23,23,26,.3); }
.btn-outline:hover{ background: var(--c-concrete); border-color: var(--c-ink); }
.btn-signal{ color: var(--c-ink); background: var(--c-yellow); border-color: var(--c-yellow); }
.btn-signal:hover{ background: var(--c-green-mid); color: var(--c-ink); }
.btn-sm{ padding: 12px 18px; font-size: 11px; }
.btn-block{ width: 100%; }

.link-arrow{
  font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-green-deep); display: inline-flex; align-items: center; gap: 8px;
  transition: gap .18s, color .18s;
}
.link-arrow:hover{ color: var(--c-ink); gap: 14px; }
.link-arrow.on-dark{ color: var(--c-yellow); }
.link-arrow.on-dark:hover{ color: #fff; }

/* ============ HEADER / NAV ============ */
.site-header{
  position: sticky; top: 0; z-index: 80;
  border-bottom: 1px solid rgba(23,23,26,.14);
}
.site-header::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(241,240,235,.9);
  backdrop-filter: blur(8px);
}
.site-header__bar{ height: 3px; width: 100%; background: var(--c-green-deep); }
.site-header__row{
  max-width: var(--max); margin: 0 auto; padding: 14px var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand{ display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand img{ height: 34px; width: auto; }
.main-nav{
  display: flex; align-items: center; gap: 18px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-graphite); white-space: nowrap; overflow-x: auto; scrollbar-width: none;
}
.main-nav::-webkit-scrollbar{ display: none; }
.main-nav a{ color: var(--c-graphite); }
.main-nav a:hover{ color: var(--c-ink); }
.main-nav a[aria-current="page"]{ color: var(--c-ink); font-weight: 600; }
.header-cta{ flex-shrink: 0; }
.nav-close{ display: none; }

.nav-toggle{
  display: none; flex-shrink: 0;
  width: 40px; height: 40px; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: none; border: 1px solid rgba(23,23,26,.14); border-radius: 8px;
  cursor: pointer;
}
.nav-toggle__bar{
  width: 20px; height: 2px; background: var(--c-ink);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px){
  .nav-toggle{ display: flex; }
  .header-cta{ display: none; }

  .main-nav{
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: fixed; top: 0; right: 0; z-index: 70;
    width: min(320px, 84vw); height: 100vh; height: 100dvh;
    padding: 20px 28px 28px;
    background: var(--c-bone);
    border-left: 1px solid rgba(23,23,26,.14);
    box-shadow: -12px 0 32px rgba(17,16,19,.18);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .28s ease, visibility 0s linear .28s;
  }
  .main-nav.is-open{
    transform: translateX(0);
    visibility: visible;
    transition: transform .28s ease, visibility 0s linear 0s;
  }
  .nav-close{
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; margin: 0 0 20px auto; padding: 0;
    background: none; border: 1px solid rgba(23,23,26,.14); border-radius: 8px;
    color: var(--c-ink); font-size: 20px; line-height: 1;
    cursor: pointer;
  }
  .main-nav a{
    padding: 16px 4px; font-size: 13px;
    border-bottom: 1px solid rgba(23,23,26,.1);
  }

  .nav-scrim{
    position: fixed; inset: 0; z-index: 65;
    background: rgba(17,16,19,.4);
    opacity: 0; pointer-events: none;
    transition: opacity .28s ease;
  }
  .nav-scrim.is-open{ opacity: 1; pointer-events: auto; }
}
@media (max-width: 560px){
  .header-cta span.cta-label{ display: none; }
}

/* ============ TICKER ============ */
.ticker{
  border-bottom: 1px solid rgba(23,23,26,.14);
  overflow: hidden; height: 38px; display: flex; align-items: center;
}
.ticker__track{
  display: flex; white-space: nowrap;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .14em; color: var(--c-steel);
  animation: tg-marquee 34s linear infinite;
}
.ticker__track span{ padding-right: 48px; }

/* ============ HERO HOME ============ */
.hero{ position: relative; }
.hero__grid{
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: 8px; align-items: stretch; min-height: min(78vh,720px);
}
.hero__copy{ padding: 48px 40px 40px 0; display: flex; flex-direction: column; justify-content: center; }
.eyebrow{
  font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-green-deep); display: flex; align-items: center; gap: 12px; margin-bottom: 26px;
}
.eyebrow__dash{ width: 34px; height: 2px; background: var(--c-yellow); display: inline-block; flex-shrink: 0; }
.h-display{
  font-family: var(--f-head); font-weight: 800; text-transform: uppercase; line-height: .9;
  letter-spacing: -.005em; font-size: clamp(46px,6.4vw,104px); margin: 0; color: var(--c-ink);
}
.h-display .muted{ color: var(--c-steel); }
.lede{ max-width: 44ch; margin: 30px 0 0; font-size: clamp(16px,1.25vw,19px); line-height: 1.5; color: var(--c-graphite); }
.cta-row{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

.readout-strip{ margin-top: auto; padding-top: 44px; display: flex; flex-wrap: wrap; gap: 34px; font-family: var(--f-mono); }
.readout-strip__num{ font-size: 28px; font-weight: 600; color: var(--c-ink); }
.readout-strip__num.accent{ color: var(--c-green-deep); }
.readout-strip__label{ font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-steel); }
.readout-strip__div{ width: 1px; background: rgba(23,23,26,.14); }

.hero__media{ position: relative; background: var(--c-concrete); overflow: hidden; min-height: 420px; }
.hero__media img, .media-fill{
  position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; object-position: center 62%;
}
.reg-mark{ position: absolute; width: 20px; height: 20px; }
.reg-mark--tl{ top: 16px; left: 16px; border-top: 2px solid var(--c-bone); border-left: 2px solid var(--c-bone); }
.reg-mark--br{ bottom: 16px; right: 16px; border-bottom: 2px solid var(--c-ink); border-right: 2px solid var(--c-ink); }
.reg-mark--yellow{ border-color: var(--c-yellow) !important; }

.hero__route{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__route path{
  fill: none; stroke: var(--c-yellow); stroke-width: 3; stroke-dasharray: 1400; stroke-dashoffset: 1400;
  animation: tg-draw 2.2s ease-out .3s forwards;
}
.tag{ font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; }
.tag--yellow{ color: var(--c-ink); background: var(--c-yellow); }
.tag--dark{ color: var(--c-bone); background: rgba(23,23,26,.86); }
.tag--pos-tr{ position: absolute; top: 20%; right: 9%; }
.tag--pos-bl{ position: absolute; bottom: 20%; left: 7%; }
.fig-caption{ position: absolute; bottom: 16px; left: 16px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; color: rgba(23,23,26,.55); }
.fig-caption--on-media{ color: var(--c-bone); background: rgba(23,23,26,.7); padding: 4px 9px; bottom: 16px; }

@media (max-width: 900px){
  .hero__grid{ grid-template-columns: 1fr; min-height: 0; }
  .hero__copy{ padding: 40px 0 32px; }
  .hero__media{ min-height: 320px; order: -1; }
}

/* ============ BANNER GAMA COMPLETA ============ */
.banner-gama{ background: var(--c-black); color: var(--c-bone); position: relative; }
.banner-gama__frame{ position: relative; max-width: var(--max); margin: 0 auto; min-height: min(74vh,620px); display: flex; align-items: flex-end; }
.banner-gama__frame img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner-gama__scrim{ position: absolute; inset: 0; background: linear-gradient(0deg, rgba(17,16,19,.88) 0%, rgba(17,16,19,.42) 38%, rgba(17,16,19,0) 62%); }
.banner-gama__copy{ position: relative; padding: 0 var(--pad) 44px; max-width: 760px; }
.h-section-lg{ font-family: var(--f-head); font-weight: 800; text-transform: uppercase; line-height: .9; letter-spacing: -.01em; font-size: clamp(34px,4.6vw,72px); margin: 0 0 16px; }
.banner-gama__copy p{ max-width: 56ch; margin: 0; font-size: 15.5px; line-height: 1.55; color: #d7d6d9; }

/* ============ SOLUCIONES POR SECTOR ============ */
.solutions{ background: var(--c-ink); color: var(--c-bone); }
.solutions__inner{ padding: 80px var(--pad) 90px; }
.solutions__grid{ display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,2.1fr); gap: 48px; align-items: start; }
.solutions__title{ position: sticky; top: 96px; }
.h-section-xl{ font-family: var(--f-head); font-weight: 800; text-transform: uppercase; line-height: .92; letter-spacing: -.01em; font-size: clamp(34px,3.6vw,60px); margin: 0; }
.solutions__title p{ max-width: 34ch; margin: 22px 0 0; color: #a9a8ab; font-size: 15.5px; line-height: 1.55; }
.solutions__index{ border-top: 1px solid rgba(241,240,235,.16); }

.sol-row{
  display: grid; grid-template-columns: 88px 1fr; gap: 28px; padding: 34px 0;
  border-bottom: 1px solid rgba(241,240,235,.16); align-items: center;
  transition: transform .24s cubic-bezier(.2,.7,.2,1), background-color .24s; color: inherit;
}
.sol-row:hover{ background: rgba(233,197,49,.07); transform: translateX(12px); }
.sol-row__num{ font-family: var(--f-mono); font-size: 15px; color: var(--c-steel); padding-top: 6px; }
.sol-row__body{ display: grid; grid-template-columns: 1fr 300px; gap: 30px; align-items: center; }
.sol-row__body h3{ font-family: var(--f-head); font-weight: 700; text-transform: uppercase; font-size: clamp(40px,5vw,76px); line-height: .9; margin: 0 0 14px; color: var(--c-bone); }
.sol-row__body p{ max-width: 40ch; margin: 0 0 16px; color: #c9c8cb; font-size: 15px; line-height: 1.5; }
.chip-row{ display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-bone); }
.chip-row span{ border: 1px solid rgba(241,240,235,.28); padding: 5px 10px; }
.sol-row__media{ position: relative; height: 200px; background: var(--c-media-bg); overflow: hidden; }
.sol-row__media img{ width: 100%; height: 100%; object-fit: cover; }
.sol-row__flag{ position: absolute; bottom: 8px; left: 8px; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .06em; color: var(--c-bone); background: rgba(23,23,26,.7); padding: 3px 7px; }

.sol-row--compact{ grid-template-columns: 88px 1fr auto; padding: 26px 0; align-items: baseline; }
.sol-row--compact .sol-row__num{ padding-top: 0; }
.sol-row--compact h3{ font-family: var(--f-head); font-weight: 700; text-transform: uppercase; font-size: clamp(30px,3.4vw,50px); line-height: .95; margin: 0 0 6px; }
.sol-row--compact p{ margin: 0; color: #a9a8ab; font-size: 14.5px; }
.sol-row__tag{ font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-yellow); text-align: right; white-space: nowrap; }

@media (max-width: 900px){
  .solutions__grid{ grid-template-columns: 1fr; }
  .solutions__title{ position: static; }
}
@media (max-width: 640px){
  .sol-row{ grid-template-columns: 1fr; }
  .sol-row__num{ padding-top: 0; }
  .sol-row__body{ grid-template-columns: 1fr; }
  .sol-row__media{ height: 160px; }
  .sol-row--compact{ grid-template-columns: 1fr; }
  .sol-row__tag{ text-align: left; margin-top: 6px; }
}

/* ============ MOXY PROTAGONISTA ============ */
.moxy-feature{ background: var(--c-bone); }
.moxy-feature__inner{ padding: 90px var(--pad); }
.section-head{
  display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px;
  border-bottom: 1px solid rgba(23,23,26,.14); padding-bottom: 22px; margin-bottom: 44px;
}
.h-hero-num{ font-family: var(--f-head); font-weight: 800; text-transform: uppercase; line-height: .88; letter-spacing: -.01em; font-size: clamp(52px,8.5vw,150px); margin: 0; color: var(--c-ink); }
.section-head__meta{ font-family: var(--f-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-graphite); text-align: right; padding-bottom: 8px; }

.moxy-feature__grid{ display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 8px; align-items: stretch; }
.media-frame{ position: relative; background: var(--c-media-bg); overflow: hidden; min-height: 460px; }
.media-frame img, .media-frame video{ position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; }

.panel-dark{ background: var(--c-ink); color: var(--c-bone); padding: 40px 36px; display: flex; flex-direction: column; }
.panel-dark p.intro{ margin: 0 0 26px; font-size: 16px; line-height: 1.55; color: #d7d6d9; }
.panel-kicker{ font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-steel); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.panel-kicker__dash{ width: 24px; height: 2px; background: var(--c-yellow); flex-shrink: 0; }

.spec-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(241,240,235,.14); border: 1px solid rgba(241,240,235,.14); }
.spec-cell{ background: var(--c-ink); padding: 16px; }
.spec-cell__label{ font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-steel); margin-bottom: 8px; }
.spec-cell__value{ font-family: var(--f-head); font-weight: 600; font-size: 22px; text-transform: uppercase; line-height: 1; }
.spec-cell__value.accent{ color: var(--c-green-mid); }

.panel-note{ margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(241,240,235,.14); }
.panel-note__label{ font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-steel); margin-bottom: 8px; }
.panel-note p{ margin: 0; font-size: 14px; line-height: 1.5; color: #c9c8cb; }
.panel-dark .link-arrow{ margin-top: auto; padding-top: 26px; }

@media (max-width: 900px){
  .moxy-feature__grid{ grid-template-columns: 1fr; }
  .media-frame{ min-height: 320px; }
}

/* ============ CICLO DE TRABAJO ============ */
.cycle{ background: var(--c-black); color: var(--c-bone); }
.cycle__scroll{ position: relative; height: 400vh; }
.cycle__pin{ position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.cycle__grid{ max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); width: 100%; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 40px; align-items: center; }

.cycle__map{ position: relative; background: var(--c-panel-bg); border: 1px solid rgba(241,240,235,.12); padding: 26px; }
.cycle__map-label{ position: absolute; top: 14px; left: 16px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-steel); }
.cycle__rtk{ position: absolute; top: 14px; right: 16px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; color: var(--c-green-mid); display: flex; align-items: center; gap: 6px; }
.cycle__rtk-dot{ width: 7px; height: 7px; background: var(--c-green-mid); border-radius: 50%; display: inline-block; animation: tg-blink 1.4s infinite; }
.cycle__svg{ width: 100%; height: auto; display: block; margin-top: 18px; background-image: repeating-linear-gradient(0deg,rgba(82,168,98,.05) 0 1px,transparent 1px 26px), repeating-linear-gradient(90deg,rgba(82,168,98,.05) 0 1px,transparent 1px 26px); }
.cycle__map-foot{ margin-top: 14px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; color: var(--c-steel); }

.cycle__readout-head{ display: flex; align-items: baseline; gap: 18px; border-bottom: 1px solid rgba(241,240,235,.16); padding-bottom: 16px; margin-bottom: 22px; }
.cycle__num{ font-family: var(--f-head); font-weight: 800; font-size: clamp(48px,6vw,90px); line-height: .8; color: var(--c-steel); }
.cycle__name{ font-family: var(--f-head); font-weight: 800; text-transform: uppercase; font-size: clamp(40px,5.4vw,80px); line-height: .82; letter-spacing: -.01em; margin: 0; }
.cycle__desc{ min-height: 80px; margin: 0 0 26px; font-size: 17px; line-height: 1.5; color: #d7d6d9; max-width: 46ch; }

.cycle__panel{ border: 1px solid rgba(241,240,235,.16); background: var(--c-panel-bg); }
.cycle__panel-grid{ display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid rgba(241,240,235,.16); }
.cycle__panel-cell{ padding: 14px 16px; border-right: 1px solid rgba(241,240,235,.16); }
.cycle__panel-cell:last-child{ border-right: 0; }
.cycle__panel-label{ font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-steel); margin-bottom: 6px; }
.cycle__panel-value{ font-family: var(--f-mono); font-size: 14px; font-weight: 600; color: var(--c-bone); }
.cycle__panel-value.accent{ color: var(--c-green-mid); }
.cycle__cov{ padding: 14px 16px; }
.cycle__cov-row{ display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-steel); margin-bottom: 8px; }
.cycle__cov-row span:last-child span{ color: var(--c-yellow); }
.cycle__bar-track{ height: 8px; background: rgba(241,240,235,.1); overflow: hidden; }
.cycle__bar{ height: 100%; width: 0%; background: var(--c-yellow); }

.cycle__steps{ display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 22px; }
.cycle__step{ border: 1px solid rgba(241,240,235,.16); padding: 12px 10px; opacity: .4; }
.cycle__step.is-active{ border-color: var(--c-yellow); opacity: 1; }
.cycle__step-top{ display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.cycle__step-dot{ width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--c-steel); background: transparent; display: inline-block; }
.cycle__step.is-active .cycle__step-dot{ border-color: var(--c-yellow); background: var(--c-yellow); }
.cycle__step-idx{ font-family: var(--f-mono); font-size: 10px; color: var(--c-steel); }
.cycle__step-name{ font-family: var(--f-head); font-weight: 700; text-transform: uppercase; font-size: 16px; }
.cycle__hint{ margin-top: 16px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-steel); }

@media (max-width: 900px){
  .cycle__scroll{ height: 220vh; }
  .cycle__pin{ height: auto; min-height: 100vh; padding: 48px 0; }
  .cycle__grid{ grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 480px){
  .cycle__steps{ grid-template-columns: repeat(2,1fr); }
}

/* ============ GAMA POR TAREA ============ */
.tasks{ background: var(--c-concrete); }
.tasks__inner{ padding: 88px var(--pad); }
.tasks__head{ display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; margin-bottom: 40px; }
.h-section-2xl{ font-family: var(--f-head); font-weight: 800; text-transform: uppercase; line-height: .9; letter-spacing: -.01em; font-size: clamp(38px,5vw,84px); margin: 0; color: var(--c-ink); }
.tasks__head p{ max-width: 36ch; margin: 0; color: var(--c-graphite); font-size: 15.5px; line-height: 1.55; padding-bottom: 8px; }

.task-feature{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.35fr); background: var(--c-bone); border: 1px solid rgba(23,23,26,.12); margin-bottom: 8px; }
.task-feature__copy{ padding: 38px 34px; display: flex; flex-direction: column; justify-content: center; }
.task-tag-row{ display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.task-tag-row span{ font-family: var(--f-mono); font-size: 13px; color: var(--c-steel); }
.task-tag-row__line{ height: 1px; flex: 1; background: rgba(23,23,26,.15); }
.task-feature h3{ font-family: var(--f-head); font-weight: 800; text-transform: uppercase; font-size: clamp(48px,6vw,96px); line-height: .82; margin: 0 0 16px; color: var(--c-ink); }
.task-feature p.desc{ max-width: 40ch; margin: 0 0 20px; color: var(--c-graphite); font-size: 15.5px; line-height: 1.55; }
.chip-row-light{ display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.chip-fill{ background: var(--c-ink); color: var(--c-bone); padding: 6px 11px; }
.chip-outline{ border: 1px solid rgba(23,23,26,.3); color: var(--c-ink); padding: 6px 11px; }
.task-feature__media{ position: relative; min-height: 360px; background: var(--c-media-bg); overflow: hidden; }
.task-feature__media img{ position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; }
.fig-tag{ position: absolute; bottom: 12px; right: 12px; font-family: var(--f-mono); font-size: 9.5px; color: var(--c-bone); background: rgba(23,23,26,.7); padding: 3px 8px; }

.task-pair{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.task-card{ background: var(--c-bone); border: 1px solid rgba(23,23,26,.12); display: flex; flex-direction: column; }
.task-card__media{ position: relative; height: 300px; background: var(--c-media-bg); overflow: hidden; }
.task-card__media video, .task-card__media img{ width: 100%; height: 100%; object-fit: cover; }
.live-tag{ position: absolute; top: 12px; left: 12px; font-family: var(--f-mono); font-size: 9.5px; color: var(--c-ink); background: var(--c-yellow); padding: 4px 8px; display: flex; align-items: center; gap: 6px; }
.live-tag__dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--c-ink); display: inline-block; animation: tg-blink 1.2s infinite; }
.task-card__body{ padding: 26px 28px; }
.task-card h3{ font-family: var(--f-head); font-weight: 800; text-transform: uppercase; font-size: clamp(34px,3.6vw,56px); line-height: .85; margin: 0 0 12px; color: var(--c-ink); }
.task-card p.desc{ margin: 0 0 16px; color: var(--c-graphite); font-size: 14.5px; line-height: 1.5; }

.task-band{ display: grid; grid-template-columns: 260px 1fr; background: var(--c-ink); color: var(--c-bone); border: 1px solid rgba(23,23,26,.12); }
.task-band__media{ position: relative; background: var(--c-media-bg); overflow: hidden; min-height: 220px; }
.task-band__media video{ width: 100%; height: 100%; object-fit: cover; }
.task-band__body{ padding: 30px 34px; display: flex; flex-direction: column; justify-content: center; }
.task-band__title-row{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; }
.task-band h3{ font-family: var(--f-head); font-weight: 800; text-transform: uppercase; font-size: clamp(34px,3.8vw,60px); line-height: .85; margin: 0; }
.task-band__kit{ font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-yellow); }
.task-band p{ max-width: 56ch; margin: 14px 0 0; color: #c9c8cb; font-size: 14.5px; line-height: 1.5; }

.task-mention{ margin-top: 8px; display: grid; grid-template-columns: 88px 1fr auto; gap: 28px; padding: 22px 26px; background: var(--c-bone); border: 1px solid rgba(23,23,26,.12); align-items: baseline; transition: background-color .2s; color: inherit; }
.task-mention:hover{ background: var(--c-concrete); }
.task-mention__num{ font-family: var(--f-mono); font-size: 13px; color: var(--c-steel); }
.task-mention h3{ font-family: var(--f-head); font-weight: 700; text-transform: uppercase; font-size: clamp(24px,2.6vw,36px); line-height: .95; margin: 0 0 4px; color: var(--c-ink); }
.task-mention p{ margin: 0; color: var(--c-graphite); font-size: 14px; }
.task-mention__cta{ font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-green-deep); text-align: right; white-space: nowrap; }

@media (max-width: 900px){
  .task-feature, .task-pair{ grid-template-columns: 1fr; }
  .task-band{ grid-template-columns: 1fr; }
  .task-band__media{ min-height: 200px; }
}
@media (max-width: 640px){
  .task-mention{ grid-template-columns: 1fr; }
  .task-mention__cta{ text-align: left; margin-top: 8px; }
}

/* ============ TECNOLOGÍA APLICADA ============ */
.tech{ background: var(--c-black); color: var(--c-bone); background-image: repeating-linear-gradient(0deg,rgba(82,168,98,.06) 0 1px,transparent 1px 40px), repeating-linear-gradient(90deg,rgba(82,168,98,.06) 0 1px,transparent 1px 40px); }
.tech__inner{ padding: 88px var(--pad); }
.tech__head{ max-width: none; margin-bottom: 52px; }
.tech__head h2{ margin-bottom: 20px; }
.tech__head p{ margin: 0; color: #a9a8ab; font-size: 16px; line-height: 1.55; max-width: 56ch; }
.tech__grid{ display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 48px; align-items: center; }
.tech__media{ position: relative; background: var(--c-panel-bg); border: 1px solid rgba(241,240,235,.12); overflow: hidden; min-height: 440px; }
.tech__media img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.hotspot{ position: absolute; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; }
.hotspot--top{ top: 8%; left: 50%; transform: translateX(-50%); color: var(--c-ink); background: var(--c-yellow); }
.hotspot--left{ top: 44%; left: 6%; color: var(--c-bone); background: rgba(23,23,26,.82); }
.hotspot--right{ bottom: 14%; right: 7%; color: var(--c-bone); background: rgba(23,23,26,.82); }
.tech__media-caption{ position: absolute; bottom: 12px; left: 14px; font-family: var(--f-mono); font-size: 9.5px; color: rgba(241,240,235,.6); }

.cap-row{ display: grid; grid-template-columns: 60px 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid rgba(241,240,235,.16); }
.cap-row:last-child{ border-bottom: 1px solid rgba(241,240,235,.16); }
.cap-row__idx{ font-family: var(--f-mono); font-size: 12px; color: var(--c-steel); }
.cap-row h4{ font-family: var(--f-head); font-weight: 700; text-transform: uppercase; font-size: 26px; margin: 0 0 6px; }
.cap-row p{ margin: 0; color: #a9a8ab; font-size: 14.5px; line-height: 1.5; }

@media (max-width: 900px){
  .tech__grid{ grid-template-columns: 1fr; }
  .tech__media{ min-height: 300px; }
}

/* ============ SERVICIO ============ */
.service{ background: var(--c-bone); }
.service__inner{ padding: 88px var(--pad); }
.service__grid{ display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 56px; align-items: start; }
.h-section-3xl{ font-family: var(--f-head); font-weight: 800; text-transform: uppercase; line-height: .88; letter-spacing: -.01em; font-size: clamp(44px,6.5vw,118px); margin: 0; color: var(--c-ink); }
.h-section-3xl .accent{ color: var(--c-green-deep); }
.h-section-3xl.on-dark{ color: var(--c-bone); }
.rule{ height: 3px; width: 120px; margin: 30px 0; background: var(--c-green-deep); }
.service__grid > div:first-child > p{ max-width: 46ch; margin: 0; color: var(--c-graphite); font-size: 16px; line-height: 1.6; }

.svc-row{ display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 24px 0; border-top: 1px solid rgba(23,23,26,.14); }
.svc-row:last-child{ border-bottom: 1px solid rgba(23,23,26,.14); }
.svc-row__idx{ font-family: var(--f-mono); font-size: 12px; color: var(--c-steel); }
.svc-row h4{ font-family: var(--f-head); font-weight: 700; text-transform: uppercase; font-size: 24px; margin: 0 0 5px; }
.svc-row p{ margin: 0; color: var(--c-graphite); font-size: 14.5px; line-height: 1.5; }

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

/* ============ DEMO FORM ============ */
.demo{ background: var(--c-ink); color: var(--c-bone); }
.demo__bar{ height: 3px; width: 100%; background: var(--c-green-deep); }
.demo__inner{ padding: 84px var(--pad); }
.demo__grid{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: start; }
.demo__copy p{ max-width: 44ch; margin: 0 0 30px; color: #a9a8ab; font-size: 16px; line-height: 1.55; }
.demo__points{ display: flex; flex-direction: column; gap: 10px; font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .04em; color: #d7d6d9; }
.demo__points div{ display: flex; gap: 12px; align-items: center; }
.demo__points span{ color: var(--c-yellow); }

.demo__panel{ border: 1px solid rgba(241,240,235,.18); background: var(--c-panel-bg); padding: 34px 32px; }
.demo__fields{ display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field{ display: block; }
.field span{ font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-steel); }
.field input, .field select, .field textarea{
  width: 100%; margin-top: 8px; background: transparent; border: 0; border-bottom: 1px solid rgba(241,240,235,.3);
  color: var(--c-bone); font-family: var(--f-body); font-size: 15px; padding: 8px 0; outline: none;
}
.field select option{ background: var(--c-panel-bg); }
.field textarea{ resize: none; }
.field input:focus, .field select:focus, .field textarea:focus{ border-bottom-color: var(--c-yellow); }
.field--full{ grid-column: 1 / -1; margin-top: 22px; }
.demo__submit{ margin-top: 28px; }
.demo__note{ margin: 14px 0 0; font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; color: var(--c-steel); text-align: center; }

@media (max-width: 900px){
  .demo__grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .demo__fields{ grid-template-columns: 1fr; }
}

/* ============ FOOTER ============ */
.site-footer{ background: var(--c-footer); color: var(--c-bone); }
.site-footer__inner{ padding: 72px var(--pad) 40px; }
.site-footer__top{ display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); gap: 40px; padding-bottom: 52px; border-bottom: 1px solid rgba(241,240,235,.14); }
.footer-word{ font-family: var(--f-head); font-weight: 800; text-transform: uppercase; font-size: 44px; line-height: .9; margin-bottom: 10px; }
.footer-word .accent{ color: var(--c-green-mid); }
.footer-sub{ font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-steel); margin-bottom: 26px; }
.footer-cta-h{ font-family: var(--f-head); font-weight: 700; text-transform: uppercase; font-size: clamp(26px,2.6vw,38px); line-height: .95; margin: 0 0 18px; max-width: 20ch; }
.footer-col-label{ font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-steel); margin-bottom: 16px; }
.footer-links{ display: flex; flex-direction: column; gap: 11px; font-size: 15px; }
.footer-links a{ color: #d7d6d9; }
.footer-links a:hover{ color: var(--c-yellow); }
.footer-contact{ display: flex; flex-direction: column; gap: 11px; font-family: var(--f-mono); font-size: 13px; color: #d7d6d9; }
.footer-contact a{ color: var(--c-bone); }
.footer-contact a:hover{ color: var(--c-yellow); }
.footer-contact .muted{ margin-top: 8px; color: var(--c-steel); }
.site-footer__bottom{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; padding-top: 24px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #5f5e63; }
.footer-legal{ display:flex; gap:14px; }
.footer-legal a, .footer-legal button{ color:#9a999e; font:inherit; letter-spacing:inherit; text-transform:inherit; }
.footer-legal button{ padding:0; border:0; background:none; cursor:pointer; }
.footer-legal a:hover, .footer-legal button:hover{ color:var(--c-yellow); }

/* ============ PRIVACIDAD Y COOKIES ============ */
.cookie-banner{ position:fixed; z-index:200; left:24px; right:24px; bottom:24px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:end; max-width:1120px; margin:auto; padding:26px 28px; color:var(--c-bone); background:rgba(23,23,26,.98); border:1px solid rgba(241,240,235,.2); box-shadow:0 20px 60px rgba(0,0,0,.35); }
.cookie-banner[hidden]{ display:none; }
.cookie-banner__eyebrow{ margin:0 0 8px; color:var(--c-green-mid); font:600 10px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; }
.cookie-banner h2{ margin:0 0 8px; font:700 28px/.95 var(--f-head); text-transform:uppercase; }
.cookie-banner p{ max-width:760px; margin:0; color:#c9c8cb; font-size:13px; line-height:1.55; }
.cookie-banner a{ color:var(--c-yellow); text-decoration:underline; text-underline-offset:3px; }
.cookie-banner__actions{ display:flex; gap:10px; }
.cookie-btn{ min-width:116px; padding:12px 18px; color:var(--c-bone); background:transparent; border:1px solid rgba(241,240,235,.55); cursor:pointer; font:600 11px/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; }
.cookie-btn:hover{ color:var(--c-ink); background:var(--c-green-mid); border-color:var(--c-green-mid); }

.legal-hero{ padding:clamp(70px,10vw,140px) 0; color:var(--c-bone); background:var(--c-ink); border-bottom:3px solid var(--c-green-deep); }
.legal-hero h1{ max-width:900px; margin:20px 0 28px; font:800 clamp(64px,11vw,150px)/.78 var(--f-head); letter-spacing:-.02em; text-transform:uppercase; }
.legal-hero p:not(.eyebrow):not(.legal-updated){ max-width:680px; margin:0; color:#c9c8cb; font-size:17px; line-height:1.6; }
.legal-hero .legal-updated{ margin:28px 0 0; color:var(--c-steel); font:500 11px/1.4 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; }
.legal-layout{ display:grid; grid-template-columns:260px minmax(0,760px); gap:clamp(40px,8vw,120px); padding-top:72px; padding-bottom:100px; }
.legal-index{ position:sticky; top:100px; align-self:start; display:flex; flex-direction:column; border-top:1px solid rgba(23,23,26,.15); }
.legal-index a{ padding:14px 0; color:var(--c-graphite); border-bottom:1px solid rgba(23,23,26,.15); font:500 11px/1.3 var(--f-mono); letter-spacing:.05em; text-transform:uppercase; }
.legal-index a:hover{ color:var(--c-green-deep); }
.legal-copy section{ scroll-margin-top:100px; padding:0 0 52px; margin:0 0 52px; border-bottom:1px solid rgba(23,23,26,.15); }
.legal-copy section>span{ color:var(--c-green-deep); font:600 11px/1 var(--f-mono); letter-spacing:.1em; }
.legal-copy h2{ margin:10px 0 22px; font:800 clamp(34px,5vw,52px)/.95 var(--f-head); text-transform:uppercase; }
.legal-copy p{ margin:0 0 16px; color:var(--c-graphite); font-size:15px; line-height:1.75; }
.legal-copy code{ padding:2px 5px; background:var(--c-concrete); font-family:var(--f-mono); }

@media (max-width:760px){
  .cookie-banner{ left:12px; right:12px; bottom:12px; grid-template-columns:1fr; gap:20px; padding:22px 20px; }
  .cookie-banner h2{ font-size:25px; }
  .cookie-banner__actions{ display:grid; grid-template-columns:1fr 1fr; }
  .cookie-btn{ min-width:0; }
  .legal-layout{ grid-template-columns:1fr; padding-top:46px; padding-bottom:72px; }
  .legal-index{ position:static; }
  .legal-copy section{ padding-bottom:38px; margin-bottom:38px; }
}

@media (max-width: 900px){
  .site-footer__top{ grid-template-columns: 1fr; }
}

/* ============ SECTOR PAGES: HERO + FICHAS ============ */
.sector-hero{ position: relative; background: var(--c-ink); color: var(--c-bone); overflow: hidden; min-height: 420px; display: flex; align-items: center; }
.sector-hero__media{ position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; opacity: .55; }
.sector-hero__scrim{ position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23,23,26,.92) 0%, rgba(23,23,26,.55) 55%, rgba(23,23,26,.2) 100%); }
.sector-hero__inner{ position: relative; max-width: var(--max); margin: 0 auto; padding: 80px var(--pad); width: 100%; }
.breadcrumb{ font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; color: #c9c8cb; margin-bottom: 18px; }
.breadcrumb a{ color: #c9c8cb; }
.breadcrumb a:hover{ color: var(--c-yellow); }
.breadcrumb .sep{ color: var(--c-steel); }
.breadcrumb .current{ color: var(--c-yellow); }
.sector-hero .eyebrow{ margin-bottom: 18px; }
.sector-hero h1{ font-family: var(--f-head); font-weight: 800; text-transform: uppercase; line-height: .88; letter-spacing: -.01em; font-size: clamp(46px,7vw,110px); margin: 0 0 22px; max-width: 16ch; }
.sector-hero p{ max-width: 52ch; margin: 0; font-size: 16.5px; line-height: 1.55; color: #c9c8cb; }

.ficha__inner{ max-width: var(--max); margin: 0 auto; padding: 64px var(--pad) 40px; }
.ficha__crumb{ font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; color: var(--c-graphite); border-bottom: 1px solid rgba(23,23,26,.14); padding-bottom: 20px; margin-bottom: 36px; }
.ficha__crumb .sep{ color: var(--c-steel); }
.ficha__crumb .current{ color: var(--c-green-deep); }
.ficha__grid{ display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 8px; align-items: stretch; }
.ficha__grid--rev{ grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); }
.ficha__grid--rev .ficha__panel{ order: 2; }
.ficha__grid--rev .ficha__media{ order: 1; }
.ficha__media{ position: relative; background: var(--c-media-bg); overflow: hidden; min-height: 440px; }
.ficha__media--placeholder{ display: flex; align-items: center; justify-content: center; border: 1px dashed rgba(241,240,235,.3); min-height: 380px; }
.ficha__placeholder-txt{ font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-steel); text-align: center; padding: 24px; }
.pending-badge{ color: var(--c-pending); border: 1px dashed rgba(181,138,0,.5); padding: 2px 8px; display: inline-block; margin-top: 8px; }
.pending-inline{ color: var(--c-pending); border: 1px dashed rgba(181,138,0,.5); padding: 1px 7px; font-family: var(--f-mono); font-size: inherit; }
.ficha__media img, .ficha__media video{ position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; }
.ficha__panel{ background: var(--c-ink); color: var(--c-bone); padding: 40px 34px; display: flex; flex-direction: column; justify-content: center; }
.ficha__kicker{ font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-green-mid); margin-bottom: 14px; }
.ficha__panel h2{ font-family: var(--f-head); font-weight: 800; text-transform: uppercase; font-size: clamp(42px,4.6vw,76px); line-height: .85; margin: 0 0 20px; }
.ficha__panel p.desc{ margin: 0 0 26px; color: #c9c8cb; font-size: 15.5px; line-height: 1.55; }
.kv-list{ font-family: var(--f-mono); font-size: 13.5px; }
.kv-list__row{ display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(241,240,235,.16); }
.kv-list__row:last-child{ border-bottom: 1px solid rgba(241,240,235,.16); }
.kv-list__row span:first-child{ color: var(--c-steel); }
.kv-list__row .accent{ color: var(--c-green-mid); }
.ficha__foot-note{ margin: 16px 0 0; font-size: 12.5px; color: var(--c-steel); line-height: 1.5; }
.ficha__panel .btn{ margin-top: 22px; }
.ficha__panel .btn.push{ margin-top: auto; }

.ficha__spec-sheet{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; margin-top: 44px; }
.kv-list--light{ color: var(--c-ink); }
.kv-list--light .kv-list__row{ border-top-color: rgba(23,23,26,.14); }
.kv-list--light .kv-list__row:last-child{ border-bottom-color: rgba(23,23,26,.14); }
.kv-list--light .kv-list__row span:first-child{ color: var(--c-steel); }
.kv-list--light .kv-list__row span:last-child{ color: var(--c-ink); }
.spec-note{ margin: 16px 0 0; font-size: 13px; color: var(--c-steel); line-height: 1.5; }
.field-video{ position: relative; background: var(--c-media-bg); overflow: hidden; aspect-ratio: 4/3; }
.field-video video{ width: 100%; height: 100%; object-fit: cover; }
.field-video .fig-tag{ bottom: 12px; left: 12px; right: auto; }

@media (max-width: 900px){
  .ficha__grid, .ficha__grid--rev, .ficha__spec-sheet{ grid-template-columns: 1fr; }
  .ficha__media{ min-height: 300px; }
}

/* helpers */
.on-dark{ color: var(--c-bone); }
.sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============ NAVEGADOR POR ZONAS DEL CAMPO (golf) ============ */
.zonas{ background: var(--c-concrete); padding: clamp(64px,8vw,110px) 0; }
.zonas__head{ max-width: 720px; margin-bottom: clamp(40px,5vw,64px); }
.zonas__head h2{ color: var(--c-ink); margin: 0 0 18px; }
.zonas__head p{ color: var(--c-graphite); font-size: 16px; line-height: 1.6; margin: 0; }
.zonas__grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(23,23,26,.12); border: 1px solid rgba(23,23,26,.12); }
.zona{ background: var(--c-bone); padding: 28px 26px 30px; display: flex; flex-direction: column; }
.zona__head{ display: flex; align-items: baseline; gap: 12px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid rgba(23,23,26,.14); }
.zona__num{ font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; color: var(--c-green-deep); }
.zona__head h3{ font-family: var(--f-head); font-weight: 800; text-transform: uppercase; font-size: clamp(22px,2.4vw,30px); line-height: .95; margin: 0; color: var(--c-ink); }
.zona__list{ list-style: none; margin: 0; padding: 0; counter-reset: zona; display: flex; flex-direction: column; gap: 2px; }
.zona__list li{ counter-increment: zona; }
.zona__list a, .zona__na{ display: flex; align-items: baseline; gap: 8px; padding: 10px 0; font-family: var(--f-body); font-size: 15px; font-weight: 600; color: var(--c-ink); border-bottom: 1px solid rgba(23,23,26,.08); transition: color .18s, padding-left .18s; }
.zona__list a::before, .zona__na::before{ content: counter(zona,decimal-leading-zero); font-family: var(--f-mono); font-size: 11px; font-weight: 500; color: var(--c-steel); flex: 0 0 auto; }
.zona__list a:hover{ color: var(--c-green-deep); padding-left: 4px; }
.zona__list a::after{ content: "→"; margin-left: auto; color: var(--c-green-mid); opacity: 0; transition: opacity .18s; align-self: center; }
.zona__list a:hover::after{ opacity: 1; }
.zona__na{ color: var(--c-steel); font-weight: 500; }
.zona__ref{ font-family: var(--f-mono); font-size: 11px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--c-steel); margin-left: auto; align-self: center; }
.zonas__foot{ margin: clamp(28px,3vw,40px) 0 0; font-size: 13px; color: var(--c-graphite); line-height: 1.6; max-width: 640px; }
@media (max-width: 900px){
  .zonas__grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .zonas__grid{ grid-template-columns: 1fr; }
  .zona__ref{ display: none; }
}

/* ============ TABLA DE COSTES SPC (golf) ============ */
.costes{ margin-top: clamp(48px,6vw,80px); }
.costes__head{ max-width: 680px; margin-bottom: 28px; }
.costes__title{ font-family: var(--f-head); font-weight: 800; text-transform: uppercase; font-size: clamp(26px,3vw,42px); line-height: .95; color: var(--c-ink); margin: 8px 0 12px; }
.costes__lede{ margin: 0; color: var(--c-graphite); font-size: 15px; line-height: 1.6; }
.costes__swipe-hint{ display: none; margin: 0 0 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; color: var(--c-green-deep); }
.costes__table-wrap{
  overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid rgba(23,23,26,.14);
  /* Sombra a la derecha que indica que hay más contenido para deslizar */
  background:
    linear-gradient(90deg, transparent 70%, rgba(0,0,0,.10)) right / 28px 100% no-repeat;
}
.costes__table{ width: 100%; border-collapse: collapse; font-family: var(--f-mono); font-size: 14px; min-width: 620px; background: var(--c-bone); }
.costes__table th, .costes__table td{ padding: 14px 16px; text-align: right; white-space: nowrap; }
.costes__table thead th{ background: var(--c-ink); color: var(--c-bone); font-weight: 500; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.costes__table thead th:first-child{ text-align: left; }
.costes__table tbody th{ text-align: left; font-weight: 600; color: var(--c-ink); font-family: var(--f-body); }
.costes__table tbody td{ color: var(--c-graphite); }
.costes__row{ border-top: 1px solid rgba(23,23,26,.1); }
.costes__row--best{ background: rgba(82,168,98,.1); }
.costes__row--best th, .costes__row--best td{ color: var(--c-ink); }
.costes__row--best td.accent{ color: var(--c-green-deep); font-weight: 600; }
.costes__row--trad{ background: rgba(23,23,26,.03); }
.costes__row--trad td{ color: var(--c-steel); }
.costes__tag{ font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-steel); border: 1px solid rgba(23,23,26,.2); padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.costes__saving{ display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-top: 28px; padding: 24px 28px; background: var(--c-ink); color: var(--c-bone); }
.costes__saving-num{ font-family: var(--f-head); font-weight: 800; font-size: clamp(36px,5vw,64px); line-height: 1; color: var(--c-green-mid); }
.costes__saving-txt{ font-size: 15px; line-height: 1.5; color: #c9c8cb; max-width: 420px; }
.costes__saving-txt strong{ color: var(--c-bone); }
.costes__note{ margin: 20px 0 0; font-size: 12px; color: var(--c-steel); line-height: 1.6; }

@media (max-width: 640px){
  .costes__swipe-hint{ display: block; }
  .costes__table{ font-size: 12.5px; min-width: 540px; }
  .costes__table th, .costes__table td{ padding: 12px 12px; }
  .costes__saving-num{ font-size: clamp(34px,11vw,52px); }
}

/* ============ CHIPS DE SECTOR (formulario demo) ============ */
.chip-select{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.chip-btn{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--f-body); font-size:14px; font-weight:600; line-height:1;
  padding:11px 17px; border-radius:999px; cursor:pointer;
  background:rgba(241,240,235,.06) !important;
  color:var(--c-bone) !important;
  border:1.5px solid rgba(241,240,235,.22) !important;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), background .18s, border-color .18s, color .18s, box-shadow .18s;
}
.chip-btn .chip-ico{ font-size:15px; line-height:1; }
.chip-btn:hover{
  background:rgba(82,168,98,.14) !important;
  border-color:var(--c-green-mid) !important;
  transform:translateY(-2px);
}
.chip-btn:active{ transform:translateY(0) scale(.97); }
.chip-btn.is-selected{
  background:var(--c-green-mid) !important;
  border-color:var(--c-green-mid) !important;
  color:var(--c-ink) !important;
  box-shadow:0 6px 18px -6px rgba(82,168,98,.6);
  transform:translateY(-1px);
}
.chip-btn.is-selected .chip-ico{ transform:scale(1.15); transition:transform .18s; }

/* Realce del formulario demo (más vivo) */
.demo__panel{ border-radius:16px; box-shadow:0 24px 60px -30px rgba(0,0,0,.5); }
.field input, .field textarea{ transition:border-color .2s, background .2s; }
.field input:focus, .field textarea:focus{ background:rgba(241,240,235,.03); }
.demo__submit{ transition:transform .18s cubic-bezier(.34,1.56,.64,1), filter .18s; }
.demo__submit:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.demo__submit:active{ transform:translateY(0) scale(.99); }
.demo__submit:disabled{ opacity:.7; cursor:progress; transform:none; }
#demo-status{ transition:color .2s; min-height:1.4em; }