/*
Theme Name: L'oricay Theme
Author: DU@lM1nd & Manus
Description: Tema personalizado para el sitio web de L'oricay.
Version: 1.0
*/

/* CSS Reset - Asegura consistencia entre navegadores */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Mejora el manejo de anchos y altos */
}

body {
    font-family: Arial, sans-serif;
    color: #333;
    line-height: 1.6;
    background-color: #fff; /* Aseguramos que el fondo de toda la página sea blanco */
    /* Se ha eliminado 'overflow-x: hidden;' para permitir que el panel del acordeón
       en la página de producto se expanda más allá de los límites de su contenedor
       sin ser recortado. Esto es esencial para el efecto "burbuja" o "popover". */
}

/* Aplicar overflow-x: hidden solo en páginas que NO son de producto individual */
body:not(.single-product) {
    overflow-x: hidden;
}

.site-header {
    background-color: #fff;
    padding: 0 20px 10px; /* Eliminamos el padding superior para que el logo esté más arriba */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0; /* Eliminamos el espacio entre el logo y el menú */
    margin-top: -30px; /* Desplaza toda la cabecera aún más hacia arriba */
}

.site-header .logo img {
    width: 200px;
    height: 200px;
    object-fit: contain; /* Evita que la imagen se deforme */
    display: block; /* Elimina el espacio extra debajo de la imagen (comportamiento inline) */
}

nav {
    /* El fondo verde y el padding se eliminan. El espaciado ahora lo gestiona el header. */
    text-align: center;
    position: relative; /* Ayuda a controlar el apilamiento sobre la imagen */
    margin-top: -20px; /* Sube el menú para que se superponga a la parte inferior del logo */
    margin-bottom: 20px; /* Añade espacio entre el menú y la sección hero */
}

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

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    text-decoration: none;
    color: #357632; /* Corregido al verde corporativo solicitado */
    font-weight: bold;
    padding: 5px 10px;
    transition: background-color 0.3s ease;
}

nav ul li a:hover {
    background-color: #a0d0a0;
    border-radius: 5px;
}

main {
    width: 90%;
    max-width: 1200px;
    margin: 20px auto;
    /* Eliminamos el fondo y la sombra para que el contenido se integre con el fondo de la página */
}

section {
    padding: 40px;
}

.hidden-section {
    display: none;
}

.hero-section {
    /* La imagen de fondo se define aquí */
    background-image: url('assets/images/hero-background.webp');
    background-size: cover; /* Ajusta la imagen para cubrir el área */
    background-position: center top; /* Prioriza mostrar la parte superior de la imagen */
    color: white;
    padding: 100px 5% 50px; /* Aumentamos el padding superior para bajar el texto sin márgenes negativos */
    position: relative;
    display: flex;
    align-items: flex-start; /* Alineamos el contenido arriba para un control preciso */
    justify-content: flex-start; /* Alinea el contenido a la izquierda */
    flex-wrap: wrap;
    min-height: 550px;
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: left; /* Alinea el texto a la izquierda */
    /* background-color: rgba(0, 0, 0, 0.3); */ /* Eliminado según solicitud */
    padding: 20px;
    border-radius: 8px;
}

.hero-content h1 {
    font-family: 'Cinzel', serif; /* Aplicamos la fuente Cinzel */
    font-size: 3em;
    /* Ya no se necesita el margen negativo, el padding superior de .hero-section controla la posición */
    margin-bottom: 10px;
    line-height: 1.1; /* Reducimos el espacio entre líneas */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Sombra para legibilidad sobre fondos variables */
}

.hero-content h2, .hero-content p {
    font-size: 1.8em;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Sombra para legibilidad */
    margin-top: 20px; /* Ajustamos el espacio para que se vea como antes */
    margin-bottom: 40px;
}

.button { /* Estilo global para botones de acción */
    background-color: #336633;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    text-decoration: none; /* Quitamos el subrayado del enlace */
    transition: background-color 0.3s ease;
    display: inline-block; /* Buena práctica para enlaces estilizados como botones */
}

.button:hover {
    background-color: #2a522a;
}

.image-placeholder {
    background-color: #ccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 0.9em;
    text-align: center;
    border-radius: 8px;
    margin: 10px;
}

.image-placeholder p {
    font-size: 0.9em;
    color: #666;
}

.placeholder-icon {
    font-size: 3em;
    line-height: 1;
    margin-bottom: 15px;
    opacity: 0.7;
}

.small-image-placeholder {
    width: 250px;
    height: 200px;
}

.medium-image-placeholder {
    width: 400px;
    height: 300px;
}

.blog-image-placeholder {
    width: 100%;
    height: 250px;
    margin-bottom: 15px;
}

.video-placeholder {
    background-color: #ccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 0.9em;
    text-align: center;
    border-radius: 8px;
    width: 640px;
    height: 360px;
    max-width: 100%;
    margin: 10px;
}

.section-block {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 40px 20px;
}

.section-block.reverse {
    flex-direction: row-reverse;
}

.section-block .text-content {
    flex: 1;
    padding: 20px;
    min-width: 300px;
}

/* Estilos para el título del bloque 13 (Sostenibilidad) - Ahora es un H1 con subtítulo */
.section-block.reverse .text-content h1 {
    font-family: 'Cinzel', serif;
    text-align: center;
    margin-bottom: 20px;
    font-size: 2.2em; /* Tamaño para la parte principal en negrita */
    line-height: 1.2;
    font-weight: 400; /* El h1 no es bold, solo el strong dentro de él */
}

.section-block.reverse .text-content h1 .subtitle {
    display: block; /* Para que ocupe una nueva línea */
    font-size: 0.6em; /* Tamaño más pequeño, relativo al h1 */
    font-weight: 400; /* Aseguramos que no esté en negrita */
    margin-top: 15px; /* Espacio vertical que simula los "dos espacios" */
}

.section-block .image-placeholder, .section-block .video-placeholder {
    flex-shrink: 0;
}

.section-block.full-width {
    display: block;
    text-align: center;
}

.section-block.full-width .text-content {
    max-width: 800px;
    margin: 0 auto;
}

.section-block ul {
    list-style: disc;
    margin-left: 20px;
}

.section-block li {
    margin-bottom: 10px;
}

.text-center {
    text-align: center;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 500px;
    margin: 20px auto;
}

.contact-form label {
    font-weight: bold;
    margin-top: 10px;
}

.contact-form input, .contact-form textarea {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: calc(100% - 22px); /* Adjust for padding and border */
}

