/* =========================================================================
   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;

  /* Alto de la barra fija: 40 de relleno arriba, 40 abajo y 40 del
     logotipo. Lo usa el sticky de los filtros para no quedarse debajo. */
  --hdr-alto:120px;
}

/* ---------- 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)}
.t40--naranja{color:var(--orange)}
.t40--blanco{color:var(--paper)}
.t40--oscuro{color:var(--ink)}
.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,strong{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:translate .2s ease,rotate .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[data-dir="-1"]::before{scale:-1 1}
.hero__arrow:hover::before{opacity:.7}
.hero__arrow:hover:not([data-dir="-1"])::before{translate:3px 0}
.hero__arrow[data-dir="-1"]: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:5.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:center;
  padding-bottom:0}
.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}
  /* En una sola columna todo el pie arranca en el mismo margen. El isotipo
     se quedaba a media calle: .ft__top conserva el align-items:flex-end del
     diseño a 1440 y, al encoger la caja hasta el ancho del claim, empujaba
     el símbolo al extremo derecho de ese texto en vez de al de la página. */
  .ft__end .ft__top{align-items:flex-start}
  .ft__end .ft__ico{margin-left:0}
  .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)}

  /* Pie en una sola columna: los tres módulos pedían más separación, y el
     del catálogo algo más todavía. La imagen y su botón forman un bloque
     alto que sin aire se pegaba a la dirección de arriba y al claim de
     abajo. Va aquí y no en el bloque de 1100 porque a esa anchura el pie
     todavía va a dos columnas y el margen descuadraría la fila. */
  .ft .grid{row-gap:3rem}
  .ft__mid{margin-block:var(--s-2)}

  /* Menú: panel a pantalla completa */
  .hdr__burger{display:flex}
  /* El isotipo no va en la versión móvil. Con él fuera, el logotipo recupera
     sus 40px: la fila pide 178,6 + 40 de la hamburguesa y entra de sobra
     hasta los 320px de ancho, así que ya no hace falta encogerla. */
  .hdr__ico{display:none}
  .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.
   Breakpoint alineado con la hamburguesa (760px): antes estaba a 1100px y
   entre 760 y 1100 las marcas se desplegaban sueltas sobre la barra. */
@media (max-width:760px){
  .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}
  /* En escritorio el panel es una capa centrada bajo el rótulo, y para eso
     se desplaza media anchura a la izquierda con translate:-50%. Ese
     translate se repite en la regla de :hover y :focus-within, que no está
     dentro de ninguna consulta de medios y pesa más (0,3,0) que cualquier
     .nav .nav__panel (0,2,0). Al pulsar MARCAS en el móvil, el grupo recibe
     el foco, la regla entra, y el panel —que ya venía a ancho completo— se
     iba media pantalla a la izquierda: por eso las marcas acababan hacia el
     centro por mucho que se corrigiera el ancho. Se anula con la misma
     especificidad y más abajo en el archivo. */
  .nav__grupo:hover .nav__panel,
  .nav__grupo:focus-within .nav__panel{translate:none}
}


/* ---------- Menú de móvil ----------------------------------------------
   Va después del bloque de 1100 a propósito: las consultas de medios no
   suman especificidad, así que a 360px las dos se cumplen y gana la que
   viene más abajo. Aquí se rehace el panel entero.
   El desplegable de MARCAS nace plegado y se abre al pulsar el rótulo; de
   eso se encarga el JS poniendo data-open en el grupo. En escritorio el
   rótulo sigue funcionando por :hover, que vive en el bloque de arriba. */
