/*
 * Archivo CSS principal para el sitio web
 * Este archivo define estilos globales, variables de diseño y reglas específicas para componentes.
 * Utiliza una estrategia mobile-first en algunas secciones y breakpoints para adaptabilidad.
 */

/* Importación de Fuentes */
/* Importa la fuente 'Poppins' de Google Fonts con diferentes pesos para asegurar una tipografía consistente. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700;900&display=swap');

/* Variables CSS (Custom Properties) */
/*
 * Define un conjunto de variables globales para colores, fuentes, espaciados, sombras y transiciones.
 * Esto facilita la gestión y el mantenimiento de los estilos, permitiendo cambios rápidos y globales.
 */
:root {
    --font-main: 'Poppins', 'Segoe UI', Tahoma, sans-serif; /* Fuente principal del texto */
    --color-primary: #2E8B57; /* Color principal de la marca (verde oscuro) */
    --color-accent: #f3b71b; /* Color de acento (amarillo/naranja) */
    --color-dark: #1a2e26; /* Color oscuro para textos y fondos */
    --color-text-light: #55665f; /* Color de texto más claro */
    --color-background: #ffffff; /* Color de fondo principal */
    --color-background-light: #f6f9f7; /* Color de fondo secundario/claro */
    --color-white: #ffffff; /* Color blanco */
    --border-color: #e8e8e8; /* Color para bordes sutiles */
    --color-origenes: #8B4513; /* Color específico para la sección "Orígenes" */
    --color-raices: #00A896; /* Color específico para la sección "Raíces" */
    --gradient-esencias: linear-gradient(135deg, #FF0000, #FC6500, #FCFC00, #349900, #0000FF); /* Gradiente para la sección "Esencias" */
    --header-height: 4.5rem; /* Altura estándar del encabezado */
    --border-radius-main: 16px; /* Radio de borde principal para elementos */
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.05); /* Sombra suave para elementos */
    --shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.08); /* Sombra media para elementos destacados */
    --transition-main: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transición principal para efectos suaves */
    --footer-bg: #2a3b34; /* Color de fondo del pie de página */
}

/* Reinicio de Estilos Globales (CSS Reset) */
/* Elimina márgenes y rellenos predeterminados del navegador, y establece el box-sizing a border-box para un control más predecible del diseño. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; } /* Habilita el desplazamiento suave en la página. */
body {
    font-family: var(--font-main); /* Aplica la fuente principal definida. */
    line-height: 1.7; /* Establece la altura de línea para mejor legibilidad. */
    color: var(--color-dark); /* Color de texto predeterminado. */
    background-color: var(--color-background); /* Color de fondo del cuerpo. */
    -webkit-font-smoothing: antialiased; /* Mejora el suavizado de la fuente en navegadores WebKit. */
    /* MODIFICACIÓN: Añadido para prevenir desbordamientos horizontales inesperados */
    overflow-x: hidden;
}

/* Contenedor Principal */
/* Define un contenedor centrado con un ancho máximo y padding horizontal para evitar que el contenido llegue a los bordes de la pantalla. */
.container {
    max-width: 1200px; /* Ancho máximo del contenido. */
    margin: 0 auto; /* Centra el contenedor horizontalmente. */
    padding: 0 1.5rem; /* Relleno horizontal para evitar el pegado a los bordes, especialmente en móviles. */
}

/* Estilos de Sección */
/* Reglas generales para secciones de la página. */
.section { padding: 6rem 0; } /* Relleno vertical estándar para las secciones. */
.section-light { background-color: var(--color-background-light); } /* Fondo más claro para secciones específicas. */
.section-title {
    text-align: center; /* Título de sección centrado. */
    font-size: 2.8rem; /* Tamaño de fuente del título. */
    font-weight: 700; /* Grosor de fuente negrita. */
    margin-bottom: 1rem; /* Margen inferior. */
    color: var(--color-dark); /* Color del título. */
    /* MODIFICACIÓN: Permite que el texto se ajuste si es demasiado largo para el ancho disponible */
    word-wrap: break-word;
}
.section-subtitle {
    text-align: center; /* Subtítulo de sección centrado. */
    font-size: 1.1rem; /* Tamaño de fuente del subtítulo. */
    max-width: 700px; /* Ancho máximo para el subtítulo, mejora la legibilidad. */
    margin: 0 auto 3rem auto; /* Centra y añade margen inferior. */
    color: var(--color-text-light); /* Color de texto más claro. */
    /* MODIFICACIÓN: Permite que el texto se ajuste si es demasiado largo para el ancho disponible */
    word-wrap: break-word;
}

/* Estilos de Botones */
/* Conjunto de estilos para botones, incluyendo variantes y estados. */
.btn {
    display: inline-block; /* Permite ancho y alto, pero se alinea en línea. */
    padding: 14px 32px; /* Relleno interno. */
    border-radius: 50px; /* Bordes muy redondeados (píldora). */
    text-decoration: none; /* Sin subrayado. */
    font-weight: 500; /* Grosor de fuente. */
    transition: all var(--transition-main); /* Transición suave para todos los cambios. */
    cursor: pointer; /* Cambia el cursor a un puntero. */
    border: none; /* Sin borde por defecto. */
    position: relative; /* Para efectos internos o superposiciones. */
    overflow: hidden; /* Oculta contenido que se desborda (para efectos de hover, etc.). */
    /* MODIFICACIÓN: Asegura que el texto del botón se ajuste si es muy largo */
    white-space: normal;
    text-align: center;
}
.btn-primary {
    background-color: var(--color-primary); /* Fondo con color primario. */
    color: var(--color-white); /* Texto blanco. */
    box-shadow: 0 4px 15px rgba(46, 139, 87, 0.2); /* Sombra para el botón primario. */
}
.btn-primary:hover {
    transform: translateY(-4px); /* Eleva el botón ligeramente al pasar el ratón. */
    box-shadow: 0 8px 20px rgba(46, 139, 87, 0.3); /* Sombra más pronunciada. */
}
.btn-secondary {
    background-color: transparent; /* Fondo transparente. */
    color: var(--color-primary); /* Texto con color primario. */
    border: 2px solid var(--color-primary); /* Borde con color primario. */
}
.btn-secondary:hover {
    background-color: var(--color-primary); /* Fondo con color primario al pasar el ratón. */
    color: var(--color-white); /* Texto blanco al pasar el ratón. */
}
.btn-esencias {
    background-image: var(--gradient-esencias); /* Fondo con gradiente de esencias. */
    background-size: 200% 200%; /* Tamaño doble para animar el gradiente. */
    color: var(--color-white); /* Texto blanco. */
    font-weight: 700; /* Grosor de fuente. */
    animation: gradient-animation 5s ease infinite; /* Animación de gradiente infinita. */
}
/* Animación del gradiente para el botón "Esencias" */
@keyframes gradient-animation {
    0% { background-position: 0% 50%; } /* Posición inicial del fondo. */
    50% { background-position: 100% 50%; } /* Posición media. */
    100% { background-position: 0% 50%; } /* Vuelve a la posición inicial. */
}
.btn.disabled, .btn:disabled {
    background-color: #ccc; /* Fondo gris para botones deshabilitados. */
    color: #666; /* Texto gris oscuro. */
    cursor: not-allowed; /* Cursor de "no permitido". */
    box-shadow: none; /* Sin sombra. */
    border-color: #ccc; /* Borde gris. */
}
.btn.disabled:hover, .btn:disabled:hover {
    transform: none; /* No hay transformación al pasar el ratón. */
    background-color: #ccc; /* Mantiene el fondo gris. */
    color: #666; /* Mantiene el texto gris. */
}
.btn-block {
    display: block; /* Ocupa todo el ancho disponible. */
    width: 100%; /* Ancho completo. */
    text-align: center; /* Texto centrado. */
}

