/* Contenedor principal de la sección hero, ocupa toda la altura de la ventana */
.services-hero {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #DEF8EA;
    padding: 0 50px;
    margin-bottom: 60px; /* Añadimos margen inferior para separar del siguiente servicio */
}

/* Contenedor interno del hero que aloja el texto y los paneles */
.hero-container {
    display: flex;             /* Disposición flexible */
    width: 100%;              /* Ancho completo */
    height: 80vh;             /* Altura del 80% de la ventana */
    gap: 50px;                /* Espacio entre elementos */
    align-items: center;      /* Centrado vertical */
}

/* Estilo del botón principal de acción */
/* Botón principal */
.go-btn {
    padding: 12px 32px;           /* Espaciado interno */
    background-color: #235610;    /* Color de fondo morado */
    color: #DEF8EA;                 /* Texto blanco */
    border: none;                 /* Sin borde */
    border-radius: 8px;           /* Esquinas redondeadas */
    font-size: 16px;              /* Tamaño de fuente */
    cursor: pointer;              /* Cursor tipo puntero */
    position: relative;           /* Para efectos */
    overflow: hidden;             /* Oculta desbordamiento */
    transition: all 0.3s ease;    /* Transición suave */
}

/* Efecto de brillo */
.go-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent);
    transition: all 0.5s ease;
}

/* Efectos al pasar el mouse sobre el botón */
.go-btn:hover {
    background-color: #235610; /* Color más oscuro */
    transform: translateY(-2px); /* Elevación ligera */
    box-shadow: 0 5px 15px rgba(124, 77, 255, 0.4); /* Sombra */
}

.go-btn:hover::before {
    left: 100%;
}
/* Sección principal del héroe */
.services-hero {
    min-height: 100vh;            /* Altura mínima pantalla completa */
    width: 100%;                  /* Ancho completo */
    display: flex;                /* Disposición flexible */
    align-items: center;          /* Centrado vertical */
    justify-content: center;      /* Centrado horizontal */
    background-color: #DEF8EA;    /* Fondo gris claro */
    padding: 0 50px;              /* Relleno horizontal */
}

/* Contenedor del héroe */
.hero-container {
    display: flex;                /* Disposición flexible */
    width: 100%;                  /* Ancho completo */
    height: 80vh;                 /* Altura 80% de la pantalla */
    gap: 50px;                    /* Espacio entre elementos */
    align-items: center;          /* Centrado vertical */
}

/* Contenedor de texto */
.hero-text {
    flex: 1;                      /* Crecimiento flexible */
    max-width: 400px;             /* Ancho máximo */
}

/* Título principal */
.hero-text h2 {
    font-size: 64px;              /* Tamaño de fuente grande */
    line-height: 1.1;             /* Altura de línea */
    margin: 0;                    /* Sin márgenes */
    color: #235610;                  /* Color gris oscuro */
    font-weight: 600;             /* Peso de fuente */
}

/* Párrafo descriptivo */
.hero-text p {
    margin: 20px 0;               /* Margen vertical */
    color: #161616;                  /* Color gris medio */
    font-size: 18px;              /* Tamaño de fuente */
}

/* Contenedor de los paneles */
.panels-container {
    flex: 2;                /* Toma dos partes del espacio flexible */
    display: flex;          /* Disposición flexible */
    height: 600px;          /* Altura fija */
    gap: 10px;              /* Espacio entre paneles */
}

/* Estilo de cada panel individual */
.panel {
    position: relative;     /* Para posicionamiento de elementos internos */
    background-size: cover; /* Imagen de fondo cubre todo el espacio */
    background-position: center; /* Centrado de imagen */
    background-repeat: no-repeat; /* Sin repetición */
    height: 100%;           /* Altura completa */
    border-radius: 30px;    /* Esquinas muy redondeadas */
    cursor: pointer;        /* Cursor tipo puntero */
    flex: 0.5;             /* Distribución inicial del espacio */
    transition: flex 0.7s ease-in-out; /* Transición suave al expandir */
    overflow: hidden;       /* Oculta desbordamiento */
}

