/* S2S — tipografías auto-alojadas.
   Servidas desde grupos2s.com en lugar de fonts.gstatic.com, para que el
   navegador del visitante no contacte con ningún tercero al cargar la web.
   Eso es lo que permite prescindir del banner de cookies.
   Bloques copiados del CSS que sirve Google, conservando font-display:swap y
   las unicode-range originales; solo cambia la url a una ruta local.
   Bodoni Moda y Jost son variables: un archivo cubre todos sus pesos. */

/* latin-ext */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/bodoni-moda-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/bodoni-moda-italic-latin.woff2) format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/bodoni-moda-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/bodoni-moda-latin.woff2) format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/bodoni-moda-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/bodoni-moda-latin.woff2) format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/jost-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/jost-latin.woff2) format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jost-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jost-latin.woff2) format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jost-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jost-latin.woff2) format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* S2S — responsive layer.
   The pages are built from inline styles, so every rule here needs !important
   to win. Fixed lengths were already made fluid with clamp() inline; this file
   only handles what a single declaration cannot express: column collapses and
   the header at narrow widths. */

/* ---------- Column collapses ---------- */

/* Two-column editorial splits (text + image, details + form). */
@media (max-width: 900px) {
  .s2s-split { grid-template-columns: 1fr !important; }
}

