/* E108-01 Servicio Integral (/es/servicio-integral, /en/integral-service): las 10 diapositivas del cliente como secciones de la web.
   Solo usa los tokens de sistema.css (Manrope y colores de la web nueva). De 1100 px en adelante cada sección repite la diapositiva (texto a la
   izquierda en ~53 %, foto a la derecha); por debajo, la foto arriba y el texto debajo. */

.si-sec{position:relative;display:grid;grid-template-columns:minmax(0,1fr);background:var(--superficie);color:var(--texto);overflow:clip;isolation:isolate}
.si-foto{position:relative;margin:0;order:-1;aspect-ratio:4/3;overflow:hidden;background:var(--superficie-2)}
.si-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.si-texto{display:flex;flex-direction:column;align-items:flex-start;gap:var(--e-4);padding:clamp(2rem,1.2rem + 3vw,3.5rem) var(--margen)}

/* Rótulo superior, con su raya de oro a la derecha como en las diapositivas */
.si-antetitulo{display:flex;align-items:center;gap:1rem;width:100%;margin:0;color:var(--oro);font-size:var(--t-s);font-weight:500;letter-spacing:var(--espaciado-rotulos);text-transform:uppercase}
.si-antetitulo::after{content:"";flex:1 1 2rem;max-width:22rem;height:1px;background:var(--oro)}
.si-titular{margin:0;color:var(--texto);font-family:var(--fuente-titulares);font-weight:600;font-size:clamp(1.9rem,1.1rem + 3.2vw,3.4rem);line-height:1.08;letter-spacing:-.01em;text-transform:none}
.si-lema{margin:0;color:var(--oro);font-size:clamp(1.25rem,1rem + 1.1vw,2.1rem);line-height:1.3}
.si-intro,.si-cierre{margin:0;max-width:34em;font-size:var(--t-l);line-height:1.45;color:var(--texto)}
.si-cierre{font-size:var(--t-m)}

/* Filas: título en oro y descripción, entre rayas de oro */
.si-filas{width:100%;margin:var(--e-2) 0;border-block:1px solid var(--oro)}
.si-fila{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:var(--e-4);align-items:center;padding:.85rem .25rem}
.si-fila+.si-fila{border-top:1px solid var(--oro)}
.si-fila dt{color:var(--oro);font-size:var(--t-h5);font-weight:500;line-height:1.2}
.si-fila dd{margin:0;font-size:var(--t-m);line-height:1.35;color:var(--texto)}

/* Botones: el recuadro entero es el enlace; contorno dorado, texto en oro */
.si-acciones{display:flex;width:100%;flex-wrap:wrap;gap:var(--e-4);margin:var(--e-2) 0 0}
.si-acciones--dos .si-boton{flex:1 1 12rem}
.si-boton{min-width:min(100%,15rem);color:var(--oro);text-transform:none;letter-spacing:.01em;font-size:var(--t-h5);font-weight:500;padding-block:var(--e-3)}
.si-boton:hover{color:var(--oro-claro)}

/* Premio (sección 04): cuadro con borde de oro, todo él enlace */
.si-premio{position:relative;display:flex;flex-direction:column;align-items:center;gap:.2rem;width:100%;margin-top:var(--e-3);padding:1.2rem 1rem .9rem;border:1px solid var(--oro);color:var(--texto);text-align:center;text-decoration:none;transition:background var(--transicion,.2s)}
.si-premio:hover{background:rgba(242,180,82,.1)}
.si-premio strong{color:var(--oro);font-size:var(--t-h5);font-style:italic;font-weight:600}
.si-premio span{font-size:var(--t-m)}
.si-premio__estrella{position:absolute;top:-.8rem;left:50%;translate:-50% 0;padding-inline:.5rem;box-sizing:content-box;background:var(--superficie);color:var(--oro)}