/* Estilos del Encabezado (Header) */
.header {
    position: fixed; /* Fijo en la parte superior. */
    top: 0; /* Arriba del todo. */
    left: 0; /* A la izquierda del todo. */
    width: 100%; /* Ocupa todo el ancho. */
    height: var(--header-height); /* Altura definida por variable. */
    display: flex; /* Utiliza flexbox para la alineación de elementos. */
    justify-content: space-between; /* Espacia el logo y la navegación. */
    align-items: center; /* Centra verticalmente los elementos. */
    padding: 0 2.5rem; /* Relleno horizontal. */
    z-index: 1000; /* Asegura que esté por encima de otros elementos. */
    background-color: transparent; /* Fondo transparente por defecto. */
    transition: background-color 0.4s ease, box-shadow 0.4s ease, height 0.4s ease; /* Transiciones para scroll. */
}
.header.scrolled {
    height: calc(var(--header-height) - 1rem); /* Reduce la altura al hacer scroll. */
    background-color: rgba(255, 255, 255, 0.85); /* Fondo blanco semitransparente. */
    backdrop-filter: blur(12px); /* Efecto de desenfoque de fondo. */
    -webkit-backdrop-filter: blur(12px); /* Compatibilidad con Safari. */
    box-shadow: var(--shadow-soft); /* Sombra suave. */
}

/* Estilos del Logo */
.logo {
    display: flex; /* Asegura que sus hijos se muestren en línea. */
    flex-direction: row; /* Explícitamente asegura que estén uno al lado del otro. */
    align-items: center; /* Centrar verticalmente icono y texto. */
    gap: 0.75rem; /* Espacio entre el icono y el texto. */
    text-decoration: none; /* Sin subrayado. */
    transition: all 0.4s ease; /* Transición suave para todos los cambios. */
    will-change: transform, color, opacity; /* Sugerencia al navegador para optimizar animaciones. */
}
.logo-icon-container {
    position: relative; /* Contenedor para posicionar iconos. */
    width: 40px; /* Ancho del contenedor del icono. */
    height: 40px; /* Alto del contenedor del icono. */
    flex-shrink: 0; /* Evita que el icono se encoja en pantallas pequeñas. */
    transition: width 0.4s ease, height 0.4s ease; /* Transición para el tamaño del icono. */
    will-change: width, height; /* Sugerencia de optimización. */
}
.logo-icon {
    position: absolute; /* Posiciona el icono dentro de su contenedor. */
    top: 0; left: 0;
    width: 100%; height: 100%; /* Ocupa todo el contenedor. */
    object-fit: contain; /* Ajusta la imagen dentro del contenedor sin recortar. */
    transition: opacity 0.4s ease; /* Transición para la opacidad. */
    will-change: opacity; /* Sugerencia de optimización. */
}
.logo-icon-dark {
    opacity: 0; /* Icono oscuro oculto por defecto. */
    pointer-events: none; /* No interactuable cuando está oculto. */
}
.logo-text {
    font-size: 1.6rem; /* Tamaño de fuente del texto del logo. */
    font-weight: 700; /* Negrita. */
    color: var(--color-white); /* Color blanco. */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3); /* Sombra de texto para legibilidad. */
    line-height: 1.2; /* Altura de línea ligeramente mayor. */
    transition: color 0.4s ease, text-shadow 0.4s ease, font-size 0.4s ease; /* Transiciones. */
    will-change: color, text-shadow, font-size; /* Sugerencia de optimización. */
    flex-shrink: 0; /* MODIFICACIÓN: Evita que el texto se encoja en pantallas pequeñas. */
    white-space: nowrap; /* MODIFICACIÓN: Evita que el texto se rompa en varias líneas. */
}

/* MODIFICACIÓN: Estilos para el header cuando NO está scrolled (fondo transparente) */
.header .logo-icon-light {
    opacity: 1; /* Icono claro visible. */
}
.header .logo-icon-dark {
    opacity: 0; /* Icono oscuro oculto. */
}

/* MODIFICACIÓN: Estilos para el header cuando SÍ está scrolled (fondo blanco) */
.header.scrolled .logo-icon-container {
    width: 30px; /* Reduce el tamaño del contenedor del icono. */
    height: 30px;
}
.header.scrolled .logo-icon-light {
    opacity: 0; /* Oculta el icono claro. */
}
.header.scrolled .logo-icon-dark {
    opacity: 1; /* Muestra el icono oscuro. */
    pointer-events: auto; /* Hace el icono oscuro interactuable. */
}
.header.scrolled .logo-text {
    font-size: 1.4rem; /* Reduce el tamaño del texto del logo. */
    color: var(--color-dark); /* Cambia a color oscuro. */
    text-shadow: none; /* Elimina la sombra del texto. */
}

/* MODIFICACIÓN: Ajustes específicos para páginas sin Hero (ej. galería), donde el header empieza blanco */
/* Estos estilos fuerzan el header a ser "scrolled" en apariencia desde el inicio en ciertas páginas. */
.gallery-page .header .logo-icon-light {
    opacity: 0; /* Oculta el icono claro. */
}
.gallery-page .header .logo-icon-dark {
    opacity: 1; /* Muestra el icono oscuro. */
    pointer-events: auto; /* Lo hace interactuable. */
}
.gallery-page .header .logo-icon-container {
    width: 40px; /* Tamaño del icono. */
    height: 40px;
}
.gallery-page .header .logo-text {
    color: var(--color-dark); /* Color de texto oscuro. */
    text-shadow: none; /* Sin sombra. */
    font-size: 1.6rem; /* Tamaño de fuente. */
}

/* Y cuando se hace scroll en la página de galería (el tamaño del logo se reduce, pero el color no cambia) */
.gallery-page .header.scrolled .logo-icon-container {
    width: 30px; /* Reduce el tamaño del icono al hacer scroll. */
    height: 30px;
}
.gallery-page .header.scrolled .logo-text {
    font-size: 1.4rem; /* Reduce el tamaño del texto del logo al hacer scroll. */
}

