/* =========================================================================
   NUTECH — Sistema de diseño
   Modo claro por defecto · modo oscuro opcional
   Colores de marca tomados del SVG oficial del logo
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Marca — superficie y acento gráfico. Nunca texto sobre blanco. */
  --brand-yellow:#FCD90D;
  --brand-lime:#E2DE02;
  --brand-lime-soft:#D6DD56;
  --brand-coral:#F08484;
  --brand-gray:#9D9B9A;

  /* Derivados accesibles — todo el texto pasa por aquí */
  --ink:#23262B;          /* 14.9:1 sobre blanco */
  --ink-soft:#6B6968;     /*  5.5:1 sobre blanco */
  --ink-faint:#8C8A88;
  --coral-deep:#B04F4F;   /*  5.1:1 sobre blanco */

  /* Superficies */
  --surface:#FFFFFF;
  --surface-warm:#FAF9F5;
  --surface-tint:#FEF9E3;
  --surface-raise:#FFFFFF;
  --line:#E7E5DE;
  --line-strong:#D6D3CA;

  /* Sobre imagen (siempre claro, la foto ya es el fondo oscuro) */
  --on-media:#FFFFFF;
  --on-media-soft:rgba(255,255,255,.82);

  --shadow-sm:0 2px 10px -4px rgba(35,38,43,.18);
  --shadow-md:0 18px 44px -28px rgba(35,38,43,.34);
  --shadow-lg:0 34px 70px -40px rgba(35,38,43,.46);

  /* Movimiento — set cerrado, dos curvas */
  --ease-soft:cubic-bezier(.25,.8,.25,1);
  --ease-out:cubic-bezier(.19,1,.22,1);
  --t-fast:.2s; --t-mid:.4s; --t-slow:.75s;

  /* Duración del desplazamiento del carrusel. Debe ser bastante menor que el
     `data-interval` de cada sección (hoy 3000 ms en las tres) para que la
     imagen alcance a quedarse quieta: 700 ms de movimiento + 2,3 s de reposo. */
  --slide-anim:700ms;

  --gutter:clamp(20px,4.5vw,72px);
  --max:1360px;
  --header-h:74px;

  color-scheme:light;
}

/* ---------- 2. Modo oscuro (opcional, se activa con [data-theme="dark"]) ---------- */
[data-theme="dark"]{
  --ink:#F2F1EE;
  --ink-soft:#B4B1AC;
  --ink-faint:#8A8781;
  --coral-deep:#F3A0A0;

  --surface:#15171A;
  --surface-warm:#1B1E22;
  --surface-tint:#20211C;
  --surface-raise:#1E2126;
  --line:#2E3238;
  --line-strong:#3C4148;

  --shadow-sm:0 2px 10px -4px rgba(0,0,0,.6);
  --shadow-md:0 18px 44px -26px rgba(0,0,0,.8);
  --shadow-lg:0 34px 70px -38px rgba(0,0,0,.9);

  color-scheme:dark;
}

/* ---------- 3. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,picture{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}

body{
  background:var(--surface);
  color:var(--ink);
  font:400 16px/1.6 "Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background-color var(--t-mid) var(--ease-soft),color var(--t-mid) var(--ease-soft);
}

/* ---------- 4. Tipografía ---------- */
h1,h2,h3,.display{
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.01em;
  line-height:.98;
  text-wrap:balance;
}
h1{font-size:clamp(40px,6.4vw,86px)}
h2{font-size:clamp(30px,4vw,56px)}
h3{font-size:19px;letter-spacing:.02em;line-height:1.22}
p{color:var(--ink-soft);max-width:56ch}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);
  max-width:none; /* es un <p>: sin esto hereda el max-width:56ch y se parte en dos */
}
.eyebrow::before{
  content:"";width:22px;height:2px;background:var(--brand-yellow);flex:0 0 auto;
}
/* font-size y max-width se repiten a propósito: `.on-media p` (17px y 48ch) le
   gana en especificidad a `.eyebrow` y dejaba el antetítulo grande y partido en
   dos líneas. */
.on-media .eyebrow{color:var(--on-media-soft);font-size:12px;max-width:none}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

.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;
}
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:200;
  background:var(--brand-yellow);color:#000;padding:12px 18px;border-radius:6px;
  font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;transition:top var(--t-fast) var(--ease-out);
}
.skip-link:focus{top:12px}

:where(a,button,input,select,summary):focus-visible{
  outline:3px solid var(--brand-yellow);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- 5. Botones ---------- */
.btn{
  --btn-bg:var(--brand-yellow);
  --btn-fg:#000;
  --btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;border-radius:5px;
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);
  font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;position:relative;overflow:hidden;
  transition:background-color var(--t-mid) var(--ease-out),
             color var(--t-mid) var(--ease-out),
             border-color var(--t-mid) var(--ease-out),
             transform var(--t-mid) var(--ease-out);
}
.btn svg{flex:0 0 auto;transition:transform var(--t-mid) var(--ease-out)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(5px)}
.btn:active{transform:translateY(0)}

.btn--primary:hover{--btn-bg:var(--ink);--btn-fg:var(--brand-yellow)}
[data-theme="dark"] .btn--primary:hover{--btn-bg:#FFF;--btn-fg:#000}

.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line-strong)}
.btn--ghost:hover{--btn-bg:var(--ink);--btn-fg:var(--surface);--btn-bd:var(--ink)}

