/* =============================================================
   Agrícola Ortiz Lavado · Fito Portugal
   Hoja de estilos única del sitio. HTML5 + CSS3, sin frameworks.
   Sistema visual derivado del logotipo corporativo original.
   ============================================================= */

/* ---------- 1. Tipografías locales (variables, subset latin) ---------- */
@font-face {
  font-family: "Archivo Var";
  src: url("../fonts/archivo-var-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Figtree Var";
  src: url("../fonts/figtree-var-latin.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* ---------- 2. Tokens ---------- */
:root {
  /* Color — extraído del logotipo José Ortiz Lavado S.L. */
  --c-green: #036130;            /* verde corporativo principal */
  --c-green-dark: #024522;       /* verde profundo */
  --c-green-deep: #062a17;       /* fondo oscuro */
  --c-green-deeper: #04190e;     /* pie de página */
  --c-lime: #a9d451;             /* verde de acento del logotipo */
  --c-lime-dark: #587a1c;        /* acento sobre fondo claro */
  --c-earth: #a8845e;            /* tono tierra (cubierta del logotipo) */
  --c-earth-soft: #f3ece3;

  --c-bg: #ffffff;
  --c-bg-soft: #f6f7f4;
  --c-bg-tint: #eef2ea;

  --c-text: #16221b;
  --c-text-2: #4d5c53;
  --c-text-3: #66756c;
  --c-inv: #ffffff;
  --c-inv-2: #c3d3c7;
  --c-inv-3: #8a9a90;   /* texto secundario sobre fondo oscuro */

  --c-line: #e0e5dd;
  --c-line-strong: #c8d1c4;
  --c-line-inv: rgba(255, 255, 255, .16);

  --c-focus: #036130;
  --c-error: #b3261e;
  --c-ok: #036130;

  /* Tipografía */
  --f-head: "Archivo Var", "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-body: "Figtree Var", "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-xs: .78rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: clamp(1.02rem, .99rem + .16vw, 1.12rem);
  --fs-lg: clamp(1.18rem, 1.1rem + .38vw, 1.45rem);
  --fs-h4: clamp(1.1rem, 1.04rem + .3vw, 1.3rem);
  --fs-h3: clamp(1.28rem, 1.16rem + .55vw, 1.65rem);
  --fs-h2: clamp(1.65rem, 1.36rem + 1.3vw, 2.6rem);
  --fs-h1: clamp(2rem, 1.5rem + 2.3vw, 3.55rem);

  /* Espaciado y medidas */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;
  --sp-sec: clamp(3.25rem, 2rem + 5vw, 6.5rem);
  --wrap: 1220px;
  --wrap-narrow: 780px;
  --gutter: clamp(1.15rem, .6rem + 2vw, 2.5rem);

  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(6, 42, 23, .06), 0 2px 8px rgba(6, 42, 23, .05);
  --sh-md: 0 2px 6px rgba(6, 42, 23, .07), 0 12px 28px rgba(6, 42, 23, .08);
  --sh-lg: 0 10px 40px rgba(6, 42, 23, .16);

  --tr: .28s cubic-bezier(.25, .6, .3, 1);
  --header-h: 108px;
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4, h5 {
  font-family: var(--f-head);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.018em;
  color: var(--c-text);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p  { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: var(--c-green); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-green-dark); }

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 3px;
}
/* Sobre fondos oscuros el indicador de foco cambia al verde de acento */
.topbar :focus-visible, .hero :focus-visible, .phead :focus-visible,
.section--dark :focus-visible, .cta-band :focus-visible, .footer :focus-visible,
.gate :focus-visible, .aside__box--dark :focus-visible, .float-wa:focus-visible {
  outline-color: var(--c-lime);
}

hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--sp-6) 0; }

::selection { background: var(--c-lime); color: var(--c-green-deep); }

/* ---------- 4. Utilidades de composición ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding-block: var(--sp-sec); }
.section--tight { padding-block: clamp(2.25rem, 1.5rem + 3vw, 4rem); }
.section--soft { background: var(--c-bg-soft); }
.section--tint { background: var(--c-bg-tint); }
.section--dark { background: var(--c-green-deep); color: var(--c-inv-2); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--c-inv); }
.section--dark a { color: var(--c-lime); }
.section--dark .btn--primary { color: var(--c-green-deep); }
.section--dark .btn--solid { color: #fff; }
.section--dark .btn--ghost-inv { color: #fff; }
.section--dark .btn--ghost-inv:hover { color: var(--c-green-deep); }

.eyebrow {
  font-family: var(--f-head);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-lime-dark);
  margin: 0 0 var(--sp-3);
  display: block;
}
.section--dark .eyebrow { color: var(--c-lime); }

.lead { font-size: var(--fs-lg); color: var(--c-text-2); line-height: 1.55; }
.section--dark .lead { color: var(--c-inv-2); }
.muted { color: var(--c-text-3); font-size: var(--fs-sm); }

.hl { color: var(--c-green); }
.section--dark .hl, .hero .hl, .cat .hl { color: var(--c-lime); }

.sec-head { max-width: 60ch; margin-bottom: clamp(2rem, 1.2rem + 2.4vw, 3.25rem); }
.sec-head--split {
  max-width: none; display: grid; gap: var(--sp-5);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end;
}
.sec-head--split > :last-child { padding-bottom: .35rem; }
@media (max-width: 860px) { .sec-head--split { grid-template-columns: 1fr; } }

.grid { display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 2000;
  background: var(--c-green); color: #fff; padding: .7rem 1.1rem;
  border-radius: var(--r-sm); font-weight: 600; text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: var(--sp-3); color: #fff; }

.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;
}

/* ---------- 5. Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--f-head); font-weight: 600; font-size: var(--fs-sm);
  letter-spacing: .04em; text-transform: uppercase;
  padding: .95rem 1.5rem; border-radius: var(--r-sm);
  border: 1.5px solid transparent; text-decoration: none; cursor: pointer;
  transition: var(--tr); min-height: 48px; line-height: 1.2;
}
.btn svg { flex: none; width: 16px; height: 16px; transition: transform var(--tr); }
.btn:hover svg { transform: translateX(3px); }

.btn--primary { background: var(--c-lime); color: var(--c-green-deep); border-color: var(--c-lime); }
.btn--primary:hover { background: #b9e065; border-color: #b9e065; color: var(--c-green-deep); }

.btn--solid { background: var(--c-green); color: #fff; border-color: var(--c-green); }
.btn--solid:hover { background: var(--c-green-dark); border-color: var(--c-green-dark); color: #fff; }

.btn--ghost { background: transparent; color: var(--c-text); border-color: var(--c-line-strong); }
.btn--ghost:hover { border-color: var(--c-green); color: var(--c-green); background: rgba(3,97,48,.04); }

.btn--ghost-inv { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--ghost-inv:hover { background: #fff; color: var(--c-green-deep); border-color: #fff; }

.btn--sm { padding: .6rem 1rem; min-height: 40px; font-size: var(--fs-xs); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--f-head); font-weight: 600; font-size: var(--fs-sm);
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--c-green); text-decoration: none;
}
.link-arrow svg { width: 15px; height: 15px; transition: transform var(--tr); }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow:hover { color: var(--c-green-dark); }
.section--dark .link-arrow { color: var(--c-lime); }

/* ---------- 6. Barra superior ---------- */
.topbar {
  background: var(--c-green-deep); color: var(--c-inv-2);
  font-size: var(--fs-xs); line-height: 1.4;
}
.topbar__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-height: 40px; flex-wrap: wrap; padding-block: .35rem;
}
.topbar__claim { display: inline-flex; align-items: center; gap: .5rem; }
.topbar__claim svg { width: 15px; height: 15px; color: var(--c-lime); flex: none; }
.topbar__right { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.topbar a { color: var(--c-inv-2); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.topbar a:hover { color: #fff; }
.topbar svg { width: 14px; height: 14px; flex: none; }

.lang {
  display: inline-flex; align-items: center; gap: 3px;
  border: 1px solid var(--c-line-inv); border-radius: var(--r-pill); padding: 3px;
  background: rgba(255, 255, 255, .05);
}
.lang__item {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .22rem .62rem .22rem .34rem; border-radius: var(--r-pill);
  font-family: var(--f-head); font-weight: 700; font-size: .74rem; letter-spacing: .08em;
  color: var(--c-inv-2); text-decoration: none; position: relative; overflow: hidden;
  transition: color var(--tr), background var(--tr);
}
.lang__flag {
  width: 21px; height: 14px; border-radius: 2px; flex: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .28);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow var(--tr);
}
.lang__item span { position: relative; z-index: 1; }
/* fondo que entra deslizándose al pasar el ratón */
.lang__item::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-pill);
  background: var(--c-lime); transform: translateX(-101%);
  transition: transform .34s cubic-bezier(.25, .6, .3, 1); z-index: 0;
}
a.lang__item:hover::before, a.lang__item:focus-visible::before { transform: translateX(0); }
a.lang__item:hover, a.lang__item:focus-visible { color: var(--c-green-deep); }
a.lang__item:hover .lang__flag, a.lang__item:focus-visible .lang__flag {
  transform: scale(1.22) rotate(-6deg);
  box-shadow: 0 0 0 1px rgba(6, 42, 23, .35), 0 3px 8px rgba(0, 0, 0, .3);
}
.lang__item--on { background: var(--c-lime); color: var(--c-green-deep); cursor: default; }
.lang__item--on .lang__flag { box-shadow: 0 0 0 1px rgba(6, 42, 23, .3); }

@media (max-width: 720px) {
  .topbar__claim { display: none; }
  .topbar__in { justify-content: center; }
}

/* ---------- 7. Cabecera ---------- */
.header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--c-line);
  transition: box-shadow var(--tr);
}
.header.is-stuck { box-shadow: var(--sh-md); }
.header__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { width: auto; height: 80px; transition: height var(--tr); }
.header.is-stuck .brand img { height: 62px; }
@media (max-width: 1080px) { .brand img { height: 66px; } }
@media (max-width: 420px)  { .brand img { height: 54px; } }

.nav { display: flex; align-items: center; gap: clamp(.4rem, .1rem + 1vw, 1.4rem); }
.nav > ul {
  display: flex; align-items: center; gap: clamp(.1rem, -.2rem + .9vw, .7rem);
  list-style: none; margin: 0; padding: 0;
}
.nav a {
  display: block; padding: .55rem .7rem; border-radius: var(--r-sm);
  font-family: var(--f-head); font-weight: 600; font-size: .82rem;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--c-text); text-decoration: none; white-space: nowrap;
  transition: var(--tr);
}
.nav a:hover { color: var(--c-green); background: var(--c-bg-tint); }
.nav a[aria-current="page"] { color: var(--c-green); }
.nav a[aria-current="page"]::after {
  content: ""; display: block; height: 2px; margin-top: 3px;
  background: var(--c-lime); border-radius: 2px;
}
.header__cta { flex: none; }
.nav__cta { display: none; }

.burger {
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm); background: #fff; cursor: pointer; color: var(--c-text);
}
.burger svg { width: 22px; height: 22px; }
.burger .ic-close { display: none; }
.burger[aria-expanded="true"] .ic-open { display: none; }
.burger[aria-expanded="true"] .ic-close { display: block; }

@media (max-width: 1080px) {
  .burger { display: inline-flex; }
  .header__cta { display: none; }
  .nav {
    position: fixed; inset: calc(var(--header-h) + 40px) 0 auto 0;
    display: block; background: #fff; border-bottom: 1px solid var(--c-line);
    padding: var(--sp-4) var(--gutter) var(--sp-6);
    max-height: calc(100dvh - var(--header-h) - 40px); overflow-y: auto;
    box-shadow: var(--sh-lg);
  }
  .nav[hidden] { display: none; }
  .nav > ul { display: block; }
  .nav a {
    padding: .9rem .25rem; font-size: .95rem; border-bottom: 1px solid var(--c-line);
    border-radius: 0;
  }
  .nav a:hover { background: transparent; }
  .nav a[aria-current="page"]::after { display: none; }
  .nav .nav__cta { display: block; margin-top: var(--sp-5); }
  .nav .nav__cta .btn { width: 100%; justify-content: center; }
}