.contact-form button {
    padding: 10px 20px;
    background-color: #336633;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

.contact-form button:hover {
    background-color: #2a522a;
}

.social-icons a {
    display: inline-block;
    margin: 0 10px;
    color: #336633;
    text-decoration: none;
    font-weight: bold;
}

.blog-post {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #eee;
}

.blog-post h2 {
    margin-top: 10px;
    font-size: 1.8em;
    color: #336633;
}

.blog-post .post-date {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 10px;
}

.blog-post .read-more {
    display: inline-block;
    margin-top: 10px;
    color: #336633;
    text-decoration: none;
    font-weight: bold;
}

footer {
    background-color: #336633;
    color: white;
    padding: 40px 20px;
    text-align: center;
}

footer h2 {
    color: white;
    margin-bottom: 15px;
}

footer p {
    margin-bottom: 10px;
}

footer .footer-links a {
    color: white;
    margin: 0 10px;
    text-decoration: none;
    transition: text-decoration 0.3s ease;
}

footer .footer-links a:hover {
    text-decoration: underline;
}

/*
* Estilos del Nuevo Footer
*/

footer {
    background-color: #357632;
    color: white;
    padding: 5px 0; /* Eliminamos el padding horizontal para que llegue hasta los bordes */
    text-align: left; /* Sobrescribimos el text-align: center anterior */
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Alineamos los elementos al final (abajo) por defecto */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px; /* Movemos el padding aquí desde el footer */
    flex-wrap: wrap; /* Para que sea responsivo en móviles */
}

.footer-column {
    flex: 1; /* Permite que las columnas crezcan y se encojan */
    padding: 5px 10px; /* Reducimos el padding horizontal para acercar más a los bordes */
    min-width: 280px; /* Ancho mínimo antes de que se apilen */
}

.footer-left {
    /* Se ha eliminado la inversión de la columna para un orden natural. */
    display: flex;
    flex-direction: column;
    text-align: left; /* Alineación explícita a la izquierda en escritorio */
}

.footer-column p {
    margin: 0 0 8px 0; /* Reducimos el margen inferior */
    font-size: 0.9em;
}

.footer-left .social-icons {
    /* Añadimos un margen inferior para separar los iconos del texto que ahora estará debajo. */
    /* Convertimos en un contenedor flex para reordenar el título y los iconos. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 15px;
}

.footer-left .social-icons a {
    color: white;
    text-decoration: none;
    font-size: 1.5em;
    margin-right: 15px;
}

.footer-center {
    text-align: center;
    align-self: flex-start; /* Alineamos esta columna específica al inicio (arriba) */
}

.footer-logo {
    width: 250px; /* Reducimos el tamaño del logo para bajar la altura general */
    height: auto; /* Mantiene la proporción */
}

.footer-tagline {
    color: white;
    margin: 0;
    font-size: 16px;
    font-family: 'Cinzel', serif;
}

.footer-right {
    text-align: right; /* Alineación explícita a la derecha en escritorio */
    padding-right: 0; /* Eliminamos el padding derecho para que llegue al borde */
}

.footer-right a {
    color: white;
    text-decoration: none;
    display: block; /* Hace que cada enlace ocupe una línea */
    margin-bottom: 8px; /* Reducimos el margen inferior */
    font-size: 0.9em;
}

.footer-right a:hover {
    text-decoration: underline;
}
/*
* Ajuste de Fuente para el Menú
*/
nav ul li a {
    font-family: 'Cinzel', serif;
}

/*
* --- Sección de Características con Grid Interactivo ---
*/

.features-section {
    --primary-green: #1c3b29;
    --secondary-green: #336633;
    --highlight-green: #a0d0a0;
    --light-green: #e0ffe0;
    --off-white: #f9f9f9;
    --transition: all 0.4s cubic-bezier(0.33, 1, 0.68, 1);
    --shadow: 0 8px 20px rgba(28, 59, 41, 0.15);
    padding: 40px 20px;
}

.features-header {
    text-align: center;
    margin-bottom: 40px;
}

.features-title {
    font-size: 32px;
    color: var(--primary-green);
    margin-bottom: 5px;
    position: relative;
    display: inline-block;
    font-family: 'Cinzel', serif;
}

.features-title::after {
    content: '';
    position: absolute;
    width: 50%;
    height: 3px;
    background: var(--secondary-green);
    bottom: -10px;
    left: 25%;
    border-radius: 2px;
}

.features-subheading {
    font-size: 16px;
    color: #666;
    margin-top: 20px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Forzamos 2 columnas */
    gap: 38px;
    max-width: 715px; /* Aumentado un 30% desde 550px para hacer las imágenes más grandes */
    margin: 0 auto; /* Centramos el grid dentro de la sección */
    width: 100%;
}

.feature-card {
    position: relative;
    aspect-ratio: 1 / 1; /* Garantiza que la tarjeta sea siempre un cuadrado perfecto */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transform: translateY(0);
    transition: var(--transition);
    cursor: pointer;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 25px rgba(28, 59, 41, 0.25);
}

.feature-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra el espacio sin deformarse */
    transition: var(--transition);
}

.feature-card:hover img {
    transform: scale(1.1);
}

.card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(28, 59, 41, 0.9) 0%, transparent 100%);
    padding: 15px; /* Ajustamos el padding para el nuevo tamaño */
    color: white;
    /* El overlay empieza con una altura fija para mostrar solo el título */
    height: 70px; /* Reducimos la altura del overlay para que sea más sutil */
    transition: height 0.4s cubic-bezier(0.33, 1, 0.68, 1);
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Mantiene el contenido alineado al fondo */
    overflow: hidden; /* Oculta la descripción que no cabe */
}

.feature-card:hover .card-overlay {
    /* Al hacer hover, el overlay se expande a toda la altura */
    height: 100%;
}

.card-title {
    font-family: 'Cinzel', serif;
    font-size: 16px; /* Reducimos el tamaño del título para que sea proporcional */
    font-weight: 700;
    margin-bottom: 5px; /* Ajustamos el margen inferior */
    /* El título es siempre visible y no se encoge */
    flex-shrink: 0;
}

.card-description {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255,255,255,0.9);
    /* La descripción está oculta por defecto */
    opacity: 0;
    max-height: 0; /* La ocultamos y quitamos su espacio */
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.4s ease;
}

.feature-card:hover .card-description {
    /* Al hacer hover, la descripción aparece con una animación suave */
    opacity: 1;
    max-height: 150px; /* Le damos espacio para que aparezca */
    transition-delay: 0.1s; /* Aparece un poco después de que el overlay sube */
}

@media (max-width: 600px) {
    .features-grid {
        grid-template-columns: 1fr; /* Una sola columna en móviles */
        gap: 20px;
    }
}

/*
* --- Sección CTA con fondo completo ---
*/
.section-block-fullwidth-bg {
    position: relative; /* Necesario para el posicionamiento */

    /* Rompemos el contenedor 'main' para ocupar el ancho completo */
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    margin-top: 80px; /* Margen superior aumentado para separar del bloque anterior */
    /* margin-bottom se elimina para que delimite con la sección de animación */
    background-size: cover; /* Ajusta la imagen para cubrir el área */
    background-position: center center;
    /* --- ESTA ES LA LÍNEA QUE CREA EL EFECTO PARALLAX --- */
    background-attachment: fixed;
    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px 20px; /* Padding para el contenido interno en pantallas pequeñas */
    color: white;
}

.section-block-fullwidth-bg .text-content {
    /* Anulamos algunos estilos heredados de .section-block .text-content */
    flex: 0 1 auto;
    min-width: unset;
    padding: 40px;
    max-width: 960px; /* Ancho aumentado para que el texto ocupe 3 líneas */
}

.section-block-fullwidth-bg h2 {
    font-family: 'Cinzel', serif; /* Aplicamos Cinzel a todos los títulos de parallax */
    font-size: 2.5em; /* Un tamaño que funciona bien para textos largos */
    font-weight: 400; /* Cinzel se ve elegante con peso normal */
    line-height: 1.4;
    margin-bottom: 25px; /* Espacio para el párrafo de abajo */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}

/* Si el h2 es el único elemento, no necesita margen inferior */
.section-block-fullwidth-bg h2:only-child {
    margin-bottom: 0;
}

