/* ==========================================================================
   ACCEM — Plataforma contra la trata de seres humanos
   Sistema de diseño · pixel-perfect al diseño (canvas 1024) y fluido
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Rubik:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* ---- Tokens ---- */
:root{
  --blue:      #2458E4;   /* azul de marca (hero, secciones, botones) */
  --blue-deep: #1a3fc4;   /* hover / sombras azules */
  --green:     #4DE49C;   /* verde de marca */
  --green-deep:#37c082;
  --cream:     #FFFEEC;   /* crema/marfil */
  --cream-2:   #FBF7DF;   /* crema levemente más cálido (inputs, tarjetas) */
  --ink:       #26262b;   /* casi negro (texto y titulares) */
  --ink-soft:  #3b3b42;
  --white:     #ffffff;

  --font-display: 'Barlow Condensed', system-ui, sans-serif;
  --font-body: 'Rubik', system-ui, sans-serif;

  /* Escala global de TEXTO. 1 = tamaño original del diseño.
     Afecta solo a la tipografía (todas las medidas de texto son rem/vw);
     no toca layout, iconos, ilustraciones ni fotos. */
  --escala-texto: .85;

  --wrap: 1300px;                   /* ancho de contenido (PDF a escala, poco margen) */
  --pad: clamp(22px, 4.5vw, 64px);  /* padding lateral de sección */
  --round: 52px;                    /* radio de las secciones apiladas */
  --header-h: 118px;

  --shadow-card: 0 18px 40px rgba(19, 30, 90, .10);
}

/* ---- Reset ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  /* Raíz de toda la tipografía. En el elemento raíz 1rem = tamaño base del
     navegador, así que se respeta la preferencia de cuerpo del usuario. */
  font-size:calc(1rem * var(--escala-texto));
}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--blue);
  font-size:1.25rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;   /* clip (no 'hidden') para no romper position:sticky de la cartografía */
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; line-height:1.02; }

/* ---- Tipografía display ---- */
.display{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:.96;
}
h1.display{ font-size:clamp(2.8rem, calc(6.2vw * var(--escala-texto)), 5rem); }
h2.display{ font-size:clamp(2.2rem, calc(4.6vw * var(--escala-texto)), 3.6rem); }
h3.display{ font-size:clamp(1.5rem, calc(3vw * var(--escala-texto)), 2.1rem); }

.subtitle{ font-family:var(--font-body); font-weight:500; }

/* ==========================================================================
   Layout de secciones (bandas de color apiladas con esquinas redondeadas)
   ========================================================================== */
.band{ position:relative; width:100%; }
.band > .wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

.band--blue{ background:var(--blue); color:var(--cream); }
.band--green{ background:var(--green); color:var(--ink); }
.band--cream{ background:var(--cream); color:var(--ink); }

/* Efecto de solape: cada banda con tapa redondeada monta sobre la anterior */
.band--round{
  border-top-left-radius:var(--round);
  border-top-right-radius:var(--round);
  margin-top:calc(var(--round) * -1);
  z-index:1;
}
.band--round + .band--round{ z-index:2; }
.band + .band + .band{ z-index:3; }
.band + .band + .band + .band{ z-index:4; }

.section-pad{ padding-block:clamp(56px, 8vw, 104px); }
.section-pad-sm{ padding-block:clamp(40px, 6vw, 72px); }
.band:has(+ .site-footer) .section-pad,
.band:has(+ .site-footer) .section-pad-sm{ padding-bottom:clamp(120px, 16vw, 200px); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:300;
  padding:22px var(--pad);
  transition:padding .25s ease;
}
.site-header.is-scrolled{ padding-top:12px; padding-bottom:12px; }
/* la primera banda (hero) llena detrás del header flotante */
body > .band:first-of-type{ padding-top:var(--header-h); }
.hero-scroll{ }
.nav{
  max-width:var(--wrap); margin-inline:auto;
  display:flex; align-items:center; gap:18px;
}
.nav__pill{
  background:var(--cream);
  border-radius:26px;
  height:74px;
  display:flex; align-items:center;
  padding:0 32px 0 26px;
  box-shadow:var(--shadow-card);
}
.nav__pill--brand{ flex:1; gap:44px; }
.nav__logo img{ height:36px; width:auto; transition:transform .2s ease; }
.nav__logo:hover img{ transform:scale(1.04); }
.nav__links{
  display:flex; align-items:center; gap:clamp(24px,2.4vw,44px);
  margin-left:auto;
  font-weight:500; color:var(--ink);
  font-size:1.08rem;
}
.nav__links a{ white-space:nowrap; }

