/* ============================================ */
/* RESET Y VARIABLES                            */
/* ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-blue: #1a3a5c;
    --primary-dark: #0d2137;
    --secondary-blue: #2a6a9c;
    --accent-blue: #4a90d9;
    --light-blue: #e8f0fe;
    --white: #ffffff;
    --gray-light: #f5f7fa;
    --gray: #4a5568;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    color: #333;
    background: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

.section {
    padding: 5rem 0;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header h2 {
    font-size: 2.5rem;
    color: var(--primary-blue);
    font-weight: 700;
}

.section-header .divider {
    width: 60px;
    height: 4px;
    background: var(--accent-blue);
    margin: 0.5rem auto 1rem;
    border-radius: 2px;
}

.section-header p {
    color: var(--gray);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================ */
/* HEADER / NAVEGACIÓN                          */
/* ============================================ */
.header {
    background: var(--white);
    padding: 0.8rem 0;  /* ← Puedes aumentarlo a 1rem si quieres más espacio */
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: var(--transition);
}

.header.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo */
.logo-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo-circle {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent; 
}

.logo-circle i {
    font-size: 2.5rem;
    color: var(--primary-blue);
}

.logo-circle img {
    width: 100%;
    height: 100%;
   object-fit: contain;  /* ← Para que no se recorte */
    border-radius: 50%;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.logo-horizontal {
    height: 70px;
    width: auto;
    object-fit: contain;
}

.logo-title {
    font-size: 2rem;  /* ← MÁS GRANDE */
    font-weight: 800;
    color: var(--primary-blue);
    letter-spacing: -0.5px;
}

.logo-subtitle {
    font-size: 0.85rem;  /* ← MÁS GRANDE */
    font-weight: 600;
    color: var(--secondary-blue);
    letter-spacing: 1px;
    margin-left: 0.3rem;
}

/* Logo en el footer (más pequeño) */
.logo-container.small .logo-circle {
    width: 45px;
    height: 45px;
}

.logo-container.small .logo-circle i {
    font-size: 1.8rem;
}

.logo-container.small .logo-horizontal {
    height: 32px;
}

/* Menú de navegación */
.nav-menu ul {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-menu ul li a {
    font-weight: 500;
    color: var(--primary-dark);
    padding: 0.5rem 0;
    position: relative;
    transition: var(--transition);
    font-size: 0.95rem;
}

.nav-menu ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent-blue);
    transition: var(--transition);
}

.nav-menu ul li a:hover::after,
.nav-menu ul li a.active::after {
    width: 100%;
}

.nav-menu ul li a:hover {
    color: var(--accent-blue);
}

.nav-menu ul li a.active {
    color: var(--accent-blue);
    font-weight: 600;
}

/* Hamburguesa */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 5px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: var(--primary-blue);
    border-radius: 2px;
    transition: var(--transition);
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* ============================================ */
/* SLIDER / HERO                                */
/* ============================================ */
.hero-slider {
    margin-top: 74px;
    height: calc(100vh - 74px);
    min-height: 400px;
    max-height: 700px;
    position: relative;
    overflow: hidden;
}

.slider-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* 👇 IMPORTANTE: este es el contenedor que se desliza */
.slider-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.slide {
    min-width: 100%;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

.slide-image {
    width: 55%;
    height: 100%;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent);
}

.slide-content {
    flex: 1;
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-dark));
    display: flex;
    align-items: center;
    padding: 2rem 3rem;
    position: relative;
    overflow: hidden;
}

.slide-content-inner {
    position: relative;
    z-index: 2;
    max-width: 520px;
}

.slide-content-inner h1 {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--white);
    line-height: 1.1;
    margin-bottom: 0.3rem;
}

.slide-content-inner h2 {
    font-size: 1.4rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.8rem;
    line-height: 1.3;
}

.slide-content-inner p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 1.5rem;
    line-height: 1.5;
    max-width: 400px;
}

.slide-buttons {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

/* Botón primario (Contáctanos) */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 2.2rem;
    background: #ffffff;
    color: #1a3a5c;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    background: #f0f0f0;
}

/* Botón secundario (Conoce más) */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 2.2rem;
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    text-decoration: none;
    cursor: pointer;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    transform: translateY(-3px);
}

.slider-indicators {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.8rem;
    z-index: 10;
}

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

.indicator.active {
    background: var(--white);
    transform: scale(1.2);
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: none;
    color: var(--white);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-arrow:hover {
    background: rgba(255, 255, 255, 0.3);
}

.slider-arrow.prev {
    left: 1.5rem;
}

.slider-arrow.next {
    right: 1.5rem;
}


/* ============================================ */
/* NOSOTROS                                     */
/* ============================================ */
.nosotros {
    background: var(--white);
}

.nosotros-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.nosotros-text p {
    font-size: 1.1rem;
    color: var(--gray);
    margin-bottom: 2rem;
    line-height: 1.8;
}

.nosotros-image img {
    border-radius: 16px;
    box-shadow: var(--shadow);
    width: 100%;
    height: 350px;
    object-fit: cover;
}

/* ============================================ */
/* SERVICIOS                                    */
/* ============================================ */
.servicios {
    background: var(--white);
}

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

.servicio-card {
    background: var(--gray-light);
    padding: 2.5rem 2rem;
    border-radius: 16px;
    text-align: center;
    transition: var(--transition);
    border: 1px solid transparent;
}

.servicio-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow);
    border-color: var(--accent-blue);
}

.servicio-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.2rem;
    font-size: 1.8rem;
    color: var(--white);
}

.servicio-card h3 {
    font-size: 1.2rem;
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
}

.servicio-card p {
    color: var(--gray);
    font-size: 0.95rem;
}

/* ============================================ */
/* CAPACITACIONES                               */
/* ============================================ */
.capacitaciones {
    background: var(--white);
}

.capacitaciones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.capacitacion-item {
    background: var(--white);
    padding: 2rem;
    border-radius: 16px;
    box-shadow: var(--shadow);
    text-align: center;
    transition: var(--transition);
}