/* ---------- 8. Hero (slideshow Ken Burns) ---------- */
.hero { position: relative; background: var(--c-green-deep); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.4s ease; overflow: hidden;
}
.hero__slide.is-on { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); }
.hero__slide.is-on img { animation: kenburns 12s ease-out forwards; }
.hero__slide:nth-child(even).is-on img { animation-name: kenburns-alt; }
@keyframes kenburns {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.4%, -1.2%, 0); }
}
@keyframes kenburns-alt {
  from { transform: scale(1.14) translate3d(1.2%, -1%, 0); }
  to   { transform: scale(1.03) translate3d(0, 0, 0); }
}
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(4, 25, 14, .94) 0%, rgba(4, 25, 14, .80) 40%, rgba(4, 25, 14, .20) 80%),
    linear-gradient(0deg, rgba(4, 25, 14, .55) 0%, rgba(4, 25, 14, 0) 45%);
}
/* Anillos que se trazan y se deshacen sobre la fotografía. Sin imágenes ni JS:
   cada anillo va en su propio SVG cuadrado, colocado en porcentaje del hero, así
   que siempre es redondo. `pathLength="100"` normaliza el perímetro, de modo que
   un solo juego de fotogramas sirve para cualquier radio. */
.hero__circulos { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hc-w {
  position: absolute; display: block; aspect-ratio: 1;
  filter: drop-shadow(0 0 2px rgba(4, 25, 14, .45));
}
.hc-w svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hc {
  fill: none; stroke: rgba(255, 255, 255, .38); stroke-width: 1.3;
  vector-effect: non-scaling-stroke; stroke-linecap: round;
  transform-box: fill-box; transform-origin: center;
}
.hc--lima { stroke: rgba(169, 212, 81, .5); }

/* Anillos que se reconstruyen: se trazan, se sostienen y se deshacen */
.hc--traza {
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: hcTraza 13s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes hcTraza {
  0%        { stroke-dashoffset: 100; }
  42%, 58%  { stroke-dashoffset: 0; }
  100%      { stroke-dashoffset: -100; }
}

/* Anillos de trazo discontinuo que giran despacio */
.hc--punt {
  stroke-dasharray: 1.7 3.6; stroke-width: 1.2;
  stroke: rgba(255, 255, 255, .42);
  animation: hcGiro 34s linear infinite;
}
.hc--punt.hc--lima { stroke: rgba(169, 212, 81, .55); }
@keyframes hcGiro { to { transform: rotate(360deg); } }

/* Nodo central */
.hc-pt { fill: rgba(169, 212, 81, .8); animation: hcNodo 4.6s ease-in-out infinite; }
.hc-pt--2 { animation-delay: -1.6s; }
.hc-pt--3 { animation-delay: -3.1s; }
@keyframes hcNodo { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* Ritmos distintos para que nunca coincidan */
.hc--a { animation-duration: 12s; }
.hc--b { animation-duration: 30s; animation-direction: reverse; }
.hc--c { animation-duration: 16s; animation-delay: -6s; }
.hc--d { animation-duration: 40s; }
.hc--e { animation-duration: 14s; animation-delay: -9s; }
.hc--f { animation-duration: 18s; animation-delay: -3s; }
.hc--g { animation-duration: 26s; animation-direction: reverse; }
.hc--h { animation-duration: 15s; animation-delay: -12s; }

/* Constelación: posición en porcentaje del hero y tamaño acotado */
.hc-w--g1 { width: clamp(92px, 13vw, 196px);  left: -3%;   top: 4%; }
.hc-w--g2 { width: clamp(96px, 14vw, 210px);  right: -2%;  top: 12%; }
.hc-w--g3 { width: clamp(80px, 11.5vw, 176px); left: 68%;  top: 62%; }
.hc-w--g4 { width: clamp(70px, 9.5vw, 150px);  left: 44%;  bottom: -6%; }
.hc-w--g5 { width: clamp(56px, 7.5vw, 116px);  right: 6%;  bottom: 8%; }
.hc-w--g6 { width: clamp(58px, 8vw, 124px);    left: 31%;  top: 2%; }
@media (max-width: 900px) {
  .hc-w--g1 { left: -14%; top: 2%; }
  .hc-w--g2 { right: -12%; top: 8%; }
  .hc-w--g3 { left: 62%; top: 68%; }
  .hc-w--g4 { left: 8%; bottom: -4%; }
  .hc-w--g5 { right: 4%; bottom: 22%; }
  .hc-w--g6 { left: 46%; top: 1%; }
}

.hero__in {
  position: relative; z-index: 2;
  padding-block: clamp(3.5rem, 2rem + 9vw, 8.5rem);
  min-height: clamp(440px, 60vh, 640px);
  display: flex; flex-direction: column; justify-content: center;
}
.hero__txt { max-width: 46rem; color: #fff; }
.hero h1 { color: #fff; margin-bottom: var(--sp-5); }
.hero .eyebrow { color: var(--c-lime); }
.hero__sub {
  font-size: var(--fs-lg); color: rgba(255, 255, 255, .9);
  max-width: 40rem; margin-bottom: var(--sp-6);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* numeración vertical 01 / 02 / 03 */
.hero__nums {
  position: absolute; right: clamp(1rem, .3rem + 2.2vw, 3.25rem); top: 50%;
  transform: translateY(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: flex-end; gap: .9rem;
}
.hero__num {
  background: none; border: 0; cursor: pointer; padding: .1rem 0 .1rem .6rem;
  font-family: var(--f-head); font-weight: 800; letter-spacing: .02em;
  color: rgba(255, 255, 255, .55);
  display: flex; flex-direction: column; align-items: flex-end;
  transition: color .35s ease; min-width: 54px;
}
.hero__num-n {
  display: block; font-size: 1.15rem; line-height: 1;
  text-shadow: 0 2px 10px rgba(4, 25, 14, .65);
  transition: font-size .45s cubic-bezier(.34, 1.4, .64, 1),
              transform .45s cubic-bezier(.34, 1.4, .64, 1), opacity .35s ease;
}
.hero__num-track {
  display: block; width: 2px; height: 0; margin-top: .45rem; overflow: hidden;
  background: rgba(255, 255, 255, .3); border-radius: 2px;
  transition: height .45s cubic-bezier(.25, .6, .3, 1);
}
.hero__num-fill {
  display: block; width: 100%; height: 0; background: var(--c-lime);
  box-shadow: 0 0 10px rgba(169, 212, 81, .9); border-radius: 2px;
}
.hero__num:hover { color: rgba(255, 255, 255, .9); }
.hero__num:hover .hero__num-n { transform: translateY(-2px); }
.hero__num[aria-selected="true"] { color: #fff; }
.hero__num[aria-selected="true"] .hero__num-n {
  font-size: 2.5rem; animation: numEntra .5s cubic-bezier(.25, .8, .3, 1);
}
.hero__num[aria-selected="true"] .hero__num-track { height: 52px; }
.hero__num[aria-selected="true"] .hero__num-fill {
  animation: numAvance 6.8s linear forwards;
}
.hero__nums.is-paused .hero__num[aria-selected="true"] .hero__num-fill {
  animation: none; height: 100%;
}
@keyframes numEntra {
  0%   { opacity: 0; transform: translateY(14px) scale(.7); filter: blur(4px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; }
}
@keyframes numAvance { from { height: 0; } to { height: 100%; } }

/* barras inferiores _ _ _ */
.hero__bars {
  position: absolute; left: 0; right: 0; bottom: clamp(1rem, .4rem + 1.6vw, 2.1rem);
  z-index: 3; display: flex; justify-content: center; gap: .5rem;
}
.hero__bar {
  background: none; border: 0; cursor: pointer; padding: .55rem .2rem;
  width: 46px;
}
.hero__bar span {
  display: block; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, .38); transition: var(--tr);
}
.hero__bar:hover span { background: rgba(255, 255, 255, .7); }
.hero__bar[aria-selected="true"] span { background: var(--c-lime); }

@media (max-width: 760px) {
  .hero__nums {
    top: auto; bottom: calc(clamp(1rem, .4rem + 1.6vw, 2.1rem) + 30px);
    right: 50%; transform: translateX(50%);
    flex-direction: row; align-items: center; gap: 1rem;
  }
  .hero__num { flex-direction: row; align-items: center; gap: .45rem; min-width: 0; padding: 0; }
  .hero__num-n { font-size: 1rem; }
  .hero__num[aria-selected="true"] .hero__num-n { font-size: 1.7rem; }
  .hero__num-track { width: 0; height: 2px !important; margin: 0; }
  .hero__num[aria-selected="true"] .hero__num-track { width: 30px; }
  .hero__num-fill { width: 0; height: 100%; }
  .hero__num[aria-selected="true"] .hero__num-fill { animation-name: numAvanceH; }
  .hero__nums.is-paused .hero__num[aria-selected="true"] .hero__num-fill { width: 100%; height: 100%; }
  @keyframes numAvanceH { from { width: 0; } to { width: 100%; } }
}

/* ---------- 9. Franja de ventajas ---------- */
.usp { background: rgba(255, 255, 255, .06); border-top: 1px solid rgba(255, 255, 255, .14); }
.usp__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: rgba(255, 255, 255, .14);
}
.usp__i {
  background: var(--c-green-deep); padding: clamp(1.1rem, .8rem + 1vw, 1.75rem) clamp(1rem, .6rem + 1.4vw, 1.85rem);
  display: flex; gap: .9rem; align-items: flex-start; color: var(--c-inv-2);
}
.usp__i svg { width: 26px; height: 26px; color: var(--c-lime); flex: none; margin-top: 2px; }
.usp__i strong {
  display: block; font-family: var(--f-head); font-weight: 700;
  color: #fff; font-size: var(--fs-base); line-height: 1.25; margin-bottom: .2rem;
}
.usp__i span { font-size: var(--fs-sm); line-height: 1.45; }
@media (max-width: 900px) { .usp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .usp__grid { grid-template-columns: 1fr; } }

/* ---------- 10. Tarjetas ---------- */
.card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  overflow: hidden; transition: var(--tr); height: 100%;
  position: relative;
}
.card:hover { border-color: var(--c-line-strong); box-shadow: var(--sh-md); transform: translateY(-3px); }
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-bg-tint); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.25,.6,.3,1); }
.card:hover .card__media img { transform: scale(1.05); }
.card__ico {
  position: absolute; left: 1.35rem; top: -23px; width: 46px; height: 46px;
  border-radius: 50%; background: var(--c-lime); color: var(--c-green-deep);
  display: grid; place-items: center; box-shadow: var(--sh-sm); z-index: 2;
}
.card__ico svg { width: 22px; height: 22px; }
.card__body { position: relative; padding: 2.15rem 1.35rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.card__body > h3 { font-size: var(--fs-h4); margin-bottom: .5rem; }
.card__body > p { font-size: var(--fs-sm); color: var(--c-text-2); margin-bottom: var(--sp-4); }
.card__body > .link-arrow { margin-top: auto; }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.card:has(.card__link:focus-visible) { outline: 3px solid var(--c-focus); outline-offset: 3px; }

.card--flat { border-radius: var(--r-md); padding: clamp(1.2rem, .9rem + 1vw, 1.75rem); }
.card--flat .card__ico { position: static; margin-bottom: var(--sp-4); }
.card--flat > .card__ico { position: static; }

/* Tarjeta compacta con icono (servicios en fondo oscuro) */
.tile {
  display: flex; gap: 1rem; padding: clamp(1.05rem, .85rem + .8vw, 1.5rem);
  background: rgba(255, 255, 255, .045); border: 1px solid var(--c-line-inv);
  border-radius: var(--r-md); transition: var(--tr); position: relative;
}
.tile:hover { background: rgba(255, 255, 255, .085); border-color: rgba(255, 255, 255, .3); }
.tile__ico {
  flex: none; width: 44px; height: 44px; border-radius: var(--r-sm);
  background: rgba(169, 212, 81, .14); color: var(--c-lime);
  display: grid; place-items: center;
}
.tile__ico svg { width: 22px; height: 22px; }
.tile h3 { font-size: var(--fs-base); margin-bottom: .3rem; color: #fff; }
.tile p { font-size: var(--fs-sm); color: var(--c-inv-2); margin: 0; }
.tile a.card__link { color: inherit; text-decoration: none; }
.tile a.card__link::after { content: ""; position: absolute; inset: 0; }

/* ---------- 10 bis. Recorrido de servicios ---------- */
.ruta { display: grid; gap: clamp(1rem, .2rem + 2.4vw, 2.5rem); }
.ruta__banda { position: relative; aspect-ratio: 1000 / 285; }
.ruta__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ruta__linea {
  fill: none; stroke: rgba(169, 212, 81, .38); stroke-width: 2.5;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
}
.ruta__banda.is-in .ruta__linea { animation: rutaTraza 1.9s cubic-bezier(.4, 0, .2, 1) forwards; }
.ruta__brillo {
  fill: none; stroke: var(--c-lime); stroke-width: 3.5; stroke-linecap: round;
  vector-effect: non-scaling-stroke; opacity: 0;
  stroke-dasharray: 90 1400; filter: drop-shadow(0 0 7px rgba(169, 212, 81, .9));
}
.ruta__banda.is-in .ruta__brillo { opacity: 1; animation: rutaBrillo 6s linear 1.5s infinite; }
@keyframes rutaTraza { to { stroke-dashoffset: 0; } }
@keyframes rutaBrillo { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: -90; } }

.ruta__nodo {
  position: absolute; width: 30%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  text-decoration: none; color: inherit;
}
.ruta__disco {
  position: relative; width: clamp(76px, 7.6vw, 108px); aspect-ratio: 1;
  border-radius: 50%; display: grid; place-items: center; flex: none;
  background: linear-gradient(160deg, #ffffff 0%, #eef2ea 100%);
  color: var(--c-green);
  box-shadow: 0 14px 26px rgba(2, 20, 10, .45), inset 0 -6px 12px rgba(6, 42, 23, .07);
  transition: transform .38s cubic-bezier(.34, 1.4, .64, 1), color var(--tr), background var(--tr);
  opacity: 0; scale: .6;
}
.ruta__banda.is-in .ruta__disco { animation: rutaNodo .6s cubic-bezier(.34, 1.4, .64, 1) forwards; }
.ruta__nodo:nth-of-type(1) .ruta__disco { animation-delay: .35s; }
.ruta__nodo:nth-of-type(2) .ruta__disco { animation-delay: .75s; }
.ruta__nodo:nth-of-type(3) .ruta__disco { animation-delay: 1.15s; }
@keyframes rutaNodo { to { opacity: 1; scale: 1; } }
/* base del pedestal */
.ruta__disco::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -9%; height: 26%;
  border-radius: 50%; background: rgba(3, 97, 48, .55); filter: blur(5px); z-index: -1;
  transition: var(--tr);
}
.ruta__disco svg { width: clamp(30px, 3vw, 42px); height: clamp(30px, 3vw, 42px); }
.ruta__nodo:hover .ruta__disco, .ruta__nodo:focus-visible .ruta__disco {
  transform: translateY(-8px) scale(1.06);
  background: linear-gradient(160deg, #d9ee9f 0%, var(--c-lime) 100%);
  color: var(--c-green-deep);
}
.ruta__nodo:hover .ruta__disco::after { bottom: -14%; background: rgba(169, 212, 81, .45); }
.ruta__txt { margin-top: .85rem; }
.ruta__nodo--arriba { flex-direction: column-reverse; }
.ruta__nodo--arriba .ruta__txt { margin: 0 0 .85rem; }
.ruta__nodo h3 {
  font-size: clamp(.86rem, .78rem + .3vw, 1.02rem); color: #fff; margin: 0 0 .2rem;
  line-height: 1.25;
}
.ruta__nodo p { font-size: var(--fs-xs); color: var(--c-inv-2); margin: 0; line-height: 1.45; }
.ruta__nodo:hover h3 { color: var(--c-lime); }
.ruta__num {
  display: block; font-family: var(--f-head); font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; color: var(--c-lime); margin-bottom: .18rem;
}

/* Versión apilada */
@media (max-width: 900px) {
  .ruta { gap: 0; }
  .ruta__banda { aspect-ratio: auto; display: grid; gap: 1.6rem; padding-left: 4.2rem; }
  .ruta__banda + .ruta__banda { padding-top: 1.6rem; }
  .ruta__svg { display: none; }
  .ruta__banda::before {
    content: ""; position: absolute; left: 2.1rem; top: 0; bottom: 0; width: 2px;
    background: repeating-linear-gradient(180deg, rgba(169,212,81,.55) 0 8px, transparent 8px 16px);
  }
  .ruta__nodo {
    position: static; width: auto; transform: none;
    flex-direction: row; align-items: center; gap: 1.1rem; text-align: left;
  }
  .ruta__nodo--arriba { flex-direction: row; }
  .ruta__disco { width: 62px; margin-left: -3.55rem; opacity: 1; scale: 1; animation: none !important; }
  .ruta__disco svg { width: 26px; height: 26px; }
  .ruta__txt, .ruta__nodo--arriba .ruta__txt { margin: 0; }
}

/* ---------- 10 quater. Fichas de trabajo ---------- */
.trabajos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.1rem, .5rem + 1.6vw, 2rem);
}
.trabajo {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md);
  overflow: hidden; transition: var(--tr);
}
.trabajo:hover { border-color: var(--c-lime); box-shadow: 0 14px 30px rgba(6, 42, 23, .1); }
.trabajo__media { position: relative; overflow: hidden; background: var(--c-bg-soft); }
.trabajo__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trabajo:hover .trabajo__media img { transform: scale(1.04); }
.trabajo__media img { transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.trabajo__body { padding: var(--sp-5); display: flex; flex-direction: column; gap: .55rem; }
.trabajo__tag {
  display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start;
  font-family: var(--f-head); font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  color: var(--c-green); background: var(--c-bg-soft);
  border: 1px solid var(--c-line); border-radius: 999px; padding: .3rem .75rem;
  transition: var(--tr);
}
.trabajo__tag svg { width: 15px; height: 15px; color: var(--c-lime-dark); }
.trabajo__tag:hover { background: var(--c-lime); border-color: var(--c-lime); color: var(--c-green-deep); }
.trabajo__tag:hover svg { color: var(--c-green-deep); }
.trabajo h3 { font-size: var(--fs-base); margin: 0; line-height: 1.3; }
.trabajo p { font-size: var(--fs-sm); color: var(--c-text-2); margin: 0; }
@media (max-width: 1100px) { .trabajos { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .trabajo { grid-template-columns: 1fr; }
  .trabajo__media { aspect-ratio: 4 / 3; }
}

/* ---------- 10 ter. Banner del catálogo ---------- */
.cat {
  position: relative; overflow: hidden; isolation: isolate;
  background-color: var(--c-green-deep);
  background-image: radial-gradient(120% 130% at 12% 8%, #0b3a20 0%, var(--c-green-deep) 46%, #04180d 100%);
  padding: clamp(3rem, 1.6rem + 4vw, 5.5rem) 0;
}
.cat__deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cat__deco::before {
  content: ""; position: absolute; inset: -30% -10% auto auto; width: 62%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(169, 212, 81, .22) 0%, rgba(169, 212, 81, 0) 68%);
}
.cat__deco::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(118deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 22px);
}
.cat__in {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, .8rem + 3.4vw, 4.5rem); align-items: center;
}
.cat__media { position: relative; display: grid; place-items: center; perspective: 1100px; }
.cat__cover {
  position: relative; display: block; width: min(100%, 22rem); border-radius: var(--r-sm);
  overflow: hidden; transform: rotateY(-15deg) rotateX(4deg) rotate(-2.5deg);
  box-shadow: -22px 30px 60px rgba(0, 0, 0, .55), 0 2px 0 rgba(255, 255, 255, .1) inset;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1), box-shadow .55s ease;
}
.cat__cover::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 9px; z-index: 3;
  background: linear-gradient(90deg, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0));
}
.cat__cover img { display: block; width: 100%; height: auto; }
.cat__sheen {
  position: absolute; inset: -40% -120%; z-index: 2; pointer-events: none;
  background: linear-gradient(74deg, transparent 38%, rgba(255, 255, 255, .5) 48%, transparent 58%);
  transform: translateX(-42%); animation: catBrillo 5.5s ease-in-out 1.2s infinite;
}
@keyframes catBrillo {
  0%, 62% { transform: translateX(-42%); }
  92%, 100% { transform: translateX(42%); }
}
.cat__lupa {
  position: absolute; right: .7rem; bottom: .7rem; z-index: 4;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-lime); color: var(--c-green-deep);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35); transition: var(--tr);
}
.cat__lupa svg { width: 18px; height: 18px; }
.cat__cover:hover, .cat__cover:focus-visible {
  transform: rotateY(-4deg) rotateX(1deg) rotate(0deg) translateY(-8px) scale(1.02);
  box-shadow: -14px 34px 70px rgba(0, 0, 0, .6);
}
.cat__cover:hover .cat__lupa { transform: scale(1.12); }
.cat__badge {
  position: absolute; right: 4%; top: -.4rem; transform: rotate(-8deg);
  display: grid; place-items: center; width: clamp(74px, 7vw, 92px); aspect-ratio: 1;
  border-radius: 50%; background: var(--c-lime); color: var(--c-green-deep);
  box-shadow: 0 10px 24px rgba(2, 20, 10, .5); text-align: center; line-height: 1;
}
.cat__badge b { font-family: var(--f-head); font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem); font-weight: 800; }
.cat__badge i {
  font-style: normal; font-family: var(--f-head); font-weight: 700;
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; margin-top: .12rem;
}
.cat__txt .eyebrow { color: var(--c-lime); }
.cat__txt h2 { color: #fff; font-size: var(--fs-h2); margin: .4rem 0 var(--sp-4); }
.cat__txt .lead { color: var(--c-inv-2); max-width: 56ch; }
.cat__list { list-style: none; padding: 0; margin: var(--sp-5) 0 var(--sp-6); display: grid; gap: .7rem; }
.cat__list li { display: flex; align-items: flex-start; gap: .7rem; color: #fff; font-size: var(--fs-sm); }
.cat__list svg { width: 20px; height: 20px; flex: none; color: var(--c-lime); margin-top: .05rem; }
.cat__acc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-5); margin: 0; }
.cat__acc .btn--primary { color: var(--c-green-deep); }
.cat__acc .btn svg { width: 18px; height: 18px; }
.cat__ver { color: var(--c-lime); }
.cat__ver svg { width: 15px; height: 15px; }
.cat__meta { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--c-inv-3); letter-spacing: .03em; }
@media (max-width: 900px) {
  .cat__in { grid-template-columns: 1fr; gap: var(--sp-6); }
  .cat__media { order: 2; }
  .cat__cover { width: min(74%, 17rem); transform: rotate(-2deg); }
  .cat__badge { right: 8%; top: -.2rem; }
}

