/* =========================================================================
   BULTZ — hoja de estilos
   Tokens extraídos del PDF de diseño (BULTZ_WEBSITE_2026.pdf, XD, 1440pt).
   Retícula: 12 columnas de 78px, canaleta 24px, contenedor 1200, margen 120.
   ========================================================================= */

/* ---------- Tipografía autoalojada -------------------------------------
   Libre Franklin en formato variable: dos archivos cubren los pesos 100-900
   en lugar de siete estáticos. Subconjuntada al alfabeto latino y en woff2.
   Se autoaloja a propósito: cargarla desde el CDN de Google envía la IP del
   visitante a Google antes de cualquier consentimiento de cookies.
   Total: 58 KB frente a los ~180 KB que costarían siete pesos estáticos. */

@font-face{
  font-family:"Libre Franklin";
  src:url("../fonts/librefranklin.woff2") format("woff2-variations"),
      url("../fonts/librefranklin.woff2") format("woff2");
  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+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,
                U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Libre Franklin";
  src:url("../fonts/librefranklin-italic.woff2") format("woff2-variations"),
      url("../fonts/librefranklin-italic.woff2") format("woff2");
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,
                U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Los iconos de mascara van incrustados como data URI, no como archivo
   suelto. Chrome trata el SVG de una mascara como documento de recurso y
   lo bloquea con file://, asi que al abrir la pagina con doble clic los
   iconos desaparecian sin dar ningun error en consola. Incrustados
   funcionan servidos, en local y sin red, y ahorran 12 peticiones.
   Los .svg originales siguen en img/ como fuente editable: si se toca
   alguno hay que volver a incrustarlo. */

/* ---------- Tokens ---------------------------------------------------- */
:root{
  /* Color — los tres únicos del diseño */
  --ink:#1b242a;          /* texto principal */
  --paper:#ffffff;
  --orange:#ff5800;       /* marca: titulares, énfasis, botones, banda de soluciones.
                             Sobre fondo claro da 2.70:1, por debajo del mínimo AA de 3:1
                             para texto grande. Desviación aceptada por el cliente el
                             23/07/2026: prevalece el color corporativo. Sobre --ink
                             rinde de sobra, no hay problema en las bandas oscuras. */
  --slate:#464d5d;        /* secundario — sin uso en la home, previsto para catálogo */
  --mist:#c3c6d3;         /* filetes y estados inactivos — idem */
  --shell:#ededed;        /* fondo de la sección instalaciones */
  --paper-70:rgb(255 255 255 / .70);
  --rule:rgb(255 255 255 / .18);

  /* Tipografía — escala literal del PDF, fluida por debajo de 1440 */
  --f:"Libre Franklin",system-ui,-apple-system,"Segoe UI",sans-serif;
  --t-stat: clamp(2.75rem, 6.25vw, 5.625rem);   /*  90px */
  --t-hero: clamp(2rem,   3.47vw, 3.125rem);    /*  50px */
  --t-40:   clamp(1.75rem,2.78vw, 2.5rem);      /*  40px */
  --t-30:   clamp(1.375rem,2.08vw,1.875rem);    /*  30px */
  --t-25:   clamp(1.125rem,1.74vw,1.5625rem);   /*  25px */
  --t-20:   1.25rem;                             /*  20px — menú de filtros */
  --t-16:   1rem;
  --t-14:   .875rem;
  --t-12:   .75rem;
  --t-num:  .4375rem;                            /*   7px — numeración */

  /* Retícula */
  --cols:12;
  --gutter:24px;
  --wrap:1200px;
  --pad:clamp(1.25rem, 8.33vw, 7.5rem);          /* 120px a 1440 */
  --hero-borde:clamp(0px, 3.47vw, 50px);         /*  50px a 1440 */
  --radio:clamp(3rem, 10.5vw, 152px);            /* 152px a 1440: radio grande,
                                                    compartido por el hero y la
                                                    sección de quiénes somos */

  /* Ritmo vertical */
  /* Ritmo vertical medido sobre el PDF: el diseño usa ~60px arriba y
     ~95px abajo, no un valor único. */
  --s-top:clamp(2rem, 4.2vw, 3.75rem);    /*  60px a 1440 */
  --s-bot:clamp(2.5rem, 6.6vw, 5.9rem);   /*  95px a 1440 */
  --s-4:2rem; --s-3:1.5rem; --s-2:1rem;
}

/* ---------- Base ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:300 var(--t-14)/1.29 var(--f);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,picture{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,figure,address{margin:0}
ul{list-style:none;padding:0}
address{font-style:normal}

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--orange); outline-offset:3px; border-radius:2px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--orange);color:#fff;padding:.75rem 1.25rem;font-weight:700;
}
.skip:focus{left:0}

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

/* ---------- Entradas al hacer scroll -----------------------------------
   Cada bloque marcado con data-anim aparece cuando entra en pantalla. El
   estado oculto solo se aplica bajo .js: si no hay JavaScript la página se
   ve entera y nada queda escondido para siempre.
   data-anim        → sube desde abajo (por defecto)
   data-anim="left" / "right" → entra lateralmente
   data-anim="fade" → solo opacidad, sin desplazamiento
   data-anim-delay="n" → escalona la entrada en pasos de 90ms
   La curva es un ease-out largo: arranca rápido y frena al final, que es
   como se lee un movimiento natural. */
.js [data-anim]{
  opacity:0;
  translate:0 28px;
  transition:opacity .75s cubic-bezier(.16,1,.3,1) var(--anim-d,0s),
             translate .75s cubic-bezier(.16,1,.3,1) var(--anim-d,0s);
  will-change:opacity,translate;
}
.js [data-anim="left"] {translate:-36px 0}
.js [data-anim="right"]{translate: 36px 0}
.js [data-anim="fade"] {translate:0 0}
.js [data-anim].is-in{opacity:1;translate:0 0;will-change:auto}

/* Los logos de marca entran uno a uno dentro de su propia lista. */
.js [data-anim-children] > *{
  opacity:0;translate:0 18px;
  transition:opacity .6s cubic-bezier(.16,1,.3,1) var(--anim-d,0s),
             translate .6s cubic-bezier(.16,1,.3,1) var(--anim-d,0s);
}
.js [data-anim-children].is-in > *{opacity:1;translate:0 0}
/* Dentro de la tira solo se funde: desplazar los hijos abriría scroll
   vertical dentro del propio slider. */
.js .strip[data-anim-children] > *{translate:0 0}

@media (prefers-reduced-motion:reduce){
  .js [data-anim],.js [data-anim-children] > *{opacity:1;translate:0 0}
}

/* ---------- Retícula --------------------------------------------------- */
.grid{
  width:min(var(--wrap), 100% - var(--pad)*2);
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(var(--cols),1fr);
  gap:var(--gutter);
}
.col-1-3{grid-column:1/4}   .col-5-12{grid-column:5/-1}
.col-1-4{grid-column:1/5}   .col-1-5{grid-column:1/6}
.col-1-6{grid-column:1/7}   .col-1-7{grid-column:1/8}
.col-1-12{grid-column:1/-1}
.col-5-8{grid-column:5/9}   .col-6-12{grid-column:6/-1}
.col-7-12{grid-column:7/-1} .col-8-12{grid-column:8/-1}
.col-9-12{grid-column:9/-1}

/* overflow-x:clip (no hidden: no crea contenedor de scroll ni afecta al
   header fijo) para que ninguna entrada lateral genere barra horizontal. */
.s{padding-block:var(--s-top) var(--s-bot);overflow-x:clip}
.s--dark{background:var(--ink);color:var(--paper)}

/* El panel de marcas no es una sección apilada: flota sobre la banda naranja
   (entra 289px) y sobresale 197px sobre el CTA. Medido sobre el PDF; el radio
   de 23px lo da el diseño. */
#marcas{
  position:relative;z-index:2;
  width:min(1341px, 100% - 6rem);
  margin:-289px auto 0;
  border-radius:23px;
  padding-block:3.5rem 5.5rem;
}
/* Vértice inferior izquierdo redondeado. El radio se aplica al fondo sin
   necesidad de overflow:hidden, así el slider sigue desplazándose. */
#quienes{border-bottom-left-radius:var(--radio)}
.stack>*+*{margin-top:var(--s-3)}
.stack-s>*+*{margin-top:var(--s-2)}

/* ---------- Tipos ------------------------------------------------------ */
/* El diseño mezcla pesos dentro de un mismo titular: Light + Bold/Medium.
   Se marcan con <b> (700) y <em> (500) sin significado semántico añadido. */
/* Interlíneas medidas sobre el PDF: el diseño compone muy ajustado. */
.t40,.t30,.hero__t,.stat,.t25{font-weight:300;line-height:1.125;letter-spacing:-.01em}
.t40{font-size:var(--t-40)}
.t40--orange{color:var(--orange)}
.t40--white{color:var(--paper)}
.t30{font-size:var(--t-30);line-height:1.167}
.t25{font-size:var(--t-25);line-height:1.2;max-width:56ch}
.t16{font-size:var(--t-16);font-weight:500;line-height:1.125}
.body{font-size:var(--t-14);line-height:1.29;max-width:62ch}
.lead{font-size:var(--t-16);font-weight:700;line-height:1.125;max-width:52ch}
.stat{font-size:var(--t-stat);color:var(--orange);line-height:1;margin-bottom:var(--s-4)}
.hl{color:var(--orange);font-weight:700}
b{font-weight:700} em{font-style:normal;font-weight:500} i{font-style:normal;font-weight:300}

/* Eyebrow con numeración de sección */
.eyebrow{
  grid-column:1/-1;
  font-size:var(--t-12);font-weight:300;letter-spacing:.02em;
  margin-bottom:.625rem;   /* la canaleta de la retícula añade otros 24 */
}
.eyebrow b{font-weight:700}
.eyebrow span{font-size:var(--t-num);vertical-align:super;margin-left:.5em;letter-spacing:.08em}
.eyebrow--light{color:var(--paper)}
.eyebrow--orange{color:var(--orange)}
.s--sol .eyebrow,.cta .eyebrow,.s--split .eyebrow{color:var(--ink)}

/* ---------- Botones y enlaces ------------------------------------------
   Pastilla de 40px de alto, texto blanco e icono en tinta oscura, según
   la geometría del diseño. Cada botón lleva su propio icono: el genérico
   no existe. -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:1.25rem;
  height:40px;padding:0 .5625rem 0 1.3125rem;
  /* El filete va desde el principio, del color del relleno: así al pasar por
     encima solo cambian los colores y el botón no cambia de tamaño ni mueve
     lo que tiene alrededor. */
  border:1px solid var(--orange);
  background:var(--orange);color:var(--paper);
  font-size:var(--t-14);font-weight:700;text-decoration:none;white-space:nowrap;
  border-radius:999px;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
/* El texto va en un solo elemento: si no, el gap destinado al icono
   separaría también las dos partes del rótulo. */
.btn__t{font-weight:300;white-space:nowrap}
.btn__t b{font-weight:700}

/* Estado sobre: la pastilla se vacía y quedan filete, rótulo e icono en
   naranja. Se aplica también al foco de teclado para que el botón se comporte
   igual con ratón que sin él. */
.btn:hover,.btn:focus-visible{background:transparent;color:var(--orange)}

/* Icono del botón: máscara en tinta oscura */
.btn::after{
  content:"";flex:none;height:21px;
  background:var(--ink);
  transition:background .18s ease;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
}
/* El icono es una máscara, así que vira con el resto cambiando su relleno. */
.btn:hover::after,.btn:focus-visible::after{background:var(--orange)}