/* Efecto de expansión al pasar el mouse sobre el panel */
.panel:hover {
    flex: 2;                /* Se expande al doble de su tamaño original */
    box-shadow: 0 10px 20px rgba(35, 86, 16, 0.1);
    border: 2px solid rgba(125, 209, 129, 0.1);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.panel:hover {
    flex: 2;                /* Se expande al doble de su tamaño original */
}

/* Texto superpuesto en los paneles */
.overlay-text {
    position: absolute;     /* Posicionamiento absoluto dentro del panel */
    bottom: 30px;          /* Distancia desde abajo */
    left: 30px;            /* Distancia desde la izquierda */
    color: #235610;          /* Texto en blanco */
    z-index: 2;            /* Capa superior */
    transition: all 0.5s ease-in-out; /* Transición suave */
    transform-origin: left bottom; /* Punto de origen para transformaciones */
}

/* Efecto de escala al pasar el mouse */
.panel:hover .overlay-text {
    transform: scale(1.2); /* Aumenta el tamaño del texto */
}

/* Estilos del título en el texto superpuesto */
.overlay-text h3 {
    font-size: 20px;       /* Tamaño de fuente inicial */
    margin-bottom: 5px;    /* Espacio inferior */
    transition: font-size 0.3s ease; /* Transición suave */
}

/* Estilos del subtítulo */
.overlay-text span {
    font-size: 14px;       /* Tamaño de fuente inicial */
    opacity: 0.8;          /* Semi-transparente */
    transition: all 0.3s ease; /* Transición suave */
    display: block;        /* Elemento en bloque */
}

/* Efectos al pasar el mouse sobre los textos */
.panel:hover .overlay-text h3 {
    font-size: 28px;        /* Aumenta tamaño del título */
}

.panel:hover .overlay-text span {
    font-size: 16px;        /* Aumenta tamaño del subtítulo */
    opacity: 1;             /* Hace el texto completamente visible */
}

/* Ajustes responsivos para tablets */
@media screen and (max-width: 768px) {
    .overlay-text {
        bottom: 20px;       /* Ajusta posición vertical */
        left: 20px;         /* Ajusta posición horizontal */
    }
    .overlay-text h3 {
        font-size: 18px;    /* Reduce tamaño del título */
    }
    .panel:hover .overlay-text h3 {
        font-size: 24px;    /* Ajusta tamaño al hover */
    }
    .overlay-text span {
        font-size: 12px;    /* Reduce tamaño del subtítulo */
    }
    .panel:hover .overlay-text span {
        font-size: 14px;    /* Ajusta tamaño al hover */
    }
}

/* Ajustes responsivos para móviles */
@media screen and (max-width: 480px) {
    .overlay-text {
        bottom: 15px;       /* Reduce más el espacio inferior */
        left: 15px;         /* Reduce más el espacio izquierdo */
    }
    /* Ajustes adicionales para textos en móviles */
    .overlay-text h3 { font-size: 16px; }
    .panel:hover .overlay-text h3 { font-size: 20px; }
    .overlay-text span { font-size: 11px; }
    .panel:hover .overlay-text span { font-size: 13px; }
}

.panel:first-child {
    background-image: url('assets/your-custom-background.jpg');
}

/* Configuración del primer servicio */
.service1 {
    padding: 80px 20px;
    background-color: #ffffff; /* Cambiamos el fondo para diferenciarlo del hero */
    margin-top: 60px; /* Añadimos margen superior para separar del hero */
}
/* Separación visual entre hero y servicio */
/* Contenedor de bienvenida del servicio */
.service-welcome {
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 50px;
    padding: 40px;
    background: #e8fbe9; /* Fondo verde claro */
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(35, 86, 16, 0.08);
}

.titu {
    font-size: 2.5em;
    color: #235610;
    text-align: center;
    margin: 60px auto 30px auto; /* 60px arriba, 30px abajo */
    font-weight: 700;
    width: 100%;
    letter-spacing: 1px;
}

/* Centrar el contenido de bienvenida */
.service-welcome {
    display: flex;
    align-items: center;
    gap: 40px;
    justify-content: center;
}


/* Contenedor de imagen */
.welcome-image {
    flex: 1;                    /* Toma una parte del espacio */
    position: relative;         /* Para posicionamiento */
}

/* Estilo de la imagen */
.welcome-image img {
    width: 100%;               /* Ancho completo */
    max-width: 400px;          /* Ancho máximo */
    border-radius: 15px;       /* Esquinas redondeadas */
}

/* Contenido de texto */
.welcome-content {
    flex: 1;                   /* Toma una parte del espacio */
}

/* Título del contenido */
.welcome-content h2 {
    color: #235610;               /* Color gris oscuro */
    font-size: 2.5em;          /* Tamaño de fuente */
    margin-bottom: 20px;       /* Espacio inferior */
}

/* Párrafo del contenido */
.welcome-content p {
    color: #161616;               /* Color gris medio */
    line-height: 1.6;          /* Altura de línea */
}

/* Contenedor de la sección de precios */
.pricing-section {
    max-width: 1200px;
    margin: 40px auto 0;
    padding: 0 20px;
    text-align: center;
}

/* Título de la sección */
.pricing-section h2 {
    font-size: 2.5em;           /* Tamaño de fuente */
    color: #235610;                /* Color gris oscuro */
    margin-bottom: 10px;        /* Espacio inferior */
}

/* Descripción de la sección */
.pricing-section > p {
    color: #161616;                /* Color gris medio */
    margin-bottom: 50px;        /* Espacio inferior */
}

/* Contenedor de tarjetas de precios */
.pricing-container {
    display: flex;              /* Disposición flexible */
    gap: 30px;                  /* Espacio entre tarjetas */
    justify-content: center;    /* Centrado horizontal */
    flex-wrap: wrap;            /* Permite múltiples líneas */
}

/* Tarjeta individual de precios */
.pricing-card {
    background: #DEF8EA;          /* Fondo blanco */
    border-radius: 20px;        /* Esquinas redondeadas */
    padding: 40px;              /* Espaciado interno */
    flex: 1;                    /* Distribución del espacio */
    min-width: 280px;          /* Ancho mínimo */
    max-width: 350px;          /* Ancho máximo */
    transition: all 0.3s ease;  /* Transición suave */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* Sombra suave */
}

/* Efecto hover en tarjetas de precios */
.pricing-card:hover {
    transform: translateY(-10px);    /* Elevación al pasar el mouse */
    box-shadow: 0 15px 30px rgba(124, 77, 255, 0.1); /* Sombra más pronunciada */
}

/* Título de la tarjeta */
.pricing-card h3 {
    color: #235610;                     /* Color gris oscuro */
    font-size: 24px;                 /* Tamaño de fuente */
    margin-bottom: 20px;             /* Espacio inferior */
}

/* Precio principal */
.price {
    font-size: 40px;                 /* Tamaño grande para el precio */
    color: #235610;                  /* Color morado */
    font-weight: bold;               /* Texto en negrita */
}

/* Período del precio */
.price-period {
    color: #235610;                     /* Color gris medio */
    margin-bottom: 30px;             /* Espacio inferior */
}

/* Lista de características */
.pricing-card ul {
    list-style: none;                /* Sin viñetas */
    padding: 0;                      /* Sin relleno */
    margin: 30px 0;                  /* Margen vertical */
    text-align: left;                /* Alineación a la izquierda */
}

/* Elementos de la lista */
.pricing-card ul li {
    margin: 15px 0;                  /* Espacio entre elementos */
    color: #235610;                     /* Color gris */
    display: flex;                   /* Disposición flexible */
    align-items: center;             /* Centrado vertical */
    gap: 10px;                       /* Espacio entre icono y texto */
}

.pricing-card ul li i {
    color: #7DD181;
}

/* Efectos al pasar el mouse */
.price-btn:hover::before {
    left: 100%;                    /* Mueve el brillo */
}

.price-btn:hover {
    background: #7DD181;           /* Color más oscuro */
    transform: translateY(-2px);    /* Elevación ligera */
}

.featured {
    border: 2px solid #7DD181;
    transform: scale(1.05);
}

.featured:hover {
    transform: scale(1.05) translateY(-10px);
}

@media screen and (max-width: 1024px) {
    .service-content-wrapper {
        flex-direction: column;
        text-align: center;
    }
    
    .service-title {
        text-align: center;
    }

    .welcome-image img {
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 768px) {
    .pricing-card {
        min-width: 100%;
    }

    .featured {
        transform: scale(1);
    }

    .featured:hover {
        transform: translateY(-10px);
    }
}

/* Agregar al final del archivo, manteniendo todos los estilos existentes */
/* Elementos decorativos generales */
.decoration {
    position: absolute;           /* Posicionamiento absoluto */
    pointer-events: none;        /* No intercepta eventos */
    z-index: 1;                  /* Capa de apilamiento */
    opacity: 0.1;                /* Transparencia */
}

/* Decoraciones específicas */
.top-right {
    top: 40px;                   /* Posición superior */
    right: 40px;                 /* Posición derecha */
    width: 120px;                /* Ancho fijo */
}

.bottom-left {
    bottom: 40px;                /* Posición inferior */
    left: 40px;                  /* Posición izquierda */
    width: 150px;                /* Ancho fijo */
}

/* Elemento flotante con animación */
.paw-float {
    width: 50px;                 /* Ancho fijo */
    right: -25px;                /* Posición derecha */
    bottom: -25px;               /* Posición inferior */
    opacity: 0.6;                /* Semi-transparente */
    animation: float 3s ease-in-out infinite; /* Animación continua */
}

/* Sección de servicio 2 */
.service2 .service-welcome {
    flex-direction: row;          /* Dirección de los elementos */
}

.service2 .welcome-content {
    padding-right: 0;             /* Sin relleno derecho */
    padding-left: 4rem;           /* Relleno izquierdo */
}

/* Ajustes responsivos */
@media (max-width: 768px) {
    .service2 .service-welcome {
        flex-direction: column;    /* Cambio a disposición vertical */
    }

    .service2 .welcome-content {
        padding-left: 0;          /* Elimina relleno izquierdo */
        text-align: center;       /* Centra el texto */
    }
}

/* Líneas decorativas */
.top-line {
    width: 80px;                  /* Ancho fijo */
    top: -20px;                   /* Posición superior */
    left: 0;                      /* Alineado a la izquierda */
    opacity: 0.3;                 /* Semi-transparente */
}

.pricing-circle {
    width: 200px;                 /* Ancho fijo */
    top: 50%;                     /* Centro vertical */
    left: -100px;                 /* Posición izquierda */
    transform: translateY(-50%);   /* Ajuste de centrado */
}

/* Add these styles for service2 section */
.service2 .service-welcome {
    flex-direction: row;  /* Changed from row-reverse to row */
}

.service2 .welcome-content {
    padding-right: 0;
    padding-left: 4rem;
}

@media (max-width: 768px) {
    .service2 .service-welcome {
        flex-direction: column;
    }

    .service2 .welcome-content {
        padding-left: 0;
        text-align: center;
    }
}

/* Sección del slider de promociones */
.promo-slider-section {
    padding: 4rem 2rem;           /* Espaciado interno */
    background: #f8f9ff;          /* Fondo gris muy claro */
}

/* Título de la sección */
.section-title {
    text-align: center;           /* Centrado del texto */
    font-size: 2.5rem;            /* Tamaño de fuente */
    color: #333;                  /* Color gris oscuro */
    margin-bottom: 3rem;          /* Espacio inferior */
}

/* Contenedor del slider */
.slider-container {
    max-width: 1200px;           /* Ancho máximo */
    margin: 0 auto;              /* Centrado horizontal */
    overflow: hidden;            /* Oculta desbordamiento */
    padding: 1rem;               /* Espaciado interno */
}

/* Slider con animación */
.promo-slider {
    display: flex;               /* Disposición flexible */
    gap: 2rem;                  /* Espacio entre elementos */
    animation: scroll 20s linear infinite; /* Animación continua */
}

/* Pausa de animación al hover */
.promo-slider:hover {
    animation-play-state: paused; /* Pausa la animación */
}

/* Tarjeta promocional individual */
.promo-card {
    min-width: 280px;              /* Ancho mínimo */
    height: 400px;                 /* Altura fija */
    position: relative;            /* Para posicionamiento absoluto */
    border-radius: 20px;          /* Esquinas redondeadas */
    overflow: hidden;             /* Oculta desbordamiento */
    box-shadow: 0 10px 20px rgba(35, 86, 16, 0.1);
    border-color: rgba(125, 209, 129, 0.3);
    transform: translateY(-5px);
}

/* Imagen de la tarjeta */
.promo-card img {
    width: 100%;                  /* Ancho completo */
    height: 100%;                 /* Alto completo */
    object-fit: cover;            /* Ajuste de imagen */
}

/* Superposición oscura */
.card-overlay {
    position: absolute;           /* Posicionamiento absoluto */
    top: 0;                      /* Desde arriba */
    left: 0;                     /* Desde la izquierda */
    width: 100%;                 /* Ancho completo */
    height: 100%;                /* Alto completo */
    background: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
    display: flex;               /* Disposición flexible */
    align-items: center;         /* Centrado vertical */
    justify-content: center;     /* Centrado horizontal */
    opacity: 0;                  /* Inicialmente invisible */
    transition: opacity 0.3s ease; /* Transición suave */
}

/* Efectos al pasar el mouse sobre la tarjeta */
.promo-card:hover {
    transform: translateY(-10px);     /* Elevación de la tarjeta */
}

.promo-card:hover .card-overlay {
    opacity: 1;                       /* Muestra la superposición */
}

/* Botón de promoción */
.promo-btn {
    padding: 1rem 2rem;              /* Espaciado interno */
    background: var(--accent-color, #C084FC); /* Color de fondo */
    color: white;                    /* Color de texto */
    border: none;                    /* Sin borde */
    border-radius: 30px;             /* Bordes redondeados */
    font-size: 1.1rem;              /* Tamaño de fuente */
    cursor: pointer;                 /* Cursor tipo puntero */
    transition: all 0.3s ease;       /* Transición suave */
    transform: translateY(20px);     /* Posición inicial */
    opacity: 0;                      /* Inicialmente invisible */
}

/* Efectos al pasar el mouse */
.promo-card:hover .promo-btn {
    transform: translateY(0);        /* Regresa a posición normal */
    opacity: 1;                      /* Hace visible el botón */
}

/* Animación de desplazamiento */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-282px * 4));
    }
}

