/* =========================================
   ESTILOS PREMIUM - LUZ DE VIDA 2026
========================================= */

/* Importar fuentes elegantes de Google */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Poppins:wght@300;400;500;600&display=swap');

/* Estilos Generales */
body { 
    font-family: 'Poppins', sans-serif; 
    margin: 0; 
    padding: 0; 
    color: #444; 
    background-color: #fdfdfc; 
}
h1, h2, h3 { 
    font-family: 'Playfair Display', serif; 
    font-weight: 700; 
    color: #2c3e50; 
}

/* =========================================
   ENCABEZADO CON TEXTURA
========================================= */
header { 
    background-color: #2c3e50; /* Color base azul oscuro */
    /* Textura de líneas diagonales sutiles */
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 2px, transparent 2px, transparent 6px);
    padding: 15px 50px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    border-bottom: 4px solid #b08d57; /* Línea dorada inferior */
}
.logo { 
    font-size: 26px; 
    font-family: 'Playfair Display', serif; 
    color: #ffffff; /* Letras blancas para contrastar */
    display: flex; 
    align-items: center; 
    gap: 15px; 
}
.logo img { 
    height: 65px; 
    width: 65px; 
    border-radius: 50%; 
    object-fit: cover; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); 
    border: 2px solid #b08d57; 
    transition: transform 0.3s; 
}
.logo:hover img { 
    transform: rotate(5deg) scale(1.05); 
}
nav a { 
    text-decoration: none; 
    color: #ecf0f1; /* Color claro para los enlaces del menú */
    margin-left: 20px; 
    font-weight: 500; 
    font-size: 0.95em; 
    transition: all 0.3s; 
    padding: 8px 12px; 
    border-radius: 5px; 
}
nav a:hover { 
    color: #ffffff; 
    background-color: #b08d57; /* Al pasar el mouse se pintan de dorado */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* =========================================
   ANIMACIONES
========================================= */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   SECCIÓN PRINCIPAL (HERO)
========================================= */
.hero { 
    background: linear-gradient(rgba(244, 235, 222, 0.88), rgba(255, 255, 255, 0.95)), url('https://images.unsplash.com/photo-1576765608535-5f04d1e3f289?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') center/cover; 
    text-align: center; 
    padding: 130px 20px; 
    border-bottom: 5px solid #2c3e50; 
}
.hero h1 { 
    font-size: 3.8em; 
    margin-bottom: 15px; 
    animation: fadeInUp 0.8s ease-out forwards; 
}
.hero p { 
    font-size: 1.25em; 
    max-width: 800px; 
    margin: 0 auto 35px auto; 
    line-height: 1.8; 
    color: #555; 
    animation: fadeInUp 1s ease-out forwards; 
    opacity: 0; 
}
.hero .btn { 
    animation: fadeInUp 1.2s ease-out forwards; 
    opacity: 0; 
}

/* =========================================
   BOTONES
========================================= */
.btn { 
    background-color: #b08d57; 
    color: white; 
    padding: 16px 35px; 
    text-decoration: none; 
    border-radius: 50px; 
    font-weight: 600; 
    letter-spacing: 0.5px; 
    transition: all 0.3s ease; 
    display: inline-block; 
    margin-top: 10px; 
    border: none; 
    cursor: pointer; 
    box-shadow: 0 8px 15px rgba(176, 141, 87, 0.3); 
}
.btn:hover { 
    background-color: #8e7042; 
    transform: translateY(-3px); 
    box-shadow: 0 12px 20px rgba(176, 141, 87, 0.4); 
}
.btn-secondary { background-color: #2c3e50; box-shadow: 0 4px 6px rgba(44, 62, 80, 0.3); }
.btn-secondary:hover { background-color: #1a252f; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(44, 62, 80, 0.4); }

/* =========================================
   SECCIONES Y FONDOS
========================================= */
section { padding: 80px 20px; text-align: center; }
.bg-light { background-color: #ffffff; }
.bg-crema { background-color: #fdfbf7; } 
.bg-azul-suave { background-color: #f4f7f9; } 
h2 { 
    margin-bottom: 50px; 
    font-size: 2.8em; 
    position: relative; 
    display: inline-block; 
}
h2::after { 
    content: ''; 
    width: 50%; 
    height: 4px; 
    background-color: #b08d57; 
    position: absolute; 
    bottom: -12px; 
    left: 25%; 
    border-radius: 2px; 
}
.texto-destacado { max-width: 900px; margin: 0 auto 40px auto; font-size: 1.15em; line-height: 1.9; text-align: justify; color: #555; }

/* =========================================
   TARJETAS (CARDS) DE ALTA GAMA
========================================= */
.grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; max-width: 1200px; margin: 0 auto; }
.card { 
    background: white; 
    padding: 40px 30px; 
    border-radius: 16px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.06); 
    width: 320px; 
    text-align: left; 
    border-top: 6px solid #b08d57; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    transition: all 0.4s ease; 
    position: relative; 
    overflow: hidden; 
}
.card:hover { 
    transform: translateY(-10px); 
    box-shadow: 0 20px 40px rgba(0,0,0,0.12); 
}
.card h3 { font-size: 1.5em; margin-bottom: 15px; }
.card p { font-size: 1em; line-height: 1.7; color: #666; }
.precio { font-size: 1.5em; font-weight: bold; color: #b08d57; margin: 15px 0; }
.modalidad { font-size: 0.9em; color: #16a085; font-weight: bold; margin-bottom: 15px; background: #e8f8f5; padding: 5px 10px; border-radius: 5px; display: inline-block; }

/* Insignias para los Iconos */
.icono-tarjeta { 
    background: #fdfbf7; 
    width: 70px; 
    height: 70px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 2.2em; 
    margin-bottom: 20px; 
    box-shadow: 0 4px 10px rgba(176, 141, 87, 0.2); 
    border: 2px solid #f4ebde; 
}

/* =========================================
   GALERÍA SOBRE NOSOTROS
========================================= */
.historia-texto { max-width: 800px; margin: 0 auto 40px auto; text-align: left; line-height: 1.8; font-size: 1.1em; color: #444; }
.galeria-nosotros { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 20px; }
.galeria-img { width: 100%; height: 200px; background-color: #e0e0e0; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; color: #666; font-size: 1.2em; font-weight: bold; transition: transform 0.3s; border: 2px dashed #ccc; }
.galeria-img:hover { transform: scale(1.05); border-color: #b08d57; color: #b08d57; }

/* =========================================
   FORMULARIOS
========================================= */
.form-container { max-width: 600px; margin: 0 auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 10px 20px rgba(0,0,0,0.08); text-align: left; border-top: 5px solid #2c3e50; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: bold; color: #2c3e50; }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; box-sizing: border-box; font-family: inherit; transition: border-color 0.3s; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: #b08d57; box-shadow: 0 0 5px rgba(176, 141, 87, 0.3); }
.form-group textarea { resize: vertical; height: 100px; }

/* =========================================
   PIE DE PÁGINA (FOOTER)
========================================= */
footer { 
    background-color: #1a252f; 
    color: #ecf0f1; 
    text-align: center; 
    padding: 40px 20px; 
    border-top: 5px solid #b08d57; 
    font-size: 1.05em; 
    letter-spacing: 0.5px; 
}

/* =========================================
   BOTÓN FLOTANTE DE WHATSAPP
========================================= */
.whatsapp-flotante { 
    position: fixed; 
    width: 65px; 
    height: 65px; 
    bottom: 30px; 
    right: 30px; 
    background-color: #25d366; 
    border-radius: 50%; 
    box-shadow: 0px 6px 15px rgba(37, 211, 102, 0.4); 
    z-index: 1000; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: all 0.3s ease; 
}
.whatsapp-flotante:hover { 
    transform: scale(1.15) rotate(10deg); 
}
.whatsapp-flotante img { 
    width: 38px; 
    height: 38px; 
}