/* Estilos para corregir el header */
:root {
    --header-height: 80px;
}

.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--header-height) !important;
    display: flex !important;
    align-items: center !important;
    z-index: 1000 !important;
}

/* Explícitamente eliminar la línea del header */
.header::after {
    display: none !important;
    content: none !important;
}

.header .container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    height: 100% !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
}

/* Corregir estilos de la sección hero */
.hero {
    height: auto !important;
    min-height: 80vh !important;
    padding: 8rem 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.hero::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url('../assets/images/binary.jpg') !important;
    background-size: var(--bg-size) !important;
    /* Usa la variable CSS */
    background-position: var(--bg-position) !important;
    /* Usa la variable CSS */
    background-repeat: no-repeat !important;
    filter: brightness(0.4) !important;
    z-index: 0 !important;
    opacity: 0.8 !important;
    clip-path: polygon(50% 100%, 100% 100%, 100% 0, 65% 0) !important;
    /* Corte diagonal específico */
}

.hero::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(to right, rgba(25, 26, 31, 0.95), rgba(25, 26, 31, 0.6), rgba(25, 26, 31, 0.4)) !important;
    /* Gradiente de tres partes */
    z-index: 1 !important;
}

.hero .container {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    /* Alineado a la izquierda */
}

.hero-content {
    max-width: 800px !important;
    text-align: left !important;
    margin: 0 0 0 2rem !important;
    z-index: 3 !important;
    padding: 0 !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
    position: relative !important;
    /* Eliminada la animación de float */
}

/* Mejoras para el texto del hero */
.hero-content h2 {
    color: #3A86FF !important;
    /* Cambiado de var(--color-primary) a #3A86FF (Azul Cobalto Digital) */
    margin-bottom: 1.5rem !important;
    text-align: left !important;
    letter-spacing: 1px !important;
    font-size: 6.8rem !important;
    /* Aumentado de 5.6rem a 6.8rem (aproximadamente un 20% más grande) */
    font-weight: 700 !important;
    line-height: 1.1 !important;
    /* Ajustado para mejor legibilidad con el tamaño aumentado */
}

.hero-content p {
    color: var(--color-white) !important;
    font-size: 2rem !important;
    margin-bottom: 3rem !important;
    line-height: 1.6 !important;
    text-align: left !important;
}

/* Mejora para el botón de contacto */
/* Estilo unificado para todos los botones */
.btn-primary {
    padding: 1.2rem 3rem !important;
    font-size: 1.8rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent)) !important;
    border: none !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    border-radius: 3rem !important;
}

.btn-primary:hover {
    transform: translateY(-3px) !important;
    box-shadow: none !important;
}

/* Mantener los estilos específicos del botón del hero */
.hero-content .btn-primary {
    /* Los estilos ya están aplicados por la clase general */
}

.hero-content .btn-primary::before {
    display: none !important;
    content: none !important;
}

.hero-content .btn-primary:hover {
    transform: translateY(-3px) !important;
    box-shadow: none !important;
}

.hero-content .btn-primary:hover::before {
    left: 100% !important;
}

/* Responsive para pantallas pequeñas */
@media screen and (max-width: 768px) {
    .hero {
        padding: 6rem 0 !important;
    }

    .hero-content {
        padding: 1.5rem !important;
        margin: 0 auto !important;
        /* Centrado en móviles */
        text-align: center !important;
        /* Texto centrado en móviles */
    }

    .hero-content h2 {
        font-size: 4.2rem !important;
        /* Aumentado de 3.5rem a 4.2rem (20% más grande) */
        text-align: center !important;
    }

    .hero-content p {
        font-size: 2.5rem !important;
        text-align: center !important;
    }

    .hero-content .btn-primary {
        padding: 1rem 2.5rem !important;
        font-size: 1.6rem !important;
    }

    .hero::before {
        background-position: center center !important;
        /* Centrado en móviles */
    }
}

/* Variables para el control dinámico del fondo */
.hero {
    --bg-size: 100% auto;
    --bg-position: 8% center;
}

/* Añadir elementos visuales para anclar el contenido */
.hero-content::before,
.hero-content::after,
.hero .container::after {
    display: none !important;
}

/* Animación de flotación para el contenido */
@keyframes float {
    0% {
        transform: translateY(0px) translateX(0px);
    }

    25% {
        transform: translateY(-10px) translateX(5px);
    }

    50% {
        transform: translateY(0px) translateX(10px);
    }

    75% {
        transform: translateY(10px) translateX(5px);
    }

    100% {
        transform: translateY(0px) translateX(0px);
    }
}

