/* ==========================================================================
   ENVÍOS SIMPLES by EXPRESO LO BRUNO
   Hoja de estilos principal
   --------------------------------------------------------------------------
   Paleta de marca:
     azul    #262C65
     rojo    #FF1D3E
     celeste #0C9CD8
     verde   #2AD36E
   ========================================================================== */

:root{
  --azul:#262C65;
  --azul-oscuro:#1B2049;
  /* Azul de la barra que viene DENTRO del GIF. Si no coincide exacto con el
     fondo de la seccion, ajustalo aca (ver instrucciones abajo). */
  --azul-gif:#16305E;
  --rojo:#FF1D3E;
  --rojo-titulo:#F0341C;
  --celeste:#0C9CD8;
  --verde:#2AD36E;
  --verde-boton:#17A04B;
  --verde-hover:#128A3F;
  --gris:#f4f5f9;
  --gris-claro:#F7F7F8;
  --gris-texto:#5a5f77;
  --blanco:#ffffff;

  --ancho:1200px;
  --radio:12px;
  --sombra:0 6px 24px rgba(38,44,101,.10);
  --transicion:.25s ease;
}

/* ----- Reset ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{overflow-x:hidden;}
body{
  margin:0;
  font-family:'Montserrat','Segoe UI',Arial,sans-serif;
  color:var(--azul);
  background:var(--blanco);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5{margin:0;line-height:1.15;font-weight:800;}
p{margin:0 0 1rem;}

.contenedor{
  width:100%;
  max-width:var(--ancho);
  margin:0 auto;
  padding:0 24px;
}

/* ----- Botones ---------------------------------------------------------- */
/* Botones: menos aire vertical, letra un poco mayor y bordes redondeados.
   Para volver a esquinas rectas cambiá border-radius a 10px. */