/* 01: la foto a toda la sección; el texto sobre un degradado oscuro a la izquierda */
.si-sec--01 .si-foto{aspect-ratio:3/2}
.si-sec--01 .si-texto{max-width:none;margin-inline:0;padding-inline:var(--margen);padding-block:clamp(2rem,1.4rem + 3vw,4rem)}
.si-sec--01 .si-titular{font-size:var(--h1-ref)}
.si-sec--01 .si-intro{font-size:var(--t-l)}

/* 09: la imagen del área privada */
.si-sec--09 .si-foto img{object-position:center}

/* 10: pasos y cierre */
.si-pasos{display:flex;flex-wrap:wrap;gap:.5rem 0;margin:0;padding:0;list-style:none;font-size:var(--t-l)}
.si-pasos li{padding-inline:1.1rem;border-left:1px solid var(--oro)}
.si-pasos li:first-child{padding-left:0;border-left:0}
.si-pasos b{color:var(--oro);font-weight:700}
.si-direccion{align-self:stretch;margin:0;text-align:center;font-size:var(--t-m);color:var(--texto-suave)}
.si-lema--cierre{font-weight:700;font-size:clamp(1.15rem,1rem + .8vw,1.75rem)}
/* E108-01f (Víctor, diap. 10): «Empieza tu proyecto» es un botón ANCHO, con el texto centrado y en negrita, y la URL centrada justo debajo
   (centro del botón = centro de .si-direccion). Por debajo de 1100, a todo el ancho del bloque; desde 1100, el 94 % de la diapositiva (más abajo). */
.si-sec--10 .si-acciones .si-boton{width:100%;font-weight:700}

/* E108-01h (norma de Víctor; SÍ del VS 4-nov vía PUENTE 118.º): títulos, párrafos, filas, rótulo, pasos, lema y premio con la letra de su diapositiva.
   --k-*: letra en «vw de la diapositiva» = alto de la mayúscula medido en diap-NN.png (1956 px) / 0,72 (mayúscula de Manrope) / 19,56.
   --si-u: lo que vale 1 vw de la diapositiva. Desde 1100 px, var(--vw) (la diapositiva escalada a la pantalla). Por debajo, el bloque de texto hace de
   diapositiva (su bloque mide 890 px de 1956 ⇒ ancho/45,5) con tope en 11 px (lo de 1100), y la letra NUNCA baja de la de hoy en móvil (max()). */
.si-sec{--si-u:min(calc((100vw - 2 * var(--margen)) / 45.5),11px);--k-ante:1.42;--k-tit:3.57;--k-intro:1.67;--k-dt:2.02;--k-dd:1.5;--k-cierre:1.63}
.si-sec--01{--k-tit:4.12;--k-intro:1.53}
.si-sec--02{--k-tit:3.48;--k-intro:1.56;--k-dt:1.77;--k-dd:1.21;--k-cierre:1.35}
.si-sec--03{--k-tit:3.69;--k-intro:1.49;--k-dt:1.85;--k-dd:1.42;--k-cierre:1.42}
.si-sec--04{--k-tit:3.69;--k-intro:1.7;--k-dt:1.85;--k-dd:1.35}
.si-sec--05{--k-tit:3.62;--k-intro:1.7;--k-dt:1.99;--k-dd:1.49;--k-cierre:1.56}
.si-sec--06{--k-tit:3.48;--k-intro:1.7;--k-dt:1.99;--k-dd:1.49;--k-cierre:1.63}
.si-sec--07{--k-tit:3.48;--k-intro:1.63;--k-dt:2.06;--k-dd:1.56;--k-cierre:1.7}
.si-sec--08{--k-tit:3.55;--k-intro:1.63;--k-dt:1.99;--k-dd:1.49;--k-cierre:1.63}
.si-sec--09{--k-tit:2.84;--k-intro:1.63;--k-dt:2.06;--k-dd:1.49}
.si-sec--10{--k-tit:4.05;--k-intro:1.67;--k-cierre:1.42}
.si-antetitulo{font-size:max(var(--t-s),calc(var(--k-ante) * var(--si-u)))}
.si-titular{font-size:max(clamp(1.9rem,1.1rem + 3.2vw,3.4rem),calc(var(--k-tit) * var(--si-u)))}
.si-sec--01 .si-titular{font-size:max(var(--h1-ref),calc(var(--k-tit) * var(--si-u)))}
.si-intro,.si-sec--01 .si-intro{font-size:max(var(--t-l),calc(var(--k-intro) * var(--si-u)))}
.si-cierre{font-size:max(var(--t-m),calc(var(--k-cierre) * var(--si-u)))}
.si-fila dt{font-size:max(var(--t-h5),calc(var(--k-dt) * var(--si-u)))}
.si-fila dd{font-size:max(var(--t-m),calc(var(--k-dd) * var(--si-u)))}
.si-sec--01 .si-lema{font-size:max(clamp(1.25rem,1rem + 1.1vw,2.1rem),calc(2.2 * var(--si-u)))}
.si-lema--cierre{font-size:max(clamp(1.15rem,1rem + .8vw,1.75rem),calc(2.06 * var(--si-u)))}
.si-pasos{font-size:max(var(--t-l),calc(1.53 * var(--si-u)))}
.si-premio strong{font-size:max(var(--t-h5),calc(1.85 * var(--si-u)))}
.si-premio span{font-size:max(var(--t-m),calc(1.49 * var(--si-u)))}

