/* ========================================================================= */
/* FUENTES TIPOGRÁFICAS LOCALES (Carpeta fonts/)                            */
/* ========================================================================= */

@font-face {
    font-family: 'Bebas';
    src: url('fonts/Bebas.woff2') format('woff2'),
         url('fonts/Bebas.woff') format('woff'),
         url('fonts/Bebas.ttf') format('truetype'),
         url('fonts/BebasNeue-Regular.ttf') format('truetype'),
         url('fonts/BebasNeue.ttf') format('truetype'),
         url('fonts/Bebas.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SendFlowers';
    src: url('fonts/SendFlowers-Regular.woff2') format('woff2'),
         url('fonts/SendFlowers-Regular.woff') format('woff'),
         url('fonts/SendFlowers-Regular.ttf') format('truetype'),
         url('fonts/SendFlowers-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto.woff2') format('woff2'),
         url('fonts/Roboto.woff') format('woff'),
         url('fonts/Roboto-Regular.ttf') format('truetype'),
         url('fonts/Roboto.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ========================================================================= */
/* REGLAS GLOBALES Y TAMAÑOS DE FUENTE (12PT PARA EL CUERPO)                 */
/* ========================================================================= */

body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12pt;
    line-height: 1.6;
}

p, span, li, input, select, textarea {
    font-family: 'Roboto', sans-serif;
}

/* Color corporativo y tipografía para títulos */
h1, h2, h3, .font-bebas {
    font-family: 'Bebas', 'Bebas Neue', Impact, sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #004FA8;
}

/* Tamaño de fuente: texto del menú del header a 12pt */
header nav a,
.header-menu-link,
#mobile-menu a {
    font-size: 12pt !important;
}

/* Tamaño de fuente: títulos del footer a 12pt */
footer h3,
footer h4,
.footer-title {
    font-size: 12pt !important;
    color: #ffffff !important;
}

/* Acentos caligráficos SendFlowers */
.font-sendflowers {
    font-family: 'SendFlowers', cursive;
    text-transform: none !important;
    font-weight: normal;
    letter-spacing: 0;
    display: inline-block;
    line-height: 1;
}

.slogan-style {
    font-family: 'SendFlowers', cursive;
    font-weight: normal;
}

.glass-nav {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Transiciones de Tarjetas */
.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 25px -5px rgba(0, 79, 168, 0.15), 0 8px 10px -5px rgba(0, 79, 168, 0.06);
}

/* Fotos de Envases en Catálogo */
#products-catalog-grid img {
    filter: drop-shadow(0 8px 12px rgba(0, 79, 168, 0.12));
    transition: transform 0.4s ease, filter 0.4s ease;
}

#products-catalog-grid .group:hover img {
    transform: scale(1.06) translateY(-2px);
    filter: drop-shadow(0 14px 18px rgba(0, 79, 168, 0.20));
}

/* Píldoras de Categoría Activas */
.cat-pill.active {
    border-color: #004FA8 !important;
    background-color: #F8FAFC !important;
    transform: scale(1.04);
}

/* ========================================================================= */
/* MEGAMENÚ                                                                 */
/* ========================================================================= */

.megamenu-wrapper {
    position: relative;
}

.megamenu-dropdown {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 100%),
                url('images/duro acabados.jpg') center/cover no-repeat;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.megamenu-wrapper:hover .megamenu-dropdown,
.megamenu-dropdown:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0);
}

/* ========================================================================= */
/* HERO CAROUSEL: PARALLAX ZOOM EFFECT                                       */
/* ========================================================================= */

#inicio {
    perspective: 1000px;
    background-color: #030712;
}

.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.2s ease;
    z-index: 1;
    overflow: hidden;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}

.hero-slide .slide-bg-container {
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    transform: scale(1.18);
    transition: transform 9s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
    z-index: 1;
}

.hero-slide.active .slide-bg-container {
    transform: scale(1.02);
}

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

.slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0.05) 80%, transparent 100%);
    z-index: 10;
    pointer-events: none;
}

@media (max-width: 768px) {
    .slide-overlay {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.8) 55%, rgba(0, 0, 0, 0.95) 100%);
    }
}