.capacitacion-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.capacitacion-icon {
    width: 60px;
    height: 60px;
    background: var(--light-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
    color: var(--accent-blue);
}

.capacitacion-item h3 {
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
}

.capacitacion-item p {
    color: var(--gray);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.capacitacion-duration {
    display: inline-block;
    padding: 0.3rem 1.2rem;
    background: var(--light-blue);
    color: var(--accent-blue);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ============================================ */
/* EVENTOS - CARRUSEL (IMÁGENES VERTICALES)     */
/* ============================================ */

.eventos-slider-container {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: var(--shadow);
    background: #f5f5f5;
}

.eventos-slider {
    display: flex;
    transition: transform 0.6s ease;
}

.evento-slide {
    min-width: 100%;
    height: auto;                /* ← Altura automática según la imagen */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    padding: 10px;
}

.evento-slide img {
    width: 100%;
    height: auto;                /* ← Mantiene la proporción */
    max-height: 80vh;            /* ← Altura máxima (80% de la pantalla) */
    object-fit: contain;         /* ← Imagen COMPLETA sin recortar */
    object-position: center;
    display: block;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* ============================================ */
/* CONTROLES DEL CARRUSEL DE EVENTOS            */
/* ============================================ */

.evento-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.evento-arrow:hover {
    background: rgba(0, 0, 0, 0.8);
}

.evento-arrow.prev-evento {
    left: 10px;
}

.evento-arrow.next-evento {
    right: 10px;
}

.evento-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.8rem;
    z-index: 10;
}

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

.evento-indicator.active {
    background: #ffffff;
    transform: scale(1.2);
}

/* ============================================ */
/* GALERÍA - 3 FOTOS HORIZONTALES               */
/* ============================================ */
.galeria {
    background: var(--white);
}

.galeria-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.galeria-item {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    height: 280px;
}

.galeria-item:hover {
    transform: scale(1.02);
}

.galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================ */
/* FOOTER                                       */
/* ============================================ */
.footer {
    background: var(--primary-dark);
    color: rgba(255, 255, 255, 0.8);
    padding: 3rem 0 1.5rem;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;  /* 5 columnas */
    gap: 2rem;
    margin-bottom: 2rem;
}

/* ============================================ */
/* COLUMNA 1: LOGO CIRCULAR (MÁS GRANDE)        */
/* ============================================ */
.footer-logo-col {
    display: flex;
    flex-direction: column;
}

.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.logo-circle-footer {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: none;
    margin-bottom: 0.5rem;
    background: transparent;
}

.logo-circle-footer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer-company-name {
    font-size: 1.4rem;
    font-weight: 800;
    color: white;
    letter-spacing: -0.5px;
    text-align: left;
    display: block;
    width: 100%;
    margin-left: 17px;      /* ← Mueve a la derecha */
    margin-bottom: 0;
}

.footer-company-sub {
    font-size: 0.8rem;
    font-weight: 600;
    color: #ffffff !important;   /* ← BLANCO */
    letter-spacing: 1px;
    display: block;
    text-align: center;
    margin-top: 0.2rem;
    padding-left: 0;
    margin-left: 23px;
}

.footer-tagline {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.6;
    margin-top: 0.5rem;
}

.footer-title {
    font-size: 1rem;
    font-weight: 600;
    color: white;
}

/* ============================================ */
/* COLUMNAS 2, 3, 4, 5                          */
/* ============================================ */
.footer-col h4 {
    color: white;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--accent-blue);
}

.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-list li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
    font-size: 0.9rem;
    opacity: 0.85;
    transition: var(--transition);
}

.footer-list li:hover {
    opacity: 1;
    transform: translateX(3px);
}

.footer-list li i {
    width: 20px;
    color: var(--accent-blue);
    font-size: 0.9rem;
}

/* ============================================ */
/* REDES SOCIALES                               */
/* ============================================ */
.footer-social {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition);
    padding: 0.3rem 0;
}

.social-link i {
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-blue);
    font-size: 1rem;
    transition: var(--transition);
}

.social-link:hover {
    color: white;
}

.social-link:hover i {
    background: var(--accent-blue);
    color: white;
    transform: translateY(-2px);
}

/* ============================================ */
/* COPYRIGHT                                    */
/* ============================================ */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.5rem;
    margin-top: 1rem;
    text-align: center;
}

.footer-bottom p {
    font-size: 0.8rem;
    opacity: 0.6;
}
/* ============================================ */
/* BOTÓN ESPECIAL - MÁS INFORMACIÓN (NOSOTROS)  */
/* ============================================ */
.btn-info-azul {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 2.2rem;
    background: #0d2137;
    color: #ffffff;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.btn-info-azul:hover {
    background: #1a3a5c;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(13, 33, 55, 0.3);
    color: #ffffff;
}


/* =====================================================
   RESPONSIVE - PÁGINA PRINCIPAL WMOLINA
   Escritorio: conserva los estilos originales
   Tablet: hasta 1024px
   Móvil: hasta 768px
   Móvil pequeño: hasta 480px
   ===================================================== */


/* =========================
   TABLETS Y PANTALLAS MEDIANAS
   ========================= */

@media (max-width: 1024px) {

    /* CONTENEDOR GENERAL */
    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }

    /* ENCABEZADO */
    .header-content {
        gap: 20px;
    }

    .logo-circle {
        width: 78px;
        height: 78px;
        flex-shrink: 0;
    }

    .logo-horizontal {
        max-width: 180px;
        height: auto;
    }

    .nav-menu {
        gap: 1rem;
    }

    /* SLIDER PRINCIPAL */
    .hero-slider {
        height: auto;
        min-height: 400px;
        max-height: none;
    }

    .slide-image {
        width: 50%;
        min-width: 0;
    }

    .slide-content {
        min-width: 0;
        padding: 2rem;
    }

    .slide-content h1,
    .slide-content h2 {
        font-size: clamp(1.7rem, 3vw, 2.2rem);
        line-height: 1.2;
    }

    .slide-content p {
        font-size: 0.95rem;
    }

    .slide-buttons {
        flex-wrap: wrap;
        gap: 12px;
    }

    /* NOSOTROS */
    .nosotros-content {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .nosotros-image img {
        max-width: 100%;
        height: auto;
    }

    /* EVENTOS */
    .eventos-slider-container {
        max-width: 100%;
    }

    /* GALERÍA */
    .galeria-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    /* PIE DE PÁGINA */
    .footer-content {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px;
    }
}


/* =========================
   MÓVILES Y TABLETS PEQUEÑAS
   ========================= */

