/* =============================================================
   Granja Escola Es Molí — estilo.css
   Base + estados controlados por JS + animaciones personalizadas
   El diseño visual va en clases Tailwind dentro del HTML.
   ============================================================= */

/* ── Base ──────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body { font-family: 'Poppins', sans-serif; }
*, *::before, *::after { box-sizing: border-box; }

/* ── Header: sombra al hacer scroll ──────────────────────── */
.header { transition: box-shadow 0.3s ease; }
.header.scrolled { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10); }

/* ── Menú móvil ─────────────────────────────────────────── */
@media (max-width: 767px) {
    .menu {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #ffffff;
        border-top: 3px solid #f97316;
        padding: 0 1.25rem;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease, padding 0.3s ease;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
        z-index: 40;
    }
    .menu.nav-open {
        max-height: 380px;
        padding: 0.75rem 1.25rem 1.5rem;
    }
    .menu a { display: block; }
}

@media (min-width: 768px) {
    .menu { display: flex !important; }
}

/* Hamburger → X */
.hamburger span {
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger.nav-open span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.hamburger.nav-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.nav-open span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

/* Enlace activo del nav (añadido por JS) */
.menu a.is-active {
    color: #f97316 !important;
    font-weight: 700 !important;
}
.menu .nav-cta.is-active {
    background-color: #c2410c !important;
}

/* ── Animaciones de entrada del Hero ───────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-badge { animation: fadeUp 0.6s ease both; }
.hero-text  { animation: fadeUp 0.7s 0.10s ease both; }
.hero-sub   { animation: fadeUp 0.7s 0.25s ease both; }
.hero-btns  { animation: fadeUp 0.7s 0.40s ease both; }

/* Flecha de scroll en el hero */
@keyframes bounceY {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(10px); }
}
.scroll-hint {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    animation: bounceY 2s ease-in-out infinite;
    cursor: pointer;
    z-index: 20;
}

/* ── Slider de imágenes ─────────────────────────────────── */
.contenedor-img {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.7s ease;
    pointer-events: none;
}
.contenedor-img.active {
    opacity: 1;
    pointer-events: auto;
}

/* Botones prev/next generados por JS */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s ease;
    font-size: 14px;
}
.slider-btn:hover { background: rgba(0, 0, 0, 0.60); }
.slider-btn-prev  { left: 1.25rem; }
.slider-btn-next  { right: 1.25rem; }

/* Puntos indicadores */
.slider-dots {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
}
.slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.45);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: width 0.3s ease, background 0.3s ease;
}
.slider-dot.active {
    background: #ffffff;
    width: 28px;
}

/* ── Tabs (página de Serveis) ────────────────────────────── */
.tab-panel { display: none; }
.tab-panel.active {
    display: block;
    animation: fadeUp 0.35s ease both;
}

.tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    border: 2px solid #fed7aa;
    background: #fff7ed;
    color: #9a3412;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.tab-btn:hover,
.tab-btn.active {
    background: #f97316;
    color: #ffffff;
    border-color: #f97316;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.25);
}