/* css/style.css */
:root {
    --arena: #f5dfa3;
    --arena-clara: #fef9ed;
    --verde-agua: #11787a;
    --verde-oscuro: #0c5a5c;
    --naranja: #e55a35;
    --naranja-hover: #cf4b29;
    --amarillo: #f2ae24;
    --texto: #333333;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; }
body { background-color: var(--arena-clara); color: var(--texto); overflow-x: hidden; }

/* Navbar */
nav { background-color: var(--verde-agua); padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.logo-nav img { height: 45px; object-fit: contain; }
.logo-nav span { color: white; font-weight: 800; font-size: 1.5rem; letter-spacing: 1px; display: none; }
.cart-icon { position: relative; color: white; cursor: pointer; transition: transform 0.2s; }
.cart-icon:active { transform: scale(0.9); }
.cart-badge { position: absolute; top: -5px; right: -10px; background-color: var(--naranja); color: white; font-size: 0.75rem; font-weight: bold; width: 20px; height: 20px; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* Hero Dinámico con Slider */
.hero { 
    position: relative; 
    padding: 60px 20px 90px 20px; 
    text-align: center; 
    border-bottom: 5px solid var(--amarillo); 
    overflow: hidden; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 450px;
    background-color: var(--arena); /* Color de respaldo */
}

/* Contenedor de las fotos */
.hero-slider {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
}

/* =========================================
   Nuevo Botón Principal del Hero (Naranja y Negro)
   ========================================= */
.btn-hero-main {
    background-color: var(--naranja);
    color: #111111; /* Negro profundo para máximo contraste */
    font-size: 1.15rem;
    font-weight: 800;
    padding: 16px 35px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); 
    transition: all 0.3s ease;
    margin-top: 10px;
}

.btn-hero-main .material-icons {
    font-size: 24px;
}

/* Efecto al tocar el botón: Fondo negro, letras naranjas */
.btn-hero-main:hover {
    background-color: #111111;
    color: var(--naranja);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    transform: translateY(-3px);
}

.btn-hero-main:active {
    transform: scale(0.95);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}


/* Estilo individual de cada foto */
.hero-slider .slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: fadeSlider 15s infinite; /* 15 segundos en total para 3 fotos */
}

/* La animación que funde y hace un zoom suave (Efecto Ken Burns) */
@keyframes fadeSlider {
    0%, 100% { opacity: 0; transform: scale(1); }
    10%, 33% { opacity: 1; transform: scale(1.05); }
    43% { opacity: 0; transform: scale(1.1); }
}

/* Capa de color sobre las fotos para que se lea el texto */
.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Un degradado oscuro arriba que termina en color arena abajo para fundirse con la página */
    background: linear-gradient(to bottom, rgba(12, 90, 92, 0.6) 0%, var(--arena-clara) 100%);
    z-index: 2;
}

/* El contenido (Textos y Botones) por encima de todo */
.hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
}

/* Secciones */
.container { max-width: 1100px; margin: 0 auto; padding: 0 0 20px 0; overflow: hidden; }
.section-title { text-align: center; color: var(--verde-agua); font-size: 1.8rem; margin: 40px 0 20px; font-weight: 800; position: relative; }
.section-title::after { content: ''; display: block; width: 50px; height: 4px; background-color: var(--naranja); margin: 8px auto 0; border-radius: 2px; }

/* Grilla Responsiva de Productos (Adiós carrusel gigante) */
.carousel { 
    display: grid; 
    /* Crea columnas de mínimo 140px. En celulares entran 2 justas, en PC entran más */
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 
    gap: 15px; 
    padding: 10px 0 30px 0; 
}

/* Tarjetas más finas, chicas y elegantes */
.card { 
    background: white; 
    border-radius: 12px; 
    overflow: hidden; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.06); 
    display: flex; 
    flex-direction: column; 
    transition: transform 0.3s; 
}
.card:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 6px 15px rgba(0,0,0,0.12); 
}

/* Imagen proporcionada (no tan alta) */
.card-img { 
    width: 100%; 
    height: 130px; 
    object-fit: cover; 
    background-color: var(--arena); 
}

/* Cuerpo de la tarjeta centrado */
.card-body { 
    padding: 12px; /* Menos relleno para que quede compacta */
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
    text-align: center; /* Texto centrado se ve más premium */
}

.card-title { 
    font-size: 0.95rem; /* Letra más sutil */
    font-weight: 600; 
    color: var(--verde-oscuro); 
    margin-bottom: 5px; 
    line-height: 1.2;
}

.card-price { 
    font-size: 1.15rem; 
    font-weight: 800; 
    color: var(--naranja); 
    margin-bottom: 12px; 
}

/* Botón delicado y proporcionado */
.card-btn { 
    margin-top: auto; 
    background-color: var(--verde-agua); 
    color: white; 
    border: none; 
    padding: 8px; 
    border-radius: 8px; 
    font-weight: 600; 
    font-size: 0.85rem; 
    cursor: pointer; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 5px; 
    transition: background 0.2s; 
}

.card-btn .material-icons {
    font-size: 18px; /* Ícono más chiquito para que no desentone */
}

.card-btn:active { 
    background-color: var(--verde-oscuro); 
    transform: scale(0.95); 
}