/* Navegación (Nav) */
.nav-list {
    display: flex; /* Utiliza flexbox para alinear los ítems. */
    list-style: none; /* Elimina los puntos de lista. */
}
.nav-link {
    margin: 0 1.2rem; /* Margen horizontal entre enlaces. */
    text-decoration: none; /* Sin subrayado. */
    font-weight: 500; /* Grosor de fuente. */
    transition: color 0.3s ease; /* Transición suave para el color. */
    position: relative; /* Para el indicador de activa. */
    padding-bottom: 5px; /* Relleno inferior para la línea activa. */
}
/* Colores de los elementos del header cuando no hay scroll (fondo transparente). */
.header .logo, .header .nav-link {
    color: var(--color-white); /* Texto blanco. */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3); /* Sombra de texto para contraste. */
}
/* Color de la barra de hamburguesa cuando no hay scroll. */
.header .bar { background-color: var(--color-white); }
/* Colores de los elementos del header cuando se ha hecho scroll (fondo blanco). */
.header.scrolled .logo, .header.scrolled .nav-link {
    color: var(--color-dark); /* Texto oscuro. */
    text-shadow: none; /* Sin sombra. */
}
/* Color de la barra de hamburguesa cuando se ha hecho scroll. */
.header.scrolled .bar { background-color: var(--color-dark); }
/* Efecto hover para enlaces de navegación. */
.header .nav-link:hover { color: rgba(255, 255, 255, 0.8); }
.header.scrolled .nav-link:hover, .header.scrolled .nav-link.active { color: var(--color-primary); }
/* Estilo para el enlace de navegación activo. */
.nav-link.active::after {
    content: ''; /* Pseudo-elemento para la línea inferior. */
    position: absolute; bottom: 0; left: 0;
    width: 100%; height: 2px;
    transform: scaleX(1); /* La línea es visible por defecto si está activa. */
    background-color: var(--color-primary); /* Color de la línea. */
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); /* Transición para la línea. */
}
/* Color de la línea activa cuando el header no tiene scroll. */
.header:not(.scrolled) .nav-link.active::after { background-color: var(--color-white); }
/* Menú Hamburguesa (para móvil) */
.hamburger { display: none; cursor: pointer; } /* Oculto por defecto en escritorio, visible en móvil. */
.bar {
    display: block; /* Cada barra es un bloque. */
    width: 25px; height: 3px; /* Tamaño de las barras. */
    margin: 5px auto; /* Margen entre barras. */
    transition: all 0.3s ease-in-out; /* Transición para la animación de apertura/cierre. */
}

/* Slider de Héroe */
.hero-slider {
    position: relative; /* Para posicionar elementos internos. */
    width: 100%; height: 100vh; /* Ocupa todo el viewport. */
    cursor: grab; /* Cursor de arrastre. */
}
.hero-slider:active { cursor: grabbing; } /* Cursor al arrastrar. */
.slider-container {
    width: 100%; height: 100%;
    overflow: hidden; /* Oculta contenido que se desborda (slides fuera de vista). */
    position: relative;
}
.slider-wrapper {
    display: flex; /* Utiliza flexbox para los slides. */
    width: 100%; height: 100%;
}
.slide, .hero-subpage {
    flex: 0 0 100%; /* Cada slide ocupa el 100% del ancho del contenedor del slider. */
    width: 100%; height: 100%;
    background-size: cover; /* Cubre todo el espacio del slide. */
    background-position: center; /* Centra la imagen de fondo. */
    display: flex; align-items: center; justify-content: center; /* Centra el contenido. */
    text-align: center;
    color: var(--color-white);
    position: relative; /* Para el overlay. */
}
/* Overlay oscuro sobre las imágenes/videos de fondo del slider/héroe. */
.slide::before, .hero-subpage::before {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1; /* Por encima de la imagen/video, por debajo del contenido. */
    
    /* === OPCIÓN A: GRADIENTE MÁS PRONUNCIADO === */
    /* Oscuro arriba y abajo, un poco más oscuro en el centro */
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.7) 100%);

    /* === OPCIÓN B: GRADIENTE RADIAL (CENTRADO) === */
    /* Este es mi favorito. Crea una viñeta oscura alrededor del texto. */
    /* Descomenta esta línea y comenta la anterior para probarlo. */
    /* background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.75) 100%); */
}

.hero-subpage {
    position: relative;
    overflow: hidden;
}

.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.slide-content {
    position: relative;
    z-index: 2; /* Aumentamos el z-index para que esté sobre el overlay del slide */
    color: rgb(0, 0, 0);
    max-width: 800px; /* Limitamos el ancho para que no ocupe toda la pantalla */
    margin: 0 auto;
    padding: 2.5rem 3rem; /* Ajustamos el padding para el cuadro */

    /* === LA MAGIA ESTÁ AQUÍ === */
    /*background-color: rgba(255, 255, 255, 0.001); /* Un fondo oscuro semitransparente */
    
    /*border-radius: var(--border-radius-main); /* Usamos tu variable de borde redondeado */
    /*box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); /* Una sombra para darle profundidad */
    
    /* El efecto de desenfoque del fondo */
    /*backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px); /* Para compatibilidad con Safari */
}

.slide-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    color: var(--color-white);
    font-weight: 700;
    /* Sombra para el título */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.slide-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: var(--color-white);
    /* Sombra para el párrafo */
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.8);
}


