/* ============================================================
   Turismo Cáceres — portada con LayerSlider
   ------------------------------------------------------------
   Remate de los proyectos importados desde
   inc/data/layerslider-portada-caceres.json y
   inc/data/layerslider-bloques-caceres.json. Todo va acotado a
   .tc-hero-slider (la clase que declaran los proyectos), así que
   no afecta a ningún otro slider del sitio.

   Cada pieza del diseño es una capa suelta que se edita y se
   arrastra en el editor de LayerSlider. El tipo de letra, el
   cuerpo, el color, el interlineado y la posición viven EN EL
   PROYECTO, no aquí: así lo que se ve en el editor es lo que sale
   en la página.

   Este archivo se limita a lo que desde una capa no se puede
   declarar:

     · el velo sobre la fotografía,
     · el ajuste de línea (LayerSlider no tiene ese campo),
     · la línea dorada del antetítulo,
     · los estados al pasar el ratón,
     · dar forma a las flechas y a los puntos.
   ============================================================ */

/* --- Velo sobre la fotografía ------------------------------- */

/* El apilamiento real, medido en el navegador:

     .ls-inner
       .ls-layers
         .ls-background-videos      z-index 1
         .ls-slide-backgrounds      z-index 2      ← la fotografía
         .ls-wrapper.ls-z           z-index 102…   ← una por capa

   La fotografía y los textos están dentro del MISMO contenedor,
   así que el velo tiene que ir ahí también, con una cota entre
   ambos. Puesto en el contenedor del slider tapaba el texto;
   puesto en .ls-slide-backgrounds sólo se veía en las
   transiciones, porque hay otra copia de ese nodo dentro del
   envoltorio de transición.

   El degradado es el de .hero-overlay del diseño, tal cual. */

.tc-hero-slider .ls-layers::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background:
    linear-gradient(105deg,
      rgba(5, 3, 2, 0.86) 0%,
      rgba(5, 3, 2, 0.66) 26%,
      rgba(5, 3, 2, 0.36) 46%,
      rgba(5, 3, 2, 0.12) 64%,
      rgba(5, 3, 2, 0) 80%),
    linear-gradient(to top,
      rgba(5, 3, 2, 0.42) 0%,
      rgba(5, 3, 2, 0.1) 22%,
      rgba(5, 3, 2, 0) 42%);
}

/* --- Ajuste de línea --------------------------------------- */

/* Lo único de la tipografía que sigue aquí. LayerSlider declara
   `white-space: nowrap` para todas sus capas y no tiene campo de
   estilo para cambiarlo, así que el titular y la entradilla —que
   sí parten en varias líneas, con el ancho que trae la capa— hay
   que soltarlos desde la hoja.

   La regla de LayerSlider es `.ls-wrapper > .ls-layer`: dos clases,
   igual que `.tc-hero-slider .tc-hero-title`. Y su hoja se imprime
   DESPUÉS de la del tema —LayerSlider se carga en el pie—, así que
   a igualdad de peso ganaba ella. De ahí que el selector incluya
   el envoltorio: con tres clases ya no hay empate y no hace falta
   ningún !important.

   La familia y el interlineado, en cambio, ya no están aquí:
   viajan en el estilo en línea de la capa, que vence al
   `font-family: Arial` del plugin sin necesidad de forzar nada. */

.tc-hero-slider .ls-wrapper > .tc-hero-title,
.tc-hero-slider .ls-wrapper > .tc-hero-desc {
  white-space: normal;
}

/* --- Línea dorada del antetítulo --------------------------- */

/* Un pseudoelemento no se puede declarar en una capa. */

.tc-hero-slider .tc-hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 30px;
  height: 1px;
  margin-right: 14px;
  vertical-align: middle;
  background: var(--gold, #b8956a);
}

/* --- Botones ----------------------------------------------- */

/* Los colores los lleva el proyecto; aquí sólo el cambio al pasar
   el ratón, que tampoco cabe en una capa. Lleva !important porque
   el color de fondo de la capa va en línea. */

.tc-hero-slider .tc-hero-btn {
  text-decoration: none;
}

.tc-hero-slider .tc-hero-btn:hover {
  background-color: var(--gold-hi, #cda97d) !important;
}

.tc-hero-slider .tc-hero-btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.14) !important;
  border-color: #fff !important;
}

/* --- Pantallas pequeñas ------------------------------------- */