/* Ghost sobre imagen: cristal, no caja opaca */
.btn--glass{
  --btn-bg:rgba(0,0,0,.34);--btn-fg:#FFF;--btn-bd:rgba(255,255,255,.4);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.btn--glass:hover{--btn-bg:#FFF;--btn-fg:#000;--btn-bd:#FFF}

/* ---------- 6. Header ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;
  transition:background-color var(--t-mid) var(--ease-soft),
             border-color var(--t-mid) var(--ease-soft),
             backdrop-filter var(--t-mid);
  border-bottom:1px solid transparent;
}
/* Sobre el hero: transparente con velo degradado */
.header::before{
  content:"";position:absolute;inset:0 0 auto 0;height:170px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.62),rgba(0,0,0,0));
  opacity:1;transition:opacity var(--t-mid) var(--ease-soft);
}
.header.is-stuck{
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);
}
.header.is-stuck::before{opacity:0}

.header .bar{display:flex;align-items:center;gap:26px;width:100%}
.brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.brand img{height:40px;width:auto}
/* El logo es oscuro en su parte "TECH": sobre el hero se aclara */
.brand img{transition:filter var(--t-mid) var(--ease-soft)}
.header:not(.is-stuck) .brand img{filter:brightness(0) invert(1)}
[data-theme="dark"] .brand img{filter:brightness(0) invert(1)}

.nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav a{
  color:rgba(255,255,255,.9);text-decoration:none;
  font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  white-space:nowrap;padding:6px 0;position:relative;
  transition:color var(--t-mid) var(--ease-soft);
}
.header.is-stuck .nav a{color:var(--ink-soft)}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--brand-yellow);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-mid) var(--ease-out);
}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.header.is-stuck .nav a:hover{color:var(--ink)}

.header-tools{display:flex;align-items:center;gap:12px;flex:0 0 auto}

.theme-toggle{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.4);color:#FFF;
  transition:background-color var(--t-mid) var(--ease-out),
             border-color var(--t-mid) var(--ease-out),
             color var(--t-mid) var(--ease-out);
}
.header.is-stuck .theme-toggle{border-color:var(--line-strong);color:var(--ink-soft)}
.theme-toggle:hover{background:var(--brand-yellow);border-color:var(--brand-yellow);color:#000}
.theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:block}

.burger{
  display:none;width:44px;height:44px;place-items:center;
  border:1px solid rgba(255,255,255,.4);border-radius:6px;color:#FFF;
}
.header.is-stuck .burger{border-color:var(--line-strong);color:var(--ink)}

/* ---------- 7. Secciones con imagen a sangre completa ---------- */
.media-section{
  position:relative;
  min-height:min(100svh,940px);
  display:flex;align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.media-section--hero{min-height:100svh}

.media-section .bg{
  position:absolute;inset:0;z-index:-2;
  overflow:hidden;
  background:#0C0D0F; /* evita el flash blanco mientras carga la primera imagen */
}
.media-section .bg img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  will-change:transform;
}
/* Zoom lento y continuo: da vida sin scrolljacking.
   Se excluyen las diapositivas del carrusel, que tienen su propio zoom: si no,
   las cuatro imágenes de una sección animarían a la vez sin que se vean. */
.media-section .bg > img:not(.slide){animation:slow-zoom 26s var(--ease-soft) infinite alternate}

/* ---------- 7.b Carrusel de fondo ---------- */
/* Desplazamiento de derecha a izquierda.
   La entrante empieza fuera por la derecha y entra; la saliente sale por la
   izquierda. Se usan las propiedades independientes `translate` y `scale` en
   vez de `transform`, para que el desplazamiento (transición) y el zoom
   (animación) no se pisen entre sí sin necesidad de un div extra por imagen.

   `opacity` acompaña al desplazamiento a propósito: si un navegador antiguo
   ignora `translate`, el carrusel degrada a fundido cruzado y sigue
   funcionando en vez de mostrar las cuatro imágenes apiladas. */
.bg--carousel .slide{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:0;
  translate:100% 0;                       /* en espera, fuera por la derecha */
  transition:translate var(--slide-anim,900ms) var(--ease-out),
             opacity   var(--slide-anim,900ms) var(--ease-soft);
  will-change:translate,opacity;
}
.bg--carousel .slide.is-active{opacity:1;translate:0 0}
.bg--carousel .slide.is-leaving{opacity:0;translate:-100% 0}  /* sale por la izquierda */

/* Al devolver una diapositiva ya usada a su posición de espera hay que hacerlo
   sin animar; si no, cruzaría toda la pantalla de izquierda a derecha. */
.bg--carousel .slide.no-anim{transition:none}

/* El zoom corre SOLO en la visible y dura lo que dura la diapositiva.
   Si corriera en todas se pagarían cuatro animaciones por sección sin verse. */
.bg--carousel .slide.is-active{
  animation:slide-zoom var(--slide-time,2000ms) linear forwards;
}

/* Controles ------------------------------------------------------------- */
.carousel-ui{
  position:absolute;z-index:3;
  right:var(--gutter);bottom:34px;
  display:flex;align-items:center;gap:14px;
}
.media-section--hero .carousel-ui{bottom:40px}

.carousel-track{display:flex;align-items:center;gap:9px;margin:0;padding:0;list-style:none}

/* La barra visible mide 2px, pero el botón mide 38x26 para cumplir el mínimo
   de 24x24 CSS px de área táctil (WCAG 2.5.8). Nunca bajar de ahí. */
