/* ==========================================================================
   HONORIO PARKING — hoja de estilos principal
   Paleta tomada del logotipo: azul #014DF9 · gris #373435 · blanco
   ========================================================================== */

:root{
  --hp-azul:#014DF9;
  --hp-azul-osc:#0033B8;
  --hp-azul-prof:#00195C;
  --hp-azul-claro:#E8EFFF;
  --hp-gris:#373435;
  --hp-gris-medio:#6B6B6B;
  --hp-gris-borde:#E6E8EE;
  --hp-fondo:#FFFFFF;
  --hp-fondo-alt:#F7F9FC;
  --hp-verde-wa:#25D366;
  --hp-radio:16px;       /* tarjetas y cajas */
  --hp-radio-btn:12px;   /* botones */
  --hp-radio-chip:10px;  /* chips y etiquetas */
  --hp-tope:117px;   /* alto de marquesina + navbar; lo ajusta main.js */
  --hp-sombra:0 10px 30px rgba(1,77,249,.08);
  --hp-sombra-fuerte:0 18px 50px rgba(0,25,92,.14);
}

html{ scroll-behavior:smooth; }

/* Al abrir el menú, Bootstrap agrega padding/margin para compensar el ancho
   del scrollbar. Eso corría el navbar y los botones flotantes: lo anulamos. */
body{ padding-right:0!important; }
.hp-nav{ padding-right:0!important; margin-right:0!important; }

body{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--hp-gris);
  background:var(--hp-fondo);
  /* clip en lugar de hidden: recorta el desborde lateral sin convertir al body
     en contenedor de scroll, que era lo que descolocaba los botones fijos. */
  overflow-x:clip;
}

h1,h2,h3,h4,.hp-display{ font-weight:800; letter-spacing:-.02em; }

a{ text-decoration:none; }

.hp-azul{ color:var(--hp-azul)!important; }
.hp-bg-azul{ background:var(--hp-azul)!important; }
.hp-bg-alt{ background:var(--hp-fondo-alt); }

section{ scroll-margin-top:96px; }

/* ---------- Tipografía de apoyo ---------- */
.hp-kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--hp-azul); background:var(--hp-azul-claro);
  padding:.42rem .95rem; border-radius:var(--hp-radio-chip); margin-bottom:1rem;
}
.hp-titulo{ font-size:clamp(1.85rem,4vw,2.9rem); line-height:1.12; }
.hp-bajada{ color:var(--hp-gris-medio); font-size:1.05rem; max-width:62ch; }

/* ==========================================================================
   MARQUESINA LED
   ========================================================================== */