/* Media Queries y Responsividad */
@media (max-width: 992px) {
    .promo-card {
        min-width: 240px;          /* Reducción del ancho mínimo */
        height: 350px;             /* Reducción de la altura */
    }
}

/* Ajustes para tablets */
@media (max-width: 768px) {
    .promo-card {
        min-width: 200px;          /* Ancho mínimo más pequeño */
        height: 300px;             /* Altura más pequeña */
    }
    
    .promo-btn {
        padding: 0.8rem 1.5rem;    /* Padding más pequeño */
        font-size: 1rem;           /* Fuente más pequeña */
    }
}

/* Ajustes para móviles */
@media (max-width: 576px) {
    .promo-card {
        min-width: 180px;          /* Ancho mínimo aún más pequeño */
        height: 250px;             /* Altura aún más pequeña */
    }
    
    .section-title {
        font-size: 2rem;           /* Título más pequeño */
    }
}

/* Sección de servicio 2 */
.service2 .service-welcome {
    flex-direction: row;          /* Dirección de los elementos */
}

.service2 .welcome-content {
    padding-right: 0;             /* Sin relleno derecho */
    padding-left: 4rem;           /* Relleno izquierdo */
}

/* Ajustes responsivos */
@media (max-width: 768px) {
    .service2 .service-welcome {
        flex-direction: column;    /* Cambio a disposición vertical */
    }

    .service2 .welcome-content {
        padding-left: 0;          /* Elimina relleno izquierdo */
        text-align: center;       /* Centra el texto */
    }
}

/* Líneas decorativas */
.top-line {
    width: 80px;                  /* Ancho fijo */
    top: -20px;                   /* Posición superior */
    left: 0;                      /* Alineado a la izquierda */
    opacity: 0.3;                 /* Semi-transparente */
}

.pricing-circle {
    width: 200px;                 /* Ancho fijo */
    top: 50%;                     /* Centro vertical */
    left: -100px;                 /* Posición izquierda */
    transform: translateY(-50%);   /* Ajuste de centrado */
}

/* Add these styles for service2 section */
.service2 .service-welcome {
    flex-direction: row;  /* Changed from row-reverse to row */
}

.service2 .welcome-content {
    padding-right: 0;
    padding-left: 4rem;
}

@media (max-width: 768px) {
    .service2 .service-welcome {
        flex-direction: column;
    }

    .service2 .welcome-content {
        padding-left: 0;
        text-align: center;
    }
}

/* Sección del slider de promociones */
.promo-slider-section {
    padding: 4rem 2rem;           /* Espaciado interno */
    background: #f8f9ff;          /* Fondo gris muy claro */
}

/* Título de la sección */
.section-title {
    text-align: center;           /* Centrado del texto */
    font-size: 2.5rem;            /* Tamaño de fuente */
    color: #333;                  /* Color gris oscuro */
    margin-bottom: 3rem;          /* Espacio inferior */
}

/* Contenedor del slider */
.slider-container {
    max-width: 1200px;           /* Ancho máximo */
    margin: 0 auto;              /* Centrado horizontal */
    overflow: hidden;            /* Oculta desbordamiento */
    padding: 1rem;               /* Espaciado interno */
}

/* Slider con animación */
.promo-slider {
    display: flex;               /* Disposición flexible */

    gap: 2rem;                  /* Espacio entre elementos */    gap: 2rem;                  /* Espacio entre elementos */
}

/* Sección de servicio 3 */
.service3 {
    margin-top: 60px; /* Puedes aumentar este valor si deseas más espacio */
}

/* Contenedor principal de la sección hero, ocupa toda la altura de la ventana */
.services-hero {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #DEF8EA;
    padding: 0 50px;
    margin-bottom: 60px; /* Añadimos margen inferior para separar del siguiente servicio */
}

/* Contenedor interno del hero que aloja el texto y los paneles */
.hero-container {
    display: flex;             /* Disposición flexible */
    width: 100%;              /* Ancho completo */
    height: 80vh;             /* Altura del 80% de la ventana */
    gap: 50px;                /* Espacio entre elementos */
    align-items: center;      /* Centrado vertical */
}

/* Estilo del botón principal de acción */
/* Botón principal */
.go-btn {
    padding: 12px 32px;           /* Espaciado interno */
    background-color: #235610;    /* Color de fondo morado */
    color: #DEF8EA;                 /* Texto blanco */
    border: none;                 /* Sin borde */
    border-radius: 8px;           /* Esquinas redondeadas */
    font-size: 16px;              /* Tamaño de fuente */
    cursor: pointer;              /* Cursor tipo puntero */
    position: relative;           /* Para efectos */
    overflow: hidden;             /* Oculta desbordamiento */
    transition: all 0.3s ease;    /* Transición suave */
}

/* Efecto de brillo */
.go-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent);
    transition: all 0.5s ease;
}

/* Efectos al pasar el mouse sobre el botón */
.go-btn:hover {
    background-color: #235610; /* Color más oscuro */
    transform: translateY(-2px); /* Elevación ligera */
    box-shadow: 0 5px 15px rgba(124, 77, 255, 0.4); /* Sombra */
}

