/*
Theme Name: MI Register Landing Theme
Theme URI: http://miregister.com/
Author: Antigravity AI
Author URI: https://miregister.com
Description: A custom landing page theme for MI Register based on HTML design.
Version: 1.0
Text Domain: miregister
*/

/* Base y Reseteo */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #f7f9fc;
    /* Color de fondo ligero para contrastar las siguientes secciones */
}

/* --- SECCIÓN 1: ENCABEZADO --- */
.hero-header {
    width: 100%;
    /* Gradiente analizado de la imagen: Cyan vibrante a Azul medio oscuro */
    background: linear-gradient(90deg, #00c6ff 0%, #2f69c4 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    height: 90px;
    /* Altura aproximada para dar respiro al logo y navegación */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    /* Sombra elegante */
}

/* Logo */
.hero-header .logo-container img {
    max-height: 55px;
    /* Ajuste basado en el logo proporcionado */
    width: auto;
    transition: transform 0.3s ease;
}

.hero-header .logo-container img:hover {
    transform: scale(1.05);
    /* Micro-interacción */
}

/* Navegación */
.hero-header .nav-links {
    display: flex;
    list-style: none;
    gap: 28px;
    /* Espaciado generoso entre enlaces */
}

.hero-header .nav-links li a {
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    /* Tamaño de fuente óptimo */
    font-weight: 700;
    /* Negrita para igualar el recorte */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 5px;
    transition: color 0.3s ease;
}

/* Efecto Hover dinámico (Subrayado animado) */
.hero-header .nav-links li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #ffffff;
    transition: width 0.3s ease;
}

.hero-header .nav-links li a:hover::after {
    width: 100%;
}

/* Responsive Básico */
@media (max-width: 1024px) {
    .hero-header {
        flex-direction: column;
        height: auto;
        padding: 15px;
    }

    .hero-header .nav-links {
        margin-top: 15px;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
}

/* --- SECCIONES 2 y 3: CARACTERSTICAS --- */
.feature-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 80px 10%;
    gap: 60px;
}

.feature-img-container {
    flex: 1;
    display: flex;
    justify-content: center;
}

.feature-img-container img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    transition: transform 0.5s ease;
}

.feature-img-container img:hover {
    transform: translateY(-8px);
    /* Micro-interacción */
}

.feature-text-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.feature-text-container h2 {
    font-size: 42px;
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
}

.feature-text-container p {
    font-size: 20px;
    line-height: 1.5;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    /* Transición a una fuente de lectura pura */
    font-weight: 400;
}

/* Variante Oscura (Sección Superior) */
.feature-dark {
    background-color: #2b2c30;
    color: #ffffff;
}

.feature-dark .highlight {
    color: #00c6ff;
}

