/* ============================================================
   Hero v5 · "Valle vivo" — carrusel Ken-Burns + buscador rico
   Rama: feat/hero-rediseno
   Override total de las reglas .hero antiguas de style.css
   ============================================================ */

/* Anti-scroll horizontal: clip a nivel raíz.
   `clip` (no `hidden`) evita crear un scroll context nuevo, así no rompe
   el sticky del panel de contacto del detalle. Neutraliza el bleed
   causado por 100vw incluyendo el scrollbar vertical en Windows. */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

.hero-v5 { --nav-h: 68px; --ring: 0 0 0 3px rgba(157,189,255,.55); --ring-dark: 0 0 0 3px rgba(100,146,247,.35); }
.hero-v5 :focus { outline: none; }
.hero-v5 :focus-visible { outline: none; box-shadow: var(--ring); }

/* Sección principal — sobrescribe el .hero antiguo */
.hero.hero-v5 {
  position: relative;
  height: calc(100vh - var(--nav-h));
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy-950);
  color: #fff;
  padding: 32px 40px;
  isolation: isolate;
  justify-content: flex-start;
}

/* Carrusel Ken-Burns — composite-only */
.hero-v5 .hero__slides { position: absolute; inset: 0; z-index: 0; }
.hero-v5 .hero__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1);
  animation: v5-kb 24s ease-in-out infinite;
  will-change: opacity, transform;
}
.hero-v5 .hero__slide:nth-child(1) { background-image: url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1800&q=80"); animation-delay: 0s; }
.hero-v5 .hero__slide:nth-child(2) { background-image: url("https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=1800&q=80"); animation-delay: 8s; }
.hero-v5 .hero__slide:nth-child(3) { background-image: url("https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=1800&q=80"); animation-delay: 16s; }
@keyframes v5-kb {
  0% { opacity: 0; transform: scale(1.02); }
  4% { opacity: 1; }
  33% { opacity: 1; transform: scale(1.1); }
  38% { opacity: 0; }
  100% { opacity: 0; }
}

.hero-v5 .hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,9,62,.86) 0%, rgba(0,9,62,.5) 45%, rgba(0,9,62,.82) 100%),
    linear-gradient(90deg, rgba(0,13,79,.65) 0%, transparent 55%);
}
.hero-v5 .hero__grain {
  position: absolute; inset: 0; z-index: 2; opacity: .06; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 3px 3px; mix-blend-mode: overlay;
}

.hero-v5 .hero__inner {
  position: relative; z-index: 3;
  max-width: 1200px; width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; gap: 22px;
}

/* Eyebrow con live counter */
.hero-v5 .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-main); font-weight: 600;
  font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--blue-300);
  padding: 8px 14px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14); border-radius: 100px;
  width: fit-content; backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-v5 .eyebrow b { color: #fff; font-weight: 700; }
.hero-v5 .live-dot {
  position: relative; width: 7px; height: 7px;
  border-radius: 50%; background: var(--green); flex-shrink: 0;
}
.hero-v5 .live-dot::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--green); transform: scale(1); opacity: .55;
  animation: v5-dotpulse 1.8s ease-out infinite;
}
@keyframes v5-dotpulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(3.5); opacity: 0; } }

/* Título monumental */
.hero.hero-v5 .hero-title {
  font-family: var(--font-main); font-weight: 800;
  font-size: clamp(38px, 5.6vw, 74px);
  line-height: .98; letter-spacing: -.04em;
  margin: 0; color: #fff; max-width: 940px;
  text-shadow: 0 2px 24px rgba(0,9,62,.3);
}
.hero.hero-v5 .hero-title em {
  font-style: italic; font-weight: 300;
  color: var(--blue-300); letter-spacing: -.045em;
}