.section-block-fullwidth-bg p {
    font-size: 1.2em;
    line-height: 1.6;
    margin-bottom: 30px; /* Espacio antes del botón */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

/* Estilo para el primer bloque parallax (solo con H2) */
.parallax-section-1 {
    background-image: url('assets/images/cta-background.jpg');
    height: 350px; /* Altura reducida ya que solo contiene un título */
}

/* Estilo para el segundo bloque parallax */
.parallax-section-2 {
    background-image: url('assets/images/fondoparalex2.jpg');
    height: 400px; /* Altura solicitada en el paso anterior */
    /* Aumentamos el margen inferior para separar del bloque 13 */
    margin-bottom: 80px;
}

/*
* --- Estilos para el Parallax Dinámico (Bloque 15) ---
* Este método usa JS para mover el fondo a una velocidad diferente al scroll.
*/
.parallax-container {
    position: relative;
    height: 400px;
    overflow: hidden; /* Esencial para recortar el fondo que se mueve */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;

    /* Rompemos el contenedor 'main' para ocupar el ancho completo */
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    margin-bottom: -20px; /* Para que se pegue al footer */
}

.parallax-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150%; /* Más alto que el contenedor para tener espacio para moverse */
    background-image: url('assets/images/fondoparalex3.jpg'); /* Imagen de fondo */
    background-size: cover; /* Ajusta la imagen para cubrir el área */
    background-position: center bottom; /* Ancla la imagen abajo inicialmente por defecto */
    z-index: 1;
    /* El JS aplicará 'transform: translateY()' aquí */
}

.parallax-content {
    position: relative; /* Se asegura que el contenido esté por encima del fondo */
    z-index: 2;
    padding: 20px;
}

.parallax-content h2 {
    font-family: 'Cinzel', serif;
    font-size: 2.5em;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 25px; /* Espacio para el botón de abajo */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}

.parallax-content .button {
    position: relative;
    top: 85px; /* Bajamos el botón 100px desde su posición original */
}

/*
* --- Sección de Animación de Texto (Slide & Fade Horizontal) ---
*/
.animated-text-section {
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
    height: 100px;
    background-color: #357632;
    color: #f0f0f0;
    font-family: 'Cinzel', serif;
    font-size: 1.8em;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
}

.contenedor-principal {
    display: flex;
    align-items: center;
}

.caja-texto {
    /* Esta clase ahora es un contenedor simple, la mayoría de estilos vienen del padre */
    white-space: nowrap;
}

/* Espaciado para el texto estático izquierdo */
#contenedor-texto1 > span {
    padding-right: 0.25em;
}

#contenedor-palabra {
    /* Contenedor para la palabra que se anima */
    width: 0; /* Comienza contraído, el JS lo expandirá */
    overflow: hidden; /* Oculta el contenido hasta que el contenedor tenga ancho */
    /* border: 1px solid black; */ /* BORDE DE DEPURACIÓN: para ver el tamaño del contenedor */
    transition: width 0.5s ease-in-out; /* Anima el cambio de ancho */
}

#contenido-palabra {
    /* La palabra en sí, con un peso mayor para destacarla */
    font-weight: 600;
}

/* Espaciado para el texto estático derecho */
#contenedor-texto2 > span {
    padding-left: 0.25em;
}

/*
* --- Nueva Sección de Carrusel de Tarjetas ---
*/
.loricay-carousel-section {
    --card-width: 350px; /* Ancho de cada tarjeta */
    --body-padding: 5vw; /* Espacio lateral para que los botones no queden pegados al borde */

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 0; /* Espaciado superior e inferior reducido a la mitad */
    overflow: hidden; /* Previene cualquier desbordamiento inesperado */

    /* Ocupa el ancho completo de la ventana */
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
}

.loricay-carousel {
    display: flex;
    list-style: none; /* Quitamos los puntos de la lista ul */
    padding: 0;
    
    /* Configuración del carrusel */
    display: grid;
    gap: 2rem;
    grid-auto-flow: column;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    scroll-behavior: smooth;
    cursor: grab; /* Cursor para indicar que se puede arrastrar */
    cursor: -webkit-grab;
    
    /* "Rompe" el contenedor para ocupar el ancho de la ventana */
    width: 100dvw;
    /* Empuja el carrusel hacia la izquierda para alinearlo con el borde de la pantalla */
    margin-left: calc(-1 * (50vw - 50%));
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);

    /* Oculta la barra de scroll */
    scrollbar-width: none; /* Firefox */
}

.loricay-carousel::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
}

/* Estilo cuando el usuario está arrastrando */
.loricay-carousel.grabbing {
    cursor: grabbing;
    cursor: -webkit-grabbing;
    scroll-behavior: auto; /* Anula el scroll suave para un arrastre directo */
    user-select: none; /* Evita que el texto se seleccione al arrastrar */
    -webkit-user-select: none;
    -moz-user-select: none;
}

/* --- ESTILOS PARA LOS BOTONES DE NAVEGACIÓN DEL CARRUSEL --- */

.carousel-nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 50%;
    width: 3.5rem;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    color: #1c3b29;
    padding-bottom: 5px; /* Ajuste visual para centrar el caracter '‹' */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.25s ease;
}

.carousel-nav-button.prev {
    left: calc(var(--body-padding) / 2);
}

.carousel-nav-button.next {
    right: calc(var(--body-padding) / 2);
}

.carousel-nav-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.carousel-nav-button:not(:disabled):hover {
    background-color: #f0f0f0;
    transform: translateY(-50%) scale(1.05);
}

/* La primera tarjeta tiene un margen para centrarla mejor al inicio */
.loricay-carousel li:first-child {
    margin-left: var(--body-padding);
}

/* La última tarjeta tiene un margen para poder centrarla al final */
.loricay-carousel li:last-child {
    margin-right: var(--body-padding);
}

.loricay-card {
    width: var(--card-width);
    position: relative;
    overflow: hidden;
    scroll-snap-align: center;
    container-type: inline-size; /* Permite queries basadas en el tamaño del contenedor */
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(28, 59, 41, 0.1);
    /* Forzamos la aceleración por hardware en las tarjetas para un scroll más fluido,
       especialmente durante el arrastre. */
    transform: translateZ(0);
}

.loricay-card img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block; /* Elimina espacio extra debajo de la imagen */
}

.loricay-card .meta {
    position: absolute;
    bottom: 0;
    width: calc(100% - 2rem);
    transform: translateY(calc(100% - 4.5rem)); /* Muestra solo el título por defecto */
    background: rgba(28, 59, 41, 0.9); /* Verde oscuro de la marca */
    color: white;
    padding: 1rem;
    transition: transform 0.5s ease;
}

/* Cuando la tarjeta está centrada en el carrusel, el texto sube */
@container (min-width: 349px) {
    .loricay-card .meta {
        transform: translateY(0);
    }
}

/* Fallback para navegadores que no soportan @container o para interacción con el ratón */
.loricay-card:hover .meta {
    transform: translateY(0);
}

.loricay-card .meta .desc {
    line-height: 1.5;
    font-weight: 300;
}

.loricay-card .meta h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
}

/*
* --- Nueva Sección de Etiquetas ---
*/
.etiquetas-section {
    padding: 40px 20px; /* Espaciado vertical y horizontal */
    background-color: #fff; /* Fondo blanco para que se integre */
}

.etiquetas-container {
    display: flex; /* Pone los elementos en línea */
    justify-content: center; /* Centra los logos horizontalmente */
    align-items: center; /* Alinea los logos verticalmente */
    gap: 70px; /* Espacio aumentado entre cada logo */
    flex-wrap: nowrap; /* Asegura que los elementos no salten de línea */
    max-width: 800px; /* Un ancho máximo para el contenedor */
    margin: 0 auto; /* Centra el contenedor en la sección */
    overflow-x: auto; /* Permite el desplazamiento horizontal si el contenido es más ancho */
    padding-bottom: 10px; /* Añade un poco de espacio por si el scrollbar es visible */
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
    scrollbar-width: none; /* Oculta la barra de scroll en Firefox */
}

