/* Estilos generales*/
*,
*::before,
*::after {
    box-sizing: border-box;
}
html{
    font-size: 16px;
}
html, body {
    overflow-x: hidden;
} 
body {
    margin: 0;
    font-family: sans-serif;
    background-color: #fcfbf8;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


/* Header */
.header {
    
    background-color: #F1CB66;
    display: flex;
    flex-direction: column; 
    align-items: center; 
    justify-content: center; /* Centra los ítems verticalmente en el contenedor */
    padding: 0.2rem 0.2rem; /* Padding general para dar aire alrededor del contenido */
    width: 100%; /* Asegura que ocupe todo el ancho disponible */
    max-width: 100vw; /* Previene cualquier desborde horizontal */
    overflow: hidden; /* Oculta contenido que se salga, crucial para evitar scroll horizontal */
    /* Mantenemos tus estilos originales si no pediste quitarlos */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Mantener sombra si la tenías originalmente o similar */
    /* text-align: center; (se hereda de header-text-container si lo agregas) */
}

.logo {
    display: flex; /* Asegura que la imagen dentro se pueda centrar */
    justify-content: center; /* Centra la imagen horizontalmente */
    align-items: center; /* Centra la imagen verticalmente */
}

.logo img {
    height: clamp(9rem, 21vw, 11rem); /* Logo responsivo: tamaño mínimo 6rem, preferido 18vw, máximo 8rem */
    width: clamp(9rem, 21vw, 11rem); /* Mismo para ancho para mantener proporción */
    object-fit: cover; /* Si ya lo tenías para el ajuste de imagen */
    margin: 0; /* Reinicia los márgenes para que Flexbox los controle */
}


.header-text-container {
    display: flex;
    flex-direction: column; /* Apila los títulos uno debajo del otro */
    align-items: center; /* Centra los títulos horizontalmente */
    text-align: center; /* Asegura que el texto esté centrado */
}

.header-principal {
    /* AÑADIMOS para medidas responsivas: */
    font-size: clamp(1.8rem, 6.8vw, 2.8rem); /* Título responsivo: mínimo 2rem, preferido 7vw, máximo 3rem */
    /* Mantenemos tus estilos originales: */
    color: #FAE78B;
    font-family: Merriweather;
    margin-top: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.header-subtitulo {
    /* AÑADIMOS para medidas responsivas y posicionamiento: */
    font-size: clamp(1rem, 3.5vw, 1.4rem); /* Subtítulo responsivo: mínimo 1rem, preferido 3.5vw, máximo 1.4rem */
    color: #fff;
    text-align: center; /* Tu estilo original */
    font-family: Merriweather;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 2rem;
    margin-top: -1rem;
}

/* --- Menú Responsivo (Mobile-First) --- */
.menu {
    background-color: #FAE78B;
    display: flex;
    flex-direction: column; /* Ítems apilados verticalmente */
    justify-content: center;
    align-items: center;
    padding: 1.5rem 1rem;
    height: auto;
    margin-top: 0;
    gap: 0.8rem; /* Espacio vertical entre los ítems */
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}


.menu-item {
    color: black;
    text-decoration: none;
    font-size: clamp(1.2rem, 5vw, 1.8rem);
    padding: 0.8rem 1.2rem;
    position: relative;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    background-color: transparent;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    width: 90%; /* Los ítems ocupan casi todo el ancho de su contenedor apilados */
    text-align: center;
}

/* Efecto hover/focus para cada ítem */
.menu-item:hover,
.menu-item:focus {
    background-color: rgba(0, 0, 0, 0.05);
    color: #333;
    transform: translateY(-2px);
    outline: none;
}

/* **AJUSTE CLAVE:** Línea inferior para cada menú */
.menu-item::after {
    content: "";
    position: absolute;
    bottom: 0; /* Coloca la línea en la parte inferior del ítem */
    left: 10%; /* Inicia la línea un 10% desde la izquierda del ítem */
    width: 80%; /* La línea ocupa el 80% del ancho del ítem */
    height: 0.08rem; /* Grosor de la línea */
    background-color: rgba(0, 0, 0, 0.2); /* Color de la línea (un gris sutil) */
    /* No necesitamos transform o top:50% ya que está en la parte inferior */
    display: block; /* Asegura que la línea sea visible */
}

/* Eliminamos la línea del último elemento para que no haya un divisor extra al final */
.menu-item:last-child::after {
    display: none;
}
body.modal-open .menu {
    display: none !important; 
}

/* --- Sección de fondo con imagen (Hero) - Mobile-First para 320px --- */
.hero {
    position: relative; /* Contenedor para elementos posicionados absolutamente (imagen, overlay, texto) */
    display: flex; /* Usamos flex para centrar contenido si es necesario, pero aquí el texto está abs. */
    flex-direction: column; /* Asegura un layout vertical si hay varios elementos en el flujo */
    justify-content: center; /* Centra el contenido verticalmente por defecto */
    align-items: center; /* Centra el contenido horizontalmente por defecto */
    height: clamp(20rem, 100vw, 40rem); /* Altura responsiva: mínimo 20rem (para 320px), preferido 100vw (se ajusta al ancho del viewport), máximo 30rem */
    width: 100%; /* Ocupa todo el ancho */
    max-width: 100vw; /* Crucial para evitar scroll horizontal */
    overflow: hidden; /* Oculta cualquier contenido que se desborde */
    padding: 0; /* Sin padding en el contenedor principal del Hero */
}

.hero img {
    position: absolute; /* La imagen de fondo se posiciona absolutamente */
    top: 0;
    left: 0; /* Aseguramos que empiece desde la esquina superior izquierda */
    width: 100%; /* La imagen ocupa todo el ancho del Hero */
    height: 100%; /* La imagen ocupa toda la altura del Hero */
    z-index: 1; /* Fondo, debajo del overlay y el texto */
    object-fit: cover; /* Recorta la imagen para cubrir el área sin distorsionar */
    object-position: center center; /* Centra la imagen, útil si hay recortes */
    /* Quitamos right y top fijos para que sea 100% de width/height */
}

.hero-overlay {
    background-color: rgba(230, 233, 240, 0.7); /* Usamos RGBA para control de opacidad (B0 es aprox. 70%) */
    width: 100%;
    height: 100%; /* El overlay cubre todo el Hero */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2; /* Encima de la imagen, debajo del texto */
}

.hero p {
    position: absolute;
    z-index: 7;
    font-size: clamp(2.5rem, 10vw, 4rem);
    /* AJUSTE CLAVE AQUÍ: Alineamos el texto a la izquierda */
    text-align: left; /* Alinea el texto a la izquierda dentro de su propio contenedor */
    color: #0E0D09;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    font-family: Arial, Helvetica, sans-serif;
    /* QUITAMOS: left: 50%; top: 50%; transform: translate(-50%, -50%); para evitar el centrado */
    /* AÑADIMOS para posicionamiento en la esquina superior izquierda (con padding) */
    top: 5rem; /* Pequeño margen desde la parte superior del Hero */
    left: 1rem; /* Pequeño margen desde la parte izquierda del Hero */
    width: calc(100% - 2rem); /* Ocupa el 100% del ancho del Hero menos 1rem de padding a cada lado */
    margin: 0;
}


/* --- Sección de servicios (contenedores principales) --- */
.servicios {
    padding: 2.5rem 1rem; /* Padding responsivo, ligeramente más ajustado a los lados */
    text-align: center;
    position: relative;
    z-index: 3;
    width: 100%; /* Asegura que ocupe todo el ancho */
    max-width: 100vw; /* Previene scroll horizontal */
    overflow: hidden; /* Oculta cualquier desborde */
}

/* Título de la sección de servicios */
.servicios h2 {
    /* Tamaño de fuente responsivo con clamp() */
    font-size: clamp(2rem, 7vw, 3rem); /* Mín 2rem, preferido 7vw, máx 3rem */
    color: #333;
    text-align: center; /* Centramos el título para mobile-first */
    /* Eliminamos transform y margin-left fijos para responsividad. */
    margin: 0 0 2rem 0; /* Margen inferior para separarlo de la cuadrícula */
}

/* Contenedor de la cuadrícula de servicios */
.servicios-grid {
    display: flex;
    flex-direction: column; /* ¡CLAVE mobile-first! Los ítems se apilan verticalmente */
    align-items: center; /* Centra los ítems apilados */
    justify-content: center; /* Centra el grupo de ítems apilados */
    gap: clamp(1rem, 3vw, 1.5rem); /* Espacio vertical entre los ítems apilados */
    margin-top: 0; /* Eliminamos el margen negativo rígido */
    flex-wrap: wrap; /* Permitimos que los ítems envuelvan si hay espacio horizontal (útil en transición a desktop) */
}

/* --- Estilos base para cada rectángulo de servicio (.servicio-item) --- */
.servicio-item {
    background-color: #E3AE3EFF;
    padding: 1rem;
    border-radius: 2rem; /* Border-radius responsivo, ya no es tan exagerado */
    /* Ancho y alto responsivos usando vw y clamp() */
    width: clamp(15rem, 80vw, 16rem); /* Mín 15rem, preferido 80vw (80% del ancho del viewport), máx 20rem */
    height: clamp(18rem, 90vw, 25rem); /* Mín 18rem, preferido 90vw, máx 25rem */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden; /* Mantiene las imágenes de fondo dentro */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave para cada tarjeta */
}

/* --- ESTILO CLAVE: Para el texto dentro de cada servicio-item (.servicio-texto) --- */
.servicio-texto {
    position: relative;
    z-index: 3; /* Asegura que el texto esté por encima de las imágenes */
    color: #000;
    text-shadow:
        1px 1px 3px rgba(255, 255, 255, 0.7), /* Ajuste la opacidad de la sombra para un mejor contraste */
        -1px -1px 3px rgba(255, 255, 255, 0.4);
    font-weight: bold;
    text-align: center;
    width: 90%; /* Ancho responsivo para el texto dentro del ítem */
    /* Tamaño de fuente responsivo para el texto del servicio */
    font-size: clamp(1.8rem, 7vw, 2.5rem); /* Mín 1.8rem, preferido 7vw, máx 2.5rem */
    font-family: Merriweather;
    /* Eliminamos margin-top fijo si no es necesario con el nuevo layout */
    margin: 0;
}

/* --- Estilos generales para los pseudo-elementos (capas de imágenes de fondo) --- */
.servicio-item::before,
.servicio-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover; /* ¡CLAVE! Asegura que la imagen de fondo cubra el área responsivamente */
    background-position: center center; /* Centra la imagen de fondo */
}

.servicio-item::before {
    z-index: 1;
    opacity: 0.4; /* Opacidad general de la capa de fondo */
}
.servicio-item::after {
    z-index: 2;
    opacity: 0.5; /* Opacidad general de la segunda capa de fondo (si existe) */
}

/* Estas capas están configuradas para estar por debajo del texto (.servicio-texto con z-index: 3) */
.servicio-item::before {
    z-index: 1; /* La primera imagen de fondo (capa inferior) */
}
.servicio-item::after {
    z-index: 2; /* La segunda imagen de fondo (capa superior), si existe, pero aún debajo del texto */
}

/* --- SERVICIO 1: Gestión en Redes Sociales (DOS IMÁGENES) --- */
.servicio-1::before {
    background-image: url('../images/fon3.jpg');
    background-position: center top; /* 'center top' ya es responsivo */
    background-size: 150% 100%; /* Puedes considerar 'cover' si quieres que siempre cubra el área */
    opacity: 0.4;
}
.servicio-1::after {
    background-image: url('../images/fon1.png');
    /* Original: background-position: top 100px left 30px; */
    /* top 100px: Ahora 10vw desde arriba. left 30px: Ahora 3vw desde la izquierda. */
    background-position:  top 80px left 20px;
    background-size: 160% 120%;
    opacity: 0.5;
}
.servicio-1 .servicio-texto {
    /* Original: margin-top: 90px; */
    margin-top: clamp(40px, 50vw, 90px); /* Aquí sí usamos clamp para el margen del texto */
    font-size: 2em;
}

/* --- SERVICIO 2: Pauta Publicitaria en Meta Ads y Google Ads (UNA IMAGEN) --- */
.servicio-2::before {
    background-image: url('../images/fon5.png');
    /* Original: background-position: left 20px top 100px; */
    /* top 100px: 10vw desde arriba. left 20px: 2vw desde la izquierda. */
    background-position: 0vw -2vw; /* Vertical (offset desde top), Horizontal (offset desde left) */
    background-size: 70vw 63vw; /* Tamaño responsivo */
    opacity: 0.4;
}

/* --- SERVICIO 3: Creación de Estrategia (UNA IMAGEN) --- */
.servicio-3::before {
    background-image: url('../images/fon1.png');
    /* Original: background-position: left -40px bottom 15px; */
    /* bottom 15px: 1.5vw desde abajo. left -40px: -4vw fuera de la izquierda. */
    background-position: bottom 1.5vw left -4vw; /* Posición vertical (desde bottom), Posición horizontal (desde left) */
    background-size: 160% auto; /* 150% ya es responsivo */
    opacity: 0.4;
}

/* --- SERVICIO 4: Diseño en Canva (UNA IMAGEN) --- */
.servicio-4::before {
    background-image: url('../images/fon6.png');
    /* Original: background-position: bottom -10px left -10px; */
    background-position: bottom -1vw left -1vw; /* 1vw desde bottom, 1vw fuera de left */
    background-size: 40vw 40vw; /* Tamaño responsivo */
    opacity: 0.4;
}

/* --- SERVICIO 5: Desarrollo Web (UNA IMAGEN) --- */
.servicio-5::before {
    background-image: url('../images/fon5.png');
    /* Original: background-position: left top -120px; */
    /* top -120px: -12vw fuera de top. left: 0% horizontal */
    background-position: top 40vw left 20vw; /* Posición vertical (desde top), Posición horizontal (desde left) */
    background-size: 55vw 55vw; /* 'cover' ya es responsivo */
    opacity: 0.4;
}

/* --- SERVICIO 6: Identidad de Marca (DOS IMÁGENES) --- */
.servicio-6::before {
    background-image: url('../images/fon7.png');
    /* Original: background-position: left -10px top -10px; */
    background-position: top -1vw left -1vw; /* 1vw fuera de top, 1vw fuera de left */
    background-size: 50% 50%; /* 50% ya es responsivo */
    opacity: 0.4;
}
.servicio-6::after {
    background-image: url('../images/fon1.png');
    /* Original: background-position: center left 30px; */
    /* center: 50% vertical. left 30px: 3vw desde la izquierda. */
    background-position: top 20vw left 30vw; /* Posición vertical (center), Posición horizontal (desde left) */
     /* Tamaño responsivo */
    opacity: 0.4;
    background-size: 80vw 80vw;
    
}

/* --- Sección Quienes Somos (contenedor principal) --- */
.quienes-somos {
    padding: 2.5rem 1rem; /* Padding responsivo, ajustado para móviles */
    text-align: center; /* Centramos el contenido por defecto para móviles */
    background-color: #fff;
    font-family: Merriweather;
    width: 100%; /* Asegura que ocupe todo el ancho */
    max-width: 100vw; /* Previene desbordes horizontales */
    overflow: hidden; /* Oculta cualquier contenido que se salga */
}

/* Título de la sección "Quiénes Somos" */
.quienes-somos h2 {
    text-align: center; /* Se mantiene centrado para mobile-first */
    color: #F1CB66;
    margin-bottom: 1.25rem;
    /* Tamaño de fuente responsivo con clamp() */
    font-size: clamp(2rem, 8vw, 3.5rem); /* Mín 2rem, preferido 8vw, máx 3.5rem */
    /* Eliminamos el transform fijo para mayor fluidez */
    transform: none;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Sombra más sutil */
    margin-top: 0; /* Aseguramos que no haya margen superior indeseado */
}

/* Párrafo de la sección "Quiénes Somos" */
.quienes-somos p {
    text-align: left; /* Alineado a la izquierda según tu pedido */
    line-height: 1.5; /* Interlineado responsivo para mejor legibilidad en cualquier tamaño */
    /* Tamaño de fuente responsivo con clamp() */
    font-size: clamp(1rem, 4vw, 1.3rem); /* Mín 1rem, preferido 4vw, máx 1.3rem */
    /* Margen lateral responsivo para que no se pegue a los bordes */
    margin-left: 5%; /* 5% de margen a la izquierda del contenedor */
    margin-right: 5%; /* Y también 5% a la derecha para que no se pegue */
    width: 90%; /* Ocupa el 90% del ancho (100% - 5% left - 5% right) */
    color: #949398;
    /* Ajuste para centrar el bloque de texto en la página si no quieres margen */
    margin-left: auto;
    margin-right: auto;
}
/* --- Sección Contenido Gratuito --- */
.contenido-gratuito {
    display: flex;
    flex-direction: column; /* Esto apila la imagen y el wrapper */
    align-items: center; /* Centra los elementos horizontalmente */
    justify-content: flex-start; /* Alinea los elementos al inicio (arriba) */
    text-align: center;
    background-color: #FAE78B;
    position: relative;
    overflow: hidden;
    /* AJUSTE CLAVE: Volvemos a darle una min-height responsiva al contenedor principal */
    min-height: clamp(40rem, 150vw, 60rem); /* Aseguramos suficiente altura para imagen + texto/botón */
    height: auto; /* Permite que la altura se ajuste si el contenido es mayor */
    width: 100%;
    max-width: 100vw;
    
    gap: 1.5rem; /* Espacio entre la imagen y el wrapper */
}

.contenido-gratuito img {
    /* CAMBIO CLAVE: Quitamos 'position: absolute' para que la imagen fluya */
    position: absolute; /* La imagen ahora está en el flujo normal de Flexbox */
    /* Mantenemos el width: 100% como lo tenías */
    width: clamp(50rem, 155vw, 95rem);  /* La imagen ocupará el 100% del ancho de su contenedor */
    /* CLAVE: height: auto para mantener las proporciones y evitar que se estire */
    height: auto; /* Esto hace que la altura se ajuste proporcionalmente al 100% del ancho */
    display: block;
    /* object-fit: cover; y object-position: 8% center; se mantienen si así lo querías originalmente para el recorte de la imagen */
    object-fit: cover; /* Si la imagen debe cubrir todo su espacio y recortarse */
    left: 0.1rem; /* Mantiene tu ajuste para enfocar la imagen */
    z-index: 1; /* Sigue estando encima del fondo, pero ahora interactúa con el flujo */
    margin-bottom: 0; /* Aseguramos que el gap del padre controle el espaciado */
}

.contenido-texto-y-boton-wrapper {
    /* CAMBIO CLAVE: Quitamos todo posicionamiento absoluto para que fluya debajo de la imagen */
    position: absolute; /* Aseguramos que sea un elemento de flujo normal */
    top: 26rem; /* Eliminar */
    left: auto; /* Eliminar */
    right: auto; /* Eliminar */
    transform: none; /* Eliminar */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* Max-width para el wrapper de texto/botón para que no sea demasiado ancho */
    max-width: clamp(18rem, 80vw, 35rem);
    width: 100%;
    z-index: 2; /* Sigue estando encima del fondo */
    padding: 1.5rem;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 0.8rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.contenido-texto {
    font-family: Merriweather;
    font-size: clamp(1.5rem, 7vw, 2.5rem);
    text-align: center;
    line-height: 1.2;
    color: #757575;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    margin-bottom: 1rem;
}

.contenido-texto h3 {
    font-size: inherit;
    color: inherit;
    text-shadow: inherit;
    margin: 0;
    padding: 0;
}

.contenido-gratuito .boton-descargar {
    background-color: #757575;
    cursor: pointer;
    text-align: center;
    color: white;
    padding: clamp(0.8rem, 3vw, 1rem) clamp(1.5rem, 6vw, 2rem);
    text-decoration: none;
    border-radius: 5rem;
    font-size: clamp(1em, 4vw, 1.5em);
    width: clamp(15rem, 70vw, 25rem);
    height: auto;
    max-width: 100%;
    white-space: normal;
    display: block;
}
/* --- Sección Reseñas --- */
.reseñas-section {
    position: relative;
    /* La altura será responsiva y se ajustará al contenido o a un mínimo */
    height: auto; /* Permite que la altura se ajuste al contenido */
    min-height: clamp(20rem, 90vh, 38rem); /* Altura mínima responsiva */
    background-color: #555;
    position: relative;
    width: 100%; /* Asegura que ocupe todo el ancho */
    max-width: 100vw; /* Previene desbordes horizontales */
    overflow: hidden; /* Oculta cualquier desborde vertical que no sea scrollable */
    padding-bottom: 2rem; /* Espacio para el posible indicador de scroll */
    
}

.reseña-title {
    font-size: clamp(1.9rem, 7.4vw, 2.9rem); /* Tamaño de título responsivo */
    color: white;
    text-align: center;
    font-family: Merriweather;
    font-weight: bold;
    -webkit-text-stroke: 0.09375rem #FAE78B;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Agregamos sombra para mejor legibilidad */
    margin-top: 1.5rem; /* Margen superior responsivo */
    margin-bottom: 2.5rem;
    z-index: 20;
    position: relative; /* Espacio antes de las tarjetas */
}

.reseñas-container {
    z-index: 11;
    padding: 0 1rem; /* Padding horizontal responsivo, permite que las tarjetas lleguen a los bordes */
    display: flex;
    gap: 1.25rem; /* Espacio entre tarjetas */
    flex-wrap: nowrap; /* CLAVE: Mantiene las tarjetas en una sola línea horizontal */
    justify-content: flex-start; /* CLAVE: Alinea las tarjetas al inicio para el scroll */
    overflow-x: scroll; /* CLAVE: Permite el desplazamiento horizontal */
    -webkit-overflow-scrolling: touch; /* Mejora el desplazamiento en iOS */
    scroll-snap-type: x mandatory; /* CLAVE: Fuerza que las tarjetas se "enganchen" al deslizar */
    scroll-padding: 0 1rem; /* Padding para el scroll-snap */
    scrollbar-width: none; /* Oculta la barra de desplazamiento en Firefox */
    -ms-overflow-style: none;  /* Oculta la barra de desplazamiento en Edge/IE */
}

/* Oculta la barra de desplazamiento en WebKit (Chrome, Safari) */
.reseñas-container::-webkit-scrollbar {
    display: none;
}

.reseñas-card {
    /* Anchura responsiva con clamp, permitiendo que una o dos se vean en móvil */
    width: clamp(18rem, 80vw, 21.5rem); /* Ancho responsivo de la tarjeta */
    background-color: white;
    height: clamp(28rem, 90vw, 38rem); /* Altura responsiva de la tarjeta */
    border-radius: 0.625rem;
    background-size: cover;
    background-position: center;
    color: #fff;
    position: relative;
    overflow: hidden;
    cursor: grab; /* Cambia el cursor para indicar que se puede arrastrar */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
    flex-shrink: 0; /* CLAVE: Evita que las tarjetas se encojan */
    scroll-snap-align: center; /* CLAVE: Alinea la tarjeta al centro al deslizar */
    font-family: "Open Sans", sans-serif;
     /* Mantienes tu margen negativo para un efecto visual */
    border: 0.1875rem solid #FAE78B;
}

.reseñas-card:active {
    cursor: grabbing; /* Muestra el cursor de arrastre al hacer clic */
}

.reseñas-card img {
    max-width: 90%; /* Máx. ancho de imagen dentro de la tarjeta */
    max-height: 90%; /* Máx. altura de imagen dentro de la tarjeta */
    object-fit: contain;
    display: block;
    margin: auto;
    margin-top: 1rem; /* Margen superior responsivo */
    border-radius: 0.625rem;
    border: 0.1875rem solid #FAE78B;
}

/* Para la última tarjeta con texto, asegurate de que el párrafo se vea bien */
.reseñas-card p {
    color: #E3AE3E;
    font-size: clamp(1.8rem, 6vw, 3em); /* Tamaño de fuente responsivo */
    text-align: center;
    padding: 0.625rem;
    font-weight: bold;
    width: 100%;
    margin-top: clamp(3rem, 10vw, 7.5rem); /* Margen superior responsivo */
    box-sizing: border-box;
    -webkit-text-stroke: 0.09375rem rgba(88, 88, 88, 0.13); /* Usamos rgba para la opacidad */
    padding: clamp(0.5rem, 2vw, 1rem); /* Padding responsivo para el texto */
}

.reseñas-card .card-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    text-decoration: none;
    color: transparent;
}

/* --- Íconos Decorativos (i1, i2, i3) --- */
/* Estos elementos siguen siendo absolutos y se ajustan al tamaño de la reseña-card */
.img-container-res {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.i1, .i2, .i3 {
    position: absolute;
    pointer-events: none;
    /* Ajustamos el tamaño de los contenedores de íconos para ser responsivos */
    width: clamp(6rem, 20vw, 9.375rem); /* Ancho responsivo */
    height: clamp(4rem, 15vw, 6.25rem); /* Altura responsiva */
    display: flex;
    justify-content: center;
    align-items: center;
}

.i1 {
    top: 0; /* Posición responsiva */
    left: 0; /* Posición responsiva */
    z-index: 10;
    transform: rotate(180deg);
}

.i2 {
    top: clamp(1.5rem, 5vw, 6.5%); /* Posición responsiva */
    right: -5%; /* Posición responsiva */
    z-index: 10;
    transform: rotate(-90deg);
}

.i3 {
    bottom: 0; /* Posición responsiva */
    left: clamp(10rem, 35vw, 35%); /* Posición responsiva */
    z-index: 10;
}

.i1 img,
.i2 img {
    /* Hacemos las imágenes de los íconos responsivas */
    width: 100%; /* Ancho responsivo de la imagen dentro del ícono */
    height: 100%; /* Altura responsiva de la imagen dentro del ícono */
    display: block;
}

.i3 img {
    /* Hacemos las imágenes de los íconos responsivas */
    width: clamp(6rem, 22vw, 110%); /* Ancho responsivo de la imagen dentro del ícono */
    height: clamp(4rem, 18vw, 110%); /* Altura responsiva de la imagen dentro del ícono */
    display: block;
}
/* --- Sección Certificados --- */
.certificados {
    padding-left: 0;
    padding-right: 0;
    
    
    text-align: center;
    background-color: #fff;
    position: relative;
    overflow: hidden; 
    width: 100%;
    max-width: 100vw;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.certificados h2 {
    text-align: center;
    font-family: Merriweather;
    font-size: clamp(2rem, 7vw, 3rem);
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 5;
}


.certificados::before,
.certificados::after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
    width: clamp(8rem, 25vw, 12.5rem);
    height: clamp(7rem, 20vh, 11.25rem);
}

.certificados::before {
    background-image: url('../images/fon5.png');
    top: clamp(0.5rem, 2vh, 0.3125rem);
    left: clamp(1rem, 5vw, 24.375rem);
    transform: rotate(50deg);
}

.certificados::after {
    background-image: url('../images/fon5.png');
    bottom: clamp(1rem, 3vh, 1.5625rem);
    right: clamp(1rem, 5vw, 11.875rem);
    transform: rotate(5deg);
}

.certificado-bg-extra-1,
.certificado-bg-extra-2 {
    position: absolute;
    background-image: url('../images/fon5.png');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
    width: clamp(8rem, 25vw, 12.5rem);
    height: clamp(7rem, 20vh, 11.25rem);
}

.certificado-bg-extra-1 {
    top: clamp(0.5rem, 2vh, 0.625rem);
    right: 0;
    transform: rotate(180deg);
}

.certificado-bg-extra-2 {
    bottom: 0;
    left: 0;
}

/* --- Carousel Viewport: ESTE ES EL CONTENEDOR QUE RECORTA --- */
.carousel-viewport {
    overflow: hidden; 
    position: relative;
    max-width: 100vw; 
    margin-left: auto;
    margin-right: auto;
    padding-left: 0; 
    padding-right: 0; 
    z-index: 4;
}

/* --- El Track del Carrusel (dentro del Viewport) --- */
.certificados-container { 
    display: flex;
    margin-top: 1rem;
    position: relative; 
    z-index: 3;
    flex-wrap: nowrap; /* CLAVE: Mantiene todos los slides en una sola línea */
    justify-content: flex-start;
    padding-left: clamp(1.5rem, 4vw, 3rem); /* Alinea los slides al inicio */
}
.certificados-container.is-animated {
    /* Esta línea RESTAURA la animación de los botones de escritorio */
    transition: transform 0.5s ease-out; 
}
/* --- Cada Certificado (Slide) --- */
.certificado-circulo {
    width: clamp(15rem, 70vw, 20rem);
    height: clamp(15rem, 70vw, 20rem);
    border-radius: 50%;
    background-color: #E3AE3E;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(2em, 8vw, 3em);
    margin-bottom: clamp(1rem, 3vw, 2.5rem);
    margin-top: clamp(0rem, 1vw, -0.3125rem);
    z-index: 5;
    font-family: Merriweather;
    font-weight: bold;
    margin-right: clamp(1.5rem, 3vw, 2.25rem); /* Mantén el margen entre slides */
    flex-shrink: 0; /* CLAVE: Evita que los slides se achiquen */
    text-shadow: 2px 2px 4px rgb(250, 247, 247);
}

.certificado-circulo:last-child {
    margin-right: 0;
}

/* --- Flechas de navegación y Dots --- */
.carousel-prev-btn,
.carousel-next-btn {
    display: none !important;
}
.carousel-dots {
    text-align: center;
    margin-top: clamp(1rem, 3vw, 1.25rem);
    position: relative;
    z-index: 3;
}

.dot {
    display: inline-block;
    width: clamp(0.5rem, 2vw, 0.625rem);
    height: clamp(0.5rem, 2vw, 0.625rem);
    background-color: #FAE78B;
    border-radius: 50%;
    margin: 0 clamp(0.2rem, 1vw, 0.3125rem);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: #F1CB66;
}

.dot:hover {
    background-color: #e0b04a;
}

/* --- Sección Ubicación y Formulario: Contenedor principal de la sección (Mobile First) --- */
.ubicacion-formulario {
    padding: clamp(2rem, 5vw, 3.75rem) clamp(1rem, 3vw, 1.25rem); /* Padding responsivo */
    display: flex;
    flex-direction: column; /* POR DEFECTO: Apilado en columnas para mobile */
    align-items: center; /* Centra los elementos apilados horizontalmente */
    gap: clamp(1.5rem, 4vw, 2.5rem); /* Espacio responsivo entre los elementos hijos */
    background-color: #F1CB66;
    width: 100%;
    box-sizing: border-box;
}

/* --- Contenedor del Mapa (Mobile First) --- */
.ubicacion {
    width: 95%; /* Ocupa casi todo el ancho disponible en móviles */
    max-width: 120rem; /* Mantiene un máximo para pantallas muy grandes */
    background-color: #F1CB66;
    text-align: center; /* Centramos el contenido por defecto */
    margin: 0 auto; /* Centra el contenedor del mapa */
    margin-top: clamp(2rem, 5vw, 5rem); /* Margen superior responsivo */
}

.ubicacion h2 {
    color: #333;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem); /* Margen inferior responsivo */
    font-size: clamp(2.2rem, 8vw, 4em); /* Tamaño de fuente con clamp */
    font-family: Merriweather;
    text-align: center;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgb(250, 248, 248);
}

.ubicacion iframe {
    width: 100%;
    height: clamp(20rem, 50vw, 40rem); /* Altura del mapa responsiva con clamp */
    border: none;
    border-radius: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* --- Contenedor Principal para el Formulario Y las Redes Sociales (Mobile First) --- */
.form-redes-wrapper {
    width: 95%; /* Ocupa casi todo el ancho en móviles */
    max-width: 120rem; /* Mantiene un máximo para pantallas muy grandes */
    display: flex;
    flex-direction: column; /* POR DEFECTO: Apilado en columnas para mobile */
    flex-wrap: nowrap; /* No envuelve en mobile, queremos una columna limpia */
    justify-content: flex-start;
    align-items: center; /* Centra el formulario y las redes cuando están apilados */
    gap: clamp(2rem, 5vw, 3rem); /* Espacio entre formulario y redes sociales (responsivo) */
    margin-top: clamp(2rem, 5vw, 5rem); /* Margen superior responsivo */
    box-sizing: border-box;
    margin-left: auto; /* Centra el wrapper horizontalmente */
    margin-right: auto; /* Centra el wrapper horizontalmente */
}

/* --- Formulario de Consulta: ESTE ES EL ÚNICO QUE TIENE RECUADRO BLANCO (Mobile First) --- */
.formulario-consulta {
    /* Ancho responsivo para el formulario */
    width: clamp(18rem, 90vw, 42rem); /* Min 18rem, hasta 90vw, max 42rem */
    text-align: left;
    background-color: #fff;
    padding: clamp(1.5rem, 5vw, 4rem); /* Padding responsivo para el formulario */
    border-radius: 0.625rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    font-size: clamp(1rem, 4vw, 2rem); /* Tamaño de fuente base responsivo */

    flex-shrink: 0;
    flex-grow: 1; /* Permite que crezca si hay espacio */
}

.formulario-consulta label {
    display: block;
    margin-bottom: 0.8rem;
    font-weight: bold;
    color: #555;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    font-size: 1em; /* Relativo al font-size del padre (.formulario-consulta) */
}

.formulario-consulta input[type="text"],
.formulario-consulta input[type="email"],
.formulario-consulta textarea {
    width: 100%;
    padding: clamp(0.8rem, 2vw, 1rem); /* Padding de inputs/textarea responsivo */
    margin-bottom: clamp(1rem, 3vw, 1.5rem); /* Margen inferior responsivo */
    border: 1px solid #ddd;
    border-radius: 0.5rem;
    box-sizing: border-box;
    font-size: 1em; /* Relativo al font-size del padre (.formulario-consulta) */
}

.formulario-consulta textarea {
    resize: vertical;
}

.formulario-consulta button[type="button"] {
    background-color: #a1a1a1;
    color: #faf9f9;
    padding: clamp(0.75rem, 2vw, 0.75rem) clamp(1rem, 4vw, 1.5625rem); /* Padding responsivo */
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: clamp(1em, 3vw, 1.1em); /* Tamaño de fuente responsivo */
    font-weight: bold;
    transition: background-color 0.3s ease;
    width: 100%; /* Ocupa el 100% del contenedor padre ahora */
}

.formulario-consulta button[type="submit"]:hover {
    background-color: #e0b85d;
}

/* --- Estilos para el botón de WhatsApp --- */
.whatsapp-button {
    display: block;
    width: 100%; /* Ocupa el 100% del contenedor padre ahora */
    background-color: #25D366;
    color: white;
    padding: clamp(0.75rem, 2vw, 0.75rem) clamp(1rem, 4vw, 1.5625rem); /* Padding responsivo */
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: clamp(1em, 3vw, 1.1em); /* Tamaño de fuente responsivo */
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    margin-top: clamp(0.3rem, 1vw, 0.3125rem); /* Margen superior responsivo */
    transition: background-color 0.3s ease;
}

.whatsapp-button:hover {
    background-color: #1DA851;
}

.whatsapp-button i {
    margin-right: 0.5rem;
    font-size: 1.2em; /* Relativo al font-size del botón */
}

/* Contenedor general de Redes Sociales */
.redes-sociales {
    display: flex;
    flex-direction: column; /* Apila los 'social-item' verticalmente en mobile */
    align-items: center;   /* Centra los 'social-item' en mobile */
    justify-content: flex-start;
    flex-grow: 1;
    min-width: clamp(10rem, 40vw, 15rem); 
    margin-top: clamp(3rem, 8vw, 12rem); 
    width: 100%;
}

/* Contenedor individual para cada botón + nombre (social-item) */
.social-item {
    display: flex;
    flex-direction: column; /* CLAVE MOBILE: Ícono arriba, nombre abajo */
    align-items: center;   /* Centra ícono y nombre dentro del 'social-item' */
    margin-bottom: clamp(1.5rem, 4vw, 2rem); /* Espacio entre cada item social */
    width: 100%; /* Permite centrar los elementos internos */
    gap: 0.5rem; /* Pequeño espacio entre el icono y el texto en mobile */
}

/* Botón social (el círculo con el ícono) */
.social-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(3.5rem, 10vw, 6rem); 
    height: clamp(3.5rem, 10vw, 6rem); 
    border-radius: 50%;
    /* margin-bottom se gestiona con 'gap' en .social-item en mobile */
    color: white;
    font-size: clamp(1.8em, 6vw, 3.5em); 
    text-decoration: none;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Animación de sombra y escala */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra sutil para profundidad */
}

.social-button i {
    line-height: 1;
}

.social-button:hover {
    transform: scale(1.1); /* Efecto de crecimiento al pasar el mouse */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada al hover */
}

/* Colores de fondo específicos para cada red social */
.social-button.email { background-color: #f86132; }
.social-button.facebook { background-color: #1877F2; }
.social-button.tiktok { background-color: #000; }
.social-button.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }

/* Nombre de la red social */
.social-name {
    color: #363536;
    font-size: clamp(1rem, 4vw, 2.8em); 
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.626);
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
    text-align: center; /* Centra el texto debajo del ícono en mobile */
    font-weight: 600; /* Hace el texto un poco más grueso */
    letter-spacing: 0.05em; /* Pequeño espaciado entre letras */
    transition: color 0.3s ease; /* Transición para el color del texto */
}

.social-name a {
    text-decoration: none;
    color: inherit; /* Hereda el color del .social-name */
}

.social-name a:hover {
    color: #007bff; /* Cambia el color del texto al pasar el mouse */
    text-decoration: underline; /* Subraya el texto al pasar el mouse */
}


/* --- FOOTER (Mobile First) - Estilo Creativo --- */
footer {
    background-color: #363536; /* Color de fondo más oscuro para contraste */
    color: #f0f0f0; /* Color de texto claro para el fondo oscuro */
    padding: clamp(2rem, 5vw, 4rem) 0; /* Padding vertical más generoso y responsivo */
    text-align: center;
    font-size: clamp(0.9em, 3vw, 1.2em); /* Tamaño de fuente responsivo, quizás un poco más pequeño */
    border-top: 1px solid #555; /* Borde sutil */
    width: 100%;
    box-sizing: border-box;
    position: relative; /* Necesario para pseudoelementos o fondos creativos */
    overflow: hidden; /* Asegura que nada se salga */
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.15); /* Sombra superior para "elevarlo" */
}

/* Puedes añadir un pseudoelemento para una forma o textura sutil */
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)); /* Gradiente sutil */
    pointer-events: none; /* Permite clics a través del pseudoelemento */
    z-index: 0; /* Asegura que esté detrás del contenido */
}