/* Alerta Interna (Modal Agradable) */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; display: none; justify-content: center; align-items: center; padding: 20px; opacity: 0; transition: opacity 0.3s; }
.modal-overlay.active { display: flex; opacity: 1; }
.modal-box { background: white; padding: 25px; border-radius: 16px; text-align: center; max-width: 320px; width: 100%; transform: translateY(20px); transition: transform 0.3s; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.modal-overlay.active .modal-box { transform: translateY(0); }
.modal-icon { font-size: 48px; color: var(--naranja); margin-bottom: 15px; }
.modal-btn { background: var(--verde-agua); color: white; border: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; width: 100%; margin-top: 20px; font-size: 1.1rem; }

/* Panel Lateral del Carrito */
.cart-sidebar { position: fixed; top: 0; right: -100%; width: 100%; max-width: 400px; height: 100%; background: var(--arena-clara); z-index: 1001; box-shadow: -5px 0 20px rgba(0,0,0,0.1); transition: right 0.3s ease-in-out; display: flex; flex-direction: column; }
.cart-sidebar.open { right: 0; }
.cart-header { background: var(--verde-agua); color: white; padding: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 1.2rem; font-weight: bold; }
.cart-items { flex-grow: 1; overflow-y: auto; padding: 20px; }
.cart-footer { 
    padding: 20px; 
    background: white; 
    border-top: 1px solid #ddd;
    /* Esto hace que el botón sea grande y llamativo */
}

.btn-completar {
    width: 100%;
    background: var(--naranja);
    color: white;
    border: none;
    padding: 18px;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(229, 90, 53, 0.3);
    transition: 0.3s;
}
.btn-completar:hover {
    background: var(--naranja-hover);
    transform: translateY(-2px);
}


/* Ítems dentro del carrito */
.cart-item { display: flex; align-items: center; gap: 15px; background: white; padding: 10px; border-radius: 10px; margin-bottom: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.cart-item img { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; }
.cart-item-info { flex-grow: 1; }
.cart-item-title { font-weight: 600; font-size: 0.95rem; color: var(--verde-oscuro); }
.cart-item-price { color: var(--naranja); font-weight: bold; font-size: 0.9rem; }
.btn-remove { color: #ef4444; background: none; border: none; font-size: 24px; cursor: pointer; padding: 5px; }

/* Footer Mejorado */
footer { background-color: var(--verde-agua); color: white; padding: 50px 20px 30px; margin-top: 40px; }
.footer-grid { display: grid; gap: 30px; max-width: 1100px; margin: 0 auto; text-align: left; }

/* Para tablets y PC se pone lado a lado */
@media (min-width: 768px) {
    .footer-grid { grid-template-columns: 1fr 1fr; align-items: center; }
}

.footer-info-col h3 { color: var(--amarillo); font-size: 1.8rem; margin-bottom: 20px; font-weight: 800; }
.footer-info { margin-bottom: 15px; font-size: 1rem; display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; }
.footer-info i { color: var(--amarillo); margin-top: 2px; }

/* Contenedor del Mapa */
.map-container { width: 100%; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,0.2); height: 250px; background: #e2e8f0; border: 3px solid var(--verde-oscuro); }
.map-container iframe { width: 100%; height: 100%; border: none; }

/* Créditos Desarrollo (Firma Armaweb) */
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 20px; margin-top: 40px; text-align: center; }
.developer-credit { 
    color: #FFD700; /* Dorado brillante */
    text-decoration: none; 
    font-weight: 800; 
    font-size: 1.2rem; 
    letter-spacing: 0.5px;
    transition: all 0.3s ease; 
    display: inline-block;
    margin-left: 5px;
}
.developer-credit:hover { 
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8); /* Brillo al tocar */
    transform: scale(1.05);
}
/* Botón Representante (Debajo del Hero) - Estilo Fresco y Playero */
.btn-rep {
    background-color: white;
    text-decoration: none;
    padding: 10px 25px;
    font-size: 1.05rem;
    font-weight: 800;
    border: none; /* Adiós al borde de abogado */
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.25); /* Sombra verde brillante y suave */
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s;
}

.btn-rep:hover {
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.35);
    transform: translateY(-2px);
}

.btn-rep:active { 
    transform: scale(0.95); 
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.2);
}


/* Burbuja Flotante de WhatsApp */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 25px;
    right: 20px;
    background-color: #25d366; /* Verde oficial de WhatsApp */
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.2s ease-in-out;
}
.whatsapp-float:active {
    transform: scale(0.9);
}
.whatsapp-float svg {
    width: 35px;
    height: 35px;
    fill: white;
}
/* Buscador de Disponibilidad (Estilo Airbnb) */
.search-wrapper {
    position: relative;
    max-width: 800px;
    margin: -30px auto 30px auto; /* Flota sobre el Hero y el fondo */
    padding: 0 20px;
    z-index: 10;
}

.search-bar {
    background: white;
    border-radius: 50px;
    padding: 10px 10px 10px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    gap: 15px;
}

.search-field {
    display: flex;
    flex-direction: column;
    flex: 1;
    border-right: 1px solid #e2e8f0;
    padding-right: 15px;
}

.search-field:nth-child(2) { border-right: none; }

.search-field label {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--verde-oscuro);
    margin-bottom: 2px;
}

.search-field input {
    border: none;
    outline: none;
    font-size: 0.95rem;
    font-family: 'Poppins', sans-serif;
    color: #555;
    background: transparent;
    cursor: pointer;
}

.btn-search {
    background: var(--naranja);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s, background 0.2s;
}

.btn-search:hover { background: var(--naranja-hover); }
.btn-search:active { transform: scale(0.95); }

/* Adaptación para celulares */
@media (max-width: 600px) {
    .search-bar {
        flex-direction: column;
        border-radius: 20px;
        padding: 20px;
        gap: 15px;
    }
    .search-field {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        padding-right: 0;
        padding-bottom: 10px;
    }
    .search-field:nth-child(2) { border-bottom: none; }
    .btn-search { width: 100%; justify-content: center; padding: 15px; }
}