/* ---------- 11. Bloque orbital ---------- */
.orbit { --hub: clamp(190px, 19vw, 300px); }
.orbit__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--hub) minmax(0, 1fr);
  gap: clamp(1.5rem, .6rem + 3.4vw, 3.75rem);
  align-items: center; position: relative; isolation: isolate;
}
.orbit__col { display: grid; gap: clamp(1.4rem, .9rem + 1.6vw, 2.25rem); }
.orbit__col--l { text-align: right; }
.orbit__col--l .orbit__item { flex-direction: row-reverse; }
.orbit__item { display: flex; gap: 1rem; align-items: flex-start; position: relative; }
.orbit__ico {
  flex: none; position: relative; z-index: 1;
  width: clamp(54px, 4.8vw, 68px); height: clamp(54px, 4.8vw, 68px);
  border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--c-line); color: var(--c-green);
  transition: background var(--tr), border-color var(--tr), color var(--tr), transform var(--tr);
}
.orbit__ico svg { width: 27px; height: 27px; }
/* anillo fino que gira al pasar el ratón */
.orbit__ico::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px dashed rgba(3, 97, 48, .3);
  opacity: 0; transition: opacity var(--tr);
  animation: orbGiro 9s linear infinite;
}
.orbit__item:hover .orbit__ico::before { opacity: 1; }
.orbit__item:hover .orbit__ico {
  background: var(--c-lime); border-color: var(--c-lime);
  color: var(--c-green-deep); transform: translateY(-3px) scale(1.04);
}
/* trazo de conexión hacia el núcleo */
.orbit__item::after {
  content: ""; position: absolute; top: clamp(27px, 2.4vw, 34px);
  height: 1px; width: 0; background: linear-gradient(90deg, var(--c-lime), rgba(169, 212, 81, 0));
  transition: width .7s cubic-bezier(.25, .6, .3, 1) .15s; pointer-events: none;
}
.orbit__col--r .orbit__item::after { right: 100%; transform: scaleX(-1); }
.orbit__col--l .orbit__item::after { left: 100%; }
.orbit__item.is-in::after { width: clamp(1rem, 3vw, 3.25rem); }

