/* =========================================================
   LARRY TOURS — HERO DE INICIO  [larry_hero]
   (versión WordPress del hero-home-26 de la maqueta)
   Necesita Swiper 11 (assets/lib) — lo encola inc/larry-hero.php.
   Números para ajustar:
     --lh-top        espacio arriba para el menú de Elementor (por defecto 136px)
     .lh__title      font-size = tamaño del titular
     height (en .lh) alto en compu: min(100svh, 62vw, 960px)
     --lh-bottom     a qué altura van botones y controles (alineados)
     --lh-shade      qué tan oscura queda la foto
     --lh-fill       color con que se llenan las rayitas-reloj
   ========================================================= */

.lh {
  --lh-mint: #9FE3DC;
  --lh-ink: #0B1115;
  --lh-veil: 11, 17, 21;
  --lh-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lh-move: cubic-bezier(0.65, 0, 0.2, 1);
  --lh-gut: clamp(20px, 3.4vw, 48px);
  --lh-bottom: clamp(32px, 5.5vh, 56px);
  --lh-top: 136px;                               /* espacio para el menú de Elementor (encima del hero) */
  --lh-h: 52px;                                /* alto de botones y de la cápsula de flechas */
  --lh-shade: .14;                             /* oscuro parejo sobre toda la foto (0 = nada, .5 = muy oscuro) */
  --lh-fill: #FFFFFF;                          /* relleno de las rayitas-reloj */
  --lh-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3'%3E%3Crect width='1' height='1' fill='%23000' fill-opacity='.12'/%3E%3C/svg%3E");

  position: relative; isolation: isolate; overflow: hidden;
  /* pantalla completa, pero con tope: en pantallas altas no pasa de 960 px
     ni del 62 % del ancho (así la foto no se agranda de más y asoma lo de abajo) */
  height: min(100vh, 62vw, 960px);
  height: min(100svh, 62vw, 960px);
  min-height: 600px;
  background: var(--lh-ink);
  color: #fff;
}
.lh *, .lh *::before, .lh *::after { box-sizing: border-box; }
.lh__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- FOTOS ---------- */
.lh .lh__swiper { height: 100%; }
.lh .swiper-wrapper { transition-timing-function: var(--lh-move); }
.lh .lh__slide { position: relative; isolation: isolate; overflow: hidden; height: 100%; }

.lh__bg { position: absolute; inset: 0; z-index: -3; }
.lh__bg picture { display: block; width: 100%; height: 100%; }
.lh__img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos, 50% 50%);
  transform: scale(1.08);
  transition: transform 8s linear;
}
.lh .swiper-slide-active .lh__img { transform: scale(1); }

/* velo: un oscuro parejo de base (foto más oscura) + más sombra en diagonal
   arriba-izq (titular) y abajo-der (frase) */
.lh__slide::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(160deg, rgba(var(--lh-veil), .78) 0%, rgba(var(--lh-veil), .38) 30%, rgba(var(--lh-veil), 0) 54%),
    linear-gradient(340deg, rgba(var(--lh-veil), .78) 0%, rgba(var(--lh-veil), .34) 28%, rgba(var(--lh-veil), 0) 50%),
    rgba(var(--lh-veil), var(--lh-shade));
  pointer-events: none;
}
/* trama de puntos (agoema) */
.lh__slide::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--lh-dot) 0 0 / 3px 3px repeat;
  pointer-events: none;
}

/* ---------- CONTENIDO EN ESQUINAS ---------- */
.lh__in {
  height: 100%;
  max-width: calc(1224px + 2 * var(--lh-gut)); margin: 0 auto;
  padding: var(--lh-top) var(--lh-gut) var(--lh-bottom);
}
.lh__content {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "label ."
    "title ."
    ".     ."
    ".     side";
}
:where(.lh__content p, .lh__content h2) { margin: 0; }

/* arriba-izq: "— BUS TOURS · 5 TOURS" */
.lh__label {
  grid-area: label; justify-self: start;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--idx-font-title, "League Spartan", sans-serif); font-weight: 600;
  font-size: .84rem; line-height: 1; letter-spacing: .18em; text-transform: uppercase;
}
.lh__label::before { content: ""; width: 30px; height: 2px; border-radius: 1px; background: var(--lh-mint); }
.lh__sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.lh__label-n { color: var(--lh-mint); }

