:root {
    --crema-fondo: #FCF9F5;
    --beige-acento: #E5D9C3;
    --lavanda-marca: #A68DAD;
    --lavanda-oscuro: #8E7594;
    --texto-oscuro: #4A4A4A;
    --blanco: #FFFFFF;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Quicksand', sans-serif;
    background-color: var(--crema-fondo);
    color: var(--texto-oscuro);
    line-height: 1.6;
}

h1, h2, h4 { font-family: 'Playfair Display', serif; color: var(--lavanda-oscuro); }

.container { max-width: 1000px; margin: auto; padding: 40px 20px; }

/* Navegación */
header { background: var(--blanco); padding: 15px 0; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
nav { display: flex; justify-content: space-between; align-items: center; max-width: 1000px; margin: auto; padding: 0 20px; }
.logo { font-weight: 700; font-size: 1.5rem; color: var(--lavanda-marca); letter-spacing: 2px; }
nav ul { display: flex; list-style: none; align-items: center; }
nav ul li { margin-left: 20px; }
nav ul li a { text-decoration: none; color: var(--texto-oscuro); font-weight: 500; }
.btn-nav { background: var(--lavanda-marca); color: white !important; padding: 8px 18px; border-radius: 20px; }

/* Hero */
.hero { height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(rgba(252,249,245,0.7), rgba(252,249,245,0.7)), url('https://images.unsplash.com/photo-1600334129128-685c5582fd35?q=80&w=2070&auto=format&fit=crop'); background-size: cover; padding: 20px; }
.hero h1 { font-size: 2.8rem; margin-bottom: 15px; }
.hero p { font-size: 1.2rem; max-width: 600px; margin: auto; }

/* Botones */
.btn-primary { display: inline-block; background: var(--lavanda-marca); color: white; padding: 15px 30px; border-radius: 30px; text-decoration: none; margin-top: 20px; transition: 0.3s; }
.btn-primary:hover { background: var(--lavanda-oscuro); }
.btn-secondary { display: inline-block; border: 2px solid var(--lavanda-marca); color: var(--lavanda-marca); padding: 10px 25px; border-radius: 30px; text-decoration: none; margin-top: 15px; }

/* Características */
.features { background: var(--beige-acento); text-align: center; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.icon { font-size: 2rem; display: block; margin-bottom: 10px; }

/* Servicios */
.services h2 { text-align: center; margin-bottom: 30px; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; }
.service-card { background: white; padding: 30px; border-radius: 15px; position: relative; border: 1px solid #eee; }
.tag { position: absolute; top: 10px; right: 10px; background: #f0ebf2; color: var(--lavanda-marca); font-size: 0.7rem; padding: 4px 10px; border-radius: 10px; font-weight: bold; }

/* Testimonios */
.testimonials { background: #fdfaf5; text-align: center; }
.testimonial-grid { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.testimonial-item { background: white; padding: 20px; border-radius: 10px; max-width: 400px; font-style: italic; box-shadow: 0 4px 6px rgba(0,0,0,0.02); }

/* FAQs */
.faq { background: var(--crema-fondo); padding-bottom: 60px; }
.faq h2 { text-align: center; margin-bottom: 30px; }
.faq-item { max-width: 700px; margin: 15px auto; background: white; padding: 20px; border-radius: 10px; }

footer { background: var(--lavanda-oscuro); color: white; text-align: center; padding: 30px; }

@media (max-width: 768px) {
    .hero h1 { font-size: 1.8rem; }
    nav ul { display: none; }
}

.about-flex {
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 60px 20px;
}

.about-image img {
    width: 350px; /* Tamaño ideal para la foto */
    height: 450px;
    object-fit: cover; /* Para que la foto no se deforme */
    border-radius: 20px; /* Bordes suaves estilo Zen */
    box-shadow: 20px 20px 0px var(--beige-acento); /* Un detalle decorativo elegante */
}

.about-text {
    flex: 1;
    text-align: left;
}

.subtitle {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
    color: var(--lavanda-marca);
    font-weight: bold;
}

.role {
    font-style: italic;
    color: var(--lavanda-oscuro);
    margin-bottom: 20px;
}

/* Ajuste para celulares */
@media (max-width: 768px) {
    .about-flex {
        flex-direction: column;
        text-align: center;
    }
    .about-text {
        text-align: center;
    }
    .about-image img {
        width: 100%;
        height: auto;
    }
}

/* Estilos para Redes Sociales */
.social-nav a {
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--lavanda-marca) !important;
    border: 1px solid var(--lavanda-marca);
    padding: 4px 8px;
    border-radius: 5px;
    transition: 0.3s;
}

.social-nav a:hover {
    background: var(--lavanda-marca);
    color: white !important;
}

/* Footer Mejorado */
footer {
    background: var(--lavanda-oscuro);
    color: white;
    padding: 60px 20px 20px;
    text-align: center;
}

footer h3 {
    color: white;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.social-links {
    margin: 25px 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.social-icon {
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 10px 20px;
    border-radius: 25px;
    transition: 0.3s;
}

.social-icon:hover {
    background: white;
    color: var(--lavanda-oscuro);
}

.footer-divider {
    border: 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin: 30px auto;
    max-width: 200px;
}

.copyright {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Ajuste móvil para los iconos del header */
@media (max-width: 768px) {
    .social-nav { display: none; } /* En móvil mejor dejarlos solo en el footer para no saturar */
}