@media (max-width:760px){
  /* El panel es fijo y tapa la barra: sin esto el logotipo, la hamburguesa
     y el isotipo quedan por debajo (son estáticos, y un elemento posicionado
     pinta encima) y no había forma de cerrar el menú salvo con Escape. */
  .nav{z-index:1}
  .hdr__logo,.hdr__burger,.hdr__ico{position:relative;z-index:2}
  .hdr[data-menu="abierto"] .hdr__logo,
  .hdr[data-menu="abierto"] .hdr__burger{color:var(--paper)}

  /* Con el panel abierto, el logotipo deja sitio al isotipo en naranja. El
     order:-1 lo devuelve a la izquierda: en el marcado va detrás del menú,
     y sin él el space-between lo mandaría al lado del aspa.
     El !important le gana al estado «naranja» de la barra, que en soluciones
     pinta el isotipo en blanco y aquí lo dejaría invisible. */
  .hdr[data-menu="abierto"] .hdr__logo{display:none}
  .hdr[data-menu="abierto"] .hdr__ico{display:block;order:-1;color:var(--orange)!important}

  /* Hamburguesa a aspa mientras el panel está abierto. El desplazamiento es
     de 7px: 2 de la barra más 5 del hueco. */
  .hdr__burger[aria-expanded="true"] span:nth-child(1){translate:0 7px;rotate:45deg}
  .hdr__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .hdr__burger[aria-expanded="true"] span:nth-child(3){translate:0 -7px;rotate:-45deg}

  .nav{
    position:fixed;inset:0;background:var(--ink);
    display:flex;flex-direction:column;align-items:flex-end;
    padding:120px var(--pad) var(--s-4);
    /* Con las marcas desplegadas la lista puede pasar del alto de pantalla.
       El centrado se hace con margin:auto en la lista y no con
       justify-content, que dejaría el arranque fuera de alcance. */
    overflow-y:auto;overscroll-behavior:contain;
    translate:0 -100%;transition:translate .3s ease;
  }
  .nav[data-open="true"]{translate:0 0}

  /* Los tres niveles se estiran al ancho de la barra con align-self, no con
     width:100%. El porcentaje se resuelve contra un padre que a su vez se
     ajusta al contenido, y esa cadena deja el panel más estrecho de lo que
     debería; el stretch no depende de nadie. Con eso, el texto a la derecha
     cae en el mismo margen que «Soluciones» o «Contacto». */
  .nav__list{
    flex-direction:column;align-items:flex-end;align-self:stretch;width:100%;
    gap:var(--s-3);margin-block:auto;text-align:right;
  }
  .nav__grupo{
    align-self:stretch;width:100%;
    display:flex;flex-direction:column;align-items:flex-end;
  }

  /* Primer nivel a 28px, frente a los 18 que daba --t-25 en este ancho. */
  .nav > ul > li > a,.nav__tit{
    font-size:1.75rem;font-weight:300;line-height:1.15;
    color:var(--paper)!important;
  }
  .nav > ul > li > a[aria-current="page"]{font-weight:700}
  /* La sección en curso se distingue en naranja, igual que en la barra sobre
     fondo blanco. Los dos !important se anulan entre sí, así que decide la
     especificidad: el atributo le gana al color general del menú. */
  .nav > ul > li > a[aria-current="page"],
  .nav .nav__panel a[aria-current="page"]{color:var(--orange)!important}

  /* Punta que indica que MARCAS abre y cierra. */
  .nav__tit{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer}
  .nav__tit::after{
    content:"";width:9px;height:9px;
    border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
    translate:0 -3px;rotate:45deg;transition:rotate .25s ease,translate .25s ease;
  }
  .nav__grupo[data-open="true"] .nav__tit::after{translate:0 2px;rotate:225deg}

  /* Plegado por omisión. La altura máxima da margen a las nueve marcas sin
     necesidad de medirlas desde el JS.
     Ancho completo y texto a la derecha: así los nueve cantos derechos caen
     en la misma vertical que «Soluciones» o «Contacto». Antes el panel se
     ceñía a su contenido y se quedaba a media calle, sin llegar al margen. */
  .nav .nav__panel{
    /* Se repiten aquí los reajustes que trae el bloque de 1100 para que esta
       regla no dependa del orden del archivo: en escritorio el panel es una
       capa absoluta centrada bajo el rótulo, y cualquier resto de eso lo
       descolocaba. */
    position:static;left:auto;translate:none;margin-inline:0;
    align-self:stretch;width:100%;
    max-height:0;overflow:hidden;padding:0;
    display:flex;flex-direction:column;align-items:stretch;
    transition:max-height .3s ease,padding .3s ease;
  }
  /* 26rem cubre las nueve marcas (~315px). En vh se quedaba corto en
     pantallas bajas y el desplegable salía recortado. */
  .nav__grupo[data-open="true"] .nav__panel{max-height:26rem;padding:.9rem 0 .2rem}

  /* Segundo nivel: 16px en vez de 12, y un blanco rebajado para que se lea
     como dependiente de MARCAS sin recurrir a la sangría. */
  .nav .nav__panel a{
    display:block;align-self:stretch;width:100%;
    padding:.45rem 0;
    font-size:1rem;font-weight:300;letter-spacing:.06em;line-height:1.2;
    text-align:right;color:rgb(255 255 255 / .68)!important;
  }
  .nav .nav__panel a:hover,.nav .nav__panel a:focus-visible{
    font-weight:300;color:var(--paper)!important;
  }
}