/* Contenedor de Tarjetas (Plataformas) */
.cards-container {
    display: grid;
    /* Columnas autoajustables: mínimo 320px de ancho, se expanden a 1fr. */
    /* Se ajusta en el media query para pantallas más pequeñas. */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem; /* Espacio entre las tarjetas. */
    justify-content: center; /* Centra las tarjetas si no ocupan todo el ancho. */
}
.platform-card {
    background: var(--color-white);
    border-radius: var(--border-radius-main);
    box-shadow: var(--shadow-soft);
    overflow: hidden; /* Asegura que la imagen no se desborde del radio de borde. */
    transition: transform var(--transition-main), box-shadow var(--transition-main);
    display: flex;
    flex-direction: column; /* Contenido en columna. */
    position: relative; /* Para el badge de estado. */
}
.platform-card:hover {
    transform: translateY(-12px); /* Eleva la tarjeta al pasar el ratón. */
    box-shadow: var(--shadow-medium); /* Sombra más pronunciada. */
}
.platform-card-image {
    width: 100%;
    height: 220px; /* Altura fija para la imagen. */
    object-fit: cover; /* Ajusta la imagen sin distorsionarla. */
}
.platform-card-content {
    padding: 2rem 1.5rem 1.5rem;
    flex-grow: 1; /* Permite que el contenido ocupe el espacio disponible. */
    display: flex;
    flex-direction: column;
    text-align: left;
}
.platform-card-content h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.platform-card-origenes h3 { color: var(--color-origenes); }
.platform-card-raices h3 { color: var(--color-raices); }
.platform-card-esencias h3 {
    background: var(--gradient-esencias);
    -webkit-background-clip: text; /* Recorta el fondo al texto para navegadores WebKit. */
    background-clip: text; /* Recorta el fondo al texto. */
    color: transparent; /* Hace el texto transparente para que se vea el fondo. */
    font-weight: 900;
}
.platform-card-content p {
    font-size: 0.95rem;
    color: var(--color-text-light);
    flex-grow: 1; /* Permite que el párrafo ocupe el espacio disponible. */
    margin-bottom: 1.5rem;
}
.status-badge {
    position: absolute; top: 1rem; right: 1rem;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 3;
}
.status-badge.disponible { background-color: var(--color-primary); }
.status-badge.construccion { background-color: var(--color-accent); }
.status-badge.proximamente { background-color: #8E44AD; }

/* Contenedor de Planes */
.plans-container {
    display: grid;
    /* Columnas autoajustables: mínimo 320px de ancho, se expanden a 1fr. */
    /* Se ajusta en el media query para pantallas más pequeñas. */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    align-items: stretch; /* Asegura que todas las tarjetas tengan la misma altura. */
}
.plan-card {
    background: var(--color-white);
    border-radius: var(--border-radius-main);
    padding: 2.5rem 2rem;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
}
.plan-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-medium);
}
.plan-card.featured {
    border-color: var(--color-accent);
    transform: scale(1.05); /* Escala la tarjeta destacada. */
    box-shadow: 0 10px 30px rgba(255, 165, 0, 0.2);
    position: relative;
}
.plan-badge {
    font-size: 0.8rem; font-weight: 700;
    color: var(--color-dark);
    background: var(--color-accent);
    padding: 5px 15px;
    border-radius: 50px;
    display: inline-block;
    margin: -4rem auto 1.5rem auto; /* Posiciona la insignia fuera del padding. */
    position: relative;
}
.plan-card h3 { font-size: 1.5rem; color: var(--color-dark); margin-bottom: 0.5rem; }
.plan-description {
    color: var(--color-text-light);
    font-size: 0.95rem;
    min-height: 40px; /* Asegura un espacio mínimo para la descripción. */
    margin-bottom: 1.5rem;
}
.pricing-display { text-align: center; margin-bottom: 20px; }
.price-main {
    display: flex; justify-content: center; align-items: baseline;
    color: var(--color-primary);
    margin: 5px 0;
}
.price-main .currency { font-size: 1.8rem; font-weight: 600; margin-right: 5px; }
.price-main .amount { font-size: 3.5rem; font-weight: 900; line-height: 1; }
.price-main .period { font-size: 1.5rem; font-weight: 600; margin-left: 5px; }
.features-list {
    list-style: none;
    margin: 2rem 0;
    text-align: left;
    padding-left: 1rem;
    flex-grow: 1; /* Permite que la lista de características ocupe el espacio disponible. */
}
.features-list li { margin-bottom: 0.8rem; display: flex; align-items: flex-start; gap: 10px; }
.features-list li i { color: var(--color-primary); margin-top: 4px; }

/* Sección "Sobre Nosotros" */
.about-us-container {
    display: flex; /* Utiliza flexbox. */
    align-items: center; /* Centra verticalmente. */
    gap: 4rem; /* Espacio entre los elementos. */
}
.about-us-text { flex: 1; } /* El texto ocupa el espacio restante. */
.about-us-image { flex: 0 0 40%; } /* La imagen ocupa el 40% del ancho. */
.about-us-image img {
    width: 100%;
    border-radius: var(--border-radius-main);
    box-shadow: var(--shadow-medium);
}
.about-us-text h3 { margin-top: 1.5rem; color: var(--color-primary); }