.footer-content {
    max-width: 70rem; /* Un poco más ancho en general */
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem); /* Padding horizontal responsivo */
    position: relative; /* Para que el contenido esté por encima del pseudoelemento */
    z-index: 1; /* Asegura que el contenido esté por encima del pseudoelemento */
}

footer a {
    color: #F1CB66; /* Color amarillo/naranja para los enlaces, que contraste */
    text-decoration: none;
    transition: color 0.3s ease;
}

footer a:hover {
    color: #e0b85d; /* Tono más oscuro al pasar el mouse */
    text-decoration: underline;
}

.certificado-modal {
    display: none; /* Oculto por defecto. JavaScript lo cambiará a 'flex' para mostrarlo. */
    position: fixed; /* Fijo en la pantalla. No se desplaza con el contenido. */
    z-index: 1000; /* Asegura que el modal esté por encima de todos los demás elementos. */
    left: 0;
    top: 0;
    width: 100%; /* El modal ocupa todo el ancho de la ventana. */
    height: 100%; /* El modal ocupa todo el alto de la ventana. */
    overflow: auto; /* Permite desplazamiento si el contenido (imagen) es más grande que la ventana. */
    background-color: rgba(0, 0, 0, 0.9); /* Fondo oscuro semi-transparente para el overlay. */
    justify-content: center; /* Centra el contenido (la imagen) horizontalmente con Flexbox. */
    align-items: center; /* Centra el contenido (la imagen) verticalmente con Flexbox. */
    backdrop-filter: blur(5px); /* Efecto de desenfoque aplicado al contenido detrás del modal (opcional, para navegadores compatibles). */
}