@media (max-width: 768px) {

    /* EVITA DESBORDAMIENTOS HORIZONTALES */
    body {
        overflow-x: hidden;
    }

    .container {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* ENCABEZADO Y MENÚ */
    .header {
        height: auto;
        min-height: 74px;
    }

    .header-content {
        min-height: 74px;
        justify-content: space-between;
        gap: 12px;
    }

    .logo-container {
        min-width: 0;
        gap: 10px;
    }

    .logo-circle {
        width: 58px;
        height: 58px;
    }

    .logo-horizontal {
        max-width: 135px;
        max-height: 52px;
        object-fit: contain;
    }

    .logo-text {
        min-width: 0;
    }

    /* El botón hamburguesa se muestra en móvil */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        flex-shrink: 0;
        cursor: pointer;
        position: relative;
        z-index: 1002;
    }

    .hamburger span {
        display: block;
    }

    /* Menú desplegable controlado por la clase .active del JS */
    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px 18px 18px;
        background: #ffffff;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
        z-index: 1001;
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-menu a {
        display: block;
        width: 100%;
        padding: 13px 10px;
        text-align: left;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .nav-menu a:last-child {
        border-bottom: none;
    }

    /* SLIDER PRINCIPAL */
    .hero-slider {
        margin-top: 74px;
        height: auto;
        min-height: 0;
        max-height: none;
    }

    .slider-container {
        height: auto;
    }

    .slider-wrapper {
        align-items: stretch;
    }

    .slide {
        flex-direction: column;
        min-width: 100%;
        width: 100%;
        height: auto;
    }

    .slide-image {
        width: 100%;
        min-width: 0;
        height: clamp(220px, 55vw, 360px);
        flex: none;
    }

    .slide-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .slide-content {
        width: 100%;
        flex: none;
        padding: 28px 22px 40px;
        box-sizing: border-box;
    }

    .slide-content-inner {
        width: 100%;
        max-width: 100%;
    }

    .slide-content h1,
    .slide-content h2 {
        font-size: clamp(1.65rem, 6vw, 2.2rem);
        line-height: 1.2;
        overflow-wrap: break-word;
    }

    .slide-content p {
        font-size: 0.95rem;
        line-height: 1.65;
    }

    .slide-buttons {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 12px;
    }

    .slide-buttons a,
    .slide-buttons button {
        max-width: 100%;
        box-sizing: border-box;
        text-align: center;
        justify-content: center;
    }

    /* Controles del slider */
    .slider-arrow {
        z-index: 5;
    }

    .slider-indicators {
        bottom: 12px;
    }

    /* SECCIONES */
    .section {
        padding-top: 55px;
        padding-bottom: 55px;
    }

    .section-header {
        margin-bottom: 30px;
        padding-left: 0;
        padding-right: 0;
    }

    .section-header h2 {
        font-size: clamp(1.6rem, 5vw, 2rem);
        line-height: 1.25;
    }

    .section-header p {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    /* NOSOTROS */
    .nosotros-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .nosotros-text {
        width: 100%;
        min-width: 0;
    }

    .nosotros-text p {
        line-height: 1.7;
    }

    .nosotros-image {
        width: 100%;
        min-width: 0;
    }

    .nosotros-image img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }

    .btn-info-azul {
        max-width: 100%;
        box-sizing: border-box;
        justify-content: center;
    }

    /* EVENTOS */
    .eventos-slider-container {
        width: 100%;
        min-width: 0;
    }

    .eventos-slider {
        width: 100%;
        min-width: 0;
    }

    .evento-slide {
        min-width: 0;
        max-width: 100%;
    }

    .evento-slide img {
        display: block;
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }

    .evento-arrow {
        z-index: 5;
    }

    .evento-indicators {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* GALERÍA */
    .galeria-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .galeria-item {
        min-width: 0;
        overflow: hidden;
    }

    .galeria-item img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }

    /* PIE DE PÁGINA */
    .footer-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 20px;
    }

    .footer-col {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .footer-logo {
        max-width: 100%;
    }

    .footer-list li {
        align-items: flex-start;
        overflow-wrap: anywhere;
    }

    .footer-social {
        align-items: flex-start;
    }

    .footer-bottom {
        line-height: 1.6;
    }
}


/* =========================
   MÓVILES PEQUEÑOS
   ========================= */

@media (max-width: 480px) {

    /* ENCABEZADO */
    .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .header-content {
        gap: 8px;
    }

    .logo-container {
        gap: 8px;
    }

    .logo-circle {
        width: 48px;
        height: 48px;
    }

    .logo-horizontal {
        max-width: 112px;
        max-height: 44px;
    }

    .nav-menu {
        padding-left: 14px;
        padding-right: 14px;
    }

    /* SLIDER PRINCIPAL */
    .slide-image {
        height: 230px;
    }

    .slide-content {
        padding: 24px 18px 38px;
    }

    .slide-content h1,
    .slide-content h2 {
        font-size: 1.6rem;
    }

    .slide-content p {
        font-size: 0.9rem;
    }

    .slider-arrow {
        padding: 8px;
    }

    /* SECCIONES */
    .section {
        padding-top: 42px;
        padding-bottom: 42px;
    }

    .section-header {
        margin-bottom: 24px;
    }

    .section-header h2 {
        font-size: 1.55rem;
    }

    /* NOSOTROS */
    .nosotros-content {
        gap: 22px;
    }

    .btn-info-azul {
        width: 100%;
        padding: 0.85rem 1rem;
    }

    /* EVENTOS */
    .evento-arrow {
        padding: 8px;
    }

    /* GALERÍA */
    .galeria-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .galeria-item img {
        width: 100%;
        height: auto;
    }

    /* PIE DE PÁGINA */
    .footer-content {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .footer-col {
        width: 100%;
    }

    .footer-bottom {
        padding-top: 18px;
    }
}


/* ============================================ */
/* NOSOTROS - PÁGINA COMPLETA                   */
/* ============================================ */

/* ===== BANNER SUPERIOR ===== */
.nosotros-banner {
    background: url('../assets/imagenes/banner-nosotros.jpg');
    background-size: cover;
    background-position: bottom right;
    padding: 6rem 0 4rem;
    margin-top: 74px;
    text-align: center;
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nosotros-banner h1 {
    font-size: 4rem;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.nosotros-banner p {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 0.5rem;
}

/* ===== BLOQUES DE CONTENIDO ===== */
.nosotros-page {
    padding: 0 0 4rem;
    background: var(--white);
}

.nosotros-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 3rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.nosotros-block:last-of-type {
    border-bottom: none;
}

.nosotros-block.reverse {
    direction: rtl;
}

.nosotros-block.reverse .nosotros-text {
    direction: ltr;
}

.nosotros-block.reverse .nosotros-image {
    direction: ltr;
}

/* ===== TEXTO ===== */
.nosotros-text h2 {
    font-size: 1.8rem;
    color: var(--primary-blue);
    font-weight: 700;
    margin-bottom: 0.5rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.nosotros-text h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--accent-blue);
    border-radius: 2px;
}

.nosotros-text p {
    font-size: 1.05rem;
    color: var(--gray);
    line-height: 1.8;
    margin-top: 0.5rem;
}

/* ===== IMAGEN ===== */
.nosotros-image {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.nosotros-image:hover {
    transform: scale(1.02);
}

.nosotros-image img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

/* ===== VALORES ===== */
.nosotros-valores {
    padding: 3rem 0 1rem;
    text-align: center;
}

.nosotros-valores h2 {
    font-size: 1.8rem;
    color: var(--primary-blue);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.nosotros-valores > p {
    font-size: 1.05rem;
    color: var(--gray);
    margin-bottom: 2rem;
}

.valores-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}

.valor-item {
    background: var(--white);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.valor-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.valor-item i {
    font-size: 2rem;
    color: var(--accent-blue);
}

.valor-item span {
    font-weight: 600;
    color: var(--primary-blue);
    font-size: 1rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .nosotros-banner h1 {
        font-size: 2.2rem;
    }

    .nosotros-block {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 2rem 0;
    }

    .nosotros-block.reverse {
        direction: ltr;
    }

    .nosotros-text h2 {
        font-size: 1.5rem;
    }

    .nosotros-text p {
        font-size: 0.95rem;
    }

    .nosotros-image img {
        height: 200px;
    }

    .valores-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .valor-item {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .nosotros-banner {
        padding: 3rem 0 2rem;
        margin-top: 60px;
    }

    .nosotros-banner h1 {
        font-size: 1.8rem;
    }

    .valores-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.8rem;
    }

    .valor-item i {
        font-size: 1.5rem;
    }

    .valor-item span {
        font-size: 0.85rem;
    }
}

/* ===== EQUIPO - SIN IMAGEN (texto completo) ===== */
.equipo-texto .full-width {
    grid-column: 1 / -1;  /* ← Ocupa todo el ancho */
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.equipo-texto .full-width h2::after {
    left: 50%;
    transform: translateX(-50%);
}

.equipo-texto .full-width p {
    max-width: 700px;
    margin: 1rem auto 0;
}

/* ============================================ */
/* TEXTO CENTRADO - SIN IMAGEN                   */
/* ============================================ */

.texto-centrado {
    display: block !important;
    padding: 2rem 0;
    text-align: center;
}

.texto-centrado .full-width {
    max-width: 800px;
    margin: 0 auto;
}

.texto-centrado .full-width h2 {
    text-align: center;
}

.texto-centrado .full-width h2::after {
    left: 50%;
    transform: translateX(-50%);
}

.texto-centrado .full-width p {
    max-width: 700px;
    margin: 1rem auto 0;
    font-size: 1.05rem;
    color: var(--gray);
    line-height: 1.8;
}


/* ============================================ */
/* RESPONSIVE - PÁGINA NOSOTROS                 */
/* ============================================ */

@media (max-width: 768px) {

    /* Banner superior */
    .nosotros-banner {
        min-height: 170px;
        padding: 3rem 1rem 2rem;
        background-position: center;
    }

    .nosotros-banner h1 {
        font-size: clamp(1.8rem, 5vw, 2.4rem);
        line-height: 1.2;
    }

    .nosotros-banner p {
        font-size: 1rem;
    }

    /* Contenido principal */
    .nosotros-page {
        padding-bottom: 2rem;
    }

    .nosotros-block {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        padding: 2rem 0;
    }

    /* Misión y visión: texto primero, imagen después */
    .nosotros-block.reverse {
        direction: ltr;
    }

    .nosotros-text h2 {
        font-size: 1.4rem;
        line-height: 1.3;
    }

    .nosotros-text p,
    .texto-centrado .full-width p {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    /* Bloques sin imagen */
    .texto-centrado {
        padding: 1.5rem 0;
    }

    .equipo-texto .full-width,
    .texto-centrado .full-width {
        width: 100%;
        max-width: 100%;
    }

    /* Imágenes */
    .nosotros-image {
        width: 100%;
    }

    .nosotros-image img {
        height: 220px;
        object-fit: cover;
    }

    /* Valores */
    .nosotros-valores {
        padding: 2rem 0 0.5rem;
    }

    .nosotros-valores h2 {
        font-size: 1.5rem;
    }

    .nosotros-valores > p {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .valores-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.8rem;
    }

    .valor-item {
        padding: 1rem 0.5rem;
        min-width: 0;
    }

    .valor-item i {
        font-size: 1.5rem;
    }

    .valor-item span {
        font-size: 0.9rem;
        text-align: center;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 480px) {

    .nosotros-banner {
        min-height: 140px;
        padding: 2rem 0.75rem;
    }

    .nosotros-banner h1 {
        font-size: 1.75rem;
    }

    .nosotros-block {
        padding: 1.5rem 0;
        gap: 1rem;
    }

    .nosotros-text h2 {
        font-size: 1.25rem;
    }

    .nosotros-text p,
    .texto-centrado .full-width p {
        font-size: 0.9rem;
        line-height: 1.65;
    }

    .nosotros-image img {
        height: 190px;
    }

    .nosotros-valores h2 {
        font-size: 1.35rem;
    }

    .valores-grid {
        gap: 0.65rem;
    }

    .valor-item {
        padding: 0.85rem 0.4rem;
    }

    .valor-item span {
        font-size: 0.82rem;
    }
}


/* ============================================ */
/* SERVICIOS - PÁGINA COMPLETA                  */
/* ============================================ */

/* ============================================ */
/* CARRUSEL DE SERVICIOS                        */
/* ============================================ */

.servicios-carousel {
    padding: 3rem 0;
    background: #f5f7fa;
    margin-top: 74px;
}

/* ============================================ */
/* CONTENEDOR                                   */
/* ============================================ */

.carousel-container {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    overflow: hidden;
    padding: 0 60px;
}

/* ============================================ */
/* WRAPPER                                      */
/* ============================================ */

.carousel-wrapper {
    display: flex;
    gap: 20px;
    transition: transform 0.5s ease;
    will-change: transform;
}

/* ============================================ */
/* SLIDES                                       */
/* ============================================ */

.carousel-slide {
    flex: 0 0 calc((100% - 40px) / 3);
    min-width: 0;
    flex-shrink: 0;
}

/* ============================================ */
/* TARJETAS                                     */
/* ============================================ */

.carousel-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    width: 100%;
    height: 100%;
}

.carousel-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* ============================================ */
/* IMÁGENES                                     */
/* ============================================ */

.carousel-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

/* ============================================ */
/* TEXTO                                        */
/* ============================================ */

.carousel-text {
    padding: 1.2rem 1.5rem 1.5rem;
    text-align: left;
}

.carousel-text h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #1a3a5c;
    margin: 0 0 0.3rem;
    line-height: 1.3;
    min-height: 44px;
}

.carousel-text p {
    font-size: 0.85rem;
    color: #4a5568;
    margin: 0 0 0.8rem;
}

/* ============================================ */
/* BOTÓN DE TARJETA                             */
/* ============================================ */

.btn-card {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    background: #4a90d9;
    color: #ffffff;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.8rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-card:hover {
    background: #2a6a9c;
    color: #ffffff;
    transform: translateY(-2px);
}

/* ============================================ */
/* FLECHAS                                      */
/* ============================================ */

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: #ffffff;

    width: 40px;
    height: 40px;

    border-radius: 50%;

    cursor: pointer;
    font-size: 1rem;

    transition: all 0.3s ease;

    z-index: 10;

    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-arrow:hover {
    background: rgba(0, 0, 0, 0.8);
}

.carousel-arrow.prev {
    left: 5px;
}

.carousel-arrow.next {
    right: 5px;
}

/* ============================================ */
/* PUNTOS                                       */
/* ============================================ */

.carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 0.8rem;

    margin-top: 1.5rem;
}

.dot {
    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.2);

    cursor: pointer;

    border: none;
    padding: 0;

    transition: all 0.3s ease;
}

.dot.active {
    background: #4a90d9;
    transform: scale(1.2);
}

/* ============================================ */
/* TABLET                                       */
/* ============================================ */

@media (max-width: 1024px) {

    .carousel-slide {
        flex: 0 0 calc((100% - 20px) / 2);
    }

}

/* ============================================ */
/* MÓVIL                                        */
/* ============================================ */

@media (max-width: 768px) {

    .servicios-carousel {
        margin-top: 60px;
        padding: 1.5rem 0;
    }

    .carousel-container {
        padding: 0 40px;
    }

    .carousel-slide {
        flex: 0 0 100%;
    }

    .carousel-card img {
        height: 180px;
    }

    .carousel-text h3 {
        font-size: 0.9rem;
        min-height: auto;
    }

    .carousel-arrow {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
}

/* ============================================ */
/* MÓVIL PEQUEÑO                                */
/* ============================================ */

@media (max-width: 480px) {

    .carousel-container {
        padding: 0 30px;
    }

    .carousel-card img {
        height: 150px;
    }

    .carousel-text {
        padding: 0.8rem 1rem 1rem;
    }

    .carousel-text h3 {
        font-size: 0.8rem;
    }

    .carousel-text p {
        font-size: 0.75rem;
    }

    .btn-card {
        font-size: 0.7rem;
        padding: 0.4rem 1rem;
    }

    .carousel-arrow {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }
}



/* ===== LISTA DE SERVICIOS ===== */
.servicios-lista {
    padding: 3rem 0 4rem;
    background: var(--white);
}

.servicio-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 2.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.servicio-item:last-child {
    border-bottom: none;
}

.servicio-item.reverse {
    direction: rtl;
}

.servicio-item.reverse .servicio-info {
    direction: ltr;
}

.servicio-item.reverse .servicio-imagen {
    direction: ltr;
}

.servicio-imagen {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.servicio-imagen:hover {
    transform: scale(1.02);
}

.servicio-imagen img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}

.servicio-info {
    text-align: center;        /* ← AGREGA ESTO */
    display: flex;
    flex-direction: column;
    align-items: center;       /* ← AGREGA ESTO (opcional, para centrar todo) */
}

.servicio-info h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 0.8rem;
    text-align: center;
}

.servicio-info p {
    font-size: 1rem;
    color: var(--gray);
    line-height: 1.7;
    margin-bottom: 1.2rem;
}

.btn-servicio {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 2rem;
    background: #0d2137;
    color: #ffffff;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn-servicio:hover {
    background: #1a3a5c;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(13, 33, 55, 0.3);
    color: #ffffff;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .servicios-carousel {
        margin-top: 60px;
        padding: 1rem 0;
    }

    .carousel-slide img {
        height: 280px;
    }

    .carousel-text h3 {
        font-size: 1.1rem;
    }

    .servicio-item {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 2rem 0;
    }

    .servicio-item.reverse {
        direction: ltr;
    }

    .servicio-info h3 {
        font-size: 1.3rem;
    }

    .servicio-imagen img {
        height: 220px;
    }

    .carousel-arrow {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .carousel-indicators {
        bottom: 70px;
    }
}

@media (max-width: 480px) {
    .servicios-carousel {
        margin-top: 60px;
        padding: 0.5rem 0;
    }

    .carousel-slide img {
        height: 200px;
    }

    .carousel-text {
        padding: 1rem;
    }

    .carousel-text h3 {
        font-size: 0.95rem;
    }

    .carousel-text p {
        font-size: 0.8rem;
    }

    .btn-servicio {
        padding: 0.6rem 1.5rem;
        font-size: 0.8rem;
    }
}

/* ============================================ */
/* SUBPÁGINA DE SERVICIO - DETALLE             */
/* ============================================ */

.servicio-detalle-content {
    padding: 4rem 0;
    background: var(--white);
}

.servicio-detalle-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}

.servicio-detalle-imagen {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.servicio-detalle-imagen img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
}

.servicio-detalle-texto h1 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary-blue);
    margin-bottom: 1.2rem;
    line-height: 1.2;
    text-transform: uppercase;
}

.servicio-detalle-texto p {
    font-size: 1rem;
    color: var(--gray);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.servicio-detalle-texto p strong {
    color: var(--primary-blue);
    font-weight: 700;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .servicio-detalle-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .servicio-detalle-texto h1 {
        font-size: 1.5rem;
    }

    .servicio-detalle-imagen img {
        height: 250px;
    }
}

@media (max-width: 480px) {
    .servicio-detalle-texto h1 {
        font-size: 1.2rem;
    }

    .servicio-detalle-texto p {
        font-size: 0.9rem;
    }

    .servicio-detalle-imagen img {
        height: 200px;
    }
}

/* ============================================ */
/* SUBPÁGINA - BLOQUE 2 (TEXTO IZQ + IMAGEN DER) */
/* ============================================ */

.servicio-detalle-content.bloque-2 {
    background: var(--white);
    padding-top: 0;
}

/* Invertir el orden usando ORDER (más confiable que direction) */
.servicio-detalle-grid.reverse {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

/* El texto va primero (izquierda) */
.servicio-detalle-grid.reverse .servicio-detalle-texto {
    order: 1;
}

/* La imagen va segunda (derecha) */
.servicio-detalle-grid.reverse .servicio-detalle-imagen {
    order: 2;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .servicio-detalle-grid.reverse {
        grid-template-columns: 1fr;
    }
    
    /* En móvil, la imagen va arriba */
    .servicio-detalle-grid.reverse .servicio-detalle-imagen {
        order: -1;
    }
}

/* ============================================ */
/* IMAGEN DEL BLOQUE 2 - MÁS PEQUEÑA            */
/* ============================================ */

.servicio-detalle-grid.reverse .servicio-detalle-imagen img {
    width: 80%;           /* ← Reduce el ancho al 80% */
    height: auto;         /* ← Mantiene la proporción */
    max-height: 250px;    /* ← Altura máxima */
    margin-left: auto;    /* ← Centra la imagen */
    margin-right: 0;      /* ← Alinea a la derecha */
    display: block;
}

/* ============================================ */
/* ELIMINAR RECUADRO BLANCO DE LA IMAGEN 2      */
/* ============================================ */

.servicio-detalle-grid.reverse .servicio-detalle-imagen {
    background: transparent !important;   /* ← Sin fondo blanco */
    box-shadow: none !important;          /* ← Sin sombra */
    border: none !important;              /* ← Sin borde */
    display: flex;
    justify-content: flex-end;            /* ← Alinea a la derecha */
    align-items: center;
}

.servicio-detalle-grid.reverse .servicio-detalle-imagen img {
    width: 85%;                           /* ← Tamaño de la imagen */
    height: auto;
    max-height: 320px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);  /* ← Sombra solo en la imagen */
    display: block;
}

/* ============================================ */
/* CAPACITACIONES - GRID DE 9                    */
/* ============================================ */

.capacitaciones-grid-section {
    padding: 3rem 0 4rem;
    background: var(--white);
}

.capacitaciones-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.capacitacion-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.capacitacion-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.capacitacion-imagen {
    width: 100%;
    overflow: hidden;
}

.capacitacion-imagen img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.capacitacion-card:hover .capacitacion-imagen img {
    transform: scale(1.05);
}

.capacitacion-info {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: left;
}

.capacitacion-info h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary-blue);
    line-height: 1.4;
    margin-bottom: 1.2rem;
    min-height: 65px;
    text-transform: uppercase;
}

