/* ==========================================================================
   SoberanIA · Landing
   Valores tomados 1:1 del archivo de Figma (frames Desktop 1440 y Mobile 390)
   ========================================================================== */

:root {
  --dark: #020E1A;        /* Dark neutral */
  --blue: #0091E5;        /* Soberania Blue */
  --light-blue: #ADE0FE;  /* Light blue */
  --smoke: #F5F6F7;       /* Smoke */
  --white: #FFFFFF;
  --gray: #74818F;
  --font-sans: 'Figtree', system-ui, sans-serif;
  --font-serif: 'Chiron Sung HK', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--dark);
  background: var(--white);
  overflow-x: hidden;
}

img { display: block; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { font-weight: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.serif { font-family: var(--font-serif); font-weight: 400; }
.svg-defs { position: absolute; width: 0; height: 0; }

/* Accesibilidad: enlace para saltar al contenido y foco visible por teclado */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--dark);
  color: var(--white);
  font-size: 16px;
  transition: top .15s ease;
}
.skip-link:focus { top: 16px; outline: 2px solid var(--blue); outline-offset: 2px; }
.btn:focus-visible,
.nav__links a:focus-visible,
.nav__logo:focus-visible,
.nav__menu:focus-visible,
.lang__btn:focus-visible,
.lang__menu a:focus-visible,
.menu a:focus-visible,
.footer__mail:focus-visible,
.social a:focus-visible,
.consent a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible { border-radius: 30px; }

/* Honeypot antispam: fuera de pantalla, no oculto para que los bots lo rellenen */
.form__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Visibilidad por breakpoint */
.m-only { display: none !important; }

/* Contenedor: 1204 px con márgenes de 118 px en el frame de 1440 */
.container {
  width: 1204px;
  max-width: calc(100% - 236px);
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   Componentes
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 12px 28px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 16px;
  line-height: normal;
  white-space: nowrap;
  text-align: center;
  transition: transform .15s ease, opacity .15s ease;
}
.btn:hover { opacity: .92; }
.btn:active { transform: translateY(1px); }
.btn--dark { background: var(--dark); color: var(--white); }
.btn--light { background: var(--white); color: var(--dark); }

.pill {
  display: inline-flex;
  align-items: center;
  height: 51px;
  padding: 0 29px;
  border-radius: 25.5px;
  background: var(--dark);
  color: var(--white);
  font-size: 21px;
  line-height: normal;
  letter-spacing: -0.21px;
  white-space: nowrap;
}
.pill--sobre { padding: 0 25px 0 24px; }

.display {
  font-size: 75px;
  line-height: 80px;
  font-weight: 400;
  letter-spacing: 0;
}

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

.hero {
  position: relative;
  height: 1003px;
  background: var(--white) url('../assets/img/hero-bg.png') center / cover no-repeat;
  background-image: image-set(url('../assets/img/hero-bg.webp') type('image/webp'), url('../assets/img/hero-bg.png') type('image/png'));
  overflow: hidden;
}

.nav {
  position: relative;
  width: 1204px;
  max-width: calc(100% - 236px);
  height: 90px;
  margin: 0 auto;
}
.nav__logo { position: absolute; left: 0; top: 20px; height: 50px; display: flex; align-items: center; }   /* centrado con "Hablemos" */
.nav__logo img { display: block; width: 160px; height: auto; }   /* wordmark 126x19.59 escalado */
.nav__links {
  position: absolute;
  left: 217px;            /* 160 (wordmark) + 57 */
  top: 33px;
  display: flex;
  gap: 40px;
  font-size: 16px;
  line-height: normal;
  color: var(--white);
  white-space: nowrap;
}
.nav__links a { transition: color .2s ease; }
.nav__links a:hover { color: var(--blue); }
.nav__cta {
  position: absolute;
  right: 0;
  top: 20px;
  height: 50px;
  width: 163px;
  padding: 12px 28px;
  font-size: 18px;
}
.nav__menu { display: none; }
.menu { display: none; }

/* Selector de idioma (no existe en Figma): a la izquierda de "Hablemos", mismo alto */
.lang {
  position: absolute;
  right: 187px;             /* 163 (botón) + 24 */
  top: 20px;
  height: 50px;
  display: flex;
  align-items: center;
}
.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: 0;
  font: 500 16px/1 var(--font-sans);
  color: var(--white);
  cursor: pointer;
  transition: color .2s ease;
}
.lang__btn:hover,
.lang__btn[aria-expanded="true"] { color: var(--blue); }
.lang__btn img {
  display: block;
  transform: rotate(90deg);           /* el asset apunta a la derecha */
  transition: transform .2s ease;
}
.lang__btn[aria-expanded="true"] img { transform: rotate(-90deg); }
.lang__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 140px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--dark);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  z-index: 20;
}
html:not(.js) .lang:focus-within .lang__menu[hidden] { display: block; }   /* sin JS: alcanzable por teclado */
.lang__menu a {
  display: block;
  padding: 10px 16px;
  font-size: 16px;
  line-height: normal;
  color: var(--white);
  white-space: nowrap;
  transition: color .2s ease;
}
.lang__menu a:hover,
.lang__menu a[aria-current] { color: var(--blue); }

