/* ===== Portada: fuente única de geometría del hero =====
   Compartido por:
   - Login/login.blade.php  (portada real, vía <x-portada.hero interactive />)
   - Portada/portada.blade.php (preview administrativo, vía <x-portada.hero />)
   a través del componente resources/views/components/Portada/hero.blade.php.

   No dupliques estas reglas en otras hojas de estilos. Cualquier ajuste de
   recorte/posición/tamaño de fondo, carrusel, saludo, Novaltito o pie de
   página debe hacerse aquí para que el preview y el login real cambien
   siempre juntos. */

.portada-hero {
    position: relative;
    min-width: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.portada-hero .carousel,
.portada-hero .carousel-inner,
.portada-hero .carousel-item {
    width: 100%;
    height: 100%;
}

/* Modificado — 13/08/2026 (revertido a decisión final del usuario tras
   probar ambas opciones en vivo): object-fit:contain generaba, con las
   imágenes actuales (más anchas que el hero, ~1.8:1 vs ~1.2:1), una banda
   blanca superior/inferior imposible de eliminar solo con CSS sin recortar
   nada. Se vuelve a object-fit:cover — llena el hero por completo, sin
   bandas — asumiendo el trade-off de que imágenes con contenido muy cerca
   del borde pueden recortarse levemente; ver las notas de "zona segura"
   del uploader (Portada/portada.blade.php) para mitigar eso al subir. */
.portada-hero .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.portada-hero-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* Saludo: superpuesto sobre el carrusel, centrado arriba */
.portada-saludo {
    position: absolute;
    top: clamp(16px, 3vh, 35px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    max-width: 22%;
}

.portada-saludo img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* Novaltito: superpuesto, por delante del carrusel, a la derecha del bloque.
   El alto se define en el WRAPPER (.portada-novaltito), no en la <img>: así
   el preview administrativo puede sobreescribirlo con un % (relativo al
   alto ya definido de .portada-hero) y que se resuelva correctamente. Si el
   % se pusiera en la <img> contra este wrapper (que no tiene alto propio,
   solo right/bottom), el porcentaje no tiene contra qué calcularse y el
   navegador lo ignora — eso fue lo que causó que Novaltito se viera gigante
   y recortado en el preview. */
.portada-novaltito {
    position: absolute;
    right: -2%;
    bottom: 0;
    height: 41vh;
    z-index: 6;
    /* Tamaño/posición configurables (guardados en 10_hec_portada_personaje_novatec:
       tamano/posicion_x/posicion_y). Actúan como una capa ADICIONAL sobre el
       tamaño responsive ya calculado arriba (41vh/30vh/23vh/18vh según
       breakpoint, o el % que usa el preview admin) — nunca lo reemplazan:
       translate()/scale() se aplican después de que el navegador ya resolvió
       ese tamaño. Las variables las fija JS (scripts_portada.js en el admin,
       el binding Alpine de hero.blade.php en el login); si no se definen,
       los valores por defecto (0px, 0px, escala 1) reproducen exactamente
       el comportamiento visual anterior a esta funcionalidad. */
    transform: translate(var(--novatec-preview-x, 0px), var(--novatec-preview-y, 0px)) scale(var(--novatec-preview-scale, 1));
    transform-origin: bottom right;
}

.portada-novaltito img {
    width: auto;
    height: 100%;
    max-width: 100%;
    display: block;
    object-fit: contain;
    object-position: bottom right;
    position: relative;
    top: 18px;
    right: 27px;
}

/* Footer: franja inferior, sobre el carrusel. Solo se usa en modo
   "imagen" (tipo_footer='imagen') — en modo "marquee" esta franja se
   oculta y se muestra .marquee-pie-pagina en su lugar (ver más abajo). */
.portada-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 4;
    height: clamp(56px, 7vh, 84px);
    display: flex;
    align-items: center;
    padding: 0 clamp(18px, 2.6vw, 32px);
    background: rgba(244, 255, 252, 0.95);
    box-sizing: border-box;
}

/* Marquee de productos: alternativa a la franja de imagen del footer
   (tipo_footer='marquee', 10_hec_portada_pie_pagina). A diferencia de
   .portada-footer (que vive DENTRO de .portada-hero y por eso queda
   acotada al ancho de esa columna), este elemento se renderiza como hijo
   DIRECTO del contenedor de ANCHO COMPLETO de cada página — en el login
   real, Login/login.blade.php lo agrega dentro de
   .container-portada-fondo (que ya es position:relative + overflow:hidden
   vía Bootstrap/CSS propios); en el preview admin,
   Portada/portada.blade.php lo agrega dentro de .admin-portada-layout. En
   ambos casos left:0/right:0 se resuelven contra ese contenedor completo
   (hero + panel de login), no solo contra la columna del hero — por eso
   la franja cubre también la zona bajo el formulario de login. z-index
   alto para quedar por encima del panel de login blanco, que es un
   hermano posicionado sin z-index propio. */
.marquee-pie-pagina {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 clamp(12px, 2vw, 20px);
    background: rgba(244, 255, 252, 0.95);
    overflow: hidden;
    box-sizing: border-box;
}

.marquee-etiqueta {
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: #0caa81;
    white-space: nowrap;
    padding-right: 8px;
    border-right: 1px solid rgba(12, 170, 129, .25);
}

.marquee-track-viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

/*Aqui se define el comportamiento del marquee en el pie de página, la velocidad */
.marquee-track {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    animation: marquee-scroll-pie-pagina 120s linear infinite;
    will-change: transform;
}

.marquee-track.marquee-track-static {
    animation: none;
}

/* El separador va como ::after de cada item (en vez de un <span> aparte):
   simplifica tanto el armado del track por JS (admin) como el x-for
   declarativo de Alpine (login) — un solo elemento por producto. */
.marquee-item {
    font-size: 0.68rem;
    line-height: 30px;
    color: #3c6b60;
    white-space: nowrap;
}

.marquee-item::after {
    content: '\2022';
    display: inline-block;
    margin: 0 10px;
    color: #0caa81;
    font-size: 0.55rem;
    vertical-align: middle;
}

.marquee-item-vacio {
    color: #9fb8b2;
    font-style: italic;
}

.marquee-item-vacio::after {
    content: '';
    margin: 0;
}

@keyframes marquee-scroll-pie-pagina {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Accesibilidad: respeta la preferencia del sistema operativo de reducir
   animaciones — detiene el movimiento y deja el primer bloque de
   productos visible de forma estática, en vez de forzar el desplazamiento. */
@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
    }
}

.portada-footer img {
    width: auto;
    max-width: min(100%, 580px);
    max-height: 72%;
    height: auto;
    object-fit: contain;
    display: block;
}

@media (max-width: 1400px) {
    .portada-saludo {
        max-width: 30%;
    }

    .portada-novaltito {
        max-width: 56%;
        height: 30vh;
    }
}

@media (max-width: 1100px) {
    .portada-novaltito {
        height: 23vh;
    }
}

@media (max-width: 900px) {
    .portada-novaltito {
        height: 18vh;
    }
}

/* Landscape móvil con poca altura: el hero ya está oculto en el login real
   a estos anchos (ver @media max-width:991px en theme/css/styles_portada.css),
   así que estas reglas solo afectan al modo "imagen" del footer cuando
   llegara a mostrarse en ese contexto — .portada-footer tenía un piso de
   56px que en ~360-420px de alto real competía de más con el formulario.
   .marquee-pie-pagina no se toca: ya es una franja fija de 30px, delgada
   por diseño. */
@media (orientation: landscape) and (max-height: 500px) {
    .portada-footer {
        height: clamp(36px, 6vh, 56px);
    }
}