.carousel-dot{
  position:relative;display:block;
  width:38px;height:26px;
  background:none;border:0;cursor:pointer;
}
.carousel-dot::before{
  content:"";position:absolute;left:0;right:0;top:12px;height:2px;
  background:rgba(255,255,255,.34);border-radius:2px;
  transition:background-color var(--t-mid) var(--ease-out);
}
/* Barra de progreso: se rellena durante el tiempo que dura la diapositiva */
.carousel-dot::after{
  content:"";position:absolute;left:0;top:12px;height:2px;width:0;
  background:var(--brand-yellow);border-radius:2px;
}
.carousel-dot:hover::before{background:rgba(255,255,255,.6)}
.carousel-dot[aria-current="true"]::after{width:100%}
.carousel-dot[aria-current="true"].is-running::after{
  animation:dot-progress var(--slide-time,6500ms) linear forwards;
}
/* En pausa la barra se congela donde iba */
.carousel-dot[aria-current="true"].is-paused::after{animation-play-state:paused}

.carousel-btn{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.36);color:#FFF;
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background-color var(--t-mid) var(--ease-out),
             border-color var(--t-mid) var(--ease-out),
             color var(--t-mid) var(--ease-out);
}
.carousel-btn:hover{background:var(--brand-yellow);border-color:var(--brand-yellow);color:#000}
.carousel-btn .icon-play{display:none}
.carousel-btn[aria-pressed="true"] .icon-pause{display:none}
.carousel-btn[aria-pressed="true"] .icon-play{display:block}

/* Sin JS no hay controles ni diapositivas ocultas: se ve la primera imagen fija */
.carousel-ui{display:none}
html.js .carousel-ui{display:flex}
html:not(.js) .bg--carousel .slide{opacity:0}
html:not(.js) .bg--carousel .slide:first-child{opacity:1}

@media (max-width:860px){
  .carousel-ui{right:auto;left:var(--gutter);bottom:20px;gap:10px}
  .media-section--hero .carousel-ui{bottom:28px}
  .carousel-dot{width:28px} /* 28x26: sigue sobre el mínimo táctil de 24x24 */
}

/* Velo: legibilidad garantizada sin cajas opacas */
.media-section .veil{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(12,13,15,.88) 0%,rgba(12,13,15,.55) 34%,rgba(12,13,15,.12) 66%,rgba(12,13,15,.30) 100%),
    linear-gradient(to right,rgba(12,13,15,.60) 0%,rgba(12,13,15,.10) 62%,rgba(12,13,15,0) 100%);
}
.media-section--right .veil{
  background:
    linear-gradient(to top,rgba(12,13,15,.88) 0%,rgba(12,13,15,.55) 34%,rgba(12,13,15,.12) 66%,rgba(12,13,15,.30) 100%),
    linear-gradient(to left,rgba(12,13,15,.60) 0%,rgba(12,13,15,.10) 62%,rgba(12,13,15,0) 100%);
}

.media-section .content{
  position:relative;z-index:1;
  padding-block:clamp(90px,13vh,150px);
  width:100%;
}
.media-section--right .content{display:flex;justify-content:flex-end}
.media-inner{max-width:660px}
.media-section--right .media-inner{text-align:left}

.on-media{color:var(--on-media)}
.on-media h1,.on-media h2{color:var(--on-media);text-shadow:0 2px 26px rgba(0,0,0,.4)}
.on-media p{color:var(--on-media-soft);max-width:48ch;font-size:17px}
.media-inner h2{margin:16px 0 18px}
.media-inner .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* Marcador de sección: número + barra de marca */
.section-index{
  position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);
  z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;
  font-size:12px;font-weight:800;letter-spacing:.14em;color:rgba(255,255,255,.62);
}
.section-index i{display:block;width:1px;height:64px;background:linear-gradient(rgba(255,255,255,.5),transparent)}
@media (max-width:1180px){.section-index{display:none}}

/* ---------- 8. Hero ---------- */
/* El hero cabe entero en una pantalla, sin scroll. Para eso los tamaños no
   dependen solo del ancho: cada clamp lleva también un límite en `svh`, así en
   un portátil de 600–700 px de alto el titular encoge y la fila de datos y los
   botones siguen sobre la línea de flotación. El `min(vw, svh)` elige siempre
   la dimensión que va más justa. */
.media-section--hero .content{
  padding-top:calc(var(--header-h) + clamp(6px,1.8svh,26px));
  padding-bottom:clamp(64px,9.5svh,110px);
}
.hero-inner{max-width:min(1080px,100%)}
.hero-inner h1{
  font-size:clamp(32px,min(5.4vw,9.6svh),78px);
  margin:clamp(6px,1.4svh,16px) 0 clamp(10px,1.9svh,20px);
}
.hero-inner h1 .hl{position:relative;display:inline-block;white-space:nowrap}
.hero-inner h1 .hl::after{
  content:"";position:absolute;left:-4px;right:-4px;bottom:.05em;height:.24em;
  background:var(--brand-yellow);z-index:-1;
  transform:scaleX(0);transform-origin:left;
  animation:wipe-in .9s var(--ease-out) 1.15s forwards;
}
.hero-inner .lead{font-size:clamp(16px,min(1.3vw,2.5svh),19px);line-height:1.5;max-width:60ch}
.hero-inner .actions{
  display:flex;flex-wrap:wrap;gap:12px;
  margin:clamp(14px,2.6svh,30px) 0 clamp(16px,3svh,34px);
}
.hero-inner .btn{min-height:clamp(44px,7.2svh,52px)}

.hero-facts{display:flex;flex-wrap:wrap;gap:10px}
.fact{
  display:inline-flex;align-items:center;gap:9px;padding:clamp(6px,1.2svh,9px) 15px;border-radius:100px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:12.5px;font-weight:700;letter-spacing:.04em;color:#FFF;
}
.fact i{width:7px;height:7px;border-radius:50%;background:var(--brand-yellow);flex:0 0 auto}