/* Pie de Página (Footer) */
.footer {
    background-color: var(--footer-bg);
    color: var(--color-white);
    padding: 5rem 0 2.5rem;
}
.footer-container {
    display: grid;
    /* Columnas autoajustables: mínimo 220px de ancho. */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2.5rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid #3e524a;
}
.footer-col h3 {
    color: var(--color-accent);
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.footer-col p { color: #ccc; margin-bottom: 1rem; line-height: 1.8; }
.footer-col a { color: #ccc; text-decoration: none; transition: color 0.3s; }
.footer-col a:hover { color: var(--color-white); }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.75rem; }
.footer-col .logo {
    color: var(--color-white);
    margin-bottom: 1rem;
    display: inline-block;
    font-size: 1.8rem;
}
.newsletter-form { display: flex; margin-top: 1rem; }
.newsletter-form input {
    flex-grow: 1; /* Ocupa el espacio disponible. */
    border: 1px solid #55665f;
    background: transparent;
    padding: 12px;
    color: var(--color-white);
    border-radius: 8px 0 0 8px;
    outline: none;
}
.newsletter-form button {
    padding: 12px 18px;
    border: none;
    background: var(--color-accent);
    color: var(--color-dark);
    font-weight: 700;
    cursor: pointer;
    border-radius: 0 8px 8px 0;
    transition: background 0.3s;
}
.newsletter-form button:hover { background: #ffc94d; }
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en varias líneas. */
    gap: 1rem;
    padding-top: 2rem;
    font-size: 0.9rem;
    color: #aaa;
}
.footer-bottom .social-links a {
    display: inline-block;
    color: var(--color-white);
    margin: 0 0.75rem;
    font-size: 1.5rem;
    transition: color 0.3s, transform 0.3s;
}
.footer-bottom .social-links a:hover {
    color: var(--color-accent);
    transform: translateY(-3px);
}
.credits { color: var(--color-accent); font-style: italic; }

/* Botón y Menú Flotante de WhatsApp */
.whatsapp-container {
    position: fixed; /* Fijo en la pantalla. */
    bottom: 25px;
    right: 25px;
    z-index: 100;
}
.whatsapp-menu {
    position: absolute;
    bottom: 80px; /* Encima del botón flotante. */
    right: 0;
    width: calc(100vw - 50px); /* Ocupa casi todo el ancho de la ventana para móviles. */
    max-width: 280px; /* Ancho máximo para el menú en pantallas más grandes. */
    background-color: var(--color-white);
    border-radius: var(--border-radius-main);
    box-shadow: var(--shadow-medium);
    
    opacity: 0; /* Oculto por defecto. */
    visibility: hidden;
    transform: translateY(20px); /* Ligeramente desplazado hacia abajo. */
    transition: all 0.3s ease; /* Transición para mostrar/ocultar. */
}
.whatsapp-menu.show {
    opacity: 1; /* Visible. */
    visibility: visible;
    transform: translateY(0); /* Posición normal. */
}
.menu-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px;
    background-color: var(--color-dark);
    color: var(--color-white);
    border-radius: var(--border-radius-main) var(--border-radius-main) 0 0;
    font-weight: 700;
}
.close-menu {
    font-size: 24px; line-height: 1;
    cursor: pointer;
    transition: transform 0.2s;
}
.close-menu:hover { transform: scale(1.2); }
.menu-body {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.menu-option {
    display: flex; align-items: center;
    gap: 12px;
    padding: 12px;
    text-decoration: none;
    color: var(--color-dark);
    border-radius: 10px;
    transition: background-color 0.2s;
}
.menu-option:hover { background-color: var(--color-background-light); }
.menu-option i {
    color: var(--color-primary);
    width: 20px; text-align: center;
}
.whatsapp-flotante {
    width: 60px; height: 60px;
    background-color: var(--color-primary);
    color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.whatsapp-flotante:hover { transform: scale(1.1); }

/* Navegación con Submenú (Dropdown) */
.nav-item-dropdown { position: relative; }
/* El icono de flecha en el enlace */
.nav-link.has-submenu i {
    font-size: 0.7em;
    margin-left: 5px;
    transition: transform 0.3s;
}
/* El submenú oculto por defecto */
.submenu {
    list-style: none;
    padding: 10px 0;
    background-color: var(--color-white);
    box-shadow: var(--shadow-medium);
    border-radius: 10px;
    position: absolute;
    top: 100%; /* Debajo del enlace padre. */
    left: 50%; /* Centrado bajo el enlace padre. */
    transform: translateX(-50%); /* Ajuste para centrar. */
    min-width: 180px; /* Ancho mínimo. */
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    pointer-events: none; /* Evita que se pueda interactuar con él cuando está oculto. */
}
/* Mostrar submenú en hover en escritorio */
.nav-item-dropdown:hover .submenu {
    opacity: 1; visibility: visible;
    pointer-events: auto; /* Permite la interacción cuando es visible. */
}
/* Los enlaces dentro del submenú */
.submenu li a {
    display: block;
    padding: 10px 20px;
    color: var(--color-dark);
    text-decoration: none;
    transition: background-color 0.2s;
}
.submenu li a:hover { background-color: var(--color-background-light); }
/* En escritorio, la flecha no gira */
.nav-item-dropdown.open .nav-link.has-submenu i { transform: rotate(0deg); }
.nav-social-links { display: none; } /* Oculto en escritorio, visible en menú móvil. */

/* ================================================================ */
/* ===       MEDIA QUERIES PARA ADAPTAR A PANTALLAS MÓVILES     === */
/* ================================================================ */

/* Breakpoint para pantallas más pequeñas (generalmente tablets y móviles grandes) */
@media (max-width: 992px) {
    .gallery-item-wide { grid-column: span 1; } /* Desactiva el ancho doble en galería. */
    .footer-container { padding-bottom: 2rem; }
    .footer-bottom { flex-direction: column-reverse; gap: 1.5rem; } /* Apila elementos del footer. */
    /* MODIFICACIÓN: Ajuste de padding en secciones para móviles y tablets */
    .section { padding: 4rem 0; }

    /* ¡IMPORTANTE! MODIFICACIÓN DE LA MODIFICACIÓN: Estas reglas hacen que los contenedores se apilen en una sola columna */
    /* Aseguramos la especificidad si el problema persiste */
    .origenes-page .for-whom-container,
    .origenes-page .cta-dual-container,
    .raices-page .for-whom-container, /* Asumiendo que Raíces también tiene estos contenedores */
    .raices-page .cta-dual-container,
    .esencias-page .for-whom-container, /* Asumiendo que Esencias también tiene estos contenedores */
    .esencias-page .cta-dual-container {
        grid-template-columns: 1fr !important; /* Fuerza a una sola columna */
        gap: 2rem; /* Mantiene el gap original o ajusta según sea necesario */
    }

    /* MODIFICACIÓN: Ajustes adicionales para los contenidos de las cajas CTA y "For Whom"
       para asegurar que el texto se vea bien al apilarse. */
    .cta-box, .for-whom-column {
        padding: 2rem; /* Ajusta el padding para dar más espacio si es necesario */
        text-align: center; /* Centra el texto en las columnas apiladas */
    }
    .cta-box p {
        min-height: auto; /* Elimina la altura mínima fija para evitar espacios vacíos */
    }

    /* Ajustes específicos para el Hero de subpáginas en tablets */
    .hero-subpage .slide-content h1 {
        font-size: 2.8rem; /* Tamaño de título más apropiado para tablets */
    }
    .hero-subpage .slide-content p {
        font-size: 1.1rem; /* Tamaño de párrafo más apropiado para tablets */
    }
    .hero-buttons-container {
        flex-direction: column; /* Apila los botones en tablets */
        align-items: center; /* Centra los botones apilados */
        max-width: 300px; /* Limita el ancho del contenedor de botones */
        margin: 0 auto; /* Centra el contenedor de botones */
    }
    .hero-buttons-container .btn {
        width: 100%; /* Hace que los botones ocupen todo el ancho disponible */
        max-width: 250px; /* Ancho máximo para los botones apilados */
    }
    /* MODIFICACIÓN: Centrar subtítulo específico si está alineado a la izquierda en desktop */
    .section-subtitle.text-left {
        text-align: center !important; /* ¡Fuerza el centrado en móvil para esta clase! */
    }
}

/* Breakpoint principal para pantallas de móvil (menos de 768px) */
@media (max-width: 768px) {
    /* -- Ajustes Generales -- */
    .header { padding: 0 1rem; } /* Relleno horizontal más pequeño para el header. */
    .section { padding: 3rem 0; } /* Relleno vertical reducido para secciones en móvil. */
    .section-title { font-size: 2.2rem; } /* Reduce el tamaño del título principal de sección. */
    .section-subtitle { font-size: 1rem; margin-bottom: 2rem; } /* Reduce tamaño y margen del subtítulo. */
    
    /* MODIFICACIÓN: Ajustes más agresivos para el Hero de subpáginas en móviles */
    .hero-subpage .slide-content {
        padding: 2rem 1rem; /* Reduce aún más el padding del contenido del slide */
    }
    .hero-subpage .slide-content h1 {
        font-size: 2.2rem; /* Títulos de slide más pequeños */
    }
    .hero-subpage .slide-content p {
        font-size: 1rem; /* Párrafos de slide más pequeños */
    }
    .hero-buttons-container {
        gap: 0.8rem; /* Reduce el espacio entre botones apilados */
        max-width: 280px; /* Limita el ancho del contenedor de botones */
    }
    .hero-buttons-container .btn {
        padding: 12px 20px; /* Reduce el padding de los botones */
        font-size: 0.95rem; /* Ajusta el tamaño de fuente de los botones */
    }

    .about-us-container { flex-direction: column-reverse; gap: 2rem; } /* Apila la sección "Sobre Nosotros". */
    .full-gallery-container {
        /* Se ajusta a columnas más pequeñas para galería en móvil. */
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Reducido a 200px */
        grid-auto-rows: 150px; /* Reducida la altura de fila para elementos de galería */
    }
    .plan-card.featured { transform: scale(1); } /* Desactiva la escala en tarjetas destacadas. */
    .plan-card:hover { transform: translateY(-5px); } /* Reduce el efecto hover. */
    /* Las reglas para for-whom-container y cta-dual-container ya están en 992px y son suficientes */
    .testimonial-section blockquote { font-size: 1.1rem; } /* Reduce el tamaño del texto del testimonio. */

    /* -- Comportamiento del Menú Hamburguesa -- */
    .hamburger { display: block; z-index: 1001; } /* Muestra el icono de hamburguesa. */
    .hamburger.active .bar:nth-child(2) { opacity: 0; } /* Oculta la barra central. */
    .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); } /* Gira la barra superior. */
    .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Gira la barra inferior. */
    .header .hamburger.active .bar {
        background-color: var(--color-white) !important; /* Asegura el color de las barras al abrirse sobre el header transparente. */
    }
    .header.scrolled .hamburger.active .bar {
        background-color: var(--color-dark) !important; /* Asegura el color de las barras al abrirse sobre el header scrolled. */
    }

    /* -- Overlay para el Fondo del Menú -- */
    .menu-overlay {
        position: fixed; top: 0; left: 0;
        width: 100%; height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 998;
        opacity: 0; visibility: hidden;
        transition: opacity 0.4s, visibility 0.4s;
    }
    .menu-overlay.active { opacity: 1; visibility: visible; } /* Muestra el overlay. */

    /* -- Panel del Menú Lateral -- */
    .nav-list {
        position: fixed;
        top: 0;
        right: -100%; /* Oculto a la derecha por defecto. */
        width: 80%; /* Ancho del panel del menú. */
        max-width: 320px; /* Ancho máximo para que no sea demasiado grande en tablets. */
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        background-color: var(--color-white); /* Fondo blanco para el panel. */
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
        padding-top: 5rem;
        z-index: 999;
        transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        overflow-y: auto; /* Permite scroll si el contenido es largo. */
    }
    .nav-list.active { right: 0; } /* Muestra el panel deslizándose desde la derecha. */

    /* -- Estilos de los Ítems del Menú -- */
    .nav-list li {
        text-align: left;
        border-bottom: 1px solid var(--border-color);
        width: 100%;
    }
    .nav-list li:first-child { border-top: 1px solid var(--border-color); }
    .nav-list li:hover { background-color: #f8f8f8; } /* Efecto hover para toda la fila. */

    /* -- Enlaces Principales -- */
    .nav-list .nav-link {
        display: flex; justify-content: space-between; align-items: center;
        height: 55px; /* Altura para facilitar la interacción táctil. */
        padding: 0 1.5rem;
        font-size: 1.1rem;
        font-weight: 500;
        color: var(--color-dark) !important; /* Forzamos el color oscuro. */
        text-shadow: none !important; /* Quitamos cualquier sombra de texto. */
    }
    .nav-list .nav-link.active {
        color: var(--color-accent) !important;
        font-weight: 700;
    }

    /* -- Submenú de Plataformas (en móvil, se expande verticalmente) -- */
    .submenu {
        position: static; /* No flotante, se integra en el flujo. */
        transform: none;
        box-shadow: none;
        background-color: #f6f9f7; /* Gris claro sutil. */
        width: 100%;
        padding: 0;
        max-height: 0; /* Oculto por defecto. */
        overflow: hidden;
        transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
    }
    .submenu.open {
        max-height: 500px; /* Se expande. */
        padding: 0.5rem 0;
    }
    .submenu li a {
        font-size: 1rem;
        color: var(--color-text-light);
        padding: 0.7rem 1.5rem 0.7rem 2.5rem; /* Relleno ajustado para submenú. */
    }

    /* -- Flecha del Submenú -- */
    .nav-item-dropdown.open .nav-link.has-submenu i {
        transform: rotate(180deg); /* Gira la flecha al abrir el submenú. */
    }
    
    /* -- Iconos Sociales en el Menú (visibles en móvil) -- */
    .nav-social-links {
        display: flex;
        justify-content: center; /* Centra los iconos. */
        align-items: center;
        
        padding: 1.5rem 0;
        gap: 2rem;
        
        border-bottom: none;
        margin-top: auto; /* Empuja los enlaces sociales al final del menú. */
        background-color: transparent !important;
    }
    .nav-social-links a {
        color: var(--color-dark);
        font-size: 1.6rem;
        transition: color 0.3s, transform 0.3s;
    }
    .nav-social-links a:hover {
        color: var(--color-primary);
        transform: scale(1.1);
    }
    /* Ajuste el tamaño del texto del logo para pantallas más pequeñas.
       Si el `white-space: nowrap;` sigue causando problemas con textos excesivamente largos,
       puedes añadir `overflow: hidden; text-overflow: ellipsis;` aquí para truncarlo. */
    .logo-text {
        font-size: 1.2rem; /* Ajusta el tamaño del texto del logo para pantallas más pequeñas */
        /* overflow: hidden; */
        /* text-overflow: ellipsis; */
    }
    /* Ajuste para los minmax de las tarjetas si 320px es demasiado grande para los móviles más pequeños. */
    .cards-container, .plans-container {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Reducir a 280px */
        gap: 1.5rem; /* Reduce el espacio entre tarjetas */
    }
    /* MODIFICACIÓN: Ajuste de padding en cta-box para móvil */
    .cta-box {
        padding: 1.8rem 1.5rem; /* Reduce el padding interno de las cajas CTA */
    }
    /* .cta-box p {
        min-height: auto;
        margin-bottom: 1.5rem;
    } */ /* Ya aplicado genéricamente arriba en 992px y es más amplio */
    #cta-origenes {
        padding: 5rem 0; /* Reduce el padding vertical de la sección CTA */
    }
} /* Fin @media (max-width: 768px) */

/* MODIFICACIÓN: Añadir un breakpoint para teléfonos muy pequeños (menos de 480px) */
@media (max-width: 480px) {
    .header { padding: 0 0.8rem; } /* Relleno aún más pequeño para el header */
    .logo-icon-container {
        width: 35px; /* Reduce ligeramente el tamaño del icono del logo */
        height: 35px;
    }
    .logo-text { font-size: 1rem; } /* Reduce aún más el texto del logo */
    
    /* MODIFICACIÓN: Ajustes aún más agresivos para el Hero de subpáginas en teléfonos pequeños */
    .hero-subpage .slide-content h1 {
        font-size: 1.8rem; /* Títulos de slide más pequeños */
    }
    .hero-subpage .slide-content p {
        font-size: 0.9rem; /* Párrafos de slide más pequeños */
    }
    .hero-buttons-container {
        gap: 0.6rem; /* Reduce el espacio entre botones apilados */
        max-width: 250px; /* Limita el ancho del contenedor de botones */
    }
    .hero-buttons-container .btn {
        padding: 10px 18px; /* Reduce el padding de los botones */
        font-size: 0.85rem; /* Ajusta el tamaño de fuente de los botones */
    }

    .section-title { font-size: 1.8rem; } /* Títulos de sección más pequeños */
    .btn { padding: 12px 24px; font-size: 0.9rem; } /* Reduce el tamaño de los botones */
    .cards-container, .plans-container {
        grid-template-columns: 1fr; /* Una sola columna en pantallas muy pequeñas */
        gap: 1rem;
    }
    .platform-card-image { height: 180px; } /* Reduce la altura de las imágenes de las tarjetas */
    .platform-card-content h3 { font-size: 1.3rem; }
    .footer-container {
        grid-template-columns: 1fr; /* Una sola columna para el footer */
        gap: 1.5rem;
    }
    .whatsapp-container {
        bottom: 15px; /* Mueve el botón de WhatsApp un poco más arriba */
        right: 15px; /* y más a la izquierda */
    }
    .whatsapp-menu {
        width: calc(100vw - 30px); /* Ajusta el ancho para el nuevo padding del contenedor */
        max-width: none; /* Asegura que el width del calc() tenga prioridad */
        right: 0;
    }
    .cta-box {
        padding: 1.5rem 1rem; /* Padding más pequeño para las cajas CTA */
    }
    .for-whom-column {
        padding: 1.5rem 1rem; /* Ajusta padding para columnas apiladas */
    }
}


/* Efecto Fade-in para elementos que aparecen en scroll */
.fade-in {
    opacity: 0; /* Oculto por defecto. */
    transform: translateY(30px); /* Desplazado hacia abajo. */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Transición para aparecer. */
}
.fade-in.visible {
    opacity: 1; /* Visible. */
    transform: translateY(0); /* Posición normal. */
}

/* Estilos específicos para la página de galería */
.gallery-page main {
    padding-top: var(--header-height); /* Empuja el contenido hacia abajo para evitar que quede bajo el header fijo. */
}
.gallery-page .section:first-child {
    padding-top: 3rem; /* Ajusta el padding de la primera sección para que no sea excesivo. */
}
.full-gallery-container {
    display: grid;
    gap: 1rem;
    /* Columnas autoajustables: mínimo 300px, se expanden. */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-rows: 250px; /* Altura de fila automática para las imágenes. */
}
.gallery-item {
    position: relative; overflow: hidden;
    border-radius: 10px;
    box-shadow: var(--shadow-soft);
    cursor: pointer;
}
.gallery-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease, filter 0.4s ease;
}
.gallery-item:hover img {
    transform: scale(1.05); /* Zoom en la imagen al pasar el ratón. */
    filter: brightness(0.8); /* Oscurece la imagen. */
}
.gallery-item .caption {
    position: absolute; bottom: 0; left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); /* Gradiente oscuro. */
    color: var(--color-white);
    padding: 2rem 1rem 1rem;
    transform: translateY(100%); /* Oculto debajo de la tarjeta. */
    transition: transform 0.4s ease;
}
.gallery-item:hover .caption { transform: translateY(0); } /* Muestra el caption al pasar el ratón. */
.caption h4 { font-size: 1.2rem; margin: 0; }
.gallery-item-tall { grid-row: span 2; } /* Ocupa dos filas. */
.gallery-item-wide { grid-column: span 2; } /* Ocupa dos columnas. */
.gallery-item.hidden { display: none; } /* Oculta ítems de galería. */

