/* Variables de colores y fuentes */
:root {
    --bg-color: #f2ece6;
    --text-color: #2b2a29;
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Montserrat', sans-serif;
}

/* Estilos base */
html {
    scroll-behavior: smooth; /* Asegura el desplazamiento suave en toda la página */
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-sans);
}

/* Menú de navegación principal */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(242, 236, 230, 0.95);
    padding: 1.5rem 0;
    display: flex;
    justify-content: center; /* Mantiene la lista (ul) en el centro */
    align-items: center;     /* Centra verticalmente los elementos */
    z-index: 1000;
}

/* --- NUEVO: Estilos para el ícono --- */
.nav-icon {
    position: absolute; /* Se ancla de forma independiente */
    left: 2rem;         /* Distancia desde el borde izquierdo */
    color: var(--text-color);
    display: flex;
    align-items: center;
}

.nav-icon img, 
.nav-icon svg {
    height: 28px; /* Cambia este valor para hacer el ícono más grande o pequeño */
    width: auto;
    transition: opacity 0.3s ease;
}

.nav-icon:hover {
    opacity: 0.6;
}
/* ---------------------------------- */

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 3rem;
}

nav a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
    transition: opacity 0.3s ease;
}

nav ul a:hover {
    opacity: 0.6;
}

/* Contenedor principal de cada página */
section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    box-sizing: border-box;
}

/* Tipografía de encabezados */
h1, h2 {
    font-family: var(--font-serif);
    font-weight: 500;
    margin-bottom: 1rem;
}

h1 {
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    letter-spacing: 0.25em;
    margin-right: -0.25em;
}

/* Título de la sección más destacado */
h2 {
    font-size: clamp(2.8rem, 6vw, 4rem); /* Tamaño aumentado */
    letter-spacing: 0.1em;
    margin-bottom: 2rem;
}

/* Subtítulo estilo "Agency" */
.subtitle {
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 600;
    font-size: 1rem;
    margin-top: 0;
}

/* Párrafos descriptivos */
p.description {
    max-width: 600px;
    line-height: 1.8;
    font-weight: 500;
    opacity: 0.9;
}

/* --- Estilos para las cajas de Sobre Nosotros --- */

/* Contenedor principal de las cajas */
.about-grid {
    display: flex;
    gap: 2rem;
    margin-top: 3rem;
    max-width: 900px;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap; /* Permite que las cajas se apilen en pantallas pequeñas */
}

/* Estructura individual de cada caja */
.about-box {
    flex: 1;
    min-width: 280px; /* Evita que se hagan muy delgadas en móviles */
    border: 1px solid rgba(43, 42, 41, 0.2); /* Borde de color carbón con transparencia */
    padding: 2.5rem;
    text-align: left; /* Texto a la izquierda para mayor elegancia */
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* Efecto al pasar el mouse sobre la caja */
.about-box:hover {
    transform: translateY(-5px); /* Se eleva ligeramente */
    border-color: rgba(43, 42, 41, 0.8); /* El borde se oscurece */
}

/* Título dentro de la caja */
.about-box h3 {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--text-color);
}

/* Párrafo dentro de la caja */
.about-box p {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.7;
    opacity: 0.85; /* Un poco más claro que el texto principal */
    margin: 0;
}

/* --- Estilos para la Cita en Caja --- */

.boxed-quote {
    margin-top: 3.5rem; 
    margin-bottom: 1rem; 
    width: 100%;
    max-width: 650px; /* Caja más compacta */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 2rem; /* Espacio interno de la caja */
    border: 1px solid rgba(43, 42, 41, 0.15); /* Borde elegante y sutil */
    background-color: rgba(255, 255, 255, 0.2); /* Fondo apenas perceptible */
}

.quote-marks {
    font-family: var(--font-serif);
    font-size: 4.5rem; /* Tamaño reducido */
    color: #5c4332; 
    line-height: 0.5;
    margin-bottom: 1.5rem;
}

.quote-primary, .quote-secondary {
    font-family: var(--font-serif);
    text-transform: uppercase;
    color: var(--text-color);
    margin: 0;
    font-weight: 600;
}