.btn-capacitacion {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.8rem;
    background: #0d2137;
    color: #ffffff;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    width: fit-content;
    margin-top: auto;
}

.btn-capacitacion:hover {
    background: #1a3a5c;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 144, 217, 0.3);
    color: #ffffff;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .capacitaciones-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .capacitaciones-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .capacitacion-imagen img {
        height: 200px;
    }

    .capacitacion-info h3 {
        font-size: 0.9rem;
        min-height: auto;
    }
}

@media (max-width: 480px) {
    .capacitacion-imagen img {
        height: 180px;
    }

    .capacitacion-info {
        padding: 1.2rem;
    }

    .capacitacion-info h3 {
        font-size: 0.85rem;
    }

    .btn-capacitacion {
        padding: 0.6rem 1.5rem;
        font-size: 0.85rem;
    }
}

/* ============================================ */
/* SUBPÁGINA DE CAPACITACIÓN - BLOQUES          */
/* ============================================ */

/* ===== BLOQUE 2 (Texto izq + Imagen der) ===== */
.servicio-detalle-content.bloque-2 {
    background: var(--white);
    padding-top: 0;
}

.servicio-detalle-grid.reverse {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.servicio-detalle-grid.reverse .servicio-detalle-texto {
    order: 1;
}

.servicio-detalle-grid.reverse .servicio-detalle-imagen {
    order: 2;
}

/* ===== BLOQUE 3 (Imagen izq + Lista der) ===== */
.servicio-detalle-content.bloque-3 {
    background: var(--white);
    padding-top: 2rem;
}

.servicio-detalle-content.bloque-3 ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.servicio-detalle-content.bloque-3 ul li {
    position: relative;
    padding: 0.6rem 0 0.6rem 2rem;
    font-size: 1.05rem;
    color: var(--gray);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.servicio-detalle-content.bloque-3 ul li::before {
    content: '•';
    position: absolute;
    left: 0.5rem;
    color: var(--accent-blue);
    font-size: 1.5rem;
    line-height: 1;
    top: 50%;
    transform: translateY(-50%);
}

/* ===== TÍTULOS H2 EN SUBPÁGINAS ===== */
.servicio-detalle-texto h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
    margin-top: 1.5rem;
}

.servicio-detalle-texto h2:first-child {
    margin-top: 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .servicio-detalle-grid,
    .servicio-detalle-grid.reverse {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .servicio-detalle-grid.reverse .servicio-detalle-imagen {
        order: -1;
    }

    .servicio-detalle-texto h1 {
        font-size: 1.5rem;
    }

    .servicio-detalle-texto h2 {
        font-size: 1.3rem;
    }

    .servicio-detalle-imagen img {
        height: 250px;
    }
}

/* ============================================ */
/* SUBPÁGINA DE CAPACITACIÓN - BLOQUE 2         */
/* ============================================ */

.servicio-detalle-content.bloque-2 {
    background: var(--white);
    padding-top: 0;
}

.servicio-detalle-grid.reverse {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.servicio-detalle-grid.reverse .servicio-detalle-texto {
    order: 1;
}

.servicio-detalle-grid.reverse .servicio-detalle-imagen {
    order: 2;
}

/* Lista de requisitos */
.servicio-detalle-content.bloque-2 ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.servicio-detalle-content.bloque-2 ul li {
    position: relative;
    padding: 0.6rem 0 0.6rem 2rem;
    font-size: 1.05rem;
    color: var(--gray);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.servicio-detalle-content.bloque-2 ul li::before {
    content: '•';
    position: absolute;
    left: 0.5rem;
    color: var(--accent-blue);
    font-size: 1.5rem;
    line-height: 1;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 768px) {
    .servicio-detalle-grid.reverse {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .servicio-detalle-grid.reverse .servicio-detalle-imagen {
        order: -1;
    }
}




/* ============================================ */
/* SUBPÁGINA PRIMEROS AUXILIOS - ALINEAR TÍTULO */
/* ============================================ */

/* Alinear el texto arriba en el grid */
.pagina-primeros-auxilios .servicio-detalle-grid {
    align-items: start !important;
}

/* Subir el título al raz de la imagen */
.pagina-primeros-auxilios .servicio-detalle-texto h1 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    line-height: 1.1;
}

/* Ajustar el párrafo para que no quede pegado */
.pagina-primeros-auxilios .servicio-detalle-texto p {
    margin-top: 1rem !important;
}

/* ============================================ */
/* SUBPÁGINA ERGONOMÍA CARGAS - IMAGEN IZQUIERDA */
/* ============================================ */

/* ===== IMAGEN DEL BLOQUE 1 (izquierda) ===== */
.pagina-ergonomia-cargas .servicio-detalle-grid:not(.reverse) .servicio-detalle-imagen img {
    width: 100% !important;
    height: 300px !important;        /* ← CAMBIA LA ALTURA AQUÍ */
    object-fit: cover !important;    /* cover = recorta | contain = completa */
    object-position: center center !important;  /* ← POSICIÓN DE LA IMAGEN */
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    }

/* ============================================ */
/* SUBPÁGINA ERGONOMÍA CARGAS - IMAGEN DERECHA  */
/* ============================================ */

.pagina-ergonomia-cargas .servicio-detalle-grid.reverse .servicio-detalle-imagen img {
    width: 100% !important;
    height: auto !important;               /* ← Altura automática */
    max-height: 500px !important;          /* ← Altura máxima */
    object-fit: contain !important;        /* ← Completa */
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    display: block !important;
}

.pagina-ergonomia-cargas .servicio-detalle-grid.reverse {
    align-items: start !important;
}

/* ============================================ */
/* SUBPÁGINA ERGONOMÍA OFICINAS - AJUSTES       */
/* ============================================ */

.pagina-ergonomia-oficinas .servicio-detalle-grid {
    align-items: start !important;
}
/* ============================================ */
/* SUBPÁGINA ERGONOMÍA OFICINAS - ALINEAR TÍTULO */
/* ============================================ */

.pagina-ergonomia-oficinas .servicio-detalle-grid:not(.reverse) .servicio-detalle-texto h1 {
    position: relative !important;
    top: 0px !important;    /* ← BAJA el título (positivo) */
}


/* ============================================ */
/* IMAGEN IZQUIERDA - EPP                       */
/* ============================================ */

.pagina-epp .servicio-detalle-grid:not(.reverse) .servicio-detalle-imagen {
    width: 100% !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    clip-path: inset(0 round 20px) !important;
}

.pagina-epp .servicio-detalle-grid:not(.reverse) .servicio-detalle-imagen img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;

    object-fit: cover !important;
    object-position: center center !important;

    border-radius: 20px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;

    /* Fuerza el redondeo */
    clip-path: inset(0 round 20px) !important;
}


/* ============================================ */
/* SUBPÁGINA EPP - IMAGEN DERECHA               */
/* ============================================ */

/* IMAGEN DERECHA - EPP */
.pagina-epp .servicio-detalle-grid.reverse .servicio-detalle-imagen {
    width: 75% !important;
    margin-left: auto !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}

.pagina-epp .servicio-detalle-grid.reverse .servicio-detalle-imagen img {
    width: 100% !important;
    height: auto !important;
    max-height: 250px !important;
    object-fit: contain !important;
}


/* ============================================ */
/* POSICIÓN DE LOS BLOQUES                      */
/* ============================================ */

.pagina-epp .servicio-detalle-grid {
    align-items: center !important;
    gap: 60px !important;
}


/* ============================================ */
/* VERSIÓN PARA CELULAR                         */
/* ============================================ */

@media (max-width: 768px) {

    .pagina-epp .servicio-detalle-grid {
        gap: 30px !important;
    }

    .pagina-epp .servicio-detalle-grid .servicio-detalle-imagen,
    .pagina-epp .servicio-detalle-grid .servicio-detalle-imagen img {
        width: 100% !important;
    }
}

/* Fuerza las esquinas redondeadas de ambas imágenes */
.pagina-epp .servicio-detalle-grid:not(.reverse) .servicio-detalle-imagen img,
.pagina-epp .servicio-detalle-grid.reverse .servicio-detalle-imagen img {
    border-radius: 20px !important;
    clip-path: inset(0 round 20px) !important;
}

.pagina-epp img[src*="collage"] {
    border-radius: 20px !important;
    overflow: hidden !important;
    clip-path: inset(0 round 20px) !important;
}

/* IMAGEN PRINCIPAL DEL BLOQUE 1 */
.pagina-epp .servicio-detalle-imagenes-triples {
    border-radius: 20px !important;
    overflow: hidden !important;
    clip-path: inset(0 round 20px) !important;
}

.pagina-epp .servicio-detalle-imagenes-triples img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 20px !important;
}

.pagina-epp .servicio-detalle-grid {
    align-items: flex-start !important;
}

.pagina-epp .servicio-detalle-grid.reverse .servicio-detalle-imagen {
    width: 90% !important;
    margin-left: auto !important;
}

.pagina-epp .servicio-detalle-grid.reverse .servicio-detalle-imagen img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
}

/* ============================================ */
/* TRABAJOS EN CALIENTE - ALINEACIÓN            */
/* ============================================ */

/* GRID PRINCIPAL */
.pagina-trabajos-caliente .servicio-detalle-grid {
    align-items: start !important;
}


/* ============================================ */
/* BLOQUE 1 - IMAGEN IZQUIERDA + TEXTO DERECHA */
/* ============================================ */

.pagina-trabajos-caliente
.servicio-detalle-grid:not(.reverse)
.servicio-detalle-imagen {
    position: relative;
    top: 20px;
}

.pagina-trabajos-caliente
.servicio-detalle-grid:not(.reverse)
.servicio-detalle-texto {
    position: relative;
    top: 20px;
}

.pagina-trabajos-caliente
.servicio-detalle-grid:not(.reverse)
.servicio-detalle-texto h1 {
    margin-top: 0 !important;
}


/* ============================================ */
/* BLOQUE 2 - DOS IMÁGENES A LA DERECHA        */
/* ============================================ */

.pagina-trabajos-caliente
.servicio-detalle-imagenes-dobles {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-self: start !important;
    overflow: visible;
}


/* ============================================ */
/* IMAGEN SUPERIOR                              */
/* ============================================ */

.pagina-trabajos-caliente
.servicio-detalle-imagenes-dobles img:first-child {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;

    border-radius: 12px !important;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}


/* ============================================ */
/* IMAGEN INFERIOR                              */
/* ============================================ */

.pagina-trabajos-caliente
.servicio-detalle-imagenes-dobles img:last-child {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;

    border-radius: 12px !important;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

    position: relative;
    top: 165px !important;
    margin-top: 0 !important;
}

/* ============================================ */
/* RESPONSIVE                                   */
/* ============================================ */

@media (max-width: 768px) {

    .pagina-trabajos-caliente
    .servicio-detalle-grid:not(.reverse)
    .servicio-detalle-imagen,
    .pagina-trabajos-caliente
    .servicio-detalle-grid:not(.reverse)
    .servicio-detalle-texto {
        top: 0;
    }

    .pagina-trabajos-caliente
    .servicio-detalle-imagenes-dobles img:first-child,
    .pagina-trabajos-caliente
    .servicio-detalle-imagenes-dobles img:last-child {
        height: 180px;
    }

    .pagina-trabajos-caliente
    .servicio-detalle-imagenes-dobles img:last-child {
        top: 0 !important;
    }
}

.pagina-trabajos-caliente
.servicio-detalle-imagenes-dobles {
    overflow: visible !important;
}

.pagina-trabajos-caliente
.servicio-detalle-imagenes-dobles img:last-child {
    width: 100% !important;
    height: 250px !important;
    object-fit: cover !important;
    display: block !important;

    border-radius: 15px !important;

    position: relative;
    top: 165px !important;
    margin: 0 !important;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.pagina-trabajos-caliente .servicio-detalle-texto ul li {
    border-bottom: none !important;
}

/* ============================================ */
/* SUBPÁGINA ESPACIOS CONFINADOS - AJUSTES      */
/* ============================================ */

/* Alinear texto e imágenes arriba */
.pagina-espacios-confinados .servicio-detalle-grid {
    align-items: start !important;
}

/* Título al raz de la imagen (Bloque 1) */
.pagina-espacios-confinados .servicio-detalle-grid:not(.reverse) .servicio-detalle-texto h1 {
    position: relative !important;
    top: -10px !important;
    margin-top: 0 !important;
}

/* Imágenes dobles */
.pagina-espacios-confinados .servicio-detalle-imagenes-dobles {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-self: start !important;
    border-radius: 12px !important;
}

.pagina-espacios-confinados .servicio-detalle-imagenes-dobles img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 12px !important;
    clip-path: inset(0 round 12px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    display: block;
}

/* Imagen 3 al raz de "Constancia/diploma de participación" */
.pagina-espacios-confinados .servicio-detalle-imagenes-dobles img:last-child {
    margin-top: 40px !important;
}

/* Responsive */
@media (max-width: 768px) {
    .pagina-espacios-confinados .servicio-detalle-imagenes-dobles img {
        height: 180px;
    }
}



.pagina-espacios-confinados
.servicio-detalle-imagenes-dobles {
    overflow: visible !important;
}

/* IMAGEN 3 - MÁS GRANDE Y UN POCO MÁS ARRIBA */
.pagina-espacios-confinados
.servicio-detalle-imagenes-dobles img:last-child {
    width: 100% !important;
    max-width: none !important;
    height: 280px !important;
    object-fit: cover !important;
    display: block !important;

    border-radius: 15px !important;
    clip-path: inset(0 round 15px) !important;

    position: relative;
    top: 130px !important;
    margin: 0 !important;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}


/* ============================================ */
/* ESPACIOS CONFINADOS - VERSIÓN PARA CELULAR   */
/* ============================================ */

@media (max-width: 768px) {

    /* Evitar desbordamientos horizontales */
    .pagina-espacios-confinados {
        overflow-x: hidden;
    }

    /* Bloques de contenido en una sola columna */
    .pagina-espacios-confinados .servicio-detalle-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch !important;
        gap: 24px;
    }

    /* Imagen y texto del primer bloque */
    .pagina-espacios-confinados .servicio-detalle-grid:not(.reverse)
    .servicio-detalle-imagen,
    .pagina-espacios-confinados .servicio-detalle-grid:not(.reverse)
    .servicio-detalle-texto {
        position: static !important;
        top: auto !important;
        width: 100%;
        max-width: 100%;
    }

    /* Título del primer bloque */
    .pagina-espacios-confinados .servicio-detalle-texto h1 {
        position: static !important;
        top: auto !important;
        font-size: 1.5rem;
        line-height: 1.3;
        margin-top: 0 !important;
    }

    /* Imágenes apiladas */
    .pagina-espacios-confinados .servicio-detalle-imagenes-dobles {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        gap: 20px;
        overflow: visible !important;
    }

    .pagina-espacios-confinados
    .servicio-detalle-imagenes-dobles img {
        width: 100% !important;
        max-width: 100% !important;
        height: 200px !important;
        object-fit: cover;
        display: block;
        border-radius: 12px !important;
        clip-path: inset(0 round 12px) !important;
        position: static !important;
        top: auto !important;
        margin: 0 !important;
    }

    /* Subtítulos y párrafos */
    .pagina-espacios-confinados .servicio-detalle-texto h2 {
        font-size: 1.25rem;
    }

    .pagina-espacios-confinados .servicio-detalle-texto p,
    .pagina-espacios-confinados .servicio-detalle-texto li {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    /* Quitar líneas de las listas, si deseas mantenerlas sin divisores */
    .pagina-espacios-confinados .servicio-detalle-texto ul li {
        border-bottom: none !important;
    }
}

/* Celulares pequeños */
@media (max-width: 480px) {

    .pagina-espacios-confinados .servicio-detalle-texto h1 {
        font-size: 1.3rem;
    }

    .pagina-espacios-confinados
    .servicio-detalle-imagenes-dobles img {
        height: 180px !important;
    }
}

/* ============================================ */
/* ESPACIOS CONFINADOS - BLOQUE 2               */
/* TEXTO IZQUIERDA + IMÁGENES DERECHA           */
/* ============================================ */

body.pagina-espacios-confinados .espacios-confinados-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas: "texto imagenes" !important;
    align-items: start !important;
    gap: 4rem !important;
}

body.pagina-espacios-confinados .espacios-confinados-grid .servicio-detalle-texto {
    grid-area: texto;
}

body.pagina-espacios-confinados .espacios-confinados-grid .servicio-detalle-imagenes-dobles {
    grid-area: imagenes;
    width: 100%;
}

/* CELULAR */
@media (max-width: 768px) {
    body.pagina-espacios-confinados .espacios-confinados-grid {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "texto"
            "imagenes" !important;
        gap: 2rem !important;
    }
}

/* ============================================ */
/* SUBPÁGINA MATERIAL PARTICULADO - AJUSTES     */
/* ============================================ */

/* Alinear texto e imágenes arriba */
.pagina-material-particulado .servicio-detalle-grid {
    align-items: start !important;
}

/* Título al raz de la imagen (Bloque 1) */
.pagina-material-particulado .servicio-detalle-grid:not(.reverse) .servicio-detalle-texto h1 {
    position: relative !important;
    top: -10px !important;
    margin-top: 0 !important;
}

/* Imagen del Bloque 1 */
.pagina-material-particulado .servicio-detalle-grid:not(.reverse) .servicio-detalle-imagen img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 12px !important;
    clip-path: inset(0 round 12px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    display: block;
}

/* Imagen del Bloque 2 */
.pagina-material-particulado .servicio-detalle-grid.reverse .servicio-detalle-imagen img {
    width: 100%;
    height: auto;
    max-height: 350px;
    object-fit: contain;
    border-radius: 12px !important;
    clip-path: inset(0 round 12px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    display: block;
}

/* Imagen del Bloque 3 - Subida y más pequeña */
.pagina-material-particulado .bloque-3 .servicio-detalle-imagen img {
    width: 100%;
    height: 300px !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    clip-path: inset(0 round 12px) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    display: block !important;
}

.pagina-material-particulado .bloque-3 .servicio-detalle-imagen {
    margin-top: -100px !important;    /* ← SUBE TODA la imagen (ocupa menos espacio) */
}

/* Responsive */
@media (max-width: 768px) {
    .pagina-material-particulado .servicio-detalle-imagen img {
        max-height: 250px;
    }
}


/* ============================================ */
/* MATERIAL PARTICULADO - RESPONSIVE            */
/* ============================================ */


/* ============================================ */
/* TABLETS: 769px A 1024px                      */
/* ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {

    .pagina-material-particulado .servicio-detalle-grid {
        gap: 25px;
        align-items: start !important;
    }

    /* Imagen del bloque 1 */
    .pagina-material-particulado
    .servicio-detalle-grid:not(.reverse)
    .servicio-detalle-imagen img {
        height: 300px;
    }

    /* Imagen del bloque 2 */
    .pagina-material-particulado
    .servicio-detalle-grid.reverse
    .servicio-detalle-imagen img {
        max-height: 300px;
    }

    /* Imagen del bloque 3 */
    .pagina-material-particulado
    .bloque-3 .servicio-detalle-imagen {
        margin-top: -50px !important;
    }

    .pagina-material-particulado
    .bloque-3 .servicio-detalle-imagen img {
        height: 250px !important;
        max-height: 250px !important;
        width: 100%;
        object-fit: contain !important;
    }
}


/* ============================================ */
/* MÓVIL: 481px A 768px                         */
/* ============================================ */

@media (min-width: 481px) and (max-width: 768px) {

    /* Apilar texto e imágenes */
    .pagina-material-particulado .servicio-detalle-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch !important;
        gap: 20px;
    }

    .pagina-material-particulado
    .servicio-detalle-grid .servicio-detalle-imagen,
    .pagina-material-particulado
    .servicio-detalle-grid .servicio-detalle-texto {
        width: 100%;
        max-width: 100%;
        margin-top: 0 !important;
        position: static !important;
        top: auto !important;
    }

    /* Título del bloque 1 */
    .pagina-material-particulado
    .servicio-detalle-grid:not(.reverse)
    .servicio-detalle-texto h1 {
        position: static !important;
        top: auto !important;
        font-size: 1.4rem;
        line-height: 1.35;
    }

    /* Imágenes de los bloques 1 y 2 */
    .pagina-material-particulado
    .servicio-detalle-grid:not(.reverse)
    .servicio-detalle-imagen img {
        width: 100%;
        height: 260px;
        max-height: 260px;
        object-fit: cover;
    }

    .pagina-material-particulado
    .servicio-detalle-grid.reverse
    .servicio-detalle-imagen img {
        width: 100%;
        height: auto;
        max-height: 280px;
        object-fit: contain;
    }

    /* Imagen del bloque 3 */
    .pagina-material-particulado
    .bloque-3 .servicio-detalle-imagen {
        margin-top: 0 !important;
    }

    .pagina-material-particulado
    .bloque-3 .servicio-detalle-imagen img {
        width: 100%;
        height: 230px !important;
        max-height: 230px !important;
        object-fit: contain !important;
    }

    /* Texto */
    .pagina-material-particulado .servicio-detalle-texto h2 {
        font-size: 1.25rem;
    }

    .pagina-material-particulado .servicio-detalle-texto p,
    .pagina-material-particulado .servicio-detalle-texto li {
        font-size: 0.95rem;
        line-height: 1.6;
    }
}