.hp-led{
  position:relative;
  background:
    radial-gradient(circle, rgba(255,255,255,.16) 1px, transparent 1.15px) 0 0/6px 6px,
    linear-gradient(180deg,#0140D6 0%, var(--hp-azul) 50%, #0138BE 100%);
  color:#fff;
  overflow:hidden;
  border-bottom:1px solid rgba(0,0,0,.15);
  box-shadow:inset 0 -6px 14px rgba(0,0,0,.28), inset 0 6px 12px rgba(255,255,255,.12);
}
.hp-led::before,
.hp-led::after{
  content:""; position:absolute; top:0; bottom:0; width:60px; z-index:3; pointer-events:none;
}
.hp-led::before{ left:0;  background:linear-gradient(90deg,#0138BE,rgba(1,64,214,0)); }
.hp-led::after{  right:0; background:linear-gradient(270deg,#0138BE,rgba(1,64,214,0)); }

.hp-led-pista{
  display:flex; width:max-content;
  animation:hp-marquesina 26s linear infinite;
}
.hp-led:hover .hp-led-pista{ animation-play-state:paused; }

.hp-led-texto{
  display:inline-flex; align-items:center; gap:.75rem;
  white-space:nowrap;
  padding:.55rem 0;
  font-weight:800; font-size:.82rem; letter-spacing:.22em; text-transform:uppercase;
  color:#fff;
  text-shadow:0 0 6px rgba(255,255,255,.75), 0 0 18px rgba(190,215,255,.55);
}
.hp-led-texto span{ padding:0 1.6rem; display:inline-flex; align-items:center; gap:.6rem; }
.hp-led-texto i{ font-size:.9em; }
.hp-led-sep{ opacity:.55; font-size:.7em; }

.hp-led-punto{
  width:8px; height:8px; border-radius:50%; background:#8BFF9E;
  box-shadow:0 0 8px #8BFF9E,0 0 16px rgba(139,255,158,.7);
  animation:hp-latido 1.6s ease-in-out infinite;
}

@keyframes hp-marquesina{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@keyframes hp-latido{ 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.35;transform:scale(.82);} }

@media (prefers-reduced-motion:reduce){
  .hp-led-pista{ animation:none; }
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */
/* Ojo: no usar backdrop-filter acá. Crea un bloque contenedor para los
   elementos position:fixed y rompe el menú offcanvas de mobile. */
.hp-nav{
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--hp-gris-borde);
  transition:box-shadow .3s ease, padding .3s ease;
  padding-top:.55rem; padding-bottom:.55rem;
}
/* Por encima del offcanvas (1045) para que el menú nunca lo tape ni lo oscurezca */
.hp-nav{ z-index:1050; }
.hp-nav.hp-nav-scroll{ box-shadow:0 6px 24px rgba(0,25,92,.08); }
.hp-nav .navbar-brand{ padding-top:0; padding-bottom:0; }
.hp-nav .navbar-brand img{ height:60px; width:auto; transition:height .3s ease; }
.hp-nav.hp-nav-scroll .navbar-brand img{ height:50px; }

/* En mobile el logo no cambia de tamaño al scrollear: si el navbar se achica
   estando fijo, el contenido de abajo pega un salto muy visible. */
@media (max-width:991.98px){
  .hp-nav .navbar-brand img,
  .hp-nav.hp-nav-scroll .navbar-brand img{ height:48px; }
}

.hp-nav .nav-link{
  font-weight:600; font-size:.94rem; color:var(--hp-gris);
  padding:.5rem .9rem!important; border-radius:10px; position:relative;
}
.hp-nav .nav-link:hover,
.hp-nav .nav-link.activo{ color:var(--hp-azul); background:var(--hp-azul-claro); }

.navbar-toggler{ border:1px solid var(--hp-gris-borde); }
.navbar-toggler:focus{ box-shadow:0 0 0 .2rem rgba(1,77,249,.18); }

/* ==========================================================================
   MENÚ MOBILE (baja desde el navbar y ocupa el resto de la pantalla)
   ========================================================================== */

/* Botón hamburguesa / X: siempre en el mismo lugar */
.hp-toggler{ position:relative; width:48px; height:44px; padding:0; display:grid; place-items:center; }
.hp-toggler i{
  grid-area:1/1; font-size:1.4rem; color:var(--hp-gris); line-height:1;
  transition:opacity .2s ease, transform .2s ease;
}
.hp-toggler .hp-toggler-cerrar{ opacity:0; transform:rotate(-90deg); }
.hp-toggler.hp-abierto .hp-toggler-abrir{ opacity:0; transform:rotate(90deg); }
.hp-toggler.hp-abierto .hp-toggler-cerrar{ opacity:1; transform:none; color:var(--hp-azul); }

@media (max-width:991.98px){
  /* Arranca justo debajo del navbar y cubre lo que queda de pantalla.
     --hp-nav-abajo lo calcula main.js al abrir, con la posición real del navbar.
     Se repite .offcanvas-top en el selector para ganarle a la regla de Bootstrap. */
  .offcanvas.offcanvas-top.hp-menu{
    --bs-offcanvas-height:auto;
    --bs-offcanvas-border-width:0;
    top:var(--hp-nav-abajo,117px); right:0; left:0; bottom:0;
    height:auto; max-height:none;
    background:#fff;
    box-shadow:0 20px 40px rgba(0,25,92,.1);

    /* Se despliega hacia abajo desde el borde del navbar, sin taparlo */
    transform:none;
    clip-path:inset(0 0 100% 0);
    transition:clip-path .38s cubic-bezier(.22,1,.36,1);
  }
  .offcanvas.offcanvas-top.hp-menu.show{ clip-path:inset(0 0 0 0); }

  @media (prefers-reduced-motion:reduce){
    .offcanvas.offcanvas-top.hp-menu{ transition:none; }
  }

  /* Cuerpo: opciones centradas, con aire respecto del navbar */
  .hp-menu-cuerpo{
    display:flex; flex-direction:column;
    padding:2.5rem 1.5rem 1.75rem;
    overflow-y:auto;
  }
  .hp-menu-cuerpo .navbar-nav{ width:100%; margin:0 auto; }

  .hp-menu-cuerpo .nav-item{ width:100%; }
  .hp-menu-cuerpo .nav-item + .nav-item{ border-top:1px solid var(--hp-gris-borde); }

  .hp-menu-cuerpo .nav-link{
    text-align:center; font-size:1.15rem; font-weight:700;
    padding:1.05rem .5rem!important; border-radius:0;
  }
  .hp-menu-cuerpo .nav-link:hover,
  .hp-menu-cuerpo .nav-link.activo{ background:transparent; color:var(--hp-azul); }

  /* El botón de contacto separado del listado */
  .hp-menu-cuerpo .nav-item:last-child{
    border-top:none; margin-top:1.75rem; display:flex; justify-content:center;
  }
  .hp-menu-cuerpo .nav-item:last-child .btn{
    width:100%; max-width:320px; font-size:1rem; padding:.85rem 1.5rem!important;
  }

  /* Teléfono y horario al pie del menú */
  .hp-menu-pie{
    margin-top:auto; padding-top:1.75rem; text-align:center;
    border-top:1px dashed var(--hp-gris-borde);
    display:flex; flex-direction:column; gap:.45rem;
  }
  .hp-menu-pie a{ color:var(--hp-gris); font-weight:700; font-size:1.02rem; }
  .hp-menu-pie a i{ color:var(--hp-verde-wa); }
  .hp-menu-pie span{ font-size:.85rem; color:var(--hp-gris-medio); }
  .hp-menu-pie span i{ color:var(--hp-azul); }
}

/* En escritorio el offcanvas vuelve a ser una barra común */
@media (min-width:992px){
  .hp-menu-cuerpo{ padding:0; }
}

/* ---------- Botones ---------- */
.btn-hp{
  --bs-btn-focus-shadow-rgb:1,77,249;
  background:var(--hp-azul); color:#fff; font-weight:700;
  border:none; border-radius:var(--hp-radio-btn); padding:.78rem 1.6rem;
  box-shadow:0 8px 22px rgba(1,77,249,.28);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-hp:hover,.btn-hp:focus{ background:var(--hp-azul-osc); color:#fff; transform:translateY(-2px); box-shadow:0 12px 28px rgba(1,77,249,.36); }
.btn-hp-linea{
  background:transparent; color:var(--hp-azul); font-weight:700;
  border:2px solid var(--hp-azul); border-radius:var(--hp-radio-btn); padding:.7rem 1.5rem;
  transition:all .18s ease;
}
.btn-hp-linea:hover{ background:var(--hp-azul); color:#fff; transform:translateY(-2px); }
.btn-hp-claro{
  background:#fff; color:var(--hp-azul); font-weight:700;
  border:none; border-radius:var(--hp-radio-btn); padding:.78rem 1.6rem;
  transition:all .18s ease;
}
.btn-hp-claro:hover{ background:#fff; color:var(--hp-azul-osc); transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.18); }

/* ==========================================================================
   HERO (preparado para video)
   ========================================================================== */
/* El hero ocupa exactamente lo que queda de pantalla debajo de la marquesina
   y el navbar. --hp-tope lo recalcula main.js según la altura real de ambos. */
.hp-hero{
  position:relative; overflow:hidden;
  min-height:clamp(520px, calc(100vh - var(--hp-tope)), 880px);
  min-height:clamp(520px, calc(100svh - var(--hp-tope)), 880px);
  display:flex; align-items:center;
  background:#00195C;
}

/* Pantallas bajas (notebooks 1366x768): se achica el aire vertical para que
   entren el texto, la tarjeta del clima y la flecha, todo dentro del viewport. */
@media (min-width:992px) and (max-height:820px){
  .hp-hero .container{ padding-top:1.25rem!important; padding-bottom:3.25rem!important; }
  .hp-hero-titulo{ font-size:clamp(1.9rem,3.4vw,3rem); margin-bottom:.6rem!important; }
  .hp-hero-sub{ font-size:1rem; margin-bottom:.9rem!important; }
  .hp-hero .row{ --bs-gutter-y:1.25rem; }

  /* Botones y pills más compactos */
  .hp-hero .btn-hp-claro,
  .hp-hero .btn-hp-linea{ padding:.6rem 1.25rem; font-size:.92rem; }
  .hp-hero .d-flex.gap-3{ margin-bottom:.9rem!important; gap:.75rem!important; }
  .hp-hero .d-flex.gap-2{ gap:.4rem!important; }
  .hp-hero-chip{ font-size:.8rem; padding:.36rem .8rem; gap:.45rem; }

  /* Tarjeta del clima */
  .hp-clima{ padding:1rem 1.1rem; }
  .hp-clima-temp{ font-size:2.5rem; }
  .hp-clima-icono{ font-size:2rem; }
  .hp-clima-dia{ padding:.45rem .3rem; }
  .hp-clima-dia i{ margin:.25rem 0; font-size:1.05rem; }
  .hp-clima-aviso{ padding:.5rem .75rem; font-size:.79rem; }

  .hp-scroll-abajo{ bottom:16px; font-size:1.25rem; }
}
.hp-hero-media{ position:absolute; inset:0; z-index:0; }
.hp-hero-media video,
.hp-hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }

.hp-hero-velo{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg, rgba(0,25,92,.92) 0%, rgba(0,25,92,.74) 45%, rgba(1,77,249,.42) 100%),
    radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1.15px) 0 0/7px 7px;
}
.hp-hero .container{ position:relative; z-index:2; }

.hp-hero-titulo{
  color:#fff; font-size:clamp(2.15rem,5.4vw,4rem); line-height:1.06; font-weight:800; letter-spacing:-.03em;
  text-shadow:0 4px 30px rgba(0,0,0,.3);
}
.hp-hero-sub{ color:rgba(255,255,255,.86); font-size:clamp(1rem,1.6vw,1.2rem); max-width:56ch; }

.hp-hero-chip{
  display:inline-flex; align-items:center; gap:.55rem;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24);
  color:#fff; font-weight:600; font-size:.9rem;
  padding:.5rem 1rem; border-radius:var(--hp-radio-chip); backdrop-filter:blur(6px);
}

.hp-scroll-abajo{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
  color:rgba(255,255,255,.7); font-size:1.4rem; animation:hp-flota 2.2s ease-in-out infinite;
}
@keyframes hp-flota{ 0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,10px);} }

/* ---------- Tarjeta de clima ---------- */
.hp-clima{
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);
  border-radius:22px; backdrop-filter:blur(14px);
  color:#fff; padding:1.4rem 1.5rem;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.hp-clima-temp{ font-size:3.2rem; font-weight:800; line-height:1; letter-spacing:-.04em; }
.hp-clima-icono{ font-size:2.5rem; color:#FFD466; }
/* ==========================================================================
   CARTEL LED DEL HERO (matriz de puntos: ABIERTO / CERRADO)
   Mismo lenguaje de vidrio que la tarjeta del clima, no el negro de un
   panel real: así convive con el resto del hero.
   ========================================================================== */
.hp-led-panel{
  --punto:3px;            /* tamaño del punto */
  --hueco:2px;            /* separación entre puntos */
  --sep:6px;              /* separación entre letras */

  display:inline-flex; align-items:center; gap:.6rem;
  margin-bottom:.9rem; padding:.55rem .8rem;
  background:rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--hp-radio-btn);
  backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 22px rgba(0,0,0,.22);
}

.hp-led-matriz{ display:inline-flex; gap:var(--sep); }

.hp-led-caracter{
  display:grid;
  grid-template-columns:repeat(5, var(--punto));
  grid-template-rows:repeat(7, var(--punto));
  gap:var(--hueco);
}

.hp-led-punto-m{
  width:var(--punto); height:var(--punto); border-radius:50%;
  background:rgba(255,255,255,.09);
  transition:background .25s ease, box-shadow .25s ease;
}

/* Abierto: el mismo verde del WhatsApp, para no sumar un color nuevo */
.hp-led-panel.esta-abierto .hp-led-punto-m.on{
  background:var(--hp-verde-wa);
  box-shadow:0 0 4px rgba(37,211,102,.9), 0 0 9px rgba(37,211,102,.55);
}
.hp-led-panel.esta-cerrado .hp-led-punto-m.on{
  background:#FF5A6E;
  box-shadow:0 0 4px rgba(255,90,110,.9), 0 0 9px rgba(255,90,110,.5);
}

/* Testigo redondo, como el piloto de un cartel encendido */
.hp-led-panel::before{
  content:""; width:7px; height:7px; border-radius:50%; flex:0 0 7px;
  background:rgba(255,255,255,.25); transition:background .25s ease, box-shadow .25s ease;
}
.hp-led-panel.esta-abierto::before{
  background:var(--hp-verde-wa); box-shadow:0 0 8px var(--hp-verde-wa);
  animation:hp-led-latido 2.4s ease-in-out infinite;
}
.hp-led-panel.esta-cerrado::before{ background:#FF5A6E; box-shadow:0 0 8px rgba(255,90,110,.8); }

@keyframes hp-led-latido{
  0%,100%{ opacity:1; } 50%{ opacity:.35; }
}
@media (prefers-reduced-motion:reduce){
  .hp-led-panel.esta-abierto::before{ animation:none; }
}

@media (max-width:575.98px){
  .hp-led-panel{ --punto:2.5px; --hueco:1.5px; --sep:5px; padding:.5rem .7rem; }
}

/* Destello suave cuando entran datos nuevos del pronóstico */
.hp-clima{ transition:box-shadow .5s ease, border-color .5s ease; }
.hp-clima-fresco{
  border-color:rgba(255,255,255,.4);
  box-shadow:0 0 0 3px rgba(255,255,255,.12), var(--hp-sombra);
}
@media (prefers-reduced-motion:reduce){
  .hp-clima{ transition:none; }
}

.hp-clima-etiq{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.hp-clima-dia{
  background:rgba(255,255,255,.08); border-radius:14px; padding:.7rem .35rem; text-align:center;
  border:1px solid rgba(255,255,255,.1);
}
.hp-clima-dia .d{ font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.65); }
.hp-clima-dia i{ font-size:1.15rem; margin:.35rem 0; display:block; color:#FFD466; }
.hp-clima-dia .t{ font-size:.85rem; font-weight:700; }
.hp-clima-dia .t small{ color:rgba(255,255,255,.55); font-weight:500; }
/* El ícono va aparte del texto: así el segundo renglón arranca alineado con
   el primero y no se mete debajo del ícono. */
.hp-clima-aviso{
  font-size:.83rem; color:#fff; background:rgba(1,77,249,.35);
  border:1px solid rgba(255,255,255,.2); border-radius:12px; padding:.6rem .85rem;
  display:flex; align-items:flex-start; gap:.5rem;
}
.hp-clima-aviso > i{ flex:0 0 auto; margin-top:.14rem; }
.hp-clima-aviso > span{ flex:1 1 auto; min-width:0; }
.hp-clima-aviso strong{ font-weight:700; }

/* ==========================================================================
   FRANJA DE DATOS
   ========================================================================== */
.hp-franja{ background:var(--hp-azul); color:#fff; }
.hp-franja .hp-dato{ text-align:center; padding:1.5rem .5rem; }
.hp-franja .hp-dato i{ font-size:1.5rem; opacity:.85; margin-bottom:.5rem; display:block; }
.hp-franja .hp-dato strong{ display:block; font-size:1.05rem; }
.hp-franja .hp-dato span{ font-size:.85rem; opacity:.8; }

/* ==========================================================================
   TARJETAS DE SERVICIO
   ========================================================================== */
.hp-tarjeta{
  background:#fff; border:1px solid var(--hp-gris-borde); border-radius:var(--hp-radio);
  padding:2rem 1.75rem; height:100%;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hp-tarjeta:hover{ transform:translateY(-6px); box-shadow:var(--hp-sombra-fuerte); border-color:rgba(1,77,249,.3); }
.hp-tarjeta-icono{
  width:60px; height:60px; border-radius:16px; display:grid; place-items:center;
  background:var(--hp-azul-claro); color:var(--hp-azul); font-size:1.5rem; margin-bottom:1.15rem;
  transition:background .25s ease, color .25s ease;
}
.hp-tarjeta:hover .hp-tarjeta-icono{ background:var(--hp-azul); color:#fff; }
.hp-tarjeta h3{ font-size:1.2rem; margin-bottom:.6rem; }
.hp-tarjeta p{ color:var(--hp-gris-medio); font-size:.95rem; margin-bottom:1rem; }
.hp-lista-check{ list-style:none; padding:0; margin:0; font-size:.9rem; }
.hp-lista-check li{ padding:.3rem 0 .3rem 1.6rem; position:relative; color:var(--hp-gris); }
.hp-lista-check li::before{
  content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; left:0; top:.35rem; color:var(--hp-azul); font-size:.78rem;
}

/* ---------- Vehículos / tarifas ---------- */
.hp-vehiculo{
  border:1px solid var(--hp-gris-borde); border-radius:var(--hp-radio);
  padding:1.6rem 1.25rem; text-align:center; height:100%; background:#fff;
  transition:all .25s ease;
}
.hp-vehiculo:hover{ border-color:var(--hp-azul); box-shadow:var(--hp-sombra); transform:translateY(-4px); }
.hp-vehiculo i{ font-size:2.1rem; color:var(--hp-azul); margin-bottom:.75rem; }
.hp-vehiculo h4{ font-size:1.05rem; margin-bottom:.25rem; }
.hp-vehiculo p{ font-size:.85rem; color:var(--hp-gris-medio); margin:0; }

/* ---------- Medios de pago ---------- */
.hp-pago{
  display:flex; align-items:center; gap:.9rem;
  border:1px solid var(--hp-gris-borde); border-radius:14px;
  padding:1.05rem 1.2rem; background:#fff; height:100%;
  transition:all .25s ease;
}
.hp-pago:hover{ border-color:var(--hp-azul); box-shadow:var(--hp-sombra); }
.hp-pago i{ font-size:1.5rem; color:var(--hp-azul); width:34px; text-align:center; }
.hp-pago strong{ display:block; font-size:.98rem; }
.hp-pago span{ font-size:.82rem; color:var(--hp-gris-medio); }

/* ---------- Convenios ---------- */
.hp-convenio{
  background:#fff; border:1px solid var(--hp-gris-borde); border-radius:var(--hp-radio);
  padding:1.5rem 1.35rem; height:100%; text-align:center;
  transition:all .25s ease;
}
.hp-convenio:hover{ transform:translateY(-5px); box-shadow:var(--hp-sombra-fuerte); border-color:rgba(1,77,249,.3); }
.hp-convenio i{ font-size:1.7rem; color:var(--hp-azul); margin-bottom:.7rem; }
.hp-convenio h4{ font-size:1rem; margin-bottom:.35rem; }
.hp-convenio p{ font-size:.85rem; color:var(--hp-gris-medio); margin:0; }

.hp-convenio-cta{
  background:linear-gradient(120deg,var(--hp-azul) 0%,var(--hp-azul-prof) 100%);
  border-radius:var(--hp-radio); color:#fff; padding:2.2rem;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1.15px),
    linear-gradient(120deg,var(--hp-azul) 0%,var(--hp-azul-prof) 100%);
  background-size:7px 7px, auto;
}

/* ==========================================================================
   GALERÍA (fsLightbox)
   ========================================================================== */
.hp-galeria a{
  display:block; position:relative; overflow:hidden; border-radius:var(--hp-radio);
  aspect-ratio:3/2; background:var(--hp-azul-claro);
}
.hp-galeria img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.hp-galeria a:hover img{ transform:scale(1.07); }
.hp-galeria a::after{
  content:"\f00e"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(1,77,249,.55); color:#fff; font-size:1.6rem;
  opacity:0; transition:opacity .3s ease;
}
.hp-galeria a:hover::after{ opacity:1; }

/* ==========================================================================
   MAPA
   ========================================================================== */
.hp-mapa-caja{
  border-radius:var(--hp-radio); overflow:hidden;
  border:1px solid var(--hp-gris-borde);
  box-shadow:var(--hp-sombra-fuerte); background:#fff;
}
.hp-mapa-caja iframe{ display:block; width:100%; height:100%; min-height:440px; border:0; }

.hp-como-llegar{ list-style:none; padding:0; margin:0; }
.hp-como-llegar li{
  display:flex; gap:.95rem; align-items:flex-start;
  padding:.9rem 0; border-bottom:1px dashed var(--hp-gris-borde);
}
.hp-como-llegar li:last-child{ border-bottom:none; }
.hp-como-llegar i{
  flex:0 0 40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:var(--hp-azul-claro); color:var(--hp-azul); font-size:1rem;
}
.hp-como-llegar strong{ display:block; font-size:.95rem; }
.hp-como-llegar span{ font-size:.87rem; color:var(--hp-gris-medio); }

/* ---------- QR destacado ---------- */
.hp-qr-banda{
  color:#fff; border-radius:var(--hp-radio); padding:2.4rem 2rem;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.09) 1px, transparent 1.15px),
    linear-gradient(120deg, var(--hp-azul) 0%, var(--hp-azul-prof) 100%);
  background-size:7px 7px, auto;
  box-shadow:var(--hp-sombra-fuerte);
}
.hp-qr-banda h3{ letter-spacing:-.02em; }
.hp-kicker-claro{ background:rgba(255,255,255,.16); color:#fff; }

/* Selector Google Maps / Waze */
.hp-qr-apps{
  display:inline-flex; gap:4px; margin-bottom:1rem; padding:4px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  border-radius:calc(var(--hp-radio-btn) + 4px);
}
.hp-qr-app{
  border:0; background:transparent; color:rgba(255,255,255,.8);
  font-weight:700; font-size:.85rem; padding:.5rem .95rem;
  border-radius:var(--hp-radio-btn); cursor:pointer;
  display:inline-flex; align-items:center; gap:.45rem;
  transition:background .2s ease, color .2s ease;
}
.hp-qr-app:hover{ color:#fff; background:rgba(255,255,255,.1); }
.hp-qr-app.activa{ background:#fff; color:var(--hp-azul); box-shadow:0 4px 12px rgba(0,0,0,.18); }
.hp-qr-app:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

.hp-qr-marco{
  display:inline-block; background:#fff; border-radius:20px; padding:1.1rem 1.1rem 1rem;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  -webkit-tap-highlight-color:transparent;
  transition:transform .2s ease, box-shadow .2s ease;
}
.hp-qr-marco:hover{ transform:translateY(-5px) scale(1.02); box-shadow:0 24px 50px rgba(0,0,0,.34); }
.hp-qr-marco:active{ transform:scale(.97); box-shadow:0 10px 24px rgba(0,0,0,.3); }
.hp-qr-marco:focus-visible{ outline:3px solid #fff; outline-offset:4px; }
.hp-qr-marco img{
  display:block; width:230px; height:230px; max-width:100%;
  transition:opacity .18s ease;
}
.hp-qr-marco img.hp-qr-cambiando{ opacity:0; }
.hp-qr-pie{
  display:block; margin-top:.7rem; text-align:center;
  font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--hp-azul);
}
.hp-qr-boton{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  margin-top:.75rem; padding:.7rem 1rem; border-radius:var(--hp-radio-btn);
  background:var(--hp-azul); color:#fff; font-weight:700; font-size:.88rem;
  box-shadow:0 6px 16px rgba(1,77,249,.32);
  transition:background .2s ease;
}
.hp-qr-marco:hover .hp-qr-boton{ background:var(--hp-azul-osc); }

.hp-qr-paso{
  display:flex; align-items:center; gap:.7rem;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  border-radius:14px; padding:.75rem .9rem; font-size:.87rem; height:100%;
}
.hp-qr-paso span{
  flex:0 0 28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:#fff; color:var(--hp-azul); font-weight:800; font-size:.85rem;
}

@media (max-width:575.98px){
  .hp-qr-banda{ padding:1.8rem 1.25rem; }
  .hp-qr-marco img{ width:200px; height:200px; }
  .hp-qr-app{ font-size:.8rem; padding:.5rem .8rem; }
}

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.hp-form-caja{
  background:#fff; border:1px solid var(--hp-gris-borde);
  border-radius:var(--hp-radio); padding:2rem; box-shadow:var(--hp-sombra);
}
.hp-form-caja .form-label{ font-weight:600; font-size:.88rem; margin-bottom:.35rem; }
.hp-form-caja .form-control,
.hp-form-caja .form-select{
  border:1px solid var(--hp-gris-borde); border-radius:12px; padding:.7rem .9rem; font-size:.95rem;
}
.hp-form-caja .form-control:focus,
.hp-form-caja .form-select:focus{
  border-color:var(--hp-azul); box-shadow:0 0 0 .2rem rgba(1,77,249,.14);
}
.hp-contacto-item{ display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.35rem; }
.hp-contacto-item i{
  flex:0 0 46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:var(--hp-azul); color:#fff; font-size:1.05rem;
}
.hp-contacto-item strong{ display:block; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--hp-gris-medio); }
.hp-contacto-item a,.hp-contacto-item p{ color:var(--hp-gris); font-weight:600; margin:0; }
.hp-contacto-item a:hover{ color:var(--hp-azul); }

.hp-honeypot{ position:absolute!important; left:-9999px!important; opacity:0; height:0; width:0; }

/* ==========================================================================
   PIE
   ========================================================================== */
.hp-pie{ background:#0B1020; color:rgba(255,255,255,.72); }
.hp-pie img{ height:52px; margin-bottom:1rem; }
.hp-pie h5{ color:#fff; font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1rem; }
.hp-pie a{ color:rgba(255,255,255,.72); font-size:.92rem; }
.hp-pie a:hover{ color:#fff; }
.hp-pie ul{ list-style:none; padding:0; margin:0; }
.hp-pie ul li{ margin-bottom:.5rem; font-size:.92rem; }

/* Datos de contacto: el ícono va aparte para que el texto de varias
   líneas quede alineado en una sola columna y no debajo del ícono. */
.hp-pie-datos li{ display:flex; align-items:flex-start; gap:.55rem; }
.hp-pie-datos li > i{ flex:0 0 16px; text-align:center; margin-top:.28rem; font-size:.85rem; }
.hp-pie-datos li > span{ flex:1 1 auto; min-width:0; }
.hp-pie-abajo{
  border-top:1px solid rgba(255,255,255,.1); font-size:.83rem;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem 1.5rem; flex-wrap:wrap;
}
.hp-pie-copy{ padding-top:.15rem; }
/* deja libre la esquina donde viven los botones flotantes */
@media (min-width:576px){ .hp-pie-abajo{ padding-right:86px; } }
.hp-red{
  width:40px; height:40px; border-radius:12px; display:inline-grid; place-items:center;
  background:rgba(255,255,255,.08); color:#fff; margin-right:.45rem; transition:all .2s ease;
}
.hp-red:hover{ background:var(--hp-azul); color:#fff; transform:translateY(-3px); }

/* ==========================================================================
   BOTONES FLOTANTES (WhatsApp + volver arriba)
   ========================================================================== */
/* column-reverse: el botón de subir queda ARRIBA y el de WhatsApp abajo,
   sin alterar el orden del HTML (el globo se ancla al de WhatsApp). */
.hp-flotantes{
  position:fixed; right:22px; bottom:22px; z-index:1080;
  display:flex; flex-direction:column-reverse; align-items:center; gap:14px;
}

.hp-wa{
  position:relative;
  width:62px; height:62px; border-radius:50%;
  background:var(--hp-verde-wa); color:#fff; border:none; padding:0;
  display:grid; place-items:center; font-size:1.85rem;
  box-shadow:0 8px 26px rgba(37,211,102,.45);
  transition:transform .2s ease;
}
.hp-wa:hover,.hp-wa:focus{ color:#fff; transform:scale(1.08); outline:none; }
/* Los anillos del pulso crecen hasta 2.1x. Sin pointer-events:none se
   quedaban con los clics destinados al botón de subir, que está al lado. */
.hp-wa::before,
.hp-wa::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:var(--hp-verde-wa); z-index:-1; pointer-events:none;
  animation:hp-pulso 2.4s cubic-bezier(.19,1,.22,1) infinite;
}
.hp-wa::after{ animation-delay:1.2s; }
@keyframes hp-pulso{
  0%{ transform:scale(1); opacity:.65; }
  100%{ transform:scale(2.1); opacity:0; }
}
.hp-wa.hp-abierto i{ transform:rotate(90deg); transition:transform .25s ease; }

/* Globo de aviso: centrado con el botón de WhatsApp (que queda abajo del todo),
   no con la columna entera */
.hp-wa-globo{
  position:absolute; right:calc(100% + 12px); bottom:0; height:62px;
  display:flex; align-items:center;
  background:#fff; color:var(--hp-gris); font-size:.85rem; font-weight:600;
  padding:0 .9rem; border-radius:var(--hp-radio-btn); box-shadow:0 8px 24px rgba(0,0,0,.14);
  white-space:nowrap;
}
.hp-wa-globo::after{
  content:""; position:absolute; right:-6px; top:50%; transform:translateY(-50%);
  border-left:7px solid #fff; border-top:7px solid transparent; border-bottom:7px solid transparent;
}

/* Panel con varios números */
.hp-wa-panel{
  position:absolute; right:0; bottom:130px; width:290px;
  background:#fff; border-radius:18px; overflow:hidden;
  box-shadow:0 20px 50px rgba(0,25,92,.22);
  transform-origin:bottom right;
  animation:hp-panel-in .22s ease;
}
.hp-wa-panel[hidden]{ display:none; }
@keyframes hp-panel-in{ from{ opacity:0; transform:scale(.9) translateY(10px);} to{ opacity:1; transform:none; } }

.hp-wa-panel-cab{ background:var(--hp-verde-wa); color:#fff; padding:.9rem 1.1rem; }
.hp-wa-panel-cab strong{ display:block; font-size:.95rem; }
.hp-wa-panel-cab span{ font-size:.76rem; opacity:.9; }

.hp-wa-panel a{
  display:flex; align-items:center; gap:.85rem;
  padding:.85rem 1.1rem; border-bottom:1px solid var(--hp-gris-borde);
  color:var(--hp-gris); transition:background .18s ease;
}
.hp-wa-panel a:last-child{ border-bottom:none; }
.hp-wa-panel a:hover{ background:var(--hp-azul-claro); }
.hp-wa-panel a > i:first-child{
  flex:0 0 38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--hp-azul-claro); color:var(--hp-azul); font-size:.95rem;
}
.hp-wa-panel a div{ flex:1 1 auto; min-width:0; }
.hp-wa-panel a strong{ display:block; font-size:.9rem; }
.hp-wa-panel a span{ font-size:.8rem; color:var(--hp-gris-medio); }
.hp-wa-panel-ico{ color:var(--hp-verde-wa); font-size:1.25rem; }

/* Volver arriba */
.hp-arriba{
  width:46px; height:46px; border-radius:50%;
  background:var(--hp-azul); color:#fff; border:none;
  display:grid; place-items:center; font-size:1rem;
  box-shadow:0 8px 22px rgba(1,77,249,.35);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, background .2s ease;
}
.hp-arriba.hp-visible-btn{ opacity:1; visibility:visible; transform:none; }
.hp-arriba:hover,.hp-arriba:focus{ background:var(--hp-azul-osc); color:#fff; outline:none; }

@media (max-width:575.98px){
  .hp-flotantes{ right:16px; bottom:16px; gap:12px; }
  .hp-wa{ width:56px; height:56px; font-size:1.6rem; }
  .hp-wa-globo{ height:56px; }
  .hp-arriba{ width:42px; height:42px; }
  .hp-wa-globo{ display:none!important; }
  .hp-wa-panel{ width:min(290px,calc(100vw - 40px)); bottom:118px; }
}
@media (prefers-reduced-motion:reduce){
  .hp-wa::before,.hp-wa::after{ animation:none; }
  .hp-scroll-abajo{ animation:none; }
  .hp-wa-panel{ animation:none; }
}

/* ---------- Sellos del pie ---------- */
.hp-pie-sellos{ display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap; }
.hp-pie-sellos img{ opacity:.9; height:auto; margin:0; transition:opacity .2s ease; }
.hp-pie-sellos a:first-child img{ width:59px; }
.hp-pie-sellos a:last-child img{ width:120px; }
.hp-pie-sellos a:hover img{ opacity:1; }

/* ==========================================================================
   ANIMACIÓN DE APARICIÓN
   ========================================================================== */
.hp-aparece{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.hp-aparece.hp-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .hp-aparece{ opacity:1; transform:none; transition:none; }
}