/* Home global · copia de web/provisional/index.html (abansa.com) hecha con
   .tooling/porta-home-global.py. No editar a mano: se regenera. */
/* ---------- Tipografía ---------- */
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/plex-300.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/plex-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/plex-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/plex-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/plex-700.woff2") format("woff2");font-weight:700;font-display:swap}
/* La display de la marca (Manual § 1.2). Se usa solo en los cuatro titulares
   de «Para quién trabajamos», que son los que hablan en voz del lector. */
@font-face{font-family:"Libre Baskerville";src:url("../fonts/bask-400i.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

/* ---------- Tokens de marca (Manual d'estil § 1.4) ---------- */
:root{
  --navy:#193C6A;
  --navy-deep:#0F2544;
  --orange:#F07D46;
  --cream:#F0E3B0;
  --paper:#FBFAF8;
  --warm-gray:#B4ACA2;
  --ease:cubic-bezier(.16,1,.3,1);
  /* Un único margen lateral para toda la página: cabecera, portada y
     secciones. Antes había tres distintos —36, 45 y 58 px a 890 de ancho— y
     el borde izquierdo se veía escalonado. */
  --gutter:clamp(1rem,3.2vw,2.5rem);
  --head:clamp(4.5rem,5.5vw,6rem);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--navy-deep);
  color:#fff;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}

/* ---------- Cabecera ---------- */
.head{
  position:fixed;inset:0 0 auto 0;z-index:40;
  height:var(--head);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--gutter);
  /* Sobre la portada va transparente, encima del vídeo. En cuanto el tríptico
     sale de pantalla aparece la barra blanca: a partir de ahí la página
     alterna claro y oscuro y el logotipo en blanco desaparecería. El estado
     lo marca el script con data-fijo. */
  pointer-events:none;
  background:transparent;
  border-bottom:1px solid transparent;
  color:#fff;
  transition:background .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease);
}
.head > *{pointer-events:auto}
.head[data-fijo="si"]{
  background:var(--paper);
  border-bottom-color:#E4E0DA;
  color:var(--navy);
}

.logo{display:inline-flex;flex-direction:column;align-items:flex-end;padding-top:.95rem;position:relative;line-height:1}
.logo__mark{position:absolute;top:-.1rem;right:.16rem;width:auto;height:1.12rem}
.logo__word{font-weight:700;font-size:2.1rem;letter-spacing:.06em;margin-right:-.06em}
.logo__claim{
  margin-top:.34rem;margin-right:-.28em;
  font-size:.58rem;font-weight:400;letter-spacing:.3em;
  color:rgba(255,255,255,.72);
  transition:color .45s var(--ease);
}
.head[data-fijo="si"] .logo__claim{color:rgba(25,60,106,.62)}

/* Selector de idioma */
.lang{position:relative;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.lang__btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.55rem 1rem;border:1px solid rgba(255,255,255,.3);border-radius:999px;
  /* Sin backdrop-filter: desenfocar el vídeo que corre por detrás se recalcula
     en cada fotograma. Un velo algo más opaco da el mismo contraste gratis. */
  background:rgba(15,37,68,.46);
  color:#fff;font:inherit;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  transition:border-color .4s var(--ease),background .4s var(--ease),color .4s var(--ease);
}
.lang__btn:hover{border-color:rgba(255,255,255,.65)}
.head[data-fijo="si"] .lang__btn{
  border-color:rgba(25,60,106,.24);background:none;color:var(--navy);
}
.head[data-fijo="si"] .lang__btn:hover{border-color:var(--orange);background:rgba(240,125,70,.07)}
.lang__btn svg{width:.62rem;height:.62rem;transition:transform .4s var(--ease)}
.lang[data-open="true"] .lang__btn svg{transform:rotate(180deg)}
.lang__list{
  position:absolute;top:calc(100% + .6rem);right:0;min-width:11rem;
  margin:0;padding:.4rem;list-style:none;
  background:#fff;
  border:1px solid #E4E0DA;border-radius:12px;box-shadow:0 18px 40px rgba(16,40,72,.12);
  opacity:0;transform:translateY(-.4rem);pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.lang[data-open="true"] .lang__list{opacity:1;transform:none;pointer-events:auto}
.lang__list button{
  display:flex;width:100%;align-items:center;justify-content:space-between;gap:1rem;
  padding:.62rem .8rem;border:0;border-radius:8px;background:none;
  color:#57544F;font:inherit;letter-spacing:.1em;text-transform:none;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.lang__list button:hover{background:#F4F2EF;color:var(--navy)}
.lang__list button[aria-current="true"]{color:var(--navy);font-weight:600}
.lang__list button[aria-current="true"]::after{content:"";width:.42rem;height:.42rem;background:var(--orange)}


/* ---------- Rejilla de oficinas ---------- */
.oficinas{
  display:flex;width:100%;
  /* La barra flota transparente encima: el tríptico ocupa la pantalla entera.
     El contraste del logotipo lo sostiene el velo de cabecera de cada bloque. */
  position:relative;
  height:100vh;height:100dvh;
}

.of{
  position:relative;flex:1 1 0;min-width:0;
  display:block;overflow:hidden;
  border-right:1px solid rgba(255,255,255,.14);
}
.of:last-child{border-right:0}
/* Las columnas NO cambian de ancho al pasar el cursor: si una crece, las otras
   se encogen, los bordes se desplazan y todo el texto se va de lado.
   El resalte se hace con luz, velo y color, como pide la nota del 13.09. */

/* Medio */
.of__media{position:absolute;inset:0;overflow:hidden;isolation:isolate}
.of__media img,.of__media video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transform:scale(1.08);
  /* Sin filtros CSS sobre el vídeo: el color va cocinado en el propio
     archivo. Un filtro sobre vídeo en reproducción cuesta un paso de
     composición por fotograma y hacía temblar la imagen al pasar el cursor. */
  transition:transform 1.4s var(--ease);will-change:transform;
}
/* Al pasar el cursor solo cambia el encuadre. Animar filtros sobre tres
   vídeos a la vez hacía tartamudear la reproducción. */
.of:hover .of__media img,.of:hover .of__media video{transform:scale(1.03)}
/* Pase de vídeos: tres por sede. Cuando acaba uno entra el siguiente con un
   fundido, y tras el tercero vuelve el primero. Solo se ve el activo. */
.of__media{background:var(--navy-deep)}
/* Con dos clases para ganar a «.of__media video», que es quien fija la
   transición de transform y filter: sin esto el fundido no se aplica. */
.of__media .of__slide{opacity:0;transition:opacity 1.6s ease-in-out,transform 1.4s var(--ease)}
.of__media .of__slide.activa{opacity:1}
/* El que sale sigue reproduciéndose mientras se apaga: así el fundido es
   entre dos imágenes en movimiento, no contra un fotograma congelado. */
.of__slide.saliendo{opacity:0}
.of__puntos{
  position:absolute;z-index:3;top:calc(var(--head) + .4rem);right:clamp(1.2rem,2.4vw,2rem);
  display:flex;gap:.45rem;pointer-events:none;
}
.of__puntos i{display:block;width:.5rem;height:.5rem;border-radius:50%;background:rgba(240,125,70,.38);transition:background .5s var(--ease),transform .5s var(--ease)}
.of__puntos i.activa{background:var(--orange);transform:scale(1.25)}

/* Velo corporativo en dos capas.
   La superior se abre al pasar el cursor; la inferior nunca se va:
   es la cama oscura que garantiza el contraste del texto. */
.of__velo{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(15,37,68,.04) 0%,rgba(15,37,68,.06) 45%,rgba(25,60,106,.1) 100%);
  transition:opacity .9s var(--ease);
}
/* Sólo se abre el velo general: las camas de cabecera y pie se quedan,
   son las que sostienen el contraste del texto también en hover. */
.of:hover .of__velo:not(.of__velo--pie):not(.of__velo--cab){opacity:.25}