/* Lightbox para imágenes de galería */
.lightbox {
    position: fixed; z-index: 2000;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.9);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.lightbox.active { opacity: 1; visibility: visible; }
.lightbox-content {
    max-width: 90%; max-height: 80%; /* Asegura que la imagen quepa en la pantalla. */
    object-fit: contain;
}
.close-lightbox {
    position: absolute; top: 20px; right: 35px;
    color: #fff; font-size: 40px; font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}
.close-lightbox:hover { color: var(--color-accent); }
#lightbox-caption {
    color: #ccc; text-align: center;
    padding: 15px; font-size: 1.1rem;
    position: absolute; bottom: 5%;
    width: 80%;
}

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 3 columnas en desktop, se ajusta */
    gap: 2.5rem;
    margin-top: 3rem;
    text-align: center;
}

.contact-item {
    background-color: var(--color-white);
    border-radius: var(--border-radius-main);
    box-shadow: var(--shadow-soft);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el contenido verticalmente */
    justify-content: center;
    transition: transform var(--transition-main), box-shadow var(--transition-main);
}

.contact-item:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-medium);
}

.contact-item i {
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}
/* Opcional: Un color diferente para el ícono de WhatsApp si lo deseas */
.contact-item .fa-whatsapp {
    color: #25D366; /* Color de marca de WhatsApp */
}


