/* =========================================
   1. VARIABLES DE DISEÑO (Custom Properties)
   ========================================= */
:root {
    --primary-green: #1a4d3e;   /* Verde oscuro: Identidad y botones principales */
    --light-green: #e8f3ee;     /* Verde claro: Fondos de tarjetas secundarias */
    --accent-green: #4f8a70;    /* Verde medio: Iconos y estados hover */
    --text-dark: #333;          /* Gris oscuro: Texto principal para lectura */
    --white: #ffffff;           /* Blanco: Fondos de tarjetas y navegación */
    --gray-bg: #f4f7f6;         /* Gris muy claro: Fondo general del sitio */
    --shadow: 0 4px 15px rgba(0,0,0,0.08); /* Sombra estándar para dar profundidad */
}

/* =========================================
   2. ESTILOS GLOBALES (Reset)
   ========================================= */
* {
    box-sizing: border-box;     /* Asegura que padding y bordes no sumen al ancho total */
    margin: 0;                  /* Elimina márgenes por defecto */
    padding: 0;                 /* Elimina rellenos por defecto */
    font-family: 'Segoe UI', sans-serif; /* Tipografía limpia y moderna */
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--gray-bg);
    color: var(--text-dark);
    line-height: 1.6;           /* Mejora la legibilidad del texto */
	
}

/* =========================================
   3. NAVEGACIÓN (Header)
   ========================================= */
header {
    background: var(--white);
    padding: 1rem 5%;
    display: flex;              /* Alineación flexible */
    justify-content: space-between; /* Espacia elementos: Logo a la izq, Botón a la der */
    align-items: center;        /* Centra verticalmente los elementos */
    position: sticky;           /* El menú se queda fijo al hacer scroll */
    top: 0;
    z-index: 1000;              /* Asegura que el menú esté siempre al frente */
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;                  /* Separación entre el icono y el texto */
    font-weight: bold;
    color: var(--primary-green);
    font-size: 1.4rem;
}

.nav-links {
    display: flex;
    list-style: none;           /* Quita los puntos de la lista */
    gap: 20px;
}

.nav-links a {
    text-decoration: none;      /* Quita el subrayado */
    color: var(--text-dark);
    font-weight: 500;
}

.btn-member {
    background: var(--primary-green);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.3s;
}

/* =========================================
   4. SECCIÓN HERO (Banner)
   ========================================= */
.hero {
    /* Degradado de verde a transparente sobre la imagen de fondo */
    background: linear-gradient(to right, rgba(26,77,62,0.8), rgba(255,255,255,0)), 
                url('images/background.jpg');
    background-size: cover;     /* Ajusta la imagen para cubrir todo el banner */
    background-position: center;
    height: 450px;
    display: flex;
    align-items: center;
    padding: 0 10%;
    margin-bottom: 40px;
}

.hero-content h1 {
    font-size: 3rem;
    color: white;
    max-width: 500px;
    margin-bottom: 20px;
}

.hero-content p {
    color: white;
    margin-bottom: 25px;
}

.btn-hero {
    background: #d4e7df;
    color: var(--primary-green);
    padding: 12px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
}

/* =========================================
   5. ESTRUCTURA DE COLUMNAS (Layout)
   ========================================= */
.container {
    display: flex;
    flex-wrap: wrap;            /* Permite que las columnas bajen en móviles */
    gap: 30px;
    padding: 0 5% 50px;
}

.left-col { 
    flex: 1.8;                  /* Columna principal más ancha */
    display: flex;
    flex-direction: column;
    gap: 30px; 
}

.right-col { 
    flex: 1;                    /* Columna lateral (Sidebar) */
    display: flex;
    flex-direction: column;
    gap: 30px; 
}

.card {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: var(--shadow);
}

/* =========================================
   6. SECCIÓN DE FLORES Y FILTROS
   ========================================= */
.filter-tags { margin: 20px 0; }

.tag {
    padding: 6px 18px;
    border-radius: 20px;
    background: #f0f0f0;
    margin-right: 10px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: 0.3s;
}

.tag.active, .tag:hover {
    background-color: var(--primary-green);
    color: white;
}

.flowers-grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

/* Ítems de flores: Configuración de visualización y animaciones */
.flower-item {
    flex: 1 1 calc(33.3% - 20px);
    text-align: center;
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 12px;
    display: none;              /* Oculto por defecto para el sistema de filtrado */
    opacity: 0;                 /* Preparado para desvanecimiento */
    transition: opacity 0.4s ease, transform 0.3s ease;
}

/* Solo mostramos los que tengan la clase 'indica' al cargar la página */
.flower-item.indica {
    display: block;
    opacity: 1;
}

.flower-item svg, .flower-item img { 
    width: 60px; 
    height: 60px; 
    margin-bottom: 15px; 
}

.flower-item svg { fill: var(--accent-green); }