.scroll-cue{
  position:absolute;left:50%;bottom:clamp(14px,2.4svh,26px);transform:translateX(-50%);z-index:2;
  display:grid;place-items:center;gap:clamp(5px,1svh,9px);
  font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.72);text-decoration:none;
}
.scroll-cue span{display:block;width:1px;height:clamp(18px,4.4svh,34px);background:linear-gradient(rgba(255,255,255,.7),transparent);animation:cue 2.4s var(--ease-soft) infinite}
@media (max-width:860px){.scroll-cue{display:none}}

/* ---------- 9. Franja de métricas ---------- */
.metrics{background:var(--surface-warm);border-block:1px solid var(--line)}
.metrics .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.metric{background:var(--surface-warm);padding:34px 20px;text-align:center}
.metric b{
  display:block;font-size:clamp(32px,3.8vw,50px);font-weight:800;line-height:1;
  letter-spacing:-.015em;font-variant-numeric:tabular-nums;
}
.metric span{
  display:block;margin-top:10px;font-size:11.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
}
@media (max-width:780px){.metrics .grid{grid-template-columns:1fr 1fr}}

/* ---------- 10. Bloques claros ---------- */
.block{padding-block:clamp(70px,9vw,124px)}
.block--tint{background:var(--surface-tint)}
.block--warm{background:var(--surface-warm)}
.block-head{max-width:70ch;margin-bottom:clamp(34px,4.4vw,54px)}
.block-head h2{margin:14px 0 16px}