/* Cama superior: el vídeo de Andorra abre en cielo claro y el logotipo se
   quedaría sin contraste. Va dentro del bloque, no en la cabecera: si va en
   la cabecera se pinta por encima de los números 01/02/03 y los apaga. */
.of__velo--cab{
  position:absolute;inset:0 0 auto 0;height:30%;
  background:linear-gradient(to bottom,rgba(11,29,54,.62) 0%,rgba(11,29,54,.26) 55%,rgba(11,29,54,0) 100%);
}

/* La cama del texto: ésta sí es opaca, es la que sostiene el contraste */
.of__velo--pie{
  position:absolute;inset:auto 0 0 0;height:58%;
  background:linear-gradient(to top,rgba(11,29,54,.88) 0%,rgba(11,29,54,.68) 32%,rgba(11,29,54,.36) 64%,rgba(11,29,54,0) 100%);
}

/* Los tres bloques llevan vídeo de su ciudad: Andorra la Vella, Barcelona y Dubái.
   Barcelona va de día y con arena clara: sale más luminosa que las otras dos, que
   son de atardecer y de noche. Se baja aquí para que las tres pesen igual y para
   que el rótulo naranja ESPAÑA aguante sobre la playa. Un solo número que tocar. */

/* Grano fino, mantiene la superficie viva.
   Sin mix-blend-mode: fundir una capa del cuádruple del bloque contra un vídeo
   que corre obliga al navegador a recomponerla en cada fotograma, por tres
   bloques a la vez, y era lo que atascaba el scroll de la portada. Con opacidad
   sola se ve prácticamente igual y no cuesta nada. */
.of__grano{
  position:absolute;inset:-20%;opacity:.035;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grano 7s steps(6) infinite;
}
@keyframes grano{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}
}

/* El vídeo cambia de fotograma todo el rato: un degradado ajustado a un
   plano falla en el siguiente. La sombra protege el texto pase lo que pase. */
.of__num,.of__pais{
  text-shadow:0 0 4px rgba(11,29,54,.95),0 1px 10px rgba(11,29,54,.9),0 2px 24px rgba(11,29,54,.8);
}
.of__desc{text-shadow:0 0 3px rgba(11,29,54,.85),0 1px 14px rgba(11,29,54,.9)}
.of__nombre{text-shadow:0 2px 28px rgba(11,29,54,.75),0 1px 5px rgba(11,29,54,.5)}

/* Corrección óptica de «UAE».
   Las tres palabras comparten línea base — medido, coinciden al decimal — pero
   «UAE» son tres versales llenas, mientras «Andorra» y «Spain» llevan una
   mayúscula y el resto en caja baja, y «Spain» además cuelga la «p» 12 px por
   debajo de la base. El centro de masa de las versales queda más alto y la
   palabra se lee levantada. Se baja 0,05em: lo justo para igualar a la vista
   sin que la línea base se note rota. */
.of--uae .of__nombre{transform:translateY(.05em)}

/* Contenido */
.of__inner{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--gutter);
  /* Más aire abajo del que pide el texto: deja respirar los botones y libera
     el centro del borde inferior para la flecha, que va justo debajo del
     bloque del medio. */
  padding-bottom:clamp(5.5rem,12vh,8rem);
}

.of__num{
  position:absolute;top:calc(var(--head) + .25rem);left:var(--gutter);
  font-size:.72rem;font-weight:500;letter-spacing:.24em;
  color:rgba(255,255,255,.8);
}
.of__num::before{
  content:"";display:block;width:2.25rem;height:1px;margin-bottom:.9rem;
  background:var(--orange);transform-origin:left;transform:scaleX(.42);
  transition:transform .9s var(--ease);
}
.of:hover .of__num::before{transform:scaleX(1)}

.of__nombre{
  margin:0;font-size:clamp(2.1rem,3.6vw,3.6rem);font-weight:600;
  letter-spacing:-.022em;line-height:.94;color:#fff;
}
.of__pais{
  display:block;margin-bottom:.85rem;
  font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--orange);
}

.of__desc{
  margin:1.15rem 0 0;max-width:24rem;
  font-size:1rem;font-weight:300;line-height:1.55;
  color:rgba(255,255,255,.78);
  /* Tres líneas reservadas siempre (3 × 1.55em). El contenido va pegado abajo:
     si una descripción ocupa dos líneas y otra tres, el nombre de ese bloque
     sube y los tres rótulos dejan de estar a la misma altura. En em, para que
     siga cuadrando cuando en móvil baja el cuerpo de letra. */
  min-height:4.65em;
  transition:font-weight .3s var(--ease),color .3s var(--ease);
  opacity:0;transform:translateY(.7rem);
  transition:opacity .7s var(--ease) .06s,transform .7s var(--ease) .06s;
}
.of:hover .of__desc{font-weight:600;color:rgba(255,255,255,.94);opacity:1;transform:none}