/* Título: texto blanco con desenfoque gaussiano que sigue al puntero.
   Tres capas del mismo texto: muy desenfocada (base), semi y nítida, estas dos
   últimas enmascaradas con un radial centrado en --fx/--fy (main.js). */
/* Radios de las máscaras: círculos en px alrededor del cursor (el título mide
   unos 1055x186 px, así que el radio nítido ha de quedar por debajo de la altura
   para que el desenfoque se vea en todas las direcciones, no solo a los lados).
   Registrados para poder animarlos: en reposo valen 3000px (todo nítido); al
   pasar el cursor por el título bajan y el desenfoque "entra" desde fuera; al
   salir vuelven a 3000px. */
@property --r1 { syntax: '<length>'; inherits: true; initial-value: 3000px; }
@property --r2 { syntax: '<length>'; inherits: true; initial-value: 3000px; }
@property --m1 { syntax: '<length>'; inherits: true; initial-value: 3000px; }
@property --m2 { syntax: '<length>'; inherits: true; initial-value: 3000px; }
.hero__title {
  position: absolute;
  top: 255px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 90px;
  line-height: 93px;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  color: var(--white);
  --fx: 72%;
  --fy: 50%;
  --r1: 3000px; --r2: 3000px; --m1: 3000px; --m2: 3000px;
  transition: --r1 .7s ease, --r2 .7s ease, --m1 .7s ease, --m2 .7s ease;
}
.hero__title:hover { --r1: 300px; --r2: 380px; --m1: 450px; --m2: 530px; }   /* nítido hasta 300px del cursor; desenfoque total desde 530px (solo los extremos del título) */
.hero__title-layer { display: block; }
.hero__title-layer--blur,
.hero__title-layer--mid {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Las tres máscaras son complementarias (suman 1 en cada punto): ninguna zona
   recibe dos capas, así las letras enfocadas tienen el borde limpio, sin halo. */
.hero__title-layer--blur {
  filter: blur(5px);
  opacity: .5;
  -webkit-mask-image: radial-gradient(circle at var(--fx) var(--fy), transparent 0, transparent var(--m1), #000 var(--m2));
  mask-image: radial-gradient(circle at var(--fx) var(--fy), transparent 0, transparent var(--m1), #000 var(--m2));
}
.hero__title-layer--mid {
  filter: blur(2px);
  opacity: .8;
  -webkit-mask-image: radial-gradient(circle at var(--fx) var(--fy), transparent 0, transparent var(--r1), #000 var(--r2), #000 var(--m1), transparent var(--m2));
  mask-image: radial-gradient(circle at var(--fx) var(--fy), transparent 0, transparent var(--r1), #000 var(--r2), #000 var(--m1), transparent var(--m2));
}
.hero__title-layer--sharp {
  position: relative;
  -webkit-mask-image: radial-gradient(circle at var(--fx) var(--fy), #000 0, #000 var(--r1), transparent var(--r2));
  mask-image: radial-gradient(circle at var(--fx) var(--fy), #000 0, #000 var(--r1), transparent var(--r2));
}

.hero__sub {
  position: absolute;
  top: 477px;
  left: 50%;
  width: 1040px;
  transform: translateX(-50%);
  font-size: 24px;
  line-height: normal;
  text-align: center;
  color: var(--white);
}

.hero__cta {
  position: absolute;
  top: 668px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
}
.hero__cta .btn { width: 286px; }

/* --------------------------------------------------------------------------
   Líneas de negocio
   -------------------------------------------------------------------------- */

.lineas { padding-top: 118px; }

.cards {
  display: flex;
  gap: 20px;
  margin-top: 48px;
  isolation: isolate;
}

.card {
  position: relative;
  flex: 1 1 0;
  height: 399px;
  padding: 34px 30px 0;
  background: var(--smoke);
  border-radius: 15px;
}
.card:first-child .card__icon { margin-left: -1px; }
/* Hover: borde azul de 2 px (interior, sin mover el contenido) y resplandor
   azul por debajo de la tarjeta, como la tarjeta destacada del diseño */
.card { transition: box-shadow .25s ease; }
.card:hover,
.card:focus-within { box-shadow: inset 0 0 0 2px var(--blue); }
.card::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 361px;
  width: 362px;
  height: 62px;
  border-radius: 15px;
  background: var(--blue);
  opacity: 0;
  filter: blur(17.1px);
  z-index: -1;
  transition: opacity .25s ease;
}
.card:hover::before,
.card:focus-within::before { opacity: .25; }
.card__icon { width: 40px; height: 40px; }
.card__title {
  margin-top: 14px;
  font-size: 25px;
  line-height: 32px;
  font-weight: 500;
}
.card__body {
  width: 328px;
  max-width: 100%;
  margin-top: 45px;
  font-size: 18px;
  line-height: 28px;
}
.card:first-child .card__body { margin-top: 49px; }

.partner__title { margin-top: 83px; }
.partner__text {
  width: 714px;
  max-width: 100%;
  margin-top: 40px;
  margin-left: 490px;
  font-size: 24px;
  line-height: 32px;
}

.esquemas {
  display: grid;
  grid-template-columns: 360px 309px 268px 1fr;
  margin-top: 59px;
}
.esquema__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid #D7DDE2;
  border-radius: 10px;
  font-size: 20px;
  line-height: normal;
  font-weight: 500;
}
.esquema__label {
  display: block;
  margin-top: 18px;
  font-size: 30px;
  line-height: 40px;
  font-weight: 600;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Cómo trabajamos
   -------------------------------------------------------------------------- */

.como { padding-top: 114px; }

.como__title {
  font-size: 46px;
  line-height: 55px;
  font-weight: 500;
}

.como__cols {
  display: flex;
  align-items: flex-start;
  gap: 82px;
  margin-top: 52px;
}
.como__left { width: 510px; flex: 0 0 510px; }
.como__photo {
  position: relative;
  width: 510px;
  height: 160px;
  border-radius: 15px;
  overflow: hidden;
  background: var(--smoke);
}
.como__photo img {
  position: absolute;
  left: 0;
  top: -50px;
  width: 510px;
  height: 340px;
  object-fit: cover;
}
.como__text {
  margin-top: 25px;
  font-size: 24px;
  line-height: 32px;
  white-space: pre-line;
}

.claves {
  width: 612px;
  flex: 0 0 612px;
  margin-top: -0.5px;
}
.clave {
  padding-bottom: 25.5px;
  border-bottom: 2px solid var(--blue);
}
.clave + .clave { padding-top: 22.5px; }
.clave:last-child { border-bottom: 0; padding-bottom: 0; }
.clave__title {
  font-size: 28px;
  line-height: 36px;
  font-weight: 500;
}
.clave__body {
  margin-top: 9px;
  font-size: 18px;
  line-height: 24px;
}

.pill--como { margin-top: 126px; }
.proceso__title { margin-top: 28px; }
.proceso__text {
  width: 613px;
  max-width: 100%;
  margin-top: 50px;
  margin-left: 592px;
  font-size: 24px;
  line-height: 32px;
}

/* Pasos (acordeón) */
.pasos {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 68px;
}
.paso {
  border-radius: 15px;
  color: var(--white);
  overflow: hidden;
}
.paso--1 { background: #052546; }
.paso--2 { background: #00306D; }
.paso--3 { background: #63C1F7; color: var(--dark); }
.paso--4 { background: #D9F4FF; color: var(--dark); }

.paso__head {
  position: relative;
  display: block;
  width: 100%;
  height: 96px;
  text-align: left;
  cursor: pointer;
}
.paso__head:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 15px; }
.paso__num,
.paso__title {
  position: absolute;
  top: 29px;
  font-size: 32px;
  line-height: normal;
  white-space: nowrap;
}
.paso__num { left: 49px; }
.paso__title { left: 133px; }
.paso__chevron {
  position: absolute;
  right: 26px;
  top: 26px;
  width: 44px;
  height: 44px;
  transform: rotate(90deg);         /* Figma: -90° → apunta hacia abajo */
  transition: transform .25s ease;
}
.paso.is-open .paso__chevron { transform: rotate(-90deg); }  /* Figma: 90° → hacia arriba */

.paso__panel { display: none; }
.paso.is-open .paso__panel { display: block; }
.paso__body {
  width: 964px;
  max-width: calc(100% - 133px - 60px);
  margin: 1px 0 33px 133px;         /* cuerpo a 97 px del borde superior; alto total 194 */
  font-size: 24px;
  line-height: 32px;
}

/* --------------------------------------------------------------------------
   Puente comercial España–LATAM
   -------------------------------------------------------------------------- */

.latam {
  position: relative;
  height: 1128px;
  margin-top: 128px;
  background: var(--dark);
  overflow: hidden;
}
.latam__map {
  position: absolute;
  left: calc(50% - 727px);
  top: 5px;
  width: 1708px;
  height: 858px;
}
/* Puntos de acento del mapa: parpadean entre azul oscuro y blanco con fases aleatorias */
.latam__map--live .dot {
  animation: dotBlink 4s ease-in-out infinite;
}
@keyframes dotBlink {
  0%, 38%  { fill: #0F253B; }
  50%, 62% { fill: #FFFFFF; }
  74%, 100% { fill: #0F253B; }
}
/* El punto que queda bajo el cursor se enciende en blanco (main.js añade .is-lit
   por proximidad); al alejarse se apaga y los de acento retoman el parpadeo */
.latam__map--live path { transition: fill .35s ease; }
.latam__map--live path.is-lit {
  animation: none;
  fill: #FFFFFF;
  transition: fill .12s ease;
}
@media (prefers-reduced-motion: reduce) {
  .latam__map--live .dot { animation: none; }
}
.latam__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 14, 26, 0) 30%, rgba(2, 14, 26, .92) 71%);
}
.latam__inner { position: relative; height: 100%; }
.latam__title {
  padding-top: 195px;
  margin-left: 510px;
  color: var(--white);
}
.latam__sub {
  width: 683px;
  max-width: calc(100% - 515px);
  margin: 24px 0 0 515px;
  font-size: 46px;
  line-height: 53px;
  color: var(--light-blue);
}
.latam__text {
  width: 695px;
  max-width: calc(100% - 509px);
  margin: 39px 0 0 509px;
  font-size: 24px;
  line-height: 32px;
  color: var(--white);
}
.latam__cta {
  width: 389px;
  margin: 47px 0 0 509px;
}

.ventajas {
  position: absolute;
  left: 0;
  right: 0;
  top: 909px;
  height: 106px;
}
.ventaja {
  position: absolute;
  top: 0;
  padding-left: 14px;
  border-left: 2px solid var(--blue);
  height: 106px;
  color: var(--white);
}
.ventaja:nth-child(1) { left: 0; }
.ventaja:nth-child(2) { left: 409px; }
.ventaja:nth-child(3) { left: 816px; }
.ventaja__title {
  font-size: 28px;
  line-height: normal;
  font-weight: 500;
  white-space: nowrap;
}
.ventaja__body {
  margin-top: 19px;
  font-size: 18px;
  line-height: 26px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Sobre nosotros
   -------------------------------------------------------------------------- */

.nosotros { padding-top: 125px; }
.nosotros__title { margin-top: 28px; }

.nosotros__cols {
  display: flex;
  align-items: flex-start;
  gap: 39px;
  margin-top: 63px;
}
.nosotros__photo {
  position: relative;
  flex: 0 0 573px;
  width: 573px;
  height: 586px;
  border-radius: 15px;
  overflow: hidden;
  background: #D9D9D9;
}
.nosotros__photo img {
  position: absolute;
  left: 0;
  top: -54px;
  width: 574px;
  height: 718px;
  object-fit: cover;
}
.nosotros__text {
  width: 592px;
  flex: 0 0 592px;
  font-size: 24px;
  line-height: 32px;
  white-space: pre-line;
}
.nosotros__text strong { font-weight: 600; }

.logos {
  position: relative;
  height: 106px;
  margin-top: 73px;
}
.logos li { position: absolute; top: 0; overflow: hidden; }
.logos img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* Recortes (modo CROP de Figma) expresados en % del nodo para que escalen en móvil */
.logos__madrid   { left: 0;     width: 218px; height: 106px; }
.logos__delvy    { left: 524px; top: 30px !important; width: 156px; height: 46px; }   /* centrado: (1204 - 156) / 2 */
.logos__cardpack { left: 999px; top: 22px !important; width: 205px; height: 63px; }
.logos__madrid img   { width: 122.75%; height: 100%; left: -9.86%; mix-blend-mode: multiply; filter: url(#f-madrid); }
.logos__delvy img    { object-fit: cover; filter: url(#f-delvy); }
/* Hover: logos en Soberania Blue */
.logos li:hover img { filter: url(#f-blue); }
.logos__svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.logos__svg path { transition: fill .2s ease; }
.logos__cardpack:hover .logos__svg path { fill: var(--blue); }

/* --------------------------------------------------------------------------
   Contacto
   -------------------------------------------------------------------------- */

.contacto {
  position: relative;
  height: 820px;
  margin-top: 119px;
  background: var(--dark) url('../assets/img/contact-bg.png') center / cover no-repeat;
  background-image: image-set(url('../assets/img/contact-bg.webp') type('image/webp'), url('../assets/img/contact-bg.png') type('image/png'));
}
.contacto__inner { position: relative; height: 100%; }
.contacto__title {
  position: absolute;
  left: 0;
  top: 289px;
  width: 592px;
  font-size: 51px;
  line-height: 61px;
  font-weight: 400;
  color: var(--white);
}

.form {
  position: absolute;
  left: 640px;
  top: 45px;
  width: 564px;
  height: 731px;
  padding: 32px 30px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(3.65px);
  backdrop-filter: blur(3.65px);
}
.form::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  padding: 1px;
  background: linear-gradient(135deg, #ECF3F6 0%, rgba(236, 243, 246, 0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.form__row { display: flex; gap: 14px; }
.form__row + .form__row { margin-top: 14px; }
.form__row--area { margin-top: 13px !important; }
.form__row--2 > * { flex: 1 1 0; min-width: 0; }

.field {
  display: block;
  width: 100%;
  height: 60px;
  padding: 0 16px;
  border: 0;
  border-radius: 15px;
  background: var(--white);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: normal;
  color: var(--dark);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.field::placeholder { color: var(--gray); opacity: 1; }
.field:focus { box-shadow: 0 0 0 2px var(--blue); }
.field--area {
  height: 162px;
  padding: 20px 16px;
  resize: none;
}
.select { position: relative; }
.select select:invalid,
.select select option[disabled] { color: var(--gray); }
.select select { color: var(--dark); padding-right: 40px; }
.select select:has(option:checked[disabled]) { color: var(--gray); }
.select::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 26px;
  width: 14px;
  height: 8px;
  background: url('../assets/svg/select-arrow.svg') no-repeat center / 14px 8px;
  pointer-events: none;
}

.consent {
  position: relative;
  display: block;
  margin-top: 21px;
  padding-left: 34px;
  min-height: 38px;
  font-size: 16px;
  line-height: normal;
  color: var(--white);
  cursor: pointer;
}
.consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.consent__box {
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--white);
}
.consent input:checked + .consent__box::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  width: 6px;
  height: 11px;
  border: solid var(--dark);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.consent input:focus-visible + .consent__box { box-shadow: 0 0 0 2px var(--blue); }
.consent a { color: var(--light-blue); transition: color .2s ease; }
.consent a:hover { color: var(--blue); }
.consent__text { display: block; }

.form__submit { width: 100%; margin-top: 17px; }
.form .is-invalid .field,
.form .is-invalid.form__row .field { box-shadow: 0 0 0 2px #E5484D; }
.form .consent.is-invalid .consent__box { box-shadow: 0 0 0 2px #E5484D; }
.form__msg {
  display: none;
  margin-top: 12px;
  font-size: 14px;
  line-height: normal;
  color: var(--white);
  text-align: center;
}
.form__msg.is-visible { display: block; }
.form__msg.is-error { color: #FFD1D4; }
.form.is-sending .form__submit { opacity: .6; pointer-events: none; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  height: 902px;
  margin-top: 26px;
  background: var(--white) url('../assets/img/footer-bg.png') center top / cover no-repeat;
  background-image: image-set(url('../assets/img/footer-bg.webp') type('image/webp'), url('../assets/img/footer-bg.png') type('image/png'));
  overflow: hidden;
}
.footer__inner { position: relative; height: 100%; }
.footer__brand { position: absolute; left: 0; top: 89px; }
.footer__title {
  position: absolute;
  left: 0;
  top: 159px;
  font-size: 50px;
  line-height: 62px;
  font-weight: 500;
  white-space: nowrap;
}
.footer__place {
  position: absolute;
  left: 0;
  top: 363px;
  font-size: 21px;
  line-height: normal;
}
.footer__mail {
  position: absolute;
  left: 0;
  top: 400px;
  font-size: 21px;
  line-height: normal;
  font-weight: 500;
  transition: color .2s ease;
}
.footer__mail:hover { color: var(--blue); }
.social {
  position: absolute;
  left: 0;
  top: 502px;
  height: 36px;
}
.social li { position: absolute; top: 0; }
.social li:nth-child(1) { left: 0; }
.social li:nth-child(2) { left: 57px; }
.social li:nth-child(3) { left: 112px; }
.social a { display: block; }
.social__svg { display: block; }
.social__svg path { transition: fill .2s ease; }
/* Hover: el icono se tiñe de Soberania Blue */
.social a:hover .social__svg path { fill: var(--blue); }

/* --------------------------------------------------------------------------
   Anchos intermedios de escritorio (1024–1439): el diseño de 1440 se escala
   proporcionalmente. Pasos CSS como respaldo; main.js ajusta el factor exacto.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1151px) { body { zoom: .7111; } }
@media (min-width: 1152px) and (max-width: 1295px) { body { zoom: .8; } }
@media (min-width: 1296px) and (max-width: 1439px) { body { zoom: .9; } }

/* --------------------------------------------------------------------------
   Páginas legales (privacidad.html): misma cabecera, tipografías y pie
   -------------------------------------------------------------------------- */

.hero--legal { height: auto; }
.legal__head { padding: 118px 0 96px; }
.legal__date {
  font-size: 16px;
  line-height: normal;
  color: var(--light-blue);
}
.legal__title {
  margin-top: 16px;
  font-size: 75px;
  line-height: 80px;
  font-weight: 400;
  color: var(--white);
}
.legal { max-width: 820px; padding: 24px 0 120px; }
.legal__section { margin-top: 56px; }
.legal__note {              /* nota de traducción (solo en /en/) */
  margin-top: 40px;
  padding: 14px 18px;
  border-left: 2px solid var(--blue);
  background: var(--smoke);
  font-size: 16px;
  line-height: 24px;
  color: var(--dark);
}
.legal__note + .legal__section { margin-top: 40px; }
.legal__section:first-child { margin-top: 40px; }
.legal h2 {
  font-size: 28px;
  line-height: 36px;
  font-weight: 500;
}
.legal p,
.legal li {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 28px;
}
.legal strong { font-weight: 600; }
.legal ul { margin-top: 4px; }
.legal li { position: relative; padding-left: 22px; margin-top: 10px; }
.legal li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
}
.legal a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--dark); }
.legal__back { margin-top: 72px; }
.legal .btn { font-family: var(--font-sans); font-size: 16px; line-height: normal; margin-top: 8px; }
.legal__back .btn { padding: 12px 40px; }
.legal__back a { color: var(--white); text-decoration: none; }
.legal__back a:hover { color: var(--white); }

/* --------------------------------------------------------------------------
   Aviso de cookies y enlaces legales del pie
   -------------------------------------------------------------------------- */

.btn--outline {
  background: transparent;
  color: var(--white);
  box-shadow: inset 0 0 0 2px var(--white);
}
.btn--outline:hover { background: rgba(255, 255, 255, .1); opacity: 1; }

.cookies {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 50;
  width: 1204px;
  max-width: calc(100% - 40px);
  transform: translateX(-50%);
  border-radius: 15px;
  background: var(--dark);
  color: var(--white);
  box-shadow: 0 16px 48px rgba(2, 14, 26, .35);
  animation: cookiesIn .35s ease both;
}
.cookies[hidden] { display: none; }
@keyframes cookiesIn {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) { .cookies { animation: none; } }
.cookies__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 24px 32px;
}
.cookies__text {
  flex: 1 1 auto;
  font-size: 16px;
  line-height: 24px;
}
.cookies__text a { color: var(--light-blue); text-decoration: underline; text-underline-offset: 3px; }
.cookies__text a:hover { color: var(--blue); }
.cookies__actions { display: flex; gap: 12px; flex: 0 0 auto; }
.cookies__actions .btn { height: 50px; padding: 12px 28px; }

.footer__legal {
  position: absolute;
  left: 0;
  top: 566px;
  display: flex;
  gap: 24px;
  font-size: 14px;
  line-height: normal;
}
.footer__legal a { transition: color .2s ease; }
.footer__legal a:hover,
.footer__legal a:focus-visible { color: var(--blue); }

/* ==========================================================================
   MÓVIL (frame Mobile 390)
   ========================================================================== */

@media (max-width: 1023px) {

  .d-only { display: none !important; }
  .m-only { display: block !important; }
  span.m-only, br.m-only, img.m-only { display: inline !important; }
  img.m-only, svg.m-only { display: block !important; }

  .container,
  .nav {
    width: auto;
    max-width: none;
    margin-left: 20px;
    margin-right: 20px;
  }

  .btn { height: 60px; }

  .pill {
    height: 40px;
    padding: 0 22px;
    font-size: 18px;
    letter-spacing: -0.18px;
  }
  .pill--sobre { padding: 0 22px; }

  .display { font-size: 42px; line-height: 46px; }

  /* Hero */

  .legal__title { margin-top: 10px; font-size: 42px; line-height: 46px; }
  .legal { padding: 8px 0 72px; }
  .legal__section { margin-top: 40px; }
  .legal h2 { font-size: 22px; line-height: 30px; }
  .legal p, .legal li { font-size: 16px; line-height: 25px; }
  .legal__back .btn { width: 100%; }
  .hero {
    height: 844px;
    background-image: url('../assets/img/hero-bg-mobile.png');
    background-image: image-set(url('../assets/img/hero-bg-mobile.webp') type('image/webp'), url('../assets/img/hero-bg-mobile.png') type('image/png'));
  }
  .nav { height: 111px; }
  .nav__logo { top: 46px; height: 40px; display: flex; align-items: center; }   /* centrado vertical con botón y menú */
  .nav__logo img { width: 90px; }   /* wordmark; deja sitio al selector y al botón */
  .nav__links { display: none; }
  .nav__cta {
    right: 65px;            /* 390 - 20 - 305 */
    top: 46px;
    width: 137px;
    height: 40px;
    padding: 12px 28px;
    font-size: 16px;
  }
  .nav__menu {
    display: block !important;
    position: absolute;
    right: 0;
    top: 46px;
    width: 40px;
    height: 40px;
  }
  .lang { right: 212px; top: 46px; height: 40px; }   /* 65 + 137 + 10; solo "ES", sin chevron */
  .lang__btn { font-size: 14px; }
  .lang__btn img { display: none; }
  .lang__menu { right: auto; left: 0; }
  .menu {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 111px;
    z-index: 10;
    padding: 8px 20px 20px;
    background: rgba(2, 14, 26, .92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .menu[hidden] { display: none; }
  .menu a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-size: 18px;
    color: var(--white);
  }
  .menu li:last-child a { border-bottom: 0; }
  .menu a:hover { color: var(--blue); }

  .hero__title {
    top: 167px;
    left: 20px;
    right: 20px;
    width: auto;
    transform: none;
    font-size: 36px;
    line-height: 40px;
    white-space: normal;
  }
  /* En móvil el título es blanco plano, sin efecto (como en Figma) */
  .hero__title-layer--blur,
  .hero__title-layer--mid { display: none; }
  .hero__title-layer--sharp { -webkit-mask-image: none; mask-image: none; }
  .hero__sub {
    top: 414px;
    left: 20px;
    right: 20px;
    width: auto;
    transform: none;
    font-size: 18px;
  }
  .hero__cta {
    top: 652px;
    left: 20px;
    right: 20px;
    transform: none;
    flex-direction: column;
    gap: 18px;
  }
  .hero__cta .btn { width: 100%; }
  /* Con los textos reducidos, el bloque título + subtítulo + botones se centra
     verticalmente bajo la barra (111 px) con los mismos huecos del diseño: 31 y 38 px */
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 111px;
  }
  .nav { position: absolute; top: 0; left: 20px; right: 20px; margin: 0; }
  .hero__title, .hero__sub, .hero__cta { position: static; margin-left: 20px; margin-right: 20px; }
  .hero__sub { margin-top: 31px; }
  .hero__cta { margin-top: 38px; }
  .hero.hero--legal { height: auto; min-height: 0; justify-content: flex-start; padding-bottom: 0; }
  .cookies {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    transform: none;
    border-radius: 15px 15px 0 0;
  }
  @keyframes cookiesIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .cookies__inner { flex-direction: column; align-items: stretch; gap: 16px; padding: 20px 20px 24px; }
  .cookies__text { font-size: 15px; line-height: 22px; }
  .cookies__actions { flex-direction: column-reverse; gap: 10px; }
  .cookies__actions .btn { width: 100%; }
  .footer__legal { top: 470px; gap: 18px; }
  .hero--legal .legal__head { margin: 0 20px; padding: 32px 0 48px; }

  /* Líneas de negocio */
  .lineas { padding-top: 45px; }
  .cards {
    flex-direction: column;
    gap: 16px;
    margin-top: 30px;
  }
  .card {
    flex: none;
    height: 353px;
    padding: 30px 30px 0;
  }
  .card:first-child .card__icon { margin-left: 0; }
  .card::before { display: none; }
  .card__title {
    margin-top: 13px;
    font-size: 24px;
    line-height: 30px;
  }
  .card:first-child .card__title { line-height: 32px; }
  .card__body {
    width: 290px;
    margin-top: 36px;
    font-size: 16px;
    line-height: 24px;
  }
  .card:first-child .card__body { margin-top: 40px; }

  .partner__title { margin-top: 50px; }
  .partner__title { font-size: 30px; line-height: 34px; }
  .partner__text {
    width: auto;
    margin: 20px 0 0;
    font-size: 18px;
    line-height: 27px;
  }
  .esquemas {
    display: block;
    margin-top: 34px;
    padding-bottom: 45px;
  }
  .esquema + .esquema { margin-top: 26px; }
  .esquema__label {
    margin-top: 12px;
    max-width: 300px;       /* fuerza el salto antes de llegar a la orilla */
    font-size: 24px;
    line-height: 30px;
    white-space: normal;
  }

  /* Cómo trabajamos */
  .como { padding-top: 20px; }
  .como__title { font-size: 30px; line-height: 34px; }
  .como__cols {
    flex-direction: column;
    gap: 0;
    margin-top: 28px;
  }
  .como__left { width: auto; flex: none; }
  .como__photo { width: 100%; height: 124px; }
  .como__photo img {
    top: -31.2%;
    width: 112.86%;
    height: auto;
  }
  .como__text {
    margin-top: 28px;
    font-size: 18px;
    line-height: 26px;
  }
  .claves {
    width: auto;
    flex: none;
    margin-top: 35px;
  }
  .clave { padding-bottom: 15px; }
  .clave + .clave { padding-top: 15px; }
  .clave__title { font-size: 22px; line-height: 36px; }
  .clave__body {
    margin-top: 4px;
    font-size: 15px;
    line-height: 23px;
  }
  .pill--como { margin-top: 58px; }
  .proceso__title { margin-top: 40px; font-size: 30px; line-height: 34px; }
  .proceso__text {
    width: auto;
    margin: 27px 0 0;
    font-size: 18px;
    line-height: 26px;
  }
  .pasos { margin-top: 27px; }
  .paso__head { height: 86px; }
  .paso__num, .paso__title {
    top: 21px;
    font-size: 18px;
  }
  .paso__num { left: 19px; }
  .paso__title { left: 55px; }
  .paso__chevron {
    right: 21px;
    top: 27px;
    width: 32px;
    height: 32px;
  }
  .paso__body {
    width: auto;
    max-width: none;
    margin: 0 20px 24px 55px;
    font-size: 16px;
    line-height: 24px;
  }
  .como { padding-bottom: 50px; }

  /* LATAM */
  .latam { height: 1145px; margin-top: 0; }
  .latam__map {
    left: -8.46%;
    top: 0;
    width: 181.03%;
    height: auto;
  }
  .latam__fade { bottom: auto; height: 124.1vw; }
  .latam__title { padding-top: 89px; margin-left: 0; }
  .latam__sub {
    width: auto;
    max-width: none;
    margin: 20px 0 0;
    font-size: 30px;
    line-height: 33px;
  }
  .latam__text {
    width: auto;
    max-width: none;
    margin: 22px 0 0 2px;
    font-size: 18px;
    line-height: 25px;
  }
  .latam__cta {
    width: 100%;
    margin: 41px 0 0 2px;
  }
  .ventajas { top: 740px; height: auto; }
  .ventaja {
    position: static;
    height: 88px;
  }
  .ventaja + .ventaja { margin-top: 34px; }
  .ventaja__title { font-size: 24px; }
  .ventaja__body {
    margin-top: 11px;
    font-size: 16px;
    line-height: 24px;
    white-space: normal;
  }

  /* Sobre nosotros */
  .nosotros { padding-top: 32px; }
  .nosotros__title { margin-top: 19px; font-size: 30px; line-height: 33px; }
  .nosotros__cols {
    flex-direction: column;
    gap: 20px;
    margin-top: 26px;
  }
  .nosotros__photo {
    flex: none;
    width: 100%;
    height: 426px;
  }
  .nosotros__photo img {
    top: -4.93%;
    width: 112%;
    height: auto;
  }
  .nosotros__text {
    width: auto;
    flex: none;
    font-size: 18px;
    line-height: 26px;
  }
  .logos { height: 42px; margin-top: 36px; }
  .logos__madrid   { width: 86px; height: 42px; }
  .logos__delvy    { left: 146px; top: 12px !important; width: 58px; height: 17px; }   /* (350 - 58) / 2 */
  .logos__cardpack { left: 270px; top: 9px !important;  width: 80px; height: 27px; }

  /* Contacto */
  .contacto {
    height: 1156px;
    margin-top: 48px;
    background: var(--dark) url('../assets/img/contact-bg-mobile.png') center top / 104.1% auto no-repeat;
    background-image: image-set(url('../assets/img/contact-bg-mobile.webp') type('image/webp'), url('../assets/img/contact-bg-mobile.png') type('image/png'));
    overflow: hidden;
  }
  .contacto__title {
    top: 37px;
    width: auto;
    right: 0;
    font-size: 30px;
    line-height: 34px;
  }
  .form {
    left: -33px;
    right: -33px;
    top: 226px;            /* título (4 líneas) + ~1.75em de separación */
    width: auto;
    height: 886px;
    padding: 35px 33px;
    border-radius: 0;
  }
  .form::before { border-radius: 0; }
  .form__row { gap: 14px; flex-direction: column; }
  .form__row--2 > * { flex: none; }
  .form__row--area { margin-top: 14px !important; }
  .select--sector::after { display: none; }   /* en el diseño móvil "Sector" no muestra flecha */
  .select::after {
    right: 16px;
    top: 24px;
    width: 20px;
    height: 12px;
    background: url('../assets/svg/select-arrow-mobile.svg') no-repeat center / 20px 12px;
  }
  .consent {
    margin-top: 22px;
    padding-left: 32px;
    min-height: 32px;
    font-size: 13px;
  }
  .consent__box { top: 4px; }
  .consent a { font-weight: 500; }
  .consent__text { margin-top: -4px; }
  .form__submit { margin-top: 28px; }

  /* Footer */
  .footer {
    height: 646px;
    margin-top: 0;
    background: var(--white) url('../assets/img/footer-bg-mobile.png') center top / 100% auto no-repeat;
    background-image: image-set(url('../assets/img/footer-bg-mobile.webp') type('image/webp'), url('../assets/img/footer-bg-mobile.png') type('image/png'));
  }
  .footer__brand { top: 45.42px; }
  .footer__title {
    top: 98px;
    font-size: 30px;
    line-height: 34px;
    white-space: normal;
  }
  /* Títulos sin saltos de línea forzados: el texto se acomoda solo */
  .hero__title br, .como__title br, .latam__title br, .footer__title br,
  .card__title br, .esquema__label br, .partner__title br, .nosotros__title br,
  .proceso__title br { display: none; }
  .footer__place { top: 318px; font-size: 18px; }
  .footer__mail  { top: 348px; font-size: 18px; }
  .social { top: 418px; height: 30px; }
  .social li:nth-child(2) { left: 47px; }
  .social li:nth-child(3) { left: 93px; }

}