/* Capacidades / innovación */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cap{
  background:var(--surface-raise);border:1px solid var(--line);border-radius:12px;
  padding:28px 26px;display:flex;flex-direction:column;gap:12px;
  transition:transform var(--t-slow) var(--ease-out),
             box-shadow var(--t-slow) var(--ease-out),
             border-color var(--t-slow) var(--ease-out);
}
.cap:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.cap .ico{
  width:50px;height:50px;border-radius:11px;display:grid;place-items:center;
  background:var(--surface-tint);border:1px solid var(--line);color:var(--ink);
}
[data-theme="dark"] .cap .ico{background:rgba(252,217,13,.1)}
.cap p{font-size:14.5px}
@media (max-width:980px){.caps{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.caps{grid-template-columns:1fr}}

/* ---------- 10.b Catálogo de servicios ---------- */
.catalog{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.svc{
  position:relative;background:var(--surface-raise);border:1px solid var(--line);
  border-radius:12px;padding:24px 22px;display:flex;flex-direction:column;gap:10px;
  overflow:hidden;
  transition:transform var(--t-slow) var(--ease-out),
             box-shadow var(--t-slow) var(--ease-out),
             border-color var(--t-slow) var(--ease-out);
}
/* Filo de color de marca que se despliega al pasar por encima */
.svc::before{
  content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:var(--brand-yellow);
  transform:scaleY(0);transform-origin:top;
  transition:transform var(--t-slow) var(--ease-out);
}
.svc:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.svc:hover::before{transform:scaleY(1)}
.svc:nth-child(5n+2)::before{background:var(--brand-lime)}
.svc:nth-child(5n+3)::before{background:var(--brand-lime-soft)}
.svc:nth-child(5n+4)::before{background:var(--brand-coral)}
.svc:nth-child(5n+5)::before{background:var(--brand-gray)}
.svc .ico{
  width:42px;height:42px;border-radius:10px;display:grid;place-items:center;
  background:var(--surface-tint);border:1px solid var(--line);color:var(--ink);
}
[data-theme="dark"] .svc .ico{background:rgba(252,217,13,.1)}
.svc h3{font-size:16px}
.svc p{font-size:13.5px;line-height:1.55;margin:0}
.svc .tag{
  align-self:flex-start;margin-top:2px;padding:3px 9px;border-radius:100px;
  background:var(--brand-yellow);color:#000;
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
@media (max-width:1180px){.catalog{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){.catalog{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.catalog{grid-template-columns:1fr}}

/* ---------- 10.c Pestañas por tipo de instalación ---------- */
.tablist{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px;
  border-bottom:1px solid var(--line);padding-bottom:14px;
}
.tab{
  padding:11px 20px;border-radius:100px;border:1px solid var(--line-strong);
  background:transparent;color:var(--ink-soft);
  font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  white-space:nowrap;
  transition:background-color var(--t-mid) var(--ease-out),
             color var(--t-mid) var(--ease-out),
             border-color var(--t-mid) var(--ease-out);
}
.tab:hover{border-color:var(--ink);color:var(--ink)}
.tab[aria-selected="true"]{background:var(--brand-yellow);border-color:var(--brand-yellow);color:#000}

.tabpanel[hidden]{display:none}
.tabpanel{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,54px);align-items:start;
  animation:panel-in .5s var(--ease-out);
}
@keyframes panel-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.tabpanel h3{font-size:22px;margin-bottom:12px}
.panel-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.panel-list li{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--surface-raise);border:1px solid var(--line);border-radius:9px;
  padding:13px 15px;font-size:14px;
}
.panel-list li svg{flex:0 0 auto;margin-top:2px;color:var(--coral-deep)}
@media (max-width:900px){.tabpanel{grid-template-columns:1fr}.panel-list{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.tabpanel{animation:none}}

/* ---------- 10.d Modalidades de contratación ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.tier{
  background:var(--surface-raise);border:1px solid var(--line);border-radius:14px;
  padding:30px 28px;display:flex;flex-direction:column;gap:14px;
  transition:transform var(--t-slow) var(--ease-out),box-shadow var(--t-slow) var(--ease-out);
}
.tier:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.tier--featured{
  border-color:var(--brand-yellow);border-width:2px;
  box-shadow:var(--shadow-md);position:relative;
}
.tier--featured::after{
  content:"Más contratado";position:absolute;top:-11px;left:28px;
  background:var(--brand-yellow);color:#000;padding:4px 12px;border-radius:100px;
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.tier .kicker{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.tier h3{font-size:24px;letter-spacing:.01em}
.tier .desc{font-size:14px;color:var(--ink-soft);line-height:1.6;min-height:66px}
.tier ul{display:grid;gap:9px;margin:4px 0 auto}
.tier li{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--ink-soft)}
.tier li svg{flex:0 0 auto;margin-top:3px;color:var(--coral-deep)}
.tier .btn{width:100%;margin-top:20px}
@media (max-width:980px){.tiers{grid-template-columns:1fr}.tier .desc{min-height:0}}

.fineprint{
  margin-top:22px;font-size:12.5px;color:var(--ink-faint);line-height:1.6;max-width:80ch;
}

/* Proceso */
.process{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.steps{display:grid;gap:14px;counter-reset:s}
.step{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--surface-raise);border:1px solid var(--line);border-radius:10px;
  padding:18px 20px;
  transition:border-color var(--t-mid) var(--ease-out),transform var(--t-mid) var(--ease-out);
}
.step:hover{border-color:var(--brand-yellow);transform:translateX(5px)}
.step b{
  flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  background:var(--brand-yellow);color:#000;
  display:grid;place-items:center;font-size:13px;font-weight:800;
}
.step strong{display:block;font-size:15px;font-weight:800;margin-bottom:4px}
.step span{font-size:14px;color:var(--ink-soft);line-height:1.55}
@media (max-width:880px){.process{grid-template-columns:1fr}}

/* Clientes — anillo orbital
   ---------------------------------------------------------------------------
   Nueve logos repartidos cada 40° sobre una circunferencia. Cada uno se coloca
   con la misma cadena de transformaciones: girar hasta su ángulo, salir por el
   radio, y deshacer ese giro. El último paso es el que deja el logo horizontal;
   sin él, el de las seis en punto estaría boca abajo.

   Encima de eso el aro entero gira, y cada logo descuenta también ese giro: por
   eso orbitan derechos. Sin JS el giro son dos @keyframes sincronizados —misma
   duración, sentidos opuestos—; con JS es la variable --giro, que además
   responde al arrastre.

   Todas las medidas salen de --d, el diámetro exterior: radio, celda y núcleo
   son fracciones suyas. La escena entera escala con un solo número.
   --------------------------------------------------------------------------- */
/* El eyebrow es un <p>, y la regla base `p{max-width:56ch}` lo dejaba en 403px
   pegado a la izquierda: `justify-content:center` centraba dentro de esos
   403px, no dentro del ancho de la sección. Hay que soltar el tope. */
.eyebrow--centrado{
  display:flex;justify-content:center;max-width:none;
  margin-bottom:clamp(40px,4.6vw,58px);
}

/* La sección de clientes es una sola franja, no una retícula: con el padding
   común de `.block` los logos quedan pegados a las dos secciones vecinas y la
   franja parece un apéndice de la de arriba. Necesita respirar más que el resto. */
.block--clientes{padding-block:clamp(92px,11.5vw,164px)}

.clients-lead{
  text-align:center;margin-inline:auto;max-width:48ch;
  margin-bottom:clamp(30px,3.8vw,52px);
}

.clients-orbit{
  /* Manda el ancho disponible, no una medida fija: en un móvil el círculo no
     puede ser más ancho que la pantalla o se sale por los lados. */
  --d:min(620px,84vw);
  /* La celda tiene que crecer al mismo ritmo que el círculo, o en pantallas
     medianas los logos quedan diminutos dentro de un aro enorme. El techo lo
     pone la cuerda entre dos vecinos: con 19.5vw quedan ~8px de aire incluso
     en la pantalla más estrecha, y a partir de 677px manda el tope de 132. */
  --celda:clamp(60px,19.5vw,132px);
  --r:calc((var(--d) - var(--celda)) / 2);
  --giro:0deg;

  position:relative;
  width:var(--d);aspect-ratio:1;
  margin-inline:auto;
}

/* El aro va por encima del núcleo: los logos de abajo abren su tooltip hacia
   arriba, justo sobre el círculo central, y tienen que quedar visibles. */
.clients-ring{
  position:absolute;inset:0;z-index:2;
  transform:rotate(var(--giro));
  animation:clients-orbita 90s linear infinite;
  will-change:transform;
}
.clients-ring ul{margin:0;padding:0;list-style:none}

@keyframes clients-orbita{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

.clients-node{
  position:absolute;left:50%;top:50%;
  width:var(--celda);height:var(--celda);
  margin:calc(var(--celda) / -2) 0 0 calc(var(--celda) / -2);
  display:grid;place-items:center;
  /* girar hasta su ángulo → salir por el radio → deshacer su ángulo y el del
     aro, que es lo que mantiene el logo horizontal mientras orbita */
  transform:rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a) - var(--giro)));
  animation:clients-contraorbita 90s linear infinite;
}
/* -90deg para que el primero arranque arriba y no a las tres en punto: importa
   cuando el aro está quieto (movimiento reducido). */
.clients-node{--a:calc(var(--i) * 40deg - 90deg)}
.clients-node:nth-child(1){--i:0}
.clients-node:nth-child(2){--i:1}
.clients-node:nth-child(3){--i:2}
.clients-node:nth-child(4){--i:3}
.clients-node:nth-child(5){--i:4}
.clients-node:nth-child(6){--i:5}
.clients-node:nth-child(7){--i:6}
.clients-node:nth-child(8){--i:7}
.clients-node:nth-child(9){--i:8}

/* Misma duración y sentido contrario al del aro: lo que uno gira, el otro lo
   descuenta. La colocación se repite en cada fotograma porque un @keyframes
   sustituye el transform entero, no sólo la parte que cambia. */
@keyframes clients-contraorbita{
  from{transform:rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a)))}
  to{transform:rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a) - 360deg))}
}