.go-btn:hover::before {
    left: 100%;
}
/* Sección principal del héroe */
.services-hero {
    min-height: 100vh;            /* Altura mínima pantalla completa */
    width: 100%;                  /* Ancho completo */
    display: flex;                /* Disposición flexible */
    align-items: center;          /* Centrado vertical */
    justify-content: center;      /* Centrado horizontal */
    background-color: #DEF8EA;    /* Fondo gris claro */
    padding: 0 50px;              /* Relleno horizontal */
}

/* Contenedor del héroe */
.hero-container {
    display: flex;                /* Disposición flexible */
    width: 100%;                  /* Ancho completo */
    height: 80vh;                 /* Altura 80% de la pantalla */
    gap: 50px;                    /* Espacio entre elementos */
    align-items: center;          /* Centrado vertical */
}

/* Contenedor de texto */
.hero-text {
    flex: 1;                      /* Crecimiento flexible */
    max-width: 400px;             /* Ancho máximo */
}

/* Título principal */
.hero-text h2 {
    font-size: 64px;              /* Tamaño de fuente grande */
    line-height: 1.1;             /* Altura de línea */
    margin: 0;                    /* Sin márgenes */
    color: #235610;                  /* Color gris oscuro */
    font-weight: 600;             /* Peso de fuente */
}

/* Párrafo descriptivo */
.hero-text p {
    margin: 20px 0;               /* Margen vertical */
    color: #161616;                  /* Color gris medio */
    font-size: 18px;              /* Tamaño de fuente */
}

/* Contenedor de los paneles */
.panels-container {
    flex: 2;                /* Toma dos partes del espacio flexible */
    display: flex;          /* Disposición flexible */
    height: 600px;          /* Altura fija */
    gap: 10px;              /* Espacio entre paneles */
}

/* Estilo de cada panel individual */
.panel {
    position: relative;     /* Para posicionamiento de elementos internos */
    background-size: cover; /* Imagen de fondo cubre todo el espacio */
    background-position: center; /* Centrado de imagen */
    background-repeat: no-repeat; /* Sin repetición */
    height: 100%;           /* Altura completa */
    border-radius: 30px;    /* Esquinas muy redondeadas */
    cursor: pointer;        /* Cursor tipo puntero */
    flex: 0.5;             /* Distribución inicial del espacio */
    transition: flex 0.7s ease-in-out; /* Transición suave al expandir */
    overflow: hidden;       /* Oculta desbordamiento */
}

/* Efecto de expansión al pasar el mouse sobre el panel */
.panel:hover {
    flex: 2;                /* Se expande al doble de su tamaño original */
    box-shadow: 0 10px 20px rgba(35, 86, 16, 0.1);
    border: 2px solid rgba(125, 209, 129, 0.1);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.panel:hover {
    flex: 2;                /* Se expande al doble de su tamaño original */
}

/* Texto superpuesto en los paneles */
.overlay-text {
    position: absolute;     /* Posicionamiento absoluto dentro del panel */
    bottom: 30px;          /* Distancia desde abajo */
    left: 30px;            /* Distancia desde la izquierda */
    color: #235610;          /* Texto en blanco */
    z-index: 2;            /* Capa superior */
    transition: all 0.5s ease-in-out; /* Transición suave */
    transform-origin: left bottom; /* Punto de origen para transformaciones */
}

/* Efecto de escala al pasar el mouse */
.panel:hover .overlay-text {
    transform: scale(1.2); /* Aumenta el tamaño del texto */
}

/* Estilos del título en el texto superpuesto */
.overlay-text h3 {
    font-size: 20px;       /* Tamaño de fuente inicial */
    margin-bottom: 5px;    /* Espacio inferior */
    transition: font-size 0.3s ease; /* Transición suave */
}

/* Estilos del subtítulo */
.overlay-text span {
    font-size: 14px;       /* Tamaño de fuente inicial */
    opacity: 0.8;          /* Semi-transparente */
    transition: all 0.3s ease; /* Transición suave */
    display: block;        /* Elemento en bloque */
}

/* Efectos al pasar el mouse sobre los textos */
.panel:hover .overlay-text h3 {
    font-size: 28px;        /* Aumenta tamaño del título */
}

.panel:hover .overlay-text span {
    font-size: 16px;        /* Aumenta tamaño del subtítulo */
    opacity: 1;             /* Hace el texto completamente visible */
}

/* Ajustes responsivos para tablets */
@media screen and (max-width: 768px) {
    .overlay-text {
        bottom: 20px;       /* Ajusta posición vertical */
        left: 20px;         /* Ajusta posición horizontal */
    }
    .overlay-text h3 {
        font-size: 18px;    /* Reduce tamaño del título */
    }
    .panel:hover .overlay-text h3 {
        font-size: 24px;    /* Ajusta tamaño al hover */
    }
    .overlay-text span {
        font-size: 12px;    /* Reduce tamaño del subtítulo */
    }
    .panel:hover .overlay-text span {
        font-size: 14px;    /* Ajusta tamaño al hover */
    }
}

/* Ajustes responsivos para móviles */
@media screen and (max-width: 480px) {
    .overlay-text {
        bottom: 15px;       /* Reduce más el espacio inferior */
        left: 15px;         /* Reduce más el espacio izquierdo */
    }
    /* Ajustes adicionales para textos en móviles */
    .overlay-text h3 { font-size: 16px; }
    .panel:hover .overlay-text h3 { font-size: 20px; }
    .overlay-text span { font-size: 11px; }
    .panel:hover .overlay-text span { font-size: 13px; }
}

.panel:first-child {
    background-image: url('assets/your-custom-background.jpg');
}

/* Configuración del primer servicio */
.service1 {
    padding: 80px 20px;
    background-color: #ffffff; /* Cambiamos el fondo para diferenciarlo del hero */
    margin-top: 60px; /* Añadimos margen superior para separar del hero */
}
/* Separación visual entre hero y servicio */
/* Contenedor de bienvenida del servicio */
.service-welcome {
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 50px;
    padding: 40px;
    background: #e8fbe9; /* Fondo verde claro */
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(35, 86, 16, 0.08);
}

.titu {
    font-size: 2.5em;
    color: #235610;
    text-align: center;
    margin: 60px auto 30px auto; /* 60px arriba, 30px abajo */
    font-weight: 700;
    width: 100%;
    letter-spacing: 1px;
}

/* Centrar el contenido de bienvenida */
.service-welcome {
    display: flex;
    align-items: center;
    gap: 40px;
    justify-content: center;
}


/* Contenedor de imagen */
.welcome-image {
    flex: 1;                    /* Toma una parte del espacio */
    position: relative;         /* Para posicionamiento */
}

/* Estilo de la imagen */
.welcome-image img {
    width: 100%;               /* Ancho completo */
    max-width: 400px;          /* Ancho máximo */
    border-radius: 15px;       /* Esquinas redondeadas */
}

/* Contenido de texto */
.welcome-content {
    flex: 1;                   /* Toma una parte del espacio */
}

/* Título del contenido */
.welcome-content h2 {
    color: #235610;               /* Color gris oscuro */
    font-size: 2.5em;          /* Tamaño de fuente */
    margin-bottom: 20px;       /* Espacio inferior */
}

/* Párrafo del contenido */
.welcome-content p {
    color: #161616;               /* Color gris medio */
    line-height: 1.6;          /* Altura de línea */
}

/* Contenedor de la sección de precios */
.pricing-section {
    max-width: 1200px;
    margin: 40px auto 0;
    padding: 0 20px;
    text-align: center;
}

/* Título de la sección */
.pricing-section h2 {
    font-size: 2.5em;           /* Tamaño de fuente */
    color: #235610;                /* Color gris oscuro */
    margin-bottom: 10px;        /* Espacio inferior */
}

/* Descripción de la sección */
.pricing-section > p {
    color: #161616;                /* Color gris medio */
    margin-bottom: 50px;        /* Espacio inferior */
}

/* Contenedor de tarjetas de precios */
.pricing-container {
    display: flex;              /* Disposición flexible */
    gap: 30px;                  /* Espacio entre tarjetas */
    justify-content: center;    /* Centrado horizontal */
    flex-wrap: wrap;            /* Permite múltiples líneas */
}

/* Tarjeta individual de precios */
.pricing-card {
    background: #DEF8EA;          /* Fondo blanco */
    border-radius: 20px;        /* Esquinas redondeadas */
    padding: 40px;              /* Espaciado interno */
    flex: 1;                    /* Distribución del espacio */
    min-width: 280px;          /* Ancho mínimo */
    max-width: 350px;          /* Ancho máximo */
    transition: all 0.3s ease;  /* Transición suave */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* Sombra suave */
}

/* Líneas decorativas */
.top-line {
    width: 80px;                  /* Ancho fijo */
    top: -20px;                   /* Posición superior */
    left: 0;                      /* Alineado a la izquierda */
    opacity: 0.3;                 /* Semi-transparente */
}

.pricing-circle {
    width: 200px;                 /* Ancho fijo */
    top: 50%;                     /* Centro vertical */
    left: -100px;                 /* Posición izquierda */
    transform: translateY(-50%);   /* Ajuste de centrado */
}

/* Add these styles for service2 section */
.service2 .service-welcome {
    flex-direction: row;  /* Changed from row-reverse to row */
}

.service2 .welcome-content {
    padding-right: 0;
    padding-left: 4rem;
}

@media (max-width: 768px) {
    .service2 .service-welcome {
        flex-direction: column;
    }

    .service2 .welcome-content {
        padding-left: 0;
        text-align: center;
    }
}

/* Sección del slider de promociones */
.promo-slider-section {
    padding: 4rem 2rem;           /* Espaciado interno */
    background: #f8f9ff;          /* Fondo gris muy claro */
}

/* Título de la sección */
.section-title {
    text-align: center;           /* Centrado del texto */
    font-size: 2.5rem;            /* Tamaño de fuente */
    color: #333;                  /* Color gris oscuro */
    margin-bottom: 3rem;          /* Espacio inferior */
}

/* Contenedor del slider */
.slider-container {
    max-width: 1200px;           /* Ancho máximo */
    margin: 0 auto;              /* Centrado horizontal */
    overflow: hidden;            /* Oculta desbordamiento */
    padding: 1rem;               /* Espaciado interno */
}

/* Slider con animación */
.promo-slider {
    display: flex;               /* Disposición flexible */
    gap: 2rem;                  /* Espacio entre elementos */
    animation: scroll 20s linear infinite; /* Animación continua */
}

/* Pausa de animación al hover */
.promo-slider:hover {
    animation-play-state: paused; /* Pausa la animación */
}

/* Tarjeta promocional individual */
.promo-card {
    min-width: 280px;              /* Ancho mínimo */
    height: 400px;                 /* Altura fija */
    position: relative;            /* Para posicionamiento absoluto */
    border-radius: 20px;          /* Esquinas redondeadas */
    overflow: hidden;             /* Oculta desbordamiento */
    box-shadow: 0 10px 20px rgba(35, 86, 16, 0.1);
    border-color: rgba(125, 209, 129, 0.3);
    transform: translateY(-5px);
}

/* Imagen de la tarjeta */
.promo-card img {
    width: 100%;                  /* Ancho completo */
    height: 100%;                 /* Alto completo */
    object-fit: cover;            /* Ajuste de imagen */
}

/* Superposición oscura */
.card-overlay {
    position: absolute;           /* Posicionamiento absoluto */
    top: 0;                      /* Desde arriba */
    left: 0;                     /* Desde la izquierda */
    width: 100%;                 /* Ancho completo */
    height: 100%;                /* Alto completo */
    background: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
    display: flex;               /* Disposición flexible */
    align-items: center;         /* Centrado vertical */
    justify-content: center;     /* Centrado horizontal */
    opacity: 0;                  /* Inicialmente invisible */
    transition: opacity 0.3s ease; /* Transición suave */
}

/* Efectos al pasar el mouse sobre la tarjeta */
.promo-card:hover {
    transform: translateY(-10px);     /* Elevación de la tarjeta */
}

.promo-card:hover .card-overlay {
    opacity: 1;                       /* Muestra la superposición */
}

/* Botón de promoción */
.promo-btn {
    padding: 1rem 2rem;              /* Espaciado interno */
    background: var(--accent-color, #C084FC); /* Color de fondo */
    color: white;                    /* Color de texto */
    border: none;                    /* Sin borde */
    border-radius: 30px;             /* Bordes redondeados */
    font-size: 1.1rem;              /* Tamaño de fuente */
    cursor: pointer;                 /* Cursor tipo puntero */
    transition: all 0.3s ease;       /* Transición suave */
    transform: translateY(20px);     /* Posición inicial */
    opacity: 0;                      /* Inicialmente invisible */
}

/* Efectos al pasar el mouse */
.promo-card:hover .promo-btn {
    transform: translateY(0);        /* Regresa a posición normal */
    opacity: 1;                      /* Hace visible el botón */
}

/* Animación de desplazamiento */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-282px * 4));
    }
}