/* Botón «Ir a la oficina» */
.of__cta{
  display:inline-flex;align-items:center;gap:.85rem;align-self:flex-start;
  margin-top:1.6rem;padding:.9rem 1.5rem;
  border:1px solid rgba(255,255,255,.38);border-radius:999px;
  white-space:nowrap;
  font-size:.82rem;font-weight:500;letter-spacing:.08em;
  /* Sin backdrop-filter, como el resto de lo que va sobre el vídeo: eran tres
     botones desenfocando tres vídeos a la vez. */
  background:rgba(11,29,54,.34);
  transition:background .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease);
}
.of__cta svg{width:.82rem;height:.82rem;transition:transform .5s var(--ease)}
.of:hover .of__cta{background:var(--orange);border-color:var(--orange);color:#fff}
.of:hover .of__cta svg{transform:translateX(.28rem)}

/* ---------- Entrada escalonada ----------
   En CSS puro, no por JS: una pestaña abierta en segundo plano no ejecuta
   requestAnimationFrame y la página se quedaría en blanco. */
@keyframes entra{from{opacity:0;transform:translateY(2.5rem)}to{opacity:1;transform:none}}
@keyframes aparece{from{opacity:0}to{opacity:1}}

.of{animation:entra 1.1s var(--ease) both}
.of:nth-child(1){animation-delay:.08s}
.of:nth-child(2){animation-delay:.2s}
.of:nth-child(3){animation-delay:.32s}
.head{animation:aparece 1s var(--ease) .5s both}


/* ---------- Móvil: todo visible desde el inicio ---------- */
@media (max-width:860px){
  :root{--head:4.25rem}
  html,body{height:auto}
  body{overflow:auto}

  /* En vertical la cabecera queda fija arriba y siempre visible, con fondo
     de papel porque no hay vídeo detrás que la sostenga. El cuerpo reserva
     su alto para que no tape el principio de la página. */
  body{padding-top:var(--head)}
  .head{position:fixed;inset:0 0 auto 0;background:var(--paper);border-bottom-color:#E4E0DA;color:var(--navy)}
  .head .logo__claim{color:rgba(25,60,106,.62)}
  .head .lang__btn{border-color:rgba(25,60,106,.24);background:none;color:var(--navy)}
  .oficinas{flex-direction:column;height:auto;min-height:0;padding-top:0}
  /* Apilados y pegados se leían como una sola imagen larga. En vertical
     pasan a ser tarjetas, el mismo lenguaje que el resto de la página. */
  .oficinas{gap:.7rem;padding:0 var(--gutter) .7rem;background:var(--paper)}
  .of{flex:none;height:clamp(19rem,32dvh,24rem);border-right:0;border-radius:20px}
  /* En vertical el número entra en el flujo: si se queda absoluto
     choca con el rótulo del país cuando el bloque es bajo. */
  .of__num{position:static;margin-bottom:1.1rem}
  .of__num::before{transform:scaleX(1);margin-bottom:.7rem}
  .of__media img,.of__media video{transform:scale(1)}
  .of__velo:not(.of__velo--pie):not(.of__velo--cab){opacity:.5}
  .of__desc{opacity:1;transform:none;font-size:.94rem}
  .of__puntos{top:1.1rem;right:1.1rem}
  .of__cta{margin-top:1.25rem;background:var(--orange);border-color:var(--orange)}
  .of__inner{padding-bottom:2rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .of,.head{opacity:1;transform:none}
}

/* ---------- Flecha: hay más debajo ----------
   Va encima del vídeo, no en una franja propia: la franja azul cortaba el
   tríptico antes de tiempo y se veía como una barra pegada. Aquí flota sobre
   el último tramo del vídeo, donde el velo de pie ya oscurece la imagen, así
   que se lee sobre cualquier fotograma.

   Naranja y con sombra: es el único elemento que invita a seguir bajando y
   antes, en blanco fino sobre vídeo, se perdía. */
.franja-baja{
  /* Centrada. Cabe porque los botones de los tres bloques suben: antes caía
     justo encima del de «Ir al sitio de Spain». */
  position:absolute;left:0;right:0;bottom:clamp(.9rem,1.8vw,1.3rem);z-index:4;
  display:grid;place-items:center;
  pointer-events:none;
}
/* El isotipo de Abansa girado un cuarto de vuelta: los cinco cuadrados salen
   en diagonal y vuelven, y de canto apuntan hacia abajo. No se deforma el
   logotipo, solo se gira el dibujo original. */
.baja{
  pointer-events:auto;
  display:grid;place-items:center;
  width:3.4rem;height:2.4rem;
  animation:late 2.8s var(--ease) infinite;
  transition:transform .4s var(--ease);
}
.baja:hover{transform:translateY(5px)}
.baja svg{width:2.8rem;height:1.6rem;display:block;filter:drop-shadow(0 2px 9px rgba(11,29,54,.7))}
@keyframes late{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.baja{animation:none}.baja::before{animation:none;opacity:0}}
@media (max-width:860px){
  .franja-baja{
    position:fixed;bottom:1.1rem;left:var(--gutter);right:auto;z-index:40;
    justify-items:start;
    opacity:1;transition:opacity .4s var(--ease);
  }
  .franja-baja[data-visible="no"]{opacity:0;pointer-events:none}
  /* Un disco, como el botón de WhatsApp de la esquina opuesta: la flecha va
     fija y acaba cayendo sobre cualquier cosa —un titular blanco, una foto
     clara—, y el trazo fino solo se leía sobre fondo oscuro. Más pequeña que
     el de WhatsApp: esto acompaña, no es la acción principal. */
  .baja{
    position:relative;isolation:isolate;
    width:3.7rem;height:3.7rem;padding:0;
    background:var(--navy-deep);border-radius:50%;
    box-shadow:0 10px 24px -8px rgba(10,10,10,.45);
  }
  .baja svg{position:relative;z-index:1;width:1.8rem;height:1.05rem;filter:none}
  /* El pulso, igual que el de WhatsApp pero azul: un disco del mismo color
     que crece por detrás y se desvanece. Va en un pseudoelemento para no
     tocar el marcado. */
  .baja::before{
    content:"";position:absolute;inset:0;z-index:-1;
    border-radius:50%;background:var(--navy-deep);
    animation:baja-pulso 2s ease-out infinite;
  }
  @keyframes baja-pulso{
    0%{transform:scale(1);opacity:.55}
    100%{transform:scale(1.7);opacity:0}
  }
}
/* En pantallas bajas no cabe por debajo de los botones sin tocarlos. */
@media (max-height:640px){.franja-baja{display:none}}

/* ====================================================================
   Parte baja de la home — secciones alternas, claro y oscuro.

   Cada sección declara su propia paleta en variables y el resto de las
   reglas tiran de ellas. Así el mismo componente —fichas, filtro, líneas—
   funciona en los dos fondos sin duplicar una sola regla.

   El naranja se reserva igual en los dos: marca el rótulo, el progreso del
   carrusel, el foco del teclado y el estado activo, y nada más.
   ==================================================================== */

.sec{
  position:relative;
  background:var(--fondo);
  color:var(--texto);
  padding:clamp(4.5rem,9vw,8rem) 0;
}
.sec--claro{
  --fondo:var(--paper);
  --titulo:var(--navy);
  --texto:#57544F;
  --tenue:#8C867D;
  --linea:#E4E0DA;
  --linea-fina:#EDEAE4;
  --tarjeta:#FFFFFF;
  --tarjeta-alta:#FFFDF9;
}
.sec--oscuro{
  /* El navy del manual (#193C6A), no el derivado más oscuro: a pantalla
     completa aquel pesaba demasiado. El profundo se queda solo donde hace de
     cama bajo el vídeo de la portada. */
  --fondo:var(--navy);
  --titulo:var(--paper);
  --texto:rgba(251,250,248,.74);
  --tenue:var(--warm-gray);
  --linea:rgba(251,250,248,.28);
  --linea-fina:rgba(251,250,248,.14);
  --tarjeta:var(--navy);
  --tarjeta-alta:#20497E;
}
.sec--primera{padding-top:clamp(3.5rem,7vw,6rem)}
/* Dos secciones seguidas suman sus rellenos y abren un hueco enorme: el de
   abajo de la primera y el de arriba de la segunda. Hay que recortar LOS DOS
   —recortar solo el de arriba no se nota, porque el grande es el de abajo—.
   Sin filete: el título de la sección ya marca la división de sobra.

   La clase va en el marcado en vez de usar :has(), porque si el navegador no
   lo soportara volvería el hueco entero sin avisar. */
.sec--sigue{padding-bottom:clamp(1.8rem,3.6vw,2.8rem)}
.sec--sigue + .sec{padding-top:clamp(1.2rem,2.4vw,1.9rem)}
/* En vertical los clamp de arriba tocan fondo y las secciones quedaban a
   48 px unas de otras: en una pantalla estrecha eso se lee como un solo
   bloque largo. Se sube el suelo sin tocar el escritorio. */
@media (max-width:620px){
  .sec--sigue{padding-bottom:2.6rem}
  .sec--sigue + .sec{padding-top:2.2rem}
  .sec.sec--aire{padding-top:3rem}
}

/* Excepción: Contacto arranca con más aire. Es el cambio de azul a papel y
   necesita respirar más que dos secciones del mismo color seguidas.
   Va después y con la misma especificidad, así que gana. */
.sec.sec--aire{padding-top:clamp(2.8rem,5.5vw,4.4rem)}
.env{width:min(100% - var(--gutter)*2,1320px);margin-inline:auto}

/* ---------- Rótulos y títulos ---------- */
.rotulo{
  display:flex;align-items:center;gap:.7rem;margin:0;
  font-size:.75rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--titulo);
}
/* Sobre azul, blanco; sobre papel, el navy del título. En gris se perdían. */
.sec--oscuro .rotulo{color:var(--paper)}
.rotulo i{width:.5em;height:.5em;background:var(--orange);flex:none}
.sec h1,.sec h2{
  margin:1.1rem 0 0;max-width:20ch;
  font-size:clamp(1.75rem,3vw,2.5rem);font-weight:600;line-height:1.08;letter-spacing:-.03em;
  color:var(--titulo);
}
.lede{margin:1.1rem 0 0;max-width:58ch;font-size:1rem;font-weight:300;line-height:1.7}
/* El H1 es una frase larga: más ancho que los h2 de sección para que no se
   parta en cuatro líneas. */
#que-hacemos h1{max-width:none}
/* Las tres jurisdicciones en su propia línea y en naranja. */
#que-hacemos h1 .paises{display:block;font-style:normal;color:var(--orange)}
#que-hacemos .lede{max-width:none}
.sec--claro .lede{font-weight:400}
.sec__cab{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(1rem,3vw,2.5rem);flex-wrap:wrap}

/* ---------- Qué hacemos: carrusel de fichas ----------
   Es un carrusel nativo: una tira con scroll horizontal y puntos de anclaje.
   Arrastrando, con la rueda, con el dedo o con el teclado funciona aunque el
   JavaScript no llegue a ejecutarse; los botones los añade el script y solo
   aparecen si hay algo que desplazar. */
.carrusel{position:relative;margin-top:clamp(2.5rem,5vw,4rem)}
.carrusel__tira{
  /* --hueco es el espacio entre fichas: las fichas se miden con él para que en
     la columna quepa siempre un número entero y ninguna salga cortada en el borde. */
  --hueco:clamp(1rem,2vw,1.5rem);
  display:flex;align-items:stretch;gap:var(--hueco);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  /* La tira se queda dentro de la columna: su borde derecho es el mismo
     que el de «Nuestras redes» y el resto de bloques (revisión de Karima). */
  padding:.4rem 0 1.6rem;
  scrollbar-width:thin;scrollbar-color:var(--linea) transparent;
}
.carrusel__tira::-webkit-scrollbar{height:3px}
.carrusel__tira::-webkit-scrollbar-track{background:var(--linea-fina)}
.carrusel__tira::-webkit-scrollbar-thumb{background:var(--linea)}
/* Con JavaScript la barra del navegador se cambia por una propia, que dice lo
   mismo pero en naranja y a la altura del resto. Sin JavaScript se queda la
   del navegador, que es la que hace falta para saber que hay más fichas. */
.carrusel--guiado .carrusel__tira{scrollbar-width:none}
.carrusel--guiado .carrusel__tira::-webkit-scrollbar{display:none}
.area{
  /* Cuatro fichas enteras en la columna (tres, dos o una al estrecharse): la tira
     acaba en el borde de la columna, como pidió Karima, sin dejar media ficha. */
  flex:0 0 calc((100% - 3*var(--hueco))/4);scroll-snap-align:start;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--tarjeta);border:1px solid var(--linea-fina);border-radius:20px;
  transition:border-color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease);
}
.area:hover{border-color:var(--orange);transform:translateY(-3px);box-shadow:0 20px 40px rgba(16,40,72,.10)}
.sec--oscuro .area:hover{background:var(--tarjeta-alta);box-shadow:none}
/* Fotos del banco de marca de Abansa. Van sin texto alternativo a propósito:
   acompañan, no informan —lo que hay que leer está en el título— y así no
   obligan a mantener una descripción en tres idiomas. */