.specs { font-size: 0.8rem; color: #666; margin: 5px 0; }
.desc { color: var(--accent-green); font-weight: bold; font-size: 0.9rem; }

/* =========================================
   7. SIDEBAR Y OTROS COMPONENTES
   ========================================= */
.booking-card { background-color: var(--light-green); }

.steps { 
    display: flex; 
    justify-content: space-between; 
    margin: 25px 0; 
}

.step { 
    text-align: center; 
	align-items: center;
    font-size: 0.75rem; 
    color: var(--primary-green); 
}

.step svg { 
    width: 35px; 
    height: 35px; 
    display: block; 
    margin: 0 auto 10px; 
    fill: var(--primary-green); 
}

.check-list { list-style: none; margin-bottom: 20px; font-size: 0.9rem; }

.btn-send {
    width: 100%;
    background: var(--primary-green);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

.newsletter-card { 
    background: var(--primary-green); 
    color: white; 
    text-align: center; 
}

.newsletter-card input {
    width: 100%;
    padding: 12px;
    margin: 15px 0;
    border-radius: 5px;
    border: none;
}

.faq-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }

.faq-item {
	 padding: 8px 10px;   /* menos espacio interno */
    border-bottom: 1px solid #ddd;
    position: relative;
    cursor: pointer;
    font-weight: 500;
}

.faq-answer {
    
	margin-top: 4px; 
    font-weight: normal;
    color: #444;

    /* Estado oculto */
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateY(5px);

    /* Transición */
    transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease;
}

.faq-item:hover .faq-answer {
    opacity: 1;
    max-height: 200px; /* ajusta según el contenido */
    transform: translateY(0);
}






/* =========================================
   8. PIE DE PÁGINA (Footer)
   ========================================= */
footer {
    background: var(--primary-green);
    color: white;
    padding: 40px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;            /* Permite ajuste en pantallas pequeñas */
}

/* =========================================
   9. RESPONSIVIDAD (Media Queries)
   ========================================= */

/* Tablets y Pantallas medianas: Las columnas pasan a ocupar todo el ancho */
@media (max-width: 992px) {
    .left-col, .right-col { 
        flex: 1 1 100%; 
    }
    .hero-content h1 { 
        font-size: 2rem; 
    }
}

/* Móviles: Ocultamos menú y el grid de flores pasa a una sola fila 
@media (max-width: 600px) {
    .nav-links { 
        display: none; 
    }
    .flower-item { 
        flex: 1 1 100%; 
    }
    .hero {
        height: 350px;
        padding: 0 5%;
    }
}*/

/*menu*/

/* --- Estilos del Botón Hamburguesa (Oculto por defecto) --- */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    background: transparent;
    border: none;
    gap: 5px;
}

.menu-toggle .bar {
    width: 25px;
    height: 3px;
    background-color: var(--primary-green);
    transition: 0.3s;
    border-radius: 3px;
}




/* --- Ajustes en el Media Query (Responsive) --- */
@media (max-width: 768px) {
    .menu-toggle {
        display: flex; /* Mostramos el botón en móviles */
        z-index: 1001;
    }

    .nav-links {
		display: flex;
        position: absolute;
        right: -100%; /* Escondido fuera de la pantalla */
        top: 70px;
        flex-direction: column;
        background: var(--white);
        width: 100%;
        text-align: center;
        transition: 0.4s;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        padding: 20px 0;
    }

    .nav-links.active {
        right: 0; /* Se desliza hacia adentro */
		display: flex;
    }

    .nav-links li {
        margin: 15px 0;
    }

    .btn-member {
        display: flex; /* Escondemos el botón principal en el header */
    }
}

/* Animación del icono hamburguesa a X */
.menu-toggle.is-active .bar:nth-child(2) {
    opacity: 0; /* Desvanece la barra del medio */
}

.menu-toggle.is-active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg); /* Inclina la barra superior */
}

.menu-toggle.is-active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg); /* Inclina la barra inferior */
}

.nav-links a {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 500;
    /* Estilos copiados de .tag */
    padding: 6px 18px;          /* Espaciado interno */
    border-radius: 20px;       /* Bordes redondeados tipo píldora */
    background: #ffffff;       /* Color de fondo gris claro */
    font-size: 0.85rem;        /* Tamaño de fuente igual a los tags */
    transition: 0.3s;          /* Transición suave para el hover */
}

.nav-links a:hover {
    background-color: var(--primary-green); /* Fondo verde oscuro */
    color: white;                           /* Texto blanco para contraste */
}
.nav-links {
    display: flex;
    list-style: none;
    gap: 10px; /* Ajusta este valor si quieres más o menos separación entre "botones" */
    align-items: center;
}


section {
    scroll-margin-top: 110px; /* alto del header */
}

#age-gate {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.age-box {
    background: #fff;
    padding: 30px;
    max-width: 400px;
    text-align: center;
    border-radius: 12px;
}

.age-box h2 {
    margin-bottom: 10px;
}

.age-box p {
    margin-bottom: 20px;
    color: #555;
}

.age-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.age-buttons button {
    padding: 10px 18px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}

#age-yes {
    background: #2e7d32;
    color: white;
}

#age-no {
    background: #c62828;
    color: white;
}
.flower-item {
    position: relative;
}
.image-wrapper {
    position: relative;
    display: flex;
    align-items: center;    /* centro vertical */
    justify-content: center;/* centro horizontal */
}

.image-wrapper img {
    width: 60px;   /* tu tamaño actual */
    height: 60px;
    display: block;
}

.badge-agotado {
    position: absolute;
    background: rgba(255, 255, 255, 0.75);
    color: #c62828;
    padding: 8px 14px;
    font-weight: bold;
    font-size: 12px;
    border-radius: 4px;
    z-index: 20;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}



.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 20px;
  right: 20px;
  background-color: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.25);
  z-index: 9999;
  transition: all .3s ease;
}

.whatsapp-float:hover {
  background-color: #20ba5a;
  transform: scale(1.08);
}

.faq-item {
  cursor: pointer;
  user-select: none;
}

.faq-answer {
  display: none;        /* clave para móvil */
  padding-top: 8px;
}

.faq-item.active .faq-answer {
  display: block;
}