/* Media Queries y Responsividad */
@media (max-width: 992px) {
    .promo-card {
        min-width: 240px;          /* Reducción del ancho mínimo */
        height: 350px;             /* Reducción de la altura */
    }
}

/* Ajustes para tablets */
@media (max-width: 768px) {
    .promo-card {
        min-width: 200px;          /* Ancho mínimo más pequeño */
        height: 300px;             /* Altura más pequeña */
    }
    
    .promo-btn {
        padding: 0.8rem 1.5rem;    /* Padding más pequeño */
        font-size: 1rem;           /* Fuente más pequeña */
    }
}

/* Ajustes para móviles */
@media (max-width: 576px) {
    .promo-card {
        min-width: 180px;          /* Ancho mínimo aún más pequeño */
        height: 250px;             /* Altura aún más pequeña */
    }
    
    .section-title {
        font-size: 2rem;           /* Título más pequeño */
    }
}

/* Sección de servicio 2 */
.service2 .service-welcome {
    flex-direction: row;          /* Dirección de los elementos */
}

.service2 .welcome-content {
    padding-right: 0;             /* Sin relleno derecho */
    padding-left: 4rem;           /* Relleno izquierdo */
}

/* Ajustes responsivos */
@media (max-width: 768px) {
    .service2 .service-welcome {
        flex-direction: column;    /* Cambio a disposición vertical */
    }

    .service2 .welcome-content {
        padding-left: 0;          /* Elimina relleno izquierdo */
        text-align: center;       /* Centra el texto */
    }
}

/* Líneas decorativas */
.top-line {
    width: 80px;                  /* Ancho fijo */
    top: -20px;                   /* Posición superior */
    left: 0;                      /* Alineado a la izquierda */
    opacity: 0.3;                 /* Semi-transparente */
}

.pricing-circle {
    width: 200px;                 /* Ancho fijo */
    top: 50%;                     /* Centro vertical */
    left: -100px;                 /* Posición izquierda */
    transform: translateY(-50%);   /* Ajuste de centrado */
}

/* Add these styles for service2 section */
.service2 .service-welcome {
    flex-direction: row;  /* Changed from row-reverse to row */
}

.service2 .welcome-content {
    padding-right: 0;
    padding-left: 4rem;
}

@media (max-width: 768px) {
    .service2 .service-welcome {
        flex-direction: column;
    }

    .service2 .welcome-content {
        padding-left: 0;
        text-align: center;
    }
}

/* Sección del slider de promociones */
.promo-slider-section {
    padding: 4rem 2rem;           /* Espaciado interno */
    background: #f8f9ff;          /* Fondo gris muy claro */
}

/* Título de la sección */
.section-title {
    text-align: center;           /* Centrado del texto */
    font-size: 2.5rem;            /* Tamaño de fuente */
    color: #333;                  /* Color gris oscuro */
    margin-bottom: 3rem;          /* Espacio inferior */
}