.area__foto{
  /* height:auto y flex:none son necesarios: como ítem flex, la imagen tomaba
     como altura definitiva el atributo height del marcado y se ignoraba el
     aspect-ratio, así que la ficha salía larguísima. */
  display:block;width:100%;height:auto;flex:none;
  aspect-ratio:3/2;object-fit:cover;
  border-bottom:1px solid var(--linea-fina);
  transition:transform 1.1s var(--ease);
}
.area:hover .area__foto{transform:scale(1.04)}
.area__cuerpo{display:flex;flex-direction:column;padding:clamp(1.3rem,2.2vw,1.7rem)}
.area h3{
  margin:0 0 .7rem;padding-top:1.1rem;position:relative;
  font-size:1.1875rem;font-weight:600;letter-spacing:-.015em;color:var(--titulo);
}
.area h3::before{
  content:"";position:absolute;top:0;left:0;width:1.4rem;height:2px;background:var(--orange);
  transition:width .45s var(--ease);
}
.area:hover h3::before{width:3.2rem}
.area p{margin:0;font-size:.9375rem;font-weight:300;line-height:1.65}
.sec--claro .area p{font-weight:400}

/* Mandos del carrusel: los pone el script, no están en el marcado */
.carrusel__pie{display:flex;align-items:center;gap:clamp(1rem,3vw,2rem);margin-top:.6rem}
/* Si todas las fichas caben, no hay nada que mandar: ni barra ni flechas. */
.carrusel__pie[hidden]{display:none}
.carrusel__mandos{display:flex;gap:.5rem;align-items:center;flex:none}
/* Barra de avance: el carro ocupa la parte vista del total y se desliza.
   Da la medida de cuánto queda, que una flecha sola no da. */
/* Sin pista gris: cruzaba la página de lado a lado y parecía un separador,
   no un indicador. Se queda solo el carro naranja, que es el que informa. */
.carrusel__barra{position:relative;flex:1 1 auto;height:2px;background:transparent;border-radius:2px}
.carrusel__barra span{
  position:absolute;top:0;bottom:0;left:0;border-radius:2px;background:var(--orange);
  width:var(--parte,30%);transform:translateX(var(--avance,0));
  transition:transform .25s linear,width .3s var(--ease);
}
.carrusel__boton{
  width:2.6rem;height:2.6rem;flex:none;
  display:grid;place-items:center;
  border:1px solid var(--linea);border-radius:999px;background:none;
  color:var(--titulo);cursor:pointer;
  transition:border-color .35s var(--ease),color .35s var(--ease),opacity .35s var(--ease);
}
.carrusel__boton svg{width:.85rem;height:.85rem}
.carrusel__boton:hover:not(:disabled){border-color:var(--orange);color:var(--orange)}
.carrusel__boton:disabled{opacity:.3;cursor:default}

/* ---------- Abansa Real Estate ----------
   Franja propia debajo de las áreas, no una novena ficha. De ficha se leería
   como un servicio más del despacho y es otra línea de negocio: en franja, con
   el fondo invertido respecto a las tarjetas, se entiende que es hermana.
   Sin enlace mientras su web no exista: una página vacía hace más daño. */
.linea{
  /* Dentro de la columna, con los mismos bordes que el resto de la página.
     Antes se salía hasta casi tocar la pantalla y quedaba más ancha que todo
     lo demás, que es lo que descuadraba el bloque. */
  margin:clamp(1.3rem,2.8vw,2rem) 0 0;
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);flex-wrap:wrap;
  padding:clamp(2.2rem,4vw,3.2rem) clamp(1.6rem,3vw,2.6rem);
  background:var(--navy);color:rgba(251,250,248,.8);
  border-radius:20px;
  box-shadow:0 14px 30px -20px rgba(16,40,72,.32);
  position:relative;overflow:hidden;
}
/* La trama se sale por la derecha: se ve un trozo, no el dibujo entero. */
.linea__trama{top:50%;right:-4.5rem;translate:0 -50%;width:min(15rem,34vw);color:var(--orange);opacity:.09}
@media (max-width:620px){.linea__trama{opacity:.06}}
/* Los hijos no están posicionados y la trama sí: sin esto quedaría encima. */
.linea__txt,.linea__pronto{position:relative;z-index:1}
.linea__txt{min-width:0}
.linea__rotulo{margin:0;font-size:.75rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--orange)}
.linea h3{margin:.7rem 0 .55rem;font-size:clamp(1.35rem,2.2vw,1.8rem);font-weight:600;letter-spacing:-.025em;line-height:1.1;color:var(--paper)}
.linea p{margin:0;font-size:.9375rem;font-weight:300;line-height:1.7;max-width:64ch}
.linea__pronto{
  margin-left:auto;flex:none;padding:.62rem 1.1rem;
  border:1px solid rgba(251,250,248,.32);border-radius:999px;
  font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(251,250,248,.8);
}
/* En móvil la franja se lee de arriba abajo. Con `block` el texto y la
   etiqueta arrancan los dos en el borde del relleno, que es lo que hacía que
   no cuadraran: en flex la etiqueta quedaba descolgada. */
@media (max-width:620px){
  .linea{display:block;padding-inline:clamp(1.3rem,5vw,1.8rem)}
  .linea__pronto{display:inline-block;margin:1.5rem 0 0}
}

/* ---------- Agenda ----------
   Dos columnas: a la izquierda el motivo y el correo, a la derecha la hora.
   Mismo panel que el boletín, para que las dos llamadas a la acción de la
   página se lean como hermanas. */
