/* ============ BARRA SUPERIOR ============ */
.cinta{
  background:var(--tinta);color:rgba(247,244,242,.82);
  font-size:var(--t-xs);border-bottom:1px solid rgba(247,244,242,.09);
  position:relative;z-index:60;
}
.cinta__caja{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;min-height:42px;flex-wrap:wrap;
}
.cinta__grupo{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;min-width:0}
.cinta a{display:inline-flex;align-items:center;gap:.45rem;transition:color var(--v-rapido) var(--ease)}
.cinta a:hover{color:var(--carmin-luz)}
.cinta svg{width:14px;height:14px;color:var(--carmin-luz);flex:none}
.cinta__bandera{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.15rem .55rem;border:1px solid rgba(247,244,242,.18);border-radius:var(--r-full);
  font-weight:600;letter-spacing:.08em;font-size:.68rem;
}
.cinta__pais{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
@media(max-width:900px){
  .cinta__grupo--secundario{display:none}
  .cinta__caja{justify-content:center}
}
@media(max-width:640px){
  /* En una pantalla estrecha los cuatro elementos se partían en dos líneas y
     el número de E.U.A. quedaba huérfano. Se deja un teléfono por país. */
  .cinta{font-size:.72rem}
  .cinta__caja{flex-wrap:nowrap;gap:.5rem;min-height:38px}
  .cinta__grupo{gap:.75rem;flex-wrap:nowrap;justify-content:center;width:100%}
  /* `.cinta a` (0,1,1) le gana a `.cinta__extra` (0,1,0): hay que subir la
     especificidad o el segundo número sigue apareciendo y desborda. */
  .cinta a.cinta__extra{display:none}
  .cinta__bandera{padding:.1rem .4rem;font-size:.62rem}
  .cinta svg{width:12px;height:12px}
}

/* ============ CABECERA ============ */
/* Sobre el hero y las portadillas la cabecera flota: se saca del flujo con un
   margen negativo igual a su altura, así el sticky sigue funcionando. */
body.cabecera-flotante .cabecera{margin-bottom:calc(-1 * var(--cabecera-alto))}

.cabecera{
  --cabecera-alto:76px;
  position:sticky;top:0;z-index:70;
  transition:background-color var(--v-medio) var(--ease),
             box-shadow var(--v-medio) var(--ease),
             border-color var(--v-medio) var(--ease);
  border-bottom:1px solid transparent;
}
/* Sobre el hero: transparente y en claro */
.cabecera[data-tono="claro"]{background:transparent;color:#fff}
.cabecera[data-tono="oscuro"]{background:transparent;color:var(--tinta)}
.cabecera.esta-fija{
  background:rgba(247,244,242,.92);color:var(--tinta);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-bottom-color:var(--borde-sutil);
  box-shadow:0 1px 24px rgba(18,16,15,.06);
}
/* Reserva si el navegador no soporta backdrop-filter (si no, se ve el texto encima) */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cabecera.esta-fija{background:var(--hueso)}
}
.cabecera__caja{
  display:flex;align-items:center;gap:1.5rem;
  /* La altura NO cambia al fijarse: la cabecera se superpone al hero con un
     margen negativo de este mismo valor, y si encogiera daría un salto. */
  min-height:var(--cabecera-alto);
}

/* --- Logotipo --- */
.marca{display:flex;align-items:center;flex:none;min-width:0}
.marca img{
  height:clamp(30px,4.6vw,42px);width:auto;
  transition:height var(--v-medio) var(--ease),opacity var(--v-rapido) var(--ease);
}
.cabecera.esta-fija .marca img{height:clamp(26px,4vw,36px)}
.marca__claro,.marca__oscuro{display:none}
.cabecera[data-tono="claro"]:not(.esta-fija) .marca__claro{display:block}
.cabecera[data-tono="oscuro"] .marca__oscuro,
.cabecera.esta-fija .marca__oscuro{display:block}

/* --- Navegación --- */
.nav{margin-left:auto;min-width:0}
.nav__lista{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.nav__lista li{margin:0;position:relative}
.nav__lista > li > a{
  display:flex;align-items:center;gap:.35rem;
  padding:.7rem .85rem;border-radius:var(--r-sm);
  font-size:var(--t-sm);font-weight:500;letter-spacing:-.005em;
  white-space:nowrap;
  transition:color var(--v-rapido) var(--ease),background-color var(--v-rapido) var(--ease);
}
.nav__lista > li > a::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:.35rem;height:1.5px;
  background:var(--carmin);transform:scaleX(0);transform-origin:right;
  transition:transform var(--v-medio) var(--ease);
}
.nav__lista > li > a:hover::after,
.nav__lista > li.current-menu-item > a::after,
.nav__lista > li.current-menu-ancestor > a::after{transform:scaleX(1);transform-origin:left}
.nav__lista > li > a:hover{color:var(--acento)}
.cabecera[data-tono="claro"]:not(.esta-fija) .nav__lista > li > a:hover{color:var(--carmin-luz)}
.cabecera[data-tono="claro"]:not(.esta-fija) .nav__lista > li > a::after{background:var(--carmin-luz)}
.nav__flecha{width:11px;height:11px;opacity:.55;transition:transform var(--v-rapido) var(--ease)}
.nav__lista li:hover > a .nav__flecha,
.nav__lista li:focus-within > a .nav__flecha{transform:rotate(180deg)}

/* --- Submenú --- */
.nav__lista ul{
  position:absolute;top:calc(100% + 6px);left:0;z-index:20;
  min-width:264px;margin:0;padding:.5rem;list-style:none;
  background:var(--blanco);color:var(--tinta);
  border:1px solid var(--borde-sutil);border-radius:var(--r-md);
  box-shadow:var(--s-3);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--v-rapido) var(--ease),transform var(--v-rapido) var(--ease),visibility 0s linear var(--v-rapido);
}
.nav__lista li:hover > ul,
.nav__lista li:focus-within > ul{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity var(--v-rapido) var(--ease),transform var(--v-rapido) var(--ease),visibility 0s;
}
.nav__lista ul ul{top:-.5rem;left:calc(100% + 4px)}
.nav__lista ul a{
  display:block;padding:.6rem .8rem;border-radius:var(--r-sm);
  font-size:var(--t-sm);color:var(--texto-suave);
  transition:background-color var(--v-rapido) var(--ease),color var(--v-rapido) var(--ease),padding-left var(--v-rapido) var(--ease);
}
.nav__lista ul a:hover{background:var(--carmin-velo);color:var(--carmin-hondo);padding-left:1.05rem}
.nav__lista ul li.current-menu-item > a{color:var(--acento);font-weight:600}