/* Las capas van con escala fija —proporción mínima y máxima a 1—,
   que es lo que mantiene el margen de 64 px a plomo con el logotipo
   en cualquier monitor. El precio es que en un móvil no se encoge
   nada: el titular sigue midiendo 52 px con una caja de 620 px de
   ancho, y como cada capa está anclada por su BASE, al crecer de
   alto crece hacia arriba y se mete en la de encima.

   Medido en un móvil de 375 px, antes de esto:

     antetítulo  base a 417 px del fondo, alto  20
     titular     base a 227,               alto 224  → su borde
                 superior quedaba a 451, o sea 34 px por encima de
                 la base del antetítulo: solapados
     entradilla  base a 151,               alto  81  → top a 232,
                 5 px por encima de la base del titular
     botón 2     left 339 px con 190 de ancho, fuera de la pantalla

   Y la franja negra de la izquierda era de mi propio CSS: la regla
   anterior ponía `left: 24px` a TODOS los `.ls-wrapper` de
   `.ls-layers` —13 en total—, incluido el que envuelve la
   FOTOGRAFÍA, que vive en `.ls-slide-backgrounds`. La foto se
   desplazaba 24 px y dejaba al descubierto el fondo del slider.

   De ahí que aquí cada regla vaya acotada a su capa por clase, con
   `:has()` sobre el envoltorio, y que no haya ninguna que hable de
   `.ls-wrapper` en general.

   Los !important son inevitables: LayerSlider escribe el ancho, el
   `left`, el `top` y el `margin` en el atributo style. */

@media (max-width: 768px) {

  /* La tipografía, más pequeña para que las cajas quepan. El cuerpo
     va en la capa (estilo en línea), así que hace falta forzarlo. */

  .tc-hero-slider .tc-hero-eyebrow {
    font-size: 12px !important;
    line-height: 17px !important;
    letter-spacing: 0.2em !important;
  }

  .tc-hero-slider .tc-hero-title {
    font-size: 30px !important;
    line-height: 34px !important;
  }

  .tc-hero-slider .tc-hero-desc {
    font-size: 14px !important;
    line-height: 21px !important;
  }

  .tc-hero-slider .tc-hero-btn {
    font-size: 10px !important;
    line-height: 14px !important;
    letter-spacing: 0.14em !important;
    padding: 13px 22px !important;
  }

  /* El ancho de las cajas de texto, al de la pantalla menos los
     márgenes. */

  .tc-hero-slider .ls-layers .ls-wrapper:has(> .tc-hero-eyebrow),
  .tc-hero-slider .ls-layers .ls-wrapper:has(> .tc-hero-title),
  .tc-hero-slider .ls-layers .ls-wrapper:has(> .tc-hero-desc) {
    width: calc(100vw - 48px) !important;
  }

  .tc-hero-slider .tc-hero-eyebrow,
  .tc-hero-slider .tc-hero-title,
  .tc-hero-slider .tc-hero-desc {
    width: calc(100vw - 48px) !important;
  }

  /* El antetítulo conserva el `white-space: nowrap` de LayerSlider, y a 320 px
     su caja de 302 px más los 24 de margen se salían de la pantalla. Se le
     deja partir en dos líneas. */
  .tc-hero-slider .ls-wrapper > .tc-hero-eyebrow {
    white-space: normal;
  }

  /* Margen de 24 px, sólo en las capas de contenido. Nunca en el
     envoltorio de la fotografía: ahí estaba la franja negra. */

  .tc-hero-slider .ls-layers .ls-wrapper:has(> .tc-hero-eyebrow),
  .tc-hero-slider .ls-layers .ls-wrapper:has(> .tc-hero-title),
  .tc-hero-slider .ls-layers .ls-wrapper:has(> .tc-hero-desc),
  .tc-hero-slider .ls-layers .ls-wrapper:has(> .tc-hero-btn) {
    left: 24px !important;
  }

  /* Los dos botones, uno debajo del otro: en 375 px no caben en
     línea, y el segundo se salía de la pantalla. Las cotas se
     recalculan de abajo arriba con los altos nuevos. */

  .tc-hero-slider .ls-layers .ls-wrapper:has(> .tc-hero-btn--ghost) {
    margin-top: -24px !important;
  }

  .tc-hero-slider .ls-layers .ls-wrapper:has(> .tc-hero-btn):not(:has(> .tc-hero-btn--ghost)) {
    margin-top: -78px !important;
  }

  .tc-hero-slider .ls-layers .ls-wrapper:has(> .tc-hero-desc) {
    margin-top: -146px !important;
  }

  .tc-hero-slider .ls-layers .ls-wrapper:has(> .tc-hero-title) {
    margin-top: -228px !important;
  }

  /* El antetítulo, con sitio para dos líneas (34 px) más el hueco. */
  .tc-hero-slider .ls-layers .ls-wrapper:has(> .tc-hero-eyebrow) {
    margin-top: -350px !important;
  }
}