.agenda{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:start;gap:clamp(1.6rem,4vw,3rem);
  margin-top:clamp(1.8rem,3.6vw,2.8rem);
  padding:clamp(1.6rem,3.2vw,2.4rem);
  background:rgba(251,250,248,.055);
  border:1px solid rgba(251,250,248,.16);
  border-radius:24px;
}
@media (max-width:860px){.agenda{grid-template-columns:1fr}}
.agenda__txt{min-width:0}
.agenda__txt h3{margin:.7rem 0 0;font-size:1.375rem;font-weight:600;letter-spacing:-.02em;color:var(--titulo)}
.agenda__txt p{margin:.7rem 0 0;font-size:.9375rem;font-weight:300;line-height:1.7;max-width:40ch}
.agenda__correo a{color:var(--paper);border-bottom:1px solid rgba(240,125,70,.55);font-weight:400}
/* El correo general, grande, bajo el titular: es la vía por defecto. */
.agenda__mail{
  display:inline-block;margin-top:.9rem;
  font-size:clamp(1.25rem,2.4vw,1.7rem);font-weight:500;letter-spacing:-.02em;line-height:1.2;
  color:var(--paper);border-bottom:2px solid var(--orange);padding-bottom:.1rem;
  transition:color .35s var(--ease);
}
.agenda__mail:hover{color:var(--orange)}
/* Entre el panel del formulario y las tarjetas de oficina, aire de sección. */
.agenda + .lede{margin-top:clamp(2.6rem,5vw,4rem)}
.agenda__hueco h3{margin:.4rem 0 0;font-size:1.375rem;font-weight:600;letter-spacing:-.02em;color:var(--titulo)}
.agenda__hueco .agenda__cita{margin:.5rem 0 1rem;font-size:.9375rem;font-weight:300;line-height:1.7}
.agenda__correo a:hover{border-color:var(--orange);color:var(--orange)}
/* Formulario general: sobre azul, así que hereda los tonos de la sección
   oscura en vez de los del formulario de las sedes, que va sobre blanco. */
.form-gen{display:grid;gap:.9rem;margin-top:1.3rem}
.form-gen__fila{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media (max-width:520px){.form-gen__fila{grid-template-columns:1fr}}
.form-gen label{display:grid;gap:.4rem;min-width:0}
.form-gen__etq{font-size:.8125rem;font-weight:600;color:var(--titulo)}
.form-gen input,.form-gen select,.form-gen textarea{
  width:100%;padding:.8rem 1rem;border-radius:12px;
  border:1px solid rgba(251,250,248,.28);background:rgba(251,250,248,.07);
  color:var(--paper);font:inherit;font-size:.9375rem;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.form-gen select option{color:#151719}
.form-gen textarea{resize:vertical;min-height:6rem}
.form-gen input:focus,.form-gen select:focus,.form-gen textarea:focus{
  outline:none;border-color:var(--orange);background:rgba(251,250,248,.12);
}
.form-gen label.form-gen__check{display:flex;align-items:center;gap:.6rem;font-size:.8125rem;line-height:1.55;color:var(--texto)}
.form-gen__check input{width:1.05rem;height:1.05rem;flex:none;margin:0;accent-color:var(--orange)}
.form-gen__check a{color:var(--paper);text-decoration:underline;text-underline-offset:2px}
.form-gen__check a:hover{color:var(--orange)}
.form-gen__pie{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-top:.2rem}
.form-gen__pie .agenda__correo{margin:0}
.form-gen button{
  padding:.9rem 1.7rem;border:1px solid var(--orange);border-radius:12px;
  background:var(--orange);color:#fff;font:inherit;font-size:.9375rem;font-weight:600;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.form-gen button:hover{background:transparent;color:var(--orange)}
.trampa{position:absolute;left:-9999px}

.agenda__hueco{min-width:0}
.agenda__respaldo{
  display:grid;gap:1rem;justify-items:start;
  padding:clamp(1.2rem,2.4vw,1.6rem);
  background:rgba(251,250,248,.06);border:1px solid rgba(251,250,248,.14);border-radius:18px;
}
.agenda__respaldo p{margin:0;font-size:.9375rem;font-weight:300;line-height:1.65}
.agenda__wa{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.85rem 1.4rem;border-radius:999px;
  background:var(--orange);color:#fff;font-size:.9375rem;font-weight:500;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.agenda__wa:hover{background:#e06c33;color:#fff}
.agenda__wa svg{width:1.05rem;height:1.05rem;flex:none}
/* El widget de Calendly trae su propio alto; aquí solo se le da sitio. */
/* Altura explícita, no min-height: el iframe de Calendly va a `height:100%`
   y un porcentaje contra una altura automática colapsa a 150 px, que es lo
   que se veía: una franja blanca cortada. */
.agenda__hueco .calendly-inline-widget{
  width:100%;height:46rem;min-width:20rem;
  border-radius:18px;overflow:hidden;background:#fff;
}
/* Apilado y estrecho, Calendly reparte en vertical y necesita más sitio. */
@media (max-width:860px){.agenda__hueco .calendly-inline-widget{height:64rem}}

/* ---------- Trama de la identidad ----------
   Una de las «jocs d'isotip» que nos pasó Abansa: el chevron de cinco
   cuadrados repetido en campo. Va siempre de marca de agua, detrás del
   contenido, nunca como contenido: por eso es decorativa y no lleva texto
   alternativo. El archivo guarda solo el alfa —negro transparente—, así que
   el color lo pone el CSS y un único fichero sirve para cualquier tinte. */
.trama{
  position:absolute;z-index:0;pointer-events:none;
  aspect-ratio:1200/1324;background:currentColor;
  -webkit-mask:url(../img/marca/trama-chevrones.webp) no-repeat center/contain;
          mask:url(../img/marca/trama-chevrones.webp) no-repeat center/contain;
}
/* Sin soporte de máscara saldría un rectángulo de color macizo encima del
   texto: en ese caso es mejor no pintar nada. */
@supports not ((-webkit-mask-image:url(a.webp)) or (mask-image:url(a.webp))){
  .trama{display:none}
}

/* ---------- Actualidad ---------- */
.filtro{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
/* display:flex/grid gana a [hidden], que solo vale display:none por defecto:
   sin esto, ocultar el filtro o la rejilla desde JS no surte efecto. */
.filtro[hidden],.notas[hidden],.actualidad__vacio[hidden],.agenda__respaldo[hidden]{display:none}
.filtro button{
  padding:.46rem 1rem;border:1px solid var(--linea);border-radius:999px;
  background:none;color:var(--texto);
  font:inherit;font-size:.8125rem;font-weight:400;letter-spacing:.04em;cursor:pointer;
  transition:border-color .35s var(--ease),color .35s var(--ease),background .35s var(--ease);
}
.filtro button:hover{border-color:var(--titulo);color:var(--titulo)}
.filtro button[aria-pressed="true"]{background:var(--titulo);border-color:var(--titulo);color:var(--fondo)}
/* Las entradas son fichas de carrusel, como las áreas, pero con la foto en
   apaisado 16:9: aquí la imagen es el sitio o la escena de la entrada, no un
   acompañamiento, y en vertical no se leería. */
.nota{
  /* Tres fichas exactas a lo ancho de la columna; en pantallas estrechas no
     bajan de 18 rem y la tira se desplaza. */
  flex:0 0 calc((100% - 2*var(--hueco))/3);scroll-snap-align:start;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--tarjeta);border:1px solid var(--linea-fina);border-radius:20px;
  transition:border-color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease);
}
.nota:hover{border-color:var(--orange);transform:translateY(-3px);box-shadow:0 20px 40px rgba(16,40,72,.10)}
.sec--oscuro .nota:hover{background:var(--tarjeta-alta);box-shadow:none}
.nota__foto{
  display:block;width:100%;height:auto;flex:none;
  aspect-ratio:16/9;object-fit:cover;
  border-bottom:1px solid var(--linea-fina);
  transition:transform 1.1s var(--ease);
}
.nota:hover .nota__foto{transform:scale(1.04)}
.nota__cuerpo{display:flex;flex-direction:column;flex:1;padding:clamp(1.3rem,2.2vw,1.7rem)}
.nota__meta{display:flex;align-items:center;gap:.6rem;margin:0;font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--orange)}
.nota__meta time{color:var(--tenue);letter-spacing:.1em}
.nota h3{margin:.7rem 0 .5rem;font-size:1.0625rem;font-weight:600;line-height:1.35;color:var(--titulo)}
.nota p{margin:0;font-size:.9375rem;font-weight:300;line-height:1.65}
.sec--claro .nota p{font-weight:400}
/* «Leer más» al pie de cada ficha. Va empujado abajo para que todas las
   fichas lo alineen a la misma altura, aunque el texto de arriba sea desigual. */
.nota__mas{
  /* Como en la referencia de Cases Lacambra: rectángulo gris claro, texto
     oscuro y flecha ↗ gruesa. Con la tipografía de la casa. */
  display:inline-flex;align-items:center;gap:.7rem;align-self:flex-start;
  margin-top:1.2rem;padding:.7rem 1.1rem;
  background:var(--orange);border-radius:2px;
  font-size:1rem;font-weight:500;letter-spacing:-.01em;color:#fff;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.nota__mas svg{width:.95rem;height:.95rem;flex:none;stroke-width:2.2;transition:transform .35s var(--ease)}
.nota:hover .nota__mas{background:var(--navy);color:var(--paper)}
.nota:hover .nota__mas svg{transform:translate(2px,-2px)}
/* La ficha reserva alto de sobra: el texto arriba, el botón abajo del todo y
   aire entre los dos aunque la entrada sea corta. */
.nota__cuerpo{justify-content:flex-start;min-height:19rem;padding-bottom:2rem}
.nota__cuerpo .nota__mas{margin-top:auto}
.nota__cuerpo p{margin-bottom:2rem}
/* En móvil la ficha es más estrecha: el botón baja de cuerpo para no pesar. */
@media (max-width:860px){
  .nota__cuerpo{padding:1.6rem 1.5rem 2rem;min-height:18rem}
  .nota__cuerpo .nota__mas{padding:.5rem .8rem;font-size:.8125rem;gap:.5rem;margin-top:auto}
  .nota__mas svg{width:.8rem;height:.8rem}
}

/* Aviso de que las entradas son una muestra: va pegado al carrusel y en cuerpo
   pequeño, que es una nota al margen, no parte del contenido. */
.notas__aviso{
  display:inline-block;margin:1.4rem 0 0;
  font-size:1rem;font-weight:500;letter-spacing:-.01em;color:var(--titulo);
  border-bottom:1px solid var(--orange);padding-bottom:.15rem;
  transition:color .35s var(--ease);
}
.notas__aviso:hover{color:var(--orange)}
.notas__aviso[hidden]{display:none}
.actualidad__vacio{
  margin:clamp(2.5rem,5vw,4rem) 0 0;padding:.2rem 0 .2rem clamp(1.5rem,2.8vw,2.1rem);
  max-width:46ch;border-left:1px solid var(--linea);
  font-size:1.0625rem;font-weight:300;line-height:1.8;
}

/* ---------- Contacto ---------- */
/* Tres tarjetas, como las fichas de los carruseles: la sección de contacto es
   el final de la página y tres bloques sueltos se leían como notas al pie. */
.contactos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr));gap:clamp(1rem,2vw,1.5rem);margin-top:clamp(2.5rem,5vw,4rem)}
.ct{
  /* Blancas también sobre el azul: son el final de la página y lo que hay
     dentro —direcciones, teléfonos, correos— se lee mejor en claro. La tarjeta
     redefine su paleta y el resto de reglas, que tiran de las variables, se
     adaptan solas. */
  --titulo:var(--navy);
  --texto:#57544F;
  --tenue:#8C867D;
  --linea-fina:#E4E0DA;
  --tarjeta-alta:#FFFDF9;
  position:relative;display:flex;flex-direction:column;
  padding:clamp(1.5rem,2.6vw,2rem);
  background:#fff;color:var(--texto);border:1px solid var(--linea-fina);border-radius:20px;
  transition:border-color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease),background .45s var(--ease);
}
.ct:hover{border-color:var(--orange);transform:translateY(-3px);box-shadow:0 20px 40px rgba(16,40,72,.10)}
.sec--oscuro .ct:hover{background:var(--tarjeta-alta);box-shadow:0 20px 40px rgba(0,0,0,.22)}
/* El filete naranja crece al pasar por encima, igual que en las fichas de
   áreas: es el mismo gesto en toda la página. */