/* Contenedor del slider */
.slider-container {
    max-width: 1200px;           /* Ancho máximo */
    margin: 0 auto;              /* Centrado horizontal */
    overflow: hidden;            /* Oculta desbordamiento */
    padding: 1rem;               /* Espaciado interno */
}

/* Slider con animación */
.promo-slider {
    display: flex;               /* Disposición flexible */
    gap: 2rem;                  /* Espacio entre elementos */
    animation: scroll 20s linear infinite; /* Animación continua */
}

/* Pausa de animación al hover */
.promo-slider:hover {
    animation-play-state: paused; /* Pausa la animación */
}

/* Tarjeta promocional individual */
.promo-card {
    min-width: 280px;              /* Ancho mínimo */
    height: 400px;                 /* Altura fija */
    position: relative;            /* Para posicionamiento absoluto */
    border-radius: 20px;          /* Esquinas redondeadas */
    overflow: hidden;             /* Oculta desbordamiento */
    box-shadow: 0 10px 20px rgba(35, 86, 16, 0.1);
    border-color: rgba(125, 209, 129, 0.3);
    transform: translateY(-5px);
}

/* Imagen de la tarjeta */
.promo-card img {
    width: 100%;                  /* Ancho completo */
    height: 100%;                 /* Alto completo */
    object-fit: cover;            /* Ajuste de imagen */
}

/* Superposición oscura */
.card-overlay {
    position: absolute;           /* Posicionamiento absoluto */
    top: 0;                      /* Desde arriba */
    left: 0;                     /* Desde la izquierda */
    width: 100%;                 /* Ancho completo */
    height: 100%;                /* Alto completo */
    background: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
    display: flex;               /* Disposición flexible */
    align-items: center;         /* Centrado vertical */
    justify-content: center;     /* Centrado horizontal */
    opacity: 0;                  /* Inicialmente invisible */
    transition: opacity 0.3s ease; /* Transición suave */
}

/* Efectos al pasar el mouse sobre la tarjeta */
.promo-card:hover {
    transform: translateY(-10px);     /* Elevación de la tarjeta */
}

.promo-card:hover .card-overlay {
    opacity: 1;                       /* Muestra la superposición */
}

/* Botón de promoción */
.promo-btn {
    padding: 1rem 2rem;              /* Espaciado interno */
    background: var(--accent-color, #C084FC); /* Color de fondo */
    color: white;                    /* Color de texto */
    border: none;                    /* Sin borde */
    border-radius: 30px;             /* Bordes redondeados */
    font-size: 1.1rem;              /* Tamaño de fuente */
    cursor: pointer;                 /* Cursor tipo puntero */
    transition: all 0.3s ease;       /* Transición suave */
    transform: translateY(20px);     /* Posición inicial */
    opacity: 0;                      /* Inicialmente invisible */
}

/* Efectos al pasar el mouse */
.promo-card:hover .promo-btn {
    transform: translateY(0);        /* Regresa a posición normal */
    opacity: 1;                      /* Hace visible el botón */
}

/* Animación de desplazamiento */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-282px * 4));
    }
}

/* Media Queries y Responsividad */
@media (max-width: 992px) {
    .promo-card {
        min-width: 240px;          /* Reducción del ancho mínimo */
        height: 350px;             /* Reducción de la altura */
    }
}

/* Ajustes para tablets */
@media (max-width: 768px) {
    .promo-card {
        min-width: 200px;          /* Ancho mínimo más pequeño */
        height: 300px;             /* Altura más pequeña */
    }
    
    .promo-btn {
        padding: 0.8rem 1.5rem;    /* Padding más pequeño */
        font-size: 1rem;           /* Fuente más pequeña */
    }
}

/* Ajustes para móviles */
@media (max-width: 576px) {
    .promo-card {
        min-width: 180px;          /* Ancho mínimo aún más pequeño */
        height: 250px;             /* Altura aún más pequeña */
    }
    
    .section-title {
        font-size: 2rem;           /* Título más pequeño */
    }
}

/* Sección de servicio 2 */
.service2 .service-welcome {
    flex-direction: row;          /* Dirección de los elementos */
}

.service2 .welcome-content {
    padding-right: 0;             /* Sin relleno derecho */
    padding-left: 4rem;           /* Relleno izquierdo */
}

/* Ajustes responsivos */
@media (max-width: 768px) {
    .service2 .service-welcome {
        flex-direction: column;    /* Cambio a disposición vertical */
    }

    .service2 .welcome-content {
        padding-left: 0;          /* Elimina relleno izquierdo */
        text-align: center;       /* Centra el texto */
    }
}

/* Líneas decorativas */
.top-line {
    width: 80px;                  /* Ancho fijo */
    top: -20px;                   /* Posición superior */
    left: 0;                      /* Alineado a la izquierda */
    opacity: 0.3;                 /* Semi-transparente */
}

.pricing-circle {
    width: 200px;                 /* Ancho fijo */
    top: 50%;                     /* Centro vertical */
    left: -100px;                 /* Posición izquierda */
    transform: translateY(-50%);   /* Ajuste de centrado */
}

/* Add these styles for service2 section */
.service2 .service-welcome {
    flex-direction: row;  /* Changed from row-reverse to row */
}

.service2 .welcome-content {
    padding-right: 0;
    padding-left: 4rem;
}

@media (max-width: 768px) {
    .service2 .service-welcome {
        flex-direction: column;
    }

    .service2 .welcome-content {
        padding-left: 0;
        text-align: center;
    }
}

/* Sección del slider de promociones */
.promo-slider-section {
    padding: 4rem 2rem;           /* Espaciado interno */
    background: #f8f9ff;          /* Fondo gris muy claro */
}

/* Título de la sección */
.section-title {
    text-align: center;           /* Centrado del texto */
    font-size: 2.5rem;            /* Tamaño de fuente */
    color: #333;                  /* Color gris oscuro */
    margin-bottom: 3rem;          /* Espacio inferior */
}

/* Contenedor del slider */
.slider-container {
    max-width: 1200px;           /* Ancho máximo */
    margin: 0 auto;              /* Centrado horizontal */
    overflow: hidden;            /* Oculta desbordamiento */
    padding: 1rem;               /* Espaciado interno */
}

/* Slider con animación */
.promo-slider {
    display: flex;               /* Disposición flexible */
    gap: 2rem;                  /* Espacio entre elementos */
    animation: scroll 20s linear infinite; /* Animación continua */
}

/* Pausa de animación al hover */
.promo-slider:hover {
    animation-play-state: paused; /* Pausa la animación */
}

/* Tarjeta promocional individual */
.promo-card {
    min-width: 280px;              /* Ancho mínimo */
    height: 400px;                 /* Altura fija */
    position: relative;            /* Para posicionamiento absoluto */
    border-radius: 20px;          /* Esquinas redondeadas */
    overflow: hidden;             /* Oculta desbordamiento */
    box-shadow: 0 10px 20px rgba(35, 86, 16, 0.1);
    border-color: rgba(125, 209, 129, 0.3);
    transform: translateY(-5px);
}

/* Imagen de la tarjeta */
.promo-card img {
    width: 100%;                  /* Ancho completo */
    height: 100%;                 /* Alto completo */
    object-fit: cover;            /* Ajuste de imagen */
}

/* Superposición oscura */
.card-overlay {
    position: absolute;           /* Posicionamiento absoluto */
    top: 0;                      /* Desde arriba */
    left: 0;                     /* Desde la izquierda */
    width: 100%;                 /* Ancho completo */
    height: 100%;                /* Alto completo */
    background: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
    display: flex;               /* Disposición flexible */
    align-items: center;         /* Centrado vertical */
    justify-content: center;     /* Centrado horizontal */
    opacity: 0;                  /* Inicialmente invisible */
    transition: opacity 0.3s ease; /* Transición suave */
}

/* Efectos al pasar el mouse sobre la tarjeta */
.promo-card:hover {
    transform: translateY(-10px);     /* Elevación de la tarjeta */
}

