/* =========================
   HERO.CSS
   Carrusel de la portada. Se carga DESPUÉS de index.css.
   Todos los tamaños usan "cqw" (1cqw = 1% del ancho de la portada), así la portada
   y la vista previa del admin se ven proporcionalmente iguales.
========================= */

.hero,
.prev-frame {
    container-type: inline-size;
}

/* La portada ya no trae imagen por defecto: todo viene de las imágenes que se suben en el admin */
.hero {
    background-image: none;
    background-color: #111;
}

/* Cuando hay imágenes cargadas, se esconde cualquier contenido fijo que quede dentro de la portada */
.hero--carrusel {
    background-image: none;
    background-color: #111;
    touch-action: pan-y;
}

.hero--carrusel .hero-content {
    display: none;
}

.hero-slides {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* ---------- Cada imagen ---------- */
/* Cada imagen trae sus propios valores (los pone hero.js o el admin):
   --texto-x-pc / --texto-x-movil : dónde empieza el texto (en cqw, desde el borde izquierdo)
   --enfoque : qué parte de la foto se ve en el celular */

.hero-slide {
    --tx: var(--texto-x-pc, 18cqw);
    --gx: calc(var(--tx) + 16cqw); /* dónde se centra la mancha oscura detrás del texto */

    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}

.es-movil .hero-slide {
    --tx: var(--texto-x-movil, 10cqw);
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
    z-index: 1;
}

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* En el celular, cada imagen se enfoca donde se eligió en el admin */
.es-movil .hero-slide img {
    object-position: var(--enfoque, 50% center);
}

/* Mancha oscura suave detrás del texto, para que siempre se lea
   (solo si la imagen lleva texto; sigue al texto donde lo pongan) */
.hero-slide.con-texto::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse 55cqw 95% at var(--gx) 50%,
        rgba(8, 8, 8, 0.72) 0%,
        rgba(8, 8, 8, 0.4) 55%,
        rgba(8, 8, 8, 0) 100%
    );
}

/* ---------- Texto encima de la imagen ---------- */

.hero-slide-text {
    position: absolute;
    top: 50%;
    left: var(--tx);
    transform: translateY(-50%);
    z-index: 2;
    max-width: 32cqw;
}

/* ---------- Alineación del texto: izquierda (por defecto), centro o derecha ---------- */
/* En izquierda y derecha, "--tx" es la distancia al borde. En centro no se usa. */

.hero-slide.alinea-izquierda .hero-slide-text {
    left: var(--tx);
    text-align: left;
}

.hero-slide.alinea-derecha {
    --gx: calc(100% - var(--tx) - 16cqw);
}

.hero-slide.alinea-derecha .hero-slide-text {
    left: auto;
    right: var(--tx);
    text-align: right;
}

.hero-slide.alinea-centro {
    --gx: 50%;
}

.hero-slide.alinea-centro .hero-slide-text {
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    text-align: center;
    max-width: 44cqw;
}

.hero-slide-titulo {
    margin: 0 0 1.76cqw;

    font-family: Georgia, serif;
    font-weight: 300;
    line-height: 1.05;
    color: #eee5d2;

    text-wrap: balance;
    overflow-wrap: anywhere;

    font-size: 4cqw;
}

/* El tamaño baja según el largo del título */
.hero-slide-titulo.pc-medio { font-size: 3.2cqw; }
.hero-slide-titulo.pc-largo { font-size: 2.6cqw; }

/* Hay un título para el computador y otro para el celular: se muestra el que corresponde */
.hero-slide-titulo.solo-movil { display: none; }
.es-movil .hero-slide-titulo.solo-pc { display: none; }
.es-movil .hero-slide-titulo.solo-movil { display: block; }
.hero-slide-titulo[hidden] { display: none !important; }

.hero-slide-boton {
    display: inline-block;
    padding: 0.9cqw 1.5cqw;

    background: #eee5d2;
    color: #5f563f;

    font-family: Montserrat, sans-serif;
    font-size: 0.73cqw;
    font-weight: 400;
    letter-spacing: 0.04cqw;

    text-decoration: none;
    border-radius: 2px;
}

/* ---------- Versión celular (la portada lo activa con la clase "es-movil") ---------- */

.es-movil .hero-slide-text { max-width: 52cqw; }
.es-movil .hero-slide.alinea-centro .hero-slide-text { max-width: 70cqw; }

.es-movil .hero-slide-titulo { margin-bottom: 3.9cqw; font-size: 7.8cqw; }
.es-movil .hero-slide-titulo.movil-medio { font-size: 6.4cqw; }
.es-movil .hero-slide-titulo.movil-largo { font-size: 5.4cqw; }

.es-movil .hero-slide-boton {
    padding: 2.5cqw 3.6cqw;
    font-size: 2.2cqw;
}

/* ---------- Puntos ---------- */

.hero-dots {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 3;

    display: flex;
    gap: 8px;
}

.hero-dot {
    width: 8px;
    height: 8px;
    padding: 0;

    background: transparent;
    border: 1px solid #c9ad76;
    border-radius: 50%;

    cursor: pointer;
    transition: background 0.2s ease;
}

.hero-dot.active {
    background: #c9ad76;
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: none; }
}