.ct__pais{
  position:relative;margin:0;padding-top:1.1rem;
  font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);
}
.ct__pais::before{
  content:"";position:absolute;top:0;left:0;width:1.4rem;height:2px;background:var(--orange);
  transition:width .45s var(--ease);
}
.ct:hover .ct__pais::before{width:3.2rem}
.ct h3{margin:.7rem 0 1rem;font-size:1.25rem;font-weight:600;letter-spacing:-.015em;color:var(--titulo)}
.ct address{font-style:normal;font-size:.9375rem;font-weight:400;line-height:1.85}
.ct address a{color:var(--titulo);border-bottom:1px solid rgba(240,125,70,.5);transition:color .35s var(--ease),border-color .35s var(--ease)}
.ct address a:hover{color:var(--orange);border-color:var(--orange)}
/* Empuja el bloque del pie de la tarjeta hacia abajo: con direcciones de
   distinto largo, si no, quedaba a tres alturas diferentes. */
.ct__resp{margin:auto 0 0;padding-top:1.3rem;font-size:.875rem;font-weight:300;color:var(--tenue)}
/* ---------- Botón «Cómo llegar» ----------
   Abre el buscador de Google Maps con la dirección: no hace falta saber el
   identificador del sitio y en móvil el sistema lo manda a la app de mapas.
   Sin parámetros de seguimiento. */
.mapa{
  display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
  margin-top:1rem;padding:.6rem 1rem;
  border:1px solid var(--linea-fina);border-radius:999px;
  font-size:.8125rem;font-weight:600;color:var(--titulo);
  transition:border-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease);
}
.mapa:hover{border-color:var(--orange);background:rgba(240,125,70,.08);color:var(--orange)}
.mapa svg{width:.9rem;height:.9rem;flex:none}
.contacto__cola{margin:clamp(2.5rem,5vw,4rem) 0 0;font-size:1.0625rem;font-weight:300;line-height:1.7}
.contacto__cola a{color:var(--titulo);border-bottom:1px solid var(--orange);padding-bottom:.12rem;transition:color .35s var(--ease)}
.contacto__cola a:hover{color:var(--orange)}

/* ---------- Pie ----------
   Estructura del pie de la demo de Dubái: la firma bajo el logotipo, las
   columnas en medio y la línea legal abajo.

   En el navy del manual se fundía con Contacto, que ahora es de ese mismo
   azul. Va en el tono profundo —el mismo que sostiene el tríptico de la
   portada— para que la página se apoye en algo y se vea dónde termina. */
.pie{
  position:relative;background:var(--navy-deep);color:rgba(251,250,248,.74);
  padding:clamp(1.8rem,3.4vw,2.6rem) 0 clamp(3.8rem,6.3vw,5.3rem);font-size:.9375rem;font-weight:300;
  box-shadow:inset 0 1px 0 rgba(251,250,248,.1);
}
.pie a{color:inherit;transition:color .3s var(--ease)}
.pie a:hover{color:var(--orange)}

/* El eslogan, de firma bajo el logotipo: en la cursiva del manual y pequeño.
   De reclamo grande sonaba a cartel; aquí hace lo que hace una firma. */
.pie__lema{
  margin:.45rem 0 0;
  font-family:"Libre Baskerville","Iowan Old Style",Georgia,serif;
  font-style:italic;font-weight:400;
  font-size:1.0625rem;line-height:1.35;letter-spacing:-.01em;
  color:rgba(251,250,248,.86);
}
.pie__lema em{font-style:italic;color:var(--orange)}

.pie__cols{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(1.8rem,4vw,3rem);
  padding-bottom:clamp(2rem,4vw,2.8rem);
}
@media (max-width:860px){.pie__cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.pie__cols{grid-template-columns:1fr}}

/* El logotipo del pie: mismo bloque que la cabecera, algo más pequeño. El
   isotipo guarda su proporción respecto a la palabra, como en el manual. */