.quote-primary {
    font-size: clamp(1rem, 2.5vw, 1.25rem); /* Texto más pequeño */
    letter-spacing: 0.15em;
    margin-bottom: 1.2rem; 
}

.quote-separator {
    width: 60%; /* Línea más corta proporcional a la caja */
    max-width: 400px;
    border: none;
    border-top: 1.5px solid #d4b595;
    margin: 0; 
}

.quote-secondary {
    font-size: clamp(0.95rem, 2vw, 1.15rem); /* Texto más pequeño */
    letter-spacing: 0.1em;
    line-height: 1.4;
    margin-top: 1.2rem; 
}

/* --- Estilos para los textos descriptivos --- */

.about-text {
    max-width: 800px; 
    margin: 0 auto;
    text-align: center;
    padding: 0 1.5rem;
}

.about-text p {
    font-family: var(--font-sans);
    font-size: 1.15rem; 
    line-height: 1.8;
    font-weight: 500;
    color: var(--text-color);
    opacity: 0.85; 
    margin-top: 0;
    margin-bottom: 2rem; 
}

.about-text p:last-child {
    margin-bottom: 0; 
}

/* --- Estilos para Inicio y Flecha --- */

.hero-section {
    position: relative; 
}

.scroll-down-arrow {
    position: absolute;
    bottom: 50px; /* Separación desde el fondo de la pantalla */
    color: var(--text-color);
    font-size: 2.5rem;
    text-decoration: none;
    opacity: 0.6;
    transition: opacity 0.3s ease, color 0.3s ease;
    animation: bounce 2s infinite; /* Llama a la animación de rebote */
}

.scroll-down-arrow:hover {
    opacity: 1;
    color: #5c4332; /* Tono marrón al pasar el cursor */
}

/* Animación de rebote infinito */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-15px);
    }
    60% {
        transform: translateY(-7px);
    }
}

/* --- Estilos para la estructura dividida en ¿Qué hacemos? --- */

.services-wrapper {
    display: flex;
    gap: 4rem; /* Separación entre el texto y la caja */
    max-width: 1000px; /* Más ancho para que quepan ambas cosas */
    width: 100%;
    margin: 3rem auto 0;
    padding: 0 2rem;
    align-items: flex-start; /* Evita que la caja se estire a lo alto de todo el texto */
    box-sizing: border-box;
}

/* Columna Izquierda */
.services-content {
    flex: 2; /* Toma el doble de espacio que la caja */
    text-align: left;
}

.services-content > p {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-color);
    margin-top: 0;
    margin-bottom: 2rem;
    font-weight: 500;
}

.service-category {
    margin-bottom: 2.5rem;
}

.service-title {
    font-family: var(--font-sans);
    font-size: 1.15rem;
    font-weight: 700;
    color: #4a3b32; /* Tono marrón oscuro para los títulos */
    margin: 0 0 1rem 0;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid #d4b595; /* Línea arena/dorada exacta a la imagen */
    display: inline-block; /* Hace que la línea mida lo mismo que el texto */
}

.service-category ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin: 0;
}

.service-category li {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-color);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.services-wrapper {
    display: flex;
    gap: 4rem; 
    max-width: 1000px; 
    width: 100%;
    margin: 3rem auto 0;
    padding: 0 2rem;
    align-items: center;
    box-sizing: border-box;
}

/* Columna Derecha (Caja de Plataformas) */
.platforms-box {
    flex: 1; 
    border: 1px solid rgba(43, 42, 41, 0.15); 
    background-color: rgba(255, 255, 255, 0.2); 
    padding: 2.5rem 2rem;
    text-align: center;
}

.platforms-box h3 {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: var(--text-color);
    margin-top: 0;
    margin-bottom: 2rem;
    line-height: 1.4;
}

.platforms-icons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Permite que los íconos bajen de línea si no caben */
    gap: 1.5rem;
    font-size: 2.2rem;
    color: var(--text-color);
}

.platforms-icons i {
    transition: transform 0.3s ease, opacity 0.3s ease;
    cursor: pointer;
    opacity: 0.8;
}

.platforms-icons i:hover {
    transform: translateY(-5px);
    opacity: 1;
    color: #5c4332;
}