.orbit__hub { display: grid; place-items: center; }
.orbit__stage {
  position: relative; width: var(--hub); height: var(--hub);
  display: grid; place-items: center;
}
/* halo cónico giratorio: un arco de luz recorre el anillo */
.orbit__halo {
  position: absolute; inset: -6%; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg,
    rgba(169, 212, 81, 0) 0deg 165deg,
    rgba(169, 212, 81, .22) 240deg,
    rgba(169, 212, 81, 1) 318deg,
    rgba(3, 97, 48, .85) 340deg,
    rgba(3, 97, 48, 0) 358deg);
  filter: drop-shadow(0 0 12px rgba(169, 212, 81, .45));
  -webkit-mask: radial-gradient(circle, transparent 0 63%, #000 65%, #000 78%, transparent 80%);
  mask: radial-gradient(circle, transparent 0 63%, #000 65%, #000 78%, transparent 80%);
  animation: orbGiro 7.5s linear infinite;
}
.orbit__rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit__ring { fill: none; transform-origin: 150px 150px; }
.orbit__ring--1 {
  stroke: rgba(3, 97, 48, .26); stroke-width: 1; stroke-dasharray: 3 9;
  animation: orbGiro 52s linear infinite;
}
.orbit__ring--2 {
  stroke: rgba(3, 97, 48, .18); stroke-width: 1; stroke-dasharray: 14 10;
  animation: orbGiroInv 34s linear infinite;
}
.orbit__arc {
  fill: none; stroke: var(--c-lime); stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 62 856; transform-origin: 150px 150px;
  filter: drop-shadow(0 0 6px rgba(169, 212, 81, .8));
  animation: orbGiro 11s cubic-bezier(.55, 0, .45, 1) infinite;
}
/* satélites que orbitan a distintas velocidades */
.orbit__sat {
  position: absolute; inset: 0; display: block; border-radius: 50%;
  animation: orbGiro 18s linear infinite;
}
.orbit__sat i {
  position: absolute; top: -4px; left: 50%; width: 8px; height: 8px;
  margin-left: -4px; border-radius: 50%; background: var(--c-lime);
  box-shadow: 0 0 0 4px rgba(169, 212, 81, .18), 0 0 12px rgba(169, 212, 81, .8);
}
.orbit__sat--b { animation-duration: 27s; animation-direction: reverse; inset: 9%; }
.orbit__sat--b i { width: 6px; height: 6px; margin-left: -3px; top: -3px;
  background: var(--c-green); box-shadow: 0 0 0 3px rgba(3, 97, 48, .14); }
.orbit__sat--c { animation-duration: 40s; inset: -7%; }
.orbit__sat--c i { width: 5px; height: 5px; margin-left: -2.5px; top: -2.5px;
  background: var(--c-earth); box-shadow: 0 0 0 3px rgba(168, 132, 94, .18); }

.orbit__core {
  position: relative; display: grid; place-items: center;
  width: 74%; height: 74%; border-radius: 50%;
  background: #fff; border: 1px solid var(--c-line);
  box-shadow: 0 18px 44px rgba(6, 42, 23, .16), 0 0 0 1px rgba(169, 212, 81, .25),
              inset 0 0 0 8px rgba(255, 255, 255, .9);
  padding: clamp(1rem, 2.2vw, 1.9rem);
}
.orbit__core::after {
  content: ""; position: absolute; inset: -9px; border-radius: 50%;
  border: 1px solid rgba(3, 97, 48, .12);
}
.orbit__core img { width: 100%; height: auto; }

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

@media (max-width: 1080px) {
  .orbit__grid { grid-template-columns: 1fr; justify-items: center; gap: 2.75rem; }
  .orbit__hub { order: -1; }
  .orbit__col { width: 100%; grid-template-columns: 1fr 1fr; gap: 1.9rem; }
  .orbit__col--l { text-align: left; }
  .orbit__col--l .orbit__item { flex-direction: row; }
  .orbit__item::after { display: none; }
}
@media (max-width: 640px) { .orbit__col { grid-template-columns: 1fr; } }

.orbit__item h3 { font-size: var(--fs-base); margin-bottom: .25rem; }
.orbit__item p { font-size: var(--fs-sm); color: var(--c-text-2); margin: 0; }

/* ---------- 12. Mapa interactivo España · Portugal ---------- */
.mapa {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(1.5rem, 1rem + 2.4vw, 3.25rem); align-items: center;
}
.mapa__lienzo {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-md); padding: clamp(.6rem, .3rem + .8vw, 1.1rem);
  background-color: var(--c-green-deep);
  background-image: radial-gradient(120% 120% at 22% 18%, #0c3d22 0%, var(--c-green-deep) 52%, #04180d 100%);
  box-shadow: 0 22px 48px rgba(4, 25, 14, .22), inset 0 0 0 1px rgba(169, 212, 81, .18);
}
.mapa__trama {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(169, 212, 81, .17) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(85% 85% at 50% 50%, #000 25%, transparent 100%);
}
.mapa__svg { position: relative; z-index: 1; width: 100%; height: auto; display: block; overflow: visible; }
.mapa__luz { opacity: 0; transition: opacity .5s ease; }
.mapa.is-es .mapa__luz, .mapa.is-pt .mapa__luz { opacity: 1; }

.mapa__pais {
  fill: rgba(255, 255, 255, .05);
  stroke: rgba(223, 238, 192, .55); stroke-width: 1.6;
  stroke-linejoin: round; vector-effect: non-scaling-stroke;
  transition: fill .4s ease, stroke .4s ease, stroke-width .4s ease;
}
.mapa__zona { cursor: pointer; }
.mapa__zona:hover .mapa__pais { fill: rgba(169, 212, 81, .13); stroke: rgba(223, 238, 192, .85); }
.mapa__zona.is-on .mapa__pais {
  fill: rgba(169, 212, 81, .20); stroke: var(--c-lime); stroke-width: 2.6;
  filter: drop-shadow(0 0 9px rgba(169, 212, 81, .55));
}

.mapa__ruta {
  fill: none; stroke: rgba(223, 238, 192, .55); stroke-width: 1.8;
  stroke-dasharray: 5 5; vector-effect: non-scaling-stroke;
}
.mapa__ruta-flujo {
  fill: none; stroke: var(--c-lime); stroke-width: 2.4; stroke-linecap: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 14 90; stroke-dashoffset: 104;
  filter: drop-shadow(0 0 5px rgba(169, 212, 81, .9));
  animation: mapaFlujo 3.4s linear infinite;
}
@keyframes mapaFlujo { to { stroke-dashoffset: -14; } }

/* Puntos de sede, en HTML sobre el lienzo */
.mapa__pin {
  position: absolute; z-index: 3; transform: translate(-50%, -50%);
  width: 18px; height: 18px; padding: 0; border: 0; background: none;
  cursor: pointer; display: grid; place-items: center;
}
.mapa__punto {
  position: relative; z-index: 3; width: 13px; height: 13px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 2.5px rgba(4, 25, 14, .55), 0 2px 6px rgba(0, 0, 0, .4);
  transition: var(--tr);
}
.mapa__anillo {
  position: absolute; inset: -9px; border-radius: 50%;
  border: 1.5px dashed rgba(223, 238, 192, .55); opacity: 0;
  transition: opacity var(--tr); animation: mapaGiro 9s linear infinite;
}
.mapa__pulso {
  position: absolute; inset: -9px; border-radius: 50%;
  background: rgba(169, 212, 81, .55); opacity: 0;
}
.mapa__pin.is-on .mapa__punto { background: var(--c-lime); box-shadow: 0 0 0 3px rgba(4, 25, 14, .6), 0 0 14px rgba(169, 212, 81, .9); }
.mapa__pin.is-on .mapa__anillo { opacity: 1; }
.mapa__pin.is-on .mapa__pulso { animation: mapaPulso 2.6s cubic-bezier(.2, .6, .3, 1) infinite; }
.mapa__pin:hover .mapa__punto { transform: scale(1.25); }
.mapa__pin:focus-visible { outline: none; }
.mapa__pin:focus-visible .mapa__punto { box-shadow: 0 0 0 3px var(--c-lime), 0 0 0 6px rgba(4, 25, 14, .7); }
@keyframes mapaPulso {
  0%   { opacity: .55; transform: scale(.55); }
  70%  { opacity: 0; transform: scale(2.6); }
  100% { opacity: 0; transform: scale(2.6); }
}
@keyframes mapaGiro { to { transform: rotate(360deg); } }

.mapa__chip {
  position: absolute; top: 50%; transform: translateY(calc(-50% + var(--dy, 0px)));
  display: grid; gap: .1rem; white-space: nowrap; pointer-events: none;
  background: rgba(4, 25, 14, .82); border: 1px solid rgba(169, 212, 81, .3);
  backdrop-filter: blur(3px); border-radius: var(--r-sm);
  padding: .3rem .6rem; transition: var(--tr);
}
.mapa__chip b { font-family: var(--f-head); font-size: .82rem; font-weight: 700; color: #fff; line-height: 1.15; }
.mapa__chip small { font-size: .66rem; letter-spacing: .04em; color: var(--c-inv-2); line-height: 1.15; }
.mapa__pin--dcha .mapa__chip { left: 20px; --dy: 15px; }
.mapa__pin--izda .mapa__chip { right: 20px; text-align: right; --dy: -15px; }
.mapa__pin--dcha .mapa__chip::before,
.mapa__pin--izda .mapa__chip::before {
  content: ""; position: absolute; top: 50%; width: 14px; height: 1px;
  background: rgba(169, 212, 81, .45);
}
.mapa__pin--dcha .mapa__chip::before { left: -14px; transform: rotate(-42deg); transform-origin: right center; }
.mapa__pin--izda .mapa__chip::before { right: -14px; transform: rotate(-42deg); transform-origin: left center; }
.mapa__pin.is-on .mapa__chip { border-color: var(--c-lime); background: rgba(4, 25, 14, .92); }
.mapa__pin:hover .mapa__chip { border-color: var(--c-lime); }

.mapa__nota {
  position: relative; z-index: 2; margin: .35rem .35rem 0;
  font-size: var(--fs-xs); color: var(--c-inv-3); text-align: right;
}

.zonas__btns { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: var(--sp-5); }
.zona-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .65rem 1.15rem; border-radius: var(--r-pill); cursor: pointer;
  border: 1.5px solid var(--c-line-strong); background: #fff; color: var(--c-text);
  font-family: var(--f-head); font-weight: 600; font-size: var(--fs-sm);
  transition: var(--tr); min-height: 44px;
}
.zona-btn svg { width: 21px; height: 15px; border-radius: 2px; flex: none; }
.zona-btn:hover { border-color: var(--c-green); color: var(--c-green); }
.zona-btn[aria-pressed="true"] { background: var(--c-green); border-color: var(--c-green); color: #fff; }
.zona-panel { animation: zonaIn .45s cubic-bezier(.25, .6, .3, 1); }
.zona-panel[hidden] { display: none; }
@keyframes zonaIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.zona-panel h3 { margin-bottom: .35rem; }
.zona-panel .zona-role {
  font-family: var(--f-head); font-size: var(--fs-xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-lime-dark); margin-bottom: var(--sp-4);
}
@media (max-width: 900px) { .mapa { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .mapa__chip { padding: .22rem .45rem; }
  .mapa__chip b { font-size: .72rem; }
  .mapa__chip small { display: none; }
}

/* ---------- 13. Datos de contacto ---------- */
.datos { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: .7rem; }
.datos li { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--fs-base); }
.datos svg { width: 19px; height: 19px; color: var(--c-green); flex: none; margin-top: 4px; }
.datos a { color: inherit; text-decoration: none; }
.datos a:hover { color: var(--c-green); text-decoration: underline; }
.section--dark .datos svg { color: var(--c-lime); }

/* ---------- 14. Galería de proyectos ---------- */
.galeria { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.6rem, .4rem + .8vw, 1rem); }
.galeria figure { margin: 0; position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--c-bg-tint); }
.galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .55s cubic-bezier(.25,.6,.3,1); }
.galeria figure:hover img { transform: scale(1.06); }
.galeria figcaption {
  position: absolute; inset: auto 0 0 0; padding: 1.6rem .9rem .8rem;
  background: linear-gradient(0deg, rgba(4,25,14,.96) 0%, rgba(4,25,14,.82) 55%, rgba(4,25,14,0) 100%);
  color: #fff; font-size: var(--fs-sm); font-family: var(--f-head); font-weight: 600; line-height: 1.35;
  text-shadow: 0 1px 3px rgba(4, 25, 14, .8);
}
.galeria--tall figure:first-child { grid-column: span 2; grid-row: span 2; }
.galeria--tall figure:first-child img { aspect-ratio: 1 / 1; }
@media (max-width: 900px) { .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .galeria { grid-template-columns: 1fr; }
  .galeria--tall figure:first-child { grid-column: auto; grid-row: auto; }
  .galeria--tall figure:first-child img { aspect-ratio: 4 / 3; }
}