/* Variante Degradado Azul (Sección Inferior) */
.feature-gradient {
    background: linear-gradient(135deg, #00c6ff 0%, #2f69c4 100%);
    color: #ffffff;
    position: relative;
    padding-bottom: 120px;
    /* Dar espacio extra a la ola */
}

.feature-gradient .feature-text-container h2 {
    font-size: 46px;
    /* Texto ligeramente más grande según ref */
}

/* Ola decorativa (Wave) en la parte inferior de la sección azul */
.wave-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.wave-bottom svg {
    display: block;
    width: calc(100% + 1.3px);
    height: 70px;
}

.wave-bottom .shape-fill {
    fill: #f7f9fc;
    /* Mismo color del background de body / sig. sección */
}

@media (max-width: 992px) {
    .feature-section {
        flex-direction: column;
        padding: 60px 5%;
        text-align: center;
        gap: 40px;
    }

    .feature-gradient {
        flex-direction: column-reverse;
        /* Imagen abajo en móvil queda mejor */
    }

    .feature-text-container h2 {
        font-size: 32px;
    }

    .feature-gradient .feature-text-container h2 {
        font-size: 32px;
    }
}

/* --- STYLES PARA SLIDER (SWIPER) --- */
.feature-slider {
    width: 100%;
    position: relative;
}

/* Asegurar que las secciones dentro del slide ocupen altura completa */
.feature-slider .swiper-slide {
    height: auto;
    display: flex;
}

.feature-slider .swiper-slide section {
    width: 100%;
    height: 100%;
}

/* Ajustes para navegación */
.feature-slider .swiper-button-next,
.feature-slider .swiper-button-prev {
    color: #00c5ff;
    /* Cyan color */
    transition: all 0.3s ease;
}

.feature-slider .swiper-button-next:hover,
.feature-slider .swiper-button-prev:hover {
    opacity: 0.8;
    transform: scale(1.1);
}

.feature-slider .swiper-pagination-bullet {
    background: #ffffff;
    opacity: 0.5;
}

.feature-slider .swiper-pagination-bullet-active {
    background: #00c5ff;
    opacity: 1;
}

/* --- SECCIÓN 4: ¿QUÉ HACEMOS? --- */
.que-hacemos-section {
    background-color: #f7f9fc;
    /* Mismo color que la ola superior para continuidad */
    padding: 80px 5%;
    text-align: center;
}

.title-box {
    background-color: #00c5ff;
    /* Cyan brillante exacto del recorte */
    display: inline-block;
    padding: 12px 50px;
    margin-bottom: 30px;
    /* Pequeña sombra para elevar la caja */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.title-box h2 {
    color: #ffffff;
    font-size: 44px;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.que-hacemos-text {
    color: #262445;
    /* Azul muy oscuro/violeta del texto en el recorte */
    font-size: 24px;
    line-height: 1.5;
    max-width: 850px;
    margin: 0 auto;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    /* Texto en negrita para mantener fuerza */
}

@media (max-width: 768px) {
    .title-box {
        padding: 10px 30px;
    }

    .title-box h2 {
        font-size: 32px;
    }

    .que-hacemos-text {
        font-size: 18px;
        padding: 0 15px;
    }
}

/* --- SECCIÓN 5: CUADRCULA DE SERVICIOS (TARJETAS) --- */
.services-grid-section {
    background-color: #f7f9fc;
    padding: 20px 5% 100px 5%;
    /* Espaciado extra al fondo */
    display: flex;
    justify-content: center;
}

.services-grid {
    display: grid;
    /* Layout de 2 columnas equidistantes */
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 1200px;
    width: 100%;
}

.service-card {
    border-radius: 15px;
    /* Bordes suaves según la imagen */
    padding: 45px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Empuja el botón siempre hasta abajo */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
    /* Animación de elevación al pasar el mouse */
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
}

.service-card h3 {
    font-size: 32px;
    margin: 0;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.1;
    max-width: 75%;
}

.card-icon {
    font-size: 48px;
    /* Tamaño del icono proporcionado */
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-icon img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.service-card p {
    font-size: 17px;
    line-height: 1.6;
    margin: 0 0 40px 0;
    text-align: justify;
    /* Justificado completo como en la imagen */
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    flex-grow: 1;
    /* Permite que el texto tome el espacio sobrante si es corto */
}

.card-button {
    text-decoration: none;
    display: inline-block;
    padding: 12px 30px;
    border-radius: 30px;
    /* Forma de píldora */
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    align-self: flex-start;
    /* Evita que el botón ocupe el 100% del ancho */
    transition: opacity 0.3s ease, transform 0.2s ease;
}

.card-button:hover {
    opacity: 0.9;
    transform: scale(1.02);
    /* Pequeño 'bounce' visual */
}

/* Variante: Tarjeta Cyan */
.card-cyan {
    background-color: #00c5ff;
    color: #ffffff;
}

.card-cyan .card-icon {
    color: #262445;
    /* Color del ícono emparejado con títulos oscuros para buen contraste */
}

.card-cyan .card-button {
    background-color: #ffffff;
    color: #00c5ff;
}

/* Variante: Tarjeta Oscura */
.card-dark {
    background-color: #2b2c30;
    color: #ffffff;
}

.card-dark .card-icon {
    color: #00c5ff;
}

.card-dark .card-button {
    background-color: #00c5ff;
    color: #ffffff;
}

/* Responsividad general */
@media (max-width: 992px) {
    .services-grid {
        grid-template-columns: 1fr;
        /* Colapsa a 1 columna en pantallas reducidas */
        gap: 20px;
    }

    .service-card {
        padding: 35px 25px;
    }
}

/* --- SECCIÓN 6: WEBINARS --- */
.webinars-section {
    background-color: #ffffff;
    /* Fondo blanco puro para dividir secciones */
    padding: 80px 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.webinars-img-container {
    flex: 1;
    display: flex;
    justify-content: center;
}

.webinars-img-container img {
    max-width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}

.webinars-img-container img:hover {
    transform: translateY(-8px);
    /* Micro-interacción */
}

.webinars-text-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;
    align-items: flex-start;
    /* Alinear contenido a la izquierda */
}

.webinars-text-container h2 {
    font-size: 40px;
    color: #262445;
    /* Violeta/Azul oscuro del diseño */
    margin: 0;
    text-transform: uppercase;
    line-height: 1.2;
    font-weight: 700;
}

.webinars-text-container p {
    font-size: 20px;
    color: #262445;
    line-height: 1.6;
    margin: 0;
    text-align: justify;
    /* Textos justificados según el recorte */
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

.btn-cyan {
    text-decoration: none;
    background-color: #00c5ff;
    /* Mismo cyan base */
    color: #ffffff;
    padding: 15px 35px;
    border-radius: 30px;
    /* Forma de píldora */
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 197, 255, 0.3);
    /* Brillo difuminado */
}

.btn-cyan:hover {
    background-color: #00a5db;
    /* Botón ligeramente más oscuro al hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 197, 255, 0.4);
}

@media (max-width: 992px) {
    .webinars-section {
        /* Si preferías la imagen a la derecha en PC, aquí en móvil la apilamos visualmente */
        flex-direction: column;
        padding: 60px 5%;
        text-align: center;
    }

    .webinars-text-container {
        align-items: center;
        /* Centrar todo en móviles */
    }

    .webinars-text-container p {
        text-align: center;
        /* Quitar justificado en móviles muy pequeños para legibilidad */
    }
}

/* --- SECCIÓN 7: CERTIFICACIONES MARCAN EL CAMINO --- */
.certifications-focus-section {
    /* Mismo gradiente utilizado en el Header inicial para mantener branding */
    background: linear-gradient(90deg, #00c6ff 0%, #2f69c4 100%);
    padding: 80px 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    color: #ffffff;
}

.cert-focus-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
}

.cert-focus-text h2 {
    font-size: 42px;
    margin: 0;
    text-transform: uppercase;
    line-height: 1.2;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Ligera sombra para separar del fondo vibrante */
}

.cert-focus-text p {
    font-size: 19px;
    line-height: 1.6;
    margin: 0;
    text-align: justify;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    /* Texto normal, no negrita */
}

.btn-white {
    text-decoration: none;
    background-color: #ffffff;
    color: #00c5ff;
    /* Texto cyan */
    padding: 15px 35px;
    border-radius: 30px;
    /* Píldora */
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.btn-white:hover {
    color: #2f69c4;
    /* Texto se vuelve azul oscuro al hover y botón crece */
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.cert-focus-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.cert-line-item {
    display: block;
    /* Tratamos los cuadros como botones / links */
    text-decoration: none;
    color: #ffffff;
    border: 2px solid #ffffff;
    /* Recuadro blanco sólido */
    padding: 22px 30px;
    font-size: 26px;
    /* Letra grande según el diseño */
    font-weight: 700;
    text-align: center;
    /* Alineado al centro de su cuadro */
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    background-color: rgba(255, 255, 255, 0);
    /* Transparente por defecto */
}

.cert-line-item:hover {
    background-color: #ffffff;
    /* Se llena de blanco */
    color: #2f69c4;
    /* El texto toma el tono azul profundo del gradiente */
    transform: translateX(-5px);
    /* Pequeño desplazamiento hacia la izquierda */
    box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.1);
}

@media (max-width: 992px) {
    .certifications-focus-section {
        flex-direction: column;
        padding: 60px 5%;
        text-align: center;
    }

    .cert-focus-text {
        align-items: center;
    }

    .cert-focus-text p {
        text-align: center;
    }

    .cert-line-item {
        font-size: 20px;
        padding: 15px 20px;
    }
}

/* --- SECCIÓN 8: CLIENTES Y CONFIANZA --- */
.clients-section {
    background-color: #2b2c30;
    /* Fondo oscuro continuo a otras áreas */
    padding: 80px 10%;
    text-align: center;
    color: #ffffff;
}

.clients-text {
    max-width: 1000px;
    margin: 0 auto 60px auto;
    /* 60px de separación con los logos */
    font-size: 21px;
    line-height: 1.6;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    /* Normal base */
}

.clients-text strong {
    font-weight: 700;
}

.clients-logos-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    /* Fuerza a estar en una linea si cabe, o hace overflow/scroll si es movil o se puede cambiar a wrap en movil */
    gap: 20px;
    margin: 0 auto;
    max-width: 1100px;
}

.clients-logos-grid img {
    max-height: 55px;
    /* Altura más baja para que empate con el diseño esbelto de la imagen */
    max-width: 140px;
    object-fit: contain;
    opacity: 0.85;
    transition: opacity 0.3s ease, transform 0.3s ease;
    filter: grayscale(100%);
    /* Opcional, pero se ve más profesional. Si los ocupas a color, podemos remover esto */
}

.clients-logos-grid img:hover {
    opacity: 1;
    transform: scale(1.05);
    /* Micro-interacción */
    filter: grayscale(0%);
}

@media (max-width: 768px) {
    .clients-text {
        font-size: 18px;
    }

    .clients-section {
        padding: 60px 5%;
    }

    .clients-logos-grid {
        flex-wrap: wrap;
        /* En movil si permitimos wrap */
        justify-content: center;
        gap: 30px;
    }

    .clients-logos-grid img {
        max-height: 40px;
        max-width: 90px;
    }
}

/* --- SECCIÓN 9: INTRODUCCIÓN A EXPERIENCIA CLIENTES --- */
.testimonials-intro-section {
    background-color: #f7f9fc;
    /* Fondo claro para dar respiro después del bloque oscuro */
    padding: 90px 5%;
    text-align: center;
}

.testimonials-intro-section h2 {
    font-size: 40px;
    margin: 0 0 35px 0;
    line-height: 1.3;
    text-transform: uppercase;
    font-weight: 700;
}

.testimonials-intro-section h2 .text-black {
    color: #1a1a1a;
    /* Negro casi puro */
    display: block;
}

.testimonials-intro-section h2 .text-blue {
    color: #2f69c4;
    /* Azul emparejado con la paleta de la marca (gradiente) */
    display: block;
}

.testimonials-intro-text {
    max-width: 950px;
    margin: 0 auto;
    font-size: 21px;
    color: #444444;
    /* Gris oscuro para el párrafo general */
    line-height: 1.6;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

.testimonials-intro-text strong {
    font-weight: 700;
    color: #1a1a1a;
}

@media (max-width: 768px) {
    .testimonials-intro-section {
        padding: 60px 5%;
    }

    .testimonials-intro-section h2 {
        font-size: 28px;
    }

    .testimonials-intro-text {
        font-size: 18px;
    }
}

/* --- SECCIÓN 10: TARJETAS DE TESTIMONIOS --- */
.testimonials-cards-section {
    background-color: #f7f9fc;
    /* Continuación del fondo claro */
    padding: 10px 5% 100px 5%;
    /* Poco espacio superior porque la intro ya lo da */
    display: flex;
    justify-content: center;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    max-width: 1050px;
    width: 100%;
    margin-top: 20px;
    /* Dar margen al avatar salido */
}

/* TRUCO: Envoltorio para crear esa "sombra o fondo desplazado" en gradiente */
.testimonial-wrapper {
    background: linear-gradient(90deg, #00c5ff 0%, #2f69c4 100%);
    border-radius: 12px;
    /* La tarjeta blanca de adentro se mueve, revelando el gradiente abajo y a la derecha */
}

.testimonial-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 40px 40px 30px 40px;
    position: relative;
    transform: translate(-12px, -12px);
    /* Desplaza la tarjeta a la izquierda y arriba */
    transition: transform 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.05);
    /* Pequeño contorno */
}

.testimonial-wrapper:hover .testimonial-card {
    transform: translate(-15px, -15px);
    /* Se mueve visualmente al hacer hover */
}

/* Círculo del Avatar */
.testimonial-avatar {
    width: 80px;
    height: 80px;
    background-color: #00c5ff;
    /* Color cian */
    border-radius: 50%;
    position: absolute;
    top: -40px;
    right: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* En la parte inferior para emular el busto */
    overflow: hidden;
    /* Corta el icono para que parezca un busto */
    /* boxShadow sutil para resaltar */
    box-shadow: 0 5px 15px rgba(0, 197, 255, 0.3);
    border: 4px solid #ffffff;
    /* Borde blanco como suelen tener estos avatares (opcional, le da buen toque) */
}

.testimonial-avatar i {
    color: #ffffff;
    font-size: 55px;
    /* Tamaño grande */
    margin-top: 15px;
    /* Empuja un poco abajo para emular hombros/busto */
}

.testimonial-stars {
    color: #00c5ff;
    /* Estrellas Cian */
    font-size: 16px;
    margin-bottom: 25px;
    display: flex;
    gap: 5px;
}

.testimonial-card p {
    font-size: 15px;
    color: #333333;
    line-height: 1.6;
    margin: 0 0 30px 0;
    text-align: left;
    font-family: 'Poppins', sans-serif;
    flex-grow: 1;
    /* Permite enviar el autor hasta abajo si texto es corto */
}

.testimonial-author {
    font-weight: 700;
    font-size: 18px;
    color: #1a1a1a;
    margin: 0;
}

@media (max-width: 992px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 70px;
        /* Mucho gap vertical para evitar que el avatar invada al de arriba */
    }
}

/* --- SECCIÓN 11: ALCANCE DE CERTIFICACIONES --- */
.scope-section {
    background-color: #f2f4f8;
    /* Un gris muy tenue para dar contraste al fondo anterior */
    padding: 80px 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.scope-text-container {
    flex: 0 0 35%;
    /* Ocupa el 35% del ancho de pantalla */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.scope-text-container h2 {
    font-size: 38px;
    color: #2b2c30;
    /* Tono carbón */
    margin: 0;
    text-transform: uppercase;
    line-height: 1.15;
    font-weight: 800;
    /* Extra bold coincidiendo con el recorte */
}

.scope-text-container p {
    font-size: 18px;
    color: #333333;
    line-height: 1.6;
    margin: 0;
    text-align: justify;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    /* Semibold para mayor densidad según imagen */
}

.scope-grid-container {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 columnas */
    gap: 50px 20px;
    /* Espaciado generoso */
    align-items: end;
}

.scope-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
    transition: transform 0.3s ease;
}

.scope-item:hover {
    transform: translateY(-8px);
    /* Microanimación */
}

.scope-item img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    /* Recorte en forma de círculo perfecto */
    object-fit: cover;
    background-color: #ffffff;
    /* Previene bordes feos si tienen fondo transparente duro */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
    /* Sombra suave para que flote el círculo */
    padding: 5px;
    /* Añade un marco blanco interno súper limpio antes de la sombra */
}

.scope-item h4 {
    font-size: 16px;
    color: #2b2c30;
    margin: 0;
    font-weight: 700;
}

@media (max-width: 1024px) {
    .scope-section {
        flex-direction: column;
        text-align: center;
        gap: 50px;
    }

    .scope-text-container {
        align-items: center;
        flex: auto;
    }

    .scope-text-container p {
        text-align: center;
        /* En móviles quitamos justificado para no romper fluidez */
    }
}

@media (max-width: 768px) {
    .scope-grid-container {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columnas en móviles estándar */
    }
}

@media (max-width: 480px) {
    .scope-grid-container {
        grid-template-columns: 1fr;
        /* 1 columna en móviles muy chiquitos */
    }
}

/* --- SECCIÓN 12: INTRODUCCIÓN A ACREDITACIONES --- */
.accreditations-intro-section {
    background-color: #ffffff;
    /* Fuerte contraste tras el gris de la sección de Alcance */
    padding: 90px 5%;
    text-align: center;
}

.accreditations-intro-section h2 {
    font-size: 38px;
    color: #2b2c30;
    margin: 0 0 25px 0;
    line-height: 1.3;
    text-transform: uppercase;
    font-weight: 800;
    /* Acorde al recorte subido (muy bold) */
}

.accreditations-intro-text {
    max-width: 900px;
    margin: 0 auto;
    font-size: 19px;
    color: #333333;
    /* Un gris sumamente legible pero denso */
    line-height: 1.6;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    /* Semibold según el peso del texto en imagen */
}

@media (max-width: 768px) {
    .accreditations-intro-section {
        padding: 60px 5%;
    }

    .accreditations-intro-section h2 {
        font-size: 28px;
    }

    .accreditations-intro-text {
        font-size: 17px;
    }
}

/* --- SECCIÓN 13: LISTA DE ACREDITACIONES --- */
.accreditations-list-section {
    background-color: #ffffff;
    /* Sigue el fondo blanco */
    padding: 20px 10% 80px 10%;
    /* Poco padding arriba ya que la intro dejó espacio */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centra el bloque entero en la pantalla */
}

.accreditation-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 950px;
    padding: 50px 0;
    border-bottom: 2px solid #00c5ff;
    /* Separador Cyan de la marca */
    gap: 50px;
}

.accreditation-item:last-child {
    border-bottom: none;
    /* El último elemento no tiene línea según diseño lógico */
}

.accred-text-box {
    flex: 1;
    /* Toma el espacio mayoritario */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.accred-text-box h3 {
    font-size: 24px;
    color: #2b2c30;
    margin: 0;
    font-weight: 700;
}

.accred-text-box p {
    font-size: 17px;
    color: #333333;
    line-height: 1.6;
    margin: 0;
    font-weight: 600;
    /* Medium-bold para asemejarse al recorte */
    font-family: 'Poppins', sans-serif;
    text-align: justify;
}

.accred-image-box {
    flex: 0 0 150px;
    /* Tamaño fijo de la caja */
    display: flex;
    justify-content: flex-start;
    /* Cambio hacia la izquierda */
}

.accred-image-box img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    /* Hace el recorte redondo perfecto */
    object-fit: cover;
    background-color: #ffffff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    /* Sombra suave */
    transition: transform 0.3s ease;
}

.accred-image-box img:hover {
    transform: scale(1.05);
    /* Interacción delicada */
}

@media (max-width: 768px) {
    .accreditation-item {
        flex-direction: column;
        /* Apila en movil (imagen arriba o abajo) */
        text-align: center;
        gap: 25px;
    }

    .accred-text-box p {
        text-align: center;
        /* En móviles quitamos justificado pesado */
    }

    .accred-image-box {
        justify-content: center;
        order: -1;
        /* Mueve la imagen por encima del texto en pantallas pequeñas para priorizar gráficos */
    }
}

/* --- SECCIÓN 14: CTA (LLAMADO A LA ACCIÓN) --- */
.cta-section {
    background-color: #2b2c30;
    /* Fondo Oscuro */
    padding: 120px 5% 100px 5%;
    /* Padding alto para que la curva caiga libremente */
    position: relative;
    margin-top: -1px;
    /* Prevención de gap blanco */
}

/* Curva SVG Divisoria */
.cta-curve-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: translateY(-1px);
}