.clients-node img{
  max-width:100%;max-height:calc(var(--celda) * .62);width:auto;height:auto;
  object-fit:contain;
  filter:grayscale(1) opacity(.55);
  transition:filter var(--t-mid) var(--ease-out);
  /* El navegador trata un <img> como algo que se arrastra y se suelta fuera;
     ese gesto nativo se comería el arrastre del anillo. */
  -webkit-user-drag:none;
}
/* Los logos casi cuadrados quedan ópticamente diminutos con la misma altura
   que uno apaisado. UNAB es 956x917. */
.clients-node img.logo--alto{max-height:calc(var(--celda) * .9)}

.clients-node:hover,
.clients-node:focus-visible{z-index:3;outline:none}
.clients-node:hover img,
.clients-node:focus-visible img{filter:grayscale(0) opacity(1)}
/* El foco se marca en el logo, no con el recuadro por defecto: el nodo es una
   caja cuadrada girando y el outline delataría el hueco vacío que la rodea. */
.clients-node:focus-visible img{outline:3px solid var(--brand-yellow);outline-offset:6px;border-radius:4px}

.clients-tip{
  position:absolute;left:50%;
  /* Se ancla al borde del logo, no al de la celda: la celda es cuadrada y la
     mayoría de los logos son apaisados, así que colgarlo de `100%` lo dejaba
     flotando a cuatro dedos del logo que está señalando. */
  bottom:calc(50% + var(--celda) * .31 + 6px);
  z-index:4;
  /* El tooltip nace centrado sobre su logo, y el logo de las tres en punto es
     el que roza el borde de la pantalla. El tope crece con el ancho disponible
     para que en ningún tamaño se salga: a 320px caben 110px de globo. */
  width:max-content;max-width:clamp(110px,22vw,210px);
  padding:8px 12px;border-radius:7px;
  background:var(--ink);color:var(--surface);
  font-size:12px;font-weight:800;letter-spacing:.03em;line-height:1.35;
  text-align:center;
  box-shadow:var(--shadow-md);
  opacity:0;pointer-events:none;
  transform:translate(-50%,5px);
  transition:opacity var(--t-fast) var(--ease-soft),transform var(--t-fast) var(--ease-out);
}
.clients-tip b{display:block}
/* La frase de testimonio, si la hay: se le suelta el nowrap para que reparta
   en varias líneas dentro del ancho máximo. */
.clients-tip i{
  display:block;margin-top:4px;
  font-style:normal;font-weight:600;font-size:11.5px;letter-spacing:0;
  opacity:.82;
}
/* Los logos casi cuadrados suben más dentro de la celda; el globo tiene que
   subir con ellos o los pisa. */
.clients-node:has(.logo--alto) .clients-tip{bottom:calc(50% + var(--celda) * .46 + 6px)}
.clients-node:hover .clients-tip,
.clients-node:focus-visible .clients-tip{opacity:1;transform:translate(-50%,0)}

.clients-core{
  position:absolute;left:50%;top:50%;z-index:1;
  width:calc(var(--d) * .46);aspect-ratio:1;
  transform:translate(-50%,-50%);
  /* Columna explícita: con `place-content:center` la rejilla estrecha la
     columna al ancho de una palabra y el mensaje se parte en cuatro líneas.
     Con 1fr ocupa el círculo entero y sólo rompe donde dice el <br>. */
  display:grid;grid-template-columns:1fr;align-content:center;justify-items:center;
  /* Nada de padding en %: un porcentaje se mide contra el ancho del contenedor
     —el aro completo—, no contra el círculo, y se comía 43px por lado. */
  padding-inline:calc(var(--d) * .04);
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow-md);
  /* es un <p>: hay que deshacer el color y el tope de 56ch de la regla base */
  color:var(--ink);max-width:none;
  text-align:center;text-transform:uppercase;
  /* El techo lo pone la cuerda del círculo, no el gusto: «resultados reales»
     en mayúsculas tiene que caber en la línea más ancha del núcleo. */
  font-size:clamp(12px,1.8vw,20px);font-weight:800;line-height:1.08;letter-spacing:.01em;
}
.clients-core::before{
  content:"";justify-self:center;
  width:26px;height:3px;margin-bottom:10px;border-radius:2px;
  background:var(--brand-yellow);
}

.clients-cta{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
  margin-top:clamp(36px,4.6vw,60px);
}

[data-theme="dark"] .clients-node img{filter:grayscale(1) brightness(2.4) opacity(.62)}
[data-theme="dark"] .clients-node:hover img,
[data-theme="dark"] .clients-node:focus-visible img{filter:grayscale(0) brightness(1.6) opacity(1)}

/* Anillo arrastrable. @keyframes no sabe ceder el control a mitad de camino:
   no hay forma de preguntarle por qué grado va ni de moverlo con el dedo. Por
   eso, cuando main.js está vivo, apaga las dos animaciones y pasa a escribir
   --giro cuadro a cuadro — arrastrar es entonces sumar grados a esa variable.
   Las animaciones de arriba se quedan como plan B para cuando el JS no llega. */
.clients-orbit.is-arrastrable{
  cursor:grab;
  /* pan-y: el gesto vertical sigue siendo scroll de la página; el horizontal
     es nuestro. Sin esto, en móvil girar el anillo secuestra la página. */
  touch-action:pan-y;
  -webkit-user-select:none;user-select:none;
}
.clients-orbit.is-arrastrable .clients-ring,
.clients-orbit.is-arrastrable .clients-node{animation:none}
.clients-orbit.is-arrastrando{cursor:grabbing}