/* Signature narrativo rotativo */
.hero-v5 .hero-narr { position: relative; height: 26px; overflow: hidden; max-width: 640px; }
.hero-v5 .hero-narr__track { position: absolute; inset: 0; font-family: var(--font-body); font-size: 16px; line-height: 26px; color: rgba(255,255,255,.86); font-weight: 500; letter-spacing: .005em; }
.hero-v5 .hero-narr__line { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.hero-v5 .hero-narr__line.on { opacity: 1; transform: translateY(0); }
.hero-v5 .hero-narr__line b { color: var(--blue-300); font-weight: 600; }

/* Chip inferior derecho — propiedad del slide actual */
.hero-v5 .slide-chip {
  position: absolute; bottom: 24px; right: 32px; z-index: 4;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: rgba(0,9,62,.6);
  border: 1px solid rgba(157,189,255,.22); border-radius: 12px;
  color: #fff; font-family: var(--font-body); font-weight: 500; font-size: 12.5px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease;
}
.hero-v5 .slide-chip:hover, .hero-v5 .slide-chip:focus-visible { transform: translateY(-2px); border-color: var(--blue-300); }
.hero-v5 .slide-chip strong { font-family: var(--font-main); font-weight: 700; }
.hero-v5 .slide-chip .sep { color: rgba(157,189,255,.5); }
.hero-v5 .slide-chip .arrow { color: var(--blue-300); font-weight: 700; }

/* Indicador de slides */
.hero-v5 .hero__ind {
  position: absolute; top: 22px; right: 32px; z-index: 4;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-body); font-weight: 500; font-size: 10.5px;
  color: rgba(255,255,255,.7); letter-spacing: .12em; text-transform: uppercase;
}
.hero-v5 .hero__ind-dots { display: flex; gap: 6px; }
.hero-v5 .hero__ind-dots span { width: 22px; height: 2px; background: rgba(255,255,255,.25); border-radius: 2px; transition: background .3s; }
.hero-v5 .hero__ind-dots span.on { background: var(--blue-300); }