/* ============================================ */
/* MÓVIL PEQUEÑO: HASTA 480px                   */
/* ============================================ */

@media (max-width: 480px) {

    .pagina-material-particulado .servicio-detalle-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch !important;
        gap: 16px;
    }

    .pagina-material-particulado
    .servicio-detalle-grid .servicio-detalle-imagen,
    .pagina-material-particulado
    .servicio-detalle-grid .servicio-detalle-texto {
        width: 100%;
        max-width: 100%;
        margin-top: 0 !important;
        position: static !important;
        top: auto !important;
    }

    /* Título */
    .pagina-material-particulado
    .servicio-detalle-grid:not(.reverse)
    .servicio-detalle-texto h1 {
        font-size: 1.2rem;
        line-height: 1.4;
        position: static !important;
        top: auto !important;
    }

    /* Imagen del bloque 1 */
    .pagina-material-particulado
    .servicio-detalle-grid:not(.reverse)
    .servicio-detalle-imagen img {
        height: 210px;
        max-height: 210px;
        object-fit: cover;
    }

    /* Imagen del bloque 2 */
    .pagina-material-particulado
    .servicio-detalle-grid.reverse
    .servicio-detalle-imagen img {
        width: 100%;
        height: auto;
        max-height: 230px;
        object-fit: contain;
    }

    /* Imagen del bloque 3 */
    .pagina-material-particulado
    .bloque-3 .servicio-detalle-imagen {
        margin-top: 0 !important;
    }

    .pagina-material-particulado
    .bloque-3 .servicio-detalle-imagen img {
        width: 100%;
        height: 190px !important;
        max-height: 190px !important;
        object-fit: contain !important;
    }

    /* Texto */
    .pagina-material-particulado .servicio-detalle-texto h2 {
        font-size: 1.15rem;
    }

    .pagina-material-particulado .servicio-detalle-texto p,
    .pagina-material-particulado .servicio-detalle-texto li {
        font-size: 0.9rem;
        line-height: 1.55;
    }
}