/* =========================================================================
   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}
/* Barra que pliega el bloque en móvil. En escritorio no se pinta. */
.filtros__movil{display:none}
.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)}

/* ---------- Acordeón familia → subcategoría (modelo de 4 niveles) -------
   Las familias cuelgan del grupo de categoría; cada una que tenga
   subcategorías se despliega al pulsarla. Mismo sangrado y ritmo que
   .filtros__sub, con las subcategorías un paso más adentro. */
.filtros__fams{padding-left:44px}
.filtros__fam{padding-bottom:18px}
.filtros__famlink{
  display:block;
  font-size:var(--t-14);font-weight:300;line-height:18px;
  color:var(--ink);text-decoration:none;transition:color .18s ease;cursor:pointer;
}
.filtros__famlink:hover{color:var(--orange)}
/* Familia activa (filtrando o desplegada): naranja y negrita. */
.filtros__fam--abierta > .filtros__famlink,
.filtros__famlink[aria-current]{font-weight:700;color:var(--orange)}
/* Subcategorías: un paso más de sangrado, ocultas hasta desplegar. */
.filtros__sub2{padding-left:18px;padding-top:14px}
.filtros__sub2[hidden]{display:none}
.filtros__sub2 li{padding-bottom:14px}
.filtros__sub2 li:last-child{padding-bottom:0}
.filtros__sub2 a{
  display:block;
  font-size:var(--t-14);font-weight:300;line-height:16px;
  color:#5c666d;text-decoration:none;transition:color .18s ease;
}
.filtros__sub2 a:hover{color:var(--orange)}
.filtros__sub2 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)}

/* align-self y align-content en «start» son imprescindibles: sin ellos la
   rejilla se estira a lo alto para igualar al menú lateral y, como las fichas
   son cuadradas (aspect-ratio:1), ese alto les impone el ancho. Al filtrar y
   quedar pocas filas, las fichas pasaban de 230 a 833 y la página desbordaba
   1.691px. Con esto las tres columnas se mantienen y no se rellena el hueco. */