.etiquetas-container::-webkit-scrollbar {
    display: none; /* Oculta la barra de scroll en Chrome, Safari y Opera */
}
.etiqueta-item img {
    width: 150px; /* Aumentado un 50% */
    height: 150px; /* Aumentado un 50% */
    object-fit: contain; /* Asegura que la imagen se vea completa sin deformarse */
}

/*
* --- Nueva Sección de Reseñas de Google ---
*/
.google-reviews-section {
    padding: 60px 0; /* Padding vertical, el horizontal se gestiona dentro */
    text-align: center;
    overflow: hidden; /* Previene cualquier desbordamiento */
}

.google-reviews-section h2 {
    font-family: 'Cinzel', serif;
    font-size: 2em; /* Ligeramente más pequeño */
    margin-bottom: 30px; /* Menos espacio inferior */
    padding: 0 20px; /* Asegura que el título tenga padding en móviles */
    color: #1c3b29;
}

.reviews-carousel-wrapper {
    position: relative;
    max-width: 840px; /* Reducido para un look más compacto */
    margin: 0 auto;
}

#google-reviews-container {
    max-width: 750px; /* Reducido para un look más compacto */
    margin: 0 auto;
    text-align: left;
    /* Convertimos el contenedor en una fila horizontal desplazable */
    display: flex;
    gap: 15px; /* Espacio reducido entre las tarjetas */
    overflow-x: auto; /* Habilita el scroll horizontal */
    scroll-snap-type: x mandatory; /* Efecto de anclaje al deslizar */
    padding: 20px; /* Espacio interno para que las tarjetas no se peguen a los bordes */
    
    /* Ocultamos la barra de scroll para un look más limpio */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE y Edge */
}

#google-reviews-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.review {
    /* Definimos el tamaño y comportamiento de cada tarjeta */
    flex: 0 0 280px; /* Ancho de tarjeta reducido */
    scroll-snap-align: start; /* Se alinea al inicio al hacer snap */
    
    /* Estilos de la tarjeta */
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px; /* Padding reducido */
    box-shadow: 0 5px 15px rgba(0,0,0,0.07);
    background-color: #fff;
    position: relative; /* Necesario para posicionar el logo de Google */
}

/* Logo de Google en la esquina de las tarjetas de reseña */
.review:not(.review-cta-card):not(.review-see-more-card)::after {
    content: '';
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'%3E%3C/path%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'%3E%3C/path%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'%3E%3C/path%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'%3E%3C/path%3E%3Cpath fill='none' d='M0 0h48v48H0z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.review-cta-card {
    background: linear-gradient(135deg, #f0fff0, #e0ffe0); /* Gradiente sutil con los verdes de la marca */
    border-color: #a0d0a0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.review-cta-card h3 {
    font-family: 'Cinzel', serif;
    color: #1c3b29;
    font-size: 1.4em; /* Fuente más pequeña */
    margin-bottom: 12px;
}

.review-cta-card p {
    color: #336633;
    margin-bottom: 20px;
    font-size: 1em;
    line-height: 1.5;
}

.review-see-more-card {
    background: linear-gradient(135deg, #f5f5f5, #e8e8e8); /* Gradiente gris claro sutil */
    border-color: #ccc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.review-see-more-card h3 {
    font-family: 'Cinzel', serif;
    color: #333;
    font-size: 1.4em; /* Fuente más pequeña */
    margin-bottom: 12px;
}

.review-see-more-card p {
    color: #555;
    margin-bottom: 20px;
    font-size: 1em;
    line-height: 1.5;
}

.review-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.review-header img {
    border-radius: 50%;
    width: 45px; /* Imagen de perfil más pequeña */
    height: 45px;
    margin-right: 12px;
    border: 2px solid #f0f0f0;
}

.review-author {
    font-weight : bold;
    color: #333;
}

.review-rating {
    color: #fbbc05; /* Color dorado de las estrellas de Google */
    font-size: 1.1em; /* Estrellas más pequeñas */
}

.review p {
    color: #555;
    line-height: 1.6;
}

.review-nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: white;
    border: 2px solid #e0e0e0;
    border-radius: 50%;
    width: 40px; /* Botones más pequeños */
    height: 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8em; /* Flecha más pequeña */
    color: #1c3b29;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}

.review-nav-button:hover:not(:disabled) {
    background-color: #f0f0f0;
    transform: translateY(-50%) scale(1.05);
}

.review-nav-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

#review-prev { left: -15px; } /* Botones más cerca del carrusel */
#review-next { right: -15px; }

/*
* --- Nueva Sección de Título "Palabras de Expertos" ---
*/
.expert-words-section {
    /* Se elimina el espaciado superior para que esté más cerca de la sección anterior.
       El espaciado inferior es 0 para que el siguiente bloque controle la distancia. */
    padding: 0 20px;
    text-align: center;
}

.expert-words-section h2 {
    font-family: 'Cinzel', serif;
    font-size: 2.2em;
    color: #1c3b29;
    margin: 0; /* El espaciado lo controla el padding de la sección */
}

/*
* --- Nueva Sección de Videos de Expertos (Reels) ---
*/
.expert-videos-section {
    display: flex;
    justify-content: center; /* Centra el grupo de videos */
    gap: 40px; /* Espacio aumentado para videos más grandes */
    padding: 40px 20px;
    flex-wrap: wrap; 
    /* Se elimina el fondo y el comportamiento de ancho completo */
}

.expert-video-item {
    flex: 1;
    max-width: 287px; /* Ancho aumentado un 30% */
    min-width: 239px; /* Ancho mínimo aumentado un 30% */
    text-align: center;
}

.video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16; /* Proporción vertical de reel (más moderno y claro) */
    border-radius: 0; /* Eliminamos los bordes redondeados */
    overflow: hidden; /* Asegura que el iframe respete el borde redondeado */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    margin-bottom: 15px;
    cursor: pointer; /* Indica que el área es interactiva */
}

.video-cover-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cubre el área sin deformar la imagen */
    z-index: 2; /* Por encima del iframe */
    transition: opacity 0.4s ease;
}

.play-button-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3; /* Por encima de la imagen de portada */
    width: 78px; /* Aumentado un 30% */
    height: 78px; /* Aumentado un 30% */
    background-color: rgba(28, 59, 41, 0.7); /* Verde oscuro semitransparente */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none; /* El botón no intercepta clics, pasan a la imagen */
    transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.4s ease; /* Añadimos la transición de opacidad */
}

/* Triángulo de "Play" dentro del botón */
.play-button-overlay::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 0 16px 26px; /* Triángulo aumentado un 30% */
    border-color: transparent transparent transparent white;
    margin-left: 4px; /* Ajuste para centrar el triángulo visualmente */
}

.video-wrapper:hover .play-button-overlay {
    background-color: rgba(28, 59, 41, 0.9);
    transform: translate(-50%, -50%) scale(1.1);
}

/* --- ESTILOS PARA LA REPRODUCCIÓN DEL VIDEO --- */
.video-wrapper.is-playing .video-cover-image,
.video-wrapper.is-playing .play-button-overlay {
    opacity: 0;
    pointer-events: none; /* Asegura que no se pueda interactuar con ellos una vez ocultos */
}