/* ============================================ */
/* PÁGINA DE CONTACTO                           */
/* ============================================ */

/* ===== BANNER ===== */
.contacto-banner {
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-dark));
    padding: 6rem 0 4rem;
    margin-top: 74px;
    text-align: center;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.contacto-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50%;
}

.contacto-banner h1 {
    font-size: 3.5rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 2px;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 2;
}

.contacto-banner p {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.85);
    position: relative;
    z-index: 2;
}

/* ===== TARJETAS DE CONTACTO ===== */
.contacto-tarjetas {
    padding: 4rem 0;
    background: var(--gray-light);
}

.contacto-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}

.contacto-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.contacto-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.contacto-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.contacto-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin-bottom: 0.3rem;
}

.contacto-card p {
    font-size: 0.85rem;
    color: #4a5568;
    margin-bottom: 1rem;
    overflow-wrap: normal;
    word-break: normal;
    white-space: nowrap;
}

.btn-contacto {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.8rem;
    background: #0d2137;
    color: #ffffff;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    margin-top: auto;
}

.btn-contacto:hover {
    background: #1a3a5c;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(13, 33, 55, 0.3);
    color: #ffffff;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .contacto-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .contacto-banner {
        padding: 4rem 0 2rem;
        margin-top: 60px;
        min-height: 180px;
    }

    .contacto-banner h1 {
        font-size: 2.5rem;
    }

    .contacto-banner p {
        font-size: 1rem;
    }

    .contacto-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ============================================ */