.pie__logo{color:var(--paper);padding-top:.75rem}
.pie__logo .logo__word{font-size:1.7rem}
.pie__logo .logo__mark{height:.9rem;top:-.08rem;right:.13rem}
.pie__logo:hover{color:var(--paper)}
.pie__marca p{margin:1rem 0 0;line-height:1.6;max-width:34ch}

.pie__col h2{margin:0 0 .9rem;font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(251,250,248,.56)}
.pie__col ul{margin:0;padding:0;list-style:none;display:grid;gap:.55rem}

.pie__legal{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.pie__legal a{border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.pie__legal a:hover{border-color:var(--orange)}
/* Separador vertical entre enlaces, como pide la revisión: «Aviso Legal |
   Política de Privacidad | …». */
.pie__legal > * + *::before{content:"|";margin-right:.8rem;color:rgba(251,250,248,.28)}
.pie__pendiente{opacity:.7;cursor:default}
.pie__bajo{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.2rem 2rem;flex-wrap:wrap;
  padding-top:1.5rem;border-top:1px solid rgba(251,250,248,.16);
  font-size:.875rem;color:rgba(251,250,248,.6);
}
.pie__izq{display:grid;gap:2.3rem}
.pie__redes{display:flex;gap:.6rem;flex-wrap:wrap}
.pie__redes a{
  display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:50%;
  border:1px solid rgba(251,250,248,.22);color:rgba(251,250,248,.78);
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.pie__redes a:hover{border-color:var(--orange);color:var(--orange)}
.pie__redes a[aria-disabled="true"]{opacity:.4;pointer-events:none}
.pie__redes svg{width:1rem;height:1rem;fill:currentColor}
/* La trama asoma por el ángulo inferior derecho, muy apagada: textura, no
   ilustración. Si se nota, está mal puesta. */
.pie{overflow:hidden}
.pie .env{position:relative;z-index:1}
.pie__trama{top:-8%;right:-8rem;width:min(26rem,54vw);color:var(--orange);opacity:.08}
@media (max-width:620px){.pie__trama{opacity:.06;right:-6rem}}

/* ---------- Boletín ----------
   Bloque propio dentro de una sección oscura, no una franja del pie: el
   título y la entradilla los pone la sección, el formulario es solo el campo. */
/* ---------- Boletín ----------
   Franja plana: titular y bajada a la izquierda, campo y botón a la derecha.
   Sin tarjeta dentro de la sección: la franja ya es el bloque. */
/* La franja ya no lleva caja propia: con la columna general a 1320 compartía
   anchura de sobra y un tope aparte solo la habría dejado más estrecha. */
#boletin{overflow:hidden}
#boletin .env{position:relative;z-index:1}
/* La trama de la identidad asomando por la derecha, detrás del formulario. */
.bol-trama{top:-22%;right:-5rem;width:min(24rem,42vw);color:var(--orange);opacity:.1}
@media (max-width:860px){.bol-trama{opacity:.07;right:-7rem}}
.bol-panel{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  align-items:center;gap:clamp(1.4rem,4vw,3.5rem);
}
@media (max-width:860px){.bol-panel{grid-template-columns:1fr}}
.bol-panel__txt{min-width:0}
.bol-panel__txt h2{margin:0}
.bol-panel__txt .lede{margin:.9rem 0 0;max-width:38ch;color:var(--texto)}

.boletin{margin:0;min-width:0}
.boletin__campo{display:flex;gap:.75rem;flex-wrap:wrap}
.boletin__campo input{
  flex:1 1 13rem;min-width:0;
  padding:1rem 1.15rem;border:1px solid rgba(251,250,248,.3);border-radius:10px;
  background:rgba(251,250,248,.08);color:var(--paper);
  font:inherit;font-size:1rem;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.boletin__campo input::placeholder{color:rgba(251,250,248,.5)}
.boletin__campo input:focus{outline:none;border-color:var(--orange);background:rgba(251,250,248,.14)}
/* Naranja: es el color de acción del manual y sobre el navy es el contraste
   que ya usa el resto de la página. */
.boletin__campo button{
  flex:none;padding:1rem 1.6rem;border:1px solid var(--orange);border-radius:10px;
  background:var(--orange);color:#fff;
  font:inherit;font-size:1rem;font-weight:600;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.boletin__campo button:hover{background:transparent;color:var(--orange)}
.boletin__campo button[disabled]{opacity:.55;cursor:default}
.boletin__aviso{margin:.8rem 0 0;font-size:.8125rem;line-height:1.55;color:var(--tenue)}
.boletin__aviso a{color:inherit;text-decoration:underline;text-underline-offset:2px;transition:color .3s var(--ease)}
.boletin__aviso a:hover{color:var(--orange)}
.boletin__estado{margin:.7rem 0 0;font-size:.9375rem;font-weight:500;color:var(--orange)}

/* ---------- Redes sociales ----------
   Tres fichas: panel de color de marca con el isotipo muy apagado, y debajo
   el canal con su frase y los botones de país. La ficha ya no es un enlace
   entero porque dentro hay enlaces: un <a> dentro de otro <a> no es HTML
   válido y el navegador deshace el anidamiento por su cuenta. */
.redes{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.9rem,2vw,1.4rem);margin-top:clamp(1.4rem,2.6vw,2rem);
}
@media (max-width:860px){.redes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.redes{grid-template-columns:1fr}}
.red{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--tarjeta);border:1px solid var(--linea-fina);border-radius:20px;
  color:var(--titulo);
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.red:hover{border-color:var(--orange);box-shadow:0 20px 40px rgba(16,40,72,.10)}
/* El panel: color plano de marca, como el resto de la página, con el isotipo
   girado asomando grande y a media luz. Nada de degradados: aquí no los hay
   en ningún otro sitio y se notaría. */
.red__panel{
  position:relative;flex:none;aspect-ratio:16/10;
  display:grid;place-items:center;overflow:hidden;
  border-bottom:1px solid var(--linea-fina);
}
.red__panel--li{background:var(--navy)}
.red__panel--ig{background:var(--orange)}
.red__panel--yt{background:var(--navy-deep)}
.red__iso{height:48%;width:auto;max-height:11rem;color:#fff;opacity:.26}
.red__panel--ig .red__iso{opacity:.34}
/* YouTube todavía no tiene vídeo: hasta que lo haya, el panel es el botón de
   reproducción sobre color. Cuando llegue el fotograma se añade como <img>
   detrás y esto se queda encima tal cual. */
.red__play{
  position:relative;display:grid;place-items:center;
  width:clamp(3.2rem,6vw,4rem);aspect-ratio:1;border-radius:50%;
  background:var(--paper);color:var(--navy);
}
.red__play svg{width:42%;height:auto;margin-left:8%}
.red__cuerpo{
  display:flex;flex-direction:column;flex:1;
  padding:clamp(1rem,2vw,1.35rem);gap:.55rem;
}
.red__cab{display:flex;align-items:center;gap:.6rem}
.red__icono{flex:none;width:1.4rem;height:1.4rem;color:var(--orange)}
.red__cab strong{font-size:1.05rem;font-weight:600;letter-spacing:-.01em}
.red__desc{margin:0;font-size:.875rem;font-weight:300;line-height:1.55;color:var(--texto)}
/* Los botones se pegan abajo para que las tres fichas acaben a la misma
   altura aunque las frases ocupen distinto número de líneas. */
.red__paises{
  margin-top:auto;padding-top:clamp(.8rem,1.6vw,1rem);
  border-top:1px solid var(--linea-fina);
}
.red__elige{margin:0 0 .6rem;font-size:.78rem;font-weight:400;color:var(--tenue)}
.red__botones{display:flex;flex-wrap:wrap;gap:.45rem}
.pais{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.45rem .85rem;border-radius:999px;
  border:1px solid var(--navy);color:var(--navy);
  font-size:.82rem;font-weight:500;line-height:1;text-decoration:none;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.pais:hover{background:var(--navy);color:var(--paper)}
/* Emiratos: visible y apagado, sin enlace y sin etiqueta. Karima corrigió por
   audio el «Próximamente» que había escrito en el correo. Es un <span>, no un
   <a> desactivado: así no entra en el tabulador ni lo anuncia el lector de
   pantalla como enlace roto. */
.pais--no{border-color:var(--linea);color:var(--tenue);cursor:default}
.pais--no:hover{background:none;color:var(--tenue)}
.pais__ir{flex:none;width:.7rem;height:.7rem}

/* El cebo antispam de Netlify: invisible para quien ve la página, visible
   para un robot que rellena todo lo que encuentra. */
.boletin__cebo{position:absolute;left:-9999px}

/* Etiqueta solo para lectores de pantalla. */
.vo{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- Entrada por scroll ----------
   Un solo gesto para toda la página baja: el bloque sube un poco y aparece.
   Cuelga de la clase .js, que pone el propio script: sin JavaScript —o con un
   rastreador que no lo ejecuta— el contenido se ve desde el primer momento. */
.js .sec .rotulo,.js .sec h2,.js .sec .lede,.js .sec .filtro,
.js .sec .notas,.js .sec .notas__aviso,.js .sec .actualidad__vacio,.js .sec .contacto__cola,
.js .sec .bol-panel,.js .sec .redes{
  opacity:0;transform:translateY(1.1rem);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.sec.vista .rotulo,.sec.vista h2,.sec.vista .lede,.sec.vista .filtro,
.sec.vista .notas,.sec.vista .notas__aviso,.sec.vista .actualidad__vacio,.sec.vista .contacto__cola,
.sec.vista .bol-panel,.sec.vista .redes{
  opacity:1;transform:none;
}
.sec.vista h2{transition-delay:.08s}
.sec.vista .lede{transition-delay:.14s}
.sec.vista .filtro{transition-delay:.14s}
.sec.vista .notas,.sec.vista .notas__aviso,.sec.vista .actualidad__vacio,
.sec.vista .bol-panel,.sec.vista .redes{transition-delay:.24s}
.sec.vista .contacto__cola{transition-delay:.5s}

/* Las fichas y las filas entran una a una, no el bloque entero de golpe.
   El escalonado es corto —60 ms— para que se lea como un gesto y no como una
   lista cargando. */
.js .sec .area,.js .sec .ct{
  opacity:0;transform:translateY(1.6rem);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
}
.sec.vista .area,.sec.vista .ct{opacity:1;transform:none}
.sec.vista .area:nth-child(1),.sec.vista .ct:nth-child(1){transition-delay:.22s}
.sec.vista .area:nth-child(2),.sec.vista .ct:nth-child(2){transition-delay:.28s}
.sec.vista .area:nth-child(3),.sec.vista .ct:nth-child(3){transition-delay:.34s}
.sec.vista .area:nth-child(4){transition-delay:.40s}
.sec.vista .area:nth-child(5){transition-delay:.46s}
.sec.vista .area:nth-child(6){transition-delay:.52s}
.sec.vista .area:nth-child(7){transition-delay:.58s}
/* Los mandos del carrusel, los últimos. */
.js .sec .carrusel__pie{opacity:0;transition:opacity .7s var(--ease) .62s}
.sec.vista .carrusel__pie{opacity:1}

/* ---------- Volver a la elección de oficina ----------
   La portada es el menú de verdad de esta página: tres sedes y poco más. Desde
   abajo, volver a ella a mano es un scroll largo, así que hay un botón fijo.
   No aparece hasta que la portada ha salido de pantalla, para no tapar nada
   mientras todavía se ve. */
.subir{
  /* Abajo a la izquierda, no a la derecha: ahí están las flechas de los dos
     carruseles y el botón las tapaba. */
  position:fixed;left:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:45;
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.8rem 1.2rem;border:1px solid var(--orange);border-radius:999px;
  background:var(--orange);color:#fff;
  font:inherit;font-size:.8125rem;font-weight:500;letter-spacing:.06em;cursor:pointer;
  box-shadow:0 14px 30px rgba(16,40,72,.22);
  opacity:0;transform:translateY(.8rem);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease),background .35s var(--ease),border-color .35s var(--ease);
}
.subir[data-visible="si"]{opacity:1;transform:none;pointer-events:auto}
.subir:hover{background:var(--navy);border-color:var(--navy)}
.subir svg{width:.8rem;height:.8rem;flex:none}
@media (max-width:520px){.subir span{display:none}.subir{padding:.85rem;gap:0}}

/* ---------- WhatsApp ----------
   Mismo botón que en echobarcelona.com —círculo fijo con un pulso que se
   expande— pero en el naranja de Abansa, no en verde de WhatsApp: la marca
   manda sobre el color del servicio.

   Va a la derecha, al otro lado que el botón de oficina, para que no se
   peleen por el mismo rincón. */
.wa{
  position:fixed;right:1.75rem;bottom:1.75rem;z-index:46;
  display:flex;align-items:center;justify-content:center;
  width:4.2rem;height:4.2rem;border-radius:50%;
  background:var(--orange);color:#fff;
  box-shadow:0 10px 24px -10px rgba(10,10,10,.4);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.wa:hover,.wa:focus-visible{transform:translateY(-2px) scale(1.05);box-shadow:0 16px 30px -10px rgba(10,10,10,.5)}
.wa svg{position:relative;z-index:1;width:2rem;height:2rem;flex:none}
/* El pulso: un disco del mismo color que crece por detrás y se desvanece. */
.wa__pulso{
  position:absolute;inset:0;border-radius:50%;
  background:var(--orange);opacity:.6;
  animation:wa-pulso 2s ease-out infinite;
}
@keyframes wa-pulso{
  0%{transform:scale(1);opacity:.55}
  100%{transform:scale(1.7);opacity:0}
}
@media (prefers-reduced-motion:reduce){.wa__pulso{animation:none;opacity:0}}
@media (max-width:520px){.wa{width:3.5rem;height:3.5rem;right:1.1rem;bottom:1.1rem}.wa svg{width:1.7rem;height:1.7rem}}

/* ---------- Foco visible ---------- */
a:focus-visible,button:focus-visible,.carrusel__tira:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px}

/* ---------- Móvil ---------- */
/* Fichas enteras al estrecharse: nunca media ficha cortada en el borde */
@media (max-width:1100px){.area{flex-basis:calc((100% - 2*var(--hueco))/3)}}
@media (max-width:900px){.area,.nota{flex-basis:calc((100% - var(--hueco))/2)}}
@media (max-width:560px){.area,.nota{flex-basis:100%}}
@media (max-width:720px){
  .sec h2{max-width:none}
  .sec__cab{align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .js .sec .rotulo,.js .sec h2,.js .sec .lede,.js .sec .filtro,
  .js .sec .notas,.js .sec .notas__aviso,.js .sec .actualidad__vacio,.js .sec .contacto__cola,
  .js .sec .bol-panel,.js .sec .redes,
  .js .sec .area,.js .sec .ct,.js .sec .carrusel__pie{opacity:1;transform:none}
}

/* ---------- Botón de contacto en la cabecera ----------
   Acceso directo al bloque de formulario y agenda sin recorrer la página.
   Va pegado al selector de idioma, a la derecha, y se queda visible porque la
   barra ya es fija. En móvil encoge pero no desaparece. */
.head__dcha{display:flex;align-items:center;gap:.6rem}
.cta-cab{
  display:inline-flex;align-items:center;
  padding:.55rem 1.15rem;border-radius:999px;
  border:1px solid var(--orange);background:var(--orange);color:#fff;
  font-size:.8rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
/* Sobre el vídeo no se puede vaciar el fondo al pasar por encima: el texto
   naranja sobre imagen en movimiento no se lee. Se oscurece el naranja. */
.cta-cab:hover{background:#D96A35;border-color:#D96A35;color:#fff}
@media (max-width:520px){
  .cta-cab{padding:.5rem .85rem;font-size:.72rem;letter-spacing:.1em}
}