.nav__cta{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--cream); border:none; border-radius:26px;
  height:74px; padding:0 15px 0 28px;
  display:flex; align-items:center; gap:16px;
  font-weight:600; font-size:1.08rem; color:var(--ink);
  box-shadow:var(--shadow-card);
  transition:color .55s cubic-bezier(.65,0,.2,1);
}
.nav__cta-txt{ position:relative; z-index:2; }
.nav__cta .phone{
  position:relative; z-index:2;
  width:44px; height:44px; border-radius:50%;
  background:var(--blue); color:var(--white);
  display:grid; place-items:center; flex:none;
  transition:background .35s ease, color .35s ease;
}
.nav__cta::after{
  content:""; position:absolute; z-index:1; right:15px; top:50%;
  width:44px; height:44px; border-radius:50%; background:var(--blue);
  transform:translateY(-50%) scale(1);
  transition:transform .55s cubic-bezier(.65,0,.2,1);
}
.nav__cta:hover{ color:#fff; transition:color .2s ease; box-shadow:0 0 0 2px var(--cream), var(--shadow-card); }
.nav__cta:hover::after{ transform:translateY(-50%) scale(24); }
.nav__cta:hover .phone{ background:#fff; color:var(--blue); }

.nav__burger{ display:none; }

/* Logo como selector (Novicom/Accem): desplegable moderno bajo el header (o encima, en el footer) */
.brand-trigger{ background:none; border:0; padding:0; cursor:pointer; display:inline-flex; align-items:center; gap:8px; color:var(--ink); font:inherit; }
.brand-caret{ display:inline-flex; color:var(--blue); opacity:.9; transition:transform .22s ease, opacity .2s ease; }
.brand-caret svg{ width:15px; height:15px; }
.brand-trigger[aria-expanded="true"] .brand-caret{ transform:rotate(180deg); opacity:1; }
.footer-logo img{ height:30px; width:auto; display:block; }
.brand-menu{ position:fixed; z-index:500; width:min(340px, calc(100vw - 28px));
  background:var(--cream); border-radius:20px; box-shadow:0 24px 60px rgba(15,20,60,.30);
  padding:8px; opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease; }
.brand-menu.is-open{ opacity:1; transform:none; pointer-events:auto; }
.brand-menu[hidden]{ display:none; }
.brand-menu__opt{ display:flex; align-items:center; gap:14px; padding:13px 15px; border-radius:14px; color:var(--ink); transition:background .18s ease; }
.brand-menu__opt:hover, .brand-menu__opt:focus-visible{ background:rgba(36,88,228,.10); outline:none; }
.brand-menu__ic{ flex:none; width:40px; height:40px; border-radius:12px; background:var(--blue); color:#fff; display:grid; place-items:center; }
.brand-menu__ic svg{ width:20px; height:20px; }
.brand-menu__txt{ display:flex; flex-direction:column; line-height:1.28; min-width:0; }
.brand-menu__txt b{ font-weight:600; font-size:1.01rem; }
.brand-menu__txt small{ color:var(--ink-soft); font-size:.84rem; margin-top:1px; }
.brand-menu__ext{ margin-left:auto; color:var(--ink-soft); display:inline-flex; align-self:flex-start; }
.brand-menu__ext svg{ width:18px; height:18px; }

/* Menú móvil desplegable con efecto de expansión */
.mobile-menu{
  display:flex; position:fixed; inset:0; z-index:99;
  background:var(--blue);
  padding:130px var(--pad) 40px;
  flex-direction:column; gap:6px;
  clip-path:circle(0% at calc(100% - 44px) 44px);
  transition:clip-path .55s cubic-bezier(.7,0,.25,1);
  pointer-events:none;
}
.mobile-menu.is-open{ clip-path:circle(150% at calc(100% - 44px) 44px); pointer-events:auto; }
.mobile-menu a{
  color:var(--cream); font-family:var(--font-display); font-weight:600;
  text-transform:uppercase; font-size:2rem; padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.15);
  opacity:0; transform:translateY(22px);
  transition:opacity .3s ease, transform .3s ease;
}
.mobile-menu.is-open a{ opacity:1; transform:none; }
.mobile-menu.is-open a:nth-child(1){ transition-delay:.16s; }
.mobile-menu.is-open a:nth-child(2){ transition-delay:.22s; }
.mobile-menu.is-open a:nth-child(3){ transition-delay:.28s; }
.mobile-menu.is-open a:nth-child(4){ transition-delay:.34s; }
.mobile-menu.is-open a:nth-child(5){ transition-delay:.40s; }
.nav__burger{ position:relative; z-index:101; }

/* ==========================================================================
   Botones
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--font-body); font-weight:600; font-size:1.08rem;
  border:none; border-radius:16px; padding:16px 16px 16px 28px; cursor:pointer;
  transition:transform .12s ease, background .15s ease, color .15s ease;
}
[data-open-news]{ cursor:pointer; }
.btn{ position:relative; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn .ic{ transition:transform .2s ease; }
.btn:hover .ic{ transform:translateX(3px); }
.btn .ic{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; flex:none; font-weight:700;
}
/* azul relleno, icono blanco-círculo */
.btn--blue{ background:var(--blue); color:var(--white); }
.btn--blue .ic{ background:var(--white); color:var(--blue); }
.btn--blue:hover{ background:var(--blue-deep); }
/* blanco/crema, icono azul */
.btn--light{ background:var(--white); color:var(--ink); }
.btn--light .ic{ background:var(--blue); color:var(--white); }
.btn--light:hover{ background:var(--cream); }
/* crema con borde azul grueso (footer, mapa) */
.btn--outline{ background:var(--white); color:var(--ink); border:4px solid var(--blue); border-radius:20px; padding:13px 13px 13px 24px; }
.btn--outline .ic{ background:var(--blue); color:var(--white); }
.btn--outline:hover{ background:var(--cream); }

/* Chip/toggle (¿Qué se hace?, tabs Global/Europa) */
.chip{
  display:inline-flex; align-items:center; gap:12px;
  font-weight:600; font-size:1rem;
  border:none; border-radius:14px; padding:11px 12px 11px 20px;
  background:var(--blue); color:var(--white);
  transition:background .15s, color .15s;
}
.chip .ic{ width:28px; height:28px; border-radius:50%; background:var(--white); color:var(--blue); display:grid; place-items:center; font-size:.85rem; }
.chip--light{ background:var(--white); color:var(--ink); }
.chip--light .ic{ background:var(--blue); color:var(--white); }
.chip .ic, .accordion__row .ic, .subitem__head .ic, .tab .ic{ transition:transform .25s ease; }
.chip.is-open .ic{ transform:rotate(180deg); }
.tab[aria-selected="true"] .ic{ transform:rotate(180deg); }
.accordion__row.is-open .ic{ transform:rotate(90deg); }
/* Iconos de flecha en SVG (nítidos en iPhone; los glifos de texto se veían fatal) */
.ic svg{ width:18px; height:18px; display:block; flex:none; }
.scroll-dot svg{ width:20px; height:20px; display:block; }
.carousel__nav button svg{ width:24px; height:24px; display:block; }

/* ==========================================================================
   Home — Hero
   ========================================================================== */
.hero-scroll{ min-height:calc(100vh - var(--header-h)); display:flex; flex-direction:column; }
.hero-scroll .intro{
  text-align:center; max-width:940px; margin:8vh auto 0;
  font-size:clamp(1.35rem, calc(2vw * var(--escala-texto)), 1.8rem); font-weight:500; line-height:1.5;
}
.hero-scroll .intro b{ font-weight:700; }
.scroll-dot{
  width:44px; height:44px; border-radius:50%; background:var(--cream); color:var(--blue);
  display:grid; place-items:center; margin:clamp(24px,5vh,60px) auto; border:none;
  font-size:1.1rem; transition:transform .2s ease;
}
.scroll-dot:hover{ transform:translateY(5px); }
.hero-title{
  text-align:center; margin-top:auto; padding-bottom:6vh;
}
.hero-title h1{ color:var(--cream); font-size:clamp(3.4rem, calc(10.5vw * var(--escala-texto)), 8.4rem); }
.hero-title .q{ color:var(--cream); font-weight:500; font-size:clamp(1.35rem, calc(2vw * var(--escala-texto)), 1.8rem); margin-top:20px; }

/* Escritorio: hero y definición un punto más pequeños (móvil y tablet se quedan igual) */
@media (min-width:921px){
  .hero-scroll .intro{ font-size:1.25rem; max-width:820px; }
  .hero-title h1{ font-size:clamp(3.4rem, calc(6.2vw * var(--escala-texto)), 5rem); }
  .hero-title .q{ font-size:clamp(1.3rem, calc(2.2vw * var(--escala-texto)), 1.7rem); }
}

/* Panel definición + toggles */
.def-text{ font-size:clamp(1.35rem, calc(2vw * var(--escala-texto)), 1.8rem); max-width:1000px; font-weight:400; line-height:1.4; }
@media (min-width:921px){ .def-text{ font-size:1.25rem; } }
/* fila de toggles: si no cabe, se desliza en horizontal (no rompe línea) */
.toggle-row{ display:flex; flex-wrap:nowrap; gap:16px; margin-top:34px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
.toggle-row::-webkit-scrollbar{ display:none; }
.toggle-row > *{ flex:0 0 auto; }
.toggle-answer{
  background:var(--blue); color:var(--white); border-radius:20px;
  padding:28px 34px; margin-top:26px; max-width:1040px; font-weight:500; font-size:1.1rem;
}
.toggle-answer[hidden]{ display:none; }

/* Callout cartografía */
.callout{
  background:var(--blue); color:var(--white); border-radius:22px;
  padding:38px 46px; max-width:1120px; font-size:1.12rem;
}
.callout p+p{ margin-top:18px; }

/* Cartografía de la trata — ilustración + panel de etapas interactivo */
.carto{ margin-top:56px; display:grid; grid-template-columns:minmax(320px,1fr) 1.05fr; gap:clamp(28px,4vw,64px); align-items:start; }
.carto__panel{ position:sticky; top:130px; background:var(--blue); color:var(--white); border-radius:26px; padding:40px 36px 34px; }
.carto__badge{ display:inline-grid; place-items:center; background:var(--cream); color:var(--blue);
  font-family:var(--font-display); font-weight:700; font-size:1.4rem; width:70px; height:54px; border-radius:18px; margin-bottom:16px; }
.carto__panel h3{ font-family:var(--font-body); font-weight:500; font-size:2rem; margin-bottom:16px; }
.carto__panel p+p{ margin-top:16px; }
.carto__steps{ display:flex; gap:12px; margin-top:26px; }
.carto__step{ width:44px; height:44px; border-radius:50%; border:2px solid rgba(255,255,255,.5); background:transparent; color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.1rem; transition:all .2s ease; }
.carto__step:hover{ border-color:#fff; }
.carto__step.is-active{ background:var(--cream); color:var(--blue); border-color:var(--cream); }
.carto__figure{ position:relative; }
.carto__img{ width:100%; height:auto; display:block; }

.carto-wide{ position:relative; width:100vw; margin-left:calc(50% - 50vw); margin-top:60px; display:grid; }
.carto-wide__stage{ grid-area:1/1; position:relative; container-type:inline-size; }
.carto-wide__img{ width:100%; height:auto; display:block; }
.carto-scroll{ display:none; }

.carto-panel{ grid-area:1/1; align-self:start; justify-self:start; z-index:4;
  position:sticky; top:130px; width:min(400px,29%);
  margin:clamp(20px,3vw,54px) 0 60px clamp(16px,3vw,48px); }
.carto-card{ background:var(--blue); color:#fff; border-radius:24px; padding:28px 30px 22px;
  box-shadow:var(--shadow-card); transition:opacity .3s ease, transform .3s ease;
  display:flex; flex-direction:column; max-height:calc(100dvh - 168px); }
.carto-card.is-closed{ opacity:0; visibility:hidden; transform:translateY(10px); pointer-events:none; }
.carto-tip{ position:absolute; z-index:6; transform:translateX(-50%);
  background:var(--blue); color:#fff; border-radius:12px; padding:7px 13px; margin:0;
  font-weight:600; font-size:.82rem; line-height:1.25; white-space:nowrap;
  box-shadow:var(--shadow-card); pointer-events:none; }
.carto-tip::before{ content:""; position:absolute; left:50%; top:-6px; transform:translateX(-50%);
  border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:6px solid var(--blue); }
.carto-tip b{ background:var(--green); color:var(--blue); border-radius:6px; padding:0 7px; }
.carto-tip[hidden]{ display:none; }
.carto-card__mini{ display:none; }
.carto-pop{ display:none; }
.carto-pop.is-open{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0;
  animation:carto-pop-in .34s ease both; }
.carto-pop .carto__badge{ margin-bottom:12px; flex:none; }
.carto-pop h3{ font-family:var(--font-body); font-weight:500; font-size:1.65rem; margin-bottom:10px; line-height:1.12; flex:none; }
/* el scroll va en el bloque de texto completo, no en cada párrafo */
.carto-pop__body{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.carto-pop p{ font-size:1rem; line-height:1.5; }
.carto-pop p + p{ margin-top:12px; }
/* si el texto no cabe, se difumina el borde inferior para que se vea que hay más */
.carto-pop__body.has-more, .carto-expop.has-more{
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);
          mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent); }
/* barra de scroll fina y redondeada, al estilo del resto de la web */
.carto-pop__body, .carto-expop{ padding-right:12px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.4) transparent; }
.carto-pop__body::-webkit-scrollbar, .carto-expop::-webkit-scrollbar{ width:6px; }
.carto-pop__body::-webkit-scrollbar-track, .carto-expop::-webkit-scrollbar-track{ background:transparent; }
.carto-pop__body::-webkit-scrollbar-thumb, .carto-expop::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.4); border-radius:99px; }
.carto-pop__body::-webkit-scrollbar-thumb:hover, .carto-expop::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.65); }
@keyframes carto-pop-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.carto-card__foot{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:20px; }
.carto-card__dots{ display:flex; gap:10px; }
.carto-card__dot{ width:38px; height:38px; border-radius:50%; border:2px solid rgba(255,255,255,.42);
  background:transparent; color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  display:flex; align-items:center; justify-content:center; line-height:1; padding:0; transition:all .18s ease; }