.promo-card:hover .card-overlay {
    opacity: 1;                       /* Muestra la superposición */
}

/* Botón de promoción */
.promo-btn {
    padding: 1rem 2rem;              /* Espaciado interno */
    background: var(--accent-color, #C084FC); /* Color de fondo */
    color: white;                    /* Color de texto */
    border: none;                    /* Sin borde */
    border-radius: 30px;             /* Bordes redondeados */
    font-size: 1.1rem;              /* Tamaño de fuente */
    cursor: pointer;                 /* Cursor tipo puntero */
    transition: all 0.3s ease;       /* Transición suave */
    transform: translateY(20px);     /* Posición inicial */
    opacity: 0;                      /* Inicialmente invisible */
}

/* Efectos al pasar el mouse */
.promo-card:hover .promo-btn {
    transform: translateY(0);        /* Regresa a posición normal */
    opacity: 1;                      /* Hace visible el botón */
}

/* Animación de desplazamiento */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-282px * 4));
    }
}

/* Media Queries y Responsividad */
@media (max-width: 992px) {
    .promo-card {
        min-width: 240px;          /* Reducción del ancho mínimo */
        height: 350px;             /* Reducción de la altura */
    }
}

/* Ajustes para tablets */
@media (max-width: 768px) {
    .promo-card {
        min-width: 200px;          /* Ancho mínimo más pequeño */
        height: 300px;             /* Altura más pequeña */
    }
    
    .promo-btn {
        padding: 0.8rem 1.5rem;    /* Padding más pequeño */
        font-size: 1rem;           /* Fuente más pequeña */
    }
}

/* Ajustes para móviles */
@media (max-width: 576px) {
    .promo-card {
        min-width: 180px;          /* Ancho mínimo aún más pequeño */
        height: 250px;             /* Altura aún más pequeña */
    }
    
    .section-title {
        font-size: 2rem;           /* Título más pequeño */
    }
}

/* Sección de servicio 2 */
.service2 .service-welcome {
    flex-direction: row;          /* Dirección de los elementos */
}

.service2 .welcome-content {
    padding-right: 0;             /* Sin relleno derecho */
    padding-left: 4rem;           /* Relleno izquierdo */
}

/* Ajustes responsivos */
@media (max-width: 768px) {
    .service2 .service-welcome {
        flex-direction: column;    /* Cambio a disposición vertical */
    }

    .service2 .welcome-content {
        padding-left: 0;          /* Elimina relleno izquierdo */
        text-align: center;       /* Centra el texto */
    }
}

/* Líneas decorativas */
.top-line {
    width: 80px;                  /* Ancho fijo */
    top: -20px;                   /* Posición superior */
    left: 0;                      /* Alineado a la izquierda */
    opacity: 0.3;                 /* Semi-transparente */
}

.pricing-circle {
    width: 200px;                 /* Ancho fijo */
    top: 50%;                     /* Centro vertical */
    left: -100px;                 /* Posición izquierda */
    transform: translateY(-50%);   /* Ajuste de centrado */
}

/* Add these styles for service2 section */
.service2 .service-welcome {
    flex-direction: row;  /* Changed from row-reverse to row */
}

.service2 .welcome-content {
    padding-right: 0;
    padding-left: 4rem;
}

@media (max-width: 768px) {
    .service2 .service-welcome {
        flex-direction: column;
    }

    .service2 .welcome-content {
        padding-left: 0;
        text-align: center;
    }
}

/* Sección del slider de promociones */
.promo-slider-section {
    padding: 4rem 2rem;           /* Espaciado interno */
    background: #f8f9ff;          /* Fondo gris muy claro */
}

/* Título de la sección */
.section-title {
    text-align: center;           /* Centrado del texto */
    font-size: 2.5rem;            /* Tamaño de fuente */
    color: #333;                  /* Color gris oscuro */
    margin-bottom: 3rem;          /* Espacio inferior */
}

/* Contenedor del slider */
.slider-container {
    max-width: 1200px;           /* Ancho máximo */
    margin: 0 auto;              /* Centrado horizontal */
    overflow: hidden;            /* Oculta desbordamiento */
    padding: 1rem;               /* Espaciado interno */
}

/* Slider con animación */
.promo-slider {
    display: flex;               /* Disposición flexible */
    gap: 2rem;                  /* Espacio entre elementos */
    animation: scroll 20s linear infinite; /* Animación continua */
}

/* Pausa de animación al hover */
.promo-slider:hover {
    animation-play-state: paused; /* Pausa la animación */
}

/* Tarjeta promocional individual */
.promo-card {
    min-width: 280px;              /* Ancho mínimo */
    height: 400px;                 /* Altura fija */
    position: relative;            /* Para posicionamiento absoluto */
    border-radius: 20px;          /* Esquinas redondeadas */
    overflow: hidden;             /* Oculta desbordamiento */
    box-shadow: 0 10px 20px rgba(35, 86, 16, 0.1);
    border-color: rgba(125, 209, 129, 0.3);
    transform: translateY(-5px);
}

/* Imagen de la tarjeta */
.promo-card img {
    width: 100%;                  /* Ancho completo */
    height: 100%;                 /* Alto completo */
    object-fit: cover;            /* Ajuste de imagen */
}

/* Superposición oscura */
.card-overlay {
    position: absolute;           /* Posicionamiento absoluto */
    top: 0;                      /* Desde arriba */
    left: 0;                     /* Desde la izquierda */
    width: 100%;                 /* Ancho completo */
    height: 100%;                /* Alto completo */
    background: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
    display: flex;               /* Disposición flexible */
    align-items: center;         /* Centrado vertical */
    justify-content: center;     /* Centrado horizontal */
    opacity: 0;                  /* Inicialmente invisible */
    transition: opacity 0.3s ease; /* Transición suave */
}

/* Efectos al pasar el mouse sobre la tarjeta */
.promo-card:hover {
    transform: translateY(-10px);     /* Elevación de la tarjeta */
}

.promo-card:hover .card-overlay {
    opacity: 1;                       /* Muestra la superposición */
}

/* Botón de promoción */
.promo-btn {
    padding: 1rem 2rem;              /* Espaciado interno */
    background: var(--accent-color, #C084FC); /* Color de fondo */
    color: white;                    /* Color de texto */
    border: none;                    /* Sin borde */
    border-radius: 30px;             /* Bordes redondeados */
    font-size: 1.1rem;              /* Tamaño de fuente */
    cursor: pointer;                 /* Cursor tipo puntero */
    transition: all 0.3s ease;       /* Transición suave */
    transform: translateY(20px);     /* Posición inicial */
    opacity: 0;                      /* Inicialmente invisible */
}

/* Efectos al pasar el mouse */
.promo-card:hover .promo-btn {
    transform: translateY(0);        /* Regresa a posición normal */
    opacity: 1;                      /* Hace visible el botón */
}

/* Animación de desplazamiento */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-282px * 4));
    }
}

/* Media Queries y Responsividad */
@media (max-width: 992px) {
    .promo-card {
        min-width: 240px;          /* Reducción del ancho mínimo */
        height: 350px;             /* Reducción de la altura */
    }
}

/* Ajustes para tablets */
@media (max-width: 768px) {
    .promo-card {
        min-width: 200px;          /* Ancho mínimo más pequeño */
        height: 300px;             /* Altura más pequeña */
    }
    
    .promo-btn {
        padding: 0.8rem 1.5rem;    /* Padding más pequeño */
        font-size: 1rem;           /* Fuente más pequeña */
    }
}

/* Ajustes para móviles */
@media (max-width: 576px) {
    .promo-card {
        min-width: 180px;          /* Ancho mínimo aún más pequeño */
        height: 250px;             /* Altura aún más pequeña */
    }
    
    .section-title {
        font-size: 2rem;           /* Título más pequeño */
    }
}

/* Sección de servicio 2 */
.service2 .service-welcome {
    flex-direction: row;          /* Dirección de los elementos */
}