.fichas{
  grid-column:5/-1;align-self:start;min-width:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:max-content;align-content:start;
  gap:60px 51px;
}
.ficha,.ficha > *{min-width:0}
/* 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){
  /* El bloque de filtros se ancla arriba y se pliega ------------------
     Los filtros son un ítem de la retícula, y el bloque de contención de
     un ítem sticky es su celda: pegado ahí solo aguantaría mientras su
     propia fila estuviera a la vista, que no sirve de nada. En una sola
     columna la retícula ya no reparte nada, así que pasa a bloque y los
     filtros quedan sujetos a .lienzo, que sí es tan alto como el catálogo. */
  .lienzo .grid{display:block}
  .filtros{
    position:sticky;top:var(--hdr-alto);z-index:20;
    margin-bottom:var(--s-4);
    background:var(--paper);   /* al desplazarse pasa por encima de las fichas */
  }
  .filtros__movil{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    width:100%;height:58px;padding:0;
    background:none;border:0;border-bottom:1px solid var(--ink);
    font:300 var(--t-20)/1 var(--f);
    color:var(--orange);text-align:left;cursor:pointer;
  }
  .filtros__movil[aria-expanded="true"]{font-weight:500}
  .filtros__movil[aria-expanded="true"] .filtros__flecha{rotate:180deg}
  /* Plegado con un atributo y no con [hidden]: así la regla solo existe
     dentro de esta consulta y al volver a escritorio la lista reaparece
     sola, sin que el JS tenga que deshacer nada. */
  .filtros[data-plegado="true"] .filtros__lista{display:none}
  /* Desplegada puede pasar del alto de pantalla: se desplaza dentro de sí
     misma en vez de empujar el catálogo fuera de alcance. */
  .filtros__lista{
    max-height:calc(100vh - var(--hdr-alto) - 58px - var(--s-4));
    max-height:calc(100dvh - var(--hdr-alto) - 58px - var(--s-4));
    overflow-y:auto;overscroll-behavior:contain;
  }

  .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 dos lineas */
.pop__tip{text-align:right;max-width:none;display:flex;flex-direction:column;gap:2px}
.pop__tip-fam{font-size:var(--t-12);font-weight:700;line-height:14px;color:var(--orange);text-transform:uppercase}
.pop__tip-sub{font-size:.625rem;font-weight:700;line-height:12px;color:var(--ink);text-transform:uppercase}
/* resumen del producto en la columna izquierda (medida del SVG: ~280px de ancho) */
.pop__d{margin-top:12px;max-width:280px;font-size:var(--t-14);font-weight:300;line-height:18px;color:var(--ink);position:relative;z-index:1}

/* 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:0;bottom:0;
  width:226px;height:226px;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[open]{display:block;height:max-content}
  .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__in{flex:none}
  .pop__img{position:static;width:auto;height:auto;margin:1rem 0}
  .pop__cuerpo .pop__img img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
  .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}
  /* pop orden movil */
  /* pop movil pulido */
  .pop__cuerpo{display:flex;flex-direction:column;flex:1;min-height:0;padding-top:1.25rem}
  .pop__marca{order:1;margin:0 auto 1.25rem 0}
  .pop__t{order:2;margin:0 0 .75rem}
  .pop__d{order:3;margin:0 0 1.5rem}
  .pop__img{order:4;margin:0;aspect-ratio:16/10;max-height:220px}
  .pop__cuerpo .btn--mas{order:5;margin-top:1.5rem;margin-bottom:.5rem}
  /* que el pop permita scroll y el botón no se salga */
  .pop{max-height:90vh;overflow-y:auto}

}

/* 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;
}
/* Cuando la marca no muestra el sello de distribuidor, un espaciador ocupa
   su lugar para que el bloque de texto mantenga la misma separación con la
   banda oscura del banner. Misma "presencia" que el sello (85 de margen +
   ~52 de alto). */
.mhero__hueco{display:block;height:51.696px;margin-top:85px}
.mhero__logo{display:grid;place-items:end start;width:340px;height:120px;margin-bottom:64px}
.mhero__logo img,.mhero__logo svg{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}   /* 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)}
/* Las fotos del catálogo son cuadradas y el hueco del bodegón es apaisado
   (527x227). Sin tope, una imagen de 700 llenaría la columna entera y
   estiraría el hero. Con max-height y width:auto conserva su proporción y
   .mhero__img, que ya centra con place-items, la deja donde toca. */
.mhero__img img{max-width:100%;max-height:560px;width:auto;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:var(--t-25);font-weight:700;color:var(--orange);text-transform:uppercase}
/* Subtitulo de subcategoria en la pagina de marca: un escalon por debajo de
   la familia. En tinta, 16 Bold, con aire arriba para separarlo del bloque
   anterior. */