.modal-contenido {
    margin: auto; /* Centra la imagen dentro del modal si el tamaño lo permite. */
    display: block; /* La imagen se comporta como un bloque, permitiendo ajustar ancho/alto. */
    max-width: 90%; /* La imagen no será más ancha que el 90% del modal. */
    max-height: 90vh; /* La imagen no será más alta que el 90% del viewport (alto de la ventana). */
    object-fit: contain; /* Ajusta la imagen dentro de sus límites sin recortarla, manteniendo su relación de aspecto. */
    border-radius: 8px; /* Bordes redondeados para la imagen del certificado. */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Sombra suave para la imagen, dándole profundidad. */
}

.cerrar-modal {
    position: absolute; /* Posiciona la 'x' de cierre de forma absoluta respecto al modal. */
    top: 15px; /* Margen superior. */
    right: 35px; /* Margen derecho. */
    color: #f1f1f1; /* Color del ícono de cierre. */
    font-size: 40px; /* Tamaño grande para el ícono de cierre. */
    font-weight: bold; /* Texto en negrita. */
    transition: 0.3s; /* Transición suave al pasar el ratón por encima. */
    cursor: pointer; /* Cambia el cursor a una mano al pasar por encima. */
    z-index: 1001; /* Asegura que la 'x' esté por encima de la imagen del modal. */
}