/* WHATSAPP - ESTILOS ESPECIALES                */
/* ============================================ */

/* Ícono de WhatsApp - Fondo verde */
.contacto-icon.whatsapp-icon {
    background: linear-gradient(135deg, #25D366, #128C7E) !important;
}

/* Botón de WhatsApp - Fondo verde */
.btn-contacto.whatsapp-btn {
    background: #25D366 !important;
}

.btn-contacto.whatsapp-btn:hover {
    background: #128C7E !important;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4) !important;
    transform: translateY(-3px);
}

/* ============================================ */
/* PRIMEROS AUXILIOS - BLOQUE 2                  */
/* TEXTO IZQUIERDA + IMÁGENES DERECHA            */
/* ============================================ */

.pagina-primeros-auxilios .bloque-2 .servicio-detalle-grid {
    direction: ltr;
    align-items: center;
}

.pagina-primeros-auxilios .bloque-2 .servicio-detalle-imagenes-dobles {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

/* ============================================ */
/* PRIMEROS AUXILIOS - EDICIÓN INDIVIDUAL        */
/* ============================================ */

/* PRIMERA IMAGEN */
.pagina-primeros-auxilios .imagen-metodologia img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
}

/* SEGUNDA IMAGEN */
.pagina-primeros-auxilios .imagen-incluye img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
}

/* Adaptación para móviles */
@media (max-width: 768px) {
    .pagina-primeros-auxilios .bloque-2 .servicio-detalle-grid {
        grid-template-columns: 1fr;
    }

    .pagina-primeros-auxilios .bloque-2 .servicio-detalle-imagenes-dobles img {
        height: 230px;
    }
}