.msub2{grid-column:1/-1;margin-top:2.5rem;margin-bottom:1.5rem;padding-bottom:.75rem;border-bottom:1px solid var(--ink)}
.msub2__t{font-size:var(--t-20);font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.02em}

/* ---------- 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;min-width:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:60px 24px;margin-top:3rem;
}
/* Todo ítem de una retícula nace con min-width:auto, o sea que el carril no
   puede encoger por debajo del contenido mínimo del ítem. Con una sola
   columna eso empujaba la tarjeta más allá del ancho de la página y se
   comía el margen derecho. Poniendo min-width:0 el carril vuelve a mandar y
   es el contenido el que se adapta. Hace falta en los tres niveles: .pgrid
   dentro de .grid, .pcard dentro de .pgrid y los hijos dentro de .pcard. */
.pgrid,.pcard,.pcard > *{min-width:0}
@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:1.125rem;font-weight:700;letter-spacing:.02em;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. */
/* Ampliar detalles como enlace */
.pcard__amp{text-decoration:none}
.pcard__amp:focus,.pcard__amp:focus-visible{outline:none}
.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{position:relative;z-index:1;
  /* 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}
/* El clic sobre el texto o el signo lo recibe siempre el boton */
.pcard__amp .a,.pcard__amp .r,.pcard__amp .pcard__mas{pointer-events:none}
.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:64px;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. */
/* CTA galon fix */
.mcta__btns .btn--linea{background:transparent;color:var(--paper);border-color:var(--paper);height:40px;padding:0 12px 0 15px;gap:10px}
.mcta__btns .btn--linea .btn__fl{margin-left:0;margin-right:0}
.mcta__btns .btn__fl{color:currentColor}
.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;position:relative}
  .mhero__txt,.mhero__img,.mprod__t,.mprod__d,.mprod__tec{grid-column:1/-1}
  /* Apilados, el bodegón baja bajo el texto y la insignia se quedaba a media
     altura del hero, flotando. Su base es recta justamente para asentar
     sobre la banda oscura, así que se saca del flujo y se ancla al pie de la
     sección, pisando el bodegón si hace falta. El left la deja en la misma
     calle que el texto: .mhero no tiene relleno lateral, y el contenido de
     la retícula arranca a --pad del borde mientras el ancho no llega a
     --wrap, que por debajo de 1100 nunca ocurre. */
  .mbadge{position:absolute;left:var(--pad);bottom:0;margin:0}
  /* Aire bajo el bodegón para que la insignia lo pise por el canto y no por
     encima del producto. */
  .mhero .grid{padding-bottom:var(--s-4)}
  .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}
  /* El ancho de la caja iba con «100% - 2rem»: 16px por lado, mientras el
     resto de la página respira a --pad (37 en un móvil grande, 92 aquí). Se
     salía de la calle común. A 1440 se deja como está, que ahí los 1277 del
     artboard son más estrechos que el margen y el problema no existe. */
  .mcta__caja{
    width:min(1277px,100% - var(--pad)*2);
    grid-template-columns:1fr;padding:36px 28px;min-height:0;
  }
  .mcta{padding:64px 0 48px}
  .mprod{padding-top:64px}
  .msub{margin-top:3.5rem}
  .pgrid{margin-top:2rem}
}
@media (max-width:760px){
  .mdest .grid{display:flex;flex-direction:column}
  .mdest__it,.mdest__foto{order:var(--o,0);width:100%}
  .mdest__foto{margin-bottom:2.5rem;aspect-ratio:16/10}
  .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. */
/* overflow-x:clip, no hidden: no crea contenedor de desplazamiento, así que
   no rompe el sticky ni el desplazamiento vertical. Hace falta porque las
   entradas laterales arrancan desplazadas 36px: la columna de la derecha se
   sale del ancho de la página mientras espera a entrar, y sin esto aparece
   una barra horizontal. Mismo motivo por el que .s ya lo llevaba. */
.sec,.cab,.inst,.prov,.cerca,.mhero,.mprod{overflow-x:clip}
.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;text-align:center}
.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;gap:0}
/* 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. */
/* aire galon btn-linea */
.btn--linea{
  height:35px;padding:0 12px 0 15px;gap:10px;
}
.btn--linea .btn__t{margin-right:0}
.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;width:100%;height:100%;opacity:0;transition:opacity .6s ease}
.inst__d picture{display:block;width:100%;height:100%}
.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:4rem}
.caps__b{grid-column:span 4}
/* 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:0;justify-self:end;max-width:100%;width:660px}
.cerca__mapa svg{width:100%;height:auto;display:block}
.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 banda de fotografía arranca en 740, por debajo de las
   delegaciones, pero una forma blanca la tapa hasta 850: eso es lo que deja
   el aire entre las filiales y el banner. Yo tenía el solape sin la máscara,
   así que la fotografía se comía las dos últimas líneas de cada delegación. */