/* Efecto de brillo en los bordes */
.hero-content {
    position: relative !important;
    overflow: hidden !important;
}

.hero-content::before {
    content: none !important;
    display: none !important;
}

@keyframes rotate {
    from {
        transform: none;
    }

    to {
        transform: none;
    }
}

/* Ajustes responsive para el efecto flotante */
@media screen and (max-width: 768px) {
    .hero-content {
        /* Eliminada la animación de float */
        padding: 1.5rem !important;
        margin: 0 auto !important;
        /* Centrado en móviles */
        text-align: center !important;
        /* Texto centrado en móviles */
    }
}

/* Efecto de elevación estática */
.hero-content {
    transform: none !important;
    transition: none !important;
}

.hero-content:hover {
    transform: none !important;
}

/* Efecto de borde brillante estático - ELIMINADO DEL HERO */
.hero-content::after {
    display: none !important;
}

/* Aplicar el borde brillante a las tarjetas de servicios */
.servicio-card {
    position: relative !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    /* Mantener un borde sutil */
}

/* Eliminar completamente el pseudo-elemento que crea el borde con gradiente */
.servicio-card::after {
    display: none !important;
    content: none !important;
}

/* Mejora para las tarjetas de servicios */
.servicio-card:hover {
    transform: translateY(-15px) !important;
}

/* Mejorar la transición de las tarjetas */
.servicio-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}