/* Pausa de las animaciones CSS (el plan B sin JS). Con `is-arrastrable` no hay
   animación que pausar y estas reglas quedan inertes: main.js reproduce el
   mismo criterio sobre el rAF, y con más puntería —allí sólo detiene cuando el
   cursor está sobre un logo, no sobre cualquier punto del aro.
   Aquí no se puede hilar tan fino: un hijo no pausa la animación de su padre,
   así que la condición tiene que colgar del aro entero. */
.clients-orbit:hover .clients-ring,
.clients-orbit:hover .clients-node,
.clients-orbit:focus-within .clients-ring,
.clients-orbit:focus-within .clients-node{animation-play-state:paused}

.clients-pause{
  position:absolute;right:0;bottom:6px;z-index:5;
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--surface-raise);border:1px solid var(--line-strong);
  color:var(--ink-soft);opacity:0;
  transition:opacity var(--t-fast) var(--ease-soft),color var(--t-fast) var(--ease-soft);
}
.clients-pause[hidden]{display:none}
/* Si está pausado, el botón queda visible aunque el cursor se vaya: si no, no
   habría forma de saber que está detenido ni de reanudarlo. */
.clients-orbit:hover .clients-pause,
.clients-orbit[data-pausado="true"] .clients-pause,
.clients-pause:focus-visible{opacity:1}
.clients-pause:hover{color:var(--ink)}
.clients-pause .icon-play{display:none}
.clients-pause[aria-pressed="true"] .icon-pause{display:none}
.clients-pause[aria-pressed="true"] .icon-play{display:block}

/* Movimiento reducido: el anillo se queda quieto. No hace falta nada más — los
   nueve logos están repartidos en el círculo y se ven todos a la vez. */
@media (prefers-reduced-motion:reduce){
  .clients-ring,.clients-node{animation:none}
  .clients-pause{display:none}
}

/* Cobertura */
.places{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.place{
  border:1px solid var(--line);border-radius:10px;padding:22px 20px;
  background:var(--surface-raise);
  transition:background-color var(--t-mid) var(--ease-out),border-color var(--t-mid) var(--ease-out);
}
.place:hover{background:var(--surface-tint);border-color:var(--brand-lime-soft)}
.place b{display:block;font-size:16px;font-weight:800;letter-spacing:.01em}
.place span{font-size:11.5px;color:var(--ink-soft);font-weight:700;letter-spacing:.09em;text-transform:uppercase}
@media (max-width:900px){.places{grid-template-columns:1fr 1fr}}

/* ---------- 11. Cotización ---------- */
.quote-block{background:var(--surface-warm);border-top:1px solid var(--line)}
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,70px);align-items:start}
.quote-card{
  background:var(--surface-raise);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-md);overflow:hidden;
}
.quote-card .head{background:var(--brand-yellow);color:#000;padding:20px 26px}
.quote-card .head strong{display:block;font-size:17px;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.quote-card .head span{font-size:13px;font-weight:600;opacity:.78}
.quote-card form{padding:24px 26px 28px;display:grid;gap:15px}
.field label{
  display:block;font-size:11px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px;
}
.field input,.field select{
  width:100%;height:48px;padding:0 14px;border:1px solid var(--line-strong);border-radius:6px;
  background:var(--surface);font-size:15px;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.field input:focus,.field select:focus{
  outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(252,217,13,.45);
}
.field input:user-invalid{border-color:var(--coral-deep)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.quote-card .btn{width:100%}
.form-note{font-size:12px;color:var(--ink-soft);text-align:center;line-height:1.5}
.form-status{
  font-size:14px;font-weight:700;padding:12px 14px;border-radius:6px;
  background:var(--surface-tint);border:1px solid var(--brand-lime-soft);color:var(--ink);
}
.form-status[hidden]{display:none}
.form-status--error{background:rgba(176,79,79,.08);border-color:var(--coral-deep);color:var(--coral-deep)}
.form-status--ok{background:var(--surface-tint);border-color:var(--brand-yellow)}

/* Señuelo antibot: fuera de la vista, pero sin display:none ni
   visibility:hidden, que los bots reconocen y saltan. */
.honeypot{
  position:absolute;left:-9999px;top:auto;
  width:1px;height:1px;overflow:hidden;
}

/* Consentimiento */
.consent{display:flex;gap:11px;align-items:flex-start;cursor:pointer}
.consent input{
  flex:0 0 auto;width:20px;height:20px;margin-top:2px;
  accent-color:var(--brand-yellow);cursor:pointer;
}
.consent span{font-size:12.5px;line-height:1.55;color:var(--ink-soft)}
.consent input:focus-visible{outline:3px solid var(--brand-yellow);outline-offset:2px}

/* Botón en envío */
.btn[aria-busy="true"]{opacity:.72;pointer-events:none}
@media (max-width:880px){.quote-grid{grid-template-columns:1fr}.row2{grid-template-columns:1fr}}

.contact-list{display:grid;gap:18px;margin-top:28px}
.contact-item{display:flex;gap:14px;align-items:flex-start}
.contact-item .ico{
  width:42px;height:42px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--surface-tint);border:1px solid var(--line);
}
.contact-item strong{display:block;font-size:14px;font-weight:800}
.contact-item span,.contact-item a{font-size:14px;color:var(--ink-soft);text-decoration:none}
.contact-item a:hover{color:var(--coral-deep)}

/* ---------- 12. Footer ---------- */
.footer{background:var(--surface);border-top:1px solid var(--line);padding-block:44px}
.footer .top{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:center}
.footer img{height:38px;width:auto}
[data-theme="dark"] .footer img{filter:brightness(0) invert(1)}
.footer nav{display:flex;gap:24px;flex-wrap:wrap}
.footer nav a{
  color:var(--ink-soft);font-size:12.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;text-decoration:none;transition:color var(--t-fast);
}
.footer nav a:hover{color:var(--ink)}
.footer .legal{
  margin-top:28px;padding-top:22px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-faint);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}

/* ---------- 13. Animaciones ---------- */
@keyframes slow-zoom{from{transform:scale(1)}to{transform:scale(1.09)}}
/* Usa `scale` y no `transform` para no chocar con el `translate` del carrusel */
@keyframes slide-zoom{from{scale:1}to{scale:1.06}}
@keyframes wipe-in{to{transform:scaleX(1)}}
@keyframes dot-progress{from{width:0}to{width:100%}}
@keyframes cue{
  0%,100%{opacity:.25;transform:translateY(-5px)}
  50%{opacity:1;transform:translateY(5px)}
}

/* Revelado al entrar en viewport (IntersectionObserver añade .is-in).
   El estado oculto SOLO existe si JS ya se ejecutó y añadió .js al <html>.
   Sin JS —o si JS falla antes de tiempo— el contenido nunca queda invisible. */
html.js .reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease-soft),transform .8s var(--ease-out);
}
html.js .reveal.is-in{opacity:1;transform:none}
html.js .reveal[data-delay="1"]{transition-delay:.12s}
html.js .reveal[data-delay="2"]{transition-delay:.24s}
html.js .reveal[data-delay="3"]{transition-delay:.36s}
html.js .reveal[data-delay="4"]{transition-delay:.48s}