.prov--contacto{margin-top:-53px;padding-top:173px;min-height:619px}
.prov--contacto::after{
  content:"";position:absolute;left:0;right:0;top:0;height:110px;
  background:var(--paper);border-bottom-right-radius:137px;
  pointer-events:none;
}
.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}
  /* El mapa conserva del diseño a 1440 un ancho fijo de 748 y un margen
     derecho negativo de 50, que en una sola columna se salen de la página.
     Al ocupar todo el ancho hay que devolverlo a medidas relativas. */
  .cerca__mapa{grid-column:1/-1;grid-row:auto;margin:2.5rem 0 0;width:100%;max-width:100%}
  .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}
}


/* =========================================================================
   AÑADIDOS PARA EL GESTOR
   Todo lo de aquí abajo existe para que el contenido editable desde el panel
   se pinte igual que el maquetado a mano.
   ========================================================================= */

/* ---------- Pesos de la tipografía en textos editables -------------------
   El diseño ya asignaba peso a <b>, <em> e <i>. Se añade solo el regular,
   que no tenía etiqueta propia, para que el editor pueda ofrecer los cuatro:
   Negrita 700, Media 500, Regular 400 y Fina 300. */
.w4{font-weight:400}

/* ---------- Color del titular del carrusel -------------------------------
   .hero__t ya es naranja de fábrica; estas dos son las otras opciones. */
.hero__t--blanco{color:var(--paper)}
.hero__t--oscuro{color:var(--ink)}
.hero__t--naranja{color:var(--orange)}

/* ---------- Botón configurable desde el panel ----------------------------
   El botón del diseño lleva relleno distinto a cada lado (21px a la
   izquierda y 9 a la derecha) porque sus iconos son flechas que ya traen
   aire propio. Aquí el icono lo sube el gestor y no sabemos cuánto margen
   trae, así que el relleno se iguala: la distancia del canto al texto es la
   misma que del icono al canto. */
.btn--cms{padding:0 1.3125rem;gap:.75rem}
.btn--cms .btn__ico{
  margin-left:0;flex:none;
  width:19.5px;height:19.5px;
  display:inline-flex;align-items:center;justify-content:center;
}
.btn--cms .btn__ico svg,.btn--cms .btn__ico img{
  display:block;max-width:100%;max-height:100%;width:auto;height:auto;
  fill:currentColor;
}

/* ---------- Color de la columna derecha de «Quiénes somos» ---------------
   La entradilla y el cuerpo heredaban el color de la banda. Al poder
   elegirlo desde el panel hacen falta las tres variantes. */
.q--blanco{color:var(--paper)}
.q--naranja{color:var(--orange)}
.q--oscuro{color:var(--ink)}

/* ---------- Iconos de las columnas, ahora subidos desde el panel ---------
   Antes iban incrustados en esta hoja como imagen de máscara, uno por
   clase, así que cambiarlos obligaba a tocar el CSS. Ahora el SVG se pinta
   en línea y toma el color con fill, que es más simple y permite que el
   gestor suba el suyo. Se conserva el hueco de 75x56 del diseño. */