/* arriba-izq: el titular en mayúsculas */
.lh__title {
  grid-area: title; align-self: start;
  margin-top: clamp(16px, 2vw, 24px);
  max-width: 12ch;
  font-family: var(--idx-font-title, "League Spartan", sans-serif); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.8rem, 5.2vw, 5rem);         /* antes 6.8vw / máx 7rem: más chico en pantallas grandes */
  line-height: .88; letter-spacing: -.01em;
  text-wrap: balance;
  text-shadow: 0 2px 34px rgba(var(--lh-veil), .35);
}
.lh__title em { font-style: normal; color: var(--lh-mint); }

/* abajo-der: frase + botones, con línea fina arriba */
.lh__side {
  grid-area: side;
  position: relative;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .3);
}
.lh__side::before {                           /* tramo menta al inicio de la línea */
  content: ""; position: absolute; left: 0; top: -1px;
  width: 44px; height: 2px; background: var(--lh-mint);
}
.lh__text {
  font-family: var(--idx-font-body, "Hind", sans-serif); font-size: clamp(1.02rem, 1.2vw, 1.16rem); line-height: 1.55;
  color: rgba(255, 255, 255, .92);
  text-wrap: pretty;
}
.lh__btns { display: flex; gap: 10px; margin-top: 22px; }
.lh__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  height: var(--lh-h); padding: 0 24px;
  border-radius: var(--idx-radius-soft, 6px);
  font-family: var(--idx-font-title, "League Spartan", sans-serif); font-weight: 600;
  font-size: .84rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.lh__btn svg { width: 1.05em; height: 1.05em; flex: none; transition: transform .35s var(--lh-ease); }