/* ---------- 15. Franja CTA ---------- */
.cta-band { background: var(--c-green); color: #fff; }
.cta-band__in {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-5); align-items: center;
  padding-block: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
}
.cta-band h2 { color: #fff; margin-bottom: .35rem; font-size: var(--fs-h3); }
.cta-band p { color: rgba(255, 255, 255, .88); margin: 0; }
.cta-band__actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.cta-band__tel {
  display: inline-flex; align-items: center; gap: .5rem; color: #fff;
  font-family: var(--f-head); font-weight: 700; font-size: var(--fs-lg); text-decoration: none;
}
.cta-band__tel svg { width: 20px; height: 20px; color: var(--c-lime); }
.cta-band__tel:hover { color: var(--c-lime); }
@media (max-width: 860px) { .cta-band__in { grid-template-columns: 1fr; } }

/* ---------- 16. Pie de página ---------- */
.footer { background: var(--c-green-deeper); color: var(--c-inv-2); font-size: var(--fs-sm); }
.footer a { color: var(--c-inv-2); text-decoration: none; }
.footer a:hover { color: var(--c-lime); }
.footer h3 {
  font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase;
  color: #fff; margin-bottom: var(--sp-4);
}
.footer__main {
  display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3rem);
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  padding-block: clamp(2.75rem, 2rem + 3vw, 4.25rem);
}
.footer__logo { height: 52px; width: auto; margin-bottom: var(--sp-5); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer__empresa { margin-bottom: var(--sp-5); line-height: 1.55; }
.footer__empresa strong { color: #fff; display: block; font-family: var(--f-head); letter-spacing: .02em; }
.footer__social { display: flex; gap: .6rem; margin-top: var(--sp-5); }
.footer__social a {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--c-line-inv);
  display: grid; place-items: center; transition: var(--tr);
}
.footer__social a:hover { background: var(--c-lime); border-color: var(--c-lime); color: var(--c-green-deep); }
.footer__social svg { width: 18px; height: 18px; }

.grupo { border-top: 1px solid var(--c-line-inv); padding-block: clamp(2rem, 1.4rem + 2vw, 3rem); text-align: center; }
.grupo__t {
  font-family: var(--f-head); font-size: var(--fs-xs); letter-spacing: .2em;
  text-transform: uppercase; color: var(--c-inv-3); margin-bottom: clamp(1.4rem, 1rem + 1.5vw, 2.25rem);
}
.grupo__list {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(.75rem, .2rem + 2vw, 2.25rem);
}
.grupo__list a {
  display: block; opacity: .78; transition: opacity var(--tr), transform var(--tr);
  width: clamp(124px, 12.5vw, 174px);
}
.grupo__list a:hover, .grupo__list a:focus-visible { opacity: 1; transform: translateY(-3px); }
.grupo__list img { width: 100%; height: auto; aspect-ratio: 28 / 17; object-fit: contain; display: block; }

.footer__bottom {
  border-top: 1px solid var(--c-line-inv);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-4) var(--sp-5); align-items: center;
  padding-block: var(--sp-5); font-size: var(--fs-xs); color: var(--c-inv-3);
}
.footer .footer__legal {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem 1.75rem;
  margin: 0; padding: 0; list-style: none;
}
.footer__bottom .hecho { justify-self: end; }
.footer__copy {
  grid-column: 1 / -1; margin: 0; padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .07);
  line-height: 1.5; letter-spacing: .01em;
}
@media (max-width: 1000px) {
  .footer__bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer__bottom .hecho { justify-self: center; }
  .footer .footer__legal { justify-content: center; }
  .footer__copy { width: 100%; text-align: center; }
}
@media (max-width: 900px) { .footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .footer__main { grid-template-columns: 1fr; }
  .footer__bottom { justify-content: center; text-align: center; }
}

/* ---------- 17. Cabecera de página interior ---------- */
.phead { background: var(--c-green-deep); color: var(--c-inv-2); position: relative; overflow: hidden; }
.phead::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(4,25,14,.94), rgba(4,25,14,.62) 65%, rgba(4,25,14,.35));
}
.phead__bg { position: absolute; inset: 0; }
.phead__bg img { width: 100%; height: 100%; object-fit: cover; }
.phead__in { position: relative; z-index: 2; padding-block: clamp(2.5rem, 1.6rem + 4vw, 4.75rem); }
.phead h1 { color: #fff; margin-bottom: var(--sp-4); max-width: 24ch; }
.phead p { color: rgba(255, 255, 255, .88); max-width: 62ch; font-size: var(--fs-lg); margin: 0; }

.crumbs { font-size: var(--fs-xs); margin-bottom: var(--sp-5); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; align-items: center; }
.crumbs li { display: flex; gap: .45rem; align-items: center; color: rgba(255,255,255,.6); }
.crumbs li + li::before { content: "/"; color: rgba(255,255,255,.35); }
.crumbs a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.crumbs a:hover { color: var(--c-lime); }
.crumbs [aria-current="page"] { color: #fff; }

/* ---------- 18. Contenido editorial ---------- */
.prose { max-width: 74ch; }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { margin-top: var(--sp-7); font-size: var(--fs-h3); }
.prose h3 { margin-top: var(--sp-6); font-size: var(--fs-h4); }
.prose ul, .prose ol { padding-left: 1.15rem; margin-bottom: 0; }
.prose li { margin-bottom: .5rem; }
.prose li::marker { color: var(--c-lime-dark); }
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li { position: relative; padding-left: 1.6rem; }
.prose ul > li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px;
  border-radius: 2px; background: var(--c-lime); transform: rotate(45deg);
}
.prose ol { padding-left: 1.35rem; }
.prose strong { color: var(--c-text); font-weight: 700; }

.layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(2rem, 1.2rem + 3vw, 4rem); align-items: start;
}
@media (max-width: 980px) { .layout { grid-template-columns: 1fr; } }

.aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: var(--sp-5); }
.aside__box {
  background: var(--c-bg-soft); border: 1px solid var(--c-line);
  border-radius: var(--r-md); padding: var(--sp-5);
}
.aside__box h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-3); }
.aside__box p { font-size: var(--fs-sm); color: var(--c-text-2); }
.aside__box--dark { background: var(--c-green-deep); border-color: var(--c-green-deep); color: var(--c-inv-2); }
.aside__box--dark h3 { color: #fff; }
.aside__box--dark p { color: var(--c-inv-2); }
.aside__box--dark a { color: #fff; }
.aside__box--dark a:hover { color: var(--c-lime); }
.aside__box--dark .btn--primary { color: var(--c-green-deep); }
.aside__box--dark .datos svg { color: var(--c-lime); }
.aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.aside ul:not(.datos) a {
  display: block; padding: .6rem .2rem; border-bottom: 1px solid var(--c-line);
  color: var(--c-text); text-decoration: none; font-size: var(--fs-sm); transition: var(--tr);
}
.aside ul:not(.datos) a:hover { color: var(--c-green); padding-left: .5rem; }
.aside ul:not(.datos) a[aria-current="page"] { color: var(--c-green); font-weight: 600; }
.aside ul:not(.datos) li:last-child a { border-bottom: 0; }

.nota {
  border-left: 3px solid var(--c-lime); background: var(--c-bg-soft);
  padding: var(--sp-4) var(--sp-5); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-sm); color: var(--c-text-2);
}
.nota strong { color: var(--c-text); }

/* Datos destacados */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.stats div { background: #fff; padding: var(--sp-5); }
.stats b { display: block; font-family: var(--f-head); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 800; color: var(--c-green); line-height: 1; margin-bottom: .35rem; }
.stats span { font-size: var(--fs-sm); color: var(--c-text-2); }
@media (max-width: 620px) { .stats { grid-template-columns: 1fr; } }

/* ---------- 19. Preguntas frecuentes ---------- */
.faq { border-top: 1px solid var(--c-line); }
.faq details { border-bottom: 1px solid var(--c-line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.15rem 2.5rem 1.15rem 0;
  font-family: var(--f-head); font-weight: 600; font-size: var(--fs-md);
  position: relative; color: var(--c-text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .5rem; top: 1.55rem;
  width: 11px; height: 11px; border-right: 2px solid var(--c-green);
  border-bottom: 2px solid var(--c-green); transform: rotate(45deg);
  transition: transform var(--tr);
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.75rem; }
.faq summary:hover { color: var(--c-green); }
.faq .faq__a { padding: 0 2.5rem 1.35rem 0; color: var(--c-text-2); font-size: var(--fs-base); }
.faq .faq__a > :last-child { margin-bottom: 0; }

/* ---------- 20. Blog ---------- */
.post-card { display: flex; flex-direction: column; height: 100%; position: relative; }
.post-card__media { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 2 / 1; background: var(--c-bg-tint); margin-bottom: var(--sp-4); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card time { font-size: var(--fs-xs); color: var(--c-text-3); font-family: var(--f-head); letter-spacing: .06em; text-transform: uppercase; }
.post-card h3 { font-size: var(--fs-h4); margin: .4rem 0 .55rem; }
.post-card h3 a { color: inherit; text-decoration: none; }
.post-card h3 a::after { content: ""; position: absolute; inset: 0; }
.post-card p { font-size: var(--fs-sm); color: var(--c-text-2); margin: 0; }

.post-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center;
  font-size: var(--fs-sm); color: var(--c-text-3);
  padding-bottom: var(--sp-5); border-bottom: 1px solid var(--c-line); margin-bottom: var(--sp-6);
}
.post-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.post-meta svg { width: 15px; height: 15px; }
.post-hero { border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--sp-6); }
.prose .faq { margin-top: var(--sp-5); }

/* Tabla dentro de un artículo */
.tabla { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--c-line); border-radius: var(--r-md); }
.tabla table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 30rem; }
.tabla thead th {
  background: var(--c-green-deep); color: #fff; text-align: left;
  font-family: var(--f-head); font-weight: 700; padding: .85rem 1rem;
}
.tabla tbody th, .tabla tbody td { padding: .8rem 1rem; border-top: 1px solid var(--c-line); vertical-align: top; }
.tabla tbody th { text-align: left; font-weight: 600; color: var(--c-text); background: var(--c-bg-soft); width: 52%; }
.tabla tbody td { color: var(--c-text-2); }
.tabla tbody tr:hover th, .tabla tbody tr:hover td { background: #f2f6ef; }

/* Atribución de fuente al final de un párrafo */
.fuente {
  display: inline-block; font-size: .78em; letter-spacing: .02em;
  color: var(--c-text-3); background: var(--c-bg-soft);
  border: 1px solid var(--c-line); border-radius: 999px;
  padding: .05rem .55rem; margin-left: .3rem; white-space: nowrap;
  vertical-align: baseline;
}

/* ---------- 21. Formulario ---------- */
.form { display: grid; gap: var(--sp-4); }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: .4rem; }
.field label { font-family: var(--f-head); font-weight: 600; font-size: var(--fs-sm); }
.field .req { color: var(--c-error); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: var(--fs-base); color: var(--c-text);
  padding: .8rem .9rem; border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-sm); background: #fff; width: 100%;
  transition: var(--tr); min-height: 48px;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--c-green); box-shadow: 0 0 0 3px rgba(3, 97, 48, .14);
}
.field .hint { font-size: var(--fs-xs); color: var(--c-text-3); }
.field .err { font-size: var(--fs-xs); color: var(--c-error); font-weight: 600; }
.field .err:empty { display: none; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color: var(--c-error); box-shadow: 0 0 0 3px rgba(179, 38, 30, .12);
}
.check { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--c-text-2); }
.check input { width: 20px; height: 20px; min-height: 0; flex: none; margin-top: 2px; accent-color: var(--c-green); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__msg { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.form__msg[hidden] { display: none; }
.form__msg--ok { background: rgba(3, 97, 48, .09); border: 1px solid rgba(3, 97, 48, .3); color: var(--c-green-dark); }
.form__msg--err { background: rgba(179, 38, 30, .07); border: 1px solid rgba(179, 38, 30, .3); color: var(--c-error); }
.form button[type="submit"] { justify-self: start; }
.form button[disabled] { opacity: .6; cursor: progress; }

/* ---------- 22. Botón flotante de WhatsApp ---------- */
.float-wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 800;
  display: flex; align-items: center; height: 58px; width: 58px;
  padding: 0 13px; gap: 11px; overflow: hidden;
  background: var(--c-green-dark); color: #fff; border-radius: var(--r-pill);
  text-decoration: none; box-shadow: var(--sh-lg);
  transition: width .34s cubic-bezier(.25, .6, .3, 1);
}
.float-wa:hover, .float-wa:focus-visible { width: 268px; color: #fff; }
.float-wa .wa-i {
  flex: none; width: 32px; height: 32px; border-radius: 50%; background: #25d366;
  display: grid; place-items: center; color: #fff; margin-left: -1px;
}
.float-wa .wa-i svg { width: 19px; height: 19px; }
.float-wa .wa-t {
  white-space: nowrap; font-family: var(--f-head); font-weight: 700;
  font-size: .85rem; line-height: 1.25;
}
.float-wa .wa-t small { display: block; font-weight: 500; font-size: .76rem; color: #c3d3c7; }
@media (max-width: 760px) {
  .float-wa { right: 14px; bottom: 14px; }
  .float-wa:hover, .float-wa:focus-visible { width: 250px; }
}
@media print { .float-wa { display: none; } }

/* ---------- 22 bis. Volver arriba ---------- */
.to-top {
  position: fixed; right: 18px; bottom: 88px; z-index: 799;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  background: #fff; color: var(--c-green); border: 1px solid var(--c-line-strong);
  display: grid; place-items: center; box-shadow: var(--sh-md);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.85);
  transition: opacity .3s ease, transform .35s cubic-bezier(.34, 1.4, .64, 1),
              visibility .3s, background var(--tr), color var(--tr), border-color var(--tr);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover, .to-top:focus-visible {
  background: var(--c-green); color: #fff; border-color: var(--c-green);
}
.to-top svg { width: 20px; height: 20px; transition: transform var(--tr); }
.to-top:hover svg { transform: translateY(-2px); }
/* anillo de progreso de lectura */
.to-top::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--c-lime);
  opacity: 0; transition: opacity var(--tr);
}
.to-top:hover::before { opacity: 1; animation: orbGiro 1.4s linear infinite; }
@media (max-width: 760px) { .to-top { right: 14px; bottom: 80px; width: 44px; height: 44px; } }
@media print { .to-top { display: none; } }

/* ---------- 22 ter. Firma del estudio ---------- */
.hecho {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1.05rem; border-radius: var(--r-pill);
  border: 1px solid var(--c-line-inv); background: rgba(255, 255, 255, .04);
  font-family: var(--f-head); font-size: var(--fs-xs); font-weight: 600;
  color: var(--c-inv-2); text-decoration: none; white-space: nowrap;
  transition: var(--tr);
}
.hecho svg { width: 13px; height: 13px; color: var(--c-lime); transition: transform .5s cubic-bezier(.34, 1.4, .64, 1); }
.hecho:hover, .hecho:focus-visible {
  color: #fff; border-color: rgba(169, 212, 81, .55);
  background: rgba(169, 212, 81, .1); transform: translateY(-2px);
}
.hecho:hover svg { transform: rotate(180deg) scale(1.15); }

/* ---------- 23. Aviso de cookies ---------- */
.cookies {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 1000; width: min(920px, calc(100vw - 24px));
  background: #fff; border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md); box-shadow: var(--sh-lg);
  padding: clamp(1.1rem, .9rem + .8vw, 1.6rem);
}
.cookies[hidden] { display: none; }
.cookies h2 { font-size: var(--fs-h4); margin-bottom: .5rem; }
.cookies p { font-size: var(--fs-sm); color: var(--c-text-2); margin-bottom: var(--sp-4); }
.cookies__acts { display: flex; flex-wrap: wrap; gap: .6rem; }
.cookies__opts { display: grid; gap: .8rem; margin-bottom: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--c-line); }
.cookies__opts[hidden] { display: none; }
.cookies__opt { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--fs-sm); }
.cookies__opt input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--c-green); }
.cookies__opt strong { display: block; font-family: var(--f-head); }
.cookies__opt span { color: var(--c-text-2); }
.cookies-open:not(.btn) {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px;
}

/* Contenido externo bloqueado hasta el consentimiento */
.embed-block {
  border: 1px dashed var(--c-line-strong); border-radius: var(--r-md);
  background: var(--c-bg-soft); padding: var(--sp-6); text-align: center;
}
.embed-block p { font-size: var(--fs-sm); color: var(--c-text-2); }
.embed-frame { border: 0; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-md); display: block; }

/* ---------- 24. Página 404 ---------- */
.e404 { text-align: center; padding-block: clamp(3.5rem, 2rem + 8vw, 7rem); }
.e404 .code {
  font-family: var(--f-head); font-weight: 800; font-size: clamp(4.5rem, 3rem + 10vw, 9rem);
  line-height: .9; color: #86948a; letter-spacing: -.04em;
}
.e404 .lang-pick { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-6); }

/* ---------- 25. Selector de idioma raíz ---------- */
.gate { min-height: 100dvh; display: grid; place-items: center; background: var(--c-green-deep); color: var(--c-inv-2); text-align: center; padding: var(--sp-6) var(--gutter); }
.gate__card { max-width: 640px; }
.gate img.gate__logo { height: 62px; width: auto; margin: 0 auto var(--sp-6); }
.gate h1 { color: #fff; font-size: var(--fs-h2); }
.gate .lead, .gate .lead span { color: var(--c-inv-2); }
.gate__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-6); }
@media (max-width: 560px) { .gate__opts { grid-template-columns: 1fr; } }
.gate__opt {
  display: block; padding: var(--sp-5); border: 1px solid var(--c-line-inv);
  border-radius: var(--r-md); text-decoration: none; color: var(--c-inv-2);
  transition: var(--tr); background: rgba(255, 255, 255, .04);
}
.gate__opt:hover { background: rgba(255, 255, 255, .1); border-color: var(--c-lime); color: #fff; }
.gate__opt strong { display: block; font-family: var(--f-head); font-size: var(--fs-lg); color: #fff; margin-bottom: .2rem; }
.gate__opt span { font-size: var(--fs-sm); }

/* ---------- 26. Animaciones de entrada ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.25, .6, .3, 1); }
.reveal.rx-l { transform: translateX(-22px); }
.reveal.rx-r { transform: translateX(22px); }
/* Por debajo del punto en que el bloque radial se apila, el desplazamiento
   lateral podría desbordar el ancho de la ventana: se sustituye por vertical. */
@media (max-width: 1080px) {
  .reveal.rx-l, .reveal.rx-r { transform: translateY(18px); }
}
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- 27. Reducción de movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero__slide.is-on img { animation: none; transform: scale(1.03); }
  .hero__num[aria-selected="true"] .hero__num-fill { animation: none; height: 100%; }
  .orbit__halo, .orbit__ring, .orbit__arc, .orbit__sat, .orbit__ico::before,
  .to-top:hover::before, .ruta__brillo, .cat__sheen,
  .mapa__ruta-flujo, .mapa__pulso, .mapa__anillo { animation: none !important; }
  .hc, .hc-pt { animation: none !important; }
  .hc--traza { stroke-dashoffset: 0; }
  .mapa__ruta-flujo { stroke-dashoffset: 0; stroke-dasharray: 4 5; }
  .mapa__pulso { opacity: 0; }
  .cat__sheen { opacity: 0; }
  .ruta__linea { stroke-dashoffset: 0; animation: none !important; }
  .ruta__disco { opacity: 1; scale: 1; animation: none !important; }
  .ruta__brillo { opacity: 0; }
  .orbit__halo { opacity: .35; }
  .orbit__arc { opacity: .55; }
  .reveal { opacity: 1; transform: none; }
  .orbit__item::after { transition: none; }
}

/* ---------- 28. Impresión ---------- */
@media print {
  .header, .topbar, .footer, .cookies, .cta-band, .hero__nums, .hero__bars, .skip-link { display: none !important; }
  body { color: #000; font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* =============================================================
   29. Ajustes de la revisión del 30-07-2026
   ============================================================= */

/* --- 29.1 Botón de WhatsApp: el texto asomaba por la derecha ---
   El botón cerrado mide 58 px y el texto arrancaba en el píxel 56
   (13 de relleno + 32 del icono + 11 de hueco), así que quedaban dos
   píxeles del primer carácter visibles por el borde. Se resuelve con
   opacidad, no con más recorte: así no depende del cálculo exacto y
   aguanta cualquier tamaño de letra o nivel de zoom. */
.float-wa .wa-t {
  opacity: 0;
  transition: opacity .14s linear;
}
.float-wa:hover .wa-t,
.float-wa:focus-visible .wa-t {
  opacity: 1;
  transition: opacity .26s .08s linear;
}

/* --- 29.2 «Síganos» y los iconos sociales en la misma línea --- */
.footer__sig {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-4) clamp(1rem, .5rem + 1.5vw, 1.75rem);
  margin-top: var(--sp-5);
}
.footer__sig h3 { margin-bottom: 0; }
.footer__sig .footer__social { margin-top: 0; }

/* --- 29.3 Selector de idioma en el pie, bajo la firma del estudio --- */
.footer__bottom .footer__legal { grid-column: 1; grid-row: 1; }
.footer__bottom .hecho        { grid-column: 2; grid-row: 1; }
.footer__lang {
  grid-column: 2; grid-row: 2; justify-self: end;
  display: flex; align-items: center; gap: .4rem;
}
.footer__bottom .footer__copy { grid-column: 1 / -1; grid-row: 3; }
.footer__lang .lang__item { color: var(--c-inv-3); }
.footer__lang .lang__item--on { color: var(--c-green-deep); }

@media (max-width: 1000px) {
  .footer__bottom .footer__legal,
  .footer__bottom .hecho,
  .footer__lang,
  .footer__bottom .footer__copy {
    grid-column: 1; grid-row: auto; justify-self: center;
  }
  .footer__lang { justify-content: center; }
}

/* --- 29.4 Comprobación antispam del formulario --- */
.field--suma .suma__q {
  margin: 0 0 .5rem; font-family: var(--f-head); font-weight: 700;
  font-size: var(--fs-sm); color: var(--c-ink);
}
.field--suma .suma__q b { color: var(--c-green); font-size: 1.06em; }
.field--suma input { max-width: 8.5rem; }
.field--suma .hint { margin-top: .4rem; }

/* --- 29.5 Contenedores enfocados por programa (volver arriba) ---
   La cabecera recibe el foco al pulsar «volver arriba» para restablecer el
   orden de tabulación. No debe dibujar indicador: no es un control. */
.header:focus { outline: none; }

/* =============================================================
   30. Visor del catálogo (/es/catalogo/ · /pt/catalogo/)
   -------------------------------------------------------------
   Sin JavaScript, las seis páginas se apilan y todo sigue siendo
   navegable: las miniaturas y las flechas son enlaces a #pagina-N.
   Con JavaScript, `.visor--js` pasa a modo de una página.
   ============================================================= */
.visor { --visor-max: 640px; }

.visor__escena { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: clamp(.4rem, .2rem + 1vw, 1.25rem); }

.visor__pistas { display: grid; gap: var(--sp-5); justify-items: center; min-width: 0; }

.visor__pag { margin: 0; width: 100%; max-width: var(--visor-max); }
.visor__pag picture { display: block; }
.visor__pag img {
  width: 100%; height: auto; display: block; border-radius: var(--r-md);
  box-shadow: 0 18px 44px -18px rgba(4, 25, 14, .45), 0 0 0 1px rgba(4, 25, 14, .08);
  background: #fff;
}
.visor__pag figcaption {
  margin-top: .7rem; text-align: center;
  font-family: var(--f-head); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--c-text-2);
}

/* --- flechas --- */
.visor__nav {
  display: grid; place-items: center; flex: none;
  width: clamp(38px, 2rem + 1.6vw, 52px); aspect-ratio: 1;
  border-radius: 50%; border: 1px solid var(--c-line);
  background: #fff; color: var(--c-green); text-decoration: none;
  box-shadow: var(--sh-sm); transition: var(--tr);
}
.visor__nav svg { width: 22px; height: 22px; }
.visor__nav:hover, .visor__nav:focus-visible {
  background: var(--c-green); border-color: var(--c-green); color: #fff; transform: scale(1.06);
}
.visor__nav[aria-disabled="true"] { opacity: .32; pointer-events: none; }

/* --- barra inferior --- */
.visor__barra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-top: var(--sp-5);
}
.visor__cuenta { margin: 0; font-family: var(--f-head); font-size: var(--fs-sm); color: var(--c-text-2); }
.visor__cuenta b { color: var(--c-green); font-size: 1.15em; }
.visor__acts { display: flex; flex-wrap: wrap; gap: .55rem; }
.visor__acts .btn svg { width: 16px; height: 16px; }