.btn{
  display:inline-block;
  padding:13px 38px;
  border-radius:999px;
  font-weight:700;
  font-size:1.02rem;
  letter-spacing:.07em;
  line-height:1.5;
  text-align:center;
  transition:var(--transicion);
  cursor:pointer;
  border:2px solid transparent;
}
.btn-verde{background:var(--verde-boton);color:#fff;}
.btn-verde:hover{background:var(--verde-hover);transform:translateY(-2px);}
.btn-rojo{background:var(--rojo);color:#fff;}
.btn-rojo:hover{background:#e00d2d;transform:translateY(-2px);}
.btn-azul{background:var(--azul);color:#fff;}
.btn-azul:hover{background:var(--azul-oscuro);transform:translateY(-2px);}
.btn-blanco{background:#fff;color:var(--azul);}
.btn-blanco:hover{background:var(--gris);transform:translateY(-2px);}
.btn-borde-blanco{background:transparent;color:#fff;border-color:#fff;}
.btn-borde-blanco:hover{background:#fff;color:var(--azul);}
/* Boton de cabecera: menos alto, letra un poco mayor y bordes redondeados.
   El aire vertical de antes lo hacia ver desproporcionado. */
.btn-chico{
  padding:12px 32px;
  font-size:1.02rem;
  font-weight:700;
  letter-spacing:.07em;
  border-radius:999px;
}

/* ----- Header / navegación --------------------------------------------- */
.cabecera{
  position:sticky;top:0;z-index:100;
  background:#fff;
  box-shadow:0 2px 12px rgba(38,44,101,.08);
}
/* Grilla de 3 columnas: logo | menu | boton.
   Las dos columnas laterales miden igual (1fr), asi el menu queda centrado
   respecto a la pantalla aunque el logo sea mas ancho que el boton. */
/* La cabecera usa mas ancho que el resto del sitio: con el contenedor de
   1200px quedaba todo apretado al centro y un blanco enorme a los costados.
   Si lo queres mas angosto, bajá el max-width. */
.cabecera .contenedor{
  display:grid;
  /* La primera columna se lleva todo el sobrante, asi el menu y el boton
     quedan juntos a la derecha y el hueco queda entre el logo y el menu.
     El gap define la distancia entre el menu y COTIZA. */
  grid-template-columns:1fr auto auto;
  align-items:center;
  column-gap:60px;min-height:104px;
  max-width:1680px;
  padding:0 56px;
}
.logo{justify-self:start;}
.logo img{height:84px;width:auto;}
.nav-principal{
  display:flex;align-items:center;justify-content:flex-end;
  justify-self:end;
  gap:60px;
}
.acciones-cabecera{justify-self:end;}
.nav-principal a{
  font-weight:700;font-size:1.2rem;letter-spacing:.05em;
  padding:6px 0;position:relative;transition:var(--transicion);
  white-space:nowrap;
}
.nav-principal a::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:0;
  background:#111;transition:var(--transicion);
}
.nav-principal a:hover::after,.nav-principal a.activo::after{width:100%;}
.acciones-cabecera{display:flex;align-items:center;gap:16px;}

.btn-menu{
  display:none;background:none;border:0;padding:8px;cursor:pointer;
}
.btn-menu span{
  display:block;width:26px;height:3px;background:var(--azul);
  border-radius:3px;margin:5px 0;transition:var(--transicion);
}

/* ----- Hero ------------------------------------------------------------- */
/* ----- Foto principal (franja) ----------------------------------------- */
.hero-banner{line-height:0;}
.hero-banner img{
  width:100%;
  height:clamp(240px,23vw,440px);
  object-fit:cover;
  object-position:center;
  display:block;
}

/* ----- Bloque de título ------------------------------------------------ */
.hero-texto{
  background:var(--gris-claro);
  text-align:center;
  padding:80px 0;
}
/* Primera línea: azul, peso liviano */
.hero-texto h1{
  color:var(--azul);
  font-weight:500;
  font-size:clamp(2.1rem,5.2vw,4.1rem);
  letter-spacing:-.01em;
  margin-bottom:.05em;
}
/* Segunda línea: rojo, bold */
.hero-texto h2{
  color:var(--rojo-titulo);
  font-weight:800;
  font-size:clamp(2.1rem,5.2vw,4.1rem);
  letter-spacing:-.01em;
  margin-bottom:2.2rem;
}

/* ----- Hero de páginas internas (destinos) ----------------------------- */
.hero{
  position:relative;
  min-height:420px;
  display:flex;align-items:center;
  color:#fff;
  overflow:hidden;
}
.hero-fondo{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
}
.hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.20) 45%,rgba(0,0,0,0) 75%);
}
.hero .contenedor{position:relative;z-index:2;}
.hero h1{
  font-size:clamp(2.4rem,6vw,4rem);
  font-weight:800;
  text-shadow:0 4px 24px rgba(0,0,0,.35);
  margin-bottom:.3em;
}
.hero h2 strong{font-weight:800;}
.hero p{max-width:560px;font-size:1.1rem;}

.hero-interno{min-height:420px;}

/* ----- Secciones genéricas --------------------------------------------- */
.seccion{padding:80px 0;}
.seccion-gris{background:var(--gris);}
.seccion-azul{background:var(--azul);color:#fff;}
.titulo-seccion{
  font-size:clamp(1.9rem,4vw,2.8rem);
  text-align:center;
  margin-bottom:.6em;
  letter-spacing:-.01em;
}
.titulo-seccion span{color:var(--celeste);}
/* Estas van con doble clase a propósito: si no, la regla de arriba les gana. */
.titulo-seccion span.txt-verde,.txt-verde{color:var(--verde-boton);}
.titulo-seccion span.txt-rojo,.txt-rojo{color:var(--rojo-titulo);}
.titulo-seccion span.txt-celeste,.txt-celeste{color:var(--celeste);}
.titulo-seccion span.txt-azul,.txt-azul{color:var(--azul);}
.subtitulo-seccion{
  text-align:center;max-width:820px;margin:0 auto 3rem;
  font-size:1.08rem;color:var(--gris-texto);font-weight:500;
}
.seccion-azul .subtitulo-seccion{color:rgba(255,255,255,.85);}

/* ----- Bloque video + rubros ------------------------------------------- */
/* Todo el bloque usa el azul del GIF para que la barra bajo la caja se funda
   con el fondo y se lea una sola pieza. */
.franja-video{
  background:var(--azul-gif);
  padding:46px 24px 0;
  display:flex;
  justify-content:center;
  line-height:0;
}
/* aspect-ratio + cover recortan el aire blanco de arriba y abajo del GIF */
.franja-video img{
  width:100%;
  max-width:900px;
  aspect-ratio:16/8;
  height:auto;
  object-fit:cover;
  object-position:center 46%;
  display:block;
  border-radius:16px 16px 0 0;
}

.franja-rubros{
  padding:34px 0 56px;
  background:var(--azul-gif);
  color:#fff;
  text-align:center;
}
.franja-rubros h3{
  text-wrap:balance;
  font-size:clamp(1.05rem,2.4vw,1.55rem);
  font-weight:400;
  letter-spacing:.13em;
  line-height:1.95;
  margin:0;
  color:rgba(255,255,255,.55);
  text-transform:uppercase;
}
.franja-rubros h3 strong{
  font-weight:800;
  color:#fff;
  letter-spacing:.09em;
}
.raya-verde{
  display:block;
  width:64px;height:3px;
  margin:1.9rem auto 0;
  background:var(--verde);
  border-radius:3px;
}
.franja-rubros .btn{margin-top:1.9rem;}

@media (max-width:900px){
  .franja-video{padding:32px 18px 0;}
  .franja-video img{aspect-ratio:16/9;object-fit:contain;background:#fff;border-radius:12px 12px 0 0;}
  .franja-rubros{padding:26px 0 44px;}
  .franja-rubros h3{letter-spacing:.07em;line-height:1.85;}
}

/* ----- Destinos (chips) ------------------------------------------------- */
.grilla-destinos{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
  margin-bottom:3rem;
}
.chip-destino{
  display:inline-block;
  padding:12px 26px;
  border:2px solid var(--azul);
  border-radius:999px;
  font-weight:700;font-size:.95rem;
  transition:var(--transicion);
  background:#fff;
}
.chip-destino:hover{
  background:var(--azul);color:#fff;
  transform:translateY(-3px);
  box-shadow:var(--sombra);
}
.centrado{text-align:center;}

/* ----- Estadísticas ----------------------------------------------------- */
.grilla-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  margin-top:3.5rem;text-align:center;
}
.stat .numero{
  font-size:clamp(2.6rem,6vw,4rem);
  font-weight:800;color:var(--celeste);line-height:1;
}
.stat .etiqueta{
  font-size:.85rem;font-weight:700;letter-spacing:.12em;
  margin-top:.6rem;color:var(--gris-texto);
}
.seccion-azul .stat .etiqueta{color:rgba(255,255,255,.8);}

/* ----- Banner CTA ------------------------------------------------------- */
.banner-cta{
  position:relative;
  padding:96px 0;
  text-align:center;color:#fff;
  overflow:hidden;
}
.banner-cta img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.banner-cta::after{
  content:'';position:absolute;inset:0;background:rgba(38,44,101,.62);
}
.banner-cta .contenedor{position:relative;z-index:2;}
.banner-cta h2{
  font-size:clamp(1.7rem,4.5vw,2.9rem);
  margin-bottom:1.6rem;
  text-shadow:0 4px 20px rgba(0,0,0,.3);
}

/* ----- Tarjetas de sucursal -------------------------------------------- */
/* Flex en vez de grid: con 10 sucursales la ultima fila queda incompleta y
   con grid quedaba pegada a la izquierda. Asi se centra y se ve intencional. */
.grilla-sucursales{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:26px;
}
.tarjeta-sucursal{
  flex:0 1 calc((100% - 52px) / 3);
  min-width:300px;
}
@media (max-width:1000px){
  .tarjeta-sucursal{flex:0 1 calc((100% - 26px) / 2);}
}
@media (max-width:900px){
  .grilla-sucursales{gap:12px;}
  .tarjeta-sucursal{padding:20px 22px;}
}
@media (max-width:680px){
  .tarjeta-sucursal{flex:1 1 100%;min-width:0;}
}
.tarjeta-sucursal{
  background:#fff;
  border-radius:var(--radio);
  padding:32px 28px;
  box-shadow:var(--sombra);
  border-top:5px solid var(--celeste);
  display:block;              /* <details> no funciona con flex */
  transition:var(--transicion);
}
/* El cuerpo si es flex: asi los botones quedan abajo de todo y las
   tarjetas de una misma fila terminan parejas. */
.suc-cuerpo{
  display:flex;flex-direction:column;
}
.tarjeta-sucursal:hover{transform:translateY(-6px);box-shadow:0 14px 36px rgba(38,44,101,.16);}
.tarjeta-sucursal h3{font-size:1.4rem;margin-bottom:.15rem;}
.suc-sub{
  font-size:.78rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--celeste);margin-bottom:1rem;
}
.suc-dato{
  display:flex;gap:10px;align-items:flex-start;
  color:var(--gris-texto);font-size:.94rem;margin-bottom:.7rem;line-height:1.5;
}
.suc-dato a{color:var(--gris-texto);}
.suc-dato a:hover{color:var(--azul);text-decoration:underline;}
.suc-icono{flex-shrink:0;font-size:.95rem;line-height:1.5;opacity:.75;}
.suc-acciones{
  display:flex;gap:10px;flex-wrap:wrap;
  margin-top:auto;padding-top:1.2rem;
}
.btn-linea{
  background:transparent;color:var(--azul);border-color:#d5d9e8;
}
.btn-linea:hover{background:var(--azul);color:#fff;border-color:var(--azul);}

/* ----- Banda de cobertura ---------------------------------------------- */
.banda-cobertura{
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;flex-wrap:wrap;
  margin-top:34px;
  background:var(--azul);
  color:#fff;
  border-radius:var(--radio);
  padding:36px 44px;
}
.banda-texto{flex:1 1 420px;}
.banda-texto h3{font-size:1.4rem;margin-bottom:.5rem;}
.banda-texto p{
  margin:0;color:rgba(255,255,255,.82);
  font-size:.98rem;max-width:640px;
}
.banda-cobertura .btn{flex-shrink:0;}
@media (max-width:680px){
  .banda-cobertura{padding:30px 26px;text-align:center;justify-content:center;}
  .banda-cobertura .btn{width:100%;}
}

.btn-servicio{margin-top:18px;}
@media (max-width:900px){
  .btn-servicio{width:100%;}
}

/* ----- Acordeones (details) -------------------------------------------- */
/* En escritorio se abren solos por JS y el resumen se ve como titulo.
   En celular arrancan cerrados para no obligar a scrollear de mas. */
details[data-acordeon]{overflow:hidden;}
details[data-acordeon] summary{
  cursor:pointer;
  list-style:none;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:2px 0;
  user-select:none;
}
details[data-acordeon] summary::-webkit-details-marker{display:none;}
details[data-acordeon] summary::marker{content:'';}

.suc-flecha{
  margin-left:auto;flex-shrink:0;
  width:11px;height:11px;
  border-right:2.5px solid var(--celeste);
  border-bottom:2.5px solid var(--celeste);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .25s ease;
}
details[open] > summary .suc-flecha{
  transform:rotate(225deg) translate(-2px,-2px);
}

/* Titulo de sucursal dentro del summary */
.suc-titulo{
  font-size:1.4rem;font-weight:800;color:var(--azul);
  line-height:1.2;
}
details.tarjeta-sucursal > summary{
  display:flex;align-items:center;flex-wrap:wrap;gap:0 10px;
}
details.tarjeta-sucursal .suc-sub{
  display:block;width:100%;margin:.15rem 0 0;
  font-size:.78rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--celeste);
}
.suc-cuerpo{padding-top:18px;}

/* Detalle de servicio */
.detalle-servicio{margin-top:4px;}
.detalle-servicio > summary{
  font-weight:700;font-size:.92rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--celeste);
  padding:10px 0;
}
.detalle-servicio .suc-flecha{margin-left:10px;}
.detalle-cuerpo{padding-top:6px;}

/* Restricciones */
details.caja-restriccion > summary{
  font-size:1.2rem;font-weight:800;
  align-items:center;gap:12px;
}
.rest-titulo{flex:0 1 auto;}
details.caja-restriccion ul{padding-top:16px;}

/* En escritorio los acordeones se ven como antes: contenido completo,
   sin flechas ni nada que parezca clickeable. */
@media (min-width:901px){
  details[data-acordeon] summary{cursor:default;pointer-events:none;}
  .suc-flecha{display:none;}
  .detalle-servicio > summary{display:none;}
  .detalle-servicio{margin-top:0;}
  .detalle-cuerpo{padding-top:0;}
  details.caja-restriccion > summary{
    font-size:1.25rem;margin-bottom:0;
  }
  details.caja-restriccion ul{padding-top:16px;}
}

/* ----- Servicios -------------------------------------------------------- */
.bloque-servicio{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:52px;align-items:center;
  padding:64px 0;
  border-bottom:1px solid #e6e8f2;
}
.bloque-servicio:last-of-type{border-bottom:0;padding-bottom:16px;}
.bloque-servicio.invertido .contenido-servicio{order:-1;}
.bloque-servicio img{
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  width:100%;height:320px;object-fit:cover;
}
.bloque-servicio h3{
  font-size:clamp(1.6rem,3.5vw,2.2rem);
  margin-bottom:.4rem;
}
.bloque-servicio .bajada{
  font-weight:700;color:var(--celeste);
  font-size:1.05rem;margin-bottom:1rem;
}
.bloque-servicio p{color:var(--gris-texto);}
.lista-servicio li{
  position:relative;padding-left:26px;margin-bottom:.5rem;
  font-weight:600;font-size:.98rem;
}
.lista-servicio li::before{
  content:'';position:absolute;left:0;top:.55em;
  width:10px;height:10px;border-radius:50%;background:var(--verde);
}

/* ----- Cómo funciona ---------------------------------------------------- */
.grilla-pasos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:26px;
}
.paso{
  background:#fff;
  border-radius:var(--radio);
  padding:36px 30px 32px;
  box-shadow:var(--sombra);
  text-align:center;
  transition:var(--transicion);
}
.paso:hover{transform:translateY(-6px);box-shadow:0 14px 36px rgba(38,44,101,.16);}
.paso-numero{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;
  background:var(--azul);color:#fff;
  font-size:1.3rem;font-weight:800;
  margin-bottom:1.1rem;
}
.paso h3{font-size:1.3rem;margin-bottom:.6rem;}
.paso p{
  color:var(--gris-texto);font-size:.97rem;margin:0;
}

/* ----- Restricciones ---------------------------------------------------- */
.grilla-restricciones{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:26px;
}
.caja-restriccion{
  background:#fff;border-radius:var(--radio);
  padding:32px 30px;box-shadow:var(--sombra);
  border-top:5px solid var(--verde-boton);
}
.caja-restriccion.caja-no{border-top-color:var(--rojo-titulo);}
.caja-restriccion h3{
  font-size:1.25rem;margin-bottom:1.2rem;
  display:flex;align-items:center;gap:12px;
}
.caja-restriccion{overflow:hidden;}
.icono-rest{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:var(--verde-boton);color:#fff;font-size:1rem;font-weight:700;
}
.caja-no .icono-rest{background:var(--rojo-titulo);}
.caja-restriccion li{
  position:relative;padding-left:20px;margin-bottom:.55rem;
  color:var(--gris-texto);font-size:.96rem;
}
.caja-restriccion li::before{
  content:'';position:absolute;left:0;top:.6em;
  width:7px;height:7px;border-radius:50%;background:#c9cede;
}
.grilla-restricciones + .banda-cobertura{margin-top:34px;}

/* ----- Página 404 ------------------------------------------------------- */
.pagina-404{
  min-height:62vh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:80px 24px;background:var(--gris-claro);
}
.pagina-404 .codigo{
  font-size:clamp(5rem,16vw,10rem);font-weight:800;
  color:var(--azul);line-height:1;opacity:.16;
}
.pagina-404 h1{
  font-size:clamp(1.6rem,4vw,2.4rem);color:var(--azul);
  margin:-.35em 0 .6rem;
}
.pagina-404 p{color:var(--gris-texto);max-width:460px;margin:0 auto 2rem;}
.acciones-404{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ----- Footer ----------------------------------------------------------- */
.pie{
  background:var(--azul);color:#fff;
  padding:56px 0 32px;text-align:center;
}
.pie .sello{width:110px;margin:0 auto 22px;border-radius:50%;}
.pie .links-pie{
  display:flex;justify-content:center;gap:28px;flex-wrap:wrap;
  margin-bottom:24px;font-size:.85rem;font-weight:700;letter-spacing:.06em;
}
.pie .links-pie a:hover{color:var(--verde);}
.pie .copy{
  font-size:.82rem;color:rgba(255,255,255,.7);
  border-top:1px solid rgba(255,255,255,.15);
  padding-top:22px;margin-top:8px;
}

/* ----- WhatsApp flotante ------------------------------------------------ */
.wa-flotante{
  position:fixed;right:22px;bottom:22px;z-index:200;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  transition:var(--transicion);
}
.wa-flotante:hover{transform:scale(1.08);}
.wa-flotante svg{width:30px;height:30px;fill:#fff;}

/* ----- Código de descuento --------------------------------------------- */
.promo-instruccion{
  font-size:1rem;font-weight:600;
  color:rgba(255,255,255,.9);
  margin-bottom:1.1rem;
}
.codigo-promo{
  display:inline-flex;flex-direction:column;align-items:center;gap:4px;
  background:rgba(255,255,255,.12);
  border:2px dashed rgba(255,255,255,.85);
  border-radius:12px;
  padding:14px 34px;
  margin-bottom:1.8rem;
  cursor:pointer;
  font-family:inherit;color:#fff;
  transition:var(--transicion);
}
.codigo-promo:hover{background:rgba(255,255,255,.22);transform:translateY(-2px);}
.codigo-promo .codigo-valor{
  font-size:clamp(1.4rem,3.5vw,2rem);
  font-weight:800;letter-spacing:.16em;line-height:1.1;
}
.codigo-promo .codigo-ayuda{
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.8);font-weight:600;
}
.codigo-promo.copiado{
  background:var(--verde-boton);
  border-color:var(--verde-boton);
  border-style:solid;
}

/* ----- Animaciones ------------------------------------------------------ */
.revelar{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .65s ease,transform .65s cubic-bezier(.22,.8,.3,1);
  will-change:opacity,transform;
}
.revelar.visible{opacity:1;transform:none;}

.cabecera{transition:min-height .28s ease,box-shadow .28s ease;}
.cabecera .contenedor{transition:min-height .28s ease;}
.cabecera .logo img{transition:height .28s ease;}
.cabecera.compacta{box-shadow:0 4px 20px rgba(38,44,101,.14);}
.cabecera.compacta .contenedor{min-height:80px;}
.cabecera.compacta .logo img{height:64px;}

/* ----- Responsive ------------------------------------------------------- */
@media (max-width:900px){
  .btn-menu{display:block;}
  .cabecera .contenedor{
    display:flex;justify-content:space-between;min-height:82px;
    padding:0 24px;
  }
  .logo img{height:58px;}
  .nav-principal{
    position:absolute;top:100%;left:0;right:0;
    background:#fff;flex-direction:column;gap:0;
    padding:0 24px;max-height:0;overflow:hidden;
    box-shadow:0 12px 24px rgba(38,44,101,.12);
    transition:max-height .3s ease,padding .3s ease;
  }
  .nav-principal.abierto{max-height:340px;padding:12px 24px 24px;}
  .nav-principal a{display:block;width:100%;padding:14px 0;border-bottom:1px solid #eef0f7;}
  .acciones-cabecera .btn{display:none;}
  .nav-principal .btn-nav-movil{display:block;}
  .bloque-servicio,.bloque-servicio.invertido .contenido-servicio{
    grid-template-columns:1fr;order:0;
  }
  .bloque-servicio{gap:28px;}
  .grilla-stats{grid-template-columns:1fr;gap:40px;}
  .hero{min-height:520px;}
  .seccion{padding:56px 0;}
  .hero-texto{padding:56px 0;}
  .banner-cta{padding:64px 0;}
  /* El menu desplegable arranca desde arriba, no desde el final */
  .nav-principal{justify-content:flex-start;justify-self:auto;}
  /* Botones de sucursal: menos padding lateral para que entre "CÓMO LLEGAR" */
  .suc-acciones{gap:8px;}
  .suc-acciones .btn{flex:1 1 auto;padding:12px 18px;font-size:.9rem;}
  /* Botones generales mas compactos en pantalla chica */
  .btn{padding:13px 28px;font-size:.96rem;}
  .titulo-seccion{font-size:clamp(1.6rem,6vw,2.2rem);}
  .banda-texto h3{font-size:1.2rem;}
  .tarjeta-sucursal{padding:26px 22px;}
  .caja-restriccion{padding:26px 22px;}
  .paso{padding:30px 24px 26px;}
  .codigo-promo{padding:13px 24px;}
  .codigo-promo .codigo-valor{letter-spacing:.1em;}
}

/* ----- Pantallas chicas (celulares de 360-400px) ----------------------- */
@media (max-width:480px){
  .contenedor{padding:0 18px;}
  .cabecera .contenedor{padding:0 18px;min-height:74px;}
  .logo img{height:48px;}
  .wa-flotante{width:52px;height:52px;right:16px;bottom:16px;}
  .wa-flotante svg{width:26px;height:26px;}
  .suc-acciones{flex-direction:column;}
  .suc-acciones .btn{width:100%;flex:none;}
  .btn{padding:13px 22px;font-size:.94rem;}
  .franja-video{padding:24px 14px 0;}
  .franja-rubros h3{font-size:.92rem;letter-spacing:.05em;}
  .stat .numero{font-size:2.8rem;}
  .banda-cobertura{padding:26px 20px;}
  .seccion{padding:46px 0;}
  .hero-texto{padding:46px 0;}
  .banner-cta{padding:52px 0;}
  .bloque-servicio img{height:220px;}
  .grilla-destinos{gap:10px;}
  .chip-destino{padding:10px 18px;font-size:.88rem;}
}

@media (min-width:901px){
  .nav-principal .btn-nav-movil{display:none;}
}

/* ----- Accesibilidad ---------------------------------------------------- */
a:focus-visible,button:focus-visible{
  outline:3px solid var(--celeste);outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
  .revelar{opacity:1!important;transform:none!important;}
}