.video-wrapper.is-playing iframe {
    z-index: 5; /* Pone el iframe por encima de todo lo demás dentro del wrapper */
}
/* --- FIN DE ESTILOS PARA LA REPRODUCCIÓN --- */

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 1; /* Aseguramos que esté debajo de la portada */
}

.video-caption {
    /* Cambiamos el color a oscuro para que sea visible sobre fondo blanco */
    color: #1c3b29;
    font-size: 1.1em; /* Ligeramente más grande para que sea proporcional */
    font-family: 'Cinzel', serif;
    font-weight: 400;
}

/*
* --- Estilos para Video en Bloque de Contenido (Bloque 13) ---
*/
.section-video-container {
    flex-basis: 45%; /* Ocupa un poco menos de la mitad del espacio */
    max-width: 640px; /* Un ancho máximo razonable para un video 16:9 */
    min-width: 300px; /* Ancho mínimo antes de que se rompa el layout */
    padding: 0 20px; /* Espaciado horizontal para que no se pegue al texto */
    flex-shrink: 0; /* Evita que se encoja */
}

.section-video-container .video-wrapper {
    aspect-ratio: 16 / 9; /* Proporción 16:9 solicitada */
    margin-bottom: 0; /* Anulamos el margen que tenía de la sección de expertos */
}

/* Ajuste para la vista en móvil, donde los bloques se apilan */
@media (max-width: 768px) {
    .section-video-container {
        flex-basis: 100%; /* Ocupa todo el ancho */
        max-width: 100%;
        padding: 0; /* Sin padding horizontal en móvil */
        margin-bottom: 20px; /* Espacio entre el video y el texto de abajo */
    }
}

/*
* --- Nueva Imagen Divisoria de Ancho Completo ---
*/
.fullwidth-image-divider {
    position: relative;
    width: 100vw;
    left: 50%;
    margin-left: -50vw;

    /* Altura responsive con un máximo */
    height: 400px; /* Altura fija solicitada */
    /* Añadimos un color de fondo como fallback y overflow para contener el pseudo-elemento */
    background-color: #f9f9f9; /* Un color de fondo claro del tema */
    /* Añadimos flex para centrar el contenido */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px; /* Padding aumentado para dar más margen al texto */
    overflow: hidden;
}

.fullwidth-image-divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('assets/images/fondocortevideos.jpg');
    background-size: cover; /* Ajusta la imagen para cubrir el área */
    background-position: center center;
    /* --- ESTA ES LA LÍNEA QUE CREA EL EFECTO PARALLAX --- */
    background-attachment: fixed;
    background-repeat: no-repeat;
    /* La opacidad del 20% solicitada */
    opacity: 0.4;
}

/* Nuevo contenedor para el texto y botón */
.divider-content {
    position: relative; /* Para asegurar que esté por encima del ::before */
    z-index: 2;
    text-align: center;
    color: #1c3b29; /* Usamos el verde oscuro para que contraste bien con el fondo claro */
    max-width: 980px; /* Aumentamos el ancho para que el texto quepa en dos líneas */
}

.divider-content h2 {
    font-family: 'Cinzel', serif;
    font-size: 2em; /* Tamaño adecuado para el texto */
    line-height: 1.4;
    margin-bottom: 0; /* Eliminamos el margen inferior ya que no hay botón */
    font-weight: 400; /* Un peso normal para Cinzel se ve elegante */
}

@media (max-width: 768px) {
    .divider-content h2 {
        font-size: 1.5em;
    }
}
/*
* --- Carrusel de Logos Infinito ---
*/
@keyframes scroll-logos {
    0% { transform: translateX(0); }
    /* Anima el desplazamiento de la mitad de los logos (la parte original de 6) */
    100% { transform: translateX(calc(-300px * 13)); } 
}

.logo-carousel-slider {
    /* El fondo de la sección ya es #f9f9f9, así que el blanco del carrusel contrasta bien */
    background: white;
    height: 420px; /* Altura aumentada para imágenes más grandes */
    margin: 30px auto 0 auto; /* Eliminamos el margen inferior para juntarlo con las reseñas */
    overflow: hidden;
    position: relative;
    width: 960px;
    max-width: 95%; /* Para que no se pegue a los bordes en pantallas más pequeñas */
    /* Se eliminó el efecto de difuminado lateral (pseudo-elementos ::before y ::after). */
}

.logo-carousel-slider .slide-track {
    /* La animación es continua y lineal */
    animation: scroll-logos 110s linear infinite;
    display: flex;
    /* El ancho es el doble de los logos originales (6 logos * 2 = 12), con el nuevo ancho */
    width: calc(300px * 26);
}

/* Pausar la animación al pasar el ratón por encima */
.logo-carousel-slider:hover .slide-track {
    animation-play-state: paused;
}

.logo-carousel-slider .slide {
    height: 420px; /* Igual a la altura del slider */
    width: 300px; /* Ancho aumentado para imágenes más grandes */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px; /* Espacio interno para que los logos no toquen los bordes */
    position: relative; /* Necesario para que z-index funcione correctamente en el hover */
}

.logo-carousel-slider .slide:hover {
    z-index: 10; /* Pone el logo por encima de los demás al pasar el ratón */
}

.logo-carousel-slider .slide img {
    max-width: 100%;
    height: auto;
    max-height: 400px; /* Altura máxima aumentada para las imágenes */
    object-fit: contain; /* Mantiene la proporción de la imagen */
    transition: transform 0.3s ease;
    /* Truco para mejorar la nitidez en transformaciones (scale) */
    backface-visibility: hidden;
    transform: scale(1) translateZ(0); /* Estado inicial para la GPU */
}

/* El efecto de zoom ahora se gestionará con JavaScript para evitar el recorte.
   La regla :hover se elimina para que no interfiera. */

/* --- Estilos para el efecto Pop-Out del carrusel de logos --- */
#logo-popout-container {
    position: fixed; /* Se fija a la ventana para superponerse a todo */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* El contenedor no debe interceptar clics */
    z-index: 9999; /* Un z-index muy alto para estar por encima de todo */
}

#logo-popout-container .popout-clone {
    position: absolute; /* Los clones se posicionan absolutamente dentro del contenedor */
    transition: transform 0.3s ease, opacity 0.3s ease;
    max-width: none !important; /* Anulamos cualquier max-width heredado */
    pointer-events: none; /* Los clones tampoco deben ser interactivos */
}


.logo-carousel-nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3; /* Por encima del gradiente (z-index: 2) */
    background-color: rgba(255, 255, 255, 0.8); /* Ligeramente transparente */
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8em;
    color: #333;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

.logo-carousel-nav-button:hover {
    background-color: white;
    transform: translateY(-50%) scale(1.1);
}

#logo-carousel-prev { left: 15px; }
#logo-carousel-next { right: 15px; }

/*
* --- Nueva Sección de Tarjetas en Círculo Estáticas ---
*/
.circle-cards-section {
    padding: 80px 20px 40px; /* Aumentamos el padding superior para compensar la eliminación del título */
    background-color: #f9f9f9; /* Un fondo suave para diferenciar la sección */
    text-align: center;
    overflow: hidden; /* Para contener los elementos posicionados */
}

.circle-cards-container {
    position: relative;
    width: 100%;
    max-width: 900px; /* Ancho aumentado para el nuevo layout */
    aspect-ratio: 1.2 / 0.8; /* Hacemos el contenedor más ancho para que el semicírculo sirva de margen */
    margin: 40px auto 0;
}