.capa__ico{
  display:flex;align-items:center;justify-content:flex-start;
  width:75px;height:56px;margin-bottom:var(--s-3);
  -webkit-mask-image:none;mask-image:none;background:none;
}
.capa__ico svg,.capa__ico img{max-width:100%;max-height:100%;width:auto;height:auto}
.capa__ico svg{fill:var(--orange)}
.capa__ico svg *{fill:inherit}

/* Cursiva de verdad en los textos editables. El diseño usaba <i> para el
   peso fino, así que la cursiva necesita clase propia. */
.cursiva{font-style:italic}

/* El botón configurable no lleva el icono del diseño en ::after: el suyo lo
   sube el gestor y va dentro, en .btn__ico. Sin esto saldrían los dos. */
/* El botón editable no trae icono del diseño en ::after: o lleva el que
   suba el gestor (dentro, en .btn__ico), o el de defecto que la plantilla
   le pone con la clase --chat cuando no hay ninguno subido. */
.btn--cms::after{content:none}

/* ---------- Iconos de las tarjetas de soluciones, subidos desde el panel -
   Como los de las columnas: antes iban como máscara en el CSS y ahora se
   pintan en línea tomando el color con fill. Se conserva su caja. */
.card__ico{
  display:inline-flex;align-items:center;justify-content:center;
  -webkit-mask-image:none;mask-image:none;background:none;
}
.card__ico svg,.card__ico img{width:100%;height:100%;object-fit:contain}
.card__ico svg{fill:currentColor}
.card__ico svg *{fill:inherit}

/* ---------- Colores editables de la página de contacto -------------------
   La cabecera y el banner permiten elegir color de titular desde el panel. */
.cerca__t--naranja{color:var(--orange)}
.cerca__t--blanco{color:var(--paper)}
.cerca__t--oscuro{color:var(--ink)}
.prov__t--naranja{color:var(--orange)}
.prov__t--blanco{color:var(--paper)}
.prov__t--oscuro{color:var(--ink)}

/* ---------- Colores editables del titular de instalaciones (capacidades) - */
.inst__t--naranja{color:var(--orange)}
.inst__t--blanco{color:var(--paper)}
.inst__t--oscuro{color:var(--ink)}
/* El icono de capacidades puede venir como <span> (SVG en línea) además de
   <img>. Se aplica la misma altura por variable en ambos casos. */
span.caps__ico{display:inline-flex;align-items:center;justify-content:center;height:var(--alto)}
span.caps__ico svg{height:var(--alto);width:auto;display:block}

/* ---------- Colores editables de la página de sectores ------------------- */
.cab__t--naranja{color:var(--orange)}
.cab__t--blanco{color:var(--paper)}
.cab__t--oscuro{color:var(--ink)}
.mcta__t--naranja{color:var(--orange)}
.mcta__t--blanco{color:var(--paper)}
.mcta__t--oscuro{color:var(--ink)}

/* logos de producto */
/* logos de producto (STABILUS): el SVG apaisado se muestra con altura
   fija y ancho automático, alineado a la izquierda como iba el título. */
.pcard__lp,.ficha__lp,.pop__lp{display:inline-block}
.pcard__lp svg{height:22px;width:auto;display:block;color:var(--ink)}
.ficha__lp svg{height:20px;width:auto;display:block;color:var(--ink)}
.pop__lp svg{height:30px;width:auto;display:block;color:var(--ink)}

