/* ==========================================================================
   ARMEPLAST · IDENTIDAD CORPORATIVA (Divi nativa, fiel al píxel)
   Estilos compartidos para el catálogo digital de macetas y contenedores.
   ========================================================================== */

body {
    font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif !important;
    color: #4a4a4a;
}

.web-title {
    color: #333333;
    font-weight: 700;
}

/* Número gigante de medidas en color gris oscuro corporativo */
.big-number {
    color: #555555;
    font-weight: 400;
    line-height: 1;
}

/* ==========================================================================
   HEADER GLOBAL (DIVI) · layout y colores vía Tailwind en generate.py
   ========================================================================== */

#main-header {
    transition: background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}

/* Icono hamburguesa móvil (Divi) */
.mobile_menu_bar::before {
    content: '\2630';
    font-size: 26px;
    color: #f37021;
    cursor: pointer;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* ==========================================================================
   EXPERIENCIA UX · Reveal (fade-in-up) y parallax estilo Apple
   ========================================================================== */

/* Aparición fluida al entrar en viewport (IntersectionObserver añade .is-visible) */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Escalado sutil para imágenes destacadas */
.reveal-zoom {
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-zoom.is-visible {
    opacity: 1;
    transform: none;
}

/* Fondo parallax fijo a pantalla completa */
.parallax {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* En táctil, background-attachment: fixed es inestable: lo desactivamos */
@media (hover: none), (max-width: 768px) {
    .parallax {
        background-attachment: scroll;
    }
}

/* Respeta usuarios que prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-zoom {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .parallax {
        background-attachment: scroll;
    }
}

/* ==========================================================================
   REDISEÑO PREMIUM · fondo crema, hero orgánico, ficha split-screen
   ========================================================================== */

/* Fondo crema corporativo (referenciado vía Tailwind bg-[#F7F8F2]) */
:root {
    --armeplast-cream: #F7F8F2;
}

/* Forma orgánica difuminada de fondo (hero / tarjetas editoriales) */
.organic-blob {
    position: absolute;
    border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
    filter: blur(8px);
    z-index: 0;
    pointer-events: none;
}

/* Showcase visual sticky en la ficha de producto (acompaña el scroll) */
.product-sticky {
    position: sticky;
    top: 124px; /* 104px header + holgura */
}
@media (max-width: 1023px) {
    .product-sticky {
        position: static;
        top: auto;
    }
}

/* Matriz logística B2B: tabla técnica ultra-limpia de alta densidad */
.tech-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.tech-table th,
.tech-table td {
    padding: 0.55rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid #eef0ee;
}
.tech-table th {
    color: #8a8f87;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: 42%;
}
.tech-table td {
    color: #3f3f46;
    font-weight: 600;
}
.tech-table tr:last-child th,
.tech-table tr:last-child td {
    border-bottom: 0;
}

/* Badge de beneficio del hero */
.benefit {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #52525b;
    font-weight: 600;
}
.benefit svg {
    flex: none;
}

/* ==========================================================================
   VISOR · Modal fotográfico minimalista (escritorio + móvil) — ficha técnica
   El comportamiento se controla con utilidades Tailwind y un JS ultra ligero.
   ========================================================================== */