.btn--pin::after {width:15px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 14.971 21.285%22%3E%3Cpath fill=%22none%22 stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M14.47 7.7c0 5.2-6.98 13.09-6.98 13.09S.5 13.23.5 7.69A7.17 7.17 0 0 1 7.49.5a7.17 7.17 0 0 1 6.98 7.2%22/%3E%3Cg fill=%22none%22 stroke=%22%23000%22 transform=%22translate(3.5 3.643)%22%3E%3Ccircle cx=%224%22 cy=%224%22 r=%224%22 stroke=%22none%22/%3E%3Ccircle cx=%224%22 cy=%224%22 r=%223.5%22/%3E%3C/g%3E%3C/svg%3E");   mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 14.971 21.285%22%3E%3Cpath fill=%22none%22 stroke=%22%23000%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M14.47 7.7c0 5.2-6.98 13.09-6.98 13.09S.5 13.23.5 7.69A7.17 7.17 0 0 1 7.49.5a7.17 7.17 0 0 1 6.98 7.2%22/%3E%3Cg fill=%22none%22 stroke=%22%23000%22 transform=%22translate(3.5 3.643)%22%3E%3Ccircle cx=%224%22 cy=%224%22 r=%224%22 stroke=%22none%22/%3E%3Ccircle cx=%224%22 cy=%224%22 r=%223.5%22/%3E%3C/g%3E%3C/svg%3E")}
.btn--chat::after{width:20px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 19.509 19.545%22%3E%3Cg fill=%22%23000%22%3E%3Cpath d=%22M3.7 19.44a2.9 2.9 0 0 1-2.8-.74 2.8 2.8 0 0 1-.8-2.76l.46-1.67a2.3 2.3 0 0 0-.02-1.31 10 10 0 0 1-.47-4.37A9.8 9.8 0 0 1 8.34.1a9.75 9.75 0 0 1 7.9 16.92 9.7 9.7 0 0 1-9.85 1.93 2 2 0 0 0-.92 0Zm1.51-1.77c1.26-.36 2.32.53 4.47.56a8.47 8.47 0 0 0 6.7-13.72 8.4 8.4 0 0 0-6.55-3.2A8.5 8.5 0 0 0 2.42 5.6a8.3 8.3 0 0 0-.7 6.73 4 4 0 0 1 .1 2.26l-.46 1.66a1.63 1.63 0 0 0 2.07 1.93Z%22/%3E%3Cpath d=%22M12.59 6.5a.67.67 0 0 1 .74.62.66.66 0 0 1-.66.7H6.85a.66.66 0 0 1-.66-.64.65.65 0 0 1 .71-.67Zm.07 6.53H6.9a.66.66 0 0 1-.7-.6.65.65 0 0 1 .65-.71h5.82a.66.66 0 1 1-.01 1.31%22/%3E%3C/g%3E%3C/svg%3E");  mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 19.509 19.545%22%3E%3Cg fill=%22%23000%22%3E%3Cpath d=%22M3.7 19.44a2.9 2.9 0 0 1-2.8-.74 2.8 2.8 0 0 1-.8-2.76l.46-1.67a2.3 2.3 0 0 0-.02-1.31 10 10 0 0 1-.47-4.37A9.8 9.8 0 0 1 8.34.1a9.75 9.75 0 0 1 7.9 16.92 9.7 9.7 0 0 1-9.85 1.93 2 2 0 0 0-.92 0Zm1.51-1.77c1.26-.36 2.32.53 4.47.56a8.47 8.47 0 0 0 6.7-13.72 8.4 8.4 0 0 0-6.55-3.2A8.5 8.5 0 0 0 2.42 5.6a8.3 8.3 0 0 0-.7 6.73 4 4 0 0 1 .1 2.26l-.46 1.66a1.63 1.63 0 0 0 2.07 1.93Z%22/%3E%3Cpath d=%22M12.59 6.5a.67.67 0 0 1 .74.62.66.66 0 0 1-.66.7H6.85a.66.66 0 0 1-.66-.64.65.65 0 0 1 .71-.67Zm.07 6.53H6.9a.66.66 0 0 1-.7-.6.65.65 0 0 1 .65-.71h5.82a.66.66 0 1 1-.01 1.31%22/%3E%3C/g%3E%3C/svg%3E")}
.btn--down::after{width:11px;height:17px;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 10.067 16.662%22%3E%3Cg fill=%22%23000%22%3E%3Cpath d=%22M5.03 16.66a1.7 1.7 0 0 1-1.22-.5l-3.7-3.7a.4.4 0 0 1 .57-.56l3.7 3.69a.93.93 0 0 0 1.31 0l3.7-3.7a.4.4 0 0 1 .56.57l-3.7 3.7a1.7 1.7 0 0 1-1.22.5%22/%3E%3Cpath d=%22M5.03 13.1a.4.4 0 0 1-.4-.4V.4a.4.4 0 0 1 .8 0v12.3a.4.4 0 0 1-.4.4%22/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 10.067 16.662%22%3E%3Cg fill=%22%23000%22%3E%3Cpath d=%22M5.03 16.66a1.7 1.7 0 0 1-1.22-.5l-3.7-3.7a.4.4 0 0 1 .57-.56l3.7 3.69a.93.93 0 0 0 1.31 0l3.7-3.7a.4.4 0 0 1 .56.57l-3.7 3.7a1.7 1.7 0 0 1-1.22.5%22/%3E%3Cpath d=%22M5.03 13.1a.4.4 0 0 1-.4-.4V.4a.4.4 0 0 1 .8 0v12.3a.4.4 0 0 1-.4.4%22/%3E%3C/g%3E%3C/svg%3E")}

/* El botón del pie es más pequeño: 208x30 con texto de 12px (medido en el PDF). */
.btn--sm{height:30px;width:208px;justify-content:center;padding:0 .75rem 0 1rem;gap:.75rem;font-size:var(--t-12)}
/* El de la ventana de producto se ajusta al rótulo y el artboard lo dibuja
   ya vacío, con filete y letra en naranja: es el estado «sobre» de los
   demás botones, aquí en reposo. Al pasar por encima se rellena. */
/* SVG entregado: 123x30 radio 15, filete y rótulo en naranja sobre fondo
   vacío, 12 Bold —el rótulo entero, no solo «Más»— entrando a 12px. */
.btn--mas{width:auto;background:transparent;color:var(--orange)}
.pop__cuerpo .btn--mas .btn__t{font-weight:700}
/* El SVG no dibuja galón: fuera el ::after que .btn--sm añade, que además
   metía 12px de hueco por el gap. */
.btn--mas::after{content:none}
.btn--mas:hover,.btn--mas:focus-visible{background:var(--orange);color:var(--paper)}
.btn--sm::after{height:15px}
.btn--down.btn--sm::after{width:10px}

.link{
  display:inline-block;margin-top:var(--s-3);
  color:var(--orange);font-size:var(--t-14);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:2px;
}
.link:hover{opacity:.75}

/* ---------- Header ----------------------------------------------------- */
.hdr{position:fixed;inset:0 0 auto;z-index:50;transition:background .25s ease,box-shadow .25s ease}
/* Medido en los dos artboards: 178x40 el logotipo y 44,7x40 el isotipo,
   ambos arrancando en y=40. La banda del header mide 120 (40+40+40). */
.logo{height:40px;width:auto;display:block}
.hdr__logo{color:var(--paper);transition:color .25s ease}
.hdr[data-state="pinned"] .hdr__logo{color:var(--ink)}
.ft__logo{color:var(--orange);display:inline-block}

.ico{height:40px;width:auto;display:block}
.hdr__ico{color:var(--orange);display:block}
.ft__ico{color:var(--paper);display:block;margin-bottom:0}
/* El isotipo se pega al margen derecho del contenedor pase lo que pase con
   el ancho del bloque que lo envuelve: el <span> es de nivel bloque y sin
   esto se queda a la izquierda del claim. */
.ft__end .ft__ico{margin-left:auto;width:max-content}
/* Del logotipo/isotipo al primer bloque de texto hay 44px en el diseño. */
.ft__adr,.ft__claim{margin-top:2.75rem}

.hdr__in{
  width:min(var(--wrap), 100% - var(--pad)*2);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding-block:2.5rem;
}
/* El color base del menú lo pone el estado del header, pero va dentro de
   :where() para que no cuente en la especificidad. Si no, estas dos reglas
   (0,3,1) ganaban al :hover y al [aria-current] (0,2,1 y 0,2,2) y el paso
   por encima no se veía: el enlace se quedaba blanco o en tinta. */
.hdr[data-state="over"]{background:transparent}
.hdr[data-state="over"] :where(.nav > ul > li > a,.nav__tit){color:var(--paper)}
.hdr[data-state="pinned"]{background:var(--paper);box-shadow:0 1px 0 rgb(27 36 42 / .08)}
.hdr[data-state="pinned"] :where(.nav > ul > li > a,.nav__tit){color:var(--ink)}

/* Sobre banda naranja el reparto cambia, y está medido en el artboard de
   soluciones: el logotipo va en tinta, el isotipo en blanco y los enlaces en
   blanco. El naranja no puede usarse aquí para nada porque desaparece contra
   el fondo, así que al pasar por encima se vira a tinta. */
.hdr[data-state="naranja"]{background:transparent}
.hdr[data-state="naranja"] :where(.nav > ul > li > a,.nav__tit){color:var(--paper)}
.hdr[data-state="naranja"] .hdr__logo{color:var(--ink)}
.hdr[data-state="naranja"] .hdr__ico{color:var(--paper)}
.hdr[data-state="naranja"] .hdr__burger{color:var(--paper)}
.hdr[data-state="naranja"] :where(.nav > ul > li > a,.nav__tit):hover{color:var(--ink)}

.nav__list{display:flex;gap:clamp(1rem,2.4vw,2.4rem)}
/* «Marcas» es un <span>, no un enlace: entra en las mismas reglas que el
   resto del menú para que no se despegue del conjunto. */
.nav a,.nav__tit{font-size:var(--t-16);font-weight:400;text-decoration:none;transition:color .18s ease}
/* Sin :where() aquí: anula la especificidad y el color por estado del
   header ganaba, dejando el menú entero sin virar a naranja. */
.nav a:hover,.nav__tit:hover{color:var(--orange)}
/* La sección en curso se distingue por el peso, no por el color: sobre la
   banda naranja un enlace naranja no se vería. Sobre fondo blanco sí se tiñe. */
.nav a[aria-current="page"]{font-weight:700}
.hdr[data-state="pinned"] .nav a[aria-current="page"]{color:var(--orange)}
/* El artboard de soluciones deja claro que la negrita marca la sección en
   curso, no el primer enlace: allí va en negrita «Soluciones» y «Quienes
   somos» no. De eso se encarga el JS con [aria-current]. */

.hdr__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:.5rem;cursor:pointer}
.hdr__burger span{width:24px;height:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.hdr[data-state="over"] .hdr__burger{color:var(--paper)}

/* ---------- Hero (carrusel de 2) ---------------------------------------
   La foto no llega al borde derecho: el diseño deja 50px de tinta a la
   vista (medido sobre el PDF, constante en toda la altura del hero). */
/* El diseño dibuja el hero a 850px (medido: la foto acaba en y=850) y pone
   el rótulo «Quienes somos 01» en y=947. En una pantalla de 1080 ese 947
   entra en cuadro y se lee el título del capítulo siguiente estando aún en
   el hero. max(850px,100svh) respeta el mínimo del diseño y además
   garantiza que el primer golpe de vista sea solo el hero. */
.hero{position:relative;min-height:max(850px,100svh);display:flex;align-items:center;
  isolation:isolate;background:var(--ink)}
/* Solo la esquina inferior derecha va redondeada: radio 152px medido
   sobre el PDF (error <1px en el ajuste). Las otras tres son a inglete. */
/* La foto deja el mismo aire abajo que a la derecha (--hero-borde). En el
   artboard llega hasta el suelo, pero así las flechas dejan de ir pegadas al
   canto del hero y respiran. Cambio pedido sobre la web de referencia. */
.hero__slides{position:absolute;inset:0 var(--hero-borde) var(--hero-borde) 0;z-index:-1;
  overflow:hidden;border-bottom-right-radius:var(--radio)}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.hero__slide.is-active{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover;
  /* El sujeto está a ~72% del ancho: al recortar en pantallas estrechas
     se desplaza el encuadre para no perderlo. */
  object-position:65% center}
@media (max-width:760px){.hero__slide img{object-position:72% center}}
.hero__slides::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgb(27 36 42 /.55),rgb(27 36 42 /.25))}
.hero__in{width:min(var(--wrap),100% - var(--pad)*2);margin-inline:auto}
.hero__t{font-size:var(--t-hero);color:var(--orange);line-height:1.06;font-weight:300;max-width:22ch}

/* Textos del carrusel: se apilan en la misma celda de rejilla para que el
   hero no dé saltos de altura al cambiar de diapositiva. La altura la fija
   el texto más largo. El botón de cada diapositiva es opcional. */
.hero__txts{display:grid}
.hero__txt{
  grid-area:1/1;
  opacity:0;visibility:hidden;translate:0 14px;
  transition:opacity .55s ease,translate .55s ease,visibility 0s .55s;
}
.hero__txt.is-active{
  opacity:1;visibility:visible;translate:0 0;
  /* entra con un pequeño retardo, cuando la imagen nueva ya ha subido */
  transition:opacity .6s ease .2s,translate .6s ease .2s,visibility 0s;
}
.hero__txt .btn{margin-top:var(--s-4)}

/* Las flechas van metidas en el hueco que deja la curva, en la esquina.
   Medido sobre el PDF: la curva es un radio de 152 con centro en (1237,698),
   la foto acaba en x=1390 y el hero en y=850. Los dos galones de 12x24 caen
   en x 1341-1352 y 1379-1390, los dos con la base en y=850. Es decir: el
   galón derecho va a ras del borde de la foto, ambos a ras del suelo del
   hero, y con 38px de paso entre ellos.
   Con el galón centrado en una caja de 44 se quedaban 16px adentro y 14
   por encima, y el izquierdo pisaba la curva. */
.hero__nav{
  /* Sube con la foto: las flechas siguen metidas en el hueco de la curva. */
  position:absolute;bottom:var(--hero-borde);
  /* 13px = la mitad del aire que queda a los lados del galón dentro de su
     caja. Así el borde del dibujo, no el de la caja, cae sobre el de la foto.
     El max() evita que se salga por la derecha cuando --hero-borde llega a 0. */
  right:max(0px, calc(var(--hero-borde) - 13px));
  display:flex;gap:0;padding:0;
}
.hero__arrow{
  /* Caja pulsable de 38x44. El paso de 38 lo impone el diseño; a 44 los dos
     galones no caben en el hueco sin solaparse. Sigue muy por encima del
     mínimo de 24x24 que pide la WCAG 2.2.
     El galón se alinea abajo (end) para que su base quede a ras del hero. */
  width:38px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;
  display:grid;place-items:end center;
}
.hero__arrow::before{
  content:"";width:12px;height:24px;background:var(--orange);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 11.503 23.689%22%3E%3Cpath fill=%22%23000%22 d=%22M.66 23.69a.66.66 0 0 1-.47-1.13l9.48-9.47a1.76 1.76 0 0 0 0-2.49L.19 1.13A.66.66 0 0 1 1.13.2l9.47 9.46a3.1 3.1 0 0 1 0 4.36L1.13 23.5a.7.7 0 0 1-.47.2%22/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 11.503 23.689%22%3E%3Cpath fill=%22%23000%22 d=%22M.66 23.69a.66.66 0 0 1-.47-1.13l9.48-9.47a1.76 1.76 0 0 0 0-2.49L.19 1.13A.66.66 0 0 1 1.13.2l9.47 9.46a3.1 3.1 0 0 1 0 4.36L1.13 23.5a.7.7 0 0 1-.47.2%22/%3E%3C/svg%3E") center/contain no-repeat;
  transition:opacity .2s ease,translate .2s ease;
}
.hero__arrow--prev::before{scale:-1 1}
.hero__arrow:hover::before{opacity:.7}
.hero__arrow:hover:not(.hero__arrow--prev)::before{translate:3px 0}
.hero__arrow--prev:hover::before{translate:-3px 0}

/* ---------- Tira de imágenes ------------------------------------------- */
/* ---------- Tira de imágenes (slider) ----------------------------------
   Medidas del PDF: celdas de 410x241 (proporción 1.70), separación 20px,
   radio 15px. Arranca en el margen del contenedor y se sale por la derecha
   para que se vea que hay más. Admite cualquier número de imágenes. */
/* Carrusel: se ven 3 de las 4 fotos y la celda se calcula a partir del ancho
   disponible, no al revés, para que entren tres justas sin asomo de la cuarta.
   El 100% son la caja de contenido de la tira (ancho de ventana menos el
   margen izquierdo), así que la cuenta no se ve afectada por la barra de
   desplazamiento.
   El artboard la dibuja a 410x241 con paso de 430 y un asomo de 31px de la
   cuarta foto; el alto de 360 y las tres vistas son petición posterior. */