/* --- Acciones --- */
.cabecera__acciones{display:flex;align-items:center;gap:.6rem;flex:none}
.cabecera__tel{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:var(--t-sm);font-weight:600;white-space:nowrap;
}
.cabecera__tel svg{width:16px;height:16px;color:var(--acento)}
.cabecera[data-tono="claro"]:not(.esta-fija) .cabecera__tel svg{color:var(--carmin-luz)}

/* --- Hamburguesa --- */
/* El botón de CTA se esconde ANTES que la hamburguesa: si no, la expulsa */
.hamburguesa{
  display:none;flex:none;
  width:46px;height:46px;padding:0;
  background:none;border:1px solid currentColor;border-radius:50%;
  color:inherit;cursor:pointer;opacity:.85;
  transition:opacity var(--v-rapido) var(--ease),background-color var(--v-rapido) var(--ease);
}
.hamburguesa:hover{opacity:1;background:var(--carmin-velo)}
.hamburguesa span{
  display:block;width:18px;height:1.5px;margin:0 auto;background:currentColor;
  transition:transform var(--v-rapido) var(--ease),opacity var(--v-rapido) var(--ease);
}
.hamburguesa span + span{margin-top:5px}
.hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media(max-width:1180px){.cabecera__tel{display:none}}
@media(max-width:1080px){
  .nav{display:none}
  .hamburguesa{display:block}
  .cabecera__acciones .btn{display:none}
  .cabecera__caja{justify-content:space-between}
  .nav{margin-left:0}
}

/* ============ CAJÓN MÓVIL ============ */
.cajon{
  position:fixed;inset:0;z-index:200;
  visibility:hidden;pointer-events:none;
  /* El panel espera fuera de pantalla con translateX(100%). Sin recortar aquí,
     `visibility:hidden` no basta: sigue contando para el ancho del documento y
     aparece una barra de scroll horizontal de ~14 px en móvil. */
  overflow:clip;
}
.cajon.esta-abierto{visibility:visible;pointer-events:auto}
.cajon__fondo{
  position:absolute;inset:0;background:rgba(18,16,15,.6);
  opacity:0;transition:opacity var(--v-medio) var(--ease);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.cajon.esta-abierto .cajon__fondo{opacity:1}
.cajon__panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(420px,88vw);
  background:var(--tinta);color:var(--hueso);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .48s var(--ease);
  overflow-y:auto;overscroll-behavior:contain;
}
.cajon.esta-abierto .cajon__panel{transform:translateX(0)}
.cajon__cabeza{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.2rem var(--marco);border-bottom:1px solid rgba(247,244,242,.12);
  position:sticky;top:0;background:var(--tinta);z-index:2;
}
.cajon__cabeza img{height:30px;width:auto}
.cajon__cerrar{
  width:42px;height:42px;display:grid;place-items:center;flex:none;
  background:none;border:1px solid rgba(247,244,242,.24);border-radius:50%;
  color:inherit;cursor:pointer;transition:background-color var(--v-rapido) var(--ease)}
.cajon__cerrar:hover{background:var(--carmin)}
.cajon__cerrar svg{width:16px;height:16px}
.cajon__cuerpo{padding:1.4rem var(--marco) 2rem;flex:1}
.cajon__lista,.cajon__lista ul{list-style:none;margin:0;padding:0}
.cajon__lista li{margin:0;border-bottom:1px solid rgba(247,244,242,.08)}
.cajon__lista a{
  display:block;padding:.95rem 0;
  font-family:var(--display);font-size:var(--t-lg);font-weight:500;
  transition:color var(--v-rapido) var(--ease),padding-left var(--v-rapido) var(--ease);
}
.cajon__lista a:hover{color:var(--carmin-luz);padding-left:.5rem}
.cajon__lista ul{padding:0 0 .7rem .9rem;border-left:1px solid rgba(232,93,124,.3);margin-bottom:.7rem}
.cajon__lista ul li{border:0}
.cajon__lista ul a{
  font-family:var(--texto-fuente);font-size:var(--t-sm);font-weight:400;
  padding:.42rem 0;color:rgba(247,244,242,.72);
}
.cajon__pie{
  padding:1.5rem var(--marco) 2.4rem;border-top:1px solid rgba(247,244,242,.12);
  display:grid;gap:.85rem;
}
.cajon__pie a.enlace-contacto{
  display:flex;align-items:center;gap:.7rem;font-size:var(--t-sm);
  color:rgba(247,244,242,.85);
}
.cajon__pie svg{width:16px;height:16px;color:var(--carmin-luz);flex:none}
body.sin-scroll{overflow:hidden}