/* Los círculos de fondo, adaptados del código de ejemplo */
.circle-cards-container::before,
.circle-cards-container::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: #c0f0c0; /* Usamos un verde más notable del tema */
    left: calc(50% - 150px); /* Desplazado 100px a la izquierda */
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.circle-cards-container::before {
    width: 66%;
    padding-bottom: 66%; /* Mantener el aspect ratio */
    opacity: 0.5;
}

.circle-cards-container::after {
    width: 40%;
    padding-bottom: 40%; /* Mantener el aspect ratio */
    opacity: 0.5;
}

.circle-image-container {
    position: absolute;
    /* Posicionamos la imagen en el mismo centro que los círculos de fondo */
    left: calc(50% - 150px); 
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1; /* Lo ponemos por encima de los círculos de fondo (z-index: 0) */
    
    /* Ajustamos el tamaño para que coincida con el círculo interior (::after) */
    /* El contenedor padre tiene max-width: 900px, y el círculo ::after tiene width: 40% -> 360px */
    width: 360px; 
    height: 360px; /* Hacemos que sea un cuadrado para poder hacerlo círculo */

    /* Convertimos el contenedor en un círculo y ocultamos el excedente */
    border-radius: 50%;
    overflow: hidden;

    pointer-events: none; /* Para que no interfiera con el hover de las tarjetas */
}

.circle-image-container img {
    width: 100%; /* La imagen debe cubrir todo el contenedor circular */
    height: 100%;
    object-fit: cover; /* Esto asegura que la imagen llene el espacio sin deformarse, recortando el excedente */
}

.curved-text-container {
    position: absolute;
    /* Posicionamos el SVG en el mismo centro que los círculos y la imagen */
    left: calc(50% - 150px); 
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg); /* Rotamos el contenedor para centrar el texto en 135° */
    z-index: 2; /* Por encima de la imagen (1) y los círculos (0), pero debajo de las tarjetas (3) */
    
    /* El tamaño debe ser proporcional al viewBox del SVG y al tamaño de los círculos */
    /* El círculo exterior (::before) tiene width: 66% de 900px -> 594px */
    width: 594px; 
    height: 594px;
    
    pointer-events: none; /* Para que no interfiera con el hover de las tarjetas */
}

.curved-text-container text {
    font-family: 'Cinzel', serif;
    font-size: 25px; /* Tamaño de la fuente aumentado al 200% */
    font-weight: 700; /* Hacemos la fuente más gruesa */
    fill: #1c3b29; /* Color verde oscuro del tema */
    text-transform: uppercase; /* Todo en mayúsculas */
    letter-spacing: 2px; /* Espaciado reducido para que las letras estén más juntas */
}

.circle-card {
    position: absolute;
    z-index: 3; /* Por encima del texto curvo (z-index: 2) */
    width: 42%; /* Más anchas */
    max-width: 345px; /* Límite de anchura aumentado en 5px */
    padding: 15px 25px; /* Menos altas (padding vertical reducido) */
    background: #FFFFFF;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0px 16px 32px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    font-family: 'Arial', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #535062;
    text-align: left;
    /* Se eliminó la transición y el efecto hover según solicitud */
}

.circle-card-title {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4;
    color: #1c3b29; /* Verde oscuro del tema */
    margin-bottom: 10px;
    display: block;
}

/* Posicionamiento de las 3 tarjetas en el semicírculo derecho */
.circle-card-1 {
    top: 5%;
    left: 52%;
    transform: none; /* Anulamos transformaciones previas */
}

.circle-card-2 {
    top: 50%;
    right: 2%;
    transform: translateY(-50%);
    /* Anulamos posicionamiento previo */
    bottom: auto;
    left: auto;
}

.circle-card-3 {
    bottom: 5%;
    left: 52%;
    right: auto; /* Anulamos posicionamiento previo */
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .circle-cards-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: static;
        aspect-ratio: auto;
        gap: 30px;
    }

    .circle-card {
        position: static;
        width: 90%;
        max-width: 400px;
    }

    .circle-card-1,
    .circle-card-2,
    .circle-card-3 {
        transform: none;
    }

    .circle-cards-container::before,
    .circle-cards-container::after {
        display: none;
    }

    .circle-image-container {
        display: none; /* Ocultamos también la imagen en móvil */
    }

    .curved-text-container {
        display: none; /* Ocultamos el texto curvo en móvil */
    }
}

/*
* --- Nueva Sección de Formulario de Registro (L'ORICLUB) ---
*/

.signup-section {
    padding: 60px 20px;
    background-color: #fff; /* Fondo blanco para que se integre con el resto de la página */
    margin-top: 50px; /* Aumentamos el margen superior para duplicar la separación con el bloque 13 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.signup-container {
    display: flex;
    max-width: 900px;
    width: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    overflow: hidden;
    /* Requisito: altura máxima de 500px */
    height: 500px;
    max-height: 500px;
    background-color: #fff;
}

.left-container {
    /* Requisito: ratio 17:22 con altura de 500px. Ancho = (17/22) * 500px = 386px */
    width: 386px;
    flex-shrink: 0; /* Previene que el contenedor se encoja */
    padding: 0; /* Eliminamos el padding para que la imagen ocupe todo el espacio */
    display: flex;
    flex-direction: column;
}

.form-image-wrapper {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.form-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.right-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column; /* Organiza el contenido verticalmente */
    padding: 25px 40px; /* Padding vertical reducido */
    overflow-y: auto; /* Permite scroll si el contenido del formulario es muy alto */
}

.right-container h1 {
    font-family: 'Cinzel', serif;
    font-size: 22px; /* Tamaño de fuente más compacto */
    font-weight: 600;
    color: #1c3b29;
    margin-bottom: 12px; /* Espaciado aún más reducido */
    line-height: 1.2;
}

.right-container p {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 25px; /* Espacio aumentado entre el texto y el primer campo */
}

.right-container .set {
    display: flex;
    justify-content: space-between;
    gap: 15px; /* Espacio entre campos reducido */
    margin-bottom: 10px; /* Espaciado entre grupos aún más reducido */
}

.form-group { flex: 1; }
.form-group.form-group-full { flex-basis: 100%; }

.form-group label {
    display: block;
    margin-bottom: 3px; /* Espaciado mínimo */
    font-weight: bold;
    color: #333;
    font-size: 13px; /* Fuente de etiqueta más pequeña */
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="number"],
.birthday-selects select {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    height: 34px; /* Altura de campos más compacta */
    padding: 0 10px;
    font-size: 13px; /* Fuente de campo más pequeña */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background-color: #fff;
}

/* Estilos para los nuevos selectores de cumpleaños */
.birthday-selects {
    display: flex;
    gap: 10px;
}

.birthday-selects select {
    cursor: pointer;
    -webkit-appearance: none; /* Quita la flecha por defecto en Webkit */
    -moz-appearance: none; /* Quita la flecha por defecto en Firefox */
    appearance: none;
    /* Flecha personalizada con SVG para un look limpio */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23336633%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.4-5.4-13z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: .65em auto;
}

.birthday-selects select:disabled {
    color: #ccc; /* O el color que desees para indicar "deshabilitado" */
    /* Estilo para el selector habilitado */
    color: #555;
}

.birthday-selects select:enabled {
    padding-right: 30px; /* Espacio para la flecha */
}

/* Oculta las flechas de los campos numéricos en Webkit */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

/* Oculta las flechas de los campos numéricos en Firefox */
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* --- Estilos para la Validación de Formularios --- */
.error-message {
    color: #d93025; /* Rojo de error de Google */
    font-size: 12px;
    margin-top: 4px;
    height: 0;
    opacity: 0;
    transition: height 0.2s ease-out, opacity 0.2s ease-out;
    overflow: hidden;
}