/* BUSCADOR */
.hero-v5 .finder {
  background: rgba(255,255,255,.98); border-radius: 18px; padding: 14px;
  box-shadow: 0 40px 100px -30px rgba(0,13,79,.75), 0 0 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  max-width: 1150px;
}
.hero-v5 .finder__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.hero-v5 .finder__tabs { display: flex; gap: 4px; padding: 4px; background: #f1f2f5; border-radius: 11px; width: fit-content; }
.hero-v5 .finder__tab {
  padding: 10px 24px; border-radius: 9px;
  font-family: var(--font-main); font-weight: 600; font-size: 13px;
  color: var(--gray); background: transparent; border: 0; cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
  letter-spacing: .01em;
}
.hero-v5 .finder__tab:hover:not([aria-selected="true"]) { color: var(--ink); background: rgba(11,45,139,.05); }
.hero-v5 .finder__tab[aria-selected="true"] { background: var(--navy-700); color: #fff; box-shadow: 0 4px 12px -4px rgba(11,45,139,.4); }
.hero-v5 .finder__tab:focus-visible { box-shadow: var(--ring-dark); }

.hero-v5 .finder__head-right { display: inline-flex; align-items: center; gap: 14px; }
.hero-v5 .finder__adv {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 100px;
  background: transparent; border: 1px solid var(--border);
  color: var(--navy-700); font-family: var(--font-main); font-weight: 600; font-size: 12.5px;
  cursor: pointer; white-space: nowrap;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.hero-v5 .finder__adv:hover { background: var(--brand-soft); border-color: var(--navy-700); }
.hero-v5 .finder__adv:focus-visible { box-shadow: var(--ring-dark); }

.hero-v5 .finder__map-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--gray); font-family: var(--font-body); font-weight: 600; font-size: 12.5px;
  text-decoration: none; cursor: pointer; padding: 4px 6px; border-radius: 6px;
}
.hero-v5 .finder__map-link:hover { color: var(--navy-700); }
.hero-v5 .finder__map-link:focus-visible { box-shadow: var(--ring-dark); }

.hero-v5 .finder__nlp {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: #f6f7f9;
  border: 1px solid transparent; border-radius: 13px;
  color: var(--ink); font-family: var(--font-body); font-size: 15px;
  margin-bottom: 10px;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.hero-v5 .finder__nlp:focus-within { background: #fff; border-color: var(--brand-accent); box-shadow: 0 0 0 4px rgba(100,146,247,.15); }
.hero-v5 .finder__nlp svg { color: var(--navy-700); flex-shrink: 0; }
.hero-v5 .finder__nlp input { flex: 1; border: 0; outline: 0; background: transparent; font: 400 15px/1 var(--font-body); color: var(--ink); min-width: 0; }
.hero-v5 .finder__nlp input::placeholder { color: #9ca3af; }

.hero-v5 .finder__grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1.1fr auto; gap: 8px; align-items: stretch; }
.hero-v5 .finder__cell {
  background: #f6f7f9; border-radius: 11px; padding: 10px 14px;
  cursor: pointer; border: 1px solid transparent; min-width: 0;
  text-align: left; font: inherit; color: inherit;
  transition: background .15s, border-color .15s;
}
.hero-v5 .finder__cell:hover { background: #eceef2; border-color: rgba(11,45,139,.14); }
.hero-v5 .finder__cell:focus-visible { box-shadow: var(--ring-dark); border-color: var(--navy-700); }
.hero-v5 .finder__cell-label { font-family: var(--font-main); font-weight: 700; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.hero-v5 .finder__cell-value { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-v5 .finder__cell-value svg { color: var(--navy-700); flex-shrink: 0; }

.hero-v5 .finder__btn-search {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 28px; border-radius: 11px;
  background: var(--navy-700); color: #fff;
  font-family: var(--font-main); font-weight: 600; font-size: 14px;
  border: 0; cursor: pointer; letter-spacing: .01em; min-width: 130px;
  transition: background .18s;
}
.hero-v5 .finder__btn-search:hover { background: var(--navy-800); }
.hero-v5 .finder__btn-search:focus-visible { box-shadow: var(--ring); }

/* Prompts bar */
.prompts-bar { background: var(--navy-900); padding: 14px 40px; display: flex; justify-content: center; }
.prompts-bar__wrap { max-width: 1200px; width: 100%; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.prompts-bar__label { color: rgba(255,255,255,.55); font-family: var(--font-body); font-weight: 500; font-size: 12.5px; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 8px; }
.prompts-bar__label svg { color: var(--blue-300); }
.prompt-btn {
  padding: 6px 13px; border-radius: 100px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  color: #e6efff; font-family: var(--font-body); font-weight: 500; font-size: 12.5px;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
}
.prompt-btn:hover { background: rgba(157,189,255,.14); color: #fff; border-color: rgba(157,189,255,.4); }
.prompt-btn:focus-visible { box-shadow: var(--ring); outline: none; }

/* Sedes tira */
.sedes-strip { background: var(--navy-900); padding: 18px 40px 26px; display: flex; justify-content: center; }
.sedes-strip__wrap { max-width: 1200px; width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.sede-tile { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(157,189,255,.14); border-radius: 13px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sede-tile__icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(157,189,255,.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--blue-300); }
.sede-tile__nom { font-family: var(--font-main); font-weight: 700; font-size: 14px; color: #fff; margin-bottom: 3px; letter-spacing: .005em; }
.sede-tile__dir { font-family: var(--font-body); font-weight: 500; font-size: 12.5px; color: rgba(255,255,255,.62); line-height: 1.4; }
.sede-tile__link { margin-left: auto; color: var(--blue-300); font-family: var(--font-body); font-weight: 600; font-size: 12.5px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 6px; }
.sede-tile__link:focus-visible { box-shadow: var(--ring); }

/* Responsive */
@media (max-width: 900px) {
  .hero.hero-v5 { padding: 24px 20px; height: auto; min-height: calc(100vh - var(--nav-h)); }
  .hero-v5 .hero__ind, .hero-v5 .slide-chip { display: none; }
  .hero.hero-v5 .hero-title { font-size: clamp(32px, 8vw, 48px); }
  .hero-v5 .finder__head { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-v5 .finder__head-right { justify-content: space-between; }
  .hero-v5 .finder__grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .hero-v5 .finder__btn-search { grid-column: 1 / -1; padding: 14px; min-width: 0; }
  .sedes-strip__wrap { grid-template-columns: 1fr; }
  .prompts-bar, .sedes-strip { padding-left: 20px; padding-right: 20px; }
}
@media (max-height: 720px) {
  .hero.hero-v5 { padding: 20px 40px; }
  .hero-v5 .hero__inner { gap: 16px; }
  .hero.hero-v5 .hero-title { font-size: clamp(32px, 4.4vw, 58px); }
  .hero-v5 .hero-narr { display: none; }
}

/* Motion performance */
@media (prefers-reduced-motion: reduce) {
  .hero-v5 .hero__slide { animation: none; opacity: 1; }
  .hero-v5 .hero__slide:nth-child(2), .hero-v5 .hero__slide:nth-child(3) { display: none; }
  .hero-v5 .live-dot::before { animation: none; opacity: 0; }
  .hero-v5 .hero-narr__line { transition: none; }
}