.contact-item h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    color: var(--color-dark);
    word-wrap: break-word;
}

.contact-item p {
    font-size: 1rem;
    color: var(--color-text-light);
    margin-bottom: 1rem;
    word-wrap: break-word;
}
.contact-item a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}
.contact-item a:hover {
    color: var(--color-accent);
}

/* Botón pequeño opcional para ver en mapa */
.btn-small {
    padding: 8px 18px;
    font-size: 0.9rem;
    border-radius: 20px;
}

/* Estilos responsivos para el grid de contacto */
@media (max-width: 768px) {
    .contact-info-grid {
        grid-template-columns: 1fr; /* Apila a una columna en móviles */
        gap: 1.5rem;
    }
}

/* Contenedor del mapa incrustado (si lo usas) */
.map-container {
    margin-top: 3rem;
    border-radius: var(--border-radius-main);
    overflow: hidden; /* Asegura que el iframe respete el border-radius */
    box-shadow: var(--shadow-medium);
}
.map-container iframe {
    display: block; /* Elimina espacio extra debajo del iframe */
}

/* Hero para subpáginas con video (ajustes generales) */
.hero-subpage {
    position: relative;
    overflow: hidden;
    height: 80vh;
}
#hero-video {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); /* Centra el video perfectamente. */
    min-width: 100%; min-height: 100%;
    width: auto; height: auto;
    z-index: -1;
    object-fit: cover;
}

/* Tarjetas de Características */
.feature-card {
    background-color: var(--color-white);
    border-radius: var(--border-radius-main);
    padding: 2rem;
    text-align: center;
    box-shadow: var(--shadow-soft);
}
.feature-card i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
}
.feature-card h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }

/* Estilos específicos por página/plataforma */
.origenes-page .feature-card i { color: var(--color-origenes); }
.raices-page .feature-card i { color: var(--color-raices); }
.esencias-page .hero-subpage {
    position: relative;
    overflow: hidden;
    height: 80vh;
}
.esencias-page .hero-subpage::before {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Overlay específico para Esencias. */
    z-index: 0;
}
.esencias-page .section-title, .esencias-page .feature-card i {
    background: var(--gradient-esencias);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 900;
}
.esencias-page .feature-card {
    border-left: 4px solid;
    border-image-source: var(--gradient-esencias); /* Borde con gradiente. */
    border-image-slice: 1;
    text-align: left;
}
.esencias-page .feature-card i { font-size: 2rem; margin-bottom: 1rem; }

/* Página "En Construcción" */
.construction-page .hero-subpage .slide-content .status-badge {
    position: static; /* No flotante. */
    margin-bottom: 2rem;
    transform: scale(1.2);
}

/* Formulario de Interés */
.interest-form {
    max-width: 600px; margin: 3rem auto 0 auto;
    background: var(--color-white);
    padding: 2.5rem;
    border-radius: var(--border-radius-main);
    box-shadow: var(--shadow-medium);
}
.form-group { margin-bottom: 1.5rem; }
.form-group label {
    display: block; margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--color-text-light);
}
.form-group input, .form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: var(--font-main);
    font-size: 1rem;
}
.form-group input:focus, .form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.1);
}

/* ================================================================ */
/* ===   ESTILO DE HEADER PARA PÁGINAS SIN HERO (GALERÍA, ETC.) === */
/* ================================================================ */
/* Aplicamos los estilos de .scrolled directamente al header en estas páginas */
.gallery-page .header {
    height: var(--header-height);
    background-color: var(--color-white); /* Un blanco sólido se verá mejor */
    box-shadow: var(--shadow-soft);
    border-bottom: 1px solid var(--border-color); /* Añade una línea sutil de separación */
}
/* Y nos aseguramos de que el texto sea oscuro */
.gallery-page .header .logo,
.gallery-page .header .nav-link {
    color: var(--color-dark);
    text-shadow: none;
}
/* Y las barras de la hamburguesa también */
.gallery-page .header .bar {
    background-color: var(--color-dark);
}

/* ================================================================ */
/* ===       REDISEÑO DEL CTA DE ORÍGENES (VERSIÓN PREMIUM)     === */
/* ================================================================ */
#cta-origenes {
    background-image: url('https://images.pexels.com/photos/2036857/pexels-photo-2036857.jpeg');
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 8rem 0;
    overflow: hidden;
}
/* Overlay más oscuro y de marca */
#cta-origenes::before {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(26, 46, 38, 0.85); /* Derivado de --color-dark */
    z-index: 1;
}
#cta-origenes .container {
    position: relative;
    z-index: 2;
    text-align: center;
}
/* Título y subtítulo */
#cta-origenes .section-title,
#cta-origenes .section-subtitle {
    color: var(--color-white);
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}
/* Contenedor de las dos tarjetas */
.cta-dual-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 3rem;
    text-align: left;
}
/* Estilo de las tarjetas de "vidrio" */
.cta-box {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius-main);
    padding: 2.5rem;
    transition: all var(--transition-main);
    
    /* La magia del efecto vidrio */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.cta-box:hover {
    transform: translateY(-8px);
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
}
/* Contenido dentro de las tarjetas */
.cta-box h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--color-white);
    word-wrap: break-word; /* MODIFICACIÓN: Asegura que los títulos largos se ajusten */
}
.cta-box p {
    color: #e0e0e0;
    margin-bottom: 2rem;
    min-height: 50px;
    word-wrap: break-word; /* MODIFICACIÓN: Asegura que los párrafos largos se ajusten */
}
/* Estilos de los botones dentro de las tarjetas */
.cta-box .btn-primary {
    background-color: var(--color-accent);
    color: var(--color-dark);
    font-weight: 700;
}
.cta-box .btn-primary:hover {
    background-color: var(--color-white);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}
.cta-box .btn-secondary {
    border-color: rgba(255, 255, 255, 0.8);
    color: var(--color-white);
}
.cta-box .btn-secondary:hover {
    background-color: var(--color-white);
    color: var(--color-dark); /* MODIFICACIÓN: Color de texto oscuro para consistencia */
    border-color: var(--color-white);
}


/* ================================================================ */
/* ===           AJUSTES ESPECÍFICOS PARA PORTADAS              === */
/* ================================================================ */
/* Botones en el héroe de la página Orígenes */
.origenes-page .hero-subpage .btn-primary {
    background-color: var(--color-accent);
    color: var(--color-dark);
    font-weight: 700;
}
.origenes-page .hero-subpage .btn-primary:hover {
    background-color: var(--color-white);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}
.origenes-page .hero-subpage .btn-secondary {
    border-color: rgba(255, 255, 255, 0.8);
    color: var(--color-white);
}
.origenes-page .hero-subpage .btn-secondary:hover {
    background-color: var(--color-white);
    color: var(--color-dark);
    border-color: var(--color-white);
}
/* Botones en el slide de inicio */
#inicio .slide-content .btn-primary {
    background-color: var(--color-accent);
    color: var(--color-dark);
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
#inicio .slide-content .btn-primary:hover {
    background-color: var(--color-white);
    color: var(--color-dark);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}

/* Estilos para la navegación con puntos del slider */
.slider-dots {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.75rem;
    z-index: 10;
}
.slider-dots .dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.slider-dots .dot.active {
    background-color: var(--color-white);
    transform: scale(1.2);
}

/* ================================================================ */
/* ===     ORÍGENES - COMPONENTES ADICIONALES DE PÁGINA         === */
/* ================================================================ */

/* Sección "Para Quién" */
.for-whom-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 900px;
    margin: 0 auto;
}
.for-whom-column { text-align: center; }

.for-whom-column i {
    font-size: 2.5rem;
    color: var(--color-origenes);
    margin-bottom: 1rem;
}
.for-whom-column h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    word-wrap: break-word; /* MODIFICACIÓN: Asegura que los títulos se ajusten */
}

/* Sección de Testimonio */
.testimonial-section {
    background-color: var(--color-background-light);
    text-align: center;
}
.testimonial-image {
    width: 100px; height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 2rem;
    border: 4px solid var(--color-white);
    box-shadow: var(--shadow-medium);
}
.testimonial-section blockquote {
    font-size: 1.4rem; font-style: italic;
    max-width: 700px;
    margin: 0 auto 1.5rem auto;
    line-height: 1.8;
    color: var(--color-dark);
    word-wrap: break-word; /* MODIFICACIÓN: Asegura que el texto se ajuste */
}
.testimonial-section cite {
    font-weight: 700;
    font-style: normal;
    color: var(--color-origenes);
}