.lh__btn--main { flex: 1; background: var(--idx-secondary, #007771); color: #fff; border: 1px solid var(--idx-secondary, #007771); }
.lh__btn--main:hover { background: var(--idx-secondary-hover, #00645F); border-color: var(--idx-secondary-hover, #00645F); }
.lh__btn--main:hover svg { transform: translateX(5px); }
.lh__btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .55); }
.lh__btn--ghost:hover { background: #fff; color: var(--lh-ink); border-color: #fff; }

/* ---------- ENTRADA DE CADA SLIDE ---------- */
.lh--js .lh__label,
.lh--js .lh__side { opacity: 0; translate: 0 20px; }
.lh--js .lh__title { clip-path: inset(0 0 100% 0); translate: 0 40px; }
.lh--js .swiper-slide-active .lh__label {
  opacity: 1; translate: 0 0;
  transition: opacity .7s ease .35s, translate .9s var(--lh-ease) .35s;
}
.lh--js .swiper-slide-active .lh__title {
  clip-path: inset(-12% -4% -16% -4%); translate: 0 0;   /* se destapa desde abajo */
  transition: clip-path 1.1s var(--lh-move) .45s, translate 1.1s var(--lh-ease) .45s;
}
.lh--js .swiper-slide-active .lh__side {
  opacity: 1; translate: 0 0;
  transition: opacity .7s ease .75s, translate .9s var(--lh-ease) .75s;
}

/* =========================================================
   CONTROLES (abajo-izq): cápsula · contador · rayitas
   ========================================================= */
.lh__ctrl {
  position: absolute; z-index: 5;
  left: max(var(--lh-gut), (100% - 1224px) / 2); bottom: var(--lh-bottom);
  height: var(--lh-h);
  display: flex; align-items: center;
}
.lh:not(.lh--js) .lh__ctrl { display: none; }

/* cápsula de flechas: dos mitades y una línea fina al medio */
.lh__arrows {
  display: flex; height: 100%;
  border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px;
  overflow: hidden;
}
.lh__arrow {
  display: grid; place-items: center;
  width: 58px; height: 100%; padding: 0;
  border: 0; background: transparent; color: #fff;
  font-size: .9rem; cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.lh__next { border-left: 1px solid rgba(255, 255, 255, .28); }
.lh__arrow svg { transition: transform .35s var(--lh-ease); }
.lh__arrow:hover { background: #fff; color: var(--lh-ink); }
.lh__prev:hover svg { transform: translateX(-3px); }
.lh__next:hover svg { transform: translateX(3px); }

/* contador: el número rueda dentro de su ventana */
.lh__count {
  display: flex; align-items: baseline; gap: 6px;
  margin: 0 22px; padding: 0 22px;
  border-left: 1px solid rgba(255, 255, 255, .22); border-right: 1px solid rgba(255, 255, 255, .22);
  font-family: var(--idx-font-title, "League Spartan", sans-serif); font-variant-numeric: tabular-nums;
}
.lh__count-win { display: block; height: 1.7rem; overflow: hidden; }
.lh__count-roll {
  display: flex; flex-direction: column;
  translate: 0 calc(var(--n, 0) * -1.7rem);
  transition: translate .9s var(--lh-move);
}
.lh__count-roll span { display: block; height: 1.7rem; font-weight: 800; font-size: 1.7rem; line-height: 1.7rem; }
.lh__count-total { font-weight: 500; font-size: .9rem; letter-spacing: .06em; color: rgba(255, 255, 255, .65); }

/* rayitas-reloj */
.lh__bars { display: flex; align-items: center; gap: 4px; }
.lh__bar {
  position: relative;
  width: 30px; height: 24px; padding: 0;
  border: 0; background: none; cursor: pointer;
  transition: width .5s var(--lh-ease);
}
.lh__bar::before,
.lh__bar-fill {
  content: ""; position: absolute; left: 3px; right: 3px; top: 50%;
  height: 2px; margin-top: -1px; border-radius: 1px;
}
.lh__bar::before { background: rgba(255, 255, 255, .35); transition: background-color .25s ease; }
.lh__bar:hover::before { background: rgba(255, 255, 255, .75); }
.lh__bar.is-on { width: 66px; }
.lh__bar.is-on::before { background: rgba(255, 255, 255, .22); }   /* pista oscura: el relleno blanco se nota */
.lh__bar-fill {
  background: var(--lh-fill);
  transform-origin: left; transform: scaleX(var(--p, 0));
}

.lh__btn:focus-visible,
.lh__arrow:focus-visible,
.lh__bar:focus-visible { outline: 2px solid var(--lh-mint); outline-offset: 3px; }
.lh__arrow:focus-visible { outline-offset: -4px; border-radius: 999px; }

/* ---------- TABLET ---------- */
@media (max-width: 999px) {
  .lh__content { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
  .lh__count { margin: 0 14px; padding: 0 14px; }
}

/* ---------- ALTO EN PANTALLAS VERTICALES (celular y tablet) ----------
   A pantalla completa la foto horizontal queda muy recortada y agrandada:
   en vertical el hero ocupa el 78 % del alto (mín. 600 px) y asoma lo de abajo. */
@media (orientation: portrait) and (max-width: 1024px) {
  .lh { height: 78vh; height: 78svh; min-height: 600px; }
}

/* ---------- CELULAR / TABLET VERTICAL (y todo lo de menos de 900 px):
   bloque centrado en vertical y controles en la base a lo ancho ---------- */
@media (max-width: 899px), (max-width: 1024px) and (orientation: portrait) {
  .lh { --lh-h: 48px; }
  .lh__img { object-position: var(--pos-m, var(--pos, 50% 50%)); }
  /* en vertical: algo de sombra al medio (titular) y fuerte abajo (frase + controles) */
  .lh__slide::before {
    background:
      linear-gradient(180deg,
        rgba(var(--lh-veil), .55) 0%,
        rgba(var(--lh-veil), .22) 18%,
        rgba(var(--lh-veil), .38) 40%,
        rgba(var(--lh-veil), .3) 58%,
        rgba(var(--lh-veil), .88) 100%),
      rgba(var(--lh-veil), var(--lh-shade));
  }
  .lh__in { padding: 112px var(--lh-gut) calc(var(--lh-bottom) + var(--lh-h) + 24px); }
  /* todo el contenido es UN bloque (etiqueta, titular, frase, botones) centrado en vertical,
     un poco más abajo del centro; entre titular y frase va un espacio fijo, sin huecos */
  .lh__content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1.25fr) auto auto auto minmax(0, 1fr);
    grid-template-areas: "." "label" "title" "side" ".";
  }
  /* en celular, sin línea ni rayita: la frase va directo bajo el titular */
  .lh__side { margin-top: 20px; padding-top: 0; border-top: 0; }
  .lh__side::before { display: none; }
  .lh__title { max-width: 14ch; padding-bottom: 6px; }
  .lh__side { max-width: 520px; }              /* en tablet vertical no se estira a todo el ancho */

  /* controles: cápsula · contador | rayitas a la derecha */
  .lh__ctrl { left: var(--lh-gut); right: var(--lh-gut); }
  .lh__count { margin: 0 0 0 14px; padding: 0 0 0 14px; border-right: 0; }
  .lh__bars { margin-left: auto; }
  .lh__bar { height: 32px; }                   /* más área para el dedo */

  .lh__btn, .lh__arrow, .lh__bar { -webkit-tap-highlight-color: transparent; }
}

@media (max-width: 599px) {
  .lh { --lh-gut: 18px; --lh-bottom: 18px; }
  .lh__in { padding-top: 92px; }
  .lh__label { font-size: .72rem; letter-spacing: .14em; gap: 10px; }
  .lh__label::before { width: 20px; }
  .lh__title { margin-top: 14px; font-size: clamp(2.4rem, 11.6vw, 3.4rem); line-height: .9; }
  .lh__text { font-size: .98rem; line-height: 1.5; }
  .lh__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }   /* en celular, máx. 4 líneas */
  .lh__btns { margin-top: 18px; gap: 8px; }
  .lh__btn { padding: 0 16px; font-size: .76rem; letter-spacing: .1em; }
  .lh__arrow { width: 50px; }
  .lh__bar { width: 22px; }
  .lh__bar.is-on { width: 46px; }
}

/* celulares angostos (≤ 380 px): botones lado a lado pero más compactos, y sin contador */
@media (max-width: 380px) {
  .lh { --lh-h: 44px; }
  .lh__btns { gap: 6px; }
  .lh__btn { padding: 0 12px; gap: .45rem; font-size: .7rem; letter-spacing: .06em; }
  .lh__count { display: none; }
  .lh__arrow { width: 46px; }
}

/* pantallas bajas (celular acostado o muy chato): el titular baja un poco de tamaño */
@media (max-width: 899px) and (max-height: 700px) {
  .lh__title { font-size: clamp(2.2rem, 10vw, 3rem); }
  .lh__in { padding-top: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .lh__img, .lh .swiper-slide-active .lh__img { transform: none; transition: none; }
  .lh--js .lh__label, .lh--js .lh__side, .lh--js .lh__title {
    opacity: 1; translate: none; clip-path: none; transition: none !important;
  }
  .lh__count-roll { transition: none; }
}

/* =========================================================
   ADORNO: coordenadas de Huaraz de pie
   ========================================================= */
.lh__deco {
  position: absolute; z-index: 4; inset: 0;
  pointer-events: none;
}
/* coordenadas reales de Huaraz, de pie en el borde derecho */
.lh__geo {
  position: absolute; right: calc(var(--lh-gut) * .55); top: 50%;
  writing-mode: vertical-rl; translate: 0 -50%;
  font-family: var(--idx-font-title, "League Spartan", sans-serif); font-weight: 500;
  font-size: .7rem; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  white-space: nowrap;
  animation: lh-in 1.2s ease 1.2s backwards;
}
.lh__geo::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 1px; height: 40px; margin-bottom: 14px;
  background: rgba(255, 255, 255, .4);
}
@keyframes lh-in { from { opacity: 0; } }

@media (max-width: 899px), (max-width: 1024px) and (orientation: portrait) {
  .lh__geo { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lh__geo { animation: none; }
}

/* ---------- dentro de Elementor ---------- */
.elementor-widget-shortcode:has(.lh) .elementor-shortcode { line-height: normal; }
.lh img { max-width: none; }                     /* Elementor/temas ponen max-width:100% a las img */