.error-message.visible {
    height: 15px; /* Altura suficiente para una línea de texto */
    opacity: 1;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus {
    outline: none;
    border-color: #336633;
}

/* Estilo para campos inválidos */
.form-group input.invalid,
.birthday-selects select.invalid,
.radio-container.invalid {
    border-color: #d93025 !important; /* Rojo de error */
}

.radio-container {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    padding: 2px; /* Padding mínimo para el contenedor */
    justify-content: space-around;
}

.radio-container input[type="radio"] { display: none; }

.radio-container label {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 2px 0; /* Padding vertical mínimo */
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    flex-grow: 1;
    font-weight: normal !important;
    margin-bottom: 0 !important;
    color: #555 !important;
}

.radio-container input[type="radio"]:checked + label {
    background: #e0ffe0;
    border-color: #a0d0a0;
    color: #1c3b29 !important;
    font-weight: bold !important;
}

.right-container .set:last-child {
    margin-top: auto; /* Empuja el botón hacia abajo desde el contenido anterior */
    margin-bottom: auto; /* Añade margen abajo para centrarlo en el espacio disponible */
    justify-content: center; /* Centra el botón */
}

.form-button {
    border: 1px solid #ccc;
    height: 34px; /* Altura compacta para coincidir con los campos */
    line-height: 32px; /* Ajustamos line-height */
    padding: 0 30px;
    border-radius: 17px; /* Ajustamos border-radius */
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

#signup-next {
    background: #336633;
    border-color: #336633;
    color: #fff;
}

#signup-next:hover {
    background: #1c3b29;
    border-color: #1c3b29;
}

@media (max-width: 900px) {
    .signup-container {
        flex-direction: column;
        /* Permitimos que el contenedor crezca para mostrar todo el contenido en móvil */
        height: auto;
        max-height: none;
    }

    .left-container {
        width: 100%;
        height: auto; /* Permitimos que la imagen se muestre completa */
        flex-shrink: 0; /* Aseguramos que no se encoja */
        padding: 0; /* Eliminamos el padding para que la imagen ocupe todo el ancho */
    }
    .right-container {
        padding: 30px 30px 15px; /* Ajustamos el padding para móviles */
        /* Eliminamos el scroll interno para que el formulario se expanda */
        overflow-y: visible;
    }
}

@media (max-width: 500px) {
    .right-container .set {
        flex-direction: column;
        gap: 15px;
    }

    .radio-container {
        /* Aseguramos que los botones no salten de línea en móvil */
        flex-wrap: nowrap;
    }
}

/* =============================================== */
/*               ESTILOS RESPONSIVOS               */
/* =============================================== */

@media (max-width: 768px) {

    /* --- Bloque 1: Hero Section --- */
    .hero-section {
        justify-content: center; /* Centra el contenido horizontalmente */
        padding: 60px 20px;      /* Reduce el padding para móviles */
        min-height: 450px;       /* Ajusta la altura mínima para móviles */
        background-position: right center; /* Enfoca la derecha en móviles */
    }
    .hero-content h1 {
        font-size: 2.4rem; /* Tamaño de fuente más adecuado para móviles (rem para accesibilidad) */
    }
    .hero-content h2, .hero-content p {
        font-size: 1.2rem; /* Tamaño de fuente más adecuado para móviles */
    }

    .hero-content {
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    /* --- Bloques de Contenido Genéricos --- */
    .hero-image-placeholder {
        width: 90%;
        height: 250px;
    }
    .section-block {
        flex-direction: column;
    }
    .section-block.reverse {
        flex-direction: column;
    }
    .section-block .text-content, .section-block .image-placeholder, .section-block .video-placeholder {
        width: 100%;
        min-width: unset;
    }
    .video-placeholder {
        width: 100%;
        height: 200px;
    }

    /* --- Navegación Principal --- */
    nav ul li {
        margin: 5px 10px;
    }

    /* --- Bloques Parallax Estáticos (Bloques 3, 8, 12) --- */
    .section-block-fullwidth-bg {
        background-attachment: scroll; /* Mantiene la imagen centrada por defecto */
    }
    /* Para el bloque 8 (imagen divisoria), desactivamos parallax y alineamos a la derecha */
    .fullwidth-image-divider::before {
        background-attachment: scroll; /* Desactiva el parallax en móviles para mejor rendimiento */
        background-position: center center;
    }
    .fullwidth-image-divider {
        height: auto; /* Altura adaptable al contenido */
        padding: 80px 20px; /* Espaciado vertical generoso y simétrico */
    }
    .parallax-section-1,
    .parallax-section-2 {
        height: 250px; /* Altura reducida para los banners en móvil */
    }
    .section-block-fullwidth-bg h2 {
        font-size: 1.8em; /* Tamaño de fuente reducido para títulos en parallax */
        line-height: 1.2; /* Mejor espaciado en móvil */
        margin-bottom: 15px; /* Margen reducido en móvil */
    }
    
    .section-block-fullwidth-bg p {
        font-size: 1.1em; /* Tamaño de fuente ajustado para párrafo en móvil */
        line-height: 1.4;
        margin-bottom: 20px;
    }
    
    .section-block-fullwidth-bg .text-content {
        padding: 20px 15px; /* Padding reducido en móvil para mejor uso del espacio */
        max-width: 100%; /* Aprovecha todo el ancho disponible */
    }
    
    .section-block-fullwidth-bg .button {
        font-size: 0.9em; /* Botón ligeramente más pequeño en móvil */
        padding: 10px 20px;
    }

    /* --- Bloque 4: Barra de Texto Animado --- */
    .animated-text-section {
        font-size: 1.3em; /* Tipografía reducida para que quepa en móvil */
        height: 80px; /* Altura de la barra reducida */
    }

    /* --- Bloque 6: Carrusel de Tarjetas --- */
    .loricay-carousel-section {
        --card-width: 85vw; /* Hacemos las tarjetas relativas al ancho de la pantalla */
    }
    .loricay-carousel {
        height: 400px;

    }

    .loricay-card .meta {
        /* Hacemos el texto visible por defecto en móvil, anulando la animación de hover/container */
        transform: translateY(0);
    }

    .loricay-carousel {
        gap: 1rem; /* Reducimos el espacio entre tarjetas en móvil */
    }

    /* --- Bloque 7: Sección de Etiquetas --- */
    .etiquetas-section {
        position: relative;
        padding: 27px 5vw; /* Espaciado vertical igualado en móvil */
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    .etiquetas-container {
        overflow-x: visible;
        gap: 0;
        justify-content: space-between;
    }

    .etiqueta-item {
        width: 22%; /* El ancho se aplica a la caja, no directamente a la imagen */
        aspect-ratio: 1 / 1; /* Forzamos que la caja sea un cuadrado perfecto */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .etiqueta-item img {
        max-width: 100%;
        max-height: 100%;
    }

    /* --- Espaciado Vertical entre Secciones --- */
    .google-reviews-section {
        padding-bottom: 40px; /* Reducimos el espacio inferior */
    }

    .expert-videos-section {
        padding-top: 20px; /* Reducimos el espacio superior */
        gap: 20px; /* Reducimos el espacio entre videos para que quepan dos en una fila */
    }

    /* --- Bloque 9: Título Reseñas Google --- */
    .google-reviews-section h2 {
        font-size: 1.8em; /* Tamaño de fuente reducido para el título en móvil */
        margin-bottom: 0; /* Eliminamos el margen en móvil también */
    }

    /* --- Bloque 10: Título Palabras de Expertos --- */
    .expert-words-section h2 {
        font-size: 1.8em; /* Mismo tamaño que otros títulos de sección */
    }

    /* --- Bloque 9: Carrusel de Reseñas --- */
    .review {
        flex-basis: 85vw; /* Cada tarjeta ocupa el 85% del ancho de la pantalla */
    }
    #review-prev {
        left: 10px; /* Posiciona el botón dentro de la pantalla */
    }
    #review-next {
        right: 10px; /* Posiciona el botón dentro de la pantalla */
    }
    #google-reviews-container {
        padding: 20px 7.5vw;
    }

    /* --- Bloque 11: Videos de Expertos --- */
    .expert-video-item {
        max-width: 150px; /* Reducido para que quepan dos videos por fila en móvil */
        min-width: 125px; /* Mantenemos la proporción */
    }

    /* --- Bloque 15: Parallax Dinámico --- */
    .parallax-container {
        height: auto;
        padding: 80px 20px;
        /* Aplicamos la imagen directamente al contenedor y la hacemos estática */
        background-image: url('assets/images/fondoparalex3.jpg');
        background-size: cover;
        background-position: center;
    }
    .parallax-background {
        display: none; /* Ocultamos el fondo que mueve el JS */
    }
    .parallax-content h2 {
        font-size: 1.8em; /* Tamaño de fuente reducido para móvil */
        margin-bottom: 0; /* El espaciado lo controlará el botón */
    }
    .parallax-content .button {
        position: static; /* Anulamos el posicionamiento de escritorio */
        top: auto;
        margin-top: 30px; /* Añadimos un margen superior para separarlo del título */
    }

    /* --- Adaptación del Footer para Móvil (Logo arriba, 2 columnas abajo) --- */
    .footer-container {
        gap: 20px 0; /* Espacio vertical entre filas, sin espacio horizontal */
    }
    .footer-column {
        min-width: unset; /* Anulamos el ancho mínimo de escritorio */
    }
    .footer-center {
        order: -1; /* El logo va primero. */
        flex-basis: 100%; /* La columna del logo ocupa todo el ancho de la primera fila. */
        text-align: center; /* Aseguramos que el logo esté centrado */
    }
    .footer-left {
        order: 0; /* Columna en la segunda fila */
        flex: 1; /* Comparte el espacio */
        text-align: center; /* Centramos el contenido de la columna */
        position: relative; /* Crea el contexto de posicionamiento para los iconos. */
    }
    .footer-left .social-icons {
        position: absolute;   /* Saca los iconos del flujo normal del documento. */
        top: 2.2em;           /* Los posiciona verticalmente debajo del título "Síguenos". */
        left: 50%;            /* Centra los iconos horizontalmente */
        transform: translateX(-50%);
        white-space: nowrap;  /* Fuerza a que los iconos permanezcan en una sola línea. */
        flex-wrap: nowrap;    /* Anula el 'wrap' de escritorio para forzar una sola línea */
        z-index: 1;           /* Asegura que se superponga a otros elementos si es necesario. */
    }
    .footer-left > p:last-of-type {
        margin-top: 2.5em; /* Crea espacio para los iconos "flotantes". */
    }
    .footer-right {
        order: 0; /* Columna en la segunda fila */
        flex: 1; /* Comparte el espacio */
        text-align: center; /* Centramos el contenido de la columna */
        padding-right: 10px; /* Restauramos el padding en móvil para centrar correctamente */
    }

    /* --- Bloque 9: Carrusel de Logos Infinito --- */
    .logo-carousel-slider::before,
    .logo-carousel-slider::after {
        display: none;
    }
}