.cerrar-modal:hover,
.cerrar-modal:focus {
    color: #bbb; /* Color del ícono al pasar el ratón/enfocar. */
    text-decoration: none; /* Asegura que no haya subrayado. */
    cursor: pointer; /* Mantiene el cursor en forma de mano. */
}

.modal-caption {
    margin-top: 10px; /* Margen superior para la descripción. */
    text-align: center; /* Centra el texto de la descripción. */
    color: #ccc; /* Color del texto de la descripción. */
    font-size: 17px; /* Tamaño de fuente de la descripción. */
    padding: 10px 0; /* Espaciado interno. */
    max-width: 90%; /* Ancho máximo para el texto. */
    margin-left: auto; /* Centra el bloque de texto. */
    margin-right: auto; /* Centra el bloque de texto. */
}

/* Efecto de aparición (opcional, para una transición suave del modal) */
.modal-contenido {
    animation-name: zoom; /* Aplica la animación 'zoom' al contenido. */
    animation-duration: 0.6s; /* Duración de la animación. */
}

@keyframes zoom {
    from {transform: scale(0)} /* Inicia con escala 0 (invisible). */
    to {transform: scale(1)} /* Termina con escala 1 (tamaño normal). */
}

/* Media Queries para responsividad del modal (ajuste en pantallas más pequeñas) */
@media only screen and (max-width: 700px){
    .modal-contenido {
        width: 100%; /* En pantallas pequeñas, la imagen ocupa el 100% del ancho del modal. */
        max-height: 80vh; /* Un poco menos alto en móviles para dejar espacio a la 'x' y el caption. */
    }
}
/* --- Estilos para el Modal de Contenido Gratuito --- */

.modal-gratuito-general {
    display: none; /* Por defecto, el modal estará oculto. JavaScript lo cambiará a 'flex' para mostrarlo. */
    position: fixed; /* Mantiene el modal fijo en la ventana del navegador, sin desplazarse con el contenido. */
    z-index: 1002; /* Asegura que este modal esté por encima de todos los demás elementos, incluyendo otros modales. */
    left: 0;
    top: 0;
    width: 100%; /* El modal ocupará todo el ancho de la ventana. */
    height: 100%; /* El modal ocupará todo el alto de la ventana. */
    overflow: auto; /* Permite desplazamiento si el contenido dentro del modal es más grande que la ventana. */
    background-color: rgba(0, 0, 0, 0.9); /* Fondo oscuro semi-transparente para el overlay. */
    justify-content: center; /* Centra el contenido (el formulario) horizontalmente usando Flexbox. */
    align-items: center; /* Centra el contenido (el formulario) verticalmente usando Flexbox. */
    backdrop-filter: blur(5px); /* Aplica un efecto de desenfoque al contenido detrás del modal (opcional, para navegadores compatibles). */
}