.service2 .welcome-content {
    padding-right: 0;             /* Sin relleno derecho */
    padding-left: 4rem;           /* Relleno izquierdo */
}

/* Ajustes responsivos */
@media (max-width: 768px) {
    .service2 .service-welcome {
        flex-direction: column;    /* Cambio a disposición vertical */
    }

    .service2 .welcome-content {
        padding-left: 0;          /* Elimina relleno izquierdo */
        text-align: center;       /* Centra el texto */
    }
}

/* Líneas decorativas */
.top-line {
    width: 80px;                  /* Ancho fijo */
    top: -20px;                   /* Posición superior */
    left: 0;                      /* Alineado a la izquierda */
    opacity: 0.3;                 /* Semi-transparente */
}

.pricing-circle {
    width: 200px;                 /* Ancho fijo */
    top: 50%;                     /* Centro vertical */
    left: -100px;                 /* Posición izquierda */
    transform: translateY(-50%);   /* Ajuste de centrado */
}

/* Add these styles for service2 section */
.service2 .service-welcome {
    flex-direction: row;  /* Changed from row-reverse to row */
}

.service2 .welcome-content {
    padding-right: 0;
    padding-left: 4rem;
}

@media (max-width: 768px) {
    .service2 .service-welcome {
        flex-direction: column;
    }

    .service2 .welcome-content {
        padding-left: 0;
        text-align: center;
    }
}

/* Sección del slider de promociones */
.promo-slider-section {
    padding: 4rem 2rem;           /* Espaciado interno */
    background: #f8f9ff;          /* Fondo gris muy claro */
}

/* Título de la sección */
.section-title {
    text-align: center;           /* Centrado del texto */
    font-size: 2.5rem;            /* Tamaño de fuente */
    color: #333;                  /* Color gris oscuro */
    margin-bottom: 3rem;          /* Espacio inferior */
}

/* Contenedor del slider */
.slider-container {
    max-width: 1200px;           /* Ancho máximo */
    margin: 0 auto;              /* Centrado horizontal */
    overflow: hidden;            /* Oculta desbordamiento */
    padding: 1rem;               /* Espaciado interno */
}

/* Slider con animación */
.promo-slider {
    display: flex;               /* Disposición flexible */
    gap: 2rem;                  /* Espacio entre elementos */
    animation: scroll 20s linear infinite; /* Animación continua */
}

/* Pausa de animación al hover */
.promo-slider:hover {
    animation-play-state: paused; /* Pausa la animación */
}

/* Tarjeta promocional individual */
.promo-card {
    min-width: 280px;              /* Ancho mínimo */
    height: 400px;                 /* Altura fija */
    position: relative;            /* Para posicionamiento absoluto */
    border-radius: 20px;          /* Esquinas redondeadas */
    overflow: hidden;             /* Oculta desbordamiento */
    box-shadow: 0 10px 20px rgba(35, 86, 16, 0.1);
    border-color: rgba(125, 209, 129, 0.3);
    transform: translateY(-5px);
}

/* Imagen de la tarjeta */
.promo-card img {
    width: 100%;                  /* Ancho completo */
    height: 100%;                 /* Alto completo */
    object-fit: cover;            /* Ajuste de imagen */
}

/* Superposición oscura */
.card-overlay {
    position: absolute;           /* Posicionamiento absoluto */
    top: 0;                      /* Desde arriba */
    left: 0;                     /* Desde la izquierda */
    width: 100%;                 /* Ancho completo */
    height: 100%;                /* Alto completo */
    background: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
    display: flex;               /* Disposición flexible */
    align-items: center;         /* Centrado vertical */
    justify-content: center;     /* Centrado horizontal */
    opacity: 0;                  /* Inicialmente invisible */
    transition: opacity 0.3s ease; /* Transición suave */
}

/* Efectos al pasar el mouse sobre la tarjeta */
.promo-card:hover {
    transform: translateY(-10px);     /* Elevación de la tarjeta */
}

.promo-card:hover .card-overlay {
    opacity: 1;                       /* Muestra la superposición */
}

/* Botón de promoción */
.promo-btn {
    padding: 1rem 2rem;              /* Espaciado interno */
    background: var(--accent-color, #C084FC); /* Color de fondo */
    color: white;                    /* Color de texto */
    border: none;                    /* Sin borde */
    border-radius: 30px;             /* Bordes redondeados */
    font-size: 1.1rem;              /* Tamaño de fuente */
    cursor: pointer;                 /* Cursor tipo puntero */
    transition: all 0.3s ease;       /* Transición suave */
    transform: translateY(20px);     /* Posición inicial */
    opacity: 0;                      /* Inicialmente invisible */
}

/* Efectos al pasar el mouse */
.promo-card:hover .promo-btn {
    transform: translateY(0);        /* Regresa a posición normal */
    opacity: 1;                      /* Hace visible el botón */
}

/* Animación de desplazamiento */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-282px * 4));
    }
}

/* Media Queries y Responsividad */
@media (max-width: 992px) {
    .promo-card {
        min-width: 240px;          /* Reducción del ancho mínimo */
        height: 350px;             /* Reducción de la altura */
    }
}

/* Ajustes para tablets */
@media (max-width: 768px) {
    .promo-card {
        min-width: 200px;          /* Ancho mínimo más pequeño */
        height: 300px;             /* Altura más pequeña */
    }
    
    .promo-btn {
        padding: 0.8rem 1.5rem;    /* Padding más pequeño */
        font-size: 1rem;           /* Fuente más pequeña */
    }
}

/* Ajustes para móviles */
@media (max-width: 576px) {
    .promo-card {
        min-width: 180px;          /* Ancho mínimo aún más pequeño */
        height: 250px;             /* Altura aún más pequeña */
    }
    
    .section-title {
        font-size: 2rem;           /* Título más pequeño */
    }
}

/* Sección de servicio 2 */
.service2 .service-welcome {
    flex-direction: row;          /* Dirección de los elementos */
}

.service2 .welcome-content {
    padding-right: 0;             /* Sin relleno derecho */
    padding-left: 4rem;           /* Relleno izquierdo */
}

/* Ajustes responsivos */
@media (max-width: 768px) {
    .service2 .service-welcome {
        flex-direction: column;    /* Cambio a disposición vertical */
    }

    .service2 .welcome-content {
        padding-left: 0;          /* Elimina relleno izquierdo */
        text-align: center;       /* Centra el texto */
    }
}

/* Líneas decorativas */
.top-line {
    width: 80px;                  /* Ancho fijo */
    top: -20px;                   /* Posición superior */
    left: 0;                      /* Alineado a la izquierda */
    opacity: 0.3;                 /* Semi-transparente */
}

.pricing-circle {
    width: 200px;                 /* Ancho fijo */
    top: 50%;                     /* Centro vertical */
    left: -100px;                 /* Posición izquierda */
    transform: translateY(-50%);   /* Ajuste de centrado */
}

/* Add these styles for service2 section */
.service2 .service-welcome {
    flex-direction: row;  /* Changed from row-reverse to row */
}

.service2 .welcome-content {
    padding-right: 0;
    padding-left: 4rem;
}

@media (max-width: 768px) {
    .service2 .service-welcome {
        flex-direction: column;
    }

    .service2 .welcome-content {
        padding-left: 0;
        text-align: center;
    }
}

/* Sección del slider de promociones */
.promo-slider-section {
    padding: 4rem 2rem;           /* Espaciado interno */
    background: #f8f9ff;          /* Fondo gris muy claro */
}

/* Título de la sección */
.section-title {
    text-align: center;           /* Centrado del texto */
    font-size: 2.5rem;            /* Tamaño de fuente */
    color: #333;                  /* Color gris oscuro */
    margin-bottom: 3rem;          /* Espacio inferior */
}

/* Contenedor del slider */
.slider-container {
    max-width: 1200px;           /* Ancho máximo */
    margin: 0 auto;              /* Centrado horizontal */
    overflow: hidden;            /* Oculta desbordamiento */
    padding: 1rem;               /* Espaciado interno */
}