.strip{
  --tira-gap:clamp(10px, 1.4vw, 20px);
  --tira-vistas:3;
  display:grid;grid-auto-flow:column;
  grid-auto-columns:calc(
    (100% - var(--tira-gap) * (var(--tira-vistas) - 1)) / var(--tira-vistas));
  gap:var(--tira-gap);
  margin-top:var(--s-bot);
  padding-inline:var(--pad) 0;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-padding-left:var(--pad);
  scrollbar-width:none;cursor:grab;
  /* Las imágenes desaparecen justo en el margen del contenedor, no en el
     borde de la ventana: el corte lo hace una máscara, así el contenedor
     sigue siendo un scroller normal y se puede arrastrar. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent var(--pad),#000 var(--pad));
          mask-image:linear-gradient(90deg,transparent 0,transparent var(--pad),#000 var(--pad));
}
.strip::-webkit-scrollbar{display:none}
.strip:active{cursor:grabbing}
.strip:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
/* Sin scroll-snap del navegador: el frenado y el ajuste los lleva el JS con
   una curva de aceleración y deceleración propia. El snap nativo es un corte
   seco que se pelea con la inercia. */
.strip picture{display:block}
.strip img{
  /* 25vw da los 360px pedidos a 1440 y encoge de forma proporcionada por
     debajo. El recorte lo absorbe object-fit. */
  width:100%;height:clamp(200px, 25vw, 360px);object-fit:cover;
  border-radius:15px;display:block;
  -webkit-user-drag:none;user-select:none;
}

/* Controles del carrusel, alineados al margen derecho del contenedor —la tira
   se va a sangre por la derecha, pero las flechas no. */
.strip__nav{
  width:min(var(--wrap), 100% - var(--pad)*2);margin-inline:auto;
  display:flex;justify-content:flex-end;gap:0;margin-top:1rem;
}
.strip__arrow{width:38px;height:38px}
.strip__arrow--prev::before{scale:-1 1}
.strip__arrow[disabled]{cursor:default}
.strip__arrow[disabled]::before{opacity:.3}

/* Menos sitio: se reducen las vistas en vez de encoger las fotos. */
@media (max-width:1100px){ .strip{--tira-vistas:2} }
@media (max-width:760px) { .strip{--tira-vistas:1.15} }

/* ---------- 02 · capacidades (4 columnas) ------------------------------ */
.capas{margin-top:9.5rem;row-gap:var(--s-4)}
.capa{grid-column:span 3}
.capa__ico{
  display:block;width:75px;height:56px;margin-bottom:var(--s-3);
  background:var(--orange);
  -webkit-mask-position:left center;mask-position:left center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
}
.capa__ico--1{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 61.453 71.762%22%3E%3Cg fill=%22%23000%22%3E%3Cpath d=%22m55.72 62.82-3 3.05a2.7 2.7 0 0 1-3.22.59l-1.87-.95a26 26 0 0 1-5.74 2.36l-.83 2.35a2.6 2.6 0 0 1-2.37 1.54H34.2a2.5 2.5 0 0 1-2.3-1.7l-.77-2.19a24 24 0 0 1-5.68-2.36l-1.93.94a2.7 2.7 0 0 1-3.22-.59l-3.05-3.09a2.5 2.5 0 0 1-.44-2.83l1.02-2.03-1-1.88-3.3-.05a3.8 3.8 0 0 1-2.6-1.42l-7.66-.05A3.36 3.36 0 0 1 0 51.14l.03-8.52c.03-8.03 5.7-14.82 13.5-17.06-4.2-2.9-4.68-7.07-5.26-11.67l-1.15-.06a2 2 0 0 1-.92-.19 1.5 1.5 0 0 1-.4-.96A12.75 12.75 0 0 1 18.47 0a12.73 12.73 0 0 1 12.75 12.9 1 1 0 0 1-1.06.92l-1.36.06c-.63 4.9-1.05 8.59-5.09 11.68L27.26 27l3.88-1.31.83-2.36a2.5 2.5 0 0 1 2.34-1.53l4.24-.01a2.6 2.6 0 0 1 2.59 1.68l.75 2.24a24 24 0 0 1 5.74 2.37l1.9-.98a2.5 2.5 0 0 1 2.9.35l3.17 3.11a2.7 2.7 0 0 1 .5 3.3l-.92 1.83a20 20 0 0 1 2.34 5.67l2.3.83a2.5 2.5 0 0 1 1.63 2.37V49a2.6 2.6 0 0 1-1.63 2.37l-2.25.78a22 22 0 0 1-2.4 5.68l1.03 2.14a2.5 2.5 0 0 1-.48 2.84M20.77 7.45a3.3 3.3 0 0 1 3.11 2.02l.86 2.22 4.24-.06a10.5 10.5 0 0 0-10.66-9.42 10.47 10.47 0 0 0-10.23 9.46l4.24.02.78-2.09a3.3 3.3 0 0 1 3.14-2.15Zm1.57 4.22c-.25-1.15-.51-1.67-1.24-2.04l-4.67-.02a1.5 1.5 0 0 0-1.35.9l-.4 1.17Zm4.22 2.23H10.48c.36 3.3.79 6.74 3.19 8.98a7.1 7.1 0 0 0 6.74 1.76c4.8-1.22 5.84-6.54 6.15-10.74m21.37 49.32 2.92 1.43 3.51-3.5L53 58.44a1.7 1.7 0 0 1 .22-1.57 18 18 0 0 0 2.28-5.58 1.5 1.5 0 0 1 .97-1.12l2.78-.88.03-4.97-3.08-1.1a7 7 0 0 1-1.27-2.47 51 51 0 0 0-1.73-4.11 1.8 1.8 0 0 1-.2-1.54l1.37-2.68-3.56-3.5-2.73 1.4a1.6 1.6 0 0 1-1.1-.06 22 22 0 0 0-6.22-2.57 1.4 1.4 0 0 1-.77-.74l-1.03-2.98-4.93.02-.92 2.8c-.44 1.32-1.94.95-3.51 1.7l2.24 2.05 8.45.02c.85 0 1.35.58 2.03.85a16.6 16.6 0 0 1 10.51 13.87 16.4 16.4 0 0 1-29.87 10.74l-3.58.02c.17.73 1.05 1.42.74 2.06l-1.46 3.05 3.53 3.5 2.64-1.3a1.4 1.4 0 0 1 1.43.05 20 20 0 0 0 5.83 2.44 1.3 1.3 0 0 1 .95.78l.97 2.95H39l1.26-3.55a21 21 0 0 0 6.53-2.62 1.6 1.6 0 0 1 1.15-.18M10.46 52.35l3.76-18.52a4.3 4.3 0 0 1 3.94-3.23l10.31-.1A16.2 16.2 0 0 0 10.81 29 16.4 16.4 0 0 0 2.2 43.45v7.53a1.35 1.35 0 0 0 1.28 1.4ZM35.6 53.8a2.5 2.5 0 0 0 1.95-2.1l3.58-17.72a1.1 1.1 0 0 0-1.2-1.23h-21.2a2.4 2.4 0 0 0-2.4 1.67l-3.67 18.02a1.04 1.04 0 0 0 1 1.36Zm-.66 2.25-9.17.01a14 14 0 0 0 15.31 4.18 14.22 14.22 0 0 0 2.23-25.95l-3.57 17.7a4.7 4.7 0 0 1-4.8 4.06%22/%3E%3Cpath d=%22m31.12 42.26-2.48 7.78a1.2 1.2 0 0 1-1.06.8 1.2 1.2 0 0 1-1.04-.83l-2.43-8.22c-.67 1.11-.45 3.27-1.86 3.27l-4.27-.03c-.57 0-.9-.69-.88-1.16a1.1 1.1 0 0 1 1.08-.97l3.27-.03 1.56-5.54a1.2 1.2 0 0 1 1.06-.76 1.3 1.3 0 0 1 1.03.84l2.53 8.5 2.48-7.74a1.2 1.2 0 0 1 1-.8 1.3 1.3 0 0 1 1.08.8l1.51 4.7 2.4.03a1.1 1.1 0 0 1 1.08.96 1.03 1.03 0 0 1-.92 1.17l-3.18.03c-1.55.01-1.2-1.69-1.96-2.8%22/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 61.453 71.762%22%3E%3Cg fill=%22%23000%22%3E%3Cpath d=%22m55.72 62.82-3 3.05a2.7 2.7 0 0 1-3.22.59l-1.87-.95a26 26 0 0 1-5.74 2.36l-.83 2.35a2.6 2.6 0 0 1-2.37 1.54H34.2a2.5 2.5 0 0 1-2.3-1.7l-.77-2.19a24 24 0 0 1-5.68-2.36l-1.93.94a2.7 2.7 0 0 1-3.22-.59l-3.05-3.09a2.5 2.5 0 0 1-.44-2.83l1.02-2.03-1-1.88-3.3-.05a3.8 3.8 0 0 1-2.6-1.42l-7.66-.05A3.36 3.36 0 0 1 0 51.14l.03-8.52c.03-8.03 5.7-14.82 13.5-17.06-4.2-2.9-4.68-7.07-5.26-11.67l-1.15-.06a2 2 0 0 1-.92-.19 1.5 1.5 0 0 1-.4-.96A12.75 12.75 0 0 1 18.47 0a12.73 12.73 0 0 1 12.75 12.9 1 1 0 0 1-1.06.92l-1.36.06c-.63 4.9-1.05 8.59-5.09 11.68L27.26 27l3.88-1.31.83-2.36a2.5 2.5 0 0 1 2.34-1.53l4.24-.01a2.6 2.6 0 0 1 2.59 1.68l.75 2.24a24 24 0 0 1 5.74 2.37l1.9-.98a2.5 2.5 0 0 1 2.9.35l3.17 3.11a2.7 2.7 0 0 1 .5 3.3l-.92 1.83a20 20 0 0 1 2.34 5.67l2.3.83a2.5 2.5 0 0 1 1.63 2.37V49a2.6 2.6 0 0 1-1.63 2.37l-2.25.78a22 22 0 0 1-2.4 5.68l1.03 2.14a2.5 2.5 0 0 1-.48 2.84M20.77 7.45a3.3 3.3 0 0 1 3.11 2.02l.86 2.22 4.24-.06a10.5 10.5 0 0 0-10.66-9.42 10.47 10.47 0 0 0-10.23 9.46l4.24.02.78-2.09a3.3 3.3 0 0 1 3.14-2.15Zm1.57 4.22c-.25-1.15-.51-1.67-1.24-2.04l-4.67-.02a1.5 1.5 0 0 0-1.35.9l-.4 1.17Zm4.22 2.23H10.48c.36 3.3.79 6.74 3.19 8.98a7.1 7.1 0 0 0 6.74 1.76c4.8-1.22 5.84-6.54 6.15-10.74m21.37 49.32 2.92 1.43 3.51-3.5L53 58.44a1.7 1.7 0 0 1 .22-1.57 18 18 0 0 0 2.28-5.58 1.5 1.5 0 0 1 .97-1.12l2.78-.88.03-4.97-3.08-1.1a7 7 0 0 1-1.27-2.47 51 51 0 0 0-1.73-4.11 1.8 1.8 0 0 1-.2-1.54l1.37-2.68-3.56-3.5-2.73 1.4a1.6 1.6 0 0 1-1.1-.06 22 22 0 0 0-6.22-2.57 1.4 1.4 0 0 1-.77-.74l-1.03-2.98-4.93.02-.92 2.8c-.44 1.32-1.94.95-3.51 1.7l2.24 2.05 8.45.02c.85 0 1.35.58 2.03.85a16.6 16.6 0 0 1 10.51 13.87 16.4 16.4 0 0 1-29.87 10.74l-3.58.02c.17.73 1.05 1.42.74 2.06l-1.46 3.05 3.53 3.5 2.64-1.3a1.4 1.4 0 0 1 1.43.05 20 20 0 0 0 5.83 2.44 1.3 1.3 0 0 1 .95.78l.97 2.95H39l1.26-3.55a21 21 0 0 0 6.53-2.62 1.6 1.6 0 0 1 1.15-.18M10.46 52.35l3.76-18.52a4.3 4.3 0 0 1 3.94-3.23l10.31-.1A16.2 16.2 0 0 0 10.81 29 16.4 16.4 0 0 0 2.2 43.45v7.53a1.35 1.35 0 0 0 1.28 1.4ZM35.6 53.8a2.5 2.5 0 0 0 1.95-2.1l3.58-17.72a1.1 1.1 0 0 0-1.2-1.23h-21.2a2.4 2.4 0 0 0-2.4 1.67l-3.67 18.02a1.04 1.04 0 0 0 1 1.36Zm-.66 2.25-9.17.01a14 14 0 0 0 15.31 4.18 14.22 14.22 0 0 0 2.23-25.95l-3.57 17.7a4.7 4.7 0 0 1-4.8 4.06%22/%3E%3Cpath d=%22m31.12 42.26-2.48 7.78a1.2 1.2 0 0 1-1.06.8 1.2 1.2 0 0 1-1.04-.83l-2.43-8.22c-.67 1.11-.45 3.27-1.86 3.27l-4.27-.03c-.57 0-.9-.69-.88-1.16a1.1 1.1 0 0 1 1.08-.97l3.27-.03 1.56-5.54a1.2 1.2 0 0 1 1.06-.76 1.3 1.3 0 0 1 1.03.84l2.53 8.5 2.48-7.74a1.2 1.2 0 0 1 1-.8 1.3 1.3 0 0 1 1.08.8l1.51 4.7 2.4.03a1.1 1.1 0 0 1 1.08.96 1.03 1.03 0 0 1-.92 1.17l-3.18.03c-1.55.01-1.2-1.69-1.96-2.8%22/%3E%3C/g%3E%3C/svg%3E")}
.capa__ico--2{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 62.641 62.725%22%3E%3Cg fill=%22%23000%22%3E%3Cpath d=%22m55 62.71-47.3.01A7.75 7.75 0 0 1 0 55.17L.02 7.32C.02 3.29 3.74 0 7.66 0h47.3a7.76 7.76 0 0 1 7.68 7.65v47.53A7.74 7.74 0 0 1 55 62.7M30.2 2.25v22.37a1.6 1.6 0 0 1-.43.91 1.6 1.6 0 0 1-1.1.16l-9.66-5.36-9.56 5.3a1.3 1.3 0 0 1-1.19-.1 1.3 1.3 0 0 1-.44-.91V2.24a5.6 5.6 0 0 0-5.6 5.53v47.1a5.67 5.67 0 0 0 5.92 5.63l46.67-.02a5.6 5.6 0 0 0 5.6-5.6l.02-46.97c-.06-2.75-2.08-5.57-5.02-5.58Zm-10.25 16 8 4.43V2.25h-17.9l.01 20.46 8.34-4.64a1.5 1.5 0 0 1 1.55.19%22/%3E%3Cpath d=%22M46.76 56.5a14.57 14.57 0 1 1 10.3-14.57 14.56 14.56 0 0 1-10.3 14.57m-5.44-1.7a12.31 12.31 0 1 0-11.1-13.04 12.35 12.35 0 0 0 11.1 13.05m-20.08.07h-11.2a1.1 1.1 0 0 1-1.1-1.13 1.13 1.13 0 0 1 1.12-1.12h11.18a1.1 1.1 0 0 1 1.12 1.12 1.1 1.1 0 0 1-1.12 1.13m0-6.73H10.06a1.1 1.1 0 0 1-1.12-1.1 1.1 1.1 0 0 1 1.12-1.14h11.18a1.1 1.1 0 0 1 1.12 1.1 1.1 1.1 0 0 1-1.12 1.14%22/%3E%3Cpath d=%22m40.06 48.44-4.48-5.97a1.13 1.13 0 0 1 .22-1.58 1.13 1.13 0 0 1 1.58.23l3.57 4.77 8.36-8.37a1.13 1.13 0 0 1 1.58 0 1.1 1.1 0 0 1 .01 1.6l-9.34 9.35a1.2 1.2 0 0 1-1.5-.03%22/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 62.641 62.725%22%3E%3Cg fill=%22%23000%22%3E%3Cpath d=%22m55 62.71-47.3.01A7.75 7.75 0 0 1 0 55.17L.02 7.32C.02 3.29 3.74 0 7.66 0h47.3a7.76 7.76 0 0 1 7.68 7.65v47.53A7.74 7.74 0 0 1 55 62.7M30.2 2.25v22.37a1.6 1.6 0 0 1-.43.91 1.6 1.6 0 0 1-1.1.16l-9.66-5.36-9.56 5.3a1.3 1.3 0 0 1-1.19-.1 1.3 1.3 0 0 1-.44-.91V2.24a5.6 5.6 0 0 0-5.6 5.53v47.1a5.67 5.67 0 0 0 5.92 5.63l46.67-.02a5.6 5.6 0 0 0 5.6-5.6l.02-46.97c-.06-2.75-2.08-5.57-5.02-5.58Zm-10.25 16 8 4.43V2.25h-17.9l.01 20.46 8.34-4.64a1.5 1.5 0 0 1 1.55.19%22/%3E%3Cpath d=%22M46.76 56.5a14.57 14.57 0 1 1 10.3-14.57 14.56 14.56 0 0 1-10.3 14.57m-5.44-1.7a12.31 12.31 0 1 0-11.1-13.04 12.35 12.35 0 0 0 11.1 13.05m-20.08.07h-11.2a1.1 1.1 0 0 1-1.1-1.13 1.13 1.13 0 0 1 1.12-1.12h11.18a1.1 1.1 0 0 1 1.12 1.12 1.1 1.1 0 0 1-1.12 1.13m0-6.73H10.06a1.1 1.1 0 0 1-1.12-1.1 1.1 1.1 0 0 1 1.12-1.14h11.18a1.1 1.1 0 0 1 1.12 1.1 1.1 1.1 0 0 1-1.12 1.14%22/%3E%3Cpath d=%22m40.06 48.44-4.48-5.97a1.13 1.13 0 0 1 .22-1.58 1.13 1.13 0 0 1 1.58.23l3.57 4.77 8.36-8.37a1.13 1.13 0 0 1 1.58 0 1.1 1.1 0 0 1 .01 1.6l-9.34 9.35a1.2 1.2 0 0 1-1.5-.03%22/%3E%3C/g%3E%3C/svg%3E")}
.capa__ico--3{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 84.2 62.727%22%3E%3Cg fill=%22%23000%22%3E%3Cpath d=%22M59.56 46.77a4.5 4.5 0 0 1-4.27 4.67L3.9 51.4c-2.34 0-3.9-2.52-3.89-4.54L.04 14.5c0-2.38 2.37-4.08 4.55-4.08l10.94-.01.07-6.4C15.63 1.89 17.58.29 19.63 0H39.9A4.6 4.6 0 0 1 44 4.6l.03 5.81 10.9.02a4.57 4.57 0 0 1 4.63 4.65ZM41.62 10.42V4.59a2.3 2.3 0 0 0-2.31-2.25H20.24a2.25 2.25 0 0 0-2.3 2.08l.02 6Zm-8.1 20.74.01-7.36a1.3 1.3 0 0 1 .66-.94 2 2 0 0 1 1.07.04 11.15 11.15 0 0 1-.32 19.77l.02 6.45h19.96a2.26 2.26 0 0 0 2.25-2.5v-31.5a2.26 2.26 0 0 0-2.27-2.37H4.85a2.28 2.28 0 0 0-2.46 2.39v31.82a2.2 2.2 0 0 0 2.25 2.16H24.6l.01-6.43a11.16 11.16 0 0 1-.3-19.78 1.6 1.6 0 0 1 1.2.03 1.5 1.5 0 0 1 .52 1.07l.01 7.15 3.71 1.7Zm2.4-4.77-.06 5.64a1.5 1.5 0 0 1-.68.97l-5.43 2.46L24.37 33a1.4 1.4 0 0 1-.68-.97l-.07-5.65a8.4 8.4 0 0 0-2.58 8.1 8.6 8.6 0 0 0 4.92 6.17A1.5 1.5 0 0 1 27 42.08v7.05l5.55-.03.02-7.4c0-.3.49-.8.75-.91a8.7 8.7 0 0 0 5.17-6.15 8.4 8.4 0 0 0-2.56-8.25%22/%3E%3Cpath d=%22M84.2 29.09a4.23 4.23 0 0 0-4.28-4.3l-10.1-.02-.02-5.38a4.26 4.26 0 0 0-3.8-4.26h-8.45l.1 2.17h7.8a2.14 2.14 0 0 1 2.16 2.07v5.4h-9.12l-.26 2.16H79.9a2.1 2.1 0 0 1 2.1 2.2v29.15a2.1 2.1 0 0 1-2.08 2.3H33.38a2 2 0 0 1-2.08-2v-7.92l-1.15-.35-.57-.16a.38.38 0 0 0-.48.36l-.01 7.99c0 1.87 1.43 4.2 3.6 4.2l47.56.03a4.15 4.15 0 0 0 3.95-4.32Z%22/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 84.2 62.727%22%3E%3Cg fill=%22%23000%22%3E%3Cpath d=%22M59.56 46.77a4.5 4.5 0 0 1-4.27 4.67L3.9 51.4c-2.34 0-3.9-2.52-3.89-4.54L.04 14.5c0-2.38 2.37-4.08 4.55-4.08l10.94-.01.07-6.4C15.63 1.89 17.58.29 19.63 0H39.9A4.6 4.6 0 0 1 44 4.6l.03 5.81 10.9.02a4.57 4.57 0 0 1 4.63 4.65ZM41.62 10.42V4.59a2.3 2.3 0 0 0-2.31-2.25H20.24a2.25 2.25 0 0 0-2.3 2.08l.02 6Zm-8.1 20.74.01-7.36a1.3 1.3 0 0 1 .66-.94 2 2 0 0 1 1.07.04 11.15 11.15 0 0 1-.32 19.77l.02 6.45h19.96a2.26 2.26 0 0 0 2.25-2.5v-31.5a2.26 2.26 0 0 0-2.27-2.37H4.85a2.28 2.28 0 0 0-2.46 2.39v31.82a2.2 2.2 0 0 0 2.25 2.16H24.6l.01-6.43a11.16 11.16 0 0 1-.3-19.78 1.6 1.6 0 0 1 1.2.03 1.5 1.5 0 0 1 .52 1.07l.01 7.15 3.71 1.7Zm2.4-4.77-.06 5.64a1.5 1.5 0 0 1-.68.97l-5.43 2.46L24.37 33a1.4 1.4 0 0 1-.68-.97l-.07-5.65a8.4 8.4 0 0 0-2.58 8.1 8.6 8.6 0 0 0 4.92 6.17A1.5 1.5 0 0 1 27 42.08v7.05l5.55-.03.02-7.4c0-.3.49-.8.75-.91a8.7 8.7 0 0 0 5.17-6.15 8.4 8.4 0 0 0-2.56-8.25%22/%3E%3Cpath d=%22M84.2 29.09a4.23 4.23 0 0 0-4.28-4.3l-10.1-.02-.02-5.38a4.26 4.26 0 0 0-3.8-4.26h-8.45l.1 2.17h7.8a2.14 2.14 0 0 1 2.16 2.07v5.4h-9.12l-.26 2.16H79.9a2.1 2.1 0 0 1 2.1 2.2v29.15a2.1 2.1 0 0 1-2.08 2.3H33.38a2 2 0 0 1-2.08-2v-7.92l-1.15-.35-.57-.16a.38.38 0 0 0-.48.36l-.01 7.99c0 1.87 1.43 4.2 3.6 4.2l47.56.03a4.15 4.15 0 0 0 3.95-4.32Z%22/%3E%3C/g%3E%3C/svg%3E")}
.capa__ico--4{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 70.984 70.749%22%3E%3Cg fill=%22%23000%22%3E%3Cpath d=%22m46.58 25.27.54 3a2.9 2.9 0 0 1-1.5 3.1c-1.83 1.03-3.6 2.41-5.55.61l-1.9-1.74a16 16 0 0 1-5.28-.03l-2.42 2.12a2.9 2.9 0 0 1-2.52.4c-1.87-.82-4.51-1.98-4.1-4.28l.54-3.12a15 15 0 0 1-2.62-4.58l-2.59-.84a2.95 2.95 0 0 1-2.1-2.89v-2.27a1.1 1.1 0 0 1 1.08-1.13h8.28c2.52 0-.21 3.6 2.83 7.02l.03-9.4-4.75-4.76a3.4 3.4 0 0 1-4.22-.93 3.45 3.45 0 0 1 .17-4.45 3.4 3.4 0 0 1 4.35-.56 3.5 3.5 0 0 1 1.26 4.42l5.36 5.4.01 12.25a6 6 0 0 0 2.92 1V6.72a3.6 3.6 0 0 1-2.3-3.8A3.4 3.4 0 0 1 35.32 0a3.4 3.4 0 0 1 3.48 2.66 3.43 3.43 0 0 1-2.23 4.02v16.96a7 7 0 0 0 2.93-1.04l.02-12.27L44.85 5A3.55 3.55 0 0 1 45.99.61a3.4 3.4 0 0 1 4.37.4 3.46 3.46 0 0 1 .34 4.44 3.4 3.4 0 0 1-4.29 1.02l-4.74 4.76.04 9.4c3.05-3.54.31-7.02 2.83-7.02l8.28.01a1.14 1.14 0 0 1 1.09 1.14l-.05 2.62a2.85 2.85 0 0 1-2.05 2.52l-2.59.86a14 14 0 0 1-2.64 4.51M22.49 2.31a1.2 1.2 0 0 0-.57 1.7 1.24 1.24 0 0 0 1.69.54 1.34 1.34 0 0 0 .6-1.51 1.23 1.23 0 0 0-1.72-.73m12.35.05a1.24 1.24 0 0 0-.36 1.81 1.3 1.3 0 0 0 1.6.37 1.3 1.3 0 0 0 .49-1.74 1.24 1.24 0 0 0-1.72-.45m12.57-.07A1.26 1.26 0 0 0 46.83 4a1.23 1.23 0 0 0 1.67.55 1.3 1.3 0 0 0 .61-1.53 1.22 1.22 0 0 0-1.69-.74M38.8 27.9l3.28 2.91 2.2-1.17a1.13 1.13 0 0 0 .66-1.38l-.7-3.49a14 14 0 0 0 3.24-5.66l4.1-1.43a5 5 0 0 0 .1-1.9l-6.16.04a10.03 10.03 0 1 1-20.06-.02h-6.13a3 3 0 0 0 .18 1.93l3.43 1.13c1.09.36.8 2.46 3.47 5.49a1.7 1.7 0 0 1 .26 1.1l-.64 2.8c-.16.74.2 1.13.82 1.47A16 16 0 0 0 29 30.76l3.25-2.86a13.6 13.6 0 0 0 6.55 0M28.78 70.74a4.9 4.9 0 0 1-5.22-3.37l-4.1-11.55a4.55 4.55 0 0 0-4.25-3.03l-2.66-.04a3.9 3.9 0 0 1-3.57-2.78l-4.9-13.79a4.4 4.4 0 0 1 1.26-4.8 4.5 4.5 0 0 1-1.76-6.08 4.4 4.4 0 0 1 6.09-1.56 4.55 4.55 0 0 1 1.51 6.09 4.5 4.5 0 0 1 3.1 2.72l4 11.1a3.4 3.4 0 0 0 1.84 1.95l4.12 1.67a4.7 4.7 0 0 1 2.8 3l4.61 16.86a2.9 2.9 0 0 1-.38 2.54 3.2 3.2 0 0 1-2.5 1.07M7.06 25.31a2.17 2.17 0 0 0-1.78 2.8 2.2 2.2 0 0 0 2.6 1.52 2.2 2.2 0 0 0 1.68-2.57 2.2 2.2 0 0 0-2.5-1.75m18.9 42.02c.52 1.4 2.6 1.45 3.73.94l-4.53-16.81a3.2 3.2 0 0 0-2.08-2.34L19.2 47.6a5.6 5.6 0 0 1-3.07-3.47l-3.81-10.7c-.81-2.25-3.5-1.59-5.16-.7a2.2 2.2 0 0 0-1.07 2.63l4.99 14.02c.6 1.71 2.47 1.12 4.56 1.27a6.7 6.7 0 0 1 5.84 4.44Zm16.44 3.41a3.3 3.3 0 0 1-2.6-.96 2.9 2.9 0 0 1-.48-2.65l4.66-17.02a4.7 4.7 0 0 1 2.87-2.9l4.01-1.62a3.4 3.4 0 0 0 1.85-1.97l4.1-11.35a4.7 4.7 0 0 1 3-2.48 4.4 4.4 0 0 1 1.48-6.04 4.4 4.4 0 0 1 6.07 1.54 4.44 4.44 0 0 1-1.73 6.1 4.5 4.5 0 0 1 1.26 4.8l-4.84 13.64a4 4 0 0 1-3.63 2.91l-2.66.05a4.5 4.5 0 0 0-4.19 2.9l-4.2 11.8a4.85 4.85 0 0 1-4.95 3.25m20.67-45.4a2.2 2.2 0 0 0-1.62 2.76 2.23 2.23 0 0 0 2.58 1.54 2.2 2.2 0 0 0 1.7-2.62 2.17 2.17 0 0 0-2.66-1.68M45.17 67.09l4.38-12.16a6.6 6.6 0 0 1 5.79-4.3c2.05-.15 3.96.45 4.57-1.26l4.98-14.03a2.3 2.3 0 0 0-1.3-2.75 7 7 0 0 0-2.8-.7 2.3 2.3 0 0 0-2.17 1.65l-3.77 10.59a5.8 5.8 0 0 1-3.37 3.59l-3.88 1.53a2.8 2.8 0 0 0-1.69 1.89l-4.63 17.13c1.33.59 3.33.35 3.89-1.18m-8.61 2.38a1.1 1.1 0 0 1-.9 1.2c-.46.08-1.25-.23-1.25-.92V43.37l-8.75-.01a1.2 1.2 0 0 1-1.07-1.18 1.14 1.14 0 0 1 1.27-1.02h19.25a1.14 1.14 0 0 1 1.27 1.03 1.2 1.2 0 0 1-1.1 1.17l-8.72.01Z%22/%3E%3Cpath d=%22M20.06 69.11a1.15 1.15 0 0 1-.56 1.5 1.16 1.16 0 0 1-1.46-.71l-3.24-9.1a2 2 0 0 0-1.84-1.34l-3.76-.03a4.7 4.7 0 0 1-4.43-3.2L.07 43a1.15 1.15 0 0 1 .65-1.42 1.1 1.1 0 0 1 1.42.81L6.82 55.5a2.6 2.6 0 0 0 2.38 1.78l3.74.03a4.2 4.2 0 0 1 3.97 2.95Zm32.84.85a1.14 1.14 0 0 1-1.42.65 1.1 1.1 0 0 1-.59-1.43l3.08-8.69a4.3 4.3 0 0 1 4-3.14l3.61-.05a2.8 2.8 0 0 0 2.64-1.97l4.62-12.93a1.14 1.14 0 0 1 1.25-.86 1.14 1.14 0 0 1 .83 1.47L66.2 56.22a4.8 4.8 0 0 1-4.43 3.23l-3.76.06a2 2 0 0 0-1.84 1.31Z%22/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 70.984 70.749%22%3E%3Cg fill=%22%23000%22%3E%3Cpath d=%22m46.58 25.27.54 3a2.9 2.9 0 0 1-1.5 3.1c-1.83 1.03-3.6 2.41-5.55.61l-1.9-1.74a16 16 0 0 1-5.28-.03l-2.42 2.12a2.9 2.9 0 0 1-2.52.4c-1.87-.82-4.51-1.98-4.1-4.28l.54-3.12a15 15 0 0 1-2.62-4.58l-2.59-.84a2.95 2.95 0 0 1-2.1-2.89v-2.27a1.1 1.1 0 0 1 1.08-1.13h8.28c2.52 0-.21 3.6 2.83 7.02l.03-9.4-4.75-4.76a3.4 3.4 0 0 1-4.22-.93 3.45 3.45 0 0 1 .17-4.45 3.4 3.4 0 0 1 4.35-.56 3.5 3.5 0 0 1 1.26 4.42l5.36 5.4.01 12.25a6 6 0 0 0 2.92 1V6.72a3.6 3.6 0 0 1-2.3-3.8A3.4 3.4 0 0 1 35.32 0a3.4 3.4 0 0 1 3.48 2.66 3.43 3.43 0 0 1-2.23 4.02v16.96a7 7 0 0 0 2.93-1.04l.02-12.27L44.85 5A3.55 3.55 0 0 1 45.99.61a3.4 3.4 0 0 1 4.37.4 3.46 3.46 0 0 1 .34 4.44 3.4 3.4 0 0 1-4.29 1.02l-4.74 4.76.04 9.4c3.05-3.54.31-7.02 2.83-7.02l8.28.01a1.14 1.14 0 0 1 1.09 1.14l-.05 2.62a2.85 2.85 0 0 1-2.05 2.52l-2.59.86a14 14 0 0 1-2.64 4.51M22.49 2.31a1.2 1.2 0 0 0-.57 1.7 1.24 1.24 0 0 0 1.69.54 1.34 1.34 0 0 0 .6-1.51 1.23 1.23 0 0 0-1.72-.73m12.35.05a1.24 1.24 0 0 0-.36 1.81 1.3 1.3 0 0 0 1.6.37 1.3 1.3 0 0 0 .49-1.74 1.24 1.24 0 0 0-1.72-.45m12.57-.07A1.26 1.26 0 0 0 46.83 4a1.23 1.23 0 0 0 1.67.55 1.3 1.3 0 0 0 .61-1.53 1.22 1.22 0 0 0-1.69-.74M38.8 27.9l3.28 2.91 2.2-1.17a1.13 1.13 0 0 0 .66-1.38l-.7-3.49a14 14 0 0 0 3.24-5.66l4.1-1.43a5 5 0 0 0 .1-1.9l-6.16.04a10.03 10.03 0 1 1-20.06-.02h-6.13a3 3 0 0 0 .18 1.93l3.43 1.13c1.09.36.8 2.46 3.47 5.49a1.7 1.7 0 0 1 .26 1.1l-.64 2.8c-.16.74.2 1.13.82 1.47A16 16 0 0 0 29 30.76l3.25-2.86a13.6 13.6 0 0 0 6.55 0M28.78 70.74a4.9 4.9 0 0 1-5.22-3.37l-4.1-11.55a4.55 4.55 0 0 0-4.25-3.03l-2.66-.04a3.9 3.9 0 0 1-3.57-2.78l-4.9-13.79a4.4 4.4 0 0 1 1.26-4.8 4.5 4.5 0 0 1-1.76-6.08 4.4 4.4 0 0 1 6.09-1.56 4.55 4.55 0 0 1 1.51 6.09 4.5 4.5 0 0 1 3.1 2.72l4 11.1a3.4 3.4 0 0 0 1.84 1.95l4.12 1.67a4.7 4.7 0 0 1 2.8 3l4.61 16.86a2.9 2.9 0 0 1-.38 2.54 3.2 3.2 0 0 1-2.5 1.07M7.06 25.31a2.17 2.17 0 0 0-1.78 2.8 2.2 2.2 0 0 0 2.6 1.52 2.2 2.2 0 0 0 1.68-2.57 2.2 2.2 0 0 0-2.5-1.75m18.9 42.02c.52 1.4 2.6 1.45 3.73.94l-4.53-16.81a3.2 3.2 0 0 0-2.08-2.34L19.2 47.6a5.6 5.6 0 0 1-3.07-3.47l-3.81-10.7c-.81-2.25-3.5-1.59-5.16-.7a2.2 2.2 0 0 0-1.07 2.63l4.99 14.02c.6 1.71 2.47 1.12 4.56 1.27a6.7 6.7 0 0 1 5.84 4.44Zm16.44 3.41a3.3 3.3 0 0 1-2.6-.96 2.9 2.9 0 0 1-.48-2.65l4.66-17.02a4.7 4.7 0 0 1 2.87-2.9l4.01-1.62a3.4 3.4 0 0 0 1.85-1.97l4.1-11.35a4.7 4.7 0 0 1 3-2.48 4.4 4.4 0 0 1 1.48-6.04 4.4 4.4 0 0 1 6.07 1.54 4.44 4.44 0 0 1-1.73 6.1 4.5 4.5 0 0 1 1.26 4.8l-4.84 13.64a4 4 0 0 1-3.63 2.91l-2.66.05a4.5 4.5 0 0 0-4.19 2.9l-4.2 11.8a4.85 4.85 0 0 1-4.95 3.25m20.67-45.4a2.2 2.2 0 0 0-1.62 2.76 2.23 2.23 0 0 0 2.58 1.54 2.2 2.2 0 0 0 1.7-2.62 2.17 2.17 0 0 0-2.66-1.68M45.17 67.09l4.38-12.16a6.6 6.6 0 0 1 5.79-4.3c2.05-.15 3.96.45 4.57-1.26l4.98-14.03a2.3 2.3 0 0 0-1.3-2.75 7 7 0 0 0-2.8-.7 2.3 2.3 0 0 0-2.17 1.65l-3.77 10.59a5.8 5.8 0 0 1-3.37 3.59l-3.88 1.53a2.8 2.8 0 0 0-1.69 1.89l-4.63 17.13c1.33.59 3.33.35 3.89-1.18m-8.61 2.38a1.1 1.1 0 0 1-.9 1.2c-.46.08-1.25-.23-1.25-.92V43.37l-8.75-.01a1.2 1.2 0 0 1-1.07-1.18 1.14 1.14 0 0 1 1.27-1.02h19.25a1.14 1.14 0 0 1 1.27 1.03 1.2 1.2 0 0 1-1.1 1.17l-8.72.01Z%22/%3E%3Cpath d=%22M20.06 69.11a1.15 1.15 0 0 1-.56 1.5 1.16 1.16 0 0 1-1.46-.71l-3.24-9.1a2 2 0 0 0-1.84-1.34l-3.76-.03a4.7 4.7 0 0 1-4.43-3.2L.07 43a1.15 1.15 0 0 1 .65-1.42 1.1 1.1 0 0 1 1.42.81L6.82 55.5a2.6 2.6 0 0 0 2.38 1.78l3.74.03a4.2 4.2 0 0 1 3.97 2.95Zm32.84.85a1.14 1.14 0 0 1-1.42.65 1.1 1.1 0 0 1-.59-1.43l3.08-8.69a4.3 4.3 0 0 1 4-3.14l3.61-.05a2.8 2.8 0 0 0 2.64-1.97l4.62-12.93a1.14 1.14 0 0 1 1.25-.86 1.14 1.14 0 0 1 .83 1.47L66.2 56.22a4.8 4.8 0 0 1-4.43 3.23l-3.76.06a2 2 0 0 0-1.84 1.31Z%22/%3E%3C/g%3E%3C/svg%3E")}
.capa h3{font-size:var(--t-16);font-weight:700;color:var(--orange);margin-bottom:var(--s-2)}
.capa p{font-size:var(--t-14);line-height:1.29}

/* ---------- 03 · instalaciones ----------------------------------------- */
.s--split{background:var(--shell)}
/* La banda gris entra con esquina superior derecha redondeada (152px,
   el mismo radio que el hero y quiénes somos) y 42px de aire arriba. */
.s--split{padding-block:2.625rem 3rem;border-top-right-radius:var(--radio)}
/* El botón va detrás del último párrafo, con el mismo aire que el resto de
   la pila. Antes colgaba a 100px y quedaba descolgado del bloque de texto. */
.s--split .btn{margin-top:3.25rem}   /* PDF: 2753,4 -> 2805,4 = 52px */
/* No van centradas: el texto arranca a 42px del borde y la foto a 97. */
.s--split .grid{align-items:start;row-gap:var(--s-bot)}
.s--split .media{margin-top:3.4375rem}
.s--split .eyebrow{margin-bottom:1.375rem}
/* Medido en el PDF: la foto ocupa 588x400 (columnas 7 a 12), ratio 1,47.
   El 4/3 que había recortaba de más. */
.media{position:relative}
.media__slides{
  position:relative;aspect-ratio:588/400;
  border-radius:15px;overflow:hidden;background:rgb(27 36 42 / .06);
}
.media__slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.media__slide.is-active{opacity:1}
.media img{width:100%;height:100%;object-fit:cover;display:block}
/* Flechas bajo la foto, alineadas a su canto derecho: mismo galón que el hero
   y sin jugarse el contraste sobre la fotografía. */
.media__nav{display:flex;justify-content:flex-end;gap:0;margin-top:.75rem}
/* Galón compartido por los tres carruseles: hero, instalaciones y la tira de
   quienes somos. Solo cambia la caja que lo envuelve. */
.media__arrow,.strip__arrow{
  padding:0;border:0;background:transparent;cursor:pointer;
  display:grid;place-items:center;
}
.media__arrow{width:38px;height:38px}
.media__arrow::before,.strip__arrow::before{
  content:"";width:12px;height:24px;background:var(--orange);
  -webkit-mask:url("../img/arrow-slider.svg") center/contain no-repeat;
          mask:url("../img/arrow-slider.svg") center/contain no-repeat;
  transition:opacity .2s ease,translate .2s ease;
}
.media__arrow--prev::before{scale:-1 1}
.media__arrow:hover::before,.strip__arrow:not([disabled]):hover::before{opacity:.7}
.media__arrow:hover:not(.media__arrow--prev)::before,
.strip__arrow:not([disabled],.strip__arrow--prev):hover::before{translate:3px 0}
.media__arrow--prev:hover::before,
.strip__arrow--prev:not([disabled]):hover::before{translate:-3px 0}

/* ---------- 05 · soluciones (banda naranja a sangre) -------------------- */
/* Banda naranja con textura del imagotipo encima.
   El original venía como PNG de 1920x4131 dentro de un SVG; el diseño solo
   usa la franja y=1322..2617. Recortada y en WebP pasa de 142 KB a 17.
   Es blanco puro con alfa entre el 10% y el 13%: una filigrana, no una trama. */
.s--sol{
  min-height:971px;
  background-color:var(--orange);
  background-image:image-set(url("../img/textura-soluciones.webp") 1x,
                            url("../img/textura-soluciones-2x.webp") 2x);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:var(--ink);
}
.s--sol .t40--white{color:var(--paper);margin-bottom:3.5rem}
.sol{align-items:start;row-gap:var(--s-4)}

/* Las dos tarjetas comparten tres filas —cabecera, descripción y listado— para
   que los filetes empiecen a la misma altura aunque los textos tengan distinto
   número de líneas. En el PDF el primer ítem de las dos listas cae en y=3388,4
   y los filetes en las mismas filas, con paso de 36px.
   Se resuelve con subgrid: aguanta cualquier longitud de texto, que es lo que
   hace falta cuando el contenido venga de un gestor. */
@media (min-width:1101px){
  .sol{grid-template-rows:auto auto auto;row-gap:0}
  .sol > *{grid-row:1 / -1}
  .card{display:grid;grid-template-rows:subgrid}
}
/* Navegadores sin subgrid: se iguala el hueco de la descripción a mano. */
@supports not (grid-template-rows:subgrid){
  @media (min-width:1101px){
    .sol{grid-template-rows:none}
    .sol > *{grid-row:auto}
    .card{display:block}
    .card__d{min-height:5.75rem}
  }
}
.sol .t30{color:var(--ink)}

/* Botón invertido: pastilla blanca con texto naranja */
/* Medido en el PDF: pastilla de 284x40 pegada al margen (x=120), con el
   rótulo entrando a 21px por la izquierda y 35 de aire por la derecha.
   Antes salía a 47px de alto porque la altura la daba el relleno. */
.s--sol .link{
  margin-top:9.5rem;
  display:inline-flex;align-items:center;
  height:40px;padding:0 2.1875rem 0 1.3125rem;
  /* Mismo criterio que .btn: el filete existe desde el reposo, del color del
     relleno, para que al pasar por encima no cambie de tamaño. */
  border:1px solid var(--paper);
  background:var(--paper);color:var(--orange);
  border-radius:999px;font-weight:300;
  transition:background .18s ease,color .18s ease;
}
.s--sol .link b{font-weight:700}
/* Sobre la banda naranja no se puede invertir a naranja: se vaciaría contra
   el fondo. Aquí la inversión es en blanco, filete y letra. */
.s--sol .link:hover,.s--sol .link:focus-visible{
  opacity:1;background:transparent;color:var(--paper);
}

/* Columnas de técnica: sin caja, directamente sobre el naranja */
.card{color:var(--paper)}
.card__cab{display:flex;align-items:center;gap:1.25rem;margin-bottom:2.5rem}
.card__cab .card__t{margin-bottom:0}
.card__ico{
  display:block;flex:none;width:78px;height:78px;
  background:var(--ink);
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
}
.card__ico--hid{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 78 78%22%3E%3Cg fill=%22%23000%22%3E%3Cpath d=%22M39 78a39 39 0 1 1 39-39 39.04 39.04 0 0 1-39 39m0-75.14A36.15 36.15 0 1 0 75.14 39 36.2 36.2 0 0 0 39 2.85m9.75 66.36h-19.5a1.43 1.43 0 1 1 0-2.85h8.32v-11.5a15.92 15.92 0 0 1 0-31.72v-11.5h-8.32a1.43 1.43 0 0 1 0-2.85h19.5a1.43 1.43 0 1 1 0 2.85h-8.33v11.5a15.92 15.92 0 0 1 0 31.72v11.5h8.33a1.43 1.43 0 1 1 0 2.85M39 25.93A13.07 13.07 0 1 0 52.07 39 13.1 13.1 0 0 0 39 25.93%22/%3E%3Cpath d=%22M39.02 42.45a5.1 5.1 0 0 1-4.24-2.65c-1.16-1.84-2.63-1.76-3.7-.08a1.43 1.43 0 1 1-2.41-1.52 5.1 5.1 0 0 1 4.23-2.65 5.1 5.1 0 0 1 4.24 2.65c1.17 1.84 2.65 1.76 3.71.08a5.1 5.1 0 0 1 4.23-2.65 5.1 5.1 0 0 1 4.25 2.65 1.43 1.43 0 0 1-2.42 1.52c-1.06-1.68-2.59-1.68-3.65 0a5.1 5.1 0 0 1-4.24 2.66%22/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 78 78%22%3E%3Cg fill=%22%23000%22%3E%3Cpath d=%22M39 78a39 39 0 1 1 39-39 39.04 39.04 0 0 1-39 39m0-75.14A36.15 36.15 0 1 0 75.14 39 36.2 36.2 0 0 0 39 2.85m9.75 66.36h-19.5a1.43 1.43 0 1 1 0-2.85h8.32v-11.5a15.92 15.92 0 0 1 0-31.72v-11.5h-8.32a1.43 1.43 0 0 1 0-2.85h19.5a1.43 1.43 0 1 1 0 2.85h-8.33v11.5a15.92 15.92 0 0 1 0 31.72v11.5h8.33a1.43 1.43 0 1 1 0 2.85M39 25.93A13.07 13.07 0 1 0 52.07 39 13.1 13.1 0 0 0 39 25.93%22/%3E%3Cpath d=%22M39.02 42.45a5.1 5.1 0 0 1-4.24-2.65c-1.16-1.84-2.63-1.76-3.7-.08a1.43 1.43 0 1 1-2.41-1.52 5.1 5.1 0 0 1 4.23-2.65 5.1 5.1 0 0 1 4.24 2.65c1.17 1.84 2.65 1.76 3.71.08a5.1 5.1 0 0 1 4.23-2.65 5.1 5.1 0 0 1 4.25 2.65 1.43 1.43 0 0 1-2.42 1.52c-1.06-1.68-2.59-1.68-3.65 0a5.1 5.1 0 0 1-4.24 2.66%22/%3E%3C/g%3E%3C/svg%3E")}
.card__ico--acc{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 78 77.998%22%3E%3Cg fill=%22%23000%22%3E%3Cpath d=%22M39 0a39 39 0 1 0 39 39A39.04 39.04 0 0 0 39 0m0 75.15A36.15 36.15 0 1 1 75.15 39 36.2 36.2 0 0 1 39 75.15%22/%3E%3Cpath d=%22M43.19 15.9h-2.76v-3.88h.72a1.43 1.43 0 0 0 0-2.85h-4.3a1.43 1.43 0 0 0 0 2.85h.72v3.87h-2.76A5.04 5.04 0 0 0 30 21.12v30.94a5.04 5.04 0 0 0 4.82 5.22h2.77v8.7H34.3a1.43 1.43 0 0 0 0 2.85h9.4a1.43 1.43 0 1 0 0-2.85h-3.27v-8.7h2.76A5.04 5.04 0 0 0 48 52.06V21.12a5.04 5.04 0 0 0-4.82-5.23m1.97 26.43H32.84V25.77h12.32Zm-12.32 2.85h12.32v2.15H32.84Zm1.97-26.42h8.38a2.23 2.23 0 0 1 1.97 2.37v1.8H32.84v-1.8a2.23 2.23 0 0 1 1.97-2.37m8.38 35.68H34.8a2.23 2.23 0 0 1-1.97-2.38v-1.88h12.32v1.88a2.23 2.23 0 0 1-1.97 2.38%22/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 78 77.998%22%3E%3Cg fill=%22%23000%22%3E%3Cpath d=%22M39 0a39 39 0 1 0 39 39A39.04 39.04 0 0 0 39 0m0 75.15A36.15 36.15 0 1 1 75.15 39 36.2 36.2 0 0 1 39 75.15%22/%3E%3Cpath d=%22M43.19 15.9h-2.76v-3.88h.72a1.43 1.43 0 0 0 0-2.85h-4.3a1.43 1.43 0 0 0 0 2.85h.72v3.87h-2.76A5.04 5.04 0 0 0 30 21.12v30.94a5.04 5.04 0 0 0 4.82 5.22h2.77v8.7H34.3a1.43 1.43 0 0 0 0 2.85h9.4a1.43 1.43 0 1 0 0-2.85h-3.27v-8.7h2.76A5.04 5.04 0 0 0 48 52.06V21.12a5.04 5.04 0 0 0-4.82-5.23m1.97 26.43H32.84V25.77h12.32Zm-12.32 2.85h12.32v2.15H32.84Zm1.97-26.42h8.38a2.23 2.23 0 0 1 1.97 2.37v1.8H32.84v-1.8a2.23 2.23 0 0 1 1.97-2.37m8.38 35.68H34.8a2.23 2.23 0 0 1-1.97-2.38v-1.88h12.32v1.88a2.23 2.23 0 0 1-1.97 2.38%22/%3E%3C/g%3E%3C/svg%3E")}
.card__t{font-size:var(--t-30);font-weight:300;line-height:1.15;color:var(--paper);margin-bottom:var(--s-3)}
.card__t b{font-weight:500}
.card__d{font-size:var(--t-14);color:var(--ink);line-height:1.29;margin-bottom:4rem}
.card__l li{border-top:1px solid var(--paper)}
.card__l li:last-child{border-bottom:1px solid var(--paper)}
.card__l a{display:block;padding:.5625rem 0;font-size:var(--t-14);color:var(--paper);text-decoration:none;transition:opacity .18s ease}
.card__l a:hover{opacity:.7}

/* ---------- 06 · logos de marca ---------------------------------------- */
.logos{display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--gutter);align-items:center}
.logos a{display:grid;place-items:center;padding:.75rem;
  opacity:.72;transition:opacity .2s ease}
.logos a:hover{opacity:1}
.logos img{max-height:38px;width:auto;height:auto}

/* ---------- CTA -------------------------------------------------------- */
/* La foto del CTA va a sangre y el texto encima de su zona clara.
   El velo garantiza la legibilidad aunque el recorte varíe. */
.cta{position:relative;z-index:1;isolation:isolate;overflow:hidden;
  min-height:722px;margin-top:-197px;display:flex;align-items:flex-end;
  padding-bottom:5.25rem}
.cta__bg{position:absolute;inset:0;z-index:-2}
.cta__bg img{width:100%;height:100%;object-fit:cover;object-position:right center}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgb(255 255 255 /.92) 0%,rgb(255 255 255 /.78) 38%,rgb(255 255 255 /0) 62%)}
.cta .grid{width:min(var(--wrap),100% - var(--pad)*2);margin-inline:auto}
@media (max-width:760px){
  .cta::before{background:rgb(255 255 255 /.86)}
}

/* ---------- Footer ----------------------------------------------------- */
/* La columna del catálogo arranca a 52px del borde; las otras dos a 120. */
/* Medido sobre el PDF: la banda del pie va de 4631 a 4981 (350px) y tanto
   el logotipo como el isotipo arrancan en 4670,3 y la fila inferior acaba
   en 4941,5. Es decir 40px de aire arriba y otros 40 abajo. */
.ft{background:var(--ink);color:var(--paper);padding-block:2.5rem}
/* Las tres columnas arrancan en la misma línea y llenan el alto del pie.
   Antes la primera bajaba 68px por su cuenta y la tercera 12 más, así que
   ni los tres arranques ni los tres pies casaban con nada.
   El bloque legal se ancla abajo del todo con margin-top:auto, a la misma
   altura que el botón del catálogo y que el enlace de redes. */
/* Altura de contenido del pie medida en el PDF: de 4670,3 a 4941,5 = 271px. Las
   tres columnas terminan a la vez en 4941 y esa altura la fija el diseño,
   no el contenido, así que se declara. */
.ft .grid{row-gap:var(--s-4);align-items:stretch;min-height:271px}
.ft .col-1-4,.ft__mid,.ft__end,.ft__top{display:flex;flex-direction:column}
/* El isotipo y el claim se alinean al margen derecho del contenedor. */
.ft__end .ft__top{align-items:flex-end}
.ft .col-1-4 .ft__soc{margin-top:auto;padding-top:var(--s-3)}
.ft__mid .btn{margin-top:auto}
.ft__end .ft__legal{margin-top:auto;padding-top:var(--s-3)}
.ft__adr{font-size:var(--t-14);line-height:1.29}
.ft__adr a{text-decoration:none}
.ft__adr a:hover{color:var(--orange)}
.ft__soc{display:flex;align-items:center;gap:.75rem;font-size:var(--t-12);color:var(--paper)}
.ft__soc a{display:grid;place-items:center;color:var(--paper);transition:color .2s ease}
.ft__soc a:hover{color:var(--orange)}
/* El círculo forma parte del propio icono: no se dibuja por CSS. */
.soc{display:block;width:22px;height:22px}
/* LinkedIn va como SVG en linea en el marcado, igual que el logotipo y el
   isotipo. Como mascara CSS dependia de que el navegador pudiera cargar el
   archivo: abierto en local (file://) o tras un fallo de red se quedaba en
   blanco sin avisar. En linea hereda el color y no puede fallar. */
.soc path,.soc circle{transition:fill .2s ease,stroke .2s ease}
/* Las que sigan siendo mascara (X, YouTube) usan esta base. */
.soc--mask{background:currentColor;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain}
/* X y YouTube: desactivados a petición del cliente el 23/07/2026.
   Los archivos siguen en img/social/ y las reglas aquí; para reactivarlos
   basta con devolver los <a> al pie. */
.soc--x       {-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 22 22%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%2211%22 stroke=%22none%22/%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%2210.5%22/%3E%3C/g%3E%3Cpath fill=%22%23000%22 d=%22m12.44 10.2 3.9-4.17h-1.48L11.8 9.3 9.45 6.03H5.4l4.1 5.73-4.1 4.39h1.48l3.26-3.5 2.5 3.5h4.06ZM7.48 7.1H8.9l5.7 7.98h-1.4Z%22/%3E%3C/svg%3E");       mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 22 22%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%2211%22 stroke=%22none%22/%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%2210.5%22/%3E%3C/g%3E%3Cpath fill=%22%23000%22 d=%22m12.44 10.2 3.9-4.17h-1.48L11.8 9.3 9.45 6.03H5.4l4.1 5.73-4.1 4.39h1.48l3.26-3.5 2.5 3.5h4.06ZM7.48 7.1H8.9l5.7 7.98h-1.4Z%22/%3E%3C/svg%3E")}
.soc--youtube {-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 22 22%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%2211%22 stroke=%22none%22/%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%2210.5%22/%3E%3C/g%3E%3Cpath fill=%22%23000%22 d=%22M15.7 6.03H6.43a1.66 1.66 0 0 0-1.66 1.66v5.8a1.66 1.66 0 0 0 1.67 1.67h9.28a1.66 1.66 0 0 0 1.66-1.66V7.69a1.66 1.66 0 0 0-1.66-1.66m-3.15 4.96-2.58 1.3a.45.45 0 0 1-.65-.4v-2.6a.45.45 0 0 1 .65-.4l2.58 1.3a.45.45 0 0 1 0 .8%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 22 22%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%2211%22 stroke=%22none%22/%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%2210.5%22/%3E%3C/g%3E%3Cpath fill=%22%23000%22 d=%22M15.7 6.03H6.43a1.66 1.66 0 0 0-1.66 1.66v5.8a1.66 1.66 0 0 0 1.67 1.67h9.28a1.66 1.66 0 0 0 1.66-1.66V7.69a1.66 1.66 0 0 0-1.66-1.66m-3.15 4.96-2.58 1.3a.45.45 0 0 1-.65-.4v-2.6a.45.45 0 0 1 .65-.4l2.58 1.3a.45.45 0 0 1 0 .8%22/%3E%3C/svg%3E")}
.ft__mid{align-items:center;gap:1rem}
.ft__cat{display:block;margin-top:12px}   /* PDF: el catálogo baja 12px */
.ft__cat img{width:212px;height:auto;display:block}
.ft__end{align-items:flex-end;text-align:right}
.ft__claim{font-size:var(--t-30);color:var(--orange);font-weight:300;line-height:1.1}
.ft__claim b{font-weight:700}
.ft__legal{display:grid;gap:.4rem;font-size:var(--t-12);letter-spacing:.04em;justify-items:end}
.ft__legal a{text-decoration:none;color:var(--paper-70)}
.ft__legal a:hover{color:var(--paper)}

/* =========================================================================
   RESPONSIVE
   El diseño solo existe a 1440. Todo lo de aquí abajo son decisiones
   nuestras y hay que validarlas con diseño.
   ========================================================================= */

@media (max-width:1100px){
  .col-1-7,.col-8-12,.col-1-6,.col-7-12,.col-1-5,.col-6-12{grid-column:1/-1}
  .col-1-4,.col-5-8,.col-9-12{grid-column:span 6}
  .capa{grid-column:span 6}
  .ft__end{text-align:left;align-items:flex-start}
  .ft__legal{justify-items:start}
  .ft__mid{align-items:flex-start}
}

@media (max-width:760px){
  :root{--cols:6;--gutter:16px;--hero-borde:0px}
  /* Sin sitio para el solape: el panel vuelve al flujo normal */
  .s--sol{min-height:0}
  #marcas{width:100%;margin:0;border-radius:0}
  .cta{margin-top:0;min-height:0;padding-block:var(--s-top) var(--s-bot)}
  .col-1-4,.col-5-8,.col-9-12,.capa{grid-column:1/-1}
  .logos{grid-template-columns:repeat(2,1fr)}
  .s--sol .t40--white{margin-bottom:var(--s-4)}

  /* Menú: panel a pantalla completa */
  .hdr__burger{display:flex}
  .nav{
    position:fixed;inset:0;background:var(--ink);
    display:grid;place-items:center;
    translate:0 -100%;transition:translate .3s ease;
  }
  .nav[data-open="true"]{translate:0 0}
  .nav__list{flex-direction:column;gap:var(--s-4);text-align:center}
  .nav a,.nav__tit{font-size:var(--t-25);color:var(--paper)!important}
  .hdr[data-state="pinned"] .hdr__burger{color:var(--ink)}
}


/* ---------- Desplegable del menú principal ------------------------------
   Medido en el artboard: panel blanco de 120x236 sin radio —esquinas vivas,
   único caso en toda la web—, centrado bajo el enlace, pegado a la barra
   (nace en y=80, y el header mide 120 con el enlace centrado). Los ítems van
   a 12px centrados con paso de 24, el primero en Bold naranja por ser el que
   está bajo el puntero: en reposo todos van en Light tinta, y el marcado
   lleva fondo naranja a lo ancho del panel con la letra en blanco.
   Solo CSS: se abre con :hover y con :focus-within, así que el teclado entra
   por tabulación sin necesitar JS. */
.nav__grupo{position:relative}
/* Rótulo sin destino: mismo aspecto que los enlaces, pero no se pulsa. */
.nav__tit{cursor:default}
.nav__panel{
  /* top:100% seria el fondo del enlace (y=70); el diseño lo pega a la barra
     (y=80 sobre un header de 120 con el enlace centrado). El calc suma la
     mitad del aire que el header deja bajo el enlace. */
  position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 0;
  min-width:120px;padding:8px 0 12px;
  background:var(--paper);
  box-shadow:0 12px 24px rgb(27 36 42 / .12);
  opacity:0;visibility:hidden;translate:-50% 6px;
  transition:opacity .18s ease,translate .18s ease,visibility 0s .18s;
}
.nav__grupo:hover .nav__panel,
.nav__grupo:focus-within .nav__panel{
  opacity:1;visibility:visible;translate:-50% 0;
  transition:opacity .18s ease,translate .18s ease,visibility 0s;
}
.nav__panel a{
  display:block;padding:6px 14px;
  font-size:var(--t-12);font-weight:300;line-height:1;
  color:var(--ink);text-align:center;text-decoration:none;letter-spacing:.02em;
}
/* Al pasar por encima el rótulo vira a naranja y Bold, sin franja de fondo.
   El artboard dibuja STABILUS sobre una pastilla naranja, pero es la
   representación del puntero encima en la maqueta, no el estado pedido. */
.nav__panel a:hover,.nav__panel a:focus-visible{
  color:var(--orange);font-weight:700;
}
/* En el panel de móvil los grupos se despliegan en flujo, sin capa. */
@media (max-width:1100px){
  .nav__panel{position:static;translate:0 0;min-width:0;box-shadow:none;
    background:none;opacity:1;visibility:visible;padding:0 0 0 1rem}
  .nav__panel a{text-align:left;color:inherit}
}


/* =========================================================================
   SOLUCIONES  ·  catálogo
   Medidas de BULTZ_-_SOLUCIONES_entero.pdf (1440x3784, escala 1:1).
   ========================================================================= */

/* ---------- Cabecera naranja ------------------------------------------
   La banda mide 582 de alto, pero solo se ve entera hasta y=400: a partir
   de ahí entra el lienzo blanco y el naranja únicamente asoma por el hueco
   que deja su vértice redondeado. De ahí el solape negativo. */
:root{ --radio-cab:clamp(3rem, 9.5vw, 137px) }   /* 137px a 1440 */

.cab{
  /* Misma filigrana del imagotipo que la banda de soluciones de la home.
     Correlacionando la textura contra la banda del PDF, el mejor encaje es
     escala 1 con recorte centrado —o sea, cover/center— con un error rms de
     0,0103 sobre un alfa que como mucho llega al 14%. */
  background-color:var(--orange);
  background-image:image-set(url("../img/textura-soluciones.webp") 1x,
                             url("../img/textura-soluciones-2x.webp") 2x);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  color:var(--paper);
  min-height:582px;padding-top:176px;padding-bottom:2rem;
}
.cab__t{
  font-size:var(--t-40);font-weight:300;line-height:1.125;letter-spacing:-.01em;
  color:var(--paper);grid-column:1/5;
}
.cab__t b{font-weight:700}
/* El párrafo va en tinta sobre el naranja y es el énfasis el que se pone en
   blanco, no al revés: medido en el PDF, «experiencia técnica y logística»
   sale en LibreFranklin-Bold blanco y el resto en Light sobre #1b242a. */
.cab__d{
  grid-column:5/-1;
  font-size:var(--t-25);font-weight:300;line-height:1.2;color:var(--ink);
}
.cab__d b{font-weight:700;color:var(--paper)}

/* El lienzo sube 182px sobre la banda y descubre el naranja por el vértice. */
.lienzo{
  position:relative;z-index:1;
  background:var(--paper);
  margin-top:-182px;
  border-top-right-radius:var(--radio-cab);
  padding-top:2.6875rem;              /* migas a 43px del borde */
  padding-bottom:4rem;
}

/* ---------- Migas ------------------------------------------------------
   14px Light en tinta, con las barras en naranja y el último tramo en
   SemiBold. Sin «Inicio»: el rastro arranca en la dimensión del filtro
   (CATEGORÍA / Técnica Hidráulica / …) y en la vista sin filtrar se queda en
   un único rótulo. */
/* Migas. SVG entregado: 14 Light en tinta, barras separadoras en naranja con
   unos 14px de aire a cada lado, y el último tramo en Regular (400) —no en
   SemiBold, como yo tenía—. Sin filtrar, un solo rótulo. */
.migas{
  grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;
  font-size:var(--t-14);font-weight:300;line-height:17px;color:var(--ink);
  margin-bottom:44px;   /* la primera ficha y el primer filete, en 528 */
}
.migas a{text-decoration:none;color:inherit}
.migas a:hover{color:var(--orange)}
.migas__sep{color:var(--orange)}
.migas [aria-current]{font-weight:400}

/* ---------- Filtros ----------------------------------------------------
   Columnas 1 a 3. Cada entrada lleva filete encima y mide 58px de paso; el
   primer filete arranca a la misma altura que la primera tarjeta. */
/* Alturas medidas en el artboard con el menú desplegado: los filetes caen en
   528, 586, 644, 828, 1102, 1160 y 1218. De ahí salen los 58px de cada
   entrada, los 184 del grupo de Hidráulica y los 274 del de Accionamientos.
   El filete va en la fila pulsable y en cada grupo, no en el <li>: así el que
   cierra una entrada desplegada queda debajo de su contenido. */
.filtros{grid-column:1/4}
.filtros__lista{border-top:1px solid var(--ink)}
/* el filete se declara junto al resto de .filtros__b, mas abajo */
/* Jerarquía medida en el PDF: los cuatro van a 20px y en naranja, y lo que
   los distingue es el peso.
     · la entrada activa   LibreFranklin-Bold   (700)
     · las agrupaciones    LibreFranklin-Light  (300)
   En el artboard CATEGORÍA aparece en Medium (500) mientras MARCAS y SECTORES
   van en Light. Lo he leído como el estado de una agrupación abierta o con el
   puntero encima, no como una variante fija: por eso el 500 se usa aquí para
   :hover y [aria-expanded="true"]. Confírmalo. */
.filtros__b{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:100%;height:58px;padding:0;
  background:none;cursor:pointer;text-align:left;
  /* Sin borde salvo el filete inferior. Iba en una regla aparte y la mataba
     este border:0, que va despues en la hoja. */
  border:0;border-bottom:1px solid var(--ink);
  font:300 var(--t-20)/1 var(--f);
  color:var(--orange);text-decoration:none;
  transition:font-weight .18s ease;
}
.filtros__b:hover,
.filtros__b[aria-expanded="true"]{font-weight:500}
.filtros__it--activo .filtros__b{font-weight:700}
/* Las tres agrupaciones se despliegan; el artboard las dibuja cerradas y sin
   flecha, así que la marca de desplegable es añadida.
   Va a la altura de caja alta del rótulo —15px medidos sobre los 20 de
   cuerpo, o sea .75em— y el ancho sale de la proporción del propio
   arrow-down.svg, que tiene un viewBox de 11x17. En em para que acompañe si
   el cuerpo cambia. */
.filtros__flecha{flex:none;height:.75em;width:auto;transition:rotate .2s ease}
.filtros__b[aria-expanded="true"] .filtros__flecha{rotate:180deg}
.filtros__panel[hidden]{display:none}

/* Grupo: icono de 33 y rótulo de 16 en tinta, con la segunda palabra en Bold.
   28px de aire arriba y 15 abajo dan los 76 del bloque de cabecera. */
.filtros__grupo{border-bottom:1px solid var(--ink)}
/* MARCAS y SECTORES no se agrupan en dos técnicas: van en lista llana, con el
   mismo sangrado y paso que los subniveles de CATEGORÍA para que las tres
   agrupaciones se lean igual. Los 19px reponen el aire que ahí da el
   encabezado del grupo. */
.filtros__grupo--llano{padding-top:19px}
/* El rótulo va envuelto en un solo <span>: si las palabras cuelgan sueltas del
   contenedor flexible, cada una es un elemento y el gap de 11px del icono se
   cuela también entre ellas. El diseño las separa con un espacio normal de
   3,4px. */
.filtros__gt{
  display:flex;align-items:center;gap:11px;
  /* 28 arriba y 11 abajo. Los 3px que se le quitan respecto al bloque de 76
     del artboard se devuelven al final del grupo: hacen falta ahí porque el
     renglón cae 3px más abajo dentro de su caja de línea de lo que lo coloca
     XD, y sin ese ajuste el último subnivel se pega al filete. */
  padding:28px 0 11px;
  font-size:var(--t-16);font-weight:400;line-height:1.1;
  color:var(--ink);text-decoration:none;
}
.filtros__gt b{font-weight:700}
.filtros__gt:hover{color:var(--orange)}
/* Iconos en línea con fill="currentColor": las máscaras CSS de esta barra no
   se pintaban en el Chrome del cliente y no hemos podido reproducir el
   motivo, así que aquí se elimina la dependencia entera. */
.filtros__ico{flex:none;width:33px;height:33px;color:var(--orange)}

/* Subniveles: sangrados a la altura del rótulo del grupo (44px), 14px Light
   en tinta y 36 de paso —18 de interlínea más 18 de aire, así los de dos
   líneas ocupan 54. El seleccionado va en Bold naranja. */
.filtros__sub{padding-left:44px;padding-bottom:3px}
.filtros__sub a{
  /* El aire va todo debajo, no repartido: en el artboard el renglón arranca
     a ras del alto del ítem y deja 18px hasta el siguiente. Así uno de una
     línea ocupa 36 y uno de dos, 54. */
  display:block;padding:0 0 18px;
  font-size:var(--t-14);font-weight:300;line-height:18px;
  color:var(--ink);text-decoration:none;
  transition:color .18s ease;
}
.filtros__sub a:hover{color:var(--orange)}
.filtros__sub a[aria-current]{font-weight:700;color:var(--orange)}

/* ---------- Rejilla de productos ---------------------------------------
   Columnas 5 a 12 (792px a 1440). Tres fichas de 230 con 51 de separación:
   230*3 + 51*2 = 792 exacto. */
/* Aviso cuando ningún producto responde al filtro. */
.fichas__vacio{
  grid-column:1/-1;font-size:var(--t-16);font-weight:300;color:#5c666d;
  padding:2rem 0;
}
.fichas__vacio[hidden]{display:none}
/* Filtro activo en el menú lateral y migas navegables. */
.filtros a[aria-current="page"]{font-weight:700;color:var(--orange)}

.fichas{
  grid-column:5/-1;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:60px 51px;
}
/* El atributo hidden oculta con display:none, pero cualquier regla de clase
   le gana en especificidad: sin esto el filtro marcaba las fichas y seguían
   viéndose las 29. */
.ficha[hidden]{display:none}
.ficha{
  position:relative;display:block;
  aspect-ratio:1;
  background:#f5f5f5;border-radius:12px;
  padding:13px 11px;
  color:var(--ink);text-decoration:none;
  transition:background .18s ease;
}
.ficha:hover{background:#ededed}
/* 16px en Light, medido sobre la fuente incrustada del PDF. */
.ficha__t{
  font-size:var(--t-16);font-weight:300;line-height:1.25;
  position:relative;z-index:1;max-width:14ch;
}
/* La fotografía ocupa la ficha entera y el rótulo va encima: los bodegones
   vienen con aire de sobra en la esquina superior izquierda. */
.ficha__img{
  position:absolute;inset:11px;
  display:grid;place-items:center;
}
/* El bodegón ocupa el 85% de la caja de la ficha: deja aire alrededor y las
   fotografías se ven a un tamaño parejo entre sí. Solo aquí; dentro de la
   ventana de producto la imagen sigue a tamaño completo. */
/* Caja del 85%. El tamaño va en el <picture>, que es quien ocupa la casilla:
   puesto en la <img>, el alto en porcentaje se resolvía contra la altura
   automática del <picture> y se ignoraba, y alguna se iba al 88%. */
.ficha__img picture{display:block;width:85%;height:85%}
.ficha__img img{width:100%;height:100%;object-fit:contain}
/* Hueco mientras no haya fotografía cargada desde el gestor. */
.ficha__img:empty::after{
  content:"";width:60%;aspect-ratio:1;border-radius:8px;
  background:repeating-linear-gradient(45deg,#ececec 0 8px,#f5f5f5 8px 16px);
}
.ficha__mas{
  position:absolute;right:10px;bottom:9px;width:20px;height:20px;
  color:#707070;transition:color .18s ease;
}
.ficha:hover .ficha__mas{color:var(--orange)}
.ficha__mas::before,.ficha__mas::after{
  content:"";position:absolute;background:currentColor;
}
.ficha__mas::before{left:0;top:50%;width:100%;height:1px;translate:0 -50%}
.ficha__mas::after {top:0;left:50%;height:100%;width:1px;translate:-50% 0}

@media (max-width:1100px){
  .filtros{grid-column:1/-1;margin-bottom:var(--s-4)}
  .fichas{grid-column:1/-1}
  .cab__t,.cab__d{grid-column:1/-1}
  .cab__t{margin-bottom:var(--s-3)}
  .cab{min-height:0;padding-top:9rem}
  .lienzo{margin-top:0;border-top-right-radius:var(--radio-cab)}
}
@media (max-width:760px){
  .fichas{grid-template-columns:repeat(2,1fr);gap:24px 16px}
}


/* ---------- Ventana de producto ----------------------------------------
   Cotas tomadas del SVG entregado, renderizado y medido (no deducidas):
     caja 602x406 radio 15 · aspa 14,1 en (571,4 / 14)
     filete alto en y=41,8 · filete bajo en y=94,5, ambos de 19,5 a 585,5
     icono 34x34 en (21 / 53,5) · «Técnica» a 18px desde x=64
     tipología 14 Bold naranja alineada a la derecha, interlínea 16
     rótulo 20 Regular con la tinta en y=121
     logotipo de marca 113,4x25,5 con su base en 151,6
     listado 14 Light desde y=177, interlínea 18
     fotografía 331x331 en (264 / 75), a ras del fondo de la caja
     botón 123x30 radio 15 en (27 / 337)
   El aire lateral es asimétrico: 19 a la izquierda, 16,5 a la derecha. */
/* Con position:absolute la ventana se coloca en coordenadas del documento:
   el JS la sitúa a la altura de la ficha pulsada y acompaña al scroll. Sin
   esto, el <dialog> modal se iba al principio de la página. */
.pop{
  position:absolute;margin:0;
  width:602px;max-width:calc(100% - 2rem);height:406px;
  padding:14px 16.5px 0 19px;
  border:0;border-radius:15px;
  background:var(--paper);color:var(--ink);
  overflow:visible;
}
/* El flex solo cuando está abierta: si no, pisa el display:none que el
   navegador da a un <dialog> cerrado y la caja ocupa sitio en el flujo
   (empujaba el pie 404px hacia abajo). */
.pop[open]{display:flex;flex-direction:column}
.pop::backdrop{background:rgb(0 0 0 / .36)}
/* El contenido de cada ficha se clona dentro de .pop__in; sin esto la caja
   no propaga su altura y el botón no llega al fondo. */
.pop__in{display:flex;flex-direction:column;flex:1;min-height:0}

.pop__x{
  /* position:relative es lo que faltaba: sin él las dos rayas del aspa se
     posicionaban contra .pop y medían los 602 de la ventana entera. */
  position:relative;
  display:block;margin-left:auto;flex:none;
  width:14.1px;height:14.1px;padding:0;border:0;background:none;cursor:pointer;
  color:#707070;transition:color .18s ease;
}
.pop__x:hover{color:var(--ink)}
.pop__x::before,.pop__x::after{
  content:"";position:absolute;top:50%;left:0;width:100%;height:1px;
  background:currentColor;
}
.pop__x::before{rotate:45deg}
.pop__x::after{rotate:-45deg}

/* Cabecera entre los dos filetes: técnica a la izquierda, tipología a la
   derecha. 13,7px separan el aspa del filete alto. */
.pop__cab{
  flex:none;margin-top:13.7px;height:52.7px;padding-top:4.7px;   /* icono en y=53,5 */
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.pop__tec{
  display:flex;align-items:center;gap:9px;
  font-size:1.125rem;font-weight:400;line-height:18px;color:var(--ink);
}
.pop__tec b{font-weight:700}
.pop__ico{flex:none;width:34px;height:34px;margin-left:2px;color:var(--orange)}   /* x=21 */
.pop__tip{
  font-size:var(--t-14);font-weight:700;line-height:16px;
  color:var(--orange);text-align:right;max-width:20ch;
}

/* Cuerpo: 311,5px hasta el fondo de la caja. */
.pop__cuerpo{position:relative;flex:1;min-height:0}
.pop__t{
  font-size:1.25rem;font-weight:400;line-height:22px;
  padding-top:22px;max-width:14ch;                 /* tinta del rótulo en 121 */
}
.pop__l{margin-top:34.5px;max-width:22ch;position:relative;z-index:1}
.pop__l li{
  font-size:var(--t-14);font-weight:300;line-height:18px;
  padding-left:.55em;text-indent:-.55em;
}
.pop__l li::before{content:"\00b7  "}

/* La fotografía sale del cuerpo y se apoya en el borde inferior de la caja. */
.pop__img{
  position:absolute;right:-9.5px;top:-19.5px;
  width:331px;height:331px;display:grid;place-items:center;pointer-events:none;
}
.pop__img img{max-width:100%;max-height:100%;width:auto;height:auto}
.pop__img:empty::after{
  content:"";width:52%;aspect-ratio:1;border-radius:10px;
  background:repeating-linear-gradient(45deg,#ececec 0 8px,#f5f5f5 8px 16px);
}
/* Logotipo de la marca distribuida, alineado al margen derecho del filete. */
.pop__marca{position:absolute;right:0;top:31.6px;height:25.5px;width:auto;z-index:1}

.pop__cuerpo .btn{
  position:absolute;left:8px;bottom:39px;
  height:30px;width:auto;padding:0 23px 0 12px;justify-content:flex-start;
}

@media (max-width:760px){
  .pop{width:auto;height:auto;padding:12px 16px 16px}
  .pop__cab{height:auto;padding:12px 0;flex-wrap:wrap}
  .pop__tip{text-align:left;max-width:none}
  .pop__cuerpo{min-height:0;padding-bottom:0}
  .pop__img{position:static;width:auto;height:180px;margin:1rem 0}
  .pop__cuerpo .btn{position:static;margin-top:1.5rem}
  .pop__marca{position:static;display:block;margin:0 0 1rem auto}
  .pop__t,.pop__l{max-width:none}
}

/* La ficha abierta cambia el «+» por un círculo naranja con un «−». */
.ficha--abierta .ficha__mas{
  width:35px;height:35px;right:10px;bottom:11px;
  background:var(--orange);border-radius:50%;color:var(--paper);
}
.ficha--abierta .ficha__mas::after{display:none}
.ficha--abierta .ficha__mas::before{left:25%;width:50%;height:1.5px}


/* =========================================================================
   MARCAS  ·  plantilla de marca
   Medidas de BULTZ_-_MARCAS__Stabilus__DESPLEGADO.pdf (1440x3902, 1:1).
   ========================================================================= */

/* ---------- Hero de marca (fondo blanco) ------------------------------- */
/* El fondo del hero es una lámina de 1440x809 a sangre: fotografía muy
   desaturada que ocupa la mitad inferior con una diagonal, dejando limpia la
   zona del logo y el claim. Va tras el contenido y no se repite; en pantallas
   más anchas se estira a cover manteniendo el encuadre. */
.mhero{
  padding-top:167px;
  background:url("../img/fondo-marca.svg") top center / cover no-repeat;
}
.mhero__logo{height:37px;width:auto;display:block;margin-bottom:64px}   /* claim en y=268 */
.mhero__claim{font-size:var(--t-40);font-weight:300;line-height:45px;color:var(--ink);margin-bottom:31px}   /* párrafo en y=344 */
.mhero__txt{grid-column:1/6}
/* SVG entregado: caja de 486 —columnas 1 a 5 exactas— con cuerpo 16 e
   interlínea de 20. El .body genérico va a 14/1,29, así que aquí se pisa. */
.mhero__txt .body{font-size:var(--t-16);line-height:20px;max-width:none}
.mhero__txt .body + .body{margin-top:20px}   /* la línea en blanco del SVG */
.mhero__img{grid-column:7/-1;align-self:start;min-height:280px;
  display:grid;place-items:center}
.mhero__img:empty::after{content:"";width:70%;aspect-ratio:527/227;border-radius:12px;
  background:repeating-linear-gradient(45deg,#ececec 0 8px,#f5f5f5 8px 16px)}
.mhero__img img{max-width:100%;height:auto}
/* En flex el margen vertical sí empuja; en inline-flex la línea lo ignora
   y el botón flotaba pegado al texto. 31px dejan la pastilla en y=595.
   Composición del SVG entregado: 175x35, rótulo Bold 14 en blanco entrando a
   21px, y galón de 7,3x15 EN TINTA —no blanco— a 10px del canto derecho. */
.mhero .btn{
  display:flex;width:175px;align-items:center;gap:0;
  padding:0 0 0 21px;margin-top:31px;height:35px;
}
/* El galón se ancla al borde con margen automático: inmune al gap heredado
   de .btn y al ancho que ocupe el rótulo. 9,7px medidos en el SVG entregado
   (borde de 1px incluido). */
.btn__fl{flex:none;width:7.284px;height:15px;color:var(--ink);margin-left:auto;margin-right:8.7px}

/* Pestaña de distribuidor oficial, según el SVG entregado: 252,4x51,7 en
   blanco SIN filete, radios solo arriba (5 a la izquierda, 26 a la derecha)
   y base recta que asienta a ras sobre la banda oscura. Rótulo a 12 Bold
   naranja con el ámbito debajo a 14 Light en tinta, entrando a 10px, y el
   escudo naranja a la derecha con 12 de margen. */
.mbadge{
  position:relative;z-index:1;margin:85px 0 0;
  display:inline-flex;align-items:center;justify-content:space-between;
  min-width:252.378px;height:51.696px;
  padding:0 12px 0 10px;background:var(--paper);
  border:0;border-radius:5px 26px 0 0;
}
.mbadge__ico{flex:none;width:30.6px;height:34.3px;color:#ff5700}
.mbadge__tx b{display:block;font-size:var(--t-12);line-height:14px;font-weight:700;color:var(--orange)}
.mbadge__tx > span{display:block;font-size:var(--t-14);line-height:17px;font-weight:300;color:var(--ink);margin-top:2px}

/* ---------- Banda de destacados (tinta) -------------------------------- */
.mdest{
  background:var(--ink);color:var(--paper);
  padding:43px 0 97px;                    /* icono + 12 dejan el rótulo en 851; el 97 lleva el cierre a 1354 */
  border-bottom-left-radius:var(--radio); /* medido: curva solo abajo-izda */
}
.mdest .grid{row-gap:2.5rem}
/* Escritorio: los textos ocupan la primera fila y las fotos la segunda,
   aunque en el marcado vayan emparejados. */
.mdest__it{grid-column:span 3;grid-row:1}
/* Iconos entregados: ~29px de alto, en blanco sobre la tinta. */
.mdest__ico{height:29px;width:auto;color:var(--paper);margin-bottom:12px;display:block}
.mdest__t{font-size:var(--t-16);font-weight:700;color:var(--orange);margin-bottom:1.25rem}
.mdest__d{font-size:var(--t-14);font-weight:300;line-height:18px}
.mdest__d b{font-weight:500}
.mdest__foto{grid-column:span 3;grid-row:2;border-radius:12px;overflow:hidden;aspect-ratio:283/200;
  background:rgb(255 255 255 / .08)}
.mdest__foto img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Productos y soluciones ------------------------------------- */
.mprod{padding-top:100px}
/* Medido en el artboard: rótulo desde 121, párrafo de 526 a 910 —columnas 5
   a 8, no 4 a 7— y la técnica alineada al canto derecho con el icono de 60
   DESPUÉS del texto, no delante. */
.mprod__t{grid-column:1/5;font-size:1.875rem;font-weight:500;color:var(--orange)}
.mprod__d{grid-column:5/9;font-size:var(--t-14);font-weight:300;line-height:18px}
.mprod__d b{font-weight:500}
.mprod__tec{
  grid-column:9/-1;justify-self:end;
  display:flex;align-items:center;gap:18px;text-align:right;
  font-size:var(--t-25);font-weight:300;line-height:1.1;color:var(--ink);
}
.mprod__tec b{font-weight:500}
.mprod__tec .filtros__ico{width:60px;height:60px}

/* Cabecera de subcategoría: filete naranja y rótulo a 22 Bold. */
.msub{grid-column:1/-1;margin-top:5rem;border-top:1px solid var(--orange);padding-top:1.5rem}
.msub__t{font-size:1.375rem;font-weight:700;color:var(--orange)}

/* ---------- Tarjetas de producto --------------------------------------- */
/* Las tres tarjetas de cada fila comparten cinco filas —logotipo, imagen,
   descripción, «Ampliar detalles» y detalle— para que los filetes y los
   botones queden alineados aunque los textos tengan distinto largo.
   Igual criterio que las tablas de la home: subgrid, no alturas a ojo. */
.pgrid{
  grid-column:1/-1;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:60px 24px;margin-top:3rem;
}
@supports (grid-template-rows:subgrid){
  .pcard{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0}
}
.pcard__logo{min-height:26px;display:flex;align-items:center;margin-bottom:1rem}
.pcard__logo img{max-height:22px;width:auto}
.pcard__t{font-size:var(--t-16);font-weight:700;letter-spacing:.06em;color:var(--ink)}
.pcard__img{
  aspect-ratio:384/208;border-radius:12px;background:#f5f5f5;
  display:grid;place-items:center;margin-bottom:1.5rem;
}
.pcard__img:empty::after{content:"";width:55%;height:55%;border-radius:8px;
  background:repeating-linear-gradient(45deg,#ececec 0 8px,#f5f5f5 8px 16px)}
.pcard__img img{max-width:88%;max-height:88%;object-fit:contain}
.pcard__d{font-size:var(--t-14);font-weight:300;line-height:18px}
.pcard__d b{font-weight:700}

/* Ampliar/Reducir detalles. Cotas del SVG entregado, renderizado y medido:
   caja de 384x30,5 con filete ARRIBA Y ABAJO en tinta —no uno solo en
   naranja, como yo tenía—, rótulo 14 Medium naranja con la línea base en
   21,1, y el signo de 12x12 en naranja pegado al canto derecho.
   El SVG los da a 0,5px; a petición del cliente van a 1px. */
.pcard__amp{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:100%;height:30.5px;padding:0;
  background:none;border:0;
  cursor:pointer;text-align:left;
  font:500 var(--t-14)/18px var(--f);color:var(--orange);
}
/* Los filetes van en el envoltorio, no en el botón: al desplegar, el de
   abajo baja hasta el fondo del contenido y el detalle queda entre los dos.
   Fondo transparente: la barra no lleva relleno gris. */
.pcard__caja{
  /* align-self:start es lo que evita que la caja se estire con la fila: al
     desplegar una, las otras dos conservan su alto y su filete de abajo se
     queda donde estaba. Los de arriba siguen alineados porque la fila
     empieza a la misma altura en las tres. */
  align-self:start;
  margin-top:1.5rem;background:none;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
}
.pcard__amp[aria-expanded="true"]{font-weight:700}
.pcard__amp .r{display:none}
.pcard__amp[aria-expanded="true"] .a{display:none}
.pcard__amp[aria-expanded="true"] .r{display:inline}
.pcard__mas{position:relative;flex:none;width:12px;height:12px}
.pcard__mas::before,.pcard__mas::after{content:"";position:absolute;background:currentColor}
.pcard__mas::before{left:0;top:50%;width:100%;height:1px;translate:0 -50%}
.pcard__mas::after{top:0;left:50%;height:100%;width:1px;translate:-50% 0}
.pcard__amp[aria-expanded="true"] .pcard__mas::after{display:none}

.pcard__det{padding-top:43px;padding-bottom:1.5rem}   /* «Reducir detalles» en 2138, primer rótulo en 2181 */
.pcard__det[hidden]{display:none}
.pcard__det h4{font-size:var(--t-12);font-weight:700;margin-bottom:4px}
.pcard__det p,.pcard__det li{font-size:var(--t-12);font-weight:300;line-height:16px}
/* El artboard deja 16px entre el fin de un bloque y el siguiente rótulo
   (última línea en 2213+16, rótulo en 2245), no los 32 que yo tenía. */
.pcard__det p + h4,.pcard__det ul + h4{margin-top:16px}
.pcard__det li{padding-left:.8em;text-indent:-.8em}
.pcard__det li::before{content:"• "}
.pcard__enlaces{margin-top:16px;display:grid;gap:9px}   /* enlaces con paso de 25 */
.pcard__enlaces a{
  font-size:var(--t-12);font-weight:500;color:var(--orange);
  text-decoration:underline;text-underline-offset:3px;width:max-content;
}
.pcard__enlaces a:hover{color:var(--ink)}
/* Marcador para las fichas cuyo detalle todavía no existe: mismo rayado que
   los huecos de fotografía, para que se distinga de un fallo. */
.pcard__hueco{height:96px;border-radius:8px;
  background:repeating-linear-gradient(45deg,#ececec 0 8px,#f5f5f5 8px 16px)}

/* ---------- CTA de ayuda ----------------------------------------------- */
/* En marcas el CTA cuelga de la rejilla de productos; en sectores va pegado
   al último bloque, así que el aire lo pone la sección que lo precede. */
.mcta{padding:100px 0 60px}
/* La caja del CTA acaba en 4275 y el pie arranca en 4341: 65px de blanco
   entre medias, no pegados como yo los tenía. */
.sec + .mcta{padding:0 0 65px}
/* En sectores el pie arranca justo donde acaba la caja del CTA (4341): el
   lienzo no añade aire por abajo. */
.lienzo--pegado{padding-bottom:0}
/* En capacidades la banda mide 793 y el lienzo sigue subiendo a 400. */
.lienzo--alto{margin-top:-393px}
.mcta__caja{
  width:min(1277px,100% - 2rem);margin-inline:auto;min-height:342px;
  /* Filigrana del imagotipo sobre el naranja. El original venía como PNG de
     1920x4131 dentro de un SVG de 142 KB, con un patrón que recorta la franja
     y=1065..1407; recortada y en WebP se queda en 6 KB. Blanco con alfa hasta
     el 14%: se nota, no se lee. */
  background-color:var(--orange);
  background-image:image-set(url("../img/textura-cta.webp") 1x,
                             url("../img/textura-cta-2x.webp") 2x);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  color:var(--paper);border-radius:20px;
  padding:46px 39px;
  display:grid;grid-template-columns:1fr 1fr;gap:3rem;
}
.mcta__t{font-size:var(--t-40);font-weight:300;line-height:1.125}
.mcta__t b{font-weight:700}
.mcta__txt{font-size:var(--t-14);font-weight:300;line-height:18px;align-self:start}
.mcta__txt b{font-weight:700}
.mcta__txt p + p{margin-top:1.5rem}
.mcta__btns{display:flex;gap:24px;justify-content:flex-start;margin-top:2.5rem;flex-wrap:wrap}
.mcta__btns .btn{background:var(--paper);color:var(--orange);border-color:var(--paper)}
.mcta__btns .btn:hover,.mcta__btns .btn:focus-visible{background:transparent;color:var(--paper)}
/* «¡Contáctenos!» va al revés que su compañero: en línea de reposo y relleno
   al pasar por encima. Necesita esta especificidad para ganarle a la regla
   de arriba, que es la que hasta ahora lo dejaba invertido. */
.mcta__btns .btn--linea{background:transparent;color:var(--paper);border-color:var(--paper)}
.mcta__btns .btn--linea:hover,.mcta__btns .btn--linea:focus-visible{
  background:var(--paper);color:var(--orange);border-color:var(--paper);
}

@media (max-width:1100px){
  .mhero{padding-top:9.5rem}
  .mhero__txt,.mhero__img,.mprod__t,.mprod__d,.mprod__tec{grid-column:1/-1}
  .mprod__tec{justify-self:start;margin-top:1.5rem}
  /* Al estrecharse se sueltan las filas y manda el orden del marcado: cada
     texto con su foto justo debajo. */
  .mdest__it,.mdest__foto{grid-column:span 6;grid-row:auto}
  .pgrid{grid-template-columns:1fr 1fr}
  .mcta__caja{grid-template-columns:1fr}
}
@media (max-width:760px){
  .mdest__it,.mdest__foto{grid-column:1/-1;grid-row:auto}
  .pgrid{grid-template-columns:1fr}
  .pcard__d{min-height:0}
}


/* =========================================================================
   LEGALES  ·  aviso legal, privacidad y cookies
   Sin artboard: se resuelven con la retícula y la tipografía del sitio.
   Cabecera blanca desde arriba (no hay banda de color, así que el JS deja el
   header en «pinned» por sí solo) y una sola columna de lectura de 8 módulos,
   que a 16/26 deja unos 70 caracteres por línea.
   ========================================================================= */
.lg{padding:200px 0 120px}
.lg__t{grid-column:1/-1;font-size:var(--t-40);font-weight:300;color:var(--ink);
  padding-bottom:1.5rem;border-bottom:1px solid var(--orange);margin-bottom:3.5rem}
.lg__c{grid-column:1/9;font-size:var(--t-16);font-weight:300;line-height:26px;color:var(--ink)}
.lg__c h2{font-size:1.375rem;font-weight:700;color:var(--orange);
  margin:3rem 0 1rem;line-height:1.2}
.lg__c h2:first-child{margin-top:0}
.lg__c h3{font-size:var(--t-16);font-weight:700;margin:1.75rem 0 .5rem}
.lg__c p + p{margin-top:1rem}
.lg__c a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.lg__c a:hover{color:var(--ink)}
.lg__c b{font-weight:700}
.lg__l{margin:1rem 0}
.lg__l li{padding-left:1em;text-indent:-1em}
.lg__l li + li{margin-top:.35rem}
.lg__l li::before{content:"\00b7  ";color:var(--orange);font-weight:700}
.lg__fecha{font-size:var(--t-14);color:#5c666d}
/* Cuadro resumen de protección de datos: rótulo y contenido en dos columnas. */
.lg__dl{display:grid;grid-template-columns:auto 1fr;gap:.75rem 1.5rem;
  margin:1.5rem 0;padding:1.5rem 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.lg__dl dt{font-weight:700;color:var(--orange)}
.lg__dl dd{margin:0}

@media (max-width:1100px){
  .lg{padding:9.5rem 0 5rem}
  .lg__c{grid-column:1/-1}
}
@media (max-width:600px){
  .lg__dl{grid-template-columns:1fr;gap:.25rem}
  .lg__dl dd + dt{margin-top:1rem}
}


/* =========================================================================
   SECTORES
   Medidas del artboard (1440x4691): banda de 582 en tinta con el lienzo
   blanco subiendo a 400 —mismo recurso que el catálogo, otro color—; siete
   bloques cada 500px que alternan lado; texto en 5 columnas y fotografía en
   6 (589x401), separados por una columna entera.
   ========================================================================= */
/* Cabecera de sectores: banda en tinta con la filigrana del imagotipo. El
   artboard la lleva a un 7% de blanco (la tinta pasa de 27,36,42 a 43,52,57
   en las zonas cubiertas), así que el recorte se reescaló a ese pico. */
.cab--oscura{
  background-color:var(--ink);
  background-image:image-set(url("../img/textura-hero.webp") 1x,
                             url("../img/textura-hero-2x.webp") 2x);
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
/* SVG entregado: caja de 792 —columnas 5 a 12— a 25/30. El primer énfasis
   va en Bold NARANJA y el segundo en Bold BLANCO; yo tenía los dos iguales. */
.cab--oscura .cab__t,.cab--oscura .cab__d{color:var(--paper)}
.cab--oscura .cab__d{line-height:30px}
.cab--oscura .cab__d b{color:var(--paper)}
.cab--oscura .cab__d .hl{color:var(--orange);font-weight:700}
.cab--oscura .cab__t b{color:var(--orange)}
.cab--oscura .cab__t{color:var(--orange)}

/* El lienzo ya aporta 43px de aire; con 7 más el primer bloque arranca en
   450 y su rótulo cae en 455, como el artboard. Abajo, 49px hasta el CTA. */
/* El lienzo ya aporta 43px de aire; con 7 más el primer bloque arranca en
   450 y su rótulo cae en 455, como el artboard. Abajo, el último bloque no
   reserva sus 500: su contenido acaba en 3850 y la caja del CTA empieza en
   3934. */
.sec{padding:7px 0 84px}
.sec__b:last-child{min-height:0}
.sec__b{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:var(--gutter);width:min(var(--wrap),100% - var(--pad)*2);margin-inline:auto;
  align-items:start;min-height:500px;
}
.sec__b--izq .sec__txt{grid-column:1/6;grid-row:1}
.sec__b--izq .sec__img{grid-column:7/-1;grid-row:1}
.sec__b--dcha .sec__img{grid-column:1/7;grid-row:1}
.sec__b--dcha .sec__txt{grid-column:8/-1;grid-row:1}

/* Ritmo medido contando filas de tinta contra el artboard: rótulo en 455,
   subtítulo en 483, entradilla en 527 y cuerpo en 600. */
.sec__rot{font-size:var(--t-25);font-weight:700;color:var(--orange);line-height:1.1;margin-top:2px}
.sec__sub{font-size:1.125rem;font-weight:300;color:var(--orange);margin-top:-2px}
/* Entradilla: 16 a 18 de interlínea. Los énfasis salen del artboard —Bold en
   tinta, Bold en naranja y Medium— y viajan en el marcado. */
.sec__lead{font-size:var(--t-16);font-weight:500;line-height:18px;color:var(--ink);margin-top:24px}
.sec__lead b{font-weight:700}
.sec__lead em{font-style:normal;font-weight:500}
.sec__lead .hl{color:var(--orange)}
.sec__cuerpo{font-size:var(--t-14);font-weight:300;line-height:18px;color:var(--ink);margin-top:18px}
.sec__cuerpo b{font-weight:700}
.sec__cuerpo em{font-style:normal;font-weight:500}
.sec__cuerpo .hl{color:var(--orange)}
/* SVG entregado: 156x35 radio 17,5, rótulo 14 Bold blanco entrando a 14px y
   galón de 7,3x15 EN TINTA a 14 del canto derecho. (Lo di por inexistente en
   una revisión anterior porque lo busqué en blanco; va en tinta sobre el
   naranja, como el de «Acceder a la web».) */
.sec__txt .btn{
  display:flex;width:156px;align-items:center;margin-top:74px;   /* pastilla en 815 */
  padding:0 0 0 14px;height:35px;
  /* gap:0 y justify-content al inicio: el gap de 20 que trae .btn repartía el
     hueco y el margen automático del galón se quedaba en cero. Mismo tropiezo
     que en el botón de marcas. */
  gap:0;justify-content:flex-start;
}
.sec__txt .btn .btn__fl{margin-left:auto;margin-right:13px}
.sec__img{
  aspect-ratio:589/401;border-radius:12px;overflow:hidden;background:#f5f5f5;
  display:grid;place-items:center;
}
.sec__img:empty::after{
  content:"";width:100%;height:100%;
  background:repeating-linear-gradient(45deg,#ececec 0 10px,#f5f5f5 10px 20px);
}
.sec__img img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:900px){
  .sec__b{min-height:0;margin-bottom:4rem}
  .sec__b--izq .sec__txt,.sec__b--dcha .sec__txt{grid-column:1/-1;grid-row:2}
  .sec__b--izq .sec__img,.sec__b--dcha .sec__img{grid-column:1/-1;grid-row:1;margin-bottom:2rem}
}


/* =========================================================================
   BANNER DE COOKIES
   Réplica del que hoy está publicado en bultz.es: aviso, enlace a la
   política y dos botones —«Solo esenciales» y «Aceptar todas»—. La elección
   se guarda en una cookie propia de un año; mientras no haya elección, el
   aviso vuelve a salir en cada visita.
   ========================================================================= */
.ck{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--ink);color:var(--paper);
  padding:1.25rem 0;
  translate:0 110%;transition:translate .3s ease;
}
.ck[data-abierto="true"]{translate:0 0}
.ck__in{
  width:min(var(--wrap),100% - var(--pad)*2);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
}
.ck__t{font-size:var(--t-14);font-weight:300;line-height:20px;max-width:72ch}
.ck__t a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.ck__t a:hover{color:var(--paper)}
.ck__btns{display:flex;gap:1rem;flex:none}
.ck__btns .btn{height:35px;width:auto;padding:0 21px;justify-content:center}
/* El de «solo esenciales» va vacío; el de aceptar, relleno. */
.ck__btns .btn--ghost{background:transparent;color:var(--paper);border-color:var(--paper)}
.ck__btns .btn--ghost:hover,.ck__btns .btn--ghost:focus-visible{background:var(--paper);color:var(--ink)}
@media (max-width:760px){
  .ck__in{flex-direction:column;align-items:stretch}
  .ck__btns .btn{flex:1}
}


/* Botón «¡Contáctenos!» del CTA. SVG entregado: 153x35 radio 17,5, en línea
   sobre el naranja —fondo transparente, filete y rótulo en blanco— con el
   icono de 19,5 a 9,5 del canto derecho. Al pasar por encima se invierte:
   fondo blanco, rótulo e icono en naranja. Lo tenía justo al revés. */
.btn--linea{
  height:35px;padding:0 9.5px 0 15px;gap:0;
}
.btn--linea .btn__t{margin-right:auto}
.btn__ico{flex:none;width:19.5px;height:19.5px;margin-left:12px}



/* =========================================================================
   CAPACIDADES  ·  medidas del artboard (1440x2233)
   ========================================================================= */
/* Hero con fotografía: misma banda con curva que el resto del sitio, 793 de
   alto en vez de 582, con el lienzo blanco subiendo igualmente a 400. */
/* Hero de capacidades: banda de 793 en tinta con la filigrana del imagotipo,
   el mismo recurso que la cabecera de sectores y la banda del CTA. */
.cab--foto{
  height:793px;padding:0;position:relative;overflow:hidden;
  background-color:var(--ink);
  background-image:image-set(url("../img/textura-hero.webp") 1x,
                             url("../img/textura-hero-2x.webp") 2x);
  background-size:cover;background-position:center;background-repeat:no-repeat;
}

/* Ritmo medido contra el artboard: rótulo en 469, fotografía en 441,
   banda naranja en 900, bloque de cierre en 1440 y pie en 1882. */
.inst{padding:26px 0 0}
.inst__img{margin-top:-28px}
.inst__t{
  grid-column:1/6;font-size:var(--t-40);font-weight:300;line-height:45px;color:var(--orange);
}
.inst__t b{font-weight:700}
.inst__txt{grid-column:1/6;margin-top:43px;font-size:var(--t-14);font-weight:300;line-height:18px}
.inst__txt p + p{margin-top:18px}
.inst__lead{font-weight:700}
.inst__lead .hl{color:var(--orange)}
/* Fotografía en columnas 7 a 12, 588x411 con las esquinas redondeadas. */
.inst__img{
  grid-column:7/-1;grid-row:1/3;aspect-ratio:588/411;
  border-radius:12px;overflow:hidden;background:#f5f5f5;
}
.inst__img{position:relative;margin:-28px 0 0}   /* fotografía en 441 */
.inst__d{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.inst__d.is-act{opacity:1}
.inst__img img{width:100%;height:100%;object-fit:cover;display:block}
/* Puntos del carrusel, abajo a la derecha como en el artboard. */
.inst__nav{position:absolute;right:18px;bottom:16px;display:flex;gap:8px;z-index:1}
.inst__pt{
  width:8px;height:8px;padding:0;border:0;border-radius:50%;
  background:rgb(255 255 255 / .55);cursor:pointer;transition:background .2s ease;
}
.inst__pt:hover{background:var(--paper)}

/* Banda naranja de las cuatro capacidades, con la filigrana del imagotipo y
   la curva arriba a la izquierda, como el resto de bandas del sitio. */
.caps{
  margin-top:48px;padding:83px 0 140px;   /* banda 900-1353 */
  background-color:var(--orange);
  background-image:image-set(url("../img/textura-hero.webp") 1x,
                             url("../img/textura-hero-2x.webp") 2x);
  background-size:cover;background-position:center;
  border-top-left-radius:137px;
  color:var(--paper);
}
.caps .grid{row-gap:0}
.caps__b{grid-column:span 3}
/* Los cuatro iconos tienen altos distintos (71, 62, 62 y 70) y en el artboard
   se apoyan en la misma línea: la caja los alinea por abajo. */
.caps__icoc{display:flex;align-items:flex-end;height:71px;margin-bottom:37px}
/* El alto va por estilo, no por atributo: la regla global img{height:auto}
   del reinicio le gana al atributo height. */
.caps__ico{display:block;width:auto;height:var(--alto);color:var(--paper)}
.caps__rot{font-size:var(--t-16);font-weight:700;line-height:1.2}
.caps__txt{margin-top:13px;font-size:var(--t-14);font-weight:300;line-height:18px}

/* Bloque de cierre con fotografía de fondo. El texto va sobre blanco a la
   izquierda; la fotografía asoma por la derecha. */
/* Fotografía de fondo del banner, la misma en capacidades y en contacto. El
   texto va sobre la parte clara de la izquierda, que es donde la imagen viene
   quemada a propósito. */
.prov{
  position:relative;margin-top:-93px;padding:180px 0 0;   /* fotografía desde 1262 */
  min-height:622px;
  background-color:#eef2f4;
  background-image:image-set(url("../img/banner-equipo-1920.avif") type("image/avif"),
                             url("../img/banner-equipo-1920.webp") type("image/webp"),
                             url("../img/banner-equipo-1920.jpg") type("image/jpeg"));
  background-size:cover;background-position:center right;background-repeat:no-repeat;
}
.prov .grid{position:relative}
.prov__txt{grid-column:1/6}
.prov__t{font-size:var(--t-40);font-weight:300;line-height:45px;color:var(--orange)}
.prov__t b{font-weight:700}
.prov__txt p{margin-top:37px;font-size:var(--t-14);font-weight:300;line-height:18px;color:var(--ink)}
.prov__txt p b{font-weight:700}
.prov__btn{margin-top:91px}   /* banner en 1757 */
/* Banner «Habla con nuestro equipo»: 221x30, relleno naranja, rótulo blanco
   a 15 del canto y el icono de conversación a la derecha. */
.btn--equipo{
  height:30px;padding:0 12px 0 15px;gap:0;font-size:var(--t-14);
}
.btn--equipo .btn__t{margin-right:auto}
.btn--equipo::after{content:none}
.btn--equipo .btn__ico{width:16px;height:16px;margin-left:14px}


/* =========================================================================
   CONTACTO  ·  medidas del artboard (1440x1709)
   ========================================================================= */
.cerca{padding:173px 0 0}
.cerca__txt{grid-column:1/5}
.cerca__t{font-size:var(--t-40);font-weight:300;line-height:45px;color:var(--orange)}
.cerca__t b{font-weight:700}
.cerca__txt p{margin-top:47px;font-size:var(--t-14);font-weight:300;line-height:18px}
.cerca__txt p b{font-weight:700}
.cerca__cierre{margin-top:18px}
/* El mapa desborda la retícula por la derecha, hasta 1390 en el artboard. */
/* El mapa desborda la retícula por la derecha: 658-1390 en el artboard. */
.cerca__mapa{grid-column:6/-1;grid-row:1;margin:-53px -50px 0 0;justify-self:end;max-width:none;width:748px}
.cerca__mapa img{width:100%;height:auto;display:block}

/* Seis delegaciones: dos columnas de la retícula cada una, con filete arriba
   y abajo. Rótulo 10 Bold naranja y datos 10 Light con interlínea 14. */
.dele{padding:86px 0 0}   /* primer filete en 670, el de abajo en 793 */
.dele .grid{row-gap:0}
.dele__b{
  grid-column:span 2;padding:15px 0 0;min-height:123px;
  border-top:1px solid var(--orange);border-bottom:1px solid var(--orange);
}
.dele__rot{font-size:.625rem;font-weight:700;color:var(--orange);line-height:14px}
.dele__d{
  display:flex;flex-direction:column;margin-top:14px;
  font-style:normal;font-size:.625rem;font-weight:300;line-height:14px;color:var(--ink);
}
.dele__d a{color:inherit;text-decoration:none}
.dele__d a:hover{color:var(--orange)}

/* En contacto la fotografía arranca en 740, por debajo de las delegaciones:
   se solapa 53px y la curva blanca del lienzo tapa la esquina. */
.prov--contacto{margin-top:-53px;padding-top:173px;min-height:619px}
.prov--contacto .prov__txt{grid-column:1/5}   /* el rótulo parte en tres */
.prov--contacto .prov__btn{margin-top:78px}   /* banner en 1199 */

@media (max-width:1100px){
  .cab--foto{height:60vh;min-height:420px}
  .inst__t,.inst__txt{grid-column:1/-1}
  .inst__img{grid-column:1/-1;grid-row:auto;margin-top:2rem}
  .caps__b{grid-column:span 6}
  .caps__b:nth-child(n+3){margin-top:3rem}
  .prov__txt,.cerca__txt{grid-column:1/-1}
  .cerca__mapa{grid-column:1/-1;grid-row:auto;margin-top:2.5rem}
  .dele__b{grid-column:span 4}
}
@media (max-width:700px){
  .caps__b{grid-column:1/-1}
  .caps__b + .caps__b{margin-top:3rem}
  .dele__b{grid-column:1/-1}
}