/* --- miniaturas --- */
.visor__minis {
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(.4rem, .2rem + .6vw, .8rem);
  margin: var(--sp-5) 0 0; padding: 0; list-style: none;
}
.visor__mini {
  display: block; position: relative; width: 92px; border-radius: var(--r-sm);
  overflow: hidden; text-decoration: none; line-height: 0;
  border: 2px solid transparent; box-shadow: var(--sh-sm);
  transition: transform var(--tr), border-color var(--tr);
}
.visor__mini img { width: 100%; height: auto; display: block; background: #fff; }
.visor__mini span {
  position: absolute; inset: auto 0 0 0; line-height: 1;
  padding: .28rem 0; text-align: center;
  font-family: var(--f-head); font-size: .68rem; font-weight: 700;
  color: #fff; background: rgba(4, 25, 14, .72);
}
.visor__mini:hover, .visor__mini:focus-visible { transform: translateY(-3px); border-color: var(--c-lime); }
.visor__mini[aria-current="true"] { border-color: var(--c-green); }
.visor__mini[aria-current="true"] span { background: var(--c-green); }

.visor__aviso {
  margin: var(--sp-5) 0 0; padding: .85rem 1.1rem; border-radius: var(--r-sm);
  border-left: 3px solid var(--c-lime); background: var(--c-bg-tint);
  font-size: var(--fs-sm); color: var(--c-text-2);
}
.visor__sinjs { margin: var(--sp-5) 0 0; text-align: center; font-size: var(--fs-xs); color: var(--c-text-3); }

/* --- modo con JavaScript: una página a la vez --- */
.visor--js .visor__pistas { display: block; position: relative; }
.visor--js .visor__pag { display: none; margin-inline: auto; }
.visor--js .visor__pag.is-on { display: block; }
.visor--js .visor__sinjs { display: none; }
.visor--js .visor__pag img { cursor: zoom-in; }

/* --- ampliación a pantalla completa --- */
.visor__lupa-caja {
  position: fixed; inset: 0; z-index: 900; display: none;
  background: rgba(3, 18, 10, .93); padding: clamp(.5rem, 2vw, 1.5rem);
}
.visor__lupa-caja[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.visor__lupa-barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .75rem; }
.visor__lupa-barra p { margin: 0; font-family: var(--f-head); font-size: var(--fs-sm); color: #fff; }
.visor__lupa-cerrar {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem; border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08);
  color: #fff; font-family: var(--f-head); font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
}
.visor__lupa-cerrar:hover, .visor__lupa-cerrar:focus-visible { background: var(--c-lime); color: var(--c-green-deep); border-color: var(--c-lime); }
.visor__lupa-cerrar svg { width: 16px; height: 16px; }
.visor__lupa-lienzo { overflow: auto; overscroll-behavior: contain; display: grid; place-items: start center; }
.visor__lupa-lienzo img { max-width: none; width: min(1400px, 190%); height: auto; border-radius: var(--r-sm); background: #fff; }
body.visor-abierto { overflow: hidden; }

/* --- resumen del contenido --- */
.catpags { display: grid; gap: var(--sp-5); }
.catpag {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1rem, .6rem + 1.5vw, 2rem);
  padding: clamp(1.25rem, 1rem + 1vw, 1.9rem);
  border: 1px solid var(--c-line); border-radius: var(--r-md); background: #fff;
}
.catpag__n {
  font-family: var(--f-head); font-weight: 800; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  line-height: 1; color: var(--c-lime-dark);
}
.catpag__b h3 { margin: 0 0 .55rem; }
.catpag__b > :last-child { margin-bottom: 0; }
.catpag__b ul { margin: 0 0 .9rem; padding-left: 1.1rem; display: grid; gap: .35rem; }

@media (min-width: 900px) { .catpags { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 700px) {
  .visor { --visor-max: 100%; }
  .visor__escena { grid-template-columns: 1fr; }
  .visor--js .visor__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
  .visor--js .visor__escena { position: relative; }
  .visor--js .visor__nav--prev { left: -2px; }
  .visor--js .visor__nav--next { right: -2px; }
  .visor:not(.visor--js) .visor__nav { display: none; }
  .visor__mini { width: 66px; }
  .visor__barra { justify-content: center; }
  .visor__lupa-lienzo img { width: 260%; }
}

@media (prefers-reduced-motion: reduce) {
  .visor__nav, .visor__mini { transition: none; }
  .visor__nav:hover, .visor__mini:hover { transform: none; }
}

@media print {
  .visor__nav, .visor__minis, .visor__barra, .visor__sinjs, .visor__lupa-caja { display: none !important; }
  .visor--js .visor__pag { display: block !important; break-inside: avoid; }
}

/* --- 30 bis. `cat__meta` sobre fondo claro ---
   La clase original usa `--c-inv-3`, pensada para el fondo oscuro del banner
   del catálogo. En la página del catálogo el mismo dato va sobre blanco, donde
   ese color da 2,96:1 y no llega al mínimo AA. */
.cat__meta--claro { color: var(--c-text-3); }

/* =============================================================
   31. Valores · Experiencia · Compromiso · Calidad
   -------------------------------------------------------------
   Recupera el módulo de pestañas del sitio Joomla con otro
   planteamiento: el olivo no es un adorno, es el índice del
   bloque. Cada valor ilumina la parte del árbol que le
   corresponde (raíces, tronco, copa) mientras el resto queda en
   penumbra. Sin librerías: un recorte `clip-path` que transita
   entre tres franjas.
   ============================================================= */
.valores {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: var(--sp-sec);
  color: var(--c-inv-2);
  background:
    radial-gradient(115% 85% at 16% 4%, rgba(3, 97, 48, .58) 0%, rgba(3, 97, 48, 0) 60%),
    radial-gradient(85% 75% at 92% 104%, rgba(169, 212, 81, .14) 0%, rgba(169, 212, 81, 0) 62%),
    linear-gradient(176deg, var(--c-green-deep) 0%, var(--c-green-deeper) 100%);
}
/* líneas de cultivo en fuga, muy tenues */
.valores::before {
  content: ""; position: absolute; inset: -10% -20% auto; height: 78%; z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(101deg,
    rgba(255, 255, 255, .030) 0 1px, transparent 1px 44px);
  -webkit-mask: linear-gradient(#000 0%, rgba(0, 0, 0, .35) 55%, transparent 100%);
  mask: linear-gradient(#000 0%, rgba(0, 0, 0, .35) 55%, transparent 100%);
}
.valores h2, .valores h3 { color: var(--c-inv); }
.valores .eyebrow { color: var(--c-lime); }
.valores .lead { color: var(--c-inv-2); }
.valores .hl { color: var(--c-lime); }
.valores :focus-visible { outline: 2px solid var(--c-lime); outline-offset: 3px; }

.valores__head { max-width: 76ch; margin-bottom: clamp(2rem, 1.2rem + 2.4vw, 3.25rem); }
.valores__head h2 { margin: 0 0 var(--sp-4); text-wrap: balance; }
.valores__head .lead { margin: 0; max-width: 62ch; }
.valores__sep { color: var(--c-lime); font-weight: 400; }

.valores__in {
  display: grid; align-items: center;
  gap: clamp(2.25rem, 1rem + 4vw, 4.75rem);
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
}

/* ---------- el olivo ---------- */
.valores__escena {
  position: relative; margin: 0 0 0 auto; width: 100%; max-width: 330px;
  aspect-ratio: 670 / 900;
}
/* nivel del suelo: por debajo empiezan las raíces. Se extiende a lo ancho
   de la sección y se desvanece por los lados para que no aparezca el canto
   del rectángulo. */
.valores__tierra {
  position: absolute; left: -72%; right: -72%; top: 63%; bottom: -20%;
  border-top: 1px solid rgba(168, 132, 94, .34);
  background: linear-gradient(rgba(168, 132, 94, .09), rgba(168, 132, 94, 0) 70%);
  pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 26%, #000 74%, transparent);
  mask: linear-gradient(90deg, transparent, #000 26%, #000 74%, transparent);
}
/* halo que acompaña a la franja iluminada */
.valores__halo {
  position: absolute; left: -18%; right: -18%; height: 46%; top: 27%;
  z-index: -1; opacity: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(169, 212, 81, .28), rgba(169, 212, 81, 0) 78%);
  filter: blur(6px);
  transition: top .95s cubic-bezier(.5, .12, .22, 1),
              height .95s cubic-bezier(.5, .12, .22, 1), opacity .6s ease;
}
.valores__banda {
  position: absolute; left: -9%; right: -9%; top: 0; height: 0; opacity: 0;
  border-top: 1px solid rgba(169, 212, 81, .5);
  border-bottom: 1px solid rgba(169, 212, 81, .5);
  pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  transition: top .95s cubic-bezier(.5, .12, .22, 1),
              height .95s cubic-bezier(.5, .12, .22, 1), opacity .6s ease;
}
.valores__capa { position: absolute; inset: 0; }
.valores__capa img { width: 100%; height: 100%; object-fit: contain; }
.valores__capa--base img {
  filter: grayscale(.6) brightness(.58) contrast(.88);
  opacity: .6;
  transition: opacity .8s ease;
}
.valores__capa--foco {
  clip-path: inset(0 0 0 0);
  transition: clip-path .95s cubic-bezier(.5, .12, .22, 1);
}
.valores__capa--foco img {
  filter: drop-shadow(0 14px 30px rgba(4, 25, 14, .55))
          drop-shadow(0 0 20px rgba(169, 212, 81, .3));
}
/* franja iluminada según el valor activo */
.valores.is-z0 .valores__capa--foco { clip-path: inset(63% 0 0 0); }      /* raíces */
.valores.is-z1 .valores__capa--foco { clip-path: inset(44% 0 33% 0); }    /* tronco */
.valores.is-z2 .valores__capa--foco { clip-path: inset(0 0 52% 0); }      /* copa   */
.valores.is-z0 .valores__halo { top: 64%; height: 34%; opacity: 1; }
.valores.is-z1 .valores__halo { top: 43%; height: 25%; opacity: 1; }
.valores.is-z2 .valores__halo { top: 2%;  height: 46%; opacity: 1; }
/* corchete: dos filetes que enmarcan la franja iluminada. Sin ellos el corte
   del recorte parece un fallo; con ellos se lee como una medición. */
.valores.is-z0 .valores__banda { top: 63%; height: 37%; opacity: 1; }
.valores.is-z1 .valores__banda { top: 44%; height: 23%; opacity: 1; }
.valores.is-z2 .valores__banda { top: 0;   height: 48%; opacity: 1; }
.valores.is-z0 .valores__capa--base img,
.valores.is-z1 .valores__capa--base img,
.valores.is-z2 .valores__capa--base img { opacity: .44; }

/* rótulos de las tres partes del árbol */
.valores__zonas { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.valores__zona {
  position: absolute; right: calc(100% + .9rem); transform: translateY(-50%);
  display: flex; align-items: center; gap: .5rem; white-space: nowrap;
  font-family: var(--f-head); font-size: .68rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: rgba(255, 255, 255, .32); transition: color .5s ease;
}
.valores__zona::after {
  content: ""; width: 12px; height: 1px; background: currentColor;
  transition: width .5s cubic-bezier(.25, .6, .3, 1);
}
.valores__zona--copa   { top: 22%; }
.valores__zona--tronco { top: 55%; }
.valores__zona--raices { top: 81%; }
.valores.is-z2 .valores__zona--copa,
.valores.is-z1 .valores__zona--tronco,
.valores.is-z0 .valores__zona--raices { color: var(--c-lime); }
.valores.is-z2 .valores__zona--copa::after,
.valores.is-z1 .valores__zona--tronco::after,
.valores.is-z0 .valores__zona--raices::after { width: 26px; }

/* ---------- la lista de valores ---------- */
.valores__lista { display: block; }
.valor { position: relative; border-top: 1px solid var(--c-line-inv); }
.valor:last-child { border-bottom: 1px solid var(--c-line-inv); }
.valor__h { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.valor__btn {
  position: relative; width: 100%; display: grid; align-items: baseline;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(.85rem, .4rem + 1.3vw, 1.7rem);
  padding: clamp(1.05rem, .75rem + 1.1vw, 1.7rem) 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--c-inv); font-family: var(--f-head);
}
.valor__n {
  font-size: .8rem; font-weight: 800; letter-spacing: .14em;
  color: rgba(169, 212, 81, .5); transition: color .45s ease;
}
.valor__tit {
  font-size: clamp(1.4rem, 1.05rem + 1.5vw, 2.2rem); font-weight: 700;
  line-height: 1.04; letter-spacing: -.022em;
  transition: color .45s ease, transform .55s cubic-bezier(.25, .8, .3, 1);
}
.valor__zona {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c-inv-3);
  transition: color .45s ease;
}
.valor__btn:hover .valor__tit { color: var(--c-lime); }
.valor.is-open .valor__n { color: var(--c-lime); }
.valor.is-open .valor__tit { color: #fff; transform: translateX(clamp(2px, .5vw, 8px)); }
.valor.is-open .valor__zona { color: var(--c-lime); }

/* barra de avance del pase automático */
.valor__track {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: rgba(169, 212, 81, .16); opacity: 0;
  transition: opacity .3s ease;
}
.valor__fill {
  display: block; width: 0; height: 100%; background: var(--c-lime);
  box-shadow: 0 0 10px rgba(169, 212, 81, .85);
}
.valores--js .valor.is-open .valor__track { opacity: 1; }
.valores--js .valor.is-open .valor__fill { animation: valAvance 7.2s linear forwards; }
.valores--js.is-paused .valor.is-open .valor__fill { animation: none; width: 100%; }
@keyframes valAvance { from { width: 0; } to { width: 100%; } }

/* texto de cada valor */
.valor__p {
  display: grid; grid-template-rows: 1fr; opacity: 1;
  transition: grid-template-rows .55s cubic-bezier(.25, .6, .3, 1), opacity .4s ease;
}
.valor__p > div { overflow: hidden; }
.valor__p p {
  margin: 0; padding-bottom: clamp(1.1rem, .8rem + 1vw, 1.7rem);
  max-width: 56ch; font-size: var(--fs-md); color: var(--c-inv-2);
}
/* estado cerrado: solo cuando el guion se ha hecho cargo del bloque */
.valores--js .valor__p { grid-template-rows: 0fr; opacity: 0; }
.valores--js .valor__p > div { visibility: hidden; transition: visibility 0s linear .55s; }
.valores--js .valor.is-open .valor__p { grid-template-rows: 1fr; opacity: 1; }
.valores--js .valor.is-open .valor__p > div { visibility: visible; transition-delay: 0s; }

/* ---------- adaptaciones ---------- */
@media (max-width: 980px) {
  .valores__in { grid-template-columns: 1fr; }
  .valores__escena { max-width: 330px; margin-inline: auto; }
  /* En una sola columna el árbol se ve entero de un vistazo: si la parte en
     penumbra se oscurece tanto como en escritorio, deja un hueco muerto. */
  .valores__capa--base img,
  .valores.is-z0 .valores__capa--base img,
  .valores.is-z1 .valores__capa--base img,
  .valores.is-z2 .valores__capa--base img {
    opacity: .58; filter: grayscale(.35) brightness(.72) contrast(.9);
  }
}
@media (max-width: 520px) {
  .valores__escena { max-width: 240px; }
  .valores__zonas { display: none; }
  .valor__btn { grid-template-columns: auto minmax(0, 1fr); row-gap: .3rem; }
  .valor__zona { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .valores__capa--foco, .valores__halo, .valores__banda, .valor__tit, .valor__p,
  .valores__zona, .valores__zona::after { transition: none; }
  .valores--js .valor.is-open .valor__fill { animation: none; width: 100%; }
}

@media print {
  .valores { background: none; color: var(--c-text); }
  .valores h2, .valores h3, .valores .valor__tit { color: var(--c-text); }
  .valores__escena, .valor__track { display: none; }
  .valores--js .valor__p { grid-template-rows: 1fr; opacity: 1; }
  .valores--js .valor__p > div { visibility: visible; }
}

/* El botón de contacto de la cabecera puede llevar aria-current en su
   página. `.nav a[aria-current="page"]` teñiría de verde el texto sobre el
   verde del propio botón, así que se restituye el color del botón. */
.nav .nav__cta a[aria-current="page"] { color: #fff; }
.nav .nav__cta a[aria-current="page"]::after { display: none; }

/* ---------- 32. Preguntas frecuentes en dos columnas ----------
   Variante del acordeón de `.faq` para las portadas: doce preguntas
   repartidas en dos columnas temáticas, cada una como ficha propia con su
   número, su etiqueta y un botón cuadrado que gira al abrir. La base sigue
   siendo <details>/<summary>, así que funciona sin JavaScript.
   ------------------------------------------------------------- */
.faq--dos {
  border-top: 0; display: grid; align-items: start;
  gap: clamp(1.5rem, .9rem + 2vw, 2.75rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.faq__col { display: grid; align-content: start; gap: .7rem; }
.faq__cab {
  margin: 0 0 .35rem; display: flex; align-items: center; gap: .75rem;
  font-family: var(--f-head); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--c-lime-dark);
}
.faq__cab::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }

.faq--dos details {
  position: relative; background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  transition: border-color var(--tr), box-shadow var(--tr);
}
.faq--dos details::before {
  content: ""; position: absolute; left: -1px; top: .9rem; bottom: .9rem; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--c-lime);
  opacity: 0; transition: opacity var(--tr);
}
.faq--dos details:hover { border-color: var(--c-line-strong); }
.faq--dos details[open] { border-color: var(--c-green); box-shadow: var(--sh-md); }
.faq--dos details[open]::before { opacity: 1; }

.faq--dos summary {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(.6rem, .4rem + .6vw, 1rem); align-items: start;
  padding: clamp(.9rem, .75rem + .5vw, 1.15rem);
  list-style: none; cursor: pointer;
}
.faq--dos summary::-webkit-details-marker { display: none; }
.faq--dos summary::after { content: none; display: none; }
.faq__n {
  font-family: var(--f-head); font-weight: 800; font-size: .72rem;
  letter-spacing: .1em; color: var(--c-lime-dark); padding-top: .34rem;
  transition: color var(--tr);
}
.faq__q {
  display: block; font-family: var(--f-head); font-weight: 600;
  font-size: var(--fs-md); line-height: 1.3; color: var(--c-text);
  transition: color var(--tr);
}
.faq__tag {
  display: block; margin-top: .3rem; font-family: var(--f-head);
  font-size: .64rem; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--c-text-3); transition: color var(--tr);
}
.faq__mas {
  position: relative; width: 36px; height: 36px; border-radius: 10px;
  background: var(--c-bg-tint); color: var(--c-green);
  transition: background var(--tr), color var(--tr);
}
.faq__mas::before {
  content: ""; position: absolute; left: 50%; top: calc(50% - 3px);
  width: 9px; height: 9px; margin-left: -5px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform var(--tr);
}
.faq--dos summary:hover .faq__mas { background: var(--c-lime); color: var(--c-green-deep); }
.faq--dos details[open] .faq__mas { background: var(--c-green); color: #fff; }
.faq--dos details[open] .faq__mas::before { transform: rotate(-135deg); top: calc(50% + 1px); }
.faq--dos details[open] .faq__q { color: var(--c-green); }
.faq--dos details[open] .faq__n { color: var(--c-green); }

.faq--dos .faq__a {
  color: var(--c-text-2); font-size: var(--fs-base);
  padding: 0 clamp(.9rem, .75rem + .5vw, 1.15rem) clamp(1rem, .8rem + .5vw, 1.25rem)
           calc(clamp(.9rem, .75rem + .5vw, 1.15rem) + 2.15rem);
}
.faq--dos .faq__a a { font-weight: 600; }

@media (max-width: 860px) { .faq--dos { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .faq--dos .faq__a { padding-left: clamp(.9rem, .75rem + .5vw, 1.15rem); }
}
@media (prefers-reduced-motion: reduce) {
  .faq--dos details, .faq--dos .faq__mas, .faq--dos .faq__mas::before { transition: none; }
}
@media print {
  .faq--dos { grid-template-columns: 1fr; }
  .faq--dos details { box-shadow: none; break-inside: avoid; }
}