/* --- Pantalla apaisada y baja ------------------------------- */

/* El slider toma el 100 % del alto de la ventana. En un móvil de
   lado eso son unos 375 px, y el bloque de contenido mide 384: se
   saldría por arriba. Aquí se aprieta todo un escalón más. */

@media (max-width: 900px) and (max-height: 520px) {

  /* Se esconde el ENVOLTORIO, no la capa: LayerSlider declara
     `.ls-wrapper > .ls-layer { display: block !important }`, así que
     un `display: none` sobre la capa no llega a aplicarse. */

  .tc-hero-slider .ls-layers .ls-wrapper:has(> .tc-hero-eyebrow),
  .tc-hero-slider .ls-layers .ls-wrapper:has(> .tc-hero-desc) {
    display: none !important;
  }

  .tc-hero-slider .tc-hero-title {
    font-size: 24px !important;
    line-height: 27px !important;
  }

  .tc-hero-slider .ls-layers .ls-wrapper:has(> .tc-hero-btn--ghost) {
    margin-top: -20px !important;
  }

  .tc-hero-slider .ls-layers .ls-wrapper:has(> .tc-hero-btn):not(:has(> .tc-hero-btn--ghost)) {
    margin-top: -68px !important;
  }

  .tc-hero-slider .ls-layers .ls-wrapper:has(> .tc-hero-title) {
    margin-top: -128px !important;
  }
}

/* --- Flechas de anterior y siguiente ------------------------ */

/* Se encienden en Ajustes del proyecto → Navegación → «Prev & Next
   Buttons», pero eso solo no basta: los proyectos usan la skin
   `noskin`, que es la skin «sin bordes ni botones» y las esconde
   ella misma:

     .ls-noskin .ls-nav-prev { display: none; visibility: hidden }

   Y hay un segundo competidor, el que de verdad las descolocaba.
   Cuando el slider se inserta con el elemento «Advanced Layerslider»
   de Enfold, éste lo envuelve en `.avia-layerslider` y entra su hoja
   (avia-shortcodes/slideshow_layerslider):

     #top .avia-layerslider .ls-nav-prev {
       top: 50%; margin: -30px 15px 0; left: 30px;
       width: 60px; height: 60px; opacity: .5;
     }
     #top .avia-layerslider .ls-nav-next { left: auto; right: 30px }

   Eso las centra verticalmente y las manda a los lados —una a la
   izquierda y otra a la derecha—, a media opacidad y con el glifo de
   la fuente de iconos de Enfold en el ::before, que es justo donde va
   nuestro chevrón.

   Esa regla pesa 1 ID + 2 clases, lo mismo que
   `#top .tc-hero-slider .ls-nav-prev`: un empate que resolvía el
   orden de carga, y lo resolvía a favor de Enfold. De ahí que el
   selector añada `.ls-container` —1 ID + 3 clases—, que gana siempre,
   con envoltorio de Enfold o sin él.

   Y de ahí también que haya que devolver a su sitio `top`, `left`,
   `margin` y `opacity`: no basta con declarar `right` y `bottom`, que
   con un `left` y un `top` puestos quedan ignorados por
   sobreespecificación de la caja.

   Van abajo a la derecha, a los mismos 64 px del texto y del
   logotipo, con el trazo del botón fantasma del diseño.

   El `display` NO va forzado a propósito: si activas «mostrarlas solo
   al pasar el ratón», LayerSlider escribe `display: none` en línea y
   lo apaga por su cuenta. Con !important le romperíamos esa opción. */

#top .tc-hero-slider.ls-container .ls-nav-prev,
#top .tc-hero-slider.ls-container .ls-nav-next {
  display: block;
  visibility: visible;
  opacity: 1;
  position: absolute;
  z-index: 60;

  /* Lo que hay que deshacer de la hoja de Enfold. */
  top: auto;
  left: auto;
  margin: 0;

  bottom: 64px;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  background: rgba(20, 14, 10, 0.3);
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
}

#top .tc-hero-slider.ls-container .ls-nav-prev { right: 130px; }
#top .tc-hero-slider.ls-container .ls-nav-next { right: 64px; }

