/*
Theme Name: Abansa
Theme URI: https://abansa.com
Author: ECHO Agency
Author URI: https://echobarcelona.com
Description: Tema de bloques de Abansa (España y Andorra) en castellano, catalán e inglés. Programado a medida, sin Elementor ni maquetadores de pago: cero licencias anuales. Seis plantillas y 31 páginas por idioma.
Version: 2.8.6
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
License: Propiedad de Abansa (SOMABANSA, S.L.)
Text Domain: abansa
Tags: block-theme, full-site-editing, multilingual-ready
*/

/* ------------------------------------------------------------
   El sistema de diseño es el de los prototipos aprobados
   (abansa/web-sitios/assets/sitio.css), que a su vez porta el
   del tema de Dubái. Las rutas de @font-face apuntan a
   assets/fonts/ y los nombres de clase se conservan para que
   el JS portado (assets/js/sitio.js) siga funcionando igual.
   ------------------------------------------------------------ */

/* ============================================================
   abansa · hoja común de los sitios de Andorra y Spain

   Los patrones vienen del sitio de Dubái (abansa-uae/web/abansa-uae-v3):
   paleta, botones, pesos, rótulos, tarjetas, cifras, preguntas y cinta.
   Se mantienen los valores de allí salvo donde se indica.
   ============================================================ */