@media (min-width:1100px){
  .si-sec{grid-template-columns:minmax(0,1.145fr) minmax(0,1fr);min-height:clamp(36rem,56.25vw,58rem)}
  .si-foto{order:0;aspect-ratio:auto;min-height:100%}
  .si-texto{justify-content:center;padding:clamp(2.5rem,2vw + 1.5rem,4.5rem) clamp(2rem,4.6vw,5.5rem) clamp(2.5rem,2vw + 1.5rem,4.5rem) var(--margen)}
  /* E108-01h: desde 1100, la letra de la diapositiva escalada a la pantalla, sin suelo (--si-u = 1 vw con el tope de 2560 de sistema.css) */
  .si-sec{--si-u:var(--vw)}
  .si-antetitulo{font-size:calc(var(--k-ante) * var(--si-u))}
  .si-titular,.si-sec--01 .si-titular{font-size:calc(var(--k-tit) * var(--si-u))}
  /* E108-01i (VS): el texto de cuerpo (párrafos, filas, pies y botones) nunca baja de 16 px; los titulares, escalado puro */
  .si-intro,.si-sec--01 .si-intro{font-size:max(16px,calc(var(--k-intro) * var(--si-u)))}
  .si-cierre{font-size:max(16px,calc(var(--k-cierre) * var(--si-u)))}
  .si-fila dt{font-size:max(16px,calc(var(--k-dt) * var(--si-u)))}
  .si-fila dd{font-size:max(16px,calc(var(--k-dd) * var(--si-u)))}
  .si-sec--01 .si-lema{font-size:calc(2.2 * var(--si-u))}
  .si-lema--cierre{font-size:calc(2.06 * var(--si-u))}
  .si-pasos{font-size:max(16px,calc(1.53 * var(--si-u)))}
  .si-premio strong{font-size:max(16px,calc(1.85 * var(--si-u)))}
  .si-premio span{font-size:max(16px,calc(1.49 * var(--si-u)))}
  .si-sec--01{display:block;min-height:clamp(34rem,56.25vw,58rem)}
  .si-sec--01 .si-foto--fondo{position:absolute;inset:0;aspect-ratio:auto}
  .si-sec--01 .si-foto--fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0b0b0b 0%,rgba(11,11,11,.92) 22%,rgba(11,11,11,.55) 42%,rgba(11,11,11,0) 62%)}
  .si-sec--01 .si-texto{position:relative;z-index:1;width:min(50%,46rem);min-height:inherit;justify-content:center;margin-left:max(0px,calc((100% - var(--ancho-maximo)) / 2));padding-right:0}
  .si-sec--01 .si-texto.contenedor{max-width:none}
  .si-sec--10 .si-foto{margin-left:-6vw}
  .si-sec--10 .si-foto img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
  .si-sec--10 .si-texto{position:relative;z-index:1}
  /* E108-01f: los botones con el tamaño de su diapositiva a este ancho (norma de Víctor: letra y botón escalados). Medido en diap-NN.png
     (1956 px de ancho): ancho = % del bloque de texto (las rayas de las filas), alto y letra en vw (letra = alto de la mayúscula / 0,72 de Manrope).
     El texto, centrado. Si un texto (en inglés) no cabe en el % de la diapositiva, el botón crece hasta su texto, nunca más que el bloque. */
  .si-boton{--si-ancho:60%;--si-alto:4;--si-letra:1.95;width:var(--si-ancho);min-width:fit-content;max-width:100%;min-height:calc(var(--si-alto)*var(--vw));padding:0 calc(1.2*var(--vw));font-size:max(16px,calc(var(--si-letra)*var(--vw)));line-height:1.1;text-align:center}
  .si-sec--02 .si-boton{--si-ancho:61%}
  .si-sec--03 .si-boton{--si-ancho:64%}
  .si-sec--04 .si-boton{--si-ancho:45.5%;--si-alto:3.94}
  .si-acciones--dos{column-gap:4.3%}
  .si-acciones--dos .si-boton{flex:0 0 auto}
  .si-sec--05 .si-boton{--si-ancho:66%;--si-alto:3.55;font-weight:600}
  :is(.si-sec--06,.si-sec--07,.si-sec--08) .si-boton{--si-ancho:68%;--si-alto:3.65;font-weight:600}
  .si-sec--09 .si-boton{--si-ancho:57.5%;--si-alto:3.9;--si-letra:2.05;font-weight:600}
  /* 10: el 94 % del bloque, como la diapositiva (82–921 de 72–962; decisión del VS 4-nov, PUENTE 118.º), y la URL en una caja del mismo ancho
     y arrimada a la izquierda, para que su centro caiga bajo el centro del botón (en la diapositiva, 498,5 frente a 501,5). */
  .si-sec--10 .si-acciones .si-boton{--si-alto:4.55;--si-letra:2.34;width:94%}
  .si-direccion{align-self:flex-start;width:94%;font-size:max(16px,calc(1.46*var(--vw)))}
  /* E108-01i (VS 4-nov vía PUENTE 118.º: «las diapositivas mandan también en interlineado y espacios»), desde 1100; a <1100 nada cambia.
     Medido en diap-NN.png (renglón a renglón, rayas de las filas y huecos entre bloques). --sp = 1 px de la diapositiva (1956 px) a este ancho.
     Interlineado por sección (--lh-*); filas con el ancho de la columna de títulos de cada diapositiva (--dtw: inicio del texto / ancho de las rayas)
     y su relleno (8 px de diapositiva); huecos: 16 entre bloques, +15 sobre las filas, +20 sobre los botones, +5 sobre el titular (cap a línea base,
     descontado el medio interlineado de Manrope). Así el contenido cabe en el alto de la diapositiva (min-height 56,25 vw) como en ella. */
  .si-sec{--sp:calc(var(--vw) / 19.56);--lh-intro:1.2;--lh-dt:1.15;--lh-dd:1.25;--lh-cierre:1.22;--dtw:44%}
  .si-sec--04{--lh-intro:1.05;--lh-dd:1.15;--dtw:51%}
  :is(.si-sec--05,.si-sec--06,.si-sec--07,.si-sec--08){--lh-intro:1.14;--lh-dt:1.08;--lh-dd:1.05;--lh-cierre:1.04;--dtw:50.5%}
  .si-sec--05{--dtw:51.5%;--lh-cierre:1}
  .si-sec--09{--lh-intro:1.05;--lh-dt:1;--lh-dd:1.05;--dtw:46%}
  .si-sec--03{--dtw:42.6%}
  .si-sec--10{--lh-intro:1.07}
  .si-texto{gap:calc(16 * var(--sp));padding-block:calc(40 * var(--sp))}
  .si-titular{margin-top:calc(5 * var(--sp))}
  .si-intro{line-height:var(--lh-intro)}
  .si-cierre{line-height:var(--lh-cierre)}
  .si-filas{margin:calc(15 * var(--sp)) 0 0}
  .si-fila{grid-template-columns:calc(var(--dtw) - 10 * var(--sp)) minmax(0,1fr);gap:0;padding:calc(8 * var(--sp)) 0 calc(8 * var(--sp)) calc(10 * var(--sp))}
  .si-fila dt{line-height:var(--lh-dt);padding-right:calc(12 * var(--sp))}
  .si-fila dd{line-height:var(--lh-dd)}
  .si-acciones{margin-top:calc(20 * var(--sp))}
  /* 09: el titular en 1 línea como la diapositiva, con el ancho de la columna y su relleno derecho (la diapositiva llega a 990 de 1045). Medido en el
     pod (tanda de 27f1): la frase mide 15,8 em en es y 15,5 en en (16,3 con margen). Con el relleno cabe con la letra ENTERA de la diapositiva (2,84 vw)
     a 2356, 1440 y 1100; el min() solo la baja si un texto más largo no cupiera (VS: nunca por debajo del 90 %). Si aun así no cupiera, corta en 2 líneas. */
  .si-sec--09 .si-texto{container-type:inline-size}
  .si-sec--09 .si-titular{width:calc(100% + clamp(2rem,4.6vw,5.5rem));font-size:min(calc(var(--k-tit) * var(--si-u)),calc((100cqi + clamp(2rem,4.6vw,5.5rem)) / 16.3))}
  /* E108-01j (Víctor, 4-nov, vía PUENTE 118.º): el recuadro del premio de la 04 en UNA línea, como la diapositiva. El recuadro, del ancho del bloque
     (en la diapositiva, 74–960 de unas rayas de 73–962); relleno lateral de 16 px de diapositiva. La letra es la de la diapositiva (1,85 vw) o, si
     no cabe, lo justo para que quepa (VS: nunca por debajo del 90 %). Medido en el pod (tanda de b6b3), en Manrope seminegrita cursiva: es «SS AI
     Designer, Premio a la Innovación Tecnológica» = 23,8 em (con margen, 24,1: ≈96,5 %); en «…, Technological Innovation Award» = 22,4 em, que cabe
     ENTERA (VS: el inglés al 100 %; 22,6 con margen solo por si un texto más largo no cupiera). Si no cupiera, corta en 2 líneas (no desborda). */
  .si-premio{container-type:inline-size;padding-inline:calc(16 * var(--sp))}
  .si-premio strong{font-size:max(16px,min(calc(1.85 * var(--si-u)),calc(100cqi / 24.1)))}
  .si-premio strong:lang(en){font-size:max(16px,min(calc(1.85 * var(--si-u)),calc(100cqi / 22.6)))}
}
@media (max-width:1099.98px){
  .si-sec--01{display:grid}
  .si-sec--01 .si-foto--fondo{position:relative}
  .si-sec--01 .si-foto--fondo::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(0deg,var(--superficie),rgba(14,14,14,0))}
  .si-sec--10 .si-foto img{-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 30%);mask-image:linear-gradient(0deg,transparent 0,#000 30%)}
}
@media (max-width:480px){
  .si-fila{grid-template-columns:minmax(0,1fr);gap:.2rem}
  .si-boton{width:100%}
  .si-pasos li{padding-inline:.7rem}
}