:root{
  /* pon aquí la altura real de tu header (en esa vista ~72px por ejemplo) */
  --header-h: 72px;
}

/* Si el header es fijo/position:fixed encima del contenido */
.hero-landing{
  height: calc(100svh - var(--header-h));  
  min-height: calc(520px - var(--header-h) / 2);
  margin-top: var(--header-h);              /* empuja el hero debajo del header */
}

/* fallback si el navegador no soporta svh */
@supports not (height: 1svh){
  .hero-landing{
    height: calc(100vh - var(--header-h));
  }
}

.hero-landing{
  position: relative;
  width: 100%;
  height: 100vh;  
  min-height: 520px;                    
  overflow: hidden;
}

.hero-bg{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.hero-content{
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;        /* centrado vertical perfecto */
  padding-inline: clamp(16px, 4vw, 64px);
}

.hero-band{
  position: absolute;         /* CAMBIO: volvemos a absolute para pegar a esquina */
  left: 0;                    /* CAMBIO: pegado completamente a la izquierda */
  top: 50%;                   /* CAMBIO: centrado vertical manual */
  transform: translateY(-50%); /* CAMBIO: centrado vertical perfecto */
  max-width: min(820px, 95vw);
  padding: clamp(18px, 2.6vw, 30px) clamp(22px, 3.2vw, 40px);
  background: linear-gradient(to right, rgba(74,145,195,0.82), rgba(40,90,158,0.82));
  color: #fff;
  border-radius: 0 120px 120px 0;  /* MANTIENE: diseño semicírculo derecho */
  box-shadow: 0 12px 30px rgba(0,0,0,.28);
  backdrop-filter: saturate(120%) blur(.2px);
  -webkit-backdrop-filter: saturate(120%) blur(.2px);
  /* Sin text-align center - mantiene alineación izquierda */
}

.hero-band.curved::after{ display:none !important; }

.hero-title{
  color: white;
  font-weight:900;
  line-height: 1.05;
  font-size: clamp(26px, 5.2vw, 46px);
  letter-spacing: .5px;
  margin: 0 0 clamp(8px, 1.3vw, 14px);
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.horario-title{
  text-align:center;
  font-weight:900;
  letter-spacing:.5px;
  font-size: clamp(32px, 6vw, 64px);
  text-shadow: 0 8px 24px rgba(0,0,0,.35);
  margin: 0;
}

.hero-subtitle{
  color: #e7eefc;
  opacity: .95;
  font-weight: 600;
  line-height: 1.35;
  font-size: clamp(15px, 2.4vw, 22px);
  margin: 0;
}

@media (max-width: 900px){
  .hero-band{
    /* Mantiene posición absoluta pegada a esquina */
    left: clamp(0px, 2vw, 20px);  /* Pequeño margen opcional en tablet */
    max-width: 92vw;
    border-width: 2px;
    border-radius: 12px 80px 80px 12px;  /* MANTIENE: semicírculo más pequeño */
  }
}

@media (max-width: 620px){
  .hero-band{
    padding: 16px 18px;
    border-radius: 12px;      /* MANTIENE: tu diseño mobile original */
    /* En mobile mantiene el centrado original */
    position: relative;       /* Vuelve a relative en mobile */
    left: auto;              /* Anula el left */
    top: auto;               /* Anula el top */
    transform: none;         /* Anula el transform */
    margin: 0 auto;
    max-width: 90%;
    text-align: center;       /* Solo en mobile se centra el texto */
  }
  
  /* Solo en mobile centramos completamente como en tu código original */
  .hero-content{
    justify-content: center;
    align-items: center;    
    padding-top: 0;           
  }
}

/* === MEGA PLUS VISUAL EFFECTS === */

/* 1. Glow sutil detrás del panel azul - ajustado para diseño semicírculo */
.hero-band.curved::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: 10px; top: 12px; right: -20px; bottom: -18px;  /* MANTIENE: glow asimétrico */
  background: radial-gradient(
    ellipse at left center,   /* MANTIENE: dirección original del glow */
    rgba(90,170,255,0.18) 0%, 
    rgba(43,103,182,0.05) 68%, 
    transparent 100%
  );
  filter: blur(18px);
  pointer-events: none;
  border-radius: 0 130px 130px 0;  /* MANTIENE: forma semicírculo */
  opacity: 1;
  transition: opacity .25s;
}

/* 2. Animación fade-in suave para todo el hero */
.hero-landing {
  animation: heroFadeIn 1.15s cubic-bezier(.33,.85,.35,1) 0s both;
}
@keyframes heroFadeIn {
  0% { opacity:0; transform: translateY(24px);}
  100% { opacity:1; transform: none;}
}

/* 3. Sutiles partículas brillando en background */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 68%, rgba(255,255,255,0.13) 0, rgba(255,255,255,0) 38%),
    radial-gradient(circle at 80% 24%, rgba(255,255,255,0.09) 0, rgba(255,255,255,0) 40%),
    radial-gradient(circle at 60% 75%, rgba(255,255,255,0.07) 0, rgba(255,255,255,0) 33%);
  opacity: .55;
  animation: bgSparkle 10s linear infinite alternate;
}
@keyframes bgSparkle {
  0% { filter: blur(1px);}
  40% { filter: blur(2.5px);}
  100% { filter: blur(1px);}
}

/* 4. Botón de acción flotante */
.hero-band.curved .mega-btn {
  margin-top: clamp(16px, 2.2vw, 38px);
  display: inline-block;
  background: linear-gradient(90deg, #ffd95e, #ffb200 60%, #ffe7a9 100%);
  color: #2b67b6;
  font-weight: 700;
  font-size: 1.18em;
  padding: 0.65em 1.8em;
  border: none;
  border-radius: 38px;
  box-shadow: 0 6px 24px -4px rgba(43,103,182,0.14);
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
  position: relative;
  z-index: 1;
}
.hero-band.curved .mega-btn:hover,
.hero-band.curved .mega-btn:focus {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 10px 32px -6px rgba(43,103,182,0.18);
}