#top .tc-hero-slider.ls-container .ls-nav-prev:hover,
#top .tc-hero-slider.ls-container .ls-nav-next:hover {
  background: var(--gold, #b8956a);
  border-color: var(--gold, #b8956a);
}

/* El chevrón, con dos lados de un cuadrado girado. Hay que anular la
   fuente de iconos y el `content` con el glifo que Enfold pone en
   este mismo pseudoelemento, o se pintan los dos. */
#top .tc-hero-slider.ls-container .ls-nav-prev::before,
#top .tc-hero-slider.ls-container .ls-nav-next::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  font-family: inherit;
  line-height: 0;
  background: none;
  border: 0;
  border-top: 1.5px solid #fff;
  border-right: 1.5px solid #fff;
  border-radius: 0;
  transition: border-color 0.3s;
}

#top .tc-hero-slider.ls-container .ls-nav-prev::before {
  transform: translate(-50%, -50%) rotate(-135deg);
  margin-left: 2px;
}

#top .tc-hero-slider.ls-container .ls-nav-next::before {
  transform: translate(-50%, -50%) rotate(45deg);
  margin-left: -2px;
}

#top .tc-hero-slider.ls-container .ls-nav-prev:hover::before,
#top .tc-hero-slider.ls-container .ls-nav-next:hover::before {
  border-color: var(--dark, #2e0b0c);
}

/* --- Cuándo se ven las flechas ------------------------------ */

/* En escritorio, en la esquina inferior derecha: las reglas de
   arriba.

   Donde se navega con el dedo, fuera: LayerSlider trae navegación
   por gesto y sobra el mando. La condición no es el ancho de la
   ventana, es que haya dedo:

     @media (hover: none) and (pointer: coarse)

   Y es a propósito. El gesto de LayerSlider se engancha así (de su
   motor):

     touch: function() {
       "ontouchstart" in window && r.o.touchNav && ( … )
     }

   O sea, sólo en dispositivos con eventos táctiles, y NO con
   arrastre de ratón. Escondiéndolas por ancho, una ventana de
   escritorio estrecha se quedaría sin flechas y sin gesto: sin forma
   de pasar de diapositiva. */

@media (hover: none) and (pointer: coarse) {
  #top .tc-hero-slider.ls-container .ls-nav-prev,
  #top .tc-hero-slider.ls-container .ls-nav-next {
    display: none;
  }
}

/* Ventana estrecha pero con ratón: siguen estando, más pequeñas y
   más pegadas al borde. */

@media (max-width: 768px) and (pointer: fine) {
  #top .tc-hero-slider.ls-container .ls-nav-prev,
  #top .tc-hero-slider.ls-container .ls-nav-next {
    bottom: 24px;
    width: 44px;
    height: 44px;
  }

  #top .tc-hero-slider.ls-container .ls-nav-prev { right: 78px; }
  #top .tc-hero-slider.ls-container .ls-nav-next { right: 24px; }
}

/* --- Puntos de diapositiva --------------------------------- */

/* Vienen apagados en la plantilla (Navegación → «Slide Navigation
   Buttons»). Si los enciendes, salen como en el diseño: rayitas de
   34 × 3 px, doradas la activa. */

.tc-hero-slider.ls-container .ls-bottom-nav-wrapper {
  visibility: visible;
  position: absolute;
  z-index: 60;
  left: 0;
  right: 0;
  bottom: 30px;
  height: 0;
  text-align: center;
}

.tc-hero-slider.ls-container .ls-bottom-slidebuttons {
  display: inline-block;
  text-align: center;
}

.tc-hero-slider.ls-container .ls-bottom-slidebuttons a {
  display: inline-block;
  width: 34px;
  height: 3px;
  margin: 0 5.5px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.35);
  transition: background 0.35s;
}

.tc-hero-slider.ls-container .ls-bottom-slidebuttons a:hover {
  background: rgba(255, 255, 255, 0.6);
}

.tc-hero-slider.ls-container .ls-bottom-slidebuttons a.ls-nav-active {
  background: var(--gold, #b8956a);
}

/* --- Mandos que el diseño no lleva ------------------------- */

/* Reproducir, pausar y los temporizadores: la portada del diseño
   no los tiene. Se quedan ocultos por si se cambia de skin desde
   el editor. Para recuperarlos, borra la regla y enciéndelos en
   Ajustes del proyecto → Navegación. */

.tc-hero-slider .ls-nav-sides,
.tc-hero-slider .ls-nav-start,
.tc-hero-slider .ls-nav-stop,
.tc-hero-slider .ls-bar-timer,
.tc-hero-slider .ls-circle-timer {
  display: none !important;
}