/* --- Diseño Responsivo para Móviles e iPads --- */
@media (max-width: 850px) {
    .services-wrapper {
        flex-direction: column; /* Apila la caja debajo del texto */
        gap: 3rem;
    }
    
    .platforms-box {
        position: static; /* Quita el efecto sticky en móviles */
        width: 100%;
        box-sizing: border-box;
    }
}

/* --- Estilos para la Subsección: Caso de Éxito --- */

.success-story-section {
    margin-top: 1rem;
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.success-story-section .subtitle {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 6vw, 3.5rem); 
    text-transform: none; 
    letter-spacing: 0.05em;
    font-weight: 500;
    color: var(--text-color);
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.success-story-section h3 {
    font-family: var(--font-sans);
    font-size: clamp(1.15rem, 2.5vw, 1.4rem); 
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #5c4332; 
    margin-top: 0;
    margin-bottom: 3.5rem; 
    text-align: center;
}

/* Tarjeta principal dividida */
.success-story-card {
    display: flex;
    width: 100%;
    border: 1px solid rgba(43, 42, 41, 0.15); /* Borde sutil unificado */
    background-color: rgba(255, 255, 255, 0.2);
    text-align: left;
}

/* Lado izquierdo: Textos */
.story-content {
    flex: 2;
    padding: 3rem;
}

.story-content h4 {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #4a3b32;
    margin-top: 0;
    margin-bottom: 1rem;
}

.story-content p {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-color);
    opacity: 0.85;
    margin-top: 0;
    margin-bottom: 2rem;
}

.story-content p:last-child {
    margin-bottom: 0;
}

/* Lado derecho: Métricas */
.story-metrics {
    flex: 1;
    background-color: rgba(92, 67, 50, 0.05); /* Fondo ligeramente más oscuro para contrastar */
    border-left: 1px solid rgba(43, 42, 41, 0.1);
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.metric {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.metric-number {
    font-family: var(--font-serif);
    font-size: 3.5rem;
    color: #5c4332; /* Tono marrón elegante */
    line-height: 1;
    margin-bottom: 0.5rem;
}

.metric-label {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-color);
}

.metric-separator {
    width: 50px;
    border: none;
    border-top: 2px solid #d4b595; /* Línea arena */
    margin: 2rem 0;
}

/* Diseño Responsivo para Móviles */
@media (max-width: 768px) {
    .success-story-card {
        flex-direction: column;
    }
    
    .story-content {
        padding: 2rem;
    }
    
    .story-metrics {
        border-left: none;
        border-top: 1px solid rgba(43, 42, 41, 0.1);
        padding: 2rem;
    }
}

/* --- Estilos para la Lista Ordenada de Resultados --- */

.results-list {
    margin-top: 0;
    margin-bottom: 2rem;
    padding-left: 1.5rem; 
}

.results-list li {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-color);
    opacity: 0.85;
    margin-bottom: 0.8rem;
    padding-left: 0.5rem; 
}

.results-list li:last-child {
    margin-bottom: 0;
}

/* Efecto elegante para los números de la lista */
.results-list li::marker {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1.15rem;
    color: #5c4332; 
}

/* --- Estilos para el Separador Elegante --- */

.elegant-separator {
    border: none; 
    border-top: 2px solid #d4b595; 
    width: 80%; 
    max-width: 1000px;
    margin: 4rem auto; 
}

/* --- Estilos para la sección de WhatsApp --- */

.whatsapp-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 1.5rem;
}

.whatsapp-section h3 {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--text-color);
    margin-bottom: 1rem;
    margin-top: 0;
}

.whatsapp-section p {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-color);
    opacity: 0.85;
    margin-bottom: 2.5rem;
    max-width: 500px;
}

/* Diseño del Botón Minimalista */
.whatsapp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    background-color: transparent; /* Fondo transparente inicialmente */
    color: var(--text-color); /* Texto color carbón */
    border: 1px solid var(--text-color); /* Borde color carbón */
    padding: 1rem 2.5rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: all 0.3s ease;
}

.whatsapp-button i {
    font-size: 1.5rem;
}

/* Efecto al pasar el cursor: los colores se invierten */
.whatsapp-button:hover {
    background-color: var(--text-color); /* Fondo pasa a carbón */
    color: var(--bg-color); /* Texto pasa a crema */
    border-color: var(--text-color);
}