@font-face{font-family:"IBM Plex Sans";src:url("assets/fonts/plex-300.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("assets/fonts/plex-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("assets/fonts/plex-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("assets/fonts/plex-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("assets/fonts/plex-700.woff2") format("woff2");font-weight:700;font-display:swap}

/* Paleta exacta del theme.json de Dubái */
:root{
  --navy:#193C6A;
  --navy-deep:#102848;
  --orange:#F07D46;
  --orange-oscuro:#e06c33;
  --warm-gray:#B4ACA2;
  --mist:#F4F2EF;
  --ink:#151719;
  --muted:#57544F;
  --line:#E4E0DA;
  --body:#3B3833;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(1.25rem,5vw,3rem);
  --ancho:1200px;
  --cab-alto:5.2rem;
  /* Dubái usa clamp(4rem,8vw,6.5rem). Aquí va más apretado porque se pidió
     expresamente acercar los bloques. Es la única medida que no se copia. */
  --seccion:clamp(3rem,5.2vw,4.75rem);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:#fff;
  color:var(--body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img,video{max-width:100%}
h1,h2,h3,h4{color:var(--navy);text-wrap:balance;margin:0}
p{text-wrap:pretty;margin:0}

.env{max-width:calc(var(--ancho) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.seccion{padding-block:var(--seccion)}
.seccion--mist{background:var(--mist)}
.seccion--navy{background:var(--navy);color:rgba(255,255,255,.84)}
.seccion--navy h2,.seccion--navy h3{color:#fff}

.ico{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   Cabecera transparente sobre el vídeo, blanca al pasar la portada
   ============================================================ */
.cab{
  position:fixed;inset:0 0 auto 0;z-index:60;
  height:var(--cab-alto);
  display:flex;align-items:center;
  background:transparent;
  transition:background .5s var(--ease),box-shadow .5s var(--ease),height .5s var(--ease);
}
.cab__int{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.5rem);width:100%}
.cab.solida{background:#fff;box-shadow:0 1px 0 var(--line);height:4.4rem}

.cab .logo{color:#fff}
.cab .nav a{color:rgba(255,255,255,.9)}
.cab .sedes{border-color:rgba(255,255,255,.34)}
.cab .sedes a{color:#fff;opacity:.62}
.cab .sedes a[aria-current="page"]{background:#fff;color:var(--navy);opacity:1}
.cab .idioma__btn{color:#fff;border-color:rgba(255,255,255,.34)}

.cab.solida .logo{color:var(--navy)}
.cab.solida .nav a{color:var(--navy)}
.cab.solida .sedes{border-color:var(--line)}
.cab.solida .sedes a{color:var(--navy);opacity:.55}
.cab.solida .sedes a[aria-current="page"]{background:var(--navy);color:#fff;opacity:1}
.cab.solida .idioma__btn{color:var(--navy);border-color:var(--line)}

.logo{
  display:inline-flex;flex-direction:column;align-items:flex-end;
  padding-top:.95rem;position:relative;line-height:1;flex:none;
  transition:color .5s var(--ease);
}
.logo__marca{position:absolute;top:0;right:.14rem;width:auto;height:.86rem}
.logo__pal{font-weight:700;font-size:1.5rem;letter-spacing:.06em}
.logo__sede{display:inline-flex;align-items:center;margin-top:.28rem;margin-right:-.3em;font-size:.6rem;font-weight:400;letter-spacing:.3em;text-transform:lowercase}
.logo__sede i{width:.62em;height:.62em;margin-right:.55em;background:var(--orange)}

.nav{display:flex;flex-wrap:nowrap;gap:clamp(.9rem,1.6vw,1.6rem);font-size:.9375rem;font-weight:500;margin-left:auto}
.nav a{position:relative;white-space:nowrap;transition:color .35s var(--ease)}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-.35rem;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav a:hover{color:var(--orange)}
.nav a:hover::after{transform:scaleX(1)}
@media (max-width:1320px){.nav{display:none}}

.sedes{display:inline-flex;align-items:center;border:1px solid;border-radius:999px;padding:.2rem;flex:none;transition:border-color .5s var(--ease)}
.sedes a{
  padding:.38rem .85rem;border-radius:999px;
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  transition:background .35s var(--ease),color .35s var(--ease),opacity .35s var(--ease);
}
.sedes a:hover{opacity:1}

.idioma{position:relative;flex:none}
.idioma__btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .85rem;border:1px solid;border-radius:999px;background:transparent;
  font:inherit;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;transition:border-color .4s var(--ease),color .4s var(--ease);
}
.idioma__btn svg{width:.58rem;height:.58rem;transition:transform .4s var(--ease)}
.idioma[data-open="true"] .idioma__btn svg{transform:rotate(180deg)}
.idioma__lista{
  position:absolute;top:calc(100% + .55rem);right:0;min-width:10.5rem;
  margin:0;padding:.35rem;list-style:none;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 16px 40px rgba(16,40,72,.16);
  opacity:0;transform:translateY(-.35rem);pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.idioma[data-open="true"] .idioma__lista{opacity:1;transform:none;pointer-events:auto}
.idioma__lista button{
  display:flex;width:100%;align-items:center;justify-content:space-between;gap:1rem;
  padding:.6rem .75rem;border:0;border-radius:8px;background:none;
  font:inherit;font-size:.875rem;font-weight:500;color:var(--navy);cursor:pointer;text-align:left;
  transition:background .3s var(--ease);
}
.idioma__lista button:hover{background:var(--mist)}
.idioma__lista button[aria-current="true"]::after{content:"";width:.4rem;height:.4rem;background:var(--orange);flex:none}

/* Botón de cabecera — .ai-head-cta: blanco mientras la cabecera va sobre el
   vídeo, navy cuando se solidifica. En hover pasa a naranja. */
.cab__cta{
  flex:none;padding:.72rem 1.3rem;border-radius:10px;
  font-size:.875rem;font-weight:600;
  transition:background-color .35s var(--ease),color .35s var(--ease);
}
.cab .cab__cta{background:#fff;color:var(--navy)}
.cab .cab__cta:hover{background:var(--orange);color:#fff}
.cab.solida .cab__cta{background:var(--navy);color:#fff}
.cab.solida .cab__cta:hover{background:var(--navy-deep)}
@media (max-width:720px){.cab__cta{display:none}}
@media (max-width:520px){.idioma{display:none}}

/* ============================================================
   Botones — copiados de .v3-btn
   Radio 10px (no píldora), peso 600, la primaria lleva flecha en máscara.
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.95rem 1.6rem;border-radius:10px;border:1px solid transparent;
  font:inherit;font-size:.9375rem;font-weight:600;white-space:nowrap;cursor:pointer;
  transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn--nar{background:var(--orange);color:#fff}
.btn--nar:hover{background:var(--orange-oscuro);color:#fff}
.btn--nar::after{
  content:"";width:1.05em;height:1.05em;margin-left:-.15em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transform:translateX(-2px);opacity:.85;
  transition:transform .35s var(--ease),opacity .35s var(--ease);
}
.btn--nar:hover::after{opacity:1}

.btn--linea{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.btn--linea:hover{background:rgba(255,255,255,.14);color:#fff}

.btn--oscura{border-color:var(--line);color:var(--navy);background:#fff}
.btn--oscura:hover{background:var(--navy);border-color:var(--navy);color:#fff}

.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--navy-deep)}

/* Enlace-botón con flecha, sin subrayado (retirado a petición, 13.10.2026) */
.btn--texto{
  padding:.95rem 0;border-radius:0;border:0;
  color:#fff;background:none;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.btn--texto::after{
  content:"";width:1em;height:1em;background:var(--orange);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v13M6 12l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v13M6 12l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition:transform .3s var(--ease);
}
.btn--texto:hover{color:var(--orange)}

.btn--texto-oscuro{color:var(--navy)}

/* ============================================================
   Portada
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero__fondo{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__fondo video,.hero__fondo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1) brightness(.98)}
/* tres planos que se turnan con fundido, como los bloques de la home global */
.hero__fondo .hero__slide{opacity:0;transition:opacity 1.6s ease-in-out}
.hero__fondo .hero__slide.activa{opacity:1}
/* Velo neutro, no azul: teñía el vídeo de navy y se perdía el color del plano */
.hero__velo{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(14,14,16,.82) 0%,rgba(14,14,16,.52) 38%,rgba(14,14,16,.12) 68%,rgba(14,14,16,.38) 100%),
    linear-gradient(to right,rgba(14,14,16,.42),rgba(14,14,16,0) 62%);
}
.hero__int{position:relative;width:100%;padding-block:calc(var(--cab-alto) + 2rem) clamp(3.5rem,8vh,6rem)}

/* Titular: valores de .v3-hero__titular — peso 600, interlineado .98,
   tracking -.035em y una sola línea. El tope baja de 5,6rem a 4,8rem porque
   «Ordenar. Estructurar. Anticipar.» tiene 31 caracteres, cinco más que el
   titular de Dubái, y a 5,6rem se salía de la caja. */
.hero h1{
  margin:0;color:#fff;
  white-space:nowrap;
  font-size:clamp(2rem,5.4vw,4.8rem);font-weight:600;line-height:.98;letter-spacing:-.035em;
  text-shadow:0 2px 26px rgba(8,24,45,.4);
}
.hero h1 em{font-style:normal;color:var(--orange)}

.hero__golpe{
  margin:1.3rem 0 0;max-width:64ch;
  font-size:clamp(1.2rem,2.2vw,1.8rem);font-weight:500;line-height:1.25;letter-spacing:-.015em;
  color:#fff;text-shadow:0 1px 16px rgba(8,24,45,.5);
}
.hero__lede{
  margin-top:1.5rem;max-width:60ch;
  font-size:clamp(1.1rem,1.65vw,1.35rem);line-height:1.55;font-weight:400;
  color:rgba(255,255,255,.9);text-shadow:0 1px 14px rgba(8,24,45,.55);
}

.hero__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem 1.4rem;margin-top:2.1rem}
.hero__ctas .btn{padding:1.05rem 1.8rem;font-size:1rem}
.hero__ctas .btn--texto{padding-inline:0}

/* Cifras — copiadas de .v3-cita__par, con la barra naranja iluminada */
/* Las tres cifras van SIEMPRE en una sola línea. Con el rótulo al lado del
   número («360º asesoramiento legal, fiscal y patrimonial») no cabían y la
   tercera caía a una segunda fila; apilando rótulo bajo número sí entran. */
.cifras{display:flex;flex-wrap:nowrap;gap:2.25rem;margin-top:1.8rem;max-width:56rem}
.cifra{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;min-width:0;padding:.1rem 0 .1rem 1rem}
.cifra::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px;
  background:var(--orange);
  box-shadow:0 0 14px rgba(240,125,70,.85),0 0 34px rgba(240,125,70,.45);
}
.cifra b{
  font-size:clamp(1.7rem,2.7vw,2.35rem);font-weight:600;line-height:1;letter-spacing:-.03em;
  color:var(--orange);white-space:nowrap;text-shadow:0 1px 14px rgba(8,24,45,.55);
}
.cifra span{
  font-size:clamp(.9375rem,1.15vw,1.0625rem);line-height:1.35;
  color:rgba(255,255,255,.88);text-shadow:0 1px 14px rgba(8,24,45,.55);
}

.hero__baja{
  position:absolute;left:50%;bottom:1.4rem;translate:-50% 0;z-index:3;
  display:grid;place-items:center;width:3.4rem;height:2.4rem;color:var(--orange);
  animation:baja 2.8s var(--ease) infinite;transition:transform .4s var(--ease);
}
.hero__baja svg{width:2.8rem;height:1.6rem;display:block;filter:drop-shadow(0 2px 9px rgba(11,29,54,.7))}
.hero__baja:hover{transform:translateY(5px)}
@keyframes baja{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.hero__baja{animation:none}}
@media (max-width:860px){.hero__baja{display:none}}
/* En pantallas bajas no cabe por debajo de los botones sin tocarlos. */
@media (max-height:640px){.hero__baja{display:none}}

/* En el móvil el titular sí se parte: en una línea bajaba a 19,5 px y quedaba
   más pequeño que el párrafo de debajo. Dubái hace exactamente lo mismo. */
@media (max-width:640px){
  .hero h1{white-space:normal;font-size:clamp(2rem,8.6vw,2.9rem);line-height:1.06}
  .hero__golpe{font-size:1.05rem;margin-top:.9rem}
  .hero__lede{font-size:1rem;margin-top:1.2rem}
  .cifras{flex-direction:column;flex-wrap:wrap;gap:.7rem;margin-top:1.1rem;max-width:none}
  .cifra b{font-size:1.5rem}
}

/* ============================================================
   Cinta de marquesina — patrón .v3-cinta
   ============================================================ */
.cinta{background:var(--navy);color:#fff;overflow:hidden}
.cinta__pista{display:flex;width:max-content;animation:cinta 48s linear infinite}
.cinta__tira{
  display:flex;align-items:center;gap:2.5rem;padding:.95rem 1.25rem;
  font-size:.875rem;font-weight:600;white-space:nowrap;
}
.cinta__tira i{width:.4rem;height:.4rem;background:var(--orange);flex:none}
.cinta:hover .cinta__pista{animation-play-state:paused}
@keyframes cinta{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   Piezas de sección
   ============================================================ */
/* Rótulo — .ai-kicker: cuadrado naranja, no una raya */
.rotulo{
  display:flex;align-items:center;gap:.75em;margin:0 0 .9rem;
  font-size:.8125rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);
}
.rotulo::before{content:"";width:.6em;height:.6em;background:var(--orange);flex:none}
/* El rótulo es gris cálido por defecto. Sobre cualquier fondo navy tiene que
   ir en blanco: .franja (La firma) y .faq son navy sin llevar .seccion--navy,
   y el rótulo quedaba gris oscuro sobre azul, ilegible. */
.seccion--navy .rotulo,.franja .rotulo,.faq .rotulo,.contacto .rotulo{color:rgba(255,255,255,.82)}

/* Titular de sección — .v3-head h2, con el subrayado naranja que crece */
.titulo{
  margin:.9rem 0 0;
  font-size:clamp(1.9rem,3.4vw,3.1rem);font-weight:600;
  line-height:1.06;letter-spacing:-.028em;
}
.titulo::after{
  content:"";display:block;width:0;height:2px;margin-top:1.1rem;
  background:var(--orange);transition:width 1s var(--ease) .2s;
}
.revela.visible .titulo::after{width:3.5rem}

.entrada{margin-top:1.1rem;max-width:62ch;font-size:1.0625rem;line-height:1.6;color:var(--muted)}
.seccion--navy .entrada{color:rgba(255,255,255,.78)}
.cabecilla{max-width:46rem;margin-bottom:clamp(1.75rem,3vw,2.5rem)}

.rejilla{display:grid;gap:clamp(.85rem,1.5vw,1.15rem)}
.rejilla--2{grid-template-columns:repeat(auto-fit,minmax(22rem,1fr))}
.rejilla--3{grid-template-columns:repeat(auto-fit,minmax(16.5rem,1fr))}
/* Cuatro fijas: con auto-fit las ocho de España caían 5+3 */
.rejilla--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1040px){.rejilla--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.rejilla--4,.rejilla--3,.rejilla--2{grid-template-columns:1fr}}

/* ---------- Tarjeta — .v3-tarjetona: radio 22, elevación 6px ---------- */
.tarjeta{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(1.5rem,2.4vw,2rem);
  border:1px solid var(--line);border-radius:22px;background:#fff;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.tarjeta:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(16,40,72,.12)}

.tarjeta__ico{
  width:2.9rem;height:2.9rem;
  display:grid;place-items:center;border-radius:12px;
  background:var(--mist);color:var(--navy);
  transition:background .45s var(--ease),color .45s var(--ease);
}
.tarjeta__ico svg{width:1.45rem;height:1.45rem}
.tarjeta:hover .tarjeta__ico{background:var(--orange);color:#fff}

.tarjeta__num{
  position:absolute;top:1.5rem;right:1.6rem;
  font-size:.875rem;font-weight:700;letter-spacing:.1em;color:var(--orange);
}
.tarjeta h3{margin:1.4rem 0 .8rem;font-size:clamp(1.25rem,2vw,1.5rem);font-weight:600;line-height:1.16;letter-spacing:-.022em}
.tarjeta p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--body)}

.seccion--navy .tarjeta{background:var(--navy-deep);border-color:rgba(255,255,255,.16)}
.seccion--navy .tarjeta p{color:rgba(255,255,255,.82)}
.seccion--navy .tarjeta:hover{box-shadow:none;border-color:var(--orange)}
.seccion--navy .tarjeta__ico{background:rgba(255,255,255,.1);color:#fff}

/* Variantes de .v3-tarjetona: una tarjeta de acento por rejilla rompe
   la monotonía de ocho cajas blancas iguales. */
.tarjeta--naranja{background:var(--orange);border-color:var(--orange);color:#fff}
.tarjeta--naranja h3,.tarjeta--naranja p{color:#fff}
.tarjeta--naranja p{color:rgba(255,255,255,.92)}
.tarjeta--naranja .tarjeta__num{color:rgba(255,255,255,.85)}
.tarjeta--naranja .tarjeta__ico{background:rgba(255,255,255,.18);color:#fff}
.tarjeta--naranja:hover .tarjeta__ico{background:#fff;color:var(--orange)}

.tarjeta--oscura{background:var(--navy);border-color:var(--navy);color:rgba(255,255,255,.84)}
.tarjeta--oscura h3{color:#fff}
.tarjeta--oscura p{color:rgba(255,255,255,.82)}
.tarjeta--oscura .tarjeta__ico{background:rgba(255,255,255,.12);color:#fff}

/* Tarjeta final de una rejilla: cierra con una llamada en vez de dejar hueco */
.tarjeta--enlace{background:var(--navy);border-color:var(--navy);justify-content:center}
.tarjeta--enlace h3{color:#fff;margin-top:0}
.tarjeta--enlace p{color:rgba(255,255,255,.8)}
.tarjeta--enlace .btn{margin-top:1.6rem;align-self:flex-start}

/* ---------- Servicio compacto ---------- */
.servicio{
  display:flex;align-items:center;gap:1rem;
  padding:1rem 1.15rem;background:#fff;border:1px solid var(--line);border-radius:14px;
  transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);
}
.servicio:hover{border-color:var(--orange);transform:translateY(-3px);box-shadow:0 18px 34px rgba(16,40,72,.1)}
.servicio__ico{
  width:2.25rem;height:2.25rem;flex:none;display:grid;place-items:center;border-radius:9px;
  background:var(--mist);color:var(--navy);
  transition:background .4s var(--ease),color .4s var(--ease);
}
.servicio__ico svg{width:1.15rem;height:1.15rem}
.servicio:hover .servicio__ico{background:var(--orange);color:#fff}
.servicio span{font-size:.9375rem;font-weight:600;color:var(--navy)}
.servicio__flecha{margin-left:auto;width:.85rem;height:.85rem;color:var(--orange);opacity:0;transform:translateX(-.3rem);transition:all .4s var(--ease)}
.servicio:hover .servicio__flecha{opacity:1;transform:none}

/* ---------- Banda de datos ---------- */
.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.dato{position:relative;padding-left:1.1rem}
.dato::before{content:"";position:absolute;left:0;top:.2rem;bottom:.2rem;width:3px;border-radius:3px;background:var(--orange)}
.dato b{display:block;font-size:clamp(2rem,3.4vw,2.9rem);font-weight:600;line-height:1;letter-spacing:-.03em;color:var(--orange)}
.dato span{display:block;margin-top:.55rem;font-size:.9375rem;line-height:1.4;color:var(--muted)}
.seccion--navy .dato span{color:rgba(255,255,255,.8)}

/* ---------- Etiquetas de sector ---------- */
.etiquetas{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.25rem}
.etiqueta{
  padding:.52rem 1rem;border:1px solid var(--line);border-radius:999px;
  font-size:.875rem;font-weight:500;color:var(--navy);background:#fff;
  transition:border-color .35s var(--ease),color .35s var(--ease);
}
.etiqueta:hover{border-color:var(--orange);color:var(--orange)}

/* ---------- Oficinas ---------- */
.oficina h3{margin:1.4rem 0 .7rem;font-size:1.25rem}
.oficina address{font-style:normal;font-size:.9375rem;line-height:1.7;color:var(--body)}
.seccion--navy .oficina address{color:rgba(255,255,255,.82)}
.oficina a{color:var(--orange)}

/* ---------- Preguntas — .v3-faq-fila, con el círculo naranja ---------- */
.pregunta{border-bottom:1px solid var(--line)}
.pregunta:first-of-type{border-top:1px solid var(--line)}
.pregunta summary{
  display:flex;align-items:center;gap:1.1rem;
  padding:1.4rem .2rem;list-style:none;cursor:pointer;
  font-size:clamp(1rem,1.5vw,1.125rem);font-weight:500;color:var(--navy);
  transition:color .3s var(--ease);
}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary:hover{color:var(--orange)}
.pregunta__n{flex:none;font-size:.8125rem;font-weight:700;color:var(--orange)}
.pregunta__txt{flex:1}
.pregunta__mas{
  position:relative;flex:none;width:1.9rem;height:1.9rem;border-radius:50%;
  background:var(--orange);
  transition:transform .4s var(--ease),background-color .3s var(--ease);
}
.pregunta__mas::before,.pregunta__mas::after{
  content:"";position:absolute;inset:0;margin:auto;background:#fff;
  transition:opacity .3s var(--ease);
}
.pregunta__mas::before{width:.75rem;height:1.5px}
.pregunta__mas::after{width:1.5px;height:.75rem}
.pregunta[open] .pregunta__mas{background:var(--navy);transform:rotate(180deg)}
.pregunta[open] .pregunta__mas::after{opacity:0}
.pregunta p{margin:0;padding:0 3rem 1.6rem 2.6rem;max-width:62ch;font-size:.9688rem;line-height:1.65;color:var(--body)}
@media (max-width:640px){.pregunta p{padding-inline:0 .5rem}}

/* ---------- Formulario ---------- */
.form{display:grid;gap:.9rem;grid-template-columns:repeat(2,1fr)}
.campo{display:flex;flex-direction:column;gap:.4rem}
.campo--ancho{grid-column:1/-1}
.campo label{font-size:.8125rem;font-weight:600;color:var(--navy)}
.seccion--navy .campo label{color:#fff}
.campo input,.campo select,.campo textarea{
  font:inherit;font-size:.9375rem;padding:.8rem .95rem;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);
}
.campo textarea{min-height:7.5rem;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:transparent}
.acepto{grid-column:1/-1;display:flex;gap:.7rem;align-items:flex-start;font-size:.875rem;color:var(--muted)}
.seccion--navy .acepto{color:rgba(255,255,255,.78)}
.nota{grid-column:1/-1;font-size:.8125rem;color:var(--muted)}
.seccion--navy .nota{color:rgba(255,255,255,.6)}
.form .btn{justify-content:center}
@media (max-width:620px){.form{grid-template-columns:1fr}}

/* ---------- Pie ---------- */
.pie{
  position:relative;overflow:hidden;background:var(--navy-deep);color:rgba(251,250,248,.74);
  padding:clamp(1.8rem,3.4vw,2.6rem) 0 1.8rem;font-size:.9375rem;font-weight:300;
  box-shadow:inset 0 1px 0 rgba(251,250,248,.1);
}
.pie .env{position:relative;z-index:1}
.pie a{color:inherit;transition:color .3s var(--ease)}
.pie a:hover{color:var(--orange)}

/* La trama de chevrones del manual asoma por el ángulo superior derecho, muy
   apagada: es textura, no ilustración. Si se nota, está mal puesta. */
.trama{
  position:absolute;z-index:0;pointer-events:none;
  aspect-ratio:1200/1324;background:currentColor;
  -webkit-mask:url(assets/img/marca/trama-chevrones.webp) no-repeat center/contain;
          mask:url(assets/img/marca/trama-chevrones.webp) no-repeat center/contain;
}
@supports not ((-webkit-mask-image:url(a.webp)) or (mask-image:url(a.webp))){.trama{display:none}}
.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}}

.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. */
.pie__logo{color:#fff;padding-top:.75rem}
.pie__logo .logo__pal{font-size:1.7rem}
.pie__logo:hover{color:#fff}
.pie__marca p{margin:1rem 0 0;line-height:1.6;max-width:34ch}

/* El lema, de firma bajo el logotipo: en la cursiva del manual y pequeño. */
.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__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 ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}

.pie__bajo{
  display:flex;align-items:center;justify-content:space-between;gap:1rem 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 ul.pie__legal{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}

/* ---------- Boletín: abre el pie, por encima de las columnas ---------- */
.boletin{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;gap:.9rem clamp(1.8rem,4vw,3rem);
  padding:0 0 clamp(1.4rem,2.6vw,1.9rem);
  border-bottom:1px solid rgba(251,250,248,.16);
  margin-bottom:clamp(1.6rem,3vw,2.4rem);
}
@media (max-width:760px){.boletin{grid-template-columns:1fr}}
.boletin__txt{min-width:0}
.boletin__txt h2{margin:0;font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;color:#fff}
.boletin__txt p{margin:.3rem 0 0;font-size:.875rem;line-height:1.55;max-width:42ch}
.boletin__campo{display:flex;gap:.6rem;flex-wrap:wrap}
.boletin__campo input{
  flex:1 1 12rem;min-width:0;
  padding:.78rem 1rem;border:1px solid rgba(251,250,248,.28);border-radius:999px;
  background:rgba(251,250,248,.06);color:#fff;
  font:inherit;font-size:.9375rem;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.boletin__campo input::placeholder{color:rgba(251,250,248,.42)}
.boletin__campo input:focus{outline:none;border-color:var(--orange);background:rgba(251,250,248,.1)}
.boletin__campo button{
  flex:none;padding:.78rem 1.5rem;border:1px solid var(--orange);border-radius:999px;
  background:var(--orange);color:#fff;
  font:inherit;font-size:.9375rem;font-weight:500;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.boletin__campo button:hover{background:transparent;color:var(--orange)}
.boletin__aviso{grid-column:1/-1;margin:0;font-size:.75rem;line-height:1.5;color:rgba(251,250,248,.48)}
.boletin__estado{grid-column:1/-1;margin:0;font-size:.875rem;color:var(--orange)}
/* El cebo antispam: invisible para quien ve la página, visible para el robot
   que rellena todo lo que encuentra. */
.boletin__cebo{position:absolute;left:-9999px}

/* ---------- Aparición al desplazar — .ai-reveal ---------- */
.revela{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.revela.visible{opacity:1;transform:none}
.revela .rotulo::before{transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease) .1s}
.revela.visible .rotulo::before{transform:none}
.revela.visible > *{animation:sube .7s var(--ease) both}
.revela.visible > *:nth-child(2){animation-delay:.07s}
.revela.visible > *:nth-child(3){animation-delay:.14s}
.revela.visible > *:nth-child(4){animation-delay:.21s}
.revela.visible > *:nth-child(5){animation-delay:.28s}
.revela.visible > *:nth-child(6){animation-delay:.35s}
.revela.visible > *:nth-child(7){animation-delay:.42s}
.revela.visible > *:nth-child(8){animation-delay:.49s}
@keyframes sube{from{opacity:0;transform:translateY(.9rem)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition-duration:.01ms!important}
  .revela{opacity:1;transform:none}
  .titulo::after{width:3.5rem}
}

/* ============================================================
   COMPONENTES INTERACTIVOS — portados de Dubái
   ============================================================ */

/* ---------- Fichas conmutables (.v3-serv) ---------- */
.fichas{margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.fichas__pestanas{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(1.5rem,3vw,2.2rem)}
.fichas__pestanas button{
  position:relative;overflow:hidden;z-index:0;
  padding:.7rem 1.15rem;border:1px solid var(--line);border-radius:10px;background:#fff;
  color:var(--navy);font:inherit;font-size:.9375rem;font-weight:600;cursor:pointer;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.fichas__pestanas button::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--navy);
  transform:translateY(101%);transition:transform .4s var(--ease);
}
.fichas__pestanas button:hover::before,.fichas__pestanas button.is-on::before{transform:translateY(0)}
.fichas__pestanas button:hover,.fichas__pestanas button.is-on{color:#fff;border-color:var(--navy)}

.fichas__panel{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
  gap:clamp(1.2rem,3vw,2.2rem);align-items:stretch;
  animation:ficha .5s var(--ease);
}
.fichas__panel[hidden]{display:none}
@keyframes ficha{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.fichas__texto{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(1.6rem,3vw,2.4rem)}
.fichas__texto h3{margin:0 0 .9rem;font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:600;letter-spacing:-.022em}
.fichas__texto p{margin:0 0 1.2rem;font-size:1rem;line-height:1.62;color:var(--body);max-width:52ch}
.fichas__texto ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.fichas__texto li{display:flex;gap:.7rem;font-size:.9375rem;line-height:1.55;color:var(--body)}
.fichas__texto li::before{content:"";flex:none;width:.45rem;height:.45rem;margin-top:.55rem;background:var(--orange)}

/* Ficha lateral navy con el patrón del isotipo de fondo */
.fichas__lateral{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--navy);border-radius:20px;padding:clamp(1.6rem,3vw,2.2rem);
  color:rgba(255,255,255,.86);
}
.fichas__lateral::before{
  content:"";position:absolute;inset:-40%;z-index:-1;transform:rotate(-22deg);opacity:.6;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='16'%3E%3Crect x='30' y='30' width='150' height='150' rx='18'/%3E%3Crect x='180' y='180' width='150' height='150' rx='18'/%3E%3Crect x='330' y='330' width='150' height='150' rx='18'/%3E%3Crect x='-120' y='180' width='150' height='150' rx='18'/%3E%3Crect x='180' y='-120' width='150' height='150' rx='18'/%3E%3C/g%3E%3C/svg%3E");
  background-size:420px 420px;
}
.fichas__dato{display:flex;align-items:baseline;gap:.8rem;margin:0 0 1.1rem}
.fichas__dato b{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:600;letter-spacing:-.03em;color:#fff;line-height:1;white-space:nowrap}
.fichas__dato span{font-size:.875rem;line-height:1.4;color:rgba(255,255,255,.74)}
.fichas__entrega{list-style:none;margin:1.5rem 0 0;padding:1.3rem 0 0;border-top:1px solid rgba(255,255,255,.18);display:grid;gap:.6rem;font-size:.9375rem}
.fichas__entrega li{display:flex;gap:.6rem;color:rgba(255,255,255,.86)}
.fichas__entrega li::before{content:"";flex:none;width:.4rem;height:.4rem;margin-top:.5rem;background:var(--orange)}
@media (max-width:900px){
  .fichas__panel{grid-template-columns:minmax(0,1fr)}
  .fichas__pestanas{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.4rem;scrollbar-width:none}
  .fichas__pestanas::-webkit-scrollbar{display:none}
  .fichas__pestanas button{white-space:nowrap}
}

/* ---------- Carrusel (.v3-carrusel) ---------- */
.carrusel__cab{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.carrusel__mandos{display:flex;gap:.6rem;flex:none}
.flecha{
  width:3rem;height:3rem;border:1px solid var(--line);border-radius:12px;background:#fff;
  cursor:pointer;position:relative;
  transition:background-color .3s var(--ease),border-color .3s var(--ease);
}
.flecha::before{
  content:"";position:absolute;inset:0;margin:auto;width:.6rem;height:.6rem;
  border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);
  transform:rotate(-45deg);transition:border-color .3s var(--ease);
}
.flecha[data-carro="atras"]::before{transform:rotate(135deg);margin-left:1.15rem}
.flecha:hover{background:var(--navy);border-color:var(--navy)}
.flecha:hover::before{border-color:#fff}
.flecha:disabled{opacity:.35;cursor:default}
.flecha:disabled:hover{background:#fff;border-color:var(--line)}
.flecha:disabled:hover::before{border-color:var(--navy)}

.carrusel__pista{
  display:flex;gap:clamp(1rem,2vw,1.5rem);
  margin-top:clamp(1.8rem,3.5vw,2.6rem);
  padding:.5rem 0 1.5rem;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  cursor:grab;scroll-behavior:smooth;
}
.carrusel__pista::-webkit-scrollbar{display:none}
.carrusel__pista.arrastrando{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.carrusel__pista > *{scroll-snap-align:start;flex:0 0 clamp(17rem,27vw,23rem)}
.carrusel__barra{height:2px;background:rgba(25,60,106,.12);position:relative;margin-top:.5rem}
.carrusel__barra span{position:absolute;inset:0 auto 0 0;width:25%;background:var(--orange);transition:transform .2s linear,width .3s var(--ease)}
@media (max-width:760px){
  .carrusel__cab{flex-direction:column;align-items:flex-start;gap:1.2rem}
  .carrusel__mandos{align-self:flex-end}
  .carrusel__pista > *{flex-basis:80vw}
}

/* ---------- Ruta numerada con línea que se llena (.v3-ruta) ---------- */
.ruta{
  position:relative;list-style:none;margin:clamp(1.8rem,3.5vw,2.6rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));
  gap:clamp(1.2rem,3vw,2.5rem);
}
.ruta::before,.ruta::after{content:"";position:absolute;top:1.35rem;left:0;height:2px;border-radius:2px;z-index:0}
.ruta::before{right:0;background:rgba(255,255,255,.16)}
.ruta::after{width:calc(var(--avance,0) * 100%);background:var(--orange);transition:width .6s var(--ease)}
.ruta__paso{position:relative;padding-top:4.2rem;display:flex;flex-direction:column;height:100%}
.ruta__nodo{
  position:absolute;top:0;left:0;z-index:2;display:grid;place-items:center;
  width:2.7rem;height:2.7rem;border-radius:50%;
  background:var(--navy);border:2px solid rgba(255,255,255,.22);
  transition:border-color .5s var(--ease),background-color .5s var(--ease),transform .5s var(--ease);
}
.ruta__nodo b{font-size:.8125rem;font-weight:700;color:rgba(255,255,255,.72);transition:color .5s var(--ease)}
.ruta__paso.es-hecho .ruta__nodo{border-color:var(--orange);background:var(--orange);transform:scale(1.06)}
.ruta__paso.es-hecho .ruta__nodo b{color:#fff}
.ruta__paso h3{margin:0 0 .7rem;font-size:clamp(1.15rem,1.8vw,1.4rem);font-weight:600;letter-spacing:-.02em;color:#fff}
.ruta__paso p{margin:0;font-size:.9375rem;line-height:1.6;color:rgba(255,255,255,.78)}
@media (max-width:900px){
  .ruta{grid-template-columns:minmax(0,1fr);gap:0}
  .ruta::before,.ruta::after{top:0;bottom:0;left:1.35rem;width:2px;height:auto;right:auto}
  .ruta::after{height:calc(var(--avance,0) * 100%);width:2px;transition:height .6s var(--ease)}
  .ruta__paso{padding:0 0 2.4rem 4.2rem}
  .ruta__paso:last-child{padding-bottom:0}
  .ruta__nodo{top:-.2rem}
}

/* ---------- Tarjeta con fotografía (.v3-tarjetona con figure) ---------- */
.tarjeta--foto{padding:0;overflow:hidden}
.tarjeta--foto figure{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--mist)}
.tarjeta--foto figure img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.tarjeta--foto:hover figure img{transform:scale(1.05)}
.tarjeta__cuerpo{display:flex;flex-direction:column;flex:1;padding:clamp(1.3rem,2.2vw,1.7rem)}
.tarjeta--foto h3{margin:.9rem 0 .5rem;font-size:1.25rem}
.tarjeta--foto .tarjeta__ico{position:absolute;top:clamp(1.3rem,2.2vw,1.7rem);right:clamp(1.3rem,2.2vw,1.7rem);width:2.4rem;height:2.4rem;background:#fff}
.tarjeta--foto .tarjeta__ico svg{width:1.2rem;height:1.2rem}

/* ---------- Opiniones: dos cintas en sentidos opuestos (.v3-opi) ---------- */
.opi{background:var(--mist);overflow:hidden}
.opi__cinta{display:flex;width:max-content;margin-top:clamp(1.6rem,3vw,2.4rem);animation:opi-izq 64s linear infinite;will-change:transform}
.opi__cinta--vuelta{margin-top:1rem;animation-name:opi-der}
.opi__tira{display:flex;gap:1rem;padding-right:1rem}
.opi:hover .opi__cinta{animation-play-state:paused}
@keyframes opi-izq{to{transform:translateX(-50%)}}
@keyframes opi-der{from{transform:translateX(-50%)}to{transform:none}}

.op{
  width:21rem;padding:1.5rem;border-radius:18px;background:#fff;border:1px solid var(--line);
  display:grid;gap:.7rem;align-content:start;
}
.op__linea{display:block;height:.7rem;border-radius:4px;background:rgba(25,60,106,.09)}
.op__linea--corta{width:62%}
.op footer{display:flex;align-items:center;gap:.7rem;margin-top:.8rem;padding-top:1rem;border-top:1px solid var(--line)}
.op__avatar{width:2.2rem;height:2.2rem;border-radius:50%;background:rgba(25,60,106,.09);flex:none}
.op__linea--nombre{width:45%;height:.6rem;margin:0}
@media (max-width:760px){.op{width:17rem}}

/* ---------- Bloque de formulario (.v3-form-bloque) ---------- */
.contacto{background:var(--mist);border-top:1px solid var(--line)}
.contacto__int{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4rem);align-items:start;
}
.contacto__datos h2{margin:.65rem 0 0;font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.08;letter-spacing:-.028em}
.contacto__lista{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1rem;font-size:.9375rem}
.contacto__lista li{display:grid;gap:.15rem;padding-top:.9rem;border-top:1px solid var(--line);color:var(--navy);font-weight:500}
.contacto__lista span{font-size:.8125rem;color:var(--muted);font-weight:400}
.contacto__lista a{color:var(--navy)}
.contacto__lista a:hover{color:var(--orange)}

.formulario{
  display:grid;gap:1rem;padding:clamp(1.5rem,3vw,2.2rem);
  border:1px solid var(--line);border-radius:22px;background:#fff;
}
.formulario__fila{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.formulario label{display:grid;gap:.45rem;font-size:.8125rem;font-weight:600;color:var(--navy)}
.formulario input,.formulario select,.formulario textarea{
  padding:.85rem 1rem;border:1px solid var(--line);border-radius:12px;background:#fff;
  color:var(--ink);font:inherit;font-size:.9375rem;font-weight:400;
}
.formulario textarea{resize:vertical}
.formulario input:focus-visible,.formulario select:focus-visible,.formulario textarea:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.formulario__check{display:flex!important;align-items:flex-start;gap:.6rem;font-weight:400;color:var(--body)}
.formulario__check input{width:1.05rem;height:1.05rem;flex:none;accent-color:var(--orange)}
.formulario__check a{color:var(--navy);text-decoration:underline;text-underline-offset:.2em}
.formulario .btn{justify-content:center}
.formulario__nota{margin:0;font-size:.8125rem;line-height:1.5;color:var(--muted)}
.formulario__ok{margin:0;font-size:.9375rem;color:var(--orange)}
@media (max-width:900px){.contacto__int{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){.formulario__fila{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){.opi__cinta{animation:none}}

/* ---------- Sectores: retícula simétrica 5 × 2 (.v3-zona) ----------
   Diez sectores. En 5×2 y 2×5 la última fila siempre queda llena;
   con auto-fit caía 4+4+2 y se veía descuadrado. */
.sectores{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:1fr;gap:clamp(.7rem,1.2vw,1rem);margin-top:clamp(1.5rem,3vw,2.2rem)}
@media (max-width:1040px){.sectores{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.sectores{grid-template-columns:minmax(0,1fr)}}

.sector{
  position:relative;display:flex;flex-direction:column;gap:.85rem;
  min-height:11.5rem;padding:1.2rem 1.25rem;
  border:1px solid var(--line);border-radius:16px;background:#fff;
  overflow:hidden;z-index:0;
  transition:color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
}
.sector::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--navy);
  transform:translateY(101%);transition:transform .45s var(--ease);
}
.sector:hover::before{transform:translateY(0)}
.sector:hover{color:#fff;border-color:var(--navy);transform:translateY(-3px)}
.sector__cab{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.sector__ico{
  width:2.2rem;height:2.2rem;display:grid;place-items:center;border-radius:9px;
  background:var(--mist);color:var(--navy);flex:none;
  transition:background .4s var(--ease),color .4s var(--ease);
}
.sector__ico svg{width:1.1rem;height:1.1rem}
.sector:hover .sector__ico{background:var(--orange);color:#fff}
.sector__n{font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--orange)}
.sector__d{margin-top:auto;font-size:.8125rem;line-height:1.45;color:var(--muted);transition:color .4s var(--ease)}
.sector:hover .sector__d{color:rgba(255,255,255,.74)}
.sector__t{font-size:.9375rem;font-weight:600;line-height:1.3;color:inherit}
.sector:hover .sector__t{color:#fff}

/* ---------- Dos caras de una misma decisión (.v3-dubai) ---------- */
.caras__mando{
  display:flex;justify-content:center;gap:.25rem;width:max-content;max-width:100%;
  margin:clamp(.9rem,1.8vw,1.3rem) auto 0;padding:.25rem;
  border:1px solid var(--line);border-radius:999px;background:#fff;
}
.caras__mando button{
  appearance:none;border:0;cursor:pointer;padding:.6rem 1.35rem;border-radius:999px;
  background:transparent;color:var(--muted);font:inherit;font-size:.9375rem;font-weight:600;
  white-space:nowrap;transition:background-color .35s var(--ease),color .35s var(--ease);
}
.caras__mando button:hover{color:var(--navy)}
.caras__mando button.is-on{background:var(--navy);color:#fff}
.caras__mando button:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

.caras__panel{margin-top:clamp(1.6rem,3vw,2.4rem)}
.caras__panel[hidden]{display:none}
.caras__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.4rem,3vw,2.4rem)}
@media (max-width:900px){.caras__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.caras__grid{grid-template-columns:minmax(0,1fr);gap:1.5rem}}

.cara{padding-left:1.05rem;border-left:2px solid var(--orange);transition:border-color .4s var(--ease)}
.caras__panel--ojo .cara{border-left-color:var(--navy)}
.cara__dato{
  display:block;font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:600;letter-spacing:-.03em;
  line-height:1;color:var(--orange);font-variant-numeric:tabular-nums;
}
.caras__panel--ojo .cara__dato{color:var(--navy)}
.cara h3{margin:.75rem 0 .4rem;font-size:1.0625rem;font-weight:600;line-height:1.35;letter-spacing:-.01em;color:var(--navy)}
.cara p{margin:0;font-size:.9375rem;line-height:1.65;color:var(--body)}
.caras__pie{
  width:min(760px,100%);margin:clamp(1.8rem,3.4vw,2.6rem) auto 0;
  padding-top:clamp(1.2rem,2.4vw,1.6rem);border-top:1px solid var(--line);
  text-align:center;font-size:.875rem;color:var(--muted);
}
.caras__panel.esta-entrando .cara{animation:caraEntra .5s var(--ease) both}
.caras__panel.esta-entrando .cara:nth-child(2){animation-delay:.06s}
.caras__panel.esta-entrando .cara:nth-child(3){animation-delay:.12s}
.caras__panel.esta-entrando .cara:nth-child(4){animation-delay:.18s}
@keyframes caraEntra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- Franja de cifras: tres columnas simétricas sobre navy ---------- */
.franja{background:var(--navy);color:rgba(255,255,255,.84)}
.franja h2{color:#fff}
.franja__cifras{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(2rem,4vw,3rem);
  border-top:1px solid rgba(255,255,255,.16);
}
.franja__c{
  padding:clamp(1.6rem,3vw,2.2rem) clamp(1rem,2vw,1.6rem);
  border-right:1px solid rgba(255,255,255,.16);
  border-bottom:1px solid rgba(255,255,255,.16);
}
.franja__c:last-child{border-right:0}
.franja__c b{
  display:block;font-size:clamp(3rem,6vw,4.8rem);font-weight:600;line-height:.95;
  letter-spacing:-.04em;color:var(--orange);font-variant-numeric:tabular-nums;
}
.franja__c strong{display:block;margin-top:.8rem;font-size:1.0625rem;font-weight:600;color:#fff}
.franja__c span{display:block;margin-top:.35rem;font-size:.9375rem;line-height:1.5;color:rgba(255,255,255,.72)}
@media (max-width:760px){
  .franja__cifras{grid-template-columns:minmax(0,1fr)}
  .franja__c{border-right:0}
}

/* ---------- La firma + cifras en un solo bloque ---------- */
.franja__int{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:end}
.franja__texto p{margin:0 0 1.1rem;font-size:1.0625rem;line-height:1.65;color:rgba(255,255,255,.82)}
.franja__texto .btn{margin-top:.6rem}
@media (max-width:900px){.franja__int{grid-template-columns:minmax(0,1fr);align-items:start}}

/* ---------- Ámbitos de planificación patrimonial ---------- */
.patrimonio{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:900px){.patrimonio{grid-template-columns:minmax(0,1fr)}}

.ambitos{list-style:none;margin:0;padding:0;counter-reset:amb}
.ambito{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.1rem;
  padding:1.15rem 0;border-top:1px solid var(--line);
  transition:border-color .35s var(--ease);
}
.ambito:last-child{border-bottom:1px solid var(--line)}
.ambito:hover{border-color:var(--orange)}
.ambito__n{font-size:.8125rem;font-weight:700;letter-spacing:.1em;color:var(--orange);padding-top:.2rem}
.ambito h3{margin:0 0 .3rem;font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;color:var(--navy)}
.ambito p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--body)}

/* ---------- Preguntas a dos columnas sobre navy (.v3-faq) ---------- */
.faq{background:var(--navy)}
.faq__int{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(2rem,5vw,5rem);align-items:start;
}
.faq__intro{position:sticky;top:clamp(6rem,12vh,8rem)}
.faq__intro .titulo{color:#fff}
.faq__intro .entrada{max-width:34ch;color:rgba(255,255,255,.78)}
.faq__botones{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
@media (max-width:900px){
  .faq__int{grid-template-columns:minmax(0,1fr)}
  .faq__intro{position:static}
}
/* Filas sobre fondo oscuro */
.faq .pregunta{border-bottom-color:rgba(255,255,255,.16)}
.faq .pregunta:first-of-type{border-top-color:rgba(255,255,255,.16)}
.faq .pregunta summary{color:#fff}
.faq .pregunta summary:hover{color:var(--orange)}
.faq .pregunta p{color:rgba(255,255,255,.76)}
.faq .pregunta[open] .pregunta__mas{background:#fff}
.faq .pregunta[open] .pregunta__mas::before{background:var(--navy)}

/* ---------- Cinta clara, como la variante blanca de Dubái ---------- */
.cinta--clara{background:#fff;color:var(--navy);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- La firma sobre fondo claro ---------- */
.franja--clara{background:var(--mist);color:var(--body)}
.franja--clara h2,.franja--clara .titulo{color:var(--navy)}
.franja--clara .franja__texto p{color:var(--body)}
.franja--clara .franja__cifras{border-top-color:var(--line)}
.franja--clara .franja__c{border-right-color:var(--line);border-bottom-color:var(--line)}
.franja--clara .franja__c strong{color:var(--navy)}
.franja--clara .franja__c span{color:var(--muted)}



/* ============================================================
   ALTERNANCIA NAVY / BLANCO
   Las secciones van azul, blanca, azul, blanca. Los componentes
   que nacieron para fondo claro necesitan su versión sobre navy.
   ============================================================ */

/* Pestañas: en claro son chips blancos; sobre navy se invierten */
.seccion--navy .fichas__pestanas button{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.seccion--navy .fichas__pestanas button::before{background:#fff}
.seccion--navy .fichas__pestanas button:hover,
.seccion--navy .fichas__pestanas button.is-on{color:var(--navy);border-color:#fff}
/* La ficha lateral era navy: sobre navy se hundía, pasa a navy-deep con filete */
.seccion--navy .fichas__lateral{background:var(--navy-deep);border:1px solid rgba(255,255,255,.16)}

/* Caras: los textos van en navy sobre claro, en blanco sobre navy */
.seccion--navy .cara h3{color:#fff}
.seccion--navy .cara p{color:rgba(255,255,255,.78)}
.seccion--navy .caras__panel--ojo .cara{border-left-color:#fff}
.seccion--navy .caras__panel--ojo .cara__dato{color:#fff}
.seccion--navy .caras__pie{border-top-color:rgba(255,255,255,.16);color:rgba(255,255,255,.7)}
.seccion--navy .caras__mando{background:rgba(8,24,45,.4);border-color:rgba(255,255,255,.2)}
.seccion--navy .caras__mando button{color:rgba(255,255,255,.74)}
.seccion--navy .caras__mando button:hover{color:#fff}
.seccion--navy .caras__mando button.is-on{background:#fff;color:var(--navy)}

/* Ámbitos patrimoniales */
.seccion--navy .ambito{border-top-color:rgba(255,255,255,.16)}
.seccion--navy .ambito:last-child{border-bottom-color:rgba(255,255,255,.16)}
.seccion--navy .ambito h3{color:#fff}
.seccion--navy .ambito p{color:rgba(255,255,255,.78)}

/* Sectores: la celda sigue siendo clara, pero se invierte al pasar el cursor */
.seccion--navy .sector{background:var(--navy-deep);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.84)}
.seccion--navy .sector__t{color:#fff}
.seccion--navy .sector__d{color:rgba(255,255,255,.62)}
.seccion--navy .sector__ico{background:rgba(255,255,255,.1);color:#fff}
.seccion--navy .sector::before{background:#fff}
.seccion--navy .sector:hover{color:var(--navy);border-color:#fff}
.seccion--navy .sector:hover .sector__t{color:var(--navy)}
.seccion--navy .sector:hover .sector__d{color:var(--muted)}
.seccion--navy .sector:hover .sector__ico{background:var(--orange);color:#fff}

/* Carrusel sobre navy */
.seccion--navy .flecha{background:transparent;border-color:rgba(255,255,255,.3)}
.seccion--navy .flecha::before{border-color:#fff}
.seccion--navy .flecha:hover{background:#fff;border-color:#fff}
.seccion--navy .flecha:hover::before{border-color:var(--navy)}
.seccion--navy .flecha:disabled:hover{background:transparent;border-color:rgba(255,255,255,.3)}
.seccion--navy .flecha:disabled:hover::before{border-color:#fff}
.seccion--navy .carrusel__barra{background:rgba(255,255,255,.18)}

/* Opiniones pasan a fondo blanco */
.opi{background:#fff}

/* Contacto sobre navy: la tarjeta del formulario se queda blanca */
.contacto{background:var(--navy);border-top:0;color:rgba(255,255,255,.84)}
.contacto .titulo{color:#fff}
.contacto .entrada{color:rgba(255,255,255,.78)}
.contacto__lista li{border-top-color:rgba(255,255,255,.18);color:#fff}
.contacto__lista span{color:rgba(255,255,255,.62)}
.contacto__lista a{color:#fff}
.contacto__lista a:hover{color:var(--orange)}

/* Tarjetas claras que viven dentro de una sección navy: el título tiene que
   volver a navy. `.seccion--navy h3 {color:#fff}` las dejaba en blanco sobre
   blanco, es decir, invisibles. */
.seccion--navy .fichas__texto h3,
.seccion--navy .formulario h3,
.seccion--navy .op h3{color:var(--navy)}

/* Sin espaciados automáticos de WordPress: cada sección trae el suyo.
   (blockGap a 0 en theme.json; aquí los márgenes que la maquetación de
   bloques pone entre hermanos.) */
.is-layout-flow > *,.is-layout-constrained > *{margin-block:0}
.wp-block-group,.wp-block-columns,.wp-block-buttons{margin-block:0}

/* Selector de idioma (14.10.2026): globo + código en la cabecera; en la lista, el
   código en un cuadrado, el nombre en su lengua y una marca en el actual */
.idioma__btn{gap:.45rem;padding:.48rem .8rem .48rem .7rem}
.idioma__globo{width:.95rem;height:.95rem;flex:none;opacity:.85}
.idioma__btn .idioma__flecha{width:.55rem;height:.55rem}
.idioma__lista{min-width:12.5rem;padding:.4rem;border-radius:14px;box-shadow:0 18px 44px rgba(16,40,72,.18)}
.idioma__lista::before{content:"";position:absolute;top:-6px;right:1.25rem;width:10px;height:10px;background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.idioma__lista li{margin:0}
.idioma__lista a{
  display:flex;align-items:center;gap:.75rem;padding:.55rem .6rem;border-radius:9px;
  font-size:.9rem;font-weight:500;color:var(--navy);text-decoration:none;
  transition:background-color .25s var(--ease),color .25s var(--ease);
}
.idioma__lista a:hover{background:var(--mist)}
.idioma__cod{
  display:grid;place-items:center;width:2rem;height:2rem;flex:none;border-radius:8px;
  border:1px solid var(--line);font-size:.68rem;font-weight:600;letter-spacing:.08em;color:var(--navy);
  transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.idioma__nom{flex:1}
.idioma__ok{width:.9rem;height:.9rem;flex:none;color:var(--orange);opacity:0}
.idioma__lista a[aria-current="true"] .idioma__cod{background:var(--navy);border-color:var(--navy);color:#fff}
.idioma__lista a[aria-current="true"] .idioma__ok{opacity:1}
.idioma__lista a:hover .idioma__cod{border-color:var(--orange);color:var(--orange)}
.idioma__lista a[aria-current="true"]:hover .idioma__cod{color:#fff}

/* ---------- «Mantente al día»: franja propia antes del pie (como en la home global) ---------- */
.mantente{position:relative;overflow:hidden;background:var(--navy);color:rgba(251,250,248,.74);padding:clamp(3rem,6vw,4.8rem) 0}
.mantente__trama{top:-22%;right:-5rem;width:min(24rem,42vw);color:var(--orange);opacity:.1}
.mantente__panel{position:relative;z-index:1;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){.mantente__panel{grid-template-columns:1fr}.mantente__trama{opacity:.07;right:-7rem}}
.mantente__txt h2{margin:0;max-width:20ch;font-size:clamp(1.75rem,3vw,2.5rem);font-weight:600;line-height:1.08;letter-spacing:-.03em;color:#fff}
.mantente__txt p{margin:.9rem 0 0;max-width:42ch;font-size:1rem;font-weight:300;line-height:1.7}
.mantente .boletin{display:block;padding:0;margin:0;border:0}
.mantente .boletin__campo{gap:.75rem}
.mantente .boletin__campo input{flex:1 1 13rem;padding:1rem 1.15rem;border-radius:10px;background:rgba(251,250,248,.08);border-color:rgba(251,250,248,.3);font-size:1rem}
.mantente .boletin__campo button{padding:1rem 1.6rem;border-radius:10px;font-size:1rem;font-weight:600}
.mantente .boletin__aviso,.mantente .boletin__estado{margin-top:.8rem}
.mantente .boletin__aviso{font-size:.8125rem;color:rgba(251,250,248,.56)}
.mantente .boletin__aviso a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.mantente .boletin__aviso a:hover{color:var(--orange)}