/* Footer: brand / index / contact. */
@media (max-width: 900px) {
  .s2s-foot { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
  .s2s-foot { grid-template-columns: 1fr !important; }
}

/* ---------- Header ---------- */

/* The nav is five short words; rather than a hamburger (which would mean
   injecting DOM into a React-rendered tree) it compresses and, as a last
   resort under ~380px, scrolls sideways. */
@media (max-width: 900px) {
  header[data-header] { gap: 16px !important; }
  header[data-header] nav { gap: 20px !important; font-size: 11px !important; letter-spacing: .1em !important; }
  header[data-header] img { height: 34px !important; }
  /* "Escribir email" pill — the Contacto link already covers it. */
  header[data-header] > a[href^="mailto:"] { display: none !important; }
}

/* Under ~600px the five links need ~313px but only ~286px is left beside the
   logo, so the nav drops to its own full-width row and spaces itself out. */
@media (max-width: 600px) {
  header[data-header] {
    flex-wrap: wrap !important;
    row-gap: 10px !important;
  }
  header[data-header] nav {
    margin-left: 0 !important;
    width: 100%;
    justify-content: space-between;
    gap: 6px !important;
    font-size: 10px !important;
    letter-spacing: .04em !important;
  }
  header[data-header] nav a { white-space: nowrap; }
  header[data-header] img { height: 29px !important; }
}

/* ---------- Type ---------- */

/* The display sizes are already clamped inline, but their floors were chosen
   for desktop. On a phone a single long Spanish word ("Operaciones",
   "conversación") is wider than the column at that floor and breaks mid-word,
   so the floor comes down here instead. */
@media (max-width: 600px) {
  h1, h1 span, h1 div { font-size: clamp(38px, 11vw, 60px) !important; }
  h2, h2 span, h2 div { font-size: clamp(32px, 9vw, 48px) !important; }
  /* Sin partición de palabras: en un titular de display queda mal y el
     cliente lo ha pedido expresamente. Los tamaños ya bajan lo suficiente
     arriba para que quepan sin cortar. */
  h1, h2, h3 { hyphens: manual; }
  p, li, span, a, div { hyphens: manual; overflow-wrap: break-word; }
}

/* ---------- Hero clearance ---------- */

/* The header is one row on desktop and two on phones (logo, then nav), so the
   first section needs more headroom than its inline padding-top provides. */
@media (max-width: 600px) {
  [data-screen-label] > section:first-of-type { padding-top: 165px !important; }
}

/* ---------- Motion ---------- */

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

/* ---------- Hero ---------- */

/* On desktop the hero photo occupies the right half. Below that there is no
   room beside the headline, so it goes full-bleed behind the text and the
   scrim is deepened to keep the type legible. */
@media (max-width: 900px) {
  .s2s-hero-media { width: 100% !important; }
  .s2s-hero-media > div:last-of-type { background: linear-gradient(180deg,#0a0a0a 0%,rgba(10,10,10,.55) 40%,rgba(10,10,10,.75) 100%) !important; }
}

/* ---------- Datos legales pendientes ---------- */

/* Marcador para los datos que faltan en las páginas legales (razón social,
   CIF, registro mercantil). Se resalta a propósito: publicar esas páginas
   con los huecos sin rellenar es peor que no tenerlas, así que tiene que
   cantar. Al sustituir los datos reales, se quita el <span>. */
.dato-pendiente {
  background: #f2c14e;
  color: #0a0a0a;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 2px;
  white-space: nowrap;
}

/* ---------- Carrusel arrastrable ---------- */

/* La barra de scroll se oculta porque el carrusel se maneja arrastrando, y una
   barra gris rompería el blanco y negro del sitio. El scroll sigue existiendo:
   funciona con trackpad, con rueda horizontal y con el dedo en el móvil. */
.s2s-drag {
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: auto;   /* el html tiene scroll-behavior:smooth y pelearía
                              con el avance automático */
  overscroll-behavior-x: contain;
}
.s2s-drag::-webkit-scrollbar { display: none; }
.s2s-drag img { -webkit-user-drag: none; user-select: none; }

/* ---------- Desplegable S2S (variante «Línea») ---------- */

/* Diseño aportado por el cliente en s2s-dropdown.html. El CSS se conserva tal
   cual; lo que cambia es cómo se construye el markup: en aquel fichero un
   script inyectaba los nodos con createElement, algo que aquí no vale porque
   React reconstruye la plantilla en cada render y se los llevaría por delante.
   En su lugar el desplegable se dibuja desde la plantilla y su estado vive en
   el componente. */
.s2s-dd{position:relative;display:flex;flex-direction:column;gap:12px;font-family:Jost,sans-serif;color:#f5f4f2}
.s2s-dd.is-open{z-index:20}
.s2s-dd__label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:rgba(245,244,242,.45)}
.s2s-dd__trigger{display:flex;justify-content:space-between;align-items:center;width:100%;background:transparent;border:none;border-bottom:1px solid rgba(245,244,242,.25);padding:10px 2px;font:inherit;font-size:16px;font-weight:300;color:rgba(245,244,242,.35);cursor:pointer;text-align:left;transition:border-color .3s,color .3s}
.s2s-dd__trigger:focus-visible{outline:none;border-color:#f5f4f2}
.s2s-dd.has-value .s2s-dd__trigger{color:#f5f4f2}
.s2s-dd.is-open .s2s-dd__trigger{border-color:#f5f4f2}
.s2s-dd__arrow{font-family:'IBM Plex Mono',monospace;font-size:11px;color:rgba(245,244,242,.5);transition:transform .3s}
.s2s-dd.is-open .s2s-dd__arrow{transform:rotate(180deg)}
.s2s-dd__menu{display:none;position:absolute;left:0;right:0;top:100%;background:#0a0a0a;border-bottom:1px solid #f5f4f2;list-style:none;margin:0;padding:0}
.s2s-dd.is-open .s2s-dd__menu{display:block;animation:s2sDdReveal .45s cubic-bezier(.2,.7,.2,1) both}
.s2s-dd__option{display:flex;justify-content:space-between;align-items:center;width:100%;background:transparent;border:none;border-bottom:1px solid rgba(245,244,242,.1);padding:14px 2px;font:inherit;font-size:15px;font-weight:300;color:rgba(245,244,242,.55);cursor:pointer;text-align:left;transition:color .25s,padding-left .25s}
.s2s-dd__option:hover,.s2s-dd__option:focus-visible{color:#f5f4f2;padding-left:10px;outline:none}
.s2s-dd__option[aria-selected="true"]{color:#f5f4f2}
.s2s-dd__num{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;color:rgba(245,244,242,.35)}
@keyframes s2sDdReveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

/* El error de validación tiñe la línea, igual que en los campos de texto. */
.s2s-dd.is-error .s2s-dd__trigger{border-color:#c9756a}

/* ---------- Cifras de Trayectoria ---------- */

/* En móvil caben dos por fila y quedan apretadas contra el borde. Una por
   línea le da aire a cada dato y se leen de un vistazo al bajar. */
@media (max-width: 700px) {
  .s2s-cifras { flex-direction: column !important; align-items: flex-start !important; gap: 38px !important; }
  .s2s-cifras > div { width: 100%; }
}

/* ---------- «Cómo trabajamos»: dos montajes distintos ---------- */

/* En escritorio el gráfico va pegado al lateral y recorre las cuatro fases.
   En móvil esa columna acaba debajo de todo, tan lejos del texto que no se
   entiende de qué habla, así que allí se apaga y cada fase lleva su propia
   pieza justo debajo de su párrafo. */
.s2s-fase-gfx { display: none; }

@media (max-width: 900px) {
  .s2s-proceso-sticky { display: none !important; }

  .s2s-fase-gfx {
    display: block;
    position: relative;
    height: clamp(320px, 96vw, 430px);
    margin-top: clamp(24px, 6vw, 36px);
    border: 1px solid rgba(245, 244, 242, .12);
  }

  /* Las fases miden 90vh y centran su contenido para que en escritorio cada
     una ocupe la pantalla mientras el gráfico se transforma al lado. En móvil,
     con el gráfico dentro, eso solo genera un vacío enorme antes de la Fase 01
     y entre fases. */
  [data-build-track] > div > section {
    min-height: 0 !important;
    justify-content: flex-start !important;
    padding-top: clamp(30px, 8vw, 48px) !important;
    padding-bottom: clamp(38px, 10vw, 64px) !important;
  }
  [data-build-track] > div > section:first-of-type { padding-top: 0 !important; }

  /* El encabezado del bloque cerraba con 40px de aire que, sumados a lo
     anterior, separaban demasiado el título de la primera fase. */
  [data-build-track] { border-top: 1px solid rgba(245, 244, 242, .1); }
  .s2s-proceso-cabecera { padding-bottom: clamp(20px, 5vw, 28px) !important; }

  /* La línea divisoria vertical sobra cuando ya no hay dos columnas. */
  [data-build-track] > div:first-child { border-right: none !important; }
}

/* ---------- Globo de la cabecera de Servicios ---------- */

/* En escritorio el mapa se derrama a propósito fuera de su caja y cruza la
   sección: queda bien y el texto va por encima gracias al z-index. En móvil
   ese mismo derrame cubre el titular y el párrafo, así que aquí se recorta y
   el globo se queda centrado en su propio hueco, debajo del texto. */
@media (max-width: 900px) {
  .s2s-globo {
    overflow: hidden !important;
    height: clamp(300px, 80vw, 380px) !important;
    margin-top: clamp(18px, 5vw, 30px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .s2s-globo > * { width: 100%; height: 100%; }
}

/* ---------- Redes sociales del pie ---------- */

/* Iconos dibujados en SVG dentro del propio HTML: ni fuente de iconos ni
   librería externa, que volverían a meter un tercero y tirarían por tierra
   lo de no necesitar banner de cookies.
   El trazo y el relleno se definen aquí, con clases, en vez de con atributos
   tipo stroke-width: el runtime minusculiza los atributos y React descarta
   los que no reconoce, así que por esa vía no habría pintado nada. */
.s2s-social-row {
  display: flex;
  gap: 18px;
  margin-top: 4px;
}
.s2s-social {
  display: inline-flex;
  color: rgba(245, 244, 242, .55);
  transition: color .3s, transform .3s;
}
.s2s-social:hover,
.s2s-social:focus-visible { color: #f5f4f2; transform: translateY(-2px); }
.s2s-social svg { width: 19px; height: 19px; display: block; }
.s2s-social .ln { fill: none; stroke: currentColor; stroke-width: 1.6; }
.s2s-social .fl { fill: currentColor; stroke: none; }

/* En móvil el pie se apila y los iconos quedan pegados al texto de arriba. */
@media (max-width: 900px) {
  .s2s-social-row { margin-top: 10px; gap: 22px; }
  .s2s-social svg { width: 21px; height: 21px; }
}