.modal-gratuito-contenido {
    background-color: #fefefe; /* Color de fondo del cuadro blanco del modal. */
    margin: auto; /* Centra el cuadro del modal dentro del espacio disponible. */
    padding: 20px; /* Espaciado interno alrededor del contenido del modal. */
    border: 1px solid #888; /* Borde sutil alrededor del cuadro. */
    width: 80%; /* El cuadro del modal ocupará el 80% del ancho del contenedor del modal. */
    max-width: 700px; /* Limita el ancho máximo del modal en pantallas grandes para que no sea demasiado ancho. */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19); /* Sombra para dar profundidad al modal. */
    animation-name: animatetop; /* Aplica una animación al abrir el modal. */
    animation-duration: 0.4s; /* Duración de la animación de apertura. */
    position: relative; /* Es necesario para posicionar la 'x' de cerrar de forma absoluta dentro de este contenedor. */
    border-radius: 8px; /* Bordes ligeramente redondeados para el cuadro del modal. */
    text-align: center; /* Centra el texto y los elementos inline dentro del modal. */
    color: #333; /* Color de texto general para el contenido del modal. */
}

/* Animación que hace que el modal "caiga" desde arriba */
@keyframes animatetop {
    from {top: -300px; opacity: 0} /* Inicia 300px por encima y completamente transparente. */
    to {top: 0; opacity: 1} /* Termina en su posición y completamente visible. */
}

.cerrar-modal-gratuito {
    color: #aaa; /* Color del icono de cerrar (la 'x'). */
    float: right; /* Flota la 'x' a la derecha dentro de su flujo normal. */
    font-size: 28px; /* Tamaño de la fuente de la 'x'. */
    font-weight: bold; /* Hace la 'x' negrita. */
    position: absolute; /* Posiciona la 'x' de forma absoluta con respecto al '.modal-gratuito-contenido'. */
    top: 10px; /* Distancia desde la parte superior del modal. */
    right: 20px; /* Distancia desde la derecha del modal. */
    cursor: pointer; /* Cambia el cursor a una mano para indicar que es clicable. */
}

.cerrar-modal-gratuito:hover,
.cerrar-modal-gratuito:focus {
    color: black; /* Color de la 'x' al pasar el ratón o enfocar. */
    text-decoration: none; /* Asegura que no tenga subrayado. */
    cursor: pointer; /* Mantiene el cursor en forma de mano. */
}

.modal-gratuito-contenido h2 {
    margin-top: 0; /* Elimina el margen superior predeterminado del h2. */
    color: #0056b3; /* Color del título. Puedes cambiarlo a tu color de marca. */
}

.modal-gratuito-contenido p {
    margin-bottom: 20px; /* Espaciado debajo del párrafo introductorio. */
}

.checkbox-list {
    text-align: left; /* Alinea los checkboxes a la izquierda dentro de este contenedor. */
    margin-bottom: 20px; /* Espaciado debajo de la lista de checkboxes. */
    max-height: 250px; /* Limita la altura de la lista. */
    overflow-y: auto; /* Hace que aparezca una barra de desplazamiento si hay muchos checkboxes. */
    padding-right: 15px; /* Espacio para que la barra de desplazamiento no se superponga al texto. */
    border: 1px solid #eee; /* Borde ligero alrededor de la lista de checkboxes. */
    padding: 10px; /* Espaciado interno para la lista. */
    border-radius: 5px; /* Bordes redondeados para la lista. */
}

.checkbox-list label {
    display: block; /* Hace que cada checkbox con su texto ocupe toda la línea. */
    margin-bottom: 8px; /* Espaciado entre cada checkbox. */
    cursor: pointer; /* Cambia el cursor a una mano al pasar por encima. */
    font-size: 16px; /* Tamaño de la fuente del texto del checkbox. */
    color: #555; /* Color del texto del checkbox. */
}

.checkbox-list input[type="checkbox"] {
    margin-right: 8px; /* Espaciado a la derecha del propio checkbox. */
    transform: scale(1.2); /* Aumenta ligeramente el tamaño del checkbox para que sea más fácil de clicar. */
}

#user-email-gratuito {
    width: calc(100% - 22px); /* Ocupa casi todo el ancho, ajustando por padding y borde. */
    padding: 10px; /* Espaciado interno del campo de email. */
    margin-bottom: 15px; /* Espaciado debajo del campo de email. */
    border: 1px solid #ddd; /* Borde del campo de email. */
    border-radius: 5px; /* Bordes redondeados del campo de email. */
    font-size: 16px; /* Tamaño de la fuente dentro del campo de email. */
}

.btn-enviar-solicitud {
    background-color: #007bff; /* Color de fondo del botón de enviar. Puedes cambiarlo. */
    color: white; /* Color del texto del botón. */
    padding: 12px 25px; /* Espaciado interno del botón. */
    border: none; /* Elimina el borde predeterminado del botón. */
    border-radius: 5px; /* Bordes redondeados del botón. */
    cursor: pointer; /* Cambia el cursor a una mano. */
    font-size: 18px; /* Tamaño de la fuente del botón. */
    transition: background-color 0.3s ease; /* Transición suave al pasar el ratón. */
}

.btn-enviar-solicitud:hover {
    background-color: #0056b3; /* Color de fondo del botón al pasar el ratón. */
}

/* ================================================= */
/* --- MEDIA QUERY: ESCRITORIO ESTÁNDAR --- */
/* (Para pantallas de 1024px de ancho o más grandes) */
/* Aquí se aplicarán los estilos de escritorio, pero con medidas responsivas. */
/* ================================================= */

@media (min-width: 1024px) {
    /* --- Body (ajustes para desktop) --- */
    body {
        /* No se necesitan grandes cambios aquí si ya usas flex-direction: column y min-height en mobile */
    }

.header {
        height: clamp(10rem, 20vh, 25rem); /* Límites en rem, preferido en vh */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-left: clamp(2rem, 5vw, 4rem); /* Límites en rem, preferido en vw */
        padding-right: clamp(2rem, 5vw, 4rem); /* Límites en rem, preferido en vw */
    }

    /* --- Logo (A la izquierda, misma altura que el texto) --- */
    .logo {
        flex-shrink: 0;
        margin-right: auto;
    }

    .logo img {
        height: clamp(13rem, 28vh, 18rem); /* Límites en rem, preferido en vh */
        width: clamp(13rem, 28vh, 18rem); /* Límites en rem, preferido en vh */
        margin-top: 0;
        margin-left: 0;
        object-fit: contain;
    }

    /* --- Contenedor de Texto y Subtítulo (A la derecha, uno debajo del otro) --- */
    .header-text {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
        margin-left: auto;
        margin-right: 0;
        margin-bottom: 0;
    }

    /* --- Título Principal --- */
    .header-principal {
        font-size: clamp(3em, 6vw, 4em); /* Límites en em, preferido en vw (ya estaba así) */
        margin-top: 0;
        margin-bottom: 0;
    }

    /* --- Subtítulo --- */
    .header-subtitulo {
        font-size: clamp(1.2em, 2.5vw, 1.8em); /* Límites en em, preferido en vw (ya estaba así) */
        margin-top: clamp(0.5rem, 1vw, 1.5rem); /* Límites en rem, preferido en vw */
        margin-bottom: 0;
    }
    /*menu*/
     .menu {
        /* Sobrescribimos el flex-direction para que sea horizontal */
        flex-direction: row; /* ¡Ahora los ítems irán horizontalmente! */
        /* Eliminamos el 'gap' vertical de los estilos generales, ya que ahora es horizontal */
        gap: 0; /* No queremos espacio vertical entre ítems en horizontal */
        
        /* Ajustes para centrar horizontalmente */
        justify-content: center;
        align-items: center;
        padding: clamp(0.5rem, 1.5vw, 1rem) 0; /* Padding responsivo */
        height: auto;
        width: 100%;
        max-width: 100%; /* Aseguramos que ocupe el ancho sin desbordar */
        overflow: visible; /* Aseguramos que no se recorte nada */
        box-shadow: none; /* Si no quieres sombra en desktop */
         /* Si no quieres el fondo amarillo en desktop */
    }

    /* --- Cada Ítem del Menú (LI) --- */
    .menu-item {
        /* Ajustamos el padding horizontal para que estén más juntos */
        padding: 0 clamp(0.6rem, 1.5vw, 1rem); /* Valores más pequeños para acercarlos */
        font-size: clamp(0.5rem, 5vw, 1.1rem);
        
        /* Aseguramos que no haya subrayado ni líneas inesperadas */
        text-decoration: none; 
        border-bottom: none;
        box-shadow: none; /* Anulamos cualquier sombra que pudiera parecer una línea */
        
        /* Sobrescribimos la anchura y alineación para que sean adecuados en fila */
        width: auto; /* Dejan de ocupar el 90% y solo lo que necesitan */
        text-align: center; /* Mantenemos centrado por si acaso */
        
        /* Resto de estilos que quieres mantener o que no causan problemas */
        color: black; /* O el color que desees para desktop */
        position: relative;
        text-shadow: none; /* Si no quieres sombra de texto en desktop */
        background-color: transparent; /* Asegura que el fondo sea transparente */
        border-radius: 0; /* Si no quieres bordes redondeados en desktop */
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    }

    /* Efecto hover/focus para cada ítem (mantenemos esto) */
    .menu-item:hover,
    .menu-item:focus {
        background-color: rgba(0, 0, 0, 0.05);
        color: #333;
        transform: translateY(1%);
        outline: none;
    }

    /* --- Eliminar la Línea Inferior de los Estilos Generales --- */
    /* ¡ANULAMOS COMPLETAMENTE el pseudo-elemento ::after que crea la línea inferior! */
    .menu-item::after {
        content: none; /* <-- ¡Esto hace que el pseudo-elemento NO se genere! */
        display: none; /* <-- Otra capa de seguridad para que no se muestre */
    }

    /* --- Línea Vertical Separadora (SOLO entre ítems en desktop) --- */
    .menu-item:not(:first-child)::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0; /* Coloca la línea al borde izquierdo del ítem */
        transform: translateY(-50%);
        height: clamp(1em, 1.5vw, 1.5em); /* Altura responsiva del separador */
        width: 1px; /* El ancho de la línea vertical */
        background-color: #333; /* Color de la línea */
    }
    /* --- Sección de fondo con imagen (Hero) --- */
.hero {
   
    display: flex; /* Mantener flex para la estructura general si es necesario */
    flex-direction: row; /* Para alinear el texto y la imagen si fueran hermanos flexibles */
    justify-content: flex-start; /* Alinea los elementos al inicio (izquierda) por defecto */
    align-items: flex-start; /* Alinea los elementos al inicio (arriba) por defecto */
    
    position: relative; /* CRUCIAL: El contenedor principal para los elementos absolutos */
    overflow: hidden; /* Oculta cualquier desborde fuera del hero */
    padding: 0;
}

.hero img {
    position: absolute; /* ¡Ahora la imagen está posicionada absolutamente! */
    top: 0; /* Pegada al borde superior */
    right: 0; /* ¡Pegada al borde derecho! */
 /* Altura responsiva de la imagen */
    left: auto; /* Anulamos cualquier 'left: 0;' de estilos generales */
    z-index: 1; /* Fondo, debajo del overlay y el texto */
    object-fit: contain; /* Para que la imagen no se distorsione y se ajuste */
    object-position: right top; /* La imagen se posiciona en la esquina superior derecha de su espacio */
}

.hero-overlay {
    background-color: rgba(230, 233, 240, 0.7);
    width: 100%;
    
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2; /* Encima de la imagen, debajo del texto */
}

.hero p {
    position: absolute; /* El texto también está posicionado absolutamente */
    z-index: 7; /* ¡Asegura que el texto esté por encima de la imagen y el overlay! */
   
    text-align: left;
    color: #0E0D09;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    font-family: Arial, Helvetica, sans-serif;
    
 /* Posiciona el texto desde la izquierda */
    
    /* ¡AUMENTADO EL ANCHO! Para que el texto quepa en una sola línea */
    
    white-space: nowrap; /* ¡Fuerza el texto a permanecer en una sola línea! */
    overflow: visible;   /* Permite que el texto se desborde y se vea */
    text-overflow: clip; /* Asegura que no haya puntos suspensivos */

    margin: 0; /* Quitar márgenes automáticos que puedan interferir */
    line-height: 1.2;
    margin-left: clamp(0.5rem, 3vw, 1rem);
}
/*servivios*/

   .servicios {
        position: absolute; 
        top: clamp(0rem, 36rem - 8vw, 36rem); /* Mantienes tu top negativo para posicionarlo */
        left: 0; 
        width: 100%; 
        max-width: 100vw; 
        
        
        z-index: 1000; /* Aseguramos que el z-index sea lo suficientemente alto */
        
        overflow: hidden; 
        margin-top: 0; 
    }

    /* Título de la sección de servicios */
    .servicios h2 {
        font-size: clamp(1.8em, 3vw, 2.5em);
        transform: translateY(clamp(-0.625rem, -3vw, -3.125rem));
        text-align: left; /* Alinea el texto a la izquierda del contenedor */
        margin-left: clamp(0.5rem, 3vw, 1rem); /* Añade un margen para separarlo del borde */
    }

    /* Contenedor de la cuadrícula de servicios */
    .servicios-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        /* --- CAMBIO CLAVE: Reducir el gap para que los items tengan más espacio --- */
        gap: clamp(0.5rem, 1vw, 0.8rem); /* Reducido de 1rem a 0.5rem como mínimo */
        
    }

    /* --- Estilos base para cada rectángulo de servicio (.servicio-item) --- */
    .servicio-item {
        /* Mantenemos tus valores de width y height tal cual */
        width: clamp(8rem, 15vw, 20rem); 
        height: clamp(13rem, 15vw, 26rem); 
        padding: clamp(1.9rem, 3vw, 2rem); 
        border-radius: clamp(1rem, 3vw, 3.125rem);
        justify-content: center;
        align-items: center;
    }

    /* --- ESTILO CLAVE: Para el texto dentro de cada servicio-item (.servicio-texto) --- */
    .servicio-texto {
        font-size: clamp(1.2em, 1.4vw, 1.3em); 
        width: 90%;
        margin: 0;
    }

    /* Ajustes específicos para los textos de servicio si aún los necesitas con clamp() */
    .servicio-1 .servicio-texto {
        font-size: clamp(1em, 1.2vw, 1.2em);
    }
    /* --- SERVICIO 1: Gestión en Redes Sociales (DOS IMÁGENES) --- */
.servicio-1::before {
    background-image: url('../images/fon3.jpg');
    background-position: center top; /* 'center top' ya es responsivo */
    background-size: 150% 100%; /* Puedes considerar 'cover' si quieres que siempre cubra el área */
    opacity: 0.4;
}
.servicio-1::after {
    background-image: url('../images/fon1.png');
    /* Original: background-position: top 100px left 30px; */
    /* top 100px: Ahora 10vw desde arriba. left 30px: Ahora 3vw desde la izquierda. */
    background-position:  top 60px left 20px;
    background-size: 160% 120%;
    opacity: 0.5;
}
.servicio-1 .servicio-texto {
    /* Original: margin-top: 90px; */
    margin-top: clamp(40px, 50vw, 90px); /* Aquí sí usamos clamp para el margen del texto */
    font-size: 2em;
}

/* --- SERVICIO 2: Pauta Publicitaria en Meta Ads y Google Ads (UNA IMAGEN) --- */
.servicio-2::before {
    background-image: url('../images/fon5.png');
    /* Original: background-position: left 20px top 100px; */
    /* top 100px: 10vw desde arriba. left 20px: 2vw desde la izquierda. */
    background-position: 2vw 7vw; /* Vertical (offset desde top), Horizontal (offset desde left) */
    background-size: 20vw 13vw; /* Tamaño responsivo */
    opacity: 0.4;
}

/* --- SERVICIO 3: Creación de Estrategia (UNA IMAGEN) --- */
.servicio-3::before {
    background-image: url('../images/fon1.png');
    /* Original: background-position: left -40px bottom 15px; */
    /* bottom 15px: 1.5vw desde abajo. left -40px: -4vw fuera de la izquierda. */
    background-position: bottom 1.5vw left -4vw; /* Posición vertical (desde bottom), Posición horizontal (desde left) */
    background-size: 160% auto; /* 150% ya es responsivo */
    opacity: 0.4;
}

/* --- SERVICIO 4: Diseño en Canva (UNA IMAGEN) --- */
.servicio-4::before {
    background-image: url('../images/fon6.png');
    /* Original: background-position: bottom -10px left -10px; */
    background-position: bottom -1vw left -1vw; /* 1vw desde bottom, 1vw fuera de left */
    background-size: 10vw 10vw; /* Tamaño responsivo */
    opacity: 0.4;
}

/* --- SERVICIO 5: Desarrollo Web (UNA IMAGEN) --- */
.servicio-5::before {
    background-image: url('../images/fon5.png');
    /* Original: background-position: left top -120px; */
    /* top -120px: -12vw fuera de top. left: 0% horizontal */
    background-position: top 0vw left 0%; /* Posición vertical (desde top), Posición horizontal (desde left) */
    background-size: 15vw 15vw; /* 'cover' ya es responsivo */
    opacity: 0.4;
}

/* --- SERVICIO 6: Identidad de Marca (DOS IMÁGENES) --- */
.servicio-6::before {
    background-image: url('../images/fon7.png');
    /* Original: background-position: left -10px top -10px; */
    background-position: top -1vw left -1vw; /* 1vw fuera de top, 1vw fuera de left */
    background-size: 50% 50%; /* 50% ya es responsivo */
    opacity: 0.4;
}
.servicio-6::after {
    background-image: url('../images/fon1.png');
    /* Original: background-position: center left 30px; */
    /* center: 50% vertical. left 30px: 3vw desde la izquierda. */
    background-position: center left 7vw; /* Posición vertical (center), Posición horizontal (desde left) */
     /* Tamaño responsivo */
    opacity: 0.4;
    background-size: 20vw 20vw;
    
}

     .quienes-somos {
    /* Padding responsivo: 40px -> 2.5rem, 20px -> 1.25rem */
    padding: clamp(5rem, 4vw, 6rem) clamp(4rem, 2vw, 5rem); 
    margin-top: 0; /* Margen superior responsivo */
    }

.quienes-somos h2 {
    font-size: clamp(4em, 6vw, 8em); /* Tamaño de fuente responsivo del título */
    /* Transformación responsiva: -50px -> -3.125rem */
    transform: translateY(clamp(-1rem, -3vw, -3.125rem)); 
}

.quienes-somos p {
    font-size: clamp(1em, 2vw, 3em); /* Tamaño de fuente responsivo del párrafo */
    /* Margen izquierdo responsivo: 50px -> 3.125rem */
    margin-left: clamp(1rem, 5vw, 7rem); 
    /* Margen derecho para que no se estire demasiado: 50px -> 3.125rem */
    margin-right: clamp(1rem, 5vw, 3rem); 
}
/* --- Sección Contenido Gratuito --- */
.contenido-gratuito {
    /* ¡CLAVE! Cambiamos a flex-direction: row para que los hijos se coloquen en fila */
    display: flex;
    flex-direction: row; 
    
    /* Alineamos al inicio para que la imagen se pegue arriba */
    align-items: flex-start; /* Asegura que los elementos se peguen al top si hay varios hijos */
    justify-content: flex-start; /* Alinea los elementos al inicio (izquierda) */
    
    text-align: center; 
    background-color: #FAE78B;
    position: relative; /* CRUCIAL: Necesario para posicionar el wrapper de texto/botón absolutamente dentro */
    overflow: hidden;
    
    /* ¡CLAVE! Quitamos min-height y height fijo. Usamos 'height: auto' para que se ajuste al contenido (la imagen) */
    min-height: auto; /* Puedes quitar esta línea si no la necesitas */
    height: auto; 
    
    /* Aseguramos que ocupe todo el ancho del viewport */
    width: 100vw; 
    max-width: 100vw; 
    margin: 0; 
    left: 0; 
    padding: 0; /* Aseguramos que no haya padding que genere espacio */
    
    /* El gap ya no aplicará directamente entre la imagen y el wrapper si el wrapper es absoluto,
       pero puede quedar si tienes más elementos flex en el futuro */
    gap: 0; /* Lo ponemos en 0 si no queremos espacio entre la imagen y el wrapper */
}

.contenido-gratuito img {
    position: relative; /* O `static` si quieres que no tenga contexto de apilamiento propio */
    /* La imagen ocupará el 100% del ancho del viewport */
    width: 100vw; 
    height: auto; /* Mantenemos height: auto para que la altura se ajuste a su proporción */
    display: block;
    object-fit: cover; 
    transform: none; /* Eliminamos cualquier transformación */
    object-position: left top; /* Ajustamos para que la imagen inicie en la esquina superior izquierda */
    z-index: 1; /* La imagen queda en una capa inferior */
    margin: 0; /* Aseguramos que la imagen no tenga márgenes */
}

.contenido-texto-y-boton-wrapper {
    /* ¡CLAVE! Posicionamiento absoluto para superponerlo a la imagen */
    position: absolute; 
    z-index: 10; /* Asegura que esté por encima de la imagen */
    
    /* ¡CLAVE! Posicionamiento a la misma altura que la imagen y cerca del margen derecho */
    top: clamp(12rem, 16vh, 20rem); /* Se alinea con la parte superior de la imagen */
    right: clamp(1rem, 3vw, 3rem); /* Ajusta este valor para acercarlo/alejarlo del margen derecho */

    /* Puedes usar transform: translateY para un ajuste vertical fino si top: 0 no es perfecto */
    /* transform: translateY(5%); */ 

    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el contenido (texto y botón) dentro de este wrapper */
    justify-content: center;

    /* Max-width para el wrapper de texto/botón para que no sea demasiado ancho */
     /* Ajustado para ser más compacto y dejar más espacio a la imagen */
    width: auto;
    max-width: fit-content; /* Ocupará el 100% de su max-width */
    
    padding: 1.5rem;
    box-sizing: border-box;
    background-color: transparent;
    border-radius: 0.8rem;
    box-shadow: none;
    
    /* Margin auto para centrar horizontalmente si el right no es suficiente o si quieres que flote */
    /* margin-left: auto; */
    /* margin-right: auto; */
}

.contenido-texto {
    font-family: Merriweather;
    font-size: clamp(1.5rem, 7vw, 2.5rem);
    text-align: center;
    line-height: 1.2;
    color: #757575;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    margin-bottom: 1rem;
}

.contenido-texto h3 {
    font-size: inherit;
    color: inherit;
    text-shadow: inherit;
    margin: 0;
    padding: 0;
}

.contenido-gratuito .boton-descargar {
    background-color: #757575;
    cursor: pointer;
    text-align: center;
    color: white;
    padding: clamp(0.6rem, 2vw, 0.8rem) clamp(1.5rem, 6vw, 2rem);
    text-decoration: none;
    border-radius: 2rem;
    font-size: clamp(1em, 4vw, 1.5em);
    width: clamp(10rem, 65vw, 20rem);
    height: auto;
    max-width: 100%;
    white-space: normal;
    display: block;
}
  /*reseñas*/
     .reseñas-section {
        min-height: unset;
        
        overflow: hidden;
    }

    .reseñas-container {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        overflow-x: hidden;
        -webkit-overflow-scrolling: auto;
        scroll-snap-type: none;
        scroll-padding: 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: clamp(0.5rem, 1vw, 1rem);
    }

    .reseñas-container::-webkit-scrollbar {
        display: none;
    }

    .reseñas-card {
        flex: 1 1 0%;
        min-width: clamp(10rem, 18vw, 15rem);
        max-width: clamp(18rem, 22vw, 14.6875rem);
        height: clamp(20rem, 35vh, 28.125rem); 
        /* Margen superior responsivo */
        border-radius: clamp(0.5rem, 1vw, 1rem); 
        border: clamp(0.0625rem, 0.2vw, 0.1875rem) solid #FAE78B; 
        cursor: auto;
        scroll-snap-align: none;
    }

    .reseñas-card:active {
        cursor: auto;
    }

    .reseña-title {
        font-size: clamp(2.5rem, 3.5vw, 4.5rem); 
        margin-top: clamp(0.5rem, 1vw, 0.625rem);
        margin-bottom: clamp(0.5rem, 1vw, 0.8rem)
    }

    .reseñas-card p {
        font-size: clamp(1.5em, 2.3vw, 2.5em); 
        padding: clamp(0.5rem, 1vw, 0.625rem);
        margin-top: clamp(5rem, 10vw, 7.5rem); 
    }
    .i3 img {
            width: clamp(5.8rem, 18.8vw, 8.8rem);   /* Aumentado de 4rem a 5rem y de 6rem a 8rem */
            height: clamp(3.5rem, 14vw, 6rem);
}
    .i2{
        right: -2.5%;
    }
    /* --- Sección Certificados --- */
    .certificados {
        padding-left: clamp(2rem, 5vw, 4rem); 
        padding-right: clamp(2rem, 5vw, 4rem);
        min-height: clamp(25rem, 50vh, 35rem); 
        height: auto; 
        padding-top: clamp(3rem, 6vh, 4rem); 
        padding-bottom: clamp(3rem, 6vh, 4rem); 
    }

    .certificados h2 {
        font-size: clamp(2.5rem, 4vw, 3.5rem);
        margin-bottom: clamp(2rem, 3vw, 2.5rem); 
    }

    .certificados::before,
    .certificados::after {
        width: clamp(10rem, 15vw, 15rem); 
        height: clamp(8rem, 12vh, 12rem);
    }

    .certificados::before {
        top: clamp(1rem, 3vh, 1.5rem);
        left: clamp(2rem, 8vw, 6rem); 
        transform: rotate(50deg);
    }

    .certificados::after {
        bottom: clamp(1rem, 3vh, 1.5rem);
        right: clamp(2rem, 8vw, 6rem); 
        transform: rotate(5deg);
    }

    .certificado-bg-extra-1,
    .certificado-bg-extra-2 {
        width: clamp(10rem, 15vw, 15rem);
        height: clamp(8rem, 12vh, 12rem);
    }

    .certificado-bg-extra-1 {
        top: clamp(1rem, 3vh, 1.5rem);
        right: clamp(2rem, 5vw, 4rem); 
    }

    .certificado-bg-extra-2 {
        bottom: clamp(1rem, 3vh, 1.5rem);
        left: clamp(2rem, 5vw, 4rem); 
    }

    /* --- Carousel Viewport (Desktop): Ajustes CLAVE para el layout */
    .carousel-viewport {
        max-width: clamp(60rem, 80vw, 80rem); 
        margin-left: auto;
        margin-right: auto; 
        padding-right: clamp(2rem, 5vw, 4rem);
        position: relative; 
        overflow: visible; 
    }

    /* --- El Track del Carrusel (dentro del Viewport) --- */
    .certificados-container {
        display: flex;
        flex-wrap: nowrap; 
        align-items: center;
        padding-left: 0; 
        margin-top: clamp(1rem, 2vw, 1.5rem); 
    }

    /* --- Cada Certificado (Slide) --- */
    .certificado-circulo {
        width: clamp(13rem, 18vw, 18rem); 
        height: clamp(13rem, 18vw, 18rem);
        font-size: clamp(1.8rem, 2vw, 2.5rem); 
        margin-bottom: clamp(1rem, 2vw, 1.5rem); 
        margin-right: clamp(1.5rem, 2vw, 2rem); 
        margin-top: 0; 
        flex-shrink: 0; 
    }

    .certificado-circulo:last-child {
        margin-right: 0;
    }

    /* --- Flechas de navegación (AÑADIENDO ESTILOS FALTANTES) --- */
    .carousel-prev-btn,
    .carousel-next-btn {
        /* PROPIEDADES ORIGINALES DE LA MEDIA QUERY: */
        display: flex !important; /* Corregido: Flexbox para centrado */
        justify-content: center; /* Centrado ícono */
        align-items: center; /* Centrado ícono */
        font-size: clamp(1.8rem, 2.5vw, 2.2rem); 
        width: clamp(3rem, 4vw, 4rem); 
        height: clamp(3rem, 4vw, 4rem);
        top: 50%; 
        transform: translateY(-50%); 
        position: absolute; 

        /* PROPIEDADES FALTANTES RESTAURADAS DESDE ESTILOS GENERALES: */
        background: #F1CB66;
        border-radius: 50%;
        border: none;
        outline: none;
        padding: 0;
        cursor: pointer;
        z-index: 10;
        transition: background-color 0.3s ease;
    }

    .carousel-prev-btn {
        left: -webkit-calc(clamp(0.5rem, 2vw, 0.625rem) + clamp(1rem, 2vw, 2rem)); 
        left: calc(clamp(0.5rem, 2vw, 0.625rem) + clamp(1rem, 2vw, 2rem));
    }

    .carousel-next-btn {
        right: -webkit-calc(clamp(0.5rem, 2vw, 0.625rem) + clamp(1rem, 2vw, 2rem)); 
        right: calc(clamp(0.5rem, 2vw, 0.625rem) + clamp(1rem, 2vw, 2rem));
    }

    .carousel-prev-btn:hover,
    .carousel-next-btn:hover {
        background-color: #e0b04a;
    }

    .carousel-prev-btn:disabled,
    .carousel-next-btn:disabled {
        background-color: #ccc;
        cursor: not-allowed;
        opacity: 0.6;
    }

    /* --- Dots --- */
    .carousel-dots {
        margin-top: clamp(1.5rem, 2.5vw, 2rem);
    }

    .dot {
        width: clamp(0.6rem, 0.8vw, 0.75rem);
        height: clamp(0.6rem, 0.8vw, 0.75rem);
        margin: 0 clamp(0.4rem, 0.6vw, 0.5rem);
    }
    /* --- Sección Ubicación y Formulario --- */
    .ubicacion-formulario {
        padding: clamp(2rem, 5vw, 60px) clamp(1rem, 3vw, 20px);
        flex-direction: column; /* Mantenemos columna si queremos que el mapa esté arriba */
        align-items: center; /* Centramos el contenido de la sección */
        gap: clamp(2rem, 5vw, 40px);
    }

    .ubicacion {
        width: clamp(80%, 70vw, 1000px); /* Ancho responsivo del mapa */
        margin-top: clamp(1rem, 2vw, 20px);
    }
    .ubicacion h2 {
        font-size: clamp(2em, 4vw, 3em);
    }
    .ubicacion iframe {
        height: clamp(24rem, 46vh, 35rem); /* Altura responsiva del mapa */
    }

/* Contenedor principal del formulario y redes: Centrado y con mayor espacio */
.form-redes-wrapper {
    display: flex;
    flex-direction: row; /* El formulario y las redes están en fila */
    justify-content: center; /* Centra el bloque horizontalmente */
    align-items: center; /* Centra el formulario y las redes verticalmente entre sí */
    gap: clamp(3rem, 8vw, 6rem); /* Mayor espacio entre formulario y redes */
    width: 100%;
    max-width: clamp(75rem, 95vw, 95rem); /* Ancho máximo para el bloque completo */
    margin: clamp(4rem, 6vw, 6rem) auto; /* Margen superior/inferior para espaciar la sección y centrado horizontal */
    /* Las propiedades de padding-top, padding-bottom, margin-left se consolidaron en el 'margin' o se eliminaron si eran redundantes */
}

/* Formulario de Consulta: Más grande en desktop */
.formulario-consulta {
    flex-shrink: 0; /* Evita que el formulario se achique */
    width: clamp(25rem, 41vw, 37rem);
    font-size: clamp(0.9rem, 1.1vw, 1.2rem); /* Ancho responsivo del formulario */
    margin-left: clamp(6rem, 9vw, 8rem);
    padding: clamp(0.5rem, 3.5vw, 2.5rem);
     /* Padding interno del formulario */
    /* margin-left: 0; y margin-right: 0; se asumen si no hay otros conflictos o se pueden agregar si es necesario asegurar */
}

/* Contenedor general de Redes Sociales: Ajustes de alineación y ancho para desktop */
.redes-sociales {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center; /* Centra la columna de redes verticalmente */
    min-width: clamp(18rem, 25vw, 30rem); /* Ancho de columna de redes más grande */
    margin-top: 0; /* Elimina margen superior si fue definido para móviles */
}

/* Contenedor individual para cada botón + nombre (social-item): Ícono al lado del nombre */
.social-item {
    flex-direction: row;
    align-items: center;
    margin-bottom: clamp(1.2rem, 2.5vw, 2rem); /* Mayor espacio entre cada línea de red social */
    gap: clamp(1.2rem, 2.5vw, 2rem); /* Mayor espacio entre el botón y el nombre */
}

/* Botón social: Íconos más grandes en desktop */
.social-button {
    width: clamp(3rem, 5.5vw, 4.5rem);
    height: clamp(3rem, 5.5vw, 4.5rem);
    font-size: clamp(1em, 3vw, 2.5em);
}

/* Nombre de la red social: Nombres más grandes y sin sombra en desktop */
.social-name {
    font-size: clamp(1.3rem, 2.7vw, 2.5em);
    text-shadow: none; /* Quitamos la sombra para un look más limpio */
}

/* --- Elementos que no cambian de tamaño/estilo entre resoluciones dentro del formulario --- */
/* (Estos irían fuera del media query, en los estilos base de tu CSS, si aplican a todas las resoluciones) */

/* Si estos estilos son SOLO para 1024px y no tienen una versión "base", entonces irían aquí */
.formulario-consulta label {
    margin-bottom: clamp(0.5rem, 1vw, 8px);
}
.formulario-consulta input[type="text"],
.formulario-consulta input[type="email"],
.formulario-consulta textarea {
    padding: clamp(0.6rem, 1.2vw, 12px);
    margin-bottom: clamp(1rem, 2vw, 20px);
    font-size: clamp(0.9em, 1.1vw, 1.05em);
}
.formulario-consulta button[type="submit"],
.whatsapp-button {
    padding: clamp(0.6rem, 1.2vw, 12px) clamp(1rem, 2vw, 25px);
    font-size: clamp(1em, 1.1vw, 1.1em);
    width: 100%;
}
.whatsapp-button {
    margin-top: clamp(0.3rem, 0.5vw, 5px);
}
.whatsapp-button i {
    margin-right: clamp(0.3rem, 0.5vw, 8px);
    font-size: clamp(1.1em, 1.3vw, 1.2em);
}

footer {
        /*
           IMPORTANTE: Si en tus estilos generales el 'padding' del footer ya es muy alto,
           y quieres reducirlo en desktop, DEBES SOBRESCRIBIRLO aquí.
           De lo contrario, el padding de tus estilos generales seguirá aplicando.
           Este 'padding' es la clave para la altura en desktop.
        */
        padding: clamp(0.5rem, 2vw, 1rem) 0; /* Min 2rem, Max 3rem de padding vertical en desktop */
        
        /* Opcional: Sombra superior para "elevarlo" sutilmente en desktop (Si la quieres) */
        box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1); 
        
        /* Si tu 'position: relative' u 'overflow: hidden' no está en generales, ponlo aquí */
        position: relative; 
        overflow: hidden; 
    }

    /* --- Pseudoelemento footer::before (Para el toque creativo SOLO en desktop) --- */
    footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
        pointer-events: none;
        z-index: 0;
    }

    /* --- Estilos para '.footer-content' en Escritorio --- */
    .footer-content {
        margin: 0 auto; /* Asegura el centrado horizontal en desktop */
        padding: 0 clamp(7rem, 9vw, 8rem); /* Más padding horizontal en desktop */

        /* --- CLAVE: Disposición Horizontal --- */
        display: flex; /* Asegura display flex (si no lo hereda de generales) */
        flex-direction: row; /* Coloca los elementos hijos (p, div de enlaces) en fila */
        justify-content: space-between; /* Empuja el copyright a un extremo y los enlaces al otro */
        align-items: center; /* Alinea los elementos verticalmente en el centro */
        gap: 1.5rem; /* Espacio entre los elementos cuando están en fila */
        
        /* Asegura que el contenido esté sobre el pseudoelemento */
        position: relative; 
        z-index: 1; 
    }

    /* --- Estilos para '.footer-bottom-links' (si existe, para enlaces internos) --- */
    /* Asumiendo que tienes un contenedor como <div class="footer-bottom-links"> para tus <a> */
    .footer-bottom-links {
        display: flex; /* Haz que los enlaces individuales también usen flex */
        flex-wrap: wrap; /* Para que los enlaces puedan envolverse si hay muchos */
        justify-content: flex-end; /* Alinea los enlaces a la derecha si hay muchos */
        gap: 1rem; /* Espacio entre los enlaces individuales */
    }

    /* --- Ajuste de tamaño de fuente para desktop (si quieres que sea diferente a los generales) --- */
    /* Esto afectará a cualquier <p> o <a> directamente dentro de .footer-content */
    footer .footer-content p, 
    footer .footer-content a {
        font-size: clamp(0.9em, 1.2vw, 1.1em); 
    }
}

@media(min-width:1300px){
        .logo img {
        height: clamp(14rem, 29vh, 30rem); /* Límites en rem, preferido en vh */
        width: clamp(14rem, 29vh, 30rem); /* Límites en rem, preferido en vh */
    }
    .menu-item{
        font-size: clamp(0.7rem, 5vw, 1.3rem);
    }
        .hero p{
    font-size: clamp(2.5rem, 10vw, 4.5rem);
    }
    .servicios{
        top: clamp(29rem, 37vh, 47rem);
    }

    .servicio-item{
        width: clamp(12rem, 14vw, 18rem);
        height: clamp(11rem, 20vw, 22rem);
    }
    .servicio-texto{
        font-size: clamp(1.5em, 1.9vw, 1.6em);
    }
    .servicio-1 .servicio-texto{
        font-size: clamp(1.5em, 1.7vw, 1.7em);
    }
    .contenido-texto-y-boton-wrapper{
            top: clamp(16rem, 20vh, 24rem); 
            right: clamp(4rem, 6vw, 6rem);
    }

    .reseñas-card{
        height: clamp(23rem, 38vh, 31.125rem);
    }

    .certificados{
    min-height: clamp(10rem, 30vh, 20rem); /* VALORES REDUCIDOS para menos altura */
    height: auto; 
    padding-top: clamp(1rem, 4vh, 2rem); 
    padding-bottom: clamp(1rem, 4vh, 2rem);
    }
    .carousel-viewport{
        margin-left:0 ;
    }

    .social-button {
    width: clamp(1.6rem, 4.1vw, 3.1rem);
    height: clamp(1.6rem, 4.1vw, 3.1rem);
    font-size: clamp(0.6em, 2.6vw, 2.1em);
    }
    .social-name{
        font-size: clamp(1rem, 2.4vw, 2.2em);
    }

    .footer-content{
        padding: 0 clamp(10rem, 12vw, 11rem);
    }
}

@media(min-width: 1440px){
    .header{
        height: clamp(12rem, 22vh, 18rem);
    }
    .logo img {
        height: clamp(16rem, 29vh, 32rem); /* Límites en rem, preferido en vh */
        width: clamp(16rem, 29vh, 32rem); /* Límites en rem, preferido en vh */
    }
    .menu-item{
        
    }
        .hero p{
    font-size: clamp(2.5rem, 10vw, 5rem);
    }
    .servicios{
        top: clamp(29rem, 37vh, 49rem);
    }
    .contenido-texto-y-boton-wrapper{
            top: clamp(19rem, 20vh, 27rem); 
            right: clamp(8rem, 6vw, 10rem);
    }

    .contenido-texto{
        font-size: clamp(1.7rem, 7vw, 2.7rem);
        
    }
    .reseñas-card{
        height: clamp(28rem, 38vh, 36rem);
    }
        .certificados{
        padding-left: 2vw;
    }
    .carousel-viewport{
        margin-left: 0;

    }
}
@media(min-width:1920px){
    .header{
        height: clamp(16rem, 22vh, 22rem);
    }
    .logo img{
        height: clamp(22rem, 29vh, 38rem); /* Límites en rem, preferido en vh */
        width: clamp(22rem, 29vh, 38rem);
    }
    .header-principal{
        font-size: clamp(5em, 6vw, 6em);
    }
    .header-subtitulo{
        font-size: clamp(3em, 2.5vw, 4em);
    }
        .menu-item{
        font-size: clamp(1.5rem, 5vw, 2rem);
    }
    .hero{
        height: clamp(50rem, 37vh, 60rem);
    }
    .hero p{
    font-size: clamp(2.5rem, 10vw, 7rem);
    }
    .servicios{
        top: clamp(40rem, 37vh, 52rem);
    }
    .servicios-grid{
        gap: clamp(2rem, 1vw, 3rem);
    }
    .servicio-texto{
        font-size: clamp(1em, 5vw, 2.6em);
    }
    .servicio-1 .servicio-texto{
        font-size: clamp(1em, 5vw, 2.6em);
    }
        .contenido-texto{
        font-size: clamp(1.7rem, 7vw, 4.2rem);
        
    }
    .contenido-gratuito .boton-descargar {
        border-radius: 2rem;
        font-size: clamp(1em, 4vw, 2em);
        width: clamp(10rem, 65vw, 30rem);
    }
    .contenido-texto-y-boton-wrapper{
            top: clamp(24rem, 20vh, 30rem); 
            right: clamp(8rem, 6vw, 10rem);
    }
    .reseñas-card{
        height: clamp(38rem, 38vh, 36rem);
        min-width: clamp(12rem, 10vw, 24rem);
        max-width: clamp(22rem, 12vw, 33rem);
    }
       .reseñas-card p {
        font-size: clamp(1.5em, 5vw, 3.5em); 
        margin-top: clamp(5rem, 20vw, 7.5rem); 
    }
    .i3 img {
            width: clamp(5.8rem, 18.8vw, 8.8rem);   /* Aumentado de 4rem a 5rem y de 6rem a 8rem */
            height: clamp(3.5rem, 14vw, 6rem);
        }
    .i2 img{
            width: clamp(5.8rem, 18.8vw, 14rem);   /* Aumentado de 4rem a 5rem y de 6rem a 8rem */
            height: clamp(3.5rem, 14vw, 10rem);
    }
    .i1 img{
            width: clamp(5.8rem, 18.8vw, 14rem);   /* Aumentado de 4rem a 5rem y de 6rem a 8rem */
            height: clamp(3.5rem, 14vw, 10rem);
    }
    .i1{
       top: 2rem; 
       left: 2rem;
    }
    .i2{
        top: clamp(1.5rem, 5vw, 7.3%);
        right: 0;
    }
    .certificado-circulo{
        width: clamp(10rem, 18vw, 25rem); /* Ajuste de tamaño para desktop, más pequeños pero más caben */
        height: clamp(10rem, 18vw, 25rem);
        font-size: clamp(3rem, 4vw, 2rem);       
    }
    .certificados{
        padding-left: 2vw;
    }
    .carousel-viewport{
        margin-left: 0;

    }
    .ubicacion iframe{
        height: clamp(34rem, 46vh, 40rem);
    }
    .formulario-consulta{
        width: clamp(30rem, 41vw, 50rem);
        margin-left: clamp(0rem, 9vw, 0.5rem);
        font-size: clamp(2rem, 1.1vw, 4rem);
    }

    .social-button {
        width: clamp(1.6rem, 4.1vw, 6rem);
        height: clamp(1.6rem, 4.1vw, 6rem);
        font-size: clamp(0.6em, 2.6vw, 4em);
    }
    .social-name{
        font-size: clamp(1rem, 2.4vw, 4em);
    }


}