/* HOME */

#home-page {
    padding: 0;
    margin: 0;
}

/* Hero Section */
.hero {
    /* Aplica una superposición oscura sobre la imagen de fondo */
    background: linear-gradient(135deg, rgba(26,26,26,0.7), rgba(51,51,51,0.7)), 
                url('ruta/de/tu-imagen.jpg'); /* Reemplaza con la ruta de tu imagen */
    background-position: right center; /* Ubica la imagen a la derecha */
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    text-align: center;
    padding: 120px 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

/* Convertir el contenedor interno en flex container */
.hero .container {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Alinea los elementos al inicio (izquierda) */
}

/* Alinear el contenido de texto a la izquierda */
.hero-content {
    text-align: left;
}

/* Empujar la imagen a la derecha */
.hero-image {
    margin-left: auto;
}


.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 15px;
    animation: fadeInDown 1s ease-in-out;
}

.hero p {
    font-size: 1.4rem;
    margin-bottom: 25px;
    animation: fadeInUp 1s ease-in-out;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.hero .btn-primary,
.hero .btn-secondary {
    background: #27ae60;  /* Verde */
    color: #fff;
    padding: 15px 35px;
    border-radius: 25px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.5); 
    transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.hero .btn-secondary {
    background: #fff;
    color: #27ae60;
    border: 2px solid #27ae60;
}

.hero .btn-primary:hover,
.hero .btn-secondary:hover {
    background: #219150;
    box-shadow: 0 4px 20px rgba(39, 174, 96, 0.8);
}

.hero-image img {
    max-width: 400px;
    animation: fadeInRight 1s ease-in-out;
}

/* Servicios */
.servicios {
    background: #f5f5f5;
    padding: 80px 20px;
}

.servicios-grid {
    display: flex; /* Cambio a fila */
    gap: 30px;
}

.servicio {
    background: #fff;
    padding: 25px;
    border: 2px solid #27ae60;
    border-radius: 12px;
    text-align: center;
    flex: 1;
    box-shadow: 0 4px 10px rgba(39, 174, 96, 0.3); 
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.servicio:hover {
    transform: translateY(-10px);
    box-shadow: 0 4px 20px rgba(39, 174, 96, 0.6); 
}

/* FAQ */
.faq {
    background: #fff;
    padding: 60px 20px;
}

.faq-item {
    background: #27ae60;
    color: #fff;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(39, 174, 96, 0.3);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.faq-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(39, 174, 96, 0.6);
}

.faq-item h3 {
    font-size: 1.4rem;
    margin-bottom: 5px;
}

.faq-item p {
    font-size: 1.2rem;
}

/* Contacto */
.contacto {
    background: linear-gradient(135deg, #333, #1a1a1a);
    color: #fff;
    text-align: center;
    padding: 80px 20px;
}

.contacto .btn-primary {
    background: #27ae60;
    color: #fff;
    padding: 15px 35px;
    border-radius: 25px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.5);
    transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.contacto .btn-primary:hover {
    background: #219150;
    box-shadow: 0 4px 20px rgba(39, 174, 96, 0.8);
}

/* SERVICIOS AVANZADOS */

/* Introducción */
.intro {
    background: linear-gradient(135deg, #1a1a1a, #333);
    color: #fff;
    display: flex;
    align-items: center;
    padding: 80px 20px;
}

.intro-content {
    max-width: 600px;
}

.intro h1 {
    font-size: 3rem;
    margin-bottom: 15px;
}

.intro p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.intro .btn-primary {
    background: #27ae60;
    color: #fff;
    padding: 15px 35px;
    border-radius: 25px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.5);
    transition: background 0.3s ease-in-out;
}

.intro .btn-primary:hover {
    background: #219150;
}

/* Servicios Avanzados */
.servicios-avanzados {
    background: #f5f5f5;
    padding: 60px 20px;
}

.servicios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.servicio i {
    font-size: 3rem;
    color: #27ae60;
    margin-bottom: 15px;
}

/* Beneficios */
.beneficios {
    background: #27ae60;
    color: #fff;
    text-align: center;
    padding: 60px 20px;
}

.beneficios ul {
    list-style: none;
    padding: 0;
}

.beneficios li {
    margin-bottom: 10px;
}

/* Animaciones */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

/* CONTACTO */

#contacto {
    padding: 0;
    margin: 0;
}

/* Introducción */
.intro-contacto {
    background: linear-gradient(135deg, #1a1a1a, #333);
    color: #fff;
    text-align: center;
    padding: 100px 20px;
}

.intro-contacto h1 {
    font-size: 3rem;
    margin-bottom: 10px;
}

.intro-contacto p {
    font-size: 1.2rem;
}

/* Formulario de Contacto */
.formulario-contacto {
    background: #f5f5f5;
    padding: 60px 20px;
}

.formulario-contacto h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #27ae60;
}

form {
    max-width: 600px;
    margin: 0 auto;
}

.campo {
    margin-bottom: 20px;
}

.campo label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.campo input,
.campo textarea {
    width: 100%;
    padding: 10px;
    border: 2px solid #27ae60;
    border-radius: 8px;
    background: #fff;
    transition: border 0.3s ease-in-out;
}

.campo input:focus,
.campo textarea:focus {
    border-color: #219150;
    outline: none;
}

.boton-enviar {
    text-align: center;
    margin-top: 20px;
}

.boton-enviar .btn-primary {
    background: #27ae60;
    color: #fff;
    padding: 12px 30px;
    border-radius: 25px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.5);
    transition: background 0.3s ease-in-out;
}

.boton-enviar .btn-primary:hover {
    background: #219150;
}

/* Información adicional */
.info-contacto {
    background: #fff;
    padding: 40px 20px;
    text-align: center;
}

.info-contacto h2 {
    color: #27ae60;
    margin-bottom: 20px;
}

.info-contacto p {
    margin: 5px 0;
    font-size: 1.2rem;
}

/* CTA Final */
.cta-final {
    background: #27ae60;
    color: #fff;
    text-align: center;
    padding: 60px 20px;
}

.cta-final h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.cta-final p {
    font-size: 1.2rem;
}
.site-content {
    display: block!important;
}