.carto-card__dot:hover{ border-color:#fff; }
.carto-card__dot.is-active{ background:var(--cream); color:var(--blue); border-color:var(--cream); }
/* el siguiente número llama la atención ("púlsame para seguir el recorrido") */
.carto-card__dot.is-next{ border-color:var(--green); color:var(--green); animation:carto-dot-blink 1.5s ease-in-out infinite; }
.carto-card__dot.is-next:hover{ animation:none; border-color:#fff; color:#fff; }
@keyframes carto-dot-blink{
  0%,100%{ opacity:.6; box-shadow:0 0 0 0 rgba(77,228,156,0); }
  50%{ opacity:1; box-shadow:0 0 0 5px rgba(77,228,156,.22); }
}
@keyframes carto-hint-pulse{ 0%,100%{ opacity:.72; } 50%{ opacity:1; } }
.shot-mode .carto-panel{ position:static !important; }

/* ---- Vistas de la tarjeta: contenido de la etapa <-> ejemplo ilustrativo ---- */
.carto-card__view{ display:flex; flex-direction:column; min-height:0; }
.carto-card__view[hidden]{ display:none; }
.carto-card__view{ animation:carto-pop-in .34s ease both; }
/* botón "Ver ejemplo" (debajo de la fila de 1/2/3 y las flechas) */
.carto-ex-btn[hidden]{ display:none; }
.carto-ex-btn{
  margin-top:16px; flex:none; width:100%; border:none; cursor:pointer;
  background:var(--cream); color:var(--blue); border-radius:16px;
  font-family:var(--font-body); font-weight:600; font-size:1.02rem;
  padding:11px 11px 11px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  transition:background .18s ease, transform .12s ease;
}
.carto-ex-btn .ic{ width:34px; height:34px; flex:none; border-radius:50%;
  background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease; }
.carto-ex-btn .ic svg{ width:17px; height:17px; }
.carto-ex-btn:hover{ background:#fff; }
.carto-ex-btn:hover .ic{ transform:translateX(3px); }
.carto-ex-btn:active{ transform:translateY(1px); }
/* cabecera del ejemplo: flecha atrás + título compacto */
.carto-ex__head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; flex:none; }
.carto-ex__back{ width:38px; height:38px; flex:none; border-radius:50%; border:2px solid rgba(255,255,255,.42);
  background:transparent; color:#fff; display:flex; align-items:center; justify-content:center;
  transition:background .18s ease, border-color .18s ease; }
.carto-ex__back svg{ width:19px; height:19px; }
.carto-ex__back:hover{ background:rgba(255,255,255,.16); border-color:#fff; }
.carto-ex__title{ margin:0; font-weight:600; font-size:1.12rem; line-height:1.2; }
.carto-ex__title b{ background:var(--cream); color:var(--blue); border-radius:9px;
  padding:1px 9px; margin-right:5px; font-family:var(--font-display); font-weight:700; }
.carto-expop{ display:none; }
.carto-expop.is-open{ display:block; flex:1 1 auto; min-height:0; overflow-y:auto;
  overscroll-behavior:contain; animation:carto-pop-in .34s ease both; }
.carto-expop p{ font-size:.98rem; line-height:1.5; }
.carto-expop p + p{ margin-top:12px; }

.carto-summary{ display:none; }
.carto-summary__path{ display:none; }
.carto-summary__more{ margin-top:8px; background:none; border:none; padding:4px 0; cursor:pointer;
  color:var(--blue); font-family:var(--font-body); font-weight:600; font-size:1rem;
  display:inline-flex; align-items:center; gap:6px; }
.carto-summary__more .ic{ width:20px; height:20px; display:grid; place-items:center; transition:transform .25s ease; }
.carto-summary__more .ic svg{ width:15px; height:15px; }
.carto-summary__more.is-open .ic{ transform:rotate(180deg); }
.carto-mhint{ display:none; }

/* ilustración vertical (solo móvil/tablet) */
.carto-mstage{ display:none; }

@media(max-width:860px){
  .carto-wide{ display:flex; flex-direction:column; width:auto; margin:26px 0 0; padding:0 var(--pad); box-sizing:border-box; }
  .carto-wide__stage{ display:none; }
  .carto-callout-top{ display:none; }
  /* la banda verde monta --round sobre esta sección: se compensa para no tapar la tarjeta */
  #definicion{ padding-bottom:calc(var(--round) + 18px); }

  /* el texto "Esta cartografía representa…" no se muestra en móvil */
  .carto-summary{ display:none; }

  /* ilustración a sangre + hotspots 1/2/3 */
  .carto-mstage{ order:1; display:block; width:100vw; margin-left:calc(50% - 50vw); padding-bottom:9vh; }
  /* con la tarjeta abierta se deja aire abajo: margen para leer el 3 y soltar el sticky */
  .carto-wide:not(.is-mclosed) .carto-mstage{ padding-bottom:28vh; }
  .carto-mstage__frame{ position:relative; container-type:inline-size; }
  .carto-mstage__img{ display:block; width:100%; height:auto; }
  .carto-mstage .carto__hot{ width:10.6cqw; height:10.6cqw; font-size:5.4cqw;
    box-shadow:0 6px 16px rgba(15,20,60,.28); }
  .carto-mstage .carto__hot.is-active{ box-shadow:0 0 0 4px rgba(255,255,255,.92), 0 6px 16px rgba(15,20,60,.3); }
  .carto-mstage .carto-tip{ font-size:.8rem; }

  /* 3. tarjeta pegada abajo mientras recorres la ilustración */
  .carto-panel{ order:2; position:sticky; top:auto; bottom:0; z-index:6;
    align-self:center; width:min(520px,100%); margin:0 auto; min-height:0;
    padding-bottom:max(10px, env(safe-area-inset-bottom)); }
  .carto-wide.is-mclosed .carto-panel{ height:0; padding:0; overflow:hidden; }
  .carto-card{ display:flex; flex-direction:column; padding:14px 18px 10px;
    max-height:min(48vh,430px); border-radius:22px; box-shadow:0 -10px 30px rgba(15,20,60,.22); }
  .carto-card__mini{ display:none; }
  .carto-card__view{ flex:1 1 auto; }
  .carto-pop h3{ font-size:1.3rem; margin-bottom:6px; }
  .carto-pop p{ font-size:.9rem; line-height:1.4; }
  .carto-pop .carto__badge{ width:58px; height:44px; font-size:1.2rem; margin-bottom:8px; }
  .carto-card__foot{ margin-top:12px; }
  .carto-card__dot{ width:36px; height:36px; }
  .carto-ex-btn{ margin-top:12px; padding:9px 9px 9px 18px; font-size:.95rem; border-radius:14px; }
  .carto-ex-btn .ic{ width:30px; height:30px; }
  .carto-ex__head{ margin-bottom:10px; gap:10px; }
  .carto-ex__back{ width:34px; height:34px; }
  .carto-ex__title{ font-size:1rem; }
  .carto-expop p{ font-size:.9rem; line-height:1.45; }
}
/* tablet: la ilustración vertical no va a sangre, se centra */
@media (min-width:561px) and (max-width:860px){
  .carto-mstage{ width:min(520px,100%); margin-left:auto; margin-right:auto; }
}
@media (prefers-reduced-motion:reduce){
  .carto-pop.is-open, .carto-card__view, .carto-card__dot.is-next{ animation:none; }
}
.carto__figure{ container-type:inline-size; }
.carto__hot{
  position:absolute; width:7.7cqw; height:7.7cqw; transform:translate(-50%,-50%);
  border:none; border-radius:50%; background:var(--blue); color:#fff; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:4cqw; line-height:1;
  /* la tipografía display deja más hueco abajo que arriba: se compensa para centrar el dígito en el círculo */
  padding-bottom:.05em;
  transition:transform .15s ease, box-shadow .2s ease;
}
.carto__hot.is-active{ transform:translate(-50%,-50%) scale(1.06); }
.carto__hot:hover{ transform:translate(-50%,-50%) scale(1.1); }
.carto__step{ display:grid; place-items:center; line-height:1; }
@media(max-width:860px){
  .carto{ grid-template-columns:1fr; }
  .carto__panel{ position:static; order:2; }
  .carto__figure{ order:1; max-width:460px; margin-inline:auto; }
}

/* ==========================================================================
   Infografía (Cifras y tendencias)
   ========================================================================== */
.tabs{ display:inline-flex; gap:12px; background:var(--blue); padding:12px; border-radius:20px; }
.tab{ background:var(--white); color:var(--ink); }
.tab[aria-selected="false"]{ background:var(--blue); color:var(--white); }
.tab[aria-selected="false"] .ic{ background:var(--white); color:var(--blue); }

.infographic{
  background:var(--cream); border-radius:28px; padding:48px clamp(30px,4vw,60px);
  box-shadow:var(--shadow-card); margin-top:34px; max-width:1180px; margin-inline:auto;
}
.infographic h3{ font-family:var(--font-body); font-weight:500; font-size:2.3rem; margin-bottom:30px; }
.info-grid{ display:grid; grid-template-columns:auto 1.15fr 1.25fr; gap:56px; align-items:center; }
.info-grid > *:last-child{ padding-left:10px; }
.stat b{ display:block; font-size:2.9rem; font-weight:700; line-height:1; }
.stat.blue b{ color:var(--blue); } .stat.green b{ color:var(--green-deep); }
.stat span{ font-size:1rem; }
.bar-blue{ height:40px; background:var(--blue); border-radius:6px; width:100%; margin-top:8px; }
.bar-green{ height:40px; background:var(--green); border-radius:6px; width:82%; margin-top:8px; }
.donut{ width:320px; height:320px; }
.hbar{ margin-bottom:16px; }
.hbar .lbl{ font-size:.92rem; margin-bottom:6px; }
.hbar .lbl b{ font-weight:700; }
.hbar .track{ background:#d9d9d9; border-radius:8px; height:22px; overflow:hidden; }
.hbar .fill{ height:100%; border-radius:8px; }
.info-source{ font-size:.85rem; margin-top:20px; }
.info-source b{ font-weight:700; }
.info-arrow{ display:none; text-align:center; font-size:2rem; color:var(--ink); line-height:1; margin:2px 0; }
@media (max-width:920px){ .info-arrow{ display:block; } }

/* ==========================================================================
   Tarjetas / grids genéricos
   ========================================================================== */
.center{ text-align:center; }
.stack-btns{ display:flex; flex-wrap:wrap; gap:18px; }
.stack-btns.center{ justify-content:center; }

/* Carrusel de tarjetas (hitos / actividades) */
.carousel{ position:relative; }
.carousel__track{ display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:8px; scrollbar-width:none; cursor:grab; scroll-behavior:smooth; }
.carousel__track.is-dragging{ cursor:grabbing; scroll-behavior:auto; scroll-snap-type:none; }
.carousel__track.is-dragging *{ pointer-events:none; user-select:none; }
.carousel__track::-webkit-scrollbar{ display:none; }
.carousel__track > *{ scroll-snap-align:start; flex:0 0 auto; }
.carousel__nav{ display:flex; gap:12px; justify-content:center; margin-top:26px; }
.carousel__nav button{
  width:52px; height:52px; border-radius:50%; border:none; background:var(--white); color:var(--blue);
  font-size:1.2rem; display:grid; place-items:center; box-shadow:var(--shadow-card);
  transition:transform .18s ease, background .18s ease;
}
.carousel__nav button:hover{ transform:scale(1.1); }
.carousel__nav button:active{ transform:scale(.94); }
.carousel__nav.on-blue{ }
.carousel__nav.pill{ background:var(--blue); border-radius:22px; padding:10px; gap:10px; width:max-content; margin-inline:auto; }
.carousel__nav.pill button{ box-shadow:none; }

/* Tarjetas hito (línea del tiempo home) */
.milestone{
  background:rgba(255,255,255,.14); border-radius:22px; padding:38px 32px; width:340px; text-align:center;
}
.milestone .y{ font-family:var(--font-display); font-weight:700; font-size:2.6rem; color:var(--cream); }
.milestone p{ color:var(--cream); margin-top:12px; font-size:1.05rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--cream); color:var(--ink); }
.site-footer > .wrap{ padding-top:clamp(44px,4.5vw,60px); padding-bottom:clamp(36px,3.5vw,50px); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; align-items:start; }
.footer-grid p{ max-width:340px; margin-top:0; }
.footer-col{ display:flex; flex-direction:column; gap:9px; align-items:flex-start; }
.footer-col a{ display:block; width:fit-content; padding:2px 0; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:40px; }
.footer-social{ display:flex; gap:20px; }
.footer-social a{ color:var(--ink); position:relative; display:grid; place-items:center; transition:color .18s ease; }
.footer-social a::before{ content:""; position:absolute; left:50%; width:8px; height:8px; border-radius:50%; background:var(--blue); transform:translateX(-50%) scale(0); opacity:0; transition:transform .22s ease, opacity .22s ease; }
.footer-social a[data-dot="up"]::before{ top:-12px; }
.footer-social a[data-dot="down"]::before{ bottom:-12px; }
.footer-social a:hover{ color:var(--blue); }
.footer-social a:hover::before{ transform:translateX(-50%) scale(1); opacity:1; }

.paint{
  display:inline-block;
  background-image:linear-gradient(90deg, var(--blue) 0 50%, currentColor 50% 100%);
  background-size:200% 100%; background-position:100% 0; background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  transition:background-position .5s cubic-bezier(.6,0,.15,1);
}
.paint:hover, .paint.is-active{ background-position:0 0; }
.mobile-menu .paint{ background-image:linear-gradient(90deg, var(--cream) 0 50%, currentColor 50% 100%); }

.nav__logo{ animation:accem-float 4.6s ease-in-out infinite; }
.nav__links a{ position:relative; }
.nav__links a.is-active::after{
  content:""; position:absolute; left:50%; bottom:-16px; width:16px; height:16px;
  background:url("../img/favicon.png?v=1") center/contain no-repeat;
  animation:accem-float-x 3.2s ease-in-out infinite;
}
.footer-col a{ position:relative; }
.footer-col a.is-active::before{
  content:""; position:absolute; left:-26px; top:calc(50% - 8px); width:16px; height:16px;
  background:url("../img/favicon.png?v=1") center/contain no-repeat;
  animation:accem-slide 2.6s ease-in-out infinite;
}
.mobile-menu a.is-active{ position:relative; color:#fff; padding-left:34px; }
.mobile-menu a.is-active::before{
  content:""; position:absolute; left:0; top:50%; width:22px; height:22px; transform:translateY(-50%);
  background:url("../img/marca-accem-crema.png?v=1") center/contain no-repeat;
}
@keyframes accem-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
@keyframes accem-float-x{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(-3px); } }
@keyframes accem-slide{ 0%,100%{ transform:translateX(-2px); } 50%{ transform:translateX(4px); } }
@media (prefers-reduced-motion:reduce){
  .nav__logo, .nav__links a.is-active::after, .footer-col a.is-active::before{ animation:none; }
}

/* Reveal al hacer scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in{ opacity:1; transform:none; }

/* Páginas legales */
.legal-body{ max-width:900px; margin-inline:auto; }
.legal-body h2{ font-family:var(--font-display); text-transform:uppercase; font-size:1.5rem; margin:38px 0 12px; color:var(--blue); }
.legal-body h2:first-child{ margin-top:0; }
.legal-body p{ margin:0 0 14px; }
.legal-body ul{ margin:0 0 14px 20px; }
.legal-body a{ color:var(--blue); text-decoration:underline; }
.legal-lead{ font-size:1.25rem; font-weight:500; }

.cookie-banner{ position:fixed; left:0; right:0; bottom:0; z-index:400; padding:16px var(--pad);
  transition:transform .38s cubic-bezier(.5,0,.2,1), opacity .38s ease; }
.cookie-banner.is-hiding{ transform:translateY(130%); opacity:0; }
.cookie-banner__in{ max-width:var(--wrap); margin-inline:auto; background:var(--blue); color:#fff;
  border-radius:22px; box-shadow:0 20px 55px rgba(15,20,60,.4); padding:22px 28px;
  display:grid; grid-template-columns:1fr auto; gap:16px 32px; align-items:center; }
.cookie-banner__txt b{ font-family:var(--font-display); text-transform:uppercase; font-size:1.25rem; display:block; margin-bottom:6px; letter-spacing:.01em; }
.cookie-banner__txt p{ margin:0; font-size:.98rem; line-height:1.5; max-width:70ch; }
.cookie-banner__txt a{ color:var(--green); text-decoration:underline; }
.cookie-banner__btns{ display:flex; gap:12px; flex-wrap:wrap; }
.ck-btn{ padding:12px 24px; font-size:1rem; border-radius:14px; font-weight:600; cursor:pointer;
  font-family:var(--font-body); border:none; white-space:nowrap; transition:transform .12s ease, background .15s ease; }
.ck-btn:hover{ transform:translateY(-2px); }
.ck-accept{ background:var(--cream); color:var(--blue); }
.ck-sec{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.55); }
.ck-sec:hover{ background:rgba(255,255,255,.14); }
.cookie-banner__cfg{ grid-column:1/-1; display:flex; flex-wrap:wrap; gap:16px 30px; align-items:center;
  padding-top:16px; margin-top:2px; border-top:1px solid rgba(255,255,255,.22); }
.cookie-banner__cfg[hidden]{ display:none; }
.cookie-opt{ display:flex; align-items:center; gap:11px; font-weight:600; }
.cookie-opt small{ display:block; font-weight:400; opacity:.82; font-size:.85rem; }
.cookie-opt input{ width:20px; height:20px; accent-color:var(--green); cursor:pointer; }
.cookie-opt input:disabled{ cursor:default; }
@media(max-width:760px){
  .cookie-banner{ padding:12px; }
  .cookie-banner__in{ grid-template-columns:1fr; gap:15px; padding:20px; }
  .cookie-banner__txt p{ max-width:none; }
  .cookie-banner__btns{ flex-direction:column; gap:10px; }
  .cookie-banner__btns .ck-btn{ width:100%; flex:none; }
  .cookie-banner__btns .ck-accept{ order:-1; }
  .cookie-banner__cfg{ flex-direction:column; align-items:stretch; gap:14px; }
  .cookie-banner__cfg .ck-btn{ width:100%; }
}

.panel-login{ min-height:100vh; background:var(--blue); display:grid; place-items:center; padding:24px; }
.panel-login__wrap{ width:100%; max-width:440px; }
.panel-card{ background:var(--cream); border-radius:28px; padding:clamp(30px,5vw,46px); box-shadow:0 30px 80px rgba(15,20,60,.4); display:flex; flex-direction:column; }
.panel-card__logo{ display:block; margin:0 auto 26px; }
.panel-card__logo img{ height:42px; width:auto; }
.panel-card__title{ font-family:var(--font-display); text-transform:uppercase; font-size:2rem; text-align:center; margin-bottom:8px; line-height:1.05; }
.panel-card__sub{ text-align:center; color:var(--ink-soft); font-size:1rem; margin:0 0 28px; }
.panel-field{ display:block; margin-bottom:18px; }
.panel-field span{ display:block; font-weight:600; font-size:.95rem; margin-bottom:7px; }
.panel-field input{ width:100%; border:2px solid #e2e0cf; border-radius:14px; padding:14px 16px; font-family:var(--font-body); font-size:1rem; background:var(--white); color:var(--ink); transition:border-color .18s ease; }
.panel-field input:focus{ outline:none; border-color:var(--blue); }
.panel-card__btn{ width:100%; justify-content:center; margin-top:8px; }
.panel-card__back{ display:block; text-align:center; margin-top:20px; font-size:.95rem; color:var(--ink-soft); }
.panel-card__back:hover{ color:var(--blue); }

/* Lightbox previsualizador de PDF / imagen (dentro de la web, header visible) */
.pdf-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:calc(var(--header-h) + 12px) clamp(16px,4vw,48px) clamp(20px,4vw,40px);
  background:rgba(18,22,55,.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; }
.pdf-modal.is-open{ opacity:1; visibility:visible; }
.pdf-modal__box{ background:var(--cream); border-radius:26px; width:min(1000px,100%); height:100%; max-height:100%;
  display:flex; flex-direction:column; overflow:hidden; box-shadow:0 40px 100px rgba(0,0,0,.45);
  transform:translateY(24px) scale(.96); opacity:0; transition:transform .38s cubic-bezier(.2,.8,.2,1), opacity .38s ease; }
.pdf-modal.is-open .pdf-modal__box{ transform:none; opacity:1; }
.pdf-modal__head{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 18px 16px 24px; border-bottom:2px solid rgba(0,0,0,.07); }
.pdf-modal__title{ display:flex; align-items:center; gap:14px; min-width:0; }
.pdf-modal__tag{ background:var(--blue); color:#fff; font-weight:700; font-size:.72rem; letter-spacing:.04em; padding:5px 10px; border-radius:8px; flex:none; }
.pdf-modal__head h4{ font-family:var(--font-body); font-weight:600; font-size:1.12rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pdf-modal__head-actions{ display:flex; align-items:center; gap:12px; flex:none; }
.pdf-modal__head-actions .btn{ padding:10px 12px 10px 20px; font-size:.98rem; }
.pdf-modal__close{ background:var(--cream-2); border:none; width:44px; height:44px; border-radius:50%; font-size:1.5rem; color:var(--ink); display:grid; place-items:center; transition:background .18s ease, transform .18s ease; }
.pdf-modal__close:hover{ background:#efe9cf; transform:rotate(90deg); }
.pdf-modal__body{ flex:1; background:#3a3a44; min-height:0; }
.pdf-modal__body iframe{ width:100%; height:100%; border:0; display:block; }
.pdf-modal__imgwrap{ width:100%; height:100%; display:grid; place-items:center; padding:24px; overflow:auto; }
.pdf-modal__imgwrap img{ max-width:100%; max-height:100%; border-radius:8px; box-shadow:0 12px 40px rgba(0,0,0,.35); }
@media(max-width:560px){ .pdf-modal__head h4{ font-size:.95rem; } .pdf-modal__head-actions .btn span:not(.ic){ display:none; } }

/* Entrada "pintada" (transición al abrir Contacto): barrido azul que se retira */
.enter-wipe{ position:fixed; inset:0; background:var(--blue); z-index:250; transform-origin:right center;
  animation:wipe-out .8s .05s cubic-bezier(.76,0,.24,1) forwards; pointer-events:none; }
@keyframes wipe-out{ 0%{ transform:scaleX(1); } 100%{ transform:scaleX(0); } }
.shot-mode .enter-wipe{ display:none; }
/* el formulario "se pinta" al entrar */
.form-panel.enter{ animation:panel-in .7s .35s both cubic-bezier(.2,.8,.2,1); }
@keyframes panel-in{ 0%{ opacity:0; transform:translateY(30px) scale(.98); } 100%{ opacity:1; transform:none; } }
.shot-mode .form-panel.enter{ animation:none; }

/* Modo captura (?shot): para comparar página completa PDF↔web */
.shot-mode .hero-scroll{ min-height:680px !important; }
.shot-mode .hero-scroll .intro{ margin-top:64px !important; }
.shot-mode .hero-title{ padding-bottom:36px !important; }
.shot-mode .scroll-dot{ margin:30px auto !important; }
.shot-mode .reveal{ opacity:1 !important; transform:none !important; }
.shot-mode .carto__panel{ position:static !important; }

/* ==========================================================================
   Formularios (Contacto, newsletter)
   ========================================================================== */
.form-panel{ background:var(--cream); color:var(--ink); border-radius:40px; padding:clamp(38px,5vw,80px); max-width:1000px; margin-inline:auto; box-shadow:var(--shadow-card); }
.form-panel h2{ margin-bottom:18px; }
.form-panel > p{ max-width:640px; }
.field{ margin-top:24px; }
.field label{ display:block; font-weight:600; margin-bottom:9px; transition:color .2s ease; }
.req{ color:var(--blue); }
.field input, .field textarea, .field select{
  width:100%; border:2px solid #e6e1c8; background:var(--white); border-radius:12px;
  padding:16px 18px; font-family:inherit; font-size:1.05rem; color:var(--ink);
  transition:border-color .25s ease, background .35s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:#9a9a93; transition:opacity .2s ease, transform .25s ease; }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--blue); background:#eef2ff;
}
.field input:focus::placeholder, .field textarea:focus::placeholder{ opacity:0; transform:translateX(8px); }
.field:focus-within label{ color:var(--blue); }
.field textarea{ min-height:150px; resize:vertical; }
.field-error{ margin:8px 0 0; font-size:.9rem; font-weight:600; color:#c0392b; }
.field input.is-invalid, .field input.is-invalid:focus{ border-color:#c0392b; background:#fdecec; }
.field .ok-note{ margin:8px 0 0; font-size:.9rem; font-weight:600; color:#1b7f4b; }
.divider{ height:1px; background:rgba(0,0,0,.14); margin:30px 0; }
.check-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 30px; margin-top:12px; }
.check{ display:flex; align-items:center; gap:10px; font-weight:400; cursor:pointer; }
.check input{
  appearance:none; -webkit-appearance:none; flex:none;
  width:24px; height:24px; border:2px solid #d3ceb0; border-radius:8px; background:var(--white);
  display:grid; place-items:center; cursor:pointer;
  transition:background .18s ease, border-color .18s ease, transform .12s ease;
}
.check input:hover{ border-color:var(--blue); }
.check input:checked{ background:var(--blue); border-color:var(--blue); }
.check input:checked::after{
  content:""; width:6px; height:11px; margin-top:-2px;
  border:solid #fff; border-width:0 3px 3px 0; transform:rotate(45deg);
}
.check input:active{ transform:scale(.9); }
.consent{ font-size:.95rem; color:var(--ink-soft); line-height:1.55; }

/* Selector moderno con buscador (Nacionalidad, Tipo de documento) */
.combo{ position:relative; }
.combo__btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:2px solid #e6e1c8; background:var(--white); border-radius:12px; padding:16px 18px;
  font-family:inherit; font-size:1.05rem; color:var(--ink); cursor:pointer; text-align:left;
  transition:border-color .25s ease, background .25s ease; }
.combo__btn:hover{ border-color:#d8d2b4; }
.combo__btn[aria-expanded="true"]{ border-color:var(--blue); background:#eef2ff; }
.combo__value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.combo__value.is-placeholder{ color:#9a9a93; }
.combo__caret{ flex:none; display:inline-flex; color:#7a7a70; transition:transform .22s ease, color .2s ease; }
.combo__caret svg{ width:18px; height:18px; display:block; }
.combo__btn[aria-expanded="true"] .combo__caret{ transform:rotate(180deg); color:#14337a; }
.combo__panel{ position:absolute; z-index:60; top:calc(100% + 6px); left:0; right:0;
  background:var(--white); border:2px solid #e6e1c8; border-radius:14px; box-shadow:0 20px 50px rgba(15,20,60,.18); overflow:hidden; }
.combo__panel[hidden]{ display:none; }
.combo__search{ padding:10px; border-bottom:1px solid #eee7cf; }
.combo__searchin{ width:100%; border:2px solid #e6e1c8; border-radius:10px; padding:10px 14px; font-family:inherit; font-size:.98rem; color:var(--ink); }
.combo__searchin:focus{ outline:none; border-color:var(--blue); }
.combo__list{ list-style:none; margin:0; padding:6px; max-height:244px; overflow:auto; display:flex; flex-direction:column; gap:5px; }
.combo__opt{ padding:11px 14px; border-radius:10px; cursor:pointer; font-size:1rem; transition:background .18s ease, color .18s ease; }
.combo__opt[hidden]{ display:none; }
.combo__opt:hover, .combo__opt.is-hl{ background:rgba(36,88,228,.10); }
.combo__opt.is-sel{ font-weight:600; color:var(--blue); }
.combo__empty{ margin:0; padding:14px; color:#9a9a93; font-size:.95rem; text-align:center; }
.combo__empty[hidden]{ display:none; }

/* ==========================================================================
   Newsletter popup (Centro de noticias)
   ========================================================================== */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(20,24,60,.45); z-index:200;
  display:none; place-items:center; padding:24px;
}
.modal-backdrop.is-open{ display:grid; }
.modal{
  background:var(--cream); border-radius:30px; padding:clamp(30px,4vw,48px);
  max-width:640px; width:100%; position:relative; box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.modal h3{ font-family:var(--font-body); font-weight:500; font-size:2.4rem; }
.modal p{ margin:14px 0 24px; }
.modal input{ width:100%; border:none; background:var(--white); border-radius:16px; padding:18px 20px; font-family:inherit; font-size:1.05rem; }
.modal__close{ position:absolute; top:18px; right:22px; background:none; border:none; font-size:1.6rem; color:var(--ink); }
.modal .btn--outline{ margin-top:20px; }

/* ==========================================================================
   Acordeón (Centro de conocimiento / Mapa)
   ========================================================================== */
.accordion__row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 4px; border-bottom:2px solid currentColor; cursor:pointer;
  font-size:1.5rem; transition:color .18s ease;
}
.accordion__row:hover{ color:var(--blue); }
.band--blue .accordion__row:hover{ color:#cfe0ff; }
.accordion__row .ic{ width:34px; height:34px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; flex:none; }
.band--blue .accordion__row .ic{ background:var(--white); color:var(--blue); }
.accordion__panel{ padding:6px 0 22px; }
.accordion__panel[hidden]{ display:none; }

/* subitems tipo píldora azul */
.subitem{ background:var(--blue); color:#fff; border-radius:16px; margin:12px 0; overflow:hidden; }
.subitem__head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; cursor:pointer; font-weight:600; font-size:1.15rem; }
.subitem__head .ic{ width:30px; height:30px; border-radius:50%; background:var(--white); color:var(--blue); display:grid; place-items:center; flex:none; }
.subitem__body{ padding:0 22px 24px; }
.subitem__body[hidden]{ display:none; }
.subitem__body a{ text-decoration:underline; }

/* lista con icono ojo (normativa) */
.eye-list{ list-style:none; margin:0; padding:0; }
.eye-list li{ display:flex; gap:14px; align-items:center; padding:10px 0; }
.eye-list li svg{ flex:none; color:var(--ink); }
.list-group h4{ font-weight:700; margin:26px 0 10px; font-size:1rem; }
.list-sep{ height:1px; background:rgba(0,0,0,.14); margin:22px 0; }

/* ==========================================================================
   Imágenes / decoraciones
   ========================================================================== */
.photo{ border-radius:26px; overflow:hidden; box-shadow:var(--shadow-card); }
.photo img{ width:100%; height:100%; object-fit:cover; }
.ph{ background:linear-gradient(135deg,#c9d4f5,#aebdf0); display:grid; place-items:center; color:#5566aa; font-weight:600; min-height:220px; }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); align-items:center; }
.two-col--wide-left{ grid-template-columns:1.05fr .95fr; }

.spain-map{ width:100%; max-width:460px; display:block; }
.spain-map svg{ width:100%; height:auto; display:block; }
.spain-map svg path, .spain-map svg circle{ fill:currentColor; }

/* Swoosh verde decorativo */
.swoosh{ position:absolute; z-index:0; pointer-events:none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* El menú colapsa a burger ANTES de que el nav se apretuje (nav largo: "Centro de conocimiento") */
@media (max-width:1040px){
  .nav__links, .nav__cta{ display:none; }
  .nav__burger{
    display:grid; place-items:center; margin-left:auto;
    width:48px; height:48px; border-radius:14px; border:none; background:var(--blue); color:#fff;
  }
  .nav__pill--brand{ flex:1; }
}
@media (max-width:920px){
  .info-grid{ grid-template-columns:1fr; gap:20px; }
  .donut{ margin-inline:auto; }
  .two-col{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .check-grid{ grid-template-columns:1fr; }
  /* la bola del enlace activo va a la derecha (más espacio) */
  .footer-col a.is-active::before{ left:auto; right:-26px; }
}
@media (max-width:560px){
  body{ font-size:1.0625rem; }
  :root{ --round:32px; }
  h1.display{ font-size:2.5rem; }
  h2.display{ font-size:2rem; }
  /* botones apilados del mismo ancho (Forma parte de la comunidad) */
  .stack-btns{ align-items:stretch; width:100%; }
  .stack-btns .btn{ width:100%; justify-content:space-between; }
  /* menos espacio entre los bloques azules (respuesta + cartografía) */
  .toggle-answer{ margin-top:16px; padding:22px 24px; }
  .callout{ margin-top:20px !important; }
  /* infografía: más alto para encajar con las pestañas */
  .infographic{ padding:34px 22px 40px; }
  .info-grid{ gap:30px; }
  .donut{ width:min(300px,86%); }
  .footer-grid{ grid-template-columns:1fr; gap:26px; }
  .footer-bottom{ flex-direction:column; gap:20px; align-items:flex-start; }
  .callout, .toggle-answer{ padding:24px; }
  .modal h3{ font-size:1.9rem; }
  /* pestañas: si no caben, se deslizan en horizontal (no rompen línea) */
  .tabs{ width:auto !important; max-width:100%; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; justify-content:flex-start !important; gap:8px; }
  .tabs::-webkit-scrollbar{ display:none; }
  .tabs .chip{ font-size:.95rem; flex:0 0 auto; }
  .toggle-row{ gap:12px; }
}
@media (max-width:920px){ html, body{ overflow-x:clip; } }

/* ==========================================================================
   Cifras en móvil: las pestañas Global/Europa/España colapsan en "Filtros"
   ========================================================================== */
.cifras-filter__toggle{ display:none; }
@media (max-width:640px){
  .cifras-filter__toggle{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    width:100%; margin:28px 0 0; padding:15px 16px 15px 24px;
    background:var(--cream); color:var(--ink); border:3px solid var(--blue);
    border-radius:20px; font-family:var(--font-body); font-weight:600; font-size:1.1rem;
    cursor:pointer; text-align:left;
  }
  .cifras-filter__toggle .ic{
    width:32px; height:32px; border-radius:50%; background:var(--blue); color:#fff;
    display:grid; place-items:center; font-size:.9rem; flex:none; transition:transform .22s ease;
  }
  .cifras-filter__toggle.is-open .ic{ transform:rotate(180deg); }
  /* la lista de pestañas se vuelve un menú desplegable vertical */
  .tabs--filter{
    display:flex !important; flex-direction:column !important; width:100% !important;
    margin:8px 0 0 !important; padding:8px !important; gap:6px !important;
    background:var(--cream); border:1px solid rgba(38,38,43,.12); border-radius:20px;
    box-shadow:var(--shadow-card); overflow:visible !important;
  }
  .tabs--filter[hidden]{ display:none !important; }
  .tabs--filter .chip.tab{
    width:100%; justify-content:space-between; background:transparent; color:var(--ink);
    border-radius:14px; padding:12px 16px;
  }
  .tabs--filter .chip.tab[aria-selected="true"]{ background:var(--blue); color:#fff; }
  /* fila activa (fondo azul): círculo blanco + flecha azul, para que el icono se vea */
  .tabs--filter .chip.tab[aria-selected="true"] .ic{ background:#fff; color:var(--blue); }
}
@media (min-width:641px){ .tabs--filter[hidden]{ display:flex !important; } }

/* En móvil los toggles "¿Qué se hace? / ¿Cómo se hace? / ¿Para qué?" se apilan (como el PDF p14) */
@media (max-width:640px){
  /* pestañas de inicio (¿Qué/Cómo/Para qué?) EN HORIZONTAL scrolleable en móvil (no en columna) */
  .toggle-row{ flex-direction:row; flex-wrap:nowrap; align-items:center; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; gap:12px; }
  .toggle-row::-webkit-scrollbar{ display:none; }
  .toggle-row > *{ width:auto; flex:0 0 auto; }
}

/* ==========================================================================
   Cartografía móvil v2 — "caminito": la persona recorre el sendero al
   cambiar de etapa + mini-dibujo por etapa + aviso "pulsa el 2/3"
   ========================================================================== */
.carto-walk{ display:none; }
.carto__mini{ display:none; }
.carto-hint{ display:none; }
.carto__stepsrow{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; }

@media (max-width:860px){
  /* Se sustituye el dibujo grande por el caminito + el texto por etapas */
  #carto .carto__figure{ display:none; }
  #carto{ margin-top:40px; }
  #carto .carto__panel{ position:relative; order:2; }

  .carto-walk{ display:block; order:1; margin-bottom:2px; }
  .carto-walk__track{ position:relative; height:118px; }
  .carto-walk__line{
    position:absolute; left:2%; right:2%; top:84px; height:12px; border-radius:8px;
    background:linear-gradient(90deg,var(--green),var(--green-deep));
    box-shadow:0 6px 16px rgba(55,192,130,.35);
  }
  .carto-walk__stop{
    position:absolute; top:84px; transform:translate(-50%,-50%);
    width:36px; height:36px; border-radius:50%; border:3px solid var(--cream); background:var(--blue);
    color:#fff; font-family:var(--font-display); font-weight:700; font-size:1rem; cursor:pointer;
    display:grid; place-items:center; padding:0; z-index:2; box-shadow:0 4px 12px rgba(15,20,60,.28);
    transition:transform .2s ease, background .2s ease;
  }
  .carto-walk__stop.is-active{ background:var(--cream); color:var(--blue); transform:translate(-50%,-50%) scale(1.14); }
  .carto-walk__person{
    position:absolute; bottom:18px; left:8%; height:98px; width:auto;
    transform:translateX(-50%); transition:left 1s cubic-bezier(.42,.02,.34,1);
    z-index:3; pointer-events:none; filter:drop-shadow(0 7px 7px rgba(0,0,0,.2));
  }
  .carto-walk__person.is-walking{ animation:carto-bob .3s ease-in-out infinite; }
  @keyframes carto-bob{
    0%,100%{ transform:translateX(-50%) translateY(0) rotate(0); }
    50%{ transform:translateX(-50%) translateY(-6px) rotate(-2.5deg); }
  }

  /* mini-dibujo de la etapa, arriba a la derecha del panel */
  .carto__mini{
    display:block; position:absolute; top:26px; right:26px; width:76px; height:76px;
    object-fit:contain; background:var(--cream); border-radius:16px; padding:8px; z-index:2;
  }
  .carto__panel h3{ padding-right:88px; }

  /* aviso "pulsa el 2/3" junto a los pasos */
  .carto-hint{
    display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.16);
    color:#fff; border-radius:20px; padding:9px 16px; font-weight:600; font-size:.95rem;
    animation:carto-hint-pulse 1.5s ease-in-out infinite;
  }
  .carto-hint[hidden]{ display:none; }
  .carto-hint b{ color:var(--green); }
  .carto-hint__arrow{ display:inline-block; animation:carto-hint-arrow 1s ease-in-out infinite; }
  @keyframes carto-hint-pulse{ 0%,100%{ opacity:.72; } 50%{ opacity:1; } }
  @keyframes carto-hint-arrow{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(5px); } }

  @media (prefers-reduced-motion:reduce){
    .carto-walk__person,.carto-walk__person.is-walking,.carto-hint,.carto-hint__arrow{ animation:none; transition:none; }
  }
}

/* Más aire en móvil en "Forma parte de la comunidad" y "Hitos de Accem" (home) */
@media (max-width:640px){
  .home-sp > .section-pad{ padding-block:clamp(74px,17vw,104px); }
  .home-sp .stack-btns{ margin-top:34px !important; gap:16px; }
}

/* Iconos redondos: centrado con flexbox (Safari iOS descolocaba el SVG con grid + medida en %) */
.btn .ic, .chip .ic, .accordion__row .ic, .subitem__head .ic, .carto-summary__more .ic,
.cifras-filter__toggle .ic, .nav__cta .phone, .scroll-dot, .carousel__nav button,
.carto-ex__back{
  display:flex; align-items:center; justify-content:center;
}
.carto-ex__back svg{ display:block; }