.slide-content-wrap {
    position: relative;
    z-index: 20;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.hero-slide .slide-elem-badge {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}

.hero-slide .slide-elem-title {
    opacity: 0;
    transform: translateY(28px);
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.hero-slide .slide-elem-desc {
    opacity: 0;
    transform: translateY(24px);
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.55s;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.hero-slide .slide-elem-btn {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.7s;
}

.hero-slide.active .slide-elem-badge,
.hero-slide.active .slide-elem-title,
.hero-slide.active .slide-elem-desc,
.hero-slide.active .slide-elem-btn {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: all 0.25s ease;
}

.hero-arrow:hover {
    background: #004FA8;
    border-color: #1E98D7;
    transform: translateY(-50%) scale(1.08);
}

.hero-dot {
    width: 12px;
    height: 12px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.4);
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-dot.active {
    width: 34px;
    background: #1E98D7;
    border-color: #ffffff;
}

/* ========================================================================= */
/* TEXTOS DEL SLIDER: BLANCOS EXCEPTO FUENTE SENDFLOWERS                    */
/* ========================================================================= */

#inicio .hero-slide h1,
#inicio .hero-slide h2,
#inicio .hero-slide h3,
#inicio .hero-slide .slide-elem-title,
#inicio .hero-slide .slide-elem-desc,
#inicio .hero-slide .slide-elem-badge span {
    color: #ffffff !important;
}

#inicio .hero-slide .font-sendflowers {
    color: var(--accent-color, #1E98D7);
}

#inicio .hero-slide .font-sendflowers.text-brand-lime {
    color: #84CC16 !important;
}

#inicio .hero-slide .font-sendflowers.text-pink-400 {
    color: #f472b6 !important;
}

#inicio .hero-slide .font-sendflowers.text-cyan-300 {
    color: #67e8f9 !important;
}

/* ========================================================================= */
/* SLIDER DE PRODUCTOS EN MÓVIL Y BOTONES                                    */
/* ========================================================================= */

@media (max-width: 639px) {
    .mobile-product-slider {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 16px !important;
        padding: 8px 4px 16px 4px !important;
        scrollbar-width: none;
    }
    .mobile-product-slider::-webkit-scrollbar {
        display: none;
    }
    .mobile-product-slider > div {
        flex: 0 0 85% !important;
        scroll-snap-align: center !important;
    }
}

.slider-wrapper {
    position: relative;
    margin: 0 -20px;
    padding: 10px 20px 25px 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.slider-wrapper::-webkit-scrollbar {
    display: none;
}

.color-track {
    display: flex;
    gap: 16px;
}

.color-swatch-card {
    flex: 0 0 190px;
    height: 240px;
    border-radius: 2px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    user-select: none;
}

.color-swatch-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.color-swatch-card .code {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.2;
}

.color-swatch-card .name {
    font-size: 12pt;
    font-weight: 500;
    margin-top: 3px;
    line-height: 1.2;
}

.btn-visualize-color {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background-color: #004FA8;
    color: #ffffff;
    border: none;
    padding: 16px 32px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    box-shadow: 0 10px 25px -5px rgba(0, 79, 168, 0.3);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-visualize-color:hover {
    background-color: #052a4a;
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgba(0, 79, 168, 0.45);
    color: #ffffff;
}

/* Pulso WhatsApp Flotante */
@keyframes pulse-wa {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    50% {
        transform: scale(1.06);
        box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
    }
}

.wa-float {
    animation: pulse-wa 2.5s infinite;
}

/* Scrollbar General */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #F1F5F9;
}

::-webkit-scrollbar-thumb {
    background: #1E98D7;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #004FA8;
}
/* Reducción de textos destacados / badges superiores */
.product-card .card-badge-container {
  display: flex;
  gap: 6px;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}

.product-card .badge-highlight {
  font-size: 0.68rem; /* Tamaño reducido */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 3px 8px;
  border-radius: 4px;
  line-height: 1.2;
}

.badge-highlight.red {
  background-color: #e53935;
  color: #ffffff;
}

.badge-highlight.dark {
  background-color: #212b36;
  color: #ffffff;
}

/* Nuevo botón Descargar Ficha Técnica */
.btn-download-datasheet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #0056b3;
  background-color: #eef5fc;
  border: 1px solid #b8daff;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-download-datasheet:hover {
  background-color: #0056b3;
  color: #ffffff;
}
/* =========================================================================
   ANIMACIONES DE SCROLL (FADE IN Y DESPLAZAMIENTOS)
   ========================================================================= */

/* 1. Animación Fade In (Sección Productos) */
.reveal-fade {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.reveal-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger / Cascada para las tarjetas de productos */
.product-card-stagger {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.product-card-stagger.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 2. Animación Sección Contacto: Textos desde la Izquierda */
.reveal-left {
    opacity: 0;
    transform: translateX(-70px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.reveal-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* 3. Animación Sección Contacto: Formulario desde la Derecha */
.reveal-right {
    opacity: 0;
    transform: translateX(70px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* 4. Animación interactiva de la Sección de Colores hacia la izquierda */
.color-track-slide {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: slideColorsLeft 38s linear infinite;
    will-change: transform;
}

/* Pausa interactiva: al pasar el ratón se detiene para elegir un color */
.color-track-slide:hover {
    animation-play-state: paused;
}

@keyframes slideColorsLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}