/* ===== ESTILOS PARA EL CONTENEDOR DE ÉXITO DE SUSCRIPCIÓN ===== */

.success-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 4rem 2rem;
    margin: 2rem 0;
    position: relative;
    overflow: hidden;
}

.success-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="sparkles" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="5" cy="5" r="1" fill="%23ffd700" opacity="0.3"/><circle cx="15" cy="15" r="1.5" fill="%23ffd700" opacity="0.2"/></pattern></defs><rect width="100" height="100" fill="url(%23sparkles)"/></svg>') repeat;
    pointer-events: none;
    z-index: 1;
}

.success-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.success-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: sparkleGlow 2s ease-in-out infinite alternate;
}

@keyframes sparkleGlow {
    0% { 
        transform: scale(1) rotate(0deg);
        text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    }
    100% { 
        transform: scale(1.1) rotate(5deg);
        text-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
    }
}

.success-title {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.success-subtitle {
    font-size: 1.2rem;
    color: #6c757d;
    margin-bottom: 2rem;
    font-weight: 500;
}

.promo-code-box {
    display: flex;
    align-items: center;
    background: white;
    border: 3px dashed #28a745;
    border-radius: 15px;
    padding: 1.5rem;
    margin: 2rem auto;
    max-width: 450px;
    box-shadow: 0 10px 25px rgba(40, 167, 69, 0.1);
    transition: all 0.3s ease;
}

.promo-code-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(40, 167, 69, 0.15);
}

.code-display {
    flex-grow: 1;
    text-align: left;
}

.promo-code {
    font-family: 'Courier New', monospace;
    font-size: 1.8rem;
    font-weight: bold;
    color: #28a745;
    letter-spacing: 3px;
    display: block;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.copy-button {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    border: none;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    margin-left: 1rem;
}

.copy-button:hover {
    background: linear-gradient(135deg, #218838, #1ea085);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

.copy-button:active {
    transform: translateY(0);
}

.copy-button.copied {
    background: linear-gradient(135deg, #20c997, #17a2b8);
    animation: copySuccess 0.6s ease;
}

@keyframes copySuccess {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.copy-icon, .copy-text {
    transition: all 0.3s ease;
}

.copy-feedback {
    background: #d4edda;
    color: #155724;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    margin: 1rem auto;
    max-width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    border: 1px solid #c3e6cb;
    animation: fadeInUp 0.5s ease;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.instructions {
    margin: 2rem 0;
    padding: 1.5rem;
    background: rgba(255, 193, 7, 0.1);
    border-left: 4px solid #ffc107;
    border-radius: 0 10px 10px 0;
}

.instruction-text {
    font-size: 1.1rem;
    color: #856404;
    margin: 0;
    line-height: 1.6;
}

.shop-now-btn {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    border: none;
    padding: 1.2rem 2.5rem;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.shop-now-btn:hover {
    background: linear-gradient(135deg, #0056b3, #004085);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 123, 255, 0.4);
}

.shop-now-btn:active {
    transform: translateY(-1px);
}

.thank-you-message {
    background: linear-gradient(135deg, #e8f5e8, #f0f8f0);
    border: 2px solid #d4edda;
    border-radius: 15px;
    padding: 2rem;
    margin: 2rem auto;
    max-width: 450px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.1);
}

.thank-you-text {
    font-size: 1.2rem;
    color: #2e7d32;
    margin: 0;
    line-height: 1.6;
    font-weight: 500;
}

/* ===== RESPONSIVE PARA CONTENEDOR DE ÉXITO ===== */
@media (max-width: 768px) {
    .success-content {
        padding: 0 1rem;
    }
    
    .success-title {
        font-size: 2rem;
    }
    
    .promo-code-box {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .copy-button {
        margin-left: 0;
        width: 100%;
    }
    
    .promo-code {
        font-size: 1.5rem;
        text-align: center;
    }
}