/* Sobrescribir los estilos de botones del archivo principal */
.btn {
    display: inline-block !important;
    padding: 1.2rem 3rem !important;
    border-radius: 3rem !important;
    font-weight: 600 !important;
    font-size: 1.8rem !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

/* Cambiar el color de todos los botones primarios a #3A86FF */
.btn-primary {
    background: #3A86FF !important;
    /* Color sólido en lugar de gradiente */
}

.btn-primary:hover {
    transform: translateY(-3px) !important;
    box-shadow: none !important;
}

/* Hacer que cada sección ocupe exactamente una pantalla */
.section {
    min-height: 100vh !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Ajuste para el hero que ya tiene sus propios estilos */
.hero {
    min-height: 100vh !important;
    height: 100vh !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Ajuste para el contenido dentro de las secciones */
.section .container {
    width: 100% !important;
    max-width: var(--container-width) !important;
    padding: 2rem !important;
    margin: 0 auto !important;
}

/* Ajuste para dispositivos móviles */
@media screen and (max-width: 768px) {
    .section {
        padding: 2rem 0 !important;
        height: auto !important;
        min-height: 100vh !important;
    }
}

/* Ajustes para la sección de contacto */
.contacto {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.contacto .container {
    width: 100% !important;
    max-width: 1200px !important;
}

.contacto-content {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3rem !important;
    justify-content: space-between !important;
}

.contacto-info {
    flex: 1 !important;
    min-width: 300px !important;
}

.contacto-form {
    flex: 1 !important;
    min-width: 300px !important;
    padding: 2.5rem !important;
    max-width: 600px !important;
}

/* Reducir tamaño de elementos del formulario */
.form-group {
    margin-bottom: 1.5rem !important;
}

.form-group label {
    font-size: 1.4rem !important;
    margin-bottom: 0.5rem !important;
}

.form-group input,
.form-group textarea {
    padding: 1rem !important;
    font-size: 1.4rem !important;
}

.form-group textarea {
    height: 120px !important;
}

/* Ajustar elementos de información de contacto */
.info-item {
    margin-bottom: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
}

.info-icon {
    width: 40px !important;
    height: 40px !important;
    margin-right: 1rem !important;
}

.info-text h3 {
    font-size: 1.6rem !important;
    margin-bottom: 0.3rem !important;
}

.info-text p {
    font-size: 1.4rem !important;
    margin-bottom: 0 !important;
}

/* Ajustes responsive para la sección de contacto */
@media screen and (max-width: 768px) {
    .contacto-content {
        flex-direction: column !important;
    }

    .contacto-info,
    .contacto-form {
        width: 100% !important;
    }

    .contacto-form {
        padding: 1.5rem !important;
    }
}

/* Ajustes para la sección de recursos */
.recursos {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-y: auto !important;
    /* Permitir scroll vertical dentro de la sección si es necesario */
}

.recursos .container {
    width: 100% !important;
    max-width: 1200px !important;
    padding: 2rem !important;
}

/* Ajustar el tamaño de la introducción */
.recursos-intro {
    font-size: 1.6rem !important;
    margin-bottom: 2rem !important;
    max-width: 700px !important;
}

/* Ajustar el grid de recursos */
.recursos-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
    margin-bottom: 2rem !important;
}

/* Reducir el tamaño de las tarjetas */
.recurso-card {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Ajustar la altura de las imágenes */
.recurso-image {
    height: 150px !important;
}

/* Reducir el padding del contenido */
.recurso-info {
    padding: 1.5rem !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Ajustar tamaños de texto */
.recurso-info h3 {
    font-size: 1.4rem !important;
    margin-bottom: 0.3rem !important;
}

.recurso-info h4 {
    font-size: 1.6rem !important;
    margin-bottom: 0.5rem !important;
}

.recurso-info p {
    font-size: 1.3rem !important;
    margin-bottom: 1rem !important;
    flex: 1 !important;
}

/* Ajustar el CTA */
.recursos-cta {
    padding: 2rem !important;
    margin-top: 1.5rem !important;
}

.recursos-cta h3 {
    font-size: 2rem !important;
    margin-bottom: 0.5rem !important;
}

.recursos-cta p {
    font-size: 1.4rem !important;
    margin-bottom: 1.5rem !important;
}

/* Ajustes responsive */
@media screen and (max-width: 1200px) {
    .recursos-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media screen and (max-width: 768px) {
    .recursos-grid {
        grid-template-columns: 1fr !important;
    }

    .recurso-image {
        height: 180px !important;
        /* Un poco más grande en móvil para mejor visualización */
    }

    .recursos-cta {
        padding: 1.5rem !important;
    }
}

/* Asegurar que los botones en la sección de recursos tengan el mismo estilo que los botones primarios */
.recurso-info .btn {
    width: 100% !important;
    text-align: center !important;
    margin-top: auto !important;
}

/* Ajustar el tamaño del botón para que se vea mejor en las tarjetas */
.recurso-info .btn {
    padding: 0.8rem 1.5rem !important;
    font-size: 1.4rem !important;
}

/* Estilos para el carrusel de servicios - Versión corregida */
.servicios-carousel {
    position: relative !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.carousel-container {
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    padding: 1rem 0 !important;
}

.carousel-track {
    display: flex !important;
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
    gap: 2rem !important;
}

/* Ajuste para tarjetas más altas en el carrusel */
.servicio-card {
    flex: 0 0 calc((100% - 4rem) / 3) !important;
    /* 3 tarjetas con 2rem de espacio entre ellas */
    width: calc((100% - 4rem) / 3) !important;
    margin: 0 !important;
    background-color: rgba(26, 26, 26, 1) !important;
    /* Cambiado a opacidad completa */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 1.5rem !important;
    padding: 3rem !important;
    box-shadow: none !important;
    text-align: center !important;
    transition: transform 0.3s ease !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    position: relative !important;
    overflow: hidden !important;
    height: 856px !important;
    /* Aumentado en un 20% adicional (713px * 1.2 = 856px) */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}
}

/* Iconos más grandes */
.servicio-icon {
    width: 9.5rem !important;
    height: 9.5rem !important;
    margin: 0 auto 2.5rem !important;
    transition: transform 0.3s ease !important;
}

/* Títulos más grandes */
.servicio-card h3 {
    font-size: 2.5rem !important;
    margin-bottom: 1.8rem !important;
    color: var(--color-title) !important;
}

/* Texto más grande */
.servicio-card p {
    font-size: 1.7rem !important;
    margin-bottom: 4.5rem !important;
    flex-grow: 1 !important;
    color: var(--color-text) !important;
    line-height: 1.7 !important;
}

/* Botón más grande */
.servicio-card .btn {
    margin-top: auto !important;
    padding: 1.3rem 2.2rem !important;
    font-size: 1.7rem !important;
}

/* Ajustes responsive para mantener la proporción */
@media screen and (max-width: 1200px) {
    .servicio-card {
        flex: 0 0 calc((100% - 2rem) / 2) !important;
        width: calc((100% - 2rem) / 2) !important;
        height: 773px !important;
        /* Aumentado en un 20% (644px * 1.2 = 773px) */
    }

    .servicio-icon {
        width: 7rem !important;
        height: 7rem !important;
    }
}

@media screen and (max-width: 768px) {
    .servicio-card {
        flex: 0 0 100% !important;
        width: 100% !important;
        height: 800px !important;
        /* Aumentado en un 20% (667px * 1.2 = 800px) */
    }

    .servicio-icon {
        width: 6.5rem !important;
        height: 6.5rem !important;
    }
}

/* Controles del carrusel */
.carousel-controls {
    display: flex !important;
    justify-content: space-between !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    pointer-events: none !important;
    padding: 0 1rem !important;
}

.carousel-button {
    background-color: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) !important;
}

.carousel-button:hover {
    background-color: rgba(0, 229, 255, 0.3) !important;
    transform: scale(1.1) !important;
}

.carousel-button svg {
    width: 20px !important;
    height: 20px !important;
    fill: white !important;
}

/* Indicadores del carrusel */
.carousel-indicators {
    display: flex !important;
    justify-content: center !important;
    margin-top: 2rem !important;
    gap: 0.8rem !important;
}

.indicator {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.3) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
}

.indicator.active {
    background-color: var(--color-primary) !important;
    transform: scale(1.2) !important;
    box-shadow: 0 0 10px var(--color-primary) !important;
}

/* Ajustes responsive para el carrusel */
@media screen and (max-width: 1200px) {
    .servicio-card {
        flex: 0 0 calc((100% - 2rem) / 2) !important;
        /* 2 tarjetas con 2rem de espacio entre ellas */
        width: calc((100% - 2rem) / 2) !important;
    }
}

@media screen and (max-width: 768px) {
    .servicio-card {
        flex: 0 0 100% !important;
        /* 1 tarjeta que ocupa todo el ancho */
        width: 100% !important;
        height: 380px !important;
    }

    .carousel-button {
        width: 36px !important;
        height: 36px !important;
    }
}

/* Ajustes adicionales para el carrusel */
.servicios .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.servicio-card {
    background-color: rgba(26, 26, 26, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 1.5rem !important;
    padding: 2rem !important;
    text-align: center !important;
    transition: var(--transition) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    position: relative !important;
    overflow: hidden !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.servicio-icon {
    width: 6rem !important;
    height: 6rem !important;
    margin: 0 auto 1.5rem !important;
}

.servicio-card h3 {
    font-size: 1.8rem !important;
    margin-bottom: 1rem !important;
}

.servicio-card p {
    font-size: 1.4rem !important;
    margin-bottom: 1.5rem !important;
    flex-grow: 1 !important;
}

.servicio-card .btn {
    margin-top: auto !important;
}

/* Mantener solo el efecto de elevación suave al hover, sin cambio de borde */
.servicio-card:hover {
    transform: translateY(-5px) !important;
    /* Eliminado el cambio de color del borde */
}

/* Mantener el efecto hover para los iconos */
.servicio-card:hover .servicio-icon {
    transform: scale(1.1) !important;
}

/* Mejorar la distribución vertical del contenido */
.servicio-card {
    justify-content: flex-start !important;
}

.servicio-card .btn {
    margin-top: auto !important;
    margin-bottom: 0.5rem !important;
}

/* Fondo sólido para las tarjetas (sin gradiente) */
.servicio-card {
    background-color: rgba(26, 26, 26, 0.8) !important;
    background-image: none !important;
}

/* Mejorar la visualización de los iconos */
.servicio-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    filter: none !important;
}

/* Ajustar el espaciado interno para aprovechar la altura adicional */
.servicio-card {
    padding: 3rem !important;
    /* Aumentado de 2.5rem a 3rem */
}

/* Aumentar el tamaño de los iconos */
.servicio-icon {
    width: 9rem !important;
    /* Aumentado de 8rem a 9rem */
    height: 9rem !important;
    /* Aumentado de 8rem a 9rem */
    margin: 0 auto 2.5rem !important;
    /* Aumentado el margen inferior */
}

/* Aumentar el tamaño de los títulos */
.servicio-card h3 {
    font-size: 2.4rem !important;
    /* Aumentado de 2.2rem a 2.4rem */
    margin-bottom: 1.8rem !important;
    /* Aumentado de 1.5rem a 1.8rem */
}

/* Aumentar el tamaño del texto */
.servicio-card p {
    font-size: 1.7rem !important;
    /* Aumentado de 1.6rem a 1.7rem */
    line-height: 1.7 !important;
    /* Aumentado de 1.6 a 1.7 */
    margin-bottom: 2.5rem !important;
    /* Aumentado de 2rem a 2.5rem */
}

/* Aumentar el tamaño del botón */
.servicio-card .btn {
    padding: 1.3rem 2.2rem !important;
    /* Aumentado de 1.2rem 2rem a 1.3rem 2.2rem */
    font-size: 1.7rem !important;
    /* Aumentado de 1.6rem a 1.7rem */
}

/* Ajustar la distribución vertical para aprovechar el espacio adicional */
.servicio-card {
    justify-content: flex-start !important;
}

/* Añadir espacio adicional entre los elementos para distribuir mejor el espacio vertical */
.servicio-card .servicio-icon {
    margin-top: 2rem !important;
}

.servicio-card p {
    margin-top: 2rem !important;
}

.servicio-card .btn {
    margin-bottom: 2rem !important;
}

/* Ajustar la posición de los títulos de sección para una distancia adecuada del header */
.section-title {
    padding-top: calc(var(--header-height) + 2rem);
    margin-bottom: 3rem;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .section-title {
        padding-top: calc(var(--header-height) + 1rem);
        font-size: 3.2rem;
    }
}

/* Ajuste específico para el título de la sección Nosotros */
#nosotros .section-title {
    margin-top: -8vh !important;
    /* Reducido para alejar del header */
    position: relative !important;
    top: -2vh !important;
    /* Reducido de -5vh a -2vh */
}

/* Asegurar consistencia en dispositivos móviles */
@media screen and (max-width: 768px) {
    #nosotros .section-title {
        margin-top: -5vh !important;
        top: -1vh !important;
        /* Reducido de -3vh a -1vh */
    }
}

/* Ajuste específico para el título de la sección Recursos */
#recursos .section-title {
    margin-top: -8vh !important;
    /* Reducido para alejar del header */
    position: relative !important;
    top: -2vh !important;
    /* Reducido de -5vh a -2vh */
}

/* Asegurar consistencia en dispositivos móviles */
@media screen and (max-width: 768px) {
    #recursos .section-title {
        margin-top: -5vh !important;
        top: -1vh !important;
        /* Reducido de -3vh a -1vh */
    }
}

/* Ajuste para evitar que el texto del hero se sobreponga a la imagen de fondo */
.hero-content {
    position: relative !important;
    z-index: 5 !important;
    /* Valor más alto para asegurar que esté por encima de todo */
    /*    background-color: rgba(25, 26, 31, 0.7) !important; /* Fondo semi-transparente */
    padding: 3rem !important;
    /* Padding para separar el texto del borde */
    /*    border-radius: 1rem !important; /* Bordes redondeados */
    backdrop-filter: blur(5px) !important;
    /* Efecto de desenfoque */
    -webkit-backdrop-filter: blur(5px) !important;
    /*    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2) !important; /* Sombra sutil */
    /*    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Borde sutil */
    width: 55% !important;
    /* Limitar el ancho */
    max-width: 600px !important;
}

/* Cambiar el color de todos los botones primarios a #3A86FF */
.btn-primary {
    background: #3A86FF !important;
    /* Color sólido en lugar de gradiente */
}

/* Estilos para validación de formulario */
.form-hint {
    display: block;
    font-size: 1.2rem;
    color: #999;
    margin-top: 0.3rem;
}

.error-message {
    color: #ff3333;
    font-size: 1.3rem;
    margin-top: 0.5rem;
    font-weight: 500;
}

.input-error {
    border: 1px solid #ff3333 !important;
    background-color: rgba(255, 51, 51, 0.05) !important;
}

.form-group {
    margin-bottom: 2rem !important;
}

.privacy-policy {
    display: flex !important;
    align-items: flex-start !important;
    gap: 1rem !important;
}

.privacy-policy input[type="checkbox"] {
    margin-top: 0.3rem !important;
}

.privacy-policy label {
    font-size: 1.4rem !important;
    line-height: 1.4 !important;
}

.privacy-policy a {
    color: #3A86FF !important;
    text-decoration: underline !important;
}

.g-recaptcha {
    margin-bottom: 2rem !important;
}

#contacto {
    padding-top: calc(var(--header-height) + 3rem) !important;
    padding-bottom: 6rem !important;
}

#contacto .section-title {
    margin-top: 0 !important;
    margin-bottom: 3rem !important;
    padding-top: 2rem !important;
    text-align: center !important;
}

@media screen and (max-width: 768px) {
    #contacto {
        padding-top: calc(var(--header-height) + 2rem) !important;
        padding-bottom: 4rem !important;
    }

    #contacto .section-title {
        padding-top: 1rem !important;
        font-size: 3.2rem !important;
    }
}