/* logo gris en capacidades (aunque el header esté over) */
body:has(#main[data-pag="capacidades"]) .hdr[data-state="over"] .hdr__logo{color:var(--ink)}


/* capacidades: sin fondo gris + titulo naranja */
body:has(#main[data-pag="capacidades"]) .s--split{background:transparent;padding-block:0;border-top-right-radius:0}
body:has(#main[data-pag="capacidades"]) .s--split .t40{color:var(--orange)}

/* capacidades: alinear slider */
body:has(#main[data-pag="capacidades"]) .s--split .media{margin-top:0}

/* delegaciones por encima */
.dele{position:relative;z-index:2}

/* formulario contacto */
.cform{position:relative;margin-top:-93px;padding:180px 0 6rem;min-height:622px;background:var(--orange);color:var(--paper)}
.cform .grid{position:relative}
.cform__intro{grid-column:1/6}
.cform__t{font-size:var(--t-40);font-weight:300;line-height:45px;color:var(--paper);margin-bottom:1.5rem}
.cform__t b{font-weight:700}
.cform__intro p{font-size:var(--t-16);line-height:22px;color:var(--paper)}
.cform__form{grid-column:7/-1;display:flex;flex-direction:column;gap:1.75rem}
.cform__ok{grid-column:7/-1;align-self:center;font-size:var(--t-20);color:var(--paper)}
.cform__row{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem}
.cform__campo{display:flex;flex-direction:column;gap:.5rem}
.cform__campo>span{font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--paper)}
.cform__campo input,.cform__campo select,.cform__campo textarea{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.5);color:var(--paper);font-family:inherit;font-size:var(--t-16);padding:.4rem 0;outline:none}
.cform__campo input:focus,.cform__campo select:focus,.cform__campo textarea:focus{border-bottom-color:var(--paper)}
.cform__campo select{appearance:none;-webkit-appearance:none;cursor:pointer}
.cform__campo select option{color:var(--ink)}
.cform__campo textarea{resize:vertical;min-height:80px}
.cform__campo--full{grid-column:1/-1}
.cform__acepta{display:flex;gap:.75rem;align-items:flex-start;font-size:.75rem;line-height:1.4;color:var(--paper)}
.cform__acepta input{margin-top:.15rem;flex:none}
.cform__btn{align-self:flex-start;background:transparent;border:1px solid var(--paper);color:var(--paper);height:44px;padding:0 12px 0 20px;gap:12px;margin-top:.5rem}
.cform__btn:hover{background:var(--paper);color:var(--orange)}
.cform__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cform__err{grid-column:1/-1;background:rgba(0,0,0,.15);padding:.75rem 1rem;border-radius:6px;color:var(--paper)}
@media(max-width:900px){.cform__intro,.cform__form,.cform__ok{grid-column:1/-1}.cform__row{grid-template-columns:1fr}}

/* curva cform */
.cform{overflow:hidden}
.cform::after{content:"";position:absolute;left:0;right:0;top:0;height:110px;background:var(--paper);border-bottom-right-radius:137px;pointer-events:none;z-index:1}
.cform .grid{position:relative;z-index:2}

/* iconos hero en gris */
.hero .btn__ico{color:#1b242a}

/* boton capacidades */
.capas__cta{margin-top:3.5rem}
@media(max-width:760px){.capas__cta{margin-top:2.5rem}}

/* caps titular */
.caps__titular{font-size:var(--t-40);font-weight:300;line-height:45px;color:var(--paper);margin-bottom:3rem}
.caps__titular b{font-weight:700}

/* cap split movil aire */
@media(max-width:760px){body:has(#main[data-pag="capacidades"]) .s--split .media{margin-top:2.5rem}}

/* enlace catalogo acordeon */
.pcard__cat{display:inline-flex;align-items:center;justify-content:center;margin-top:1.75rem;height:40px;padding:0 24px;border:1px solid var(--orange);border-radius:999px;font-size:var(--t-14);font-weight:700;color:var(--orange);text-decoration:none;transition:background .2s,color .2s}
.pcard__cat:hover{background:var(--orange);color:var(--paper)}

/* filete acordeon abierto */
.pcard__caja:has(.pcard__amp[aria-expanded="true"]){border-bottom:0}
.pcard__caja:has(.pcard__amp[aria-expanded="true"]) + .pcard__det{border-bottom:1px solid var(--ink)}