/* ---------- 14. Menú móvil ---------- */
@media (max-width:1080px){
  .burger{display:grid}
  .nav{
    position:fixed;inset:var(--header-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface);border-bottom:1px solid var(--line);
    padding:8px var(--gutter) 24px;
    transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity var(--t-mid) var(--ease-out),transform var(--t-mid) var(--ease-out),visibility var(--t-mid);
    box-shadow:var(--shadow-lg);
    max-height:calc(100svh - var(--header-h));overflow-y:auto;
  }
  .nav.is-open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .nav a{
    color:var(--ink);font-size:17px;padding:16px 0;border-bottom:1px solid var(--line);
    letter-spacing:.05em;
  }
  .header.is-stuck .nav a{color:var(--ink)}
  .nav a::after{display:none}
  .header-tools{margin-left:auto}
}

/* ---------- 15. Responsive fino ---------- */
@media (max-width:860px){
  :root{--header-h:66px}
  .media-section{min-height:auto;padding-block:0}
  .media-section .content{padding-block:clamp(96px,20vh,150px)}
  .media-section--hero{min-height:100svh}
  /* Se repite dentro de la consulta porque la regla de arriba tiene la misma
     especificidad y va después: sin esto el hero recupera los 150px y se sale
     de la pantalla en el móvil. */
  .media-section--hero .content{
    padding-top:calc(var(--header-h) + clamp(14px,3svh,30px));
    padding-bottom:clamp(70px,11svh,104px);
  }
  .media-section .veil{
    background:linear-gradient(to top,rgba(12,13,15,.92) 0%,rgba(12,13,15,.62) 42%,rgba(12,13,15,.34) 100%);
  }
  .media-section--right .content{justify-content:flex-start}
  .on-media p{font-size:16px}
  .btn{width:100%;max-width:340px}
  .media-inner .actions,.hero-inner .actions{flex-direction:column;align-items:stretch}
  .footer .top{flex-direction:column;align-items:flex-start}
}

/* Teléfono apaisado: sobra ancho y falta alto, así que los botones del hero
   vuelven a ir en fila. Apilados se comen 60px que ahí no existen. */
@media (max-width:860px) and (max-height:560px){
  .hero-inner .actions{flex-direction:row;align-items:center}
  .hero-inner .btn{width:auto;max-width:none}
  .media-section--hero .content{
    padding-top:calc(var(--header-h) + 8px);
    padding-bottom:clamp(26px,7svh,56px);
  }
}

/* Pantallas muy bajas: el piso de 32px del titular ya no cabe y hay que bajarlo
   un poco más para no dejar la fila de datos fuera de cuadro. */
@media (max-width:860px) and (max-height:470px){
  .hero-inner h1{font-size:clamp(24px,7.4svh,34px)}
  .hero-inner .lead{font-size:15px}
}

/* ---------- 16. Respeto por preferencias del usuario ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  html.js .reveal{opacity:1;transform:none}
  .media-section .bg img{animation:none}
  .hero-inner h1 .hl::after{transform:scaleX(1)}

  /* El carrusel SÍ sigue avanzando: "reducir movimiento" no significa quitar
     la función, significa quitar el desplazamiento. Se cambia el deslizamiento
     lateral y el zoom por un fundido, que no dispara mareo vestibular.
     El botón de pausa sigue disponible para detenerlo del todo. */
  .bg--carousel .slide{
    translate:none !important;
    transition:opacity 600ms linear !important;
  }
  .bg--carousel .slide.is-active{animation:none;scale:1}
  .carousel-dot[aria-current="true"].is-running::after{animation:none;width:100%}
}

@media print{
  .header,.scroll-cue,.theme-toggle,.burger{display:none}
  .media-section{min-height:auto;color:#000}
  .media-section .bg,.media-section .veil{display:none}
  .on-media,.on-media h1,.on-media h2,.on-media p{color:#000;text-shadow:none}
}