.cta-curve-top svg {
    display: block;
    width: calc(100% + 1.3px);
    height: 50px;
    /* Caída de la curva */
}

.cta-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.cta-text-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;
    align-items: flex-start;
}

.cta-text-box h2 {
    font-size: 44px;
    color: #ffffff;
    margin: 0;
    line-height: 1.15;
    text-transform: uppercase;
    font-weight: 800;
}

.cta-text-box h2 .text-cyan {
    color: #00c5ff;
    /* Azul/Cyan brillante del logo */
}

.cta-text-box p {
    font-size: 19px;
    color: #ffffff;
    line-height: 1.6;
    margin: 0;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    max-width: 90%;
}

.btn-cyan {
    text-decoration: none;
    background-color: #00c5ff;
    color: #ffffff;
    padding: 16px 40px;
    border-radius: 40px;
    /* Forma de píldora redonda */
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    box-shadow: 0 5px 15px rgba(0, 197, 255, 0.3);
    /* Resplandor cyan */
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
}

.btn-cyan:hover {
    background-color: #2f69c4;
    /* Al oscuro al interactuar */
    box-shadow: 0 5px 15px rgba(47, 105, 196, 0.4);
    transform: translateY(-3px);
}

.cta-image-wrapper {
    flex: 0 0 50%;
    background: linear-gradient(90deg, #00c5ff 0%, #2f69c4 100%);
    border-radius: 12px;
    display: flex;
}

.cta-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    /* Redondeo de la foto real */
    transform: translate(-15px, -15px);
    /* Truco visual para que la base quede expuesta creando la sombra sólida */
    transition: transform 0.4s ease;
}

.cta-image-wrapper:hover .cta-image {
    transform: translate(-20px, -20px);
    /* Extiende el asomo sutilmente */
}

@media (max-width: 992px) {
    .cta-container {
        flex-direction: column;
        text-align: center;
        gap: 50px;
    }

    .cta-text-box {
        align-items: center;
    }

    .cta-text-box p {
        max-width: 100%;
    }
}

/* --- PIE DE PGINA (FOOTER) --- */
.site-footer {
    background-color: #232428;
    /* Un poquito más oscuro que el contenedor anterior para separarlos */
    border-top: 10px solid #00c5ff;
    /* Barra gruesa transversal Cyan como en la captura */
    padding: 50px 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    /* En caso de encoger la pantalla */
    gap: 40px;
}

.footer-logo img {
    width: 180px;
    height: auto;
    display: block;
}

.footer-contact-info {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    justify-content: center;
    flex: 1;
    /* Empuja el logo a la izq y links a la der */
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.5px;
}

.contact-item i {
    color: #00c5ff;
    /* Cyan eléctrico */
    font-size: 26px;
    /* Iconos grandecitos */
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-end;
    /* Texto alineado a la derecha */
}

.footer-links a {
    color: #ffffff;
    text-decoration: underline;
    font-weight: 600;
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    text-underline-offset: 4px;
    /* Separa un poco la línea de las letras */
    transition: color 0.3s ease;
    text-align: right;
    /* Para cuando el texto tiene un quiebre <br> */
    line-height: 1.4;
}

.footer-links a:hover {
    color: #00c5ff;
}

@media (max-width: 1024px) {
    .site-footer {
        flex-direction: column;
        text-align: center;
        padding: 60px 5%;
    }

    .footer-contact-info {
        flex-direction: column;
        gap: 25px;
    }

    .footer-links {
        align-items: center;
        margin-top: 10px;
    }

    .footer-links a {
        text-align: center;
    }
}