/*
 Theme Name:   CERFOM Child
 Template:     storefront
 Version:      1.0.0
 Text Domain:  cerfom
*/

/* Paleta */
        :root{
          --cerfom-azul:#37487e;
          --cerfom-topbar:#2a344f;
          --cerfom-accent:#F7B500;
          --white:#fff;
        }
        
        /* Topbar RRSS */
        .cerfom-topbar{
          background:var(--cerfom-topbar);
          color:var(--white);
          font-size:14px; line-height:1;
        }
        .cerfom-topbar .col-full{
          display:flex; justify-content:flex-end; align-items:center;
          gap:16px; padding:6px 20px;
        }
        .cerfom-topbar .social-icons{ display:flex; gap:16px; align-items:center; }
        .cerfom-topbar .social-icons a{
          color:var(--white); font-size:16px; text-decoration:none;
          display:inline-flex; align-items:center; justify-content:center;
          width:28px; height:28px; transition:opacity .15s, transform .15s;
        }
        .cerfom-topbar .social-icons a:hover{ opacity:.85; transform:translateY(-1px); }
        
        /* Header + menú en una fila */
        .site-header{
          background:var(--cerfom-azul);
          padding:10px 0; border:0;
        }
        .site-header .col-full{
          display:flex; align-items:center; gap:24px;
        }

h2 {
        font-family: 'Futura Md BT', sans-serif;
}

/*col-full ANCHO COMPLETO*/
      .col-full {
            max-width: 100%;
             margin-left: 0; 
             margin-right: 0; 
             padding: 0; 
            box-sizing: content-box;
        }
        
/*MAIN SIN MARGIN BOTTOM*/

        .site-main {
            margin-bottom: 0;
        }        
                
        
/* ===== Fuentes personalizadas CERFOM ===== */
        
        @font-face {
          font-family: 'Futura Md BT';
          src: url('fonts/FuturaMdBTMedium.ttf') format('truetype');
          font-weight: 500;
          font-style: normal;
        }
        
        @font-face {
          font-family: 'Square721 Bold';
          src: url('fonts/Square721CnBTBold.ttf') format('truetype');
          font-weight: 700;
          font-style: normal;
        }
        
        @font-face {
          font-family: 'Square721 Roman';
          src: url('fonts/Square721CnBTRoman.ttf') format('truetype');
          font-weight: 400;
          font-style: normal;
        }
        
        @font-face {
          font-family: 'Neovibes Demo';
          src: url('fonts/NCLNeovibes-Demo.otf') format('opentype');
          font-weight: normal;
          font-style: normal;
        }


/* Logo */
        .site-header .site-branding{
          margin:0; display:flex; align-items:center; flex:0 0 auto;
        }
        .site-header .site-branding img{ max-height:56px !important; height:auto; width:auto; }
        .site-header .site-branding .site-title a,
        .site-header .site-branding .site-description{ color:var(--white); }
        
        /* Contenedor añadido por el hook */
        .cerfom-inline-nav{ margin-left:auto; flex:1 1 auto; display:flex; align-items:center; }
        
        /* Nav + menú */
        .cerfom-inline-nav #site-navigation{ margin:0; width:auto; }
        .cerfom-inline-nav #site-navigation .menu{
          display:flex; flex-direction:row; align-items:center; gap:22px; margin:0;
        }
        .cerfom-inline-nav #site-navigation .menu > li > a{
          color:var(--white) !important; font-weight:600; padding:10px 6px; text-decoration:none;
          transition: transform 0.2s ease, color 0.2s ease;
        }
        .cerfom-inline-nav #site-navigation .menu > li > a:hover{ color:var(--cerfom-accent) !important; }
        
        /* Responsive */
        @media (max-width:768px){
          .site-header .col-full{ flex-wrap:wrap; }
          .cerfom-inline-nav{ width:100%; }
          .cerfom-inline-nav #site-navigation .menu{ gap:14px; }
        }

/* LOGO Y MENU EN LINEA */

        /*.grid-menu {*/
        /*    display: grid!important;*/
        /*    grid-template-columns: 30% 70%;*/
        /*}*/
        
        .grid-menu::before {
            display: none!important;
        }
        
/*MODIFICACIONES DE COLOR MENU*/

/* ===== MENÚ PRINCIPAL: pestañas de colores + altura baja ===== */
        
        /* Sin separaciones entre items y altura compacta */
        .cerfom-inline-nav #site-navigation .menu,
        .cerfom-inline-nav #site-navigation .nav-menu{
          display:flex !important;
          flex-direction:row !important;
          align-items:stretch !important;
          gap:0 !important;
          margin:0 !important;
          padding:0 !important;
        }
        
        /* Reset de márgenes en <li> */
        .cerfom-inline-nav #site-navigation .menu > li,
        .cerfom-inline-nav #site-navigation .nav-menu > li{
          margin:0 !important;
        }
        
        /* Enlaces como “tabs”: altura y tipografía */
        .cerfom-inline-nav #site-navigation .menu > li > a,
        .cerfom-inline-nav #site-navigation .nav-menu > li > a{
          display:flex !important;
          align-items:center !important;
          justify-content:center !important;
          height:65px !important;            /* ← baja la altura del menú */
          padding:0px !important;         /* ancho de cada pestaña */
          color:#fff !important;
          font-weight:700 !important;
          text-transform:uppercase !important;
          letter-spacing:.3px !important;
          text-decoration:none !important;
          line-height:1 !important;
          border-radius:0 !important;        /* tabs rectos */
          transition:filter .15s ease, opacity .15s ease !important;
        }
        
        /* Colores por orden (1: Inicio, 2: Quienes Somos, 3: Cursos, 4: Certificaciones, 5: Clientes, 6: Contacto) */
        
        
        .cerfom-inline-nav #site-navigation .menu > li:nth-child(2) > a,
        .cerfom-inline-nav #site-navigation .nav-menu > li:nth-child(2) > a{ background:#096bc2 !important; }
        
        .cerfom-inline-nav #site-navigation .menu > li:nth-child(3) > a,
        .cerfom-inline-nav #site-navigation .nav-menu > li:nth-child(3) > a{ background:#0d4eb2 !important; }
        
        .cerfom-inline-nav #site-navigation .menu > li:nth-child(4) > a,
        .cerfom-inline-nav #site-navigation .nav-menu > li:nth-child(4) > a{ background:#1135a5 !important; }
        
        .cerfom-inline-nav #site-navigation .menu > li:nth-child(5) > a,
        .cerfom-inline-nav #site-navigation .nav-menu > li:nth-child(5) > a{ background:#3a4a95 !important; }
        
        .cerfom-inline-nav #site-navigation .menu > li:nth-child(6) > a,
        .cerfom-inline-nav #site-navigation .nav-menu > li:nth-child(6) > a{ background:#343d66 !important; }
        
        /* Hover sutil (más brillo) */
        .cerfom-inline-nav #site-navigation .menu > li > a:hover,
        .cerfom-inline-nav #site-navigation .nav-menu > li > a:hover{
          filter: brightness(1.08) !important;
        }
        
        /* Estado actual (opcional: un poco más de brillo) */
        .cerfom-inline-nav #site-navigation .menu > li.current-menu-item > a,
        .cerfom-inline-nav #site-navigation .nav-menu > li.current-menu-item > a{
          filter: brightness(1.15) !important;
        }
        
        /* Responsive: conserva estilo, un poco más bajo si quieres */
        @media (max-width: 768px){
          .cerfom-inline-nav #site-navigation .menu,
          .cerfom-inline-nav #site-navigation .nav-menu{
            flex-wrap:wrap !important;
          }
          .cerfom-inline-nav #site-navigation .menu > li > a,
          .cerfom-inline-nav #site-navigation .nav-menu > li > a{
            height:40px !important;
            padding:0 16px !important;
          }
        }

/*COLOR BACKGROWND DE BARRA PRINCIPAL MENU*/

        .site-header {
            background: white;
        }

/* LOGO Y MENU EN LINEA */

        .grid-menu {
            display: grid!important;
            /*grid-template-columns: 30% 70%;*/
        }
        
        .grid-menu::before {
            display: none!important;
        }

        .site-header {
            padding-top: 0px;
            padding-bottom: 0px;
        }
        
        .site-header .site-branding img {
            max-height: 40px!important;
        }
        
        .site-header .col-full {
            display: flex;
            align-items: center;
            gap: 24px;
            background-color: #028bd3 !important;
            height: 65px;
        }
        
        .col-full.grid-menu {
            max-width: 100%;
            padding: 0 0 0 0;
        }
        
        .cerfom-topbar .col-full {
            max-width: 95%;
        }
        
        .site-header .site-branding {
            display:none;   
        }
        
        .cerfom-inline-nav #site-navigation .menu > li > a, .cerfom-inline-nav #site-navigation .nav-menu > li > a {
        font-family: 'Futura Md BT';
        font-weight: 400 !important;
        }
        
/* === Menú pegado a la derecha === */

        /* El contenedor del header empuja el nav al borde derecho */
        .site-header .col-full{
          display:flex !important;
          justify-content:flex-end !important;
          align-items:center !important;
        }
        
        /* El wrapper del nav ya no debe “llenar” todo */
        .cerfom-inline-nav{
          margin-left:0 !important;
          flex:0 0 auto !important;
          display:flex !important;
        }
        .cerfom-inline-nav #site-navigation{
          width:auto !important;
          margin:0 !important;
        }
        
        /* El <ul> no ocupa 100% y alinea a la derecha */
        .cerfom-inline-nav #site-navigation .menu,
        .cerfom-inline-nav #site-navigation .nav-menu{
          width:auto !important;               /* antes lo tenías a 100% */
          display:flex !important;
          justify-content:flex-end !important; /* todo el grupo a la derecha */
          align-items:stretch !important;
          gap:0 !important;
          margin:0 !important;
          padding:0 !important;
        }
        
        /* Cada <li> ya NO se estira: tamaño natural */
        .cerfom-inline-nav #site-navigation .menu > li,
        .cerfom-inline-nav #site-navigation .nav-menu > li{
          flex:0 0 auto !important;            /* ← anula flex:1 de los “tabs” llenando ancho */
          min-width:0 !important;
          margin:0 !important;
        }
        
        /* Enlaces: altura/padding como los tabs de color */
        .cerfom-inline-nav #site-navigation .menu > li > a,
        .cerfom-inline-nav #site-navigation .nav-menu > li > a{
          width:auto !important;               /* antes estaba a 100% del <li> */
          height:var(--menu-h, 65px) !important;
          padding:0 22px !important;           /* ajusta el ancho de cada pestaña */
          display:flex !important;
          align-items:center !important;
          justify-content:center !important;
          line-height:1 !important;
        }
                
        
                
                /*MIOS APARTE*/
                .no-wc-breadcrumb .site-header {
                    margin-bottom: 0!important;
                }
                
        a.skip-link.screen-reader-text {
            display: none;
        }
        
        /* Ocultar textos y botón del hero solo en la portada */
        .home .cerfom-hero h1,
        .home .cerfom-hero p,
        .home .cerfom-hero .btn {
          display: none !important;
        }
        
        /* Quitar espacios si queda hueco */
        .home .cerfom-hero {
          padding: 0 !important;
          margin: 0 !important;
          min-height: 0 !important;
        }
        
        .col-full:after {
            display:none;
        }
        
        
        
        /* ===== Footer CERFOM ===== */
        .site-footer{
          background:#2a344f !important;
          color:#fff !important;
        }
        
        /* Widgets del footer (títulos, textos, listas) */
        .site-footer .footer-widgets,
        .site-footer .widget,
        .site-footer .widget p,
        .site-footer .widget li,
        .site-footer .widget div,
        .site-footer .widget span{
          color:#fff !important;
        }
        .site-footer .widget-title,
        .site-footer h1, .site-footer h2, .site-footer h3,
        .site-footer h4, .site-footer h5, .site-footer h6{
          color:#fff !important;
        }
        
        /* Enlaces en el footer */
        .site-footer a{
          color:#fff !important;
          text-decoration:none;
        }
        .site-footer a:hover,
        .site-footer a:focus{
          opacity:.85;
        }
        
        /* Línea superior que pone Storefront en .site-info */
        .site-footer .site-info{
          border-top:none !important;
          color:#fff !important;
        }
        
        /* (Móvil) barra inferior de Storefront */
        .storefront-handheld-footer-bar{
          background:#2a344f !important;
        }
        .storefront-handheld-footer-bar a{
          color:#fff !important;
        }
        
        /* Página con solo menú + imagen full-bleed */
        .cerfom-full-bleed-image{
          /* full-bleed robusto sin franjas laterales */
          position: relative;
          left: 50%;
          right: 50%;
          margin-left: -50vw;
          margin-right: -50vw;
          width: auto;
          max-width: none;
          padding: 0;
          margin-top: 0;
        }
        .cerfom-full-bleed-image .cerfom-full-img{
          display: block;
          width: 100%;
          height: auto;          /* cambia a la opción “hero” abajo si quieres alto completo */
          object-fit: cover;
          line-height: 0;
        }
        
        /* (Opcional) si quieres que la imagen ocupe el alto de la pantalla bajo el header:
        .cerfom-full-bleed-image .cerfom-full-img{
          height: calc(100vh - var(--header-h, 0px));
        }
        :root{ --header-h: 90px; }  /* ajusta a la altura real del header */
        */
        
        /* Evita scroll horizontal por 1px de diferencia en Windows */
        html, body{ overflow-x: hidden; }
        
        /* Solo aplica en esta plantilla */
        body.page-template-page-menu-imagen-php .entry-header,
        body.page-template-page-menu-imagen-php .entry-title,
        body.page-template-page-menu-imagen-php .entry-content{
          display: none !important;
        }
        
        /* Imagen full-bleed robusta (sin franjas laterales) */
        .cerfom-full-img{
          display:block;
          width:100%;
          height:auto;
          object-fit:cover;
          line-height:0;
        }
        
        /* Evita scroll horizontal por 1px de diferencia en Windows */
        html, body{ overflow-x:hidden; }
        
        /* Mensaje cuando no hay imagen */
        .cerfom-noimage{
          padding:48px 0;
          text-align:center;
          opacity:.7;
          font-style:italic;
        }
        
        /* ===== Menú + Imagen Full — que la imagen llegue a los bordes ===== */
        body.page-template-page-menu-imagen-php .site-content .col-full{
          max-width: none;           /* quita el ancho fijo del wrapper de Storefront */
          padding-left: 0;
          padding-right: 0;
        }
        
        body.page-template-page-menu-imagen-php .content-area,
        body.page-template-page-menu-imagen-php .site-main{
          margin: 0;                 /* sin márgenes superiores/lat */
        }
        
        /* Full-bleed robusto para la imagen */
        body.page-template-page-menu-imagen-php img.cerfom-full-img{
          display: block;
          width: 100vw;              /* ocupa todo el viewport */
          max-width: 100vw;
          position: relative;
          left: 50%;
          right: 50%;
          margin-left: -50vw;        /* rompe el contenedor y sangra a ambos lados */
          margin-right: -50vw;
          height: auto;
          object-fit: cover;
          line-height: 0;
        }
        
        /* Evita barra/blanco de 1px por scrollbar en Windows */
        html, body{ overflow-x: hidden; }
        
        /* Quita márgenes/padding globales del contenido sólo en esta plantilla */
        body.page-template-page-menu-imagen-php .cerfom-fullonly { margin:0; padding:0; }
        
        /* Full-bleed sin depender de .col-full */
        .cerfom-bleed{
          position:relative;
          left:50%;
          right:50%;
          margin-left:-50vw;
          margin-right:-50vw;
          width:auto;
          max-width:none;
        }
        .cerfom-full-img{
          display:block;
          width:100vw;
          height:auto;
          object-fit:cover;
          line-height:0;
        }
        
        html, body{ overflow-x:hidden; }
        
        .cerfom-inline-nav #site-navigation .menu > li > a:hover {
          color: white !important;
         
        
        }
        
       
        .cookieadmin_re_consent {
            display: none !important;
        }
    

/* ===== Equipo de Trabajo ===== */
        
        .equipo-hero{
          padding: 56px 0 24px;
          background: #f7f9fc; /* mantiene contraste limpio con tu paleta */
        }
        .equipo-title{
          margin: 0 0 8px;
          font-size: clamp(28px, 4vw, 44px);
          line-height: 1.15;
          color: #2a344f; /* combina con tu footer */
        }
        .equipo-intro{
          margin: 0;
          font-size: clamp(16px, 2vw, 20px);
          max-width: 70ch;
          color: #37487e;  /* barra menú */
        }
        .equipo-content{
          padding: 16px 0 56px;
        }
        .equipo-content p{
          line-height: 1.7;
        }




/* ===== MENÚ CATEGORÍAS — horizontal, centrado y sin viñetas del tema ===== */
        .site-content nav.cursos-categorias,
        .cursos-categorias{
          width:100% !important;
          margin:16px auto 22px !important;
          text-align:center !important;
        }
        
        .site-content nav.cursos-categorias > ul,
        .cursos-categorias > ul{
          list-style:none !important;            /* quita viñetas nativas */
          margin:0 !important;
          padding-left:0 !important;
          display:inline-flex !important;        /* para centrar con text-align */
          flex-wrap:wrap !important;
          gap:12px !important;
        }
        
        /* Storefront suele dibujar bullets con ::before en los <li> */
        .site-content nav.cursos-categorias li,
        .cursos-categorias li{
          list-style:none !important;
          margin:0 !important;
          padding:0 !important;
          position:relative !important;
        }
        .site-content nav.cursos-categorias li::before,
        .cursos-categorias li::before{
          content:none !important;               /* ← neutraliza el pseudo-bullet del tema */
        }
        
        .site-content nav.cursos-categorias li a,
        .cursos-categorias li a{
          display:inline-block !important;
          padding:8px 18px !important;
          border-radius:3px !important;
          font-size:14px !important;
          font-weight:700 !important;
          text-transform:uppercase !important;
          letter-spacing:.2px !important;
          text-decoration:none !important;
          background:#f4f6f9 !important;
          color:#37487e !important;
          border:0 !important;
          box-shadow:none !important;
          line-height:1 !important;
          transition:all .25s ease !important;
        }
        .site-content nav.cursos-categorias li a:hover,
        .cursos-categorias li a:hover{
          background:#37487e !important;
          color:#fff !important;
        }
        .site-content nav.cursos-categorias li.is-active a,
        .cursos-categorias li.is-active a{
          background:#2a344f !important;
          color:#fff !important;
        }
        
        /* Móvil con scroll tipo chips */
        @media (max-width:768px){
          .site-content nav.cursos-categorias > ul,
          .cursos-categorias > ul{
            display:flex !important;
            flex-wrap:nowrap !important;
            overflow-x:auto !important;
            gap:8px !important;
            padding-bottom:6px !important;
            -webkit-overflow-scrolling:touch !important;
          }
          .site-content nav.cursos-categorias li,
          .cursos-categorias li{ flex:0 0 auto !important; }
          .site-content nav.cursos-categorias li a,
          .cursos-categorias li a{
            padding:8px 12px !important;
            font-size:13px !important;
            white-space:nowrap !important;
          }
        }

/* =======================
   MENÚ DE CATEGORÍAS CURSOS
   ======================= */
        .cursos-categorias {
          margin: 20px auto !important;             
          text-align: center !important;            
        }
        
        .cursos-categorias ul {
          list-style: none !important;              
          padding: 0 !important;
          margin: 0 !important;
          display: inline-flex !important;          
          flex-wrap: wrap !important;               
          gap: 12px !important;                     
        }
        
        .cursos-categorias li {
          margin: 0 !important;
        }
        
        .cursos-categorias a {
          display: inline-block !important;
          padding: 8px 18px !important;
          border-radius: 20px !important;           
          font-size: 14px !important;
          font-weight: 600 !important;
          text-decoration: none !important;
          background: #f4f6f9 !important;           
          color: #37487e !important;                
          transition: all 0.3s ease !important;     
        }
        
        .cursos-categorias a:hover {
          background: #37487e !important;           
          color: #fff !important;                   
        }
        
        .cursos-categorias .is-active a {
          background: #2a344f !important;           
          color: #fff !important;                   
        }
      
        
        .titulo-cursos {
          font-size: 2.2rem !important;
          font-weight: 800 !important;
          text-align: center !important;
          margin: 20px 0 30px !important;
          padding: 12px 0 !important;
          color: #2a344f !important;
          text-transform: uppercase;
        }

/* ===== Quienes Somos ===== */

        .qs-wrapper {
          display: grid;
          grid-template-columns: 6fr 4fr;
          align-items: center;
          gap: 40px;
          padding: 0px 0px 0px 250px;
          margin-bottom: 60px;
        }
        
        /* Texto */
        
        
        
        .qs-texto h1 {
          font-size: 38px;
          font-weight: 700;
          margin-bottom: 24px;
          font-family: 'Futura Md BT', sans-serif;
        }
        .qs-texto p {
          font-size: 20px;
          line-height: 1.2;
          margin-bottom: 18px;
          font-family: 'Square721 Roman', sans-serif;
          color: black;
        }
        .qs-texto strong {
          font-weight: 700;
          font-family: 'Square721 Bold', sans-serif;
        }
        
        /* Imagen + hexágonos */
        .qs-media {
          position: relative;
        }
        .qs-hexagonos img {
          width: 100%;
          height: auto;
        
        }
        .qs-equipo {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 85%;
        }
        .qs-equipo img {
          width: 100%;
          height: auto;
          display: block;
        }
/* ===== Franja inferior (logos + equipo) ===== */

/* Contenedor principal en grid */
        .qs-logos{
          display: grid;
          grid-template-columns: 1fr;   /* solo una columna para los logos */
          align-items: end;
          background: #5e6d74;
          padding: 20px 40px;
          position: relative;           /* referencia para el absolute */
          overflow: visible;            /* 🔑 permite que la imagen sobresalga hacia arriba */
          margin-top: -80px;
          height: 100%;
        }
        
        /* Logos alineados a la izquierda */
        .qs-logos-inner{
          display: flex;
          gap: 0px;
          position: relative;
          z-index: 3;                   /* logos por encima de la barra y de la foto si se cruzan */
        }
        
        .qs-logos-inner img{
          height: 80px;
          object-fit: contain;
          
        }
        
        /* Imagen del equipo fuera del flujo, pegada a la esquina */
        .qs-equipo-barra{
          position: absolute;
          right: 0;                     /* pegada a la derecha */
          bottom: 0;                    /* pegada abajo */
          z-index: 2;                   /* por encima de la barra, debajo de los logos */
          pointer-events: none;         /* evita que tape clics (opcional) */
        }
        
        .qs-equipo-barra img{
          height: 300px;                /* 🔁 ajústalo para verla más grande */
          width: auto;
          display: block;
          object-fit: contain;
        }
        
        /* Responsivo (evita que tape todo en móvil) */
        @media (max-width: 768px){
          .qs-equipo-barra img{ height: 220px; }
        }

        
/* Título QUIENES SOMOS */
        .qs-texto h1 {
          font-family: 'Futura Md BT', sans-serif; /* usa tu fuente cargada */
          font-size: 42px;
          font-weight: 400;          /* más delgado */
          letter-spacing: 0px;       /* más separado */
          margin-bottom: 50px;
          color: #606062;            /* gris oscuro, no negro absoluto */
          text-transform: uppercase; /* como en el diseño */
        }
        
/* ===== Animación título letra por letra (solo fade) ===== */
        
        .titulo-letras {
          font-family: 'Futura Md BT', sans-serif;
          font-size: 42px;
          font-weight: 400;
          letter-spacing: 2px;
          color: #606062;
          text-transform: uppercase;
        }
        
        .titulo-letras span {
          opacity: 0;
          display: inline-block;
          animation: aparecer 0.3s forwards;
        }
        
        /* Animación básica de opacidad */
        .titulo-letras {
          font-family: 'Futura Md BT', sans-serif;
          font-size: 42px;
          font-weight: 400;
          letter-spacing: 2px;
          color: #606062;
          text-transform: uppercase;
        }
        
        .titulo-letras span {
                  opacity: 0;
                  animation: mostrar 0s forwards; /* aparece sin transición */
                }
                
                @keyframes mostrar {
                  to { opacity: 1; }
                }
        
        /* Delay escalonado: cada letra aparece en su tiempo */
        .titulo-letras span:nth-child(1)  { animation-delay: 0.1s; }
        .titulo-letras span:nth-child(2)  { animation-delay: 0.2s; }
        .titulo-letras span:nth-child(3)  { animation-delay: 0.3s; }
        .titulo-letras span:nth-child(4)  { animation-delay: 0.4s; }
        .titulo-letras span:nth-child(5)  { animation-delay: 0.5s; }
        .titulo-letras span:nth-child(6)  { animation-delay: 0.6s; }
        .titulo-letras span:nth-child(7)  { animation-delay: 0.7s; }
        .titulo-letras span:nth-child(8)  { animation-delay: 0.8s; }
        .titulo-letras span:nth-child(9)  { animation-delay: 0.9s; }
        .titulo-letras span:nth-child(10) { animation-delay: 1.0s; }
        .titulo-letras span:nth-child(11) { animation-delay: 1.1s; }
        .titulo-letras span:nth-child(12) { animation-delay: 1.2s; }
        .titulo-letras span:nth-child(13) { animation-delay: 1.3s; }

/* Animación del hexágono */
        .qs-hexagonos img {
          opacity: 0;
          animation: fadeHex 1.5s ease forwards;
          animation-delay: 1s; /* espera a que termine el título */
        }
        
        @keyframes fadeHex {
          from { opacity: 0; }
          to   { opacity: 1; }
        }
        
/* Línea azul sobre los logos */
        .qs-logos {
          position: relative;
          background: #3f4d56; /* tu gris de fondo actual */
              padding: 28px 30% 20px 15%;
        }
        
/* línea superior */
        .qs-logos::before {
          content: "";
          display: block;
          height: 8px;               /* grosor de la línea */
          background-color: #00aff0; /* color solicitado */
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
        }
        
.logo-stack {
          display: flex;
          flex-direction: column; /* uno arriba del otro */
          align-items: center;    /* centrados en el mismo eje */
          gap: 5px;               /* espacio entre los dos logos */
        }
        
        img.carabineros {
            height: 100px;
        }
        
        img.beruveritas {
            height: 70px;
        }
        
        img.sence {
            height: 55px;
        }
        
        img.chilecompra {
            height: 50px;
        }
        
        img.applus {
            height: 100px;
        }
        
        img.senegocia {
            height: 20px;
        }
        
        img.rednegocios {
            height: 20px;
        }
        
        img.sicep {
            height: 50px;
        }
        
        .qs-logos-inner {
          display: flex;
          justify-content: space-around; /* reparte los logos en fila */
          align-items: center;           /* centra cada logo en su caja verticalmente */
        }
        
        .qs-logos-inner img {
          max-height: 80px; /* ajusta al tamaño que quieras */
          object-fit: contain;
          display: block;
        }
        
        .qs-logos-inner img {
          max-height: 70px;          /* límite uniforme de altura */
          object-fit: contain;
          transition: transform 0.3s ease, filter 0.3s ease; /* animación suave */
          cursor: pointer;           /* cambia el cursor para indicar que es interactivo */
        }
        
        .qs-logos-inner img:hover {
          transform: scale(1.2);     /* agranda un 10% */
          filter: brightness(1.2);   /* opcional: un poco más brillante */
        }
        



/* ===== Equipo de Trabajo ===== */
        .et-wrapper{
          position: relative;
          display: grid;
          grid-template-columns: 3fr 6fr;
          align-items: start;
          gap: 40px;
          
        }
        
        /* Foto izquierda */
        .et-media img{
          width: 100%;
          height: auto;
          display: block;
          margin-top: 60px;
        }
        
        /* Hexágonos decorativos */
        .et-hex{
          position: absolute;
          inset: 0;
          pointer-events: none;
        }
        .et-hex img{
          position: absolute;
          top: -20px;
          right: 0;
          width: min(38vw, 565px);
          height: auto;
          opacity: 1;
          top: -60px;
            right: -115px !important;
        }
        
        /* Columna texto */
        .et-texto{
          position: relative;
          z-index: 2;
        }
        .et-texto h1{
          font-family: 'Futura Md BT', sans-serif;
          font-size: clamp(28px, 4vw, 54px);
          font-weight: 400;
          letter-spacing: 2px;
          color: #606062;
          text-transform: uppercase;
          margin: 10px 0 24px;
        }
        
        /* Listado dos columnas */
        .et-list{
          display: grid;
          grid-template-columns: 1fr 1fr;
          column-gap: 0px;
          row-gap: 14px;
          margin-right: 30%;
        }
        .et-item{
          font-size: 13px;
          line-height: 1.35;
          color: #222;
        }
        .et-item strong{
          display: block;
          font-weight: 700;
          color: black;
          font-family: 'Square721 Bold', sans-serif;
        }
        .et-item .cargo{
          display:block;
          font-weight: 400;
          color:#1d2f94;
          font-family: 'Futura Md BT', sans-serif;
        }
        .et-item .entidad{
          display:block;
          font-weight: 400;
          color:#1d2f94;
          font-family: 'Futura Md BT', sans-serif;
        }
        
        /* Slogan inferior */
        .et-slogan{
          text-align: center;
          font-weight: 800;
          color:#656a70;
          margin: 24px 0 10px;
          letter-spacing: .3px;
        }
        
        /* Línea inferior */
        .et-bottom-line{
          height: 8px;
          background: #00aff0;
          margin: 10px 0 0;
        }
        
        /* ===== Responsive ===== */
        @media (max-width: 992px){
          .et-wrapper{
            grid-template-columns: 1fr;
            padding: 24px 6%;
          }
          .et-hex img{
            position: static;
            width: 100%;
          }
          .et-list{
            grid-template-columns: 1fr;
            column-gap: 0;
          }
        }
        
/* Animación del hexágono */
        .et-hex img {
          opacity: 0;
          animation: fadeHex 1.5s ease forwards;
          animation-delay: 1s; /* espera a que termine el título */
        }
        
        @keyframes fadeHex {
          from { opacity: 0; }
          to   { opacity: 1; }
        }

.titulo-letras span {
          opacity: 0;
          animation: mostrar 0s forwards; /* aparece sin transición */
        }
        
        @keyframes mostrar {
          to { opacity: 1; }
        }
        
        /* Delay escalonado: cada letra aparece en su tiempo */
        .titulo-letras span:nth-child(1)  { animation-delay: 0.1s; }
        .titulo-letras span:nth-child(2)  { animation-delay: 0.2s; }
        .titulo-letras span:nth-child(3)  { animation-delay: 0.3s; }
        .titulo-letras span:nth-child(4)  { animation-delay: 0.4s; }
        .titulo-letras span:nth-child(5)  { animation-delay: 0.5s; }
        .titulo-letras span:nth-child(6)  { animation-delay: 0.6s; }
        .titulo-letras span:nth-child(7)  { animation-delay: 0.7s; }
        .titulo-letras span:nth-child(8)  { animation-delay: 0.8s; }
        .titulo-letras span:nth-child(9)  { animation-delay: 0.9s; }
        .titulo-letras span:nth-child(10) { animation-delay: 1.0s; }
        .titulo-letras span:nth-child(11) { animation-delay: 1.1s; }
        .titulo-letras span:nth-child(12) { animation-delay: 1.2s; }
        .titulo-letras span:nth-child(13) { animation-delay: 1.3s; }
        .titulo-letras span:nth-child(14) { animation-delay: 1.4s; }
        .titulo-letras span:nth-child(15) { animation-delay: 1.5s; }
        .titulo-letras span:nth-child(16) { animation-delay: 1.6s; }
        .titulo-letras span:nth-child(17) { animation-delay: 1.7s; }

        /* Animación del hexágono */
                .qs-hexagonos img {
                  opacity: 0;
                  animation: fadeHex 1.5s ease forwards;
                  animation-delay: 1s; /* espera a que termine el título */
                }
                
                @keyframes fadeHex {
                  from { opacity: 0; }
                  to   { opacity: 1; }
                }
        
        .et-texto .titulo-letras {
          /* estilos para el h2 con clase titulo-letras */
          color: #333;
          font-size: 38px;
          margin: 50px 0 30px 0;
          letter-spacing: -5.5px;
          color: #616163;
        }
        
        #equipo .et-bottom-line {
          margin: 0 !important;
        }
        
        /* Medio hexágono en Equipo de Trabajo */
        #equipo .et-mediohex {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
          z-index: 1;
        }
        
        #equipo .et-mediohex img {
          max-height: 400px;   /* ajusta según el diseño */
          height: auto;
          display: block;
        }
        
        /* Hover con sombra en cada profesional */
        .et-item {
          transition: box-shadow 0.3s ease, transform 0.3s ease;
           padding: 5px 20px 5px 10px;
        }
        
        .et-item:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          transform: translateY(-3px);
          background: #fff; /* opcional para que resalte más */
          border-radius: 6px; /* opcional, suaviza bordes */
         
        }
        
        /* Centrar el slogan */
        .et-slogan {
          text-align: center;
          font-size: 18px; /* ajusta si quieres más pequeño o más grande */
          font-weight: 700; /* mantiene negrita */
          margin: 40px 250px 40px 50px;
          color: black;
          font-family: 'Square721 roman', sans-serif;
            letter-spacing: 1px;
        }
        
        /* Bloque de prueba fuentes */
        .fuentes-demo {
          margin: 40px auto;
          padding: 20px;
          background: #f8f8f8;
          border: 1px solid #ddd;
          max-width: 800px;
        }
        .fuentes-demo h2 {
          font-family: 'Futura Md BT', sans-serif;
          margin-bottom: 20px;
          font-size: 22px;
          color: #333;
        }
        .fuentes-demo p {
          margin: 10px 0;
          font-size: 18px;
          line-height: 1.6;
        }
        
        /* Aplicar las fuentes que cargamos */
        .fuentes-demo .futura {
          font-family: 'Futura Md BT', sans-serif;
        }
        .fuentes-demo .square-roman {
          font-family: 'Square721 Roman', sans-serif;
        }
        .fuentes-demo .square-bold {
          font-family: 'Square721 Bold', sans-serif;
        }
        .fuentes-demo .neovibes {
          font-family: 'Neovibes Demo', cursive;
          font-size: 24px;
        }

/*CURSOS-------------------*/

        /* ===== Cursos ===== */
        .titulo-cursos {
          text-align: center;
          font-size: 36px;
          font-weight: 700;
          margin: 24px 0;
          font-family: 'Futura Md BT', sans-serif;
        }
        
        /* Menú de categorías */
        .cursos-categorias ul {
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          list-style: none;
          margin: 0 0 24px 0;
          padding: 0;
          gap: 12px;
        }
        
        .cursos-categorias li a {
          display: inline-block;
          padding: 8px 16px;
          border-radius: 20px;
          background: #f1f1f1;
          color: #222;
          text-decoration: none;
          font-weight: 600;
        }
        
        .cursos-categorias li.is-active a,
        .cursos-categorias li a:hover {
          background: #2a344f;
          color: #fff;
        }
        
        /* Grid de cursos */
        .grid-cursos {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 30px;
          margin: 0 150px;
        }
        
        .curso-item {
          text-align: center;
          border-radius: 8px;
          background: #fff;
          transition: box-shadow .3s;
          margin-bottom: 0px;
        }
        
        
        
        .curso-item img {
          width: 100%;
          height: auto;
          border-radius: 6px;
        }
        
        .curso-titulo {
          margin: 12px 0 0;
          font-size: 16px;
          font-weight: 700;
        }
        
        /* Contenedor de cada curso */
        .curso-item {
          position: relative;
        
          border-radius: 4px;
         
        }
        
        /* Imagen del curso */
        .curso-item img {
          width: 100%;
          height: auto;
          display: block;
          border-radius: 4px;
          transition: transform 0.5s ease;
          
        }
        
        /* Efecto hover: zoom en la imagen */
        .curso-item:hover img {
          transform: scale(1.1); /* agranda un poco */
          box-shadow: 0 6px 16px #000;
        }
        
        /* ===== Valores Corporativos ===== */
        .valores-section {
          max-width: 1000px;
          margin: 0 auto;
          padding: 60px 20px;
        }
        
        .valores-titulo {
          font-size: 42px;
          font-weight: 800;
          text-align: center;
          color: var(--cerfom-azul);
          margin-bottom: 15px;
        }
        
        .valores-subtitulo {
          font-size: 18px;
          text-align: center;
          color: #333;
          font-weight: 600;
          margin-bottom: 50px;
        }
        
        .valores-lista {
          display: grid;
          grid-template-columns: 1fr;
          gap: 5px;
          
        }
        
        .valor-item {
          background: #fff;
          padding: 25px 30px;
          border-left: 6px solid var(--cerfom-accent);
          border-radius: 12px;
          box-shadow: 0 4px 10px rgba(0,0,0,0.08);
          transition: transform 0.3s, box-shadow 0.3s;
        }
        .valor-item:hover {
          transform: translateY(-6px);
          box-shadow: 0 8px 18px rgba(0,0,0,0.15);
        }
        
        .valor-item h3 {
          font-size: 22px;
          font-weight: 700;
          margin-bottom: 12px;
          color: var(--cerfom-azul);
        }
        
        .valor-item p {
          font-size: 16px;
          line-height: 1.6;
          color: #444;
        }

/* ===== Fondo Valores Corporativos ===== */
        
        .valores-section {
          background-image: url('assets/img/fondovalores.jpg'); /* <-- cambia esta URL */
          background-size: cover;   /* cubre todo el ancho */
          background-position: center; /* centra la imagen */
          background-repeat: no-repeat;
          width: 100%;
          padding: 30px 20px;
          position: relative;
          max-width: 100%;
          margin: 0;
          height: 745px !important;
        }
        
        .valores-overlay {
          background: rgba(255,255,255,0.92); /* capa blanca semitransparente */
          border-radius: 12px;
          max-width: 700px;
          margin: 0 0 0 5%!important;
          padding: 10px 40px!important;
        }
        
        
        .valores-overlay {
          background: rgba(255, 255, 255, 0.95); /* capa blanca translúcida */
          max-width: 800px;
          margin: 0;
          padding: 0px 0px;
          border-radius: 12px;
        }
        
        /* ===== Título principal ===== */
        .valores-titulo {
          font-family: 'Futura Md BT', sans-serif;
          font-size: 46px;
          font-weight: 800;
          text-transform: uppercase;
          text-align: left;
          color: #00AEEF; /* Azul CERFOM */
          margin-bottom: 5px;
        }
        
        /* ===== Subtítulo ===== */
        .valores-subtitulo {
          font-family: 'Square721 Bold', sans-serif;
          font-size: 20px;
          font-weight: 700;
          color: #333333; /* Gris oscuro */
          margin-bottom: 35px;
          text-align: left;
        }
        
        /* ===== Lista de valores ===== */
        .valores-lista p {
          font-family: 'Square721 Roman', sans-serif;
          font-size: 20px;
          font-weight: 400;
          line-height: 1.7;
          color: #444444; /* Gris medio */
          margin-bottom: 0px;
          text-align: justify;
          line-height: 20px;
          padding: 10px;
        }
        
        /* Negritas dentro del texto */
        .valores-lista strong {
          font-weight: 700;
          color: #000000; /* Negro sólido */
        }
        
        .valores-lista p {
          transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .valores-lista p:hover {
          transform: scale(1.03); /* agranda un 3% */
          box-shadow: 0 6px 18px rgba(0,0,0,0.15); /* sombra */
          z-index: 1; /* que quede arriba de las otras al superponerse */
          position: relative;
        }
        
        .valores-section {
          position: relative;
          overflow: hidden; /* evita que sobresalgan raro */
        }
        
        .valores-decoracion {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          text-align: right; /* ajusta las personas a la derecha */
          z-index: 5; /* encima del fondo */
        }
        
        .decor-lineas {
          position: relative;
          width: 100%;
          max-height: 300px;
          object-fit: cover;
          z-index: 1;
        }
        
        .decor-personas {
          position: absolute;
          bottom: 0;
          right: 40px; /* separa un poco del borde derecho */
          width: 500px; /* ajusta tamaño */
          z-index: 2; /* sobre las líneas */
        }
        
        .valores-titulo {
          font-family: 'Futura Md BT', sans-serif;
          font-size: 46px;
          font-weight: 800;
          text-transform: uppercase;
          color: #00AEEF;
          margin-bottom: 20px;
          display: flex;
          flex-wrap: wrap;
        }
        
        .valores-titulo span {
          opacity: 0;
          animation: aparecer 0.05s forwards;
        }
        
        @keyframes aparecer {
          to { opacity: 1; }
        }
        
        /* Animación escalonada */
        .valores-titulo span:nth-child(1)  { animation-delay: 0.05s; }
        .valores-titulo span:nth-child(2)  { animation-delay: 0.10s; }
        .valores-titulo span:nth-child(3)  { animation-delay: 0.15s; }
        .valores-titulo span:nth-child(4)  { animation-delay: 0.20s; }
        .valores-titulo span:nth-child(5)  { animation-delay: 0.25s; }
        .valores-titulo span:nth-child(6)  { animation-delay: 0.30s; }
        .valores-titulo span:nth-child(7)  { animation-delay: 0.35s; }
        .valores-titulo span:nth-child(8)  { animation-delay: 0.40s; }
        .valores-titulo span:nth-child(9)  { animation-delay: 0.45s; }
        .valores-titulo span:nth-child(10) { animation-delay: 0.50s; }
        .valores-titulo span:nth-child(11) { animation-delay: 0.55s; }
        .valores-titulo span:nth-child(12) { animation-delay: 0.60s; }
        .valores-titulo span:nth-child(13) { animation-delay: 0.65s; }
        .valores-titulo span:nth-child(14) { animation-delay: 0.70s; }
        .valores-titulo span:nth-child(15) { animation-delay: 0.75s; }
        .valores-titulo span:nth-child(16) { animation-delay: 0.80s; }
        .valores-titulo span:nth-child(17) { animation-delay: 0.85s; }
        .valores-titulo span:nth-child(18) { animation-delay: 0.90s; }
        .valores-titulo span:nth-child(19) { animation-delay: 0.95s; }
        .valores-titulo span:nth-child(20) { animation-delay: 1.00s; }
        .valores-titulo span:nth-child(21) { animation-delay: 1.05s; }
        .valores-titulo span:nth-child(22) { animation-delay: 1.10s; }

/* Sección visión/misión */
        
        .vision-mision {
          padding: 0px 0px;
          background: #fff;
        }
        
        .vm-grid {
          display: grid;
          grid-template-columns: 1fr 4fr; /* 2 columnas iguales */
          align-items: center;
          gap: 60px;
          max-width: 100%;
          margin: 0 auto;
        }
        
        /* Texto */
        .vm-texto {
          font-family: 'Square721 Roman', sans-serif;
          color: #333;
        }
        
        .vm-titulo {
          font-family: 'Futura Md BT', sans-serif;
          font-size: 38px;
          font-weight: 800;
          text-transform: uppercase;
          color: #606062;
          margin-bottom: 20px;
        }
        
        /* Columna de imágenes */
        .vm-imagenes {
          position: relative;
          width: 100%;
          height: 100%;
        }
        
        .img-personas {
          width: 100%;
          max-width: 420px;
          position: relative;
          z-index: 2;
        }
        
        .img-decor {
          position: absolute;
          top: -30px;
          right: -50px;
          width: 100%;
          max-width: 500px;
          opacity: 0.5;
          z-index: 1;
        }
        
        /* Responsivo */
        @media (max-width: 900px) {
          .vm-grid {
            grid-template-columns: 1fr; /* 1 columna en móvil */
            text-align: center;
          }
          .img-decor {
            display: none; /* opcional en móvil */
          }
        }
        


/* ====== MISION VISION ====== */
        
        /* GRID PRINCIPAL */
        .vm-grid {
          display: grid;
          grid-template-columns: 20% 80%;
          min-height: 100vh;
          align-items: start; /* 🔥 Alinea las columnas arriba */
        }
        
        /* Columna izquierda */
        .vm-col-izq {
          width: 100%;
          height: 100%;
        }
        .vm-col-izq .img-izq {
          width: 100%;
          object-fit: cover;
          display: block;
        }
        
        /* Columna derecha */
        .vm-col-der {
          position: relative;
          font-family: 'Square721 Roman', sans-serif;
          color: #333;
          overflow: hidden; /* para que las decoraciones no se salgan */
          background: #fff;
          padding-top: 50px;
          height: 100%;
            padding-left: 20px;
        }
        
        /* Títulos */
        .vm-titulo {
          font-family: 'Futura Md BT', sans-serif;
          font-size: 42px;
          font-weight: 800;
          text-transform: uppercase;
          color: #444;
          margin: 30px 0 20px;
        }
        
        /* Texto */
        .vm-col-der p {
          font-size: 18px;
          line-height: 1.7;
          margin-bottom: 20px;
        }
        
        /* Hexágonos */
        .img-hexagonos {
          position: absolute;
          top: 0;     /* siempre pegado arriba */
          right: 0;   /* siempre pegado a la derecha */
          width: 500px;
          opacity: 0.4;
          z-index: 1;
          pointer-events: none;
        }
        
        /* Personas */
        .img-personas {
          position: absolute;
          bottom: 0;
          right: 40px;
          width: 100%;
          z-index: 2;
          padding-right: 50px;
        }
        
        /* Responsivo */
        @media (max-width: 1000px) {
          .vm-grid {
            grid-template-columns: 1fr;
          }
          .vm-col-izq {
            display: none;
          }
          .img-hexagonos {
            display: none;
          }
          .vm-col-der {
            padding: 40px 20px;
          }
        }
        
        /* Alinear la columna derecha arriba (si no lo tenías) */
        .vm-grid { align-items: start; }
        .vm-col-der { position: relative; }
        
        /* 🔥 Texto al 80% del ancho de la columna derecha */
        .vm-col-der > h2,
        .vm-col-der > p {
          width: 50%;
          max-width: 80%;
          display: block;
          position: relative;   /* para control de stacking */
          z-index: 3;           /* encima del panal */
        }
        
        .vm-col-der > p {
        
          text-align: justify;
          font-size: 20px;
          line-height: 25px;
        }
        
        /* Mantén las decoraciones donde van */
        .img-hexagonos {
          position: absolute;
          top: 0;
          right: 0;
          width: 500px;
          opacity: 0.4;
          z-index: 1;
          pointer-events: none;
        }
        .img-personas {
          position: absolute;
          bottom: 0;
          right: 100px;
          width: 100%;
          z-index: 2;
        
        }
        
        /* Responsivo: en móvil el texto vuelve al 100% */
        @media (max-width: 1000px) {
          .vm-col-der > h2,
          .vm-col-der > p {
            width: 100%;
            max-width: 100%;
          }
        }
        
        .vm-col-izq img {
          height: auto;
        
        }
        
        .vm-col-izq img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        
          /* Animación */
          opacity: 0;
          animation: fadeIn 2s ease-in-out forwards;
        }
        
        @keyframes fadeIn {
          from {
            opacity: 0;
            transform: scale(1.05); /* opcional: le da un zoom suave */
          }
          to {
            opacity: 1;
            transform: scale(1);
          }
        }
        
        /* Estado inicial */
        .img-hexagonos,
        .img-personas {
          opacity: 0; 
          animation-fill-mode: forwards; /* 🔥 mantiene el último estado */
        }
        
        /* Animación ultra suave */
        @keyframes fadeInSmooth {
          0%   { opacity: 0; }
          100% { opacity: 1; }
        }
        
        /* Panal */
        .img-hexagonos {
          animation: fadeInSmooth 3s ease-in-out forwards;
          animation-delay: 0s;
        }
        
        /* Personas */
        .img-personas {
          animation: fadeInSmooth 3s ease-in-out forwards;
          animation-delay: 0s; /* esperan 4s antes de empezar */
        }
        
        .vm-col-der p {
          display: inline-block;       /* el párrafo se comporta como bloque interno */
          transition: transform 0.4s ease, box-shadow 0.4s ease;
          transform-origin: center;    /* crece desde el centro */
           padding: 10px;
        
        }
        
        .vm-col-der p:hover {
          transform: scale(1.05);      /* agranda suavemente */
          box-shadow: 0 6px 18px rgba(0,0,0,0.25); /* sombra */
          border-radius: 10px;
         
        }
        
        /* Estado inicial para 2panales */
        .img-hexagonos-center {
          opacity: 0;
        }
        
        /* Animación ultra suave solo para 2panales */
        @keyframes fadeInPanales {
          0%   { opacity: 0; }
          100% { opacity: 0.4; }  /* 🔥 80% transparencia */
        }
        
        .img-hexagonos-center {
          position: absolute;
          top: 100px;        /* ajusta según lo necesites */
          right: 150px;
          width: 500px;
          z-index: 0;       /* detrás del contenido */
          animation: fadeInPanales 1s ease-in-out forwards;
          animation-delay: 0s;  /* aparece un poquito después */
        }
        

/* ============== SECCION SGI ================= */

        /* ===== Slider SGI ===== */
        .sgi-slider {
          position: relative;
          width: 100%;
          height: 500px; /* ajusta altura según tu diseño */
          overflow: hidden;
        }
        
        .sgi-slider .slide {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
          transition: opacity 2s ease-in-out; /* transición suave */
        }
        
        .sgi-slider .slide img {
          width: 100%;
          height: 100%;
          object-fit: cover; /* la imagen llena el slider */
        }
        
        .sgi-slider .slide.active {
          opacity: 1; /* solo la activa es visible */
        }
        
        /* ====== Animaciones ====== */

/* ======================
   SGI – Slider + Overlay
   ====================== */

        .sgi-slider {
          position: relative;
          width: 100%;
          height: 700px;
          overflow: hidden;
          background: #1f2b49;
        }
        
        /* Slides de fondo (con background-image en el HTML) */
        .sgi-slide {
          position: absolute;
          inset: 0;
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;   /* 🔹 muestra la imagen completa */
        
          opacity: 0;
          transition: opacity 1.8s ease-in-out;
        }
        .sgi-slide.is-active { opacity: 1; }
        
        /* -------- Overlay (solo primer slide) -------- */
        .sgi-overlay {
          position: absolute;
          inset: 0;
          z-index: 3;
          pointer-events: none; /* no bloquear clics */
          color: white;
          margin-top: -70px;
        }
        
        /* ====== Título ====== */
        .sgi-title {
          position: absolute;
          top: 12%;
          left: clamp(260px, 19vw, 360px);
          margin: 0;
          font-family: 'Futura Md BT', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
          font-weight: 800;
          font-size: clamp(36px, 3.4vw, 64px);
          letter-spacing: .03em;
          color: #ffffff;
          text-transform: uppercase;
          opacity: 0;
          transform: translateY(14px);
          transition: opacity .9s ease, transform .9s ease;
        }
        .sgi-overlay.sgi-play .sgi-title { opacity: 1; transform: none; }
        
        /* ====== Texto ====== */
        .sgi-text {
          position: absolute;
          top: calc(12% + clamp(36px, 3.4vw, 64px) + 18px);
          left: clamp(260px, 19vw, 360px);
          max-width: min(620px, 46vw);
          font-family: 'Futura Md BT', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
          font-size: clamp(16px, 1.15vw, 20px);
          line-height: 1.6;
          color: #e7eef6;
          opacity: 0;
          transform: translateY(14px);
          transition: opacity 1s ease .15s, transform 1s ease .15s;
          text-align: left;
        }
        .sgi-overlay.sgi-play .sgi-text { opacity: 1; transform: none; }
        
        /* ====== Hexágono ====== */
        .sgi-hexagon {
          position: absolute;
          top: 33%;
         
          opacity: 0;
          transform: scale(.92);
          transition: opacity .9s ease .4s, transform .9s ease .4s;
        }
        .sgi-overlay.sgi-play .sgi-hexagon { opacity: 1; transform: none; }
        
        /* ====== Línea ====== */
        .sgi-line {
          position: absolute;
          inset: 0;
          z-index: 2;
          pointer-events: none;
          opacity: 0;
          transition: opacity .2s ease;
        }
        .sgi-line path {
          stroke-dasharray: 1800;
          stroke-dashoffset: 1800;
        }
        .sgi-overlay.sgi-play .sgi-line { opacity: 1; }
        .sgi-overlay.sgi-play .sgi-line path { animation: sgiDraw 2.8s ease 1s forwards; }
        
        @keyframes sgiDraw {
          to { stroke-dashoffset: 0; }
        }
        
        /* ====== Soldador ====== */
        .sgi-welder {
          position: absolute;
          bottom: 0px;
          right: 0px;
          width: clamp(260px, 28vw, 420px);
          height: auto;
          opacity: 0;
          transform: translateY(12px);
          transition: opacity .9s ease .8s, transform .9s ease .8s;
        }
        .sgi-overlay.sgi-play .sgi-welder { opacity: 1; transform: none; }
        
        /* --------- Responsive --------- */
        @media (max-width: 1024px) {
          .sgi-title { left: clamp(200px, 18vw, 280px); }
          .sgi-text  { left: clamp(200px, 18vw, 280px); max-width: min(560px, 58vw); }
          .sgi-hexagon { left: clamp(40px, 5vw, 80px); top: 36%; }
        }
        @media (max-width: 780px) {
          .sgi-slider { height: 80vh; }
          .sgi-hexagon { display: none; }
          .sgi-title { left: 32px; top: 0%; }
          .sgi-text { left: 32px; right: 32px; max-width: none; }
          .sgi-welder { width: clamp(220px, 58vw, 340px); right: 16px; }
        }
        
        .sgi-slide {
          position: absolute;
          inset: 0;
          opacity: 0;
          transition: opacity 1.8s ease-in-out;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;   /* <--- cambia contain por cover */
        }
        .sgi-slide.is-active {
          opacity: 1;
        }
        
        /* Fuente para títulos principales */
        h1, h2, h3, .sgi-title {
          font-family: 'Futura Md BT', sans-serif;
          font-weight: 700;
        }
        
        /* Fuente para párrafos y texto normal */
        body, p, .sgi-text {
          font-family: 'Futura Md BT', sans-serif;
          
        }
        
        .sgi-text {
            margin-left: 290px;
          margin-top: 100px;
        }
        
        /* Fuente para subtítulos o destacados */
        strong, b, h4, h5, h6 {
          font-family: 'Square721 Bold', sans-serif;
          font-weight: 700;
        }
        
        .sgi-hexagon img {
          position: absolute;
          top: 33%;
         
          transform: scale(.92);
        }
        
        .sgi-hexagon {
            position: absolute;
            top: 31%;
            right: 65%;
            width: 17%;
        }
        
        .sgi-overlay.sgi-play .sgi-line {
            z-index: -1;
            padding-top: 100px;
        }
        
        .sgi-slide {
          position: absolute;
          inset: 0;
          opacity: 0;
          transition: opacity 1.8s ease-in-out;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover; /* muestra completa */
        }
        .sgi-slide.is-active {
          opacity: 1;
        }
        
        
        .sgi-hexagon2 {
          position: absolute;
            top: 20%;
            left: 20%;
            width: 16%;
        }
        
        
        /* Imagen del trabajador en Slide 2 */
        .sgi-slide:nth-child(2) .sgi-worker {
          position: absolute;
          top: 0;          /* 🔹 pegada arriba */
          right: 10%;      /* 🔹 separación desde la derecha */
          width: 20%;      /* 🔹 ocupa el 30% del ancho */
          
        }
        
        /* Línea Slide 1 */
        .sgi-slide:nth-child(1) .sgi-line { top: 0; }
        .sgi-slide:nth-child(1) .sgi-line path {
          stroke: #E9EDF2;
          stroke-width: 2;
          stroke-dasharray: 1800;
        }
        
        /* Línea Slide 2 */
        .sgi-slide:nth-child(2) .sgi-line { top: -80px; } /* la subes */
        .sgi-slide:nth-child(2) .sgi-line path {
          stroke: #E9EDF2;
          stroke-width: 3;
          stroke-dasharray: 1200;
        }
        
        /* Línea Slide 3 */
        .sgi-slide:nth-child(3) .sgi-line { top: 0; }
        .sgi-slide:nth-child(3) .sgi-line path {
          stroke: #E9EDF2;
          stroke-width: 4;
          stroke-dasharray: 2200;
        }
        
        /* tapa las líneas que vienen en el JPG del slide 2 */
        .sgi-slide:nth-child(2)::after{
          content:"";
          position:absolute;
          left:0;
          right:0;
          bottom:0;          /* ajusta si la raya está un poco más arriba */
          height:140px;      /* altura que cubre la raya */
          background:#0f6fbd;/* usa el azul del slide 2; ajústalo si tu azul es otro */
          z-index:1;         /* debajo del overlay (z=3), encima del fondo */
        }
        
        /* ======================
           Control individual por slide
           ====================== */
        
        /* ---------- SLIDE 1 ---------- */
        .sgi-slide:nth-child(1) .sgi-title {
          top: 12%;
          left: 18%;
        }
        .sgi-slide:nth-child(1) .sgi-text {
          top: 20%;
          left: 18%;
          max-width: 500px;
        }
        .sgi-slide:nth-child(1) .sgi-hexagon {
          top: 30%;
          left: 18%;
          width: 16%;
        }
        .sgi-slide:nth-child(1) .sgi-line {
          top: 0;
        }
        .sgi-slide:nth-child(1) .sgi-line path {
          stroke: #E9EDF2;
          stroke-width: 2;
          stroke-dasharray: 1200;
          stroke-dashoffset: 1200; /* la oculta */
        }
        .sgi-slide:nth-child(1) .sgi-welder {
          bottom: 0;
          right: 0%;
          width: 30%;
        }
        
        /* ---------- SLIDE 2 ---------- */
        .sgi-slide:nth-child(2) .sgi-title {
          top: 12%;
          left: 20%;
        }
        .sgi-slide:nth-child(2) .sgi-text {
          top: 20%;
          left: 15%;
          max-width: 500px;
        }
        .sgi-slide:nth-child(2) .sgi-hexagon {
          top: 25%;
          left: 15%;
          width: 16%;
        }
        .sgi-slide:nth-child(2) .sgi-line {
          top: -80px; /* la subes */
        }
        .sgi-slide:nth-child(2) .sgi-line path {
          stroke: #E9EDF2;
          stroke-width: 3;
          stroke-dasharray: 1200;
          stroke-dashoffset: 1200; /* la oculta */
        }
        .sgi-slide:nth-child(2) .sgi-worker {
          position: absolute;
          top: 0;
          right: 10%;
          width: 20%;
          height: auto;
        }
        
        /* ---------- SLIDE 3 ---------- */
        .sgi-slide:nth-child(3) .sgi-title {
          top: 12%;
          left: 18%;
        }
        .sgi-slide:nth-child(3) .sgi-text {
          top: 15%;
          left: 18%;
          max-width: 500px;
        }
        .sgi-slide:nth-child(3) .sgi-hexagon {
          top: 26%;
          left: 18%;
          width: 15%;
        }
        .sgi-slide:nth-child(3) .sgi-line {
          top: -40PX;
        }
        .sgi-slide:nth-child(3) .sgi-line path {
          stroke: #E9EDF2;
          stroke-width: 4;
          stroke-dasharray: 1200;
          stroke-dashoffset: 1200; /* la oculta */
        }
        .sgi-slide:nth-child(3) .sgi-welder {
          bottom: 17%;
          right: 10%;
          width: 25%;
        }
        
        /* ---------- SLIDE 4 ---------- */
        .sgi-slide:nth-child(4) .sgi-title {
          top: 12%;
          left: 18%;
        }
        .sgi-slide:nth-child(4) .sgi-text {
          top: 15%;
          left: 18%;
          max-width: 500px;
        }
        .sgi-slide:nth-child(4) .sgi-hexagon {
          top: 26%;
          left: 18%;
          width: 15%;
        }
        .sgi-slide:nth-child(4) .sgi-line {
          top: -40PX;
        }
        .sgi-slide:nth-child(4) .sgi-line path {
          stroke: #E9EDF2;
          stroke-width: 5;
          stroke-dasharray: 1200;
          stroke-dashoffset: 1200; /* la oculta */
        }
        .sgi-slide:nth-child(4) .sgi-welder {
          bottom: 16%;
          right: 0%;
          width: 40%;
          
         
        }
        
        /* ---------- SLIDE 5 ---------- */
        .sgi-slide:nth-child(5) .sgi-title {
          top: 12%;
          left: 18%;
        }
        .sgi-slide:nth-child(5) .sgi-text {
          top: 15%;
          left: 18%;
          max-width: 500px;
        }
        .sgi-slide:nth-child(5) .sgi-hexagon {
          top: 26%;
          left: 18%;
          width: 15%;
        }
        .sgi-slide:nth-child(5) .sgi-line {
          top: -40PX;
        }
        .sgi-slide:nth-child(5) .sgi-line path {
          stroke: #E9EDF2;
          stroke-width: 6;
          stroke-dasharray: 1200;
          stroke-dashoffset: 1200; /* la oculta */
        }
        .sgi-slide:nth-child(5) .sgi-welder {
          bottom: 19%;
          right: 5%;
          width: 40%;
        }


/* ==========================
   Estilos para el formulario SGI
========================== */

        .sgi-cv-form {
          max-width: 600px;
          margin: 20px auto;
          padding: 20px;
          background: #f9f9f9;
          border: 1px solid #ddd;
          border-radius: 6px;
        }
        
        .sgi-cv-form label {
          display: block;
          font-weight: 600;
          margin-top: 12px;
          margin-bottom: 4px;
          color: #333;
        }
        
        .sgi-cv-form input[type="text"],
        .sgi-cv-form input[type="email"],
        .sgi-cv-form input[type="file"],
        .sgi-cv-form textarea {
          width: 100%;
          padding: 8px 10px;
          border: 1px solid #ccc;
          border-radius: 4px;
          font-size: 14px;
          box-sizing: border-box;
        }
        
        .sgi-cv-form textarea {
          resize: vertical;
        }
        
        .sgi-cv-form button {
          display: inline-block;
          margin-top: 15px;
          padding: 10px 18px;
          background: #096bc2;
          color: #fff;
          border: none;
          border-radius: 4px;
          font-size: 15px;
          cursor: pointer;
          transition: background 0.3s ease;
        }
        
        .sgi-cv-form button:hover {
          background: #074a85;
        }
        
        /* Mensaje de éxito */
        .sgi-success {
          margin-top: 20px;
          padding: 12px 15px;
          background: #e6f7e6;
          color: #2e7d32;
          border: 1px solid #2e7d32;
          border-radius: 4px;
          font-weight: 500;
        }
        
/* === Trabaja con Nosotros === */
        .tn-grid {
          display: grid;
          grid-template-columns: 1fr 1fr 2fr; /* izquierda - centro - derecha */
          gap: 20px;
          align-items: center;
        
          background: #243057; /* Fondo azul institucional */
          color: white;
        }
        
        .tn-col img {
          max-width: 100%;
          height: auto;
          display: block;
        }
        
        .tn-center {
          text-align: center;
        }
        
        .tn-title {
          font-size: 32px;
          font-weight: bold;
          margin-bottom: 15px;
          text-transform: uppercase;
        }
        
        .tn-intro {
          font-size: 16px;
          margin-bottom: 25px;
          line-height: 1.6;
        }
        
        /* El formulario ya lo tienes con estilos */
        .tn-center .sgi-cv-form {
          background: #fff;
          color: #333;
          border-radius: 8px;
          padding: 20px;
          max-width: 500px;
          margin: 0 auto;
        }
        
/* === Sección Trabaja con Nosotros === */
        .trabaja-nosotros {
          background: #243057; /* Azul de fondo */
          color: white;
        
        }
        
        /* Encabezado fuera del grid */
        .tn-header {
          text-align: center;
          margin-bottom: 40px;
        }
        
        .tn-header .tn-title {
          font-size: 36px;
          font-weight: bold;
          text-transform: uppercase;
          margin-bottom: 15px;
        }
        
        .tn-header .tn-intro {
          font-size: 18px;
          line-height: 1.6;
          max-width: 800px;
          margin: 0 auto;
        }
        
        /* Grid principal */
        .tn-grid {
          display: grid;
          grid-template-columns: 1fr 1fr 2fr; /* izquierda - centro - derecha */
          gap: 50px;
          align-items: stretch; /* 👈 fuerza la altura igual en todas */
          position: relative;
        }
        
        /* Columnas */
        .tn-col {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .tn-left img,
        .tn-right img {
          width: 100%;
                    
          object-fit: cover; /* recorta sin deformar */
        }
        
        /* Columna central con formulario */
        .tn-center {
          background: #fff;
          color: #333;
          border-radius: 8px;
          padding: 30px;
          max-width: 500px;
          margin: auto;
        }
        
        /* Responsive */
        @media (max-width: 992px) {
          .tn-grid {
            grid-template-columns: 1fr; /* stack en mobile */
          }
          .tn-right img {
            display: none; /* ocultamos la imagen derecha en móviles */
          }
        }
        
/* =====================
Sección Trabaja con Nosotros
===================== */
        .trabaja-nosotros .tn-header {
          text-align: left;             /* alinear todo a la izquierda */
          max-width: 900px;             /* ancho máximo del bloque */
             margin: 0 0 0 10%;
        }
        
        .trabaja-nosotros .tn-title {
          font-size: 36px;
          font-weight: 700;
          color: #ffffff; /* título en blanco */
          margin-bottom: 20px;
        }
        
        .trabaja-nosotros .tn-intro {
          font-size: 18px;
          line-height: 1.6;
          color: #ffffff; /* párrafo en blanco */
          margin: 0;
          font-family: 'Square721 Roman';
          padding-bottom: 60px;
          width: 650px;
        }
        
        /* Título */
        .tn-title {
          font-family: 'Futura Md BT', sans-serif;
          font-size: 42px;
          text-transform: uppercase;
          color: #ffffff;
          margin-bottom: 15px;
        }
        
        /* Párrafo introductorio */
        .tn-intro {
          font-family: 'Square721 Roma', sans-serif;
          font-size: 18px;
          line-height: 1.6;
          color: #ffffff;
          max-width: 800px;
          margin: 0; /* quitar márgenes extra */
        }
        
        .tn-intro strong {
          font-weight: 700; /* resaltar palabras clave */
        }
        
        /* Eliminar la línea corta encima del título */
        .trabaja-nosotros .tn-title::before {
          content: none !important;
        }
        
        /* Mantener la línea larga superior */
        .trabaja-nosotros::before {
          content: "";
          display: block;
          height: 4px; /* Grosor de la línea */
          background: #97989a; /* Color blanco de la línea */
          margin-bottom: 30px;
        }
        
        /* Asegurar que no quede espacio en blanco */
        .trabaja-nosotros {
          background: #243057; /* tu azul de fondo */
          padding-top: 40px; /* ajusta según lo necesites */
        }
        
        /* Columna izquierda */
        .tn-col-left {
          display: flex;
          justify-content: center;   /* centra horizontal */
          
        }
        
        .tn-col-left img {
          max-width: 100%;
        
          object-fit: none;          /* no recorta ni estira */
          display: block;
        }
        
        /* Columna derecha */
        .tn-col-right {
          position: relative;
        }
        
        .tn-col-right img {
          position: absolute;
          top: 0;            /* sobresale hasta arriba */
          bottom: 0;         /* llega hasta abajo */
          right: 0;
          width: auto;
          height: 100%;
          object-fit: cover; /* asegura que cubra toda la altura */
          z-index: 2;
        }
        
        .tn-left {
            align-items: flex-start;   /* la imagen queda arriba */
        }
        
        /* Columna central (formulario) */
        .tn-center {
          display: flex;
          align-items: flex-start;   /* formulario pegado arriba */
          justify-content: center;   /* centrado horizontalmente */
        }
        
        /* Alinear todo arriba dentro del grid */
        .tn-grid {
          align-items: start !important;
        }
        
        /* Columna izquierda (imagen pegada arriba) */
        .tn-left {
          display: flex;
          align-items: flex-start !important;
        }
        
        /* Columna central (wrapper del formulario): sin padding ni márgenes */
        .tn-center {
          display: flex !important;
          align-items: flex-start !important;   /* pega el contenido arriba */
          justify-content: center !important;   /* centrado horizontal */
          padding: 0 !important;
          margin: 0 !important;
          background: transparent !important;   /* el fondo blanco déjalo al form */
          border-radius: 0 !important;
        }
        
        /* Formulario: aquí sí el padding; sin margen superior */
        .tn-center .sgi-cv-form {
          margin-top: 0 !important;
          background: #fff !important;
          border-radius: 8px;
          padding: 20px 24px !important;
        }
        
        /* Por si quedaba un margen del propio form */
        .sgi-cv-form {
          margin: 0 auto 20px auto !important;  /* quita el margen-top */
        }
        
        /* Imagen izquierda sobresaliendo hasta el menú */
        .tn-left {
          position: relative;
        }
        
        .tn-left img {
          position: absolute;
          top: 0;             /* que empiece arriba del contenedor */
          left: 0;
          height: 100%;       /* ocupar toda la altura disponible */
          width: auto;        /* respeta proporción */
          object-fit: cover;  /* no deforma */
          z-index: 3;         /* por encima del fondo */
        }
        
        /* Ajustar el grid para que no tape la imagen izquierda */
        .tn-grid {
          position: relative;
          z-index: 2; /* grid queda por debajo */
        }
        🔧 Si quieres que solo suba hasta justo debajo del menú (y no lo tape), puedes darle un margen-top negativo en vez de absolute:
        
        css
        Copiar código
        .tn-left img {
          margin-top: -60px;   /* ajusta este valor a la altura del header */
          width: 100%;
          height: auto;
        }
        
        /* Forzar que el contenedor no limite */
        .trabaja-nosotros {
          position: relative;    /* referencia para el posicionamiento absoluto */
          overflow: visible;     /* permite que sobresalga */
        }
        
        
        
        /* Columna izquierda */
        .tn-left {
          position: relative;
          overflow: visible !important; /* aseguramos que no recorte */
        }
        
        /* Imagen izquierda */
        .tn-left img {
          position: absolute !important;
         
          left: 0;
          width: auto;
          height: calc(100% + 80px); /* crecer para compensar lo subido */
          object-fit: contain;
          z-index: 5;          /* encima del grid */
        }
        
        /* Imagen izquierda */
        .tn-left {
          position: relative;
          overflow: visible !important; /* que no recorte la imagen */
        }
        
        .tn-left img {
          position: relative;   /* la dejamos en flujo normal */
         
          max-width: 100%;      /* que no sobrepase el ancho de su columna */
          height: auto;         /* mantiene proporción */
        
        }
        
        .tn-right img {
          position: relative;   /* la dejamos en flujo normal */
          margin-top: -315px;    /* súbela hasta que toque el menú (ajusta este valor) */
          max-width: 100%;      /* que no sobrepase el ancho de su columna */
          height: auto;         /* mantiene proporción */
          object-fit: contain;  /* no recorta */
        }
        
        /* === Formulario CV (ajustes finales) === */
        .sgi-cv-form {
          max-width: 600px;
          margin: 30px auto 20px auto;   /* 👈 margen superior más grande para separarlo del párrafo */
          padding: 25px;
          background: #fff;
          border: 2px solid #00bfff;     /* 👈 borde celeste */
          border-radius: 8px;
          box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* efecto elegante */
        }
        
        /* Etiquetas alineadas a la izquierda */
        .sgi-cv-form label {
          display: block;
          text-align: left;     /* 👈 fuerza alineación izquierda */
          font-weight: 600;
          margin-top: 12px;
          margin-bottom: 6px;
          color: #243057;       /* azul institucional */
          font-size: 15px;
        }
        
        /* Inputs y textarea */
        .sgi-cv-form input[type="text"],
        .sgi-cv-form input[type="email"],
        .sgi-cv-form input[type="file"],
        .sgi-cv-form textarea {
          width: 100%;
          padding: 10px 12px;
          border: 1px solid #ccc;
          border-radius: 4px;
          font-size: 14px;
          box-sizing: border-box;
        }
        
        /* Botón */
        .sgi-cv-form button {
          display: block;
          width: 100%;              /* que ocupe todo el ancho */
          margin-top: 20px;
          padding: 12px;
          background: #096bc2;
          color: #fff;
          border: none;
          border-radius: 4px;
          font-size: 16px;
          cursor: pointer;
          transition: background 0.3s ease;
        }
        
        .sgi-cv-form button:hover {
          background: #074a85;
        }
        
/* ===== Collage CERFOM ================================================= */
        .cerfom-collage {
          width: 100%;
          display: flex;
          flex-direction: column;
          gap: 0px;
        }
        
        .cerfom-collage .collage-row {
          display: flex;
          gap: 12px;
          justify-content: center;
        }
        
        .cerfom-collage .collage-row img {
          width: 100%;
          height: 100%;
          object-fit: cover;
         
          transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        /* Hover efecto */
        .cerfom-collage .collage-row img:hover {
          transform: scale(1.05);
          box-shadow: 0 4px 16px rgba(0,0,0,0.4);
        }
        
        /* Texto central */
        .cerfom-collage .collage-text {
          background: #2a344f; /* color corporativo */
          color: #fff;
          text-align: center;
        
        }
        
        .cerfom-collage .collage-text h2 {
          font-size: 2rem;
          font-weight: 700;
          margin: 0;
          line-height: 1.4;
          text-transform: uppercase;
        }
        
        /* Grid de 3 imágenes (a1, a2, a3) */
        .cerfom-collage .a-group {
          display: grid;
          grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
          gap: 50px; /* espacio entre imágenes */
          margin: 0 auto;
          max-width: 2000px; /* ancho máximo centrado */
          padding: 50px 20px;
        }
        
        .cerfom-collage .a-group img {
          width: 100%;
          height: auto;
          object-fit: cover;
          border-radius: 4px;
          transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        /* Hover */
        .cerfom-collage .a-group img:hover {
          transform: scale(1.05);
          box-shadow: 0 4px 16px rgba(0,0,0,0.4);
        }
        
        /* Grid de 5 imágenes (b1–b5) */
        .cerfom-collage .b-group {
          display: grid;
          grid-template-columns: repeat(5, 1fr); /* 5 columnas iguales */
          gap: 0px;
          margin: 0 auto;
          min-width: 100%;
          
        }
        
        .cerfom-collage .b-group img {
          width: 100%;
          height: auto;
          object-fit: cover;
          
          transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        /* Hover */
        .cerfom-collage .b-group img:hover {
          transform: scale(1.05);
          box-shadow: 0 4px 16px rgba(0,0,0,0.4);
        }
        
        /* Responsive: en pantallas pequeñas 2 columnas */
        @media (max-width: 900px) {
          .cerfom-collage .b-group {
            grid-template-columns: repeat(2, 1fr);
          }
        }
        
        /* Responsive: en móviles 1 columna */
        @media (max-width: 500px) {
          .cerfom-collage .b-group {
            grid-template-columns: 1fr;
          }
        }
        
        /* Grid de 3 imágenes (d1–d3) */
        .cerfom-collage .d-group {
          display: grid;
          grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
          gap: 12px;
          margin: 0 auto;
          max-width: 2000px;
          padding: 20px;
        }
        
        .cerfom-collage .d-group img {
          width: 100%;
          height: auto;
          object-fit: cover;
          border-radius: 4px;
          transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        /* Hover */
        .cerfom-collage .d-group img:hover {
          transform: scale(1.05);
          box-shadow: 0 4px 16px rgba(0,0,0,0.4);
        }
        
        /* Responsive: en móviles se apila */
        @media (max-width: 768px) {
          .cerfom-collage .d-group {
            grid-template-columns: 1fr;
          }
        }
        
        /* Aplica a todas las filas de collage */
        .cerfom-collage .collage-row img {
          width: 100%;
          height: 550px; /* 🔹 alto fijo para todas */
          object-fit: cover; /* rellena sin deformar */
        
          transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        /* Hover */
        .cerfom-collage .collage-row img:hover {
          transform: scale(1.05);
          box-shadow: 0 4px 16px rgba(0,0,0,0.4);
        }
        img {
            border-radius: 0px;
        }
        
        /* Franja de texto: alineada a la izquierda y color #929396 */
        .cerfom-collage .collage-text{
          background:#fff !important;
          color:#929396 !important;        /* <- color solicitado */
          display:flex;
          justify-content:flex-start;      /* alineación a la izquierda */
          align-items:center;
        
          margin:0;
          border-radius:0;
              padding: 20px 100px;
        }
        
        .cerfom-collage .collage-text h2{
          margin:0;
          text-align:left;                 /* texto a la izquierda */
          text-transform:uppercase;
          font-weight:900;
          letter-spacing:.04em;
          line-height:.95;
          font-size: clamp(28px, 6.8vw, 96px);
          font-family: "Futura Md BT","Montserrat","Poppins",sans-serif;
        }
        
        /* Franja texto: izquierda + color #929396 forzado */
        .cerfom-collage .collage-text{
          background:#fff !important;
          display:flex;
          justify-content:flex-start !important;
          align-items:center;
        
          margin:0;
          border-radius:0;
        }
        
        .cerfom-collage .collage-text h2,
        .cerfom-collage .collage-text h2 span{
          color:#929396 !important;   /* <- aquí se fuerza el color */
          text-align:left !important;
          margin:0;
          text-transform:uppercase;
          font-weight:900;
          letter-spacing:.04em;
          font-family: 'Futura Md BT', sans-serif;
          font-size: 66px;
          line-height: 75px;
        }
        
        /* ===== Fila 4 (d-group) full-bleed, sin espacios ===== */
        section.cerfom-collage .d-group{
          /* romper el contenedor y ocupar todo el viewport */
          width: 100vw !important;
          margin-left: calc(50% - 50vw) !important;
          margin-right: calc(50% - 50vw) !important;
        
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 0 !important;         /* sin separación entre columnas */
          padding: 0 !important;     /* sin padding */
        }
        
        section.cerfom-collage .d-group img{
          display: block;
          width: 100% !important;
          height: var(--row-h-d, 560px) !important;  /* ajusta si la quieres más alta/baja */
          object-fit: cover;
          border-radius: 0 !important;               /* bordes rectos para que junten perfecto */
          box-shadow: none !important;
          transition: none;                          /* sin “zoom” al hover en esta fila */
        }
        
        /* Responsive: apila en pantallas pequeñas (opcional) */
        @media (max-width: 768px){
          section.cerfom-collage .d-group{
            grid-template-columns: 1fr;
          }
        }
        
        /* Fila 4 full-bleed, sin saltos en hover */
        section.cerfom-collage .d-group{
          width: 100vw !important;
          margin-left: calc(50% - 50vw) !important;
          margin-right: calc(50% - 50vw) !important;
        
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 0 !important;
          padding: 0 !important;
          align-items: stretch;
        }
        
        /* contenedor que “sujeta” la imagen */
        section.cerfom-collage .d-group .tile{
          position: relative;
          height: var(--row-h-d, 560px); /* ajusta si la quieres más alta/baja */
          overflow: hidden;              /* clave: no deja que el scale cambie el layout */
          margin: 0;
        }
        
        /* imagen: rellena el contenedor y solo ella escala */
        section.cerfom-collage .d-group .tile > img{
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        
          backface-visibility: hidden;   /* evita “líneas” por antialiasing */
          will-change: transform;
          transform-origin: 50% 50%;
          transition: transform .35s ease, filter .35s ease;
        }
        
        /* hover sin desplazar nada */
        section.cerfom-collage .d-group .tile:hover > img{
          transform: scale3d(1.06, 1.06, 1);
          filter: brightness(0.98);
        }
        
/* =============== CERTIFICACIONES – Sección completa =============== */
        .cerfom-certificaciones{
          position: relative;
          width: 100vw;
          margin-left: calc(50% - 50vw);  /* full-bleed */
          margin-right: calc(50% - 50vw);
          overflow: hidden;
        }
        
        /* Fondo con la imagen de colores */
        .cerfom-certificaciones .cert-bg{
          position: absolute;
          inset: 0;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          /* Si quieres bajar intensidad para que el texto resalte, baja la opacidad: */
          /* opacity: .9; */
        }
        
        /* Contenedor interno centrado */
        .cerfom-certificaciones .cert-wrap{
          position: relative;
          max-width: 1280px;
          margin: 0 auto;
        
        }
        
        /* Tarjeta gris del contenido */
        .cerfom-certificaciones .cert-card{
          background: #f3f4f6;           /* gris solicitado */
          border-radius: 16px;
          padding: clamp(24px, 4vw, 56px);
          box-shadow: 0 10px 30px rgba(0,0,0,.08);
        }
        
        /* Encabezado: título + párrafo separados */
        .cerfom-certificaciones .cert-header h1{
          margin: 0 0 12px;
          font-size: clamp(28px, 4.5vw, 48px);
          line-height: 1.1;
          font-weight: 800;
          color: var(--cerfom-topbar, #2a344f);
          text-transform: uppercase;
          letter-spacing: .02em;
        }
        
        .cerfom-certificaciones .cert-header p{
          margin: 0 0 28px;
          font-size: clamp(15px, 1.3vw, 18px);
          line-height: 1.6;
          color: #555;                   /* párrafo aparte, tono gris medio */
        }
        
        /* Grid de logos (cargar uno a uno) */
        .cerfom-certificaciones .cert-logos{
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
          margin-bottom: 250px;
          align-items: center;
        }
        
        /* Tarjeta de cada logo */
        .cerfom-certificaciones .logo{
          background: #fff;
          border-radius: 12px;
        
          min-height: 110px;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 14px rgba(0,0,0,.06);
          transition: transform .25s ease, box-shadow .25s ease;
        }
        .cerfom-certificaciones .logo:hover{
          transform: translateY(-2px);
          box-shadow: 0 10px 24px rgba(0,0,0,.10);
        }
        
        /* Imagen del logo: no se deforma */
        .cerfom-certificaciones .logo img{
          display: block;
          max-width: 100%;
          max-height: 72px;              /* altura uniforme */
          object-fit: contain;
        }
        
        /* Ajustes responsive */
        @media (max-width: 640px){
          .cerfom-certificaciones .cert-card{ border-radius: 10px; }
          .cerfom-certificaciones .logo{ min-height: 90px; }
          .cerfom-certificaciones .logo img{ max-height: 58px; }
        }
        
        /* ================================
           CERTIFICACIONES – Tipos & Logos
           ================================ */
        
        /* Tarjeta general gris (ya la tienes; la dejo afinada) */
        .cerfom-certificaciones .cert-card{
          background: #f3f5f7;                 /* gris limpio */
          border-radius: 18px;
        
          box-shadow: 0 12px 34px rgba(0,0,0,.08);
        }
        
        /* ---------- Título y párrafo ---------- */
        .cerfom-certificaciones .cert-header h1{
          margin: 0 0 14px;
          text-transform: uppercase;
          font-family: "Futura Md BT","Montserrat","Poppins",sans-serif;
        
          letter-spacing: .02em;
          line-height: .98;
          color: #2a344f;                      /* azul corporativo oscuro */
          font-size: clamp(28px, 5vw, 56px);   /* responsive */
          font-size: 30px;
        }
        
        /* Variante si alguna vez lo quieres centrado: añade .is-centered a .cert-header */
        .cerfom-certificaciones .cert-header.is-centered h1,
        .cerfom-certificaciones .cert-header.is-centered p{
          text-align: center;
        }
        
        .cerfom-certificaciones .cert-header p{
          margin: 0 0 28px;
          color: #6b7280;                      /* gris medio para texto */
          font-weight: 500;
          font-size: clamp(14px, 1.35vw, 18px);
          line-height: 1.65;
          max-width: 64ch;
        }
        
        /* ---------- Grid de logos ---------- */
        .cerfom-certificaciones .cert-logos{
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        
          align-items: stretch;
        }
        
        /* Tarjeta de cada logo */
        .cerfom-certificaciones .logo{
          background: #fff;
          border-radius: 14px;
        
          min-height: 120px;                   /* alto uniforme de tarjeta */
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 6px 18px rgba(0,0,0,.06);
          transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
          border: 1px solid rgba(42,52,79,.06);/* borde suave */
        }
        
        /* Imagen del logo: que no se deforme y quede nítida */
        .cerfom-certificaciones .logo img{
          display: block;
          width: auto;
          height: clamp(48px, 7vw, 86px);      /* controla tamaño del logo */
          max-width: 100%;
          object-fit: contain;
          image-rendering: -webkit-optimize-contrast;
          filter: grayscale(12%) contrast(1.03);  /* look pro sutil */
          transition: filter .2s ease, transform .2s ease;
        }
        
        /* Hover: levanta, limpia gris y resalta */
        .cerfom-certificaciones .logo:hover{
          transform: translateY(-3px);
          box-shadow: 0 14px 28px rgba(0,0,0,.12);
          background: #ffffff;
        }
        .cerfom-certificaciones .logo:hover img{
          filter: none;
          transform: scale(1.02);
        }
        
        /* Ajustes finos en móvil */
        @media (max-width: 640px){
          .cerfom-certificaciones .cert-card{ border-radius: 12px; }
          .cerfom-certificaciones .logo{ min-height: 100px; }
          .cerfom-certificaciones .logo img{ height: 58px; }
        }
        
        /* Certificaciones: logos en 3 columnas fijas */
        .cerfom-certificaciones .cert-logos{
          display: grid;
          grid-template-columns: repeat(3, minmax(0,1fr)); /* 3 columnas */
        
          align-items: stretch;
        }
        
        /* Responsive: 2 columnas en tablet, 1 en móvil */
        @media (max-width: 992px){
          .cerfom-certificaciones .cert-logos{
            grid-template-columns: repeat(2, minmax(0,1fr));
          }
        }
        @media (max-width: 600px){
          .cerfom-certificaciones .cert-logos{
            grid-template-columns: 1fr;
          }
        }
        
        /* La sección puede quedarse como está; el grid lo aplicamos al card */
        .cerfom-certificaciones .cert-card{
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 columnas */
          gap: clamp(16px, 2vw, 28px);
        }
        
        /* El encabezado (título + párrafo) ocupa las 3 columnas */
        .cerfom-certificaciones .cert-header{
          grid-column: 1 / -1;
        }
        
        /* Los logos también, pero dentro van en 3 columnas */
        .cerfom-certificaciones .cert-logos{
          grid-column: 1 / -1;                          /* ancho completo del card */
          display: grid;
          grid-template-columns: repeat(3, minmax(0,1fr)); /* 3 columnas de logos */
        
        }
        
        /* Responsivo: 2 cols en tablet, 1 en móvil */
        @media (max-width: 992px){
          .cerfom-certificaciones .cert-card{
            grid-template-columns: 1fr 1fr;
          }
          .cerfom-certificaciones .cert-logos{
            grid-template-columns: 1fr 1fr;
          }
        }
        @media (max-width: 600px){
          .cerfom-certificaciones .cert-card{
            grid-template-columns: 1fr;
          }
          .cerfom-certificaciones .cert-logos{
            grid-template-columns: 1fr;
          }
        }
        
        /* ============================
           cerfom-certificaciones → 2 columnas
           ============================ */
        section.cerfom-certificaciones{
          /* full-bleed como ya lo traías */
          width: 100vw;
        
        
          /* GRID en 2 PARTES */
          display: grid;
          grid-template-columns: clamp(260px, 34vw, 520px) 1fr; /* izq / der */
          gap: clamp(16px, 2vw, 32px);
          align-items: start;
          position: relative;
          overflow: hidden;
        }
        
        /* Fondo detrás (sin cambiar tu estructura) */
        section.cerfom-certificaciones .cert-bg{
          position: absolute;
          inset: 0;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          z-index: 0;
        }
        
        /* El contenido (card, título, logos) va en la columna derecha */
        section.cerfom-certificaciones .cert-wrap{
          grid-column: 2;    /* 👉 fuerza a la 2ª columna */
          position: relative;
          z-index: 1;
          padding-top: 40px;
        }
        
        /* Responsive: apilar en una sola columna */
        @media (max-width: 900px){
          section.cerfom-certificaciones{
            grid-template-columns: 1fr; /* una columna */
          }
          section.cerfom-certificaciones .cert-wrap{
            grid-column: 1;
          }
        }
        
        /* Que se vea TODA la foto de fondo a lo ancho */
        section.cerfom-certificaciones{
          /* ya lo traías full-bleed */
          width: 100vw;
         
        
          /* altura mínima según la razón de la imagen (768/1529 ≈ 0.502) */
          min-height: calc(100vw * 0.502);  /* ajusta si tu imagen tiene otra razón */
        
          position: relative;
          overflow: hidden;
        }
        
        /* si usas el DIV .cert-bg para el fondo */
        section.cerfom-certificaciones .cert-bg{
          position: absolute; inset: 0;
          background-repeat: no-repeat;
          background-position: left center;   /* alinea a la izquierda */
          background-size: contain !important;/* muestra la foto completa */
          z-index: 0;
        }
        
        /* el contenido por encima del fondo */
        section.cerfom-certificaciones .cert-wrap{
          position: relative;
          z-index: 1;
        }
        
        /* Logos: estado base (sin fondo ni sombra) */
        .cerfom-certificaciones .logo{
          background: transparent !important;
          box-shadow: none !important;
          border: none;
          border-radius: 14px;            /* puedes bajar a 0 si no quieres redondeo */
          transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
        }
        
        /* Imagen del logo (mantén tu tamaño actual) */
        .cerfom-certificaciones .logo img{
          display:block;
          width:auto;
          max-width:100%;
          height: clamp(48px, 7vw, 86px);
          object-fit: contain;
          /* si antes tenías gris/contraste, puedes mantenerlo o quitarlo */
          /* filter: grayscale(12%) contrast(1.03); */
          transition: transform .2s ease, filter .2s ease;
        }
        
        /* Hover: aparece fondo blanco + sombra y leve lift */
        @media (hover: hover) {
          .cerfom-certificaciones .logo:hover{
            background: #fff !important;
            box-shadow: 0 14px 28px rgba(0,0,0,.12);
            transform: translateY(-3px);
          }
          .cerfom-certificaciones .logo:hover img{
            /* quita el gris si lo usaste arriba */
            filter: none;
            transform: scale(1.02);
          }
        }
        
        /* (Opcional) Usuarios con reduce-motion: sin animaciones */
        @media (prefers-reduced-motion: reduce){
          .cerfom-certificaciones .logo,
          .cerfom-certificaciones .logo img{ transition: none; }
        }
        
        /* ======= CERFOM – Certificaciones: card transparente ======= */
        section.cerfom-certificaciones .cert-wrap{
          background: transparent !important;
        }
        
        section.cerfom-certificaciones .cert-card{
          background: transparent !important;   /* quita el fondo gris */
          box-shadow: none !important;          /* sin sombra */
          border: 0 !important;                 /* sin bordes */
          /* conserva el espaciado interno para que no se rompa el layout */
        
          border-radius: 0;                      /* opcional: si no quieres esquinas redondeadas */
              width: 50%;
            padding: 0;
        }
        
        /* Por si el theme agrega pseudo-elementos con fondo/sombra */
        section.cerfom-certificaciones .cert-card::before,
        section.cerfom-certificaciones .cert-card::after{
          content: none !important;
        }
        
        /* Los logos ya estaban transparentes por defecto; mantenemos hover */
        .cerfom-certificaciones .logo{
          background: transparent !important;
          box-shadow: none !important;
          border: none !important;
        }
        @media (hover:hover){
          .cerfom-certificaciones .logo:hover{
            background: #fff !important;
            box-shadow: 0 14px 28px rgba(0,0,0,.12);
            transform: translateY(-3px);
          }
        }
        
        /* Logos: que ocupen toda la caja */
        .cerfom-certificaciones .cert-logos .logo{
          padding: 0 !important;        /* sin relleno */
          min-height: 100%;            /* ajusta la altura de la caja si la ves chica */
          display: block;
        }
        
        .cerfom-certificaciones .cert-logos .logo img{
          width: 100% !important;
          height: 100% !important;
          max-width: none !important;
          object-fit: contain;          /* NO recorta: respeta proporción del logo */
          object-position: center;
        }
        .cerfom-certificaciones .cert-logos{ display:grid; gap: clamp(14px,2vw,24px); }
        .cerfom-certificaciones .cert-row{ display:grid; gap: clamp(14px,2vw,24px); }
        .cerfom-certificaciones .cert-row.row-1{ grid-template-columns: repeat(3,1fr); }
        .cerfom-certificaciones .cert-row.row-2{ grid-template-columns: repeat(3,1fr); }
        .cerfom-certificaciones .cert-row.row-3{ grid-template-columns: repeat(4,1fr); } /* editable */
        
        /* Apilar los grupos (rows) uno debajo del otro */
        .cerfom-certificaciones .cert-card{
          display: grid !important;
          grid-template-columns: 1fr !important;  /* una sola columna */
        }
        
        .cerfom-certificaciones .cert-card > *{
          grid-column: 1 / -1;                    /* cualquier hijo ocupa el ancho completo */
        }
        
        /* El contenedor de filas: una sola columna (apila) */
        .cerfom-certificaciones .cert-logos{
          display: grid !important;
          grid-template-columns: 1fr !important;  /* apila rows */
          gap: clamp(14px, 2vw, 24px);
          margin-bottom: 250px;
        }
        
        /* Cada fila sigue siendo su propio grid interno */
        .cerfom-certificaciones .cert-row{ 
          display: grid; 
          gap: clamp(14px, 2vw, 24px);
        }
        
        /* Fila 1 → 3 columnas */
        .cerfom-certificaciones .cert-row.row-1{
          grid-template-columns: repeat(3, 1fr);
        }
        
        /* Fila 2 → 2 columnas */
        .cerfom-certificaciones .cert-row.row-2{
          grid-template-columns: repeat(3, 1fr);
        }
        
        /* Fila 3 (ajústala luego si quieres) */
        .cerfom-certificaciones .cert-row.row-3{
          grid-template-columns: repeat(4, 1fr);
        }
        
        /* Responsive (ejemplo) */
        @media (max-width: 992px){
          .cerfom-certificaciones .cert-row.row-3{ grid-template-columns: repeat(3,1fr); }
        }
        @media (max-width: 768px){
          .cerfom-certificaciones .cert-row.row-1{ grid-template-columns: repeat(2,1fr); }
          .cerfom-certificaciones .cert-row.row-2{ grid-template-columns: 1fr; }
          .cerfom-certificaciones .cert-row.row-3{ grid-template-columns: repeat(2,1fr); }
        }
        @media (max-width: 480px){
          .cerfom-certificaciones .cert-row.row-1,
          .cerfom-certificaciones .cert-row.row-2,
          .cerfom-certificaciones .cert-row.row-3{
            grid-template-columns: 1fr;
          }
        }
        
        /* === Fila 3 especial === */
        .cerfom-certificaciones .cert-row.row-3{
          /* 2 columnas: izquierda (Applus) + derecha (stack)  */
          grid-template-columns: minmax(200px, 1fr) 2fr;
          align-items: stretch;
        }
        
        /* Stack derecho: 2 columnas arriba; RedNegocios abajo ocupando ambas */
        .cerfom-certificaciones .logo-stack{
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: clamp(14px, 2vw, 24px);
          grid-auto-rows: minmax(120px, auto);
        }
        
        /* RedNegocios ocupa todo el ancho del stack (2 columnas) */
        .cerfom-certificaciones .logo-stack .logo--rednegocios{
          grid-column: 1 / -1;
        }
        
        /* Alturas coherentes (puedes subirlas si quieres logos más grandes) */
        .cerfom-certificaciones .cert-row.row-3 .logo,
        .cerfom-certificaciones .logo-stack .logo{
          min-height: 30%;
        }
        
        /* YA tenías los logos sin fondo/sombra por defecto y con hover: se reutilizan */
        
        /* Responsive */
        @media (max-width: 900px){
          .cerfom-certificaciones .cert-row.row-3{
            grid-template-columns: 1fr;   /* apila: Applus arriba, stack abajo */
          }
          .cerfom-certificaciones .logo-stack{
            grid-template-columns: 1fr 1fr;   /* mantiene 2 columnas dentro del stack */
          }
        }
        @media (max-width: 560px){
          .cerfom-certificaciones .logo-stack{
            grid-template-columns: 1fr;       /* en móvil muy chico, una sola columna */
          }
        }
        
        /* Fila 3: que el ítem izquierdo (Applus) estire a toda la altura */
        .cerfom-certificaciones .cert-row.row-3{
          align-items: stretch;                 /* ya lo tenías, lo reforzamos */
        }
        
        /* El figure de Applus ocupa el 100% de la altura del track */
        .cerfom-certificaciones .cert-row.row-3 > .logo{
          height: 100% !important;
          min-height: 0 !important;             /* evita que un min-height lo limite */
          padding: 0 !important;                 /* sin padding para no restar altura */
          display: block !important;
        }
        
        /* La imagen de Applus llena el alto del figure (sin recortar) */
        .cerfom-certificaciones .cert-row.row-3 > .logo img{
          width: 100% !important;
          height: 100% !important;
          max-width: none !important;
          max-height: none !important;
          object-fit: contain;                   /* respeta proporción; llena en altura */
          object-position: center;
        }
        
        /* ======== Fila 3: Layout como la referencia ======== */
        
        /* 2 columnas: izquierda angosta (Applus), derecha flexible (stack) */
        .cerfom-certificaciones .cert-row.row-3{
          grid-template-columns: clamp(90px, 10vw, 140px) 1fr;
          align-items: start;   /* que no iguale las alturas por defecto */
          gap: clamp(14px, 2vw, 24px);
        }
        
        /* Applus (1ª col): caja auto-alto, centrado y con aire */
        .cerfom-certificaciones .cert-row.row-3 > .logo{
          display: flex !important;
          align-items: center;
          justify-content: center;
         
          height: auto !important;
          min-height: 0 !important;
          background: transparent !important;
          box-shadow: none !important;
        }
        
        /* Applus: alto controlado (ni gigante ni enano) */
        .cerfom-certificaciones .cert-row.row-3 > .logo:first-child img{
          height: clamp(110px, 18vw, 180px) !important; /* ajusta 110–180 a gusto */
          width: auto !important;
          max-height: 100% !important;
          max-width: 100% !important;
          object-fit: contain;
          object-position: center;
        }
        
        /* Stack derecho: 2 columnas arriba, RedNegocios abajo a lo ancho */
        .cerfom-certificaciones .logo-stack{
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-auto-rows: auto;
          gap: clamp(12px, 1.8vw, 20px);
        }
        
        /* Todas las celdas del stack centradas y sin estirar el logo */
        .cerfom-certificaciones .logo-stack .logo{
          display: flex;
          align-items: center;
          justify-content: center;
          padding: clamp(6px, 1.5vw, 14px);
          background: transparent !important;
          box-shadow: none !important;
        }
        
        /* Tamaño de logos del top (SICEP y Senegocia) */
        .cerfom-certificaciones .logo-stack .logo--sicep img,
        .cerfom-certificaciones .logo-stack .logo--senegocia img{
          height: clamp(52px, 6vw, 90px) !important;
          width: auto !important;
          object-fit: contain;
        }
        
        /* RedNegocios ocupa todo el ancho de la fila inferior del stack */
        .cerfom-certificaciones .logo-stack .logo--rednegocios{
          grid-column: 1 / -1;
        }
        
        /* RedNegocios: un poco más alto, pero contenido */
        .cerfom-certificaciones .logo-stack .logo--rednegocios img{
          height: clamp(58px, 7vw, 110px) !important;
          width: 250px!important;
          object-fit: contain;
          
        }
        
        /* ===== Responsive ===== */
        @media (max-width: 900px){
          /* Apila: Applus arriba, stack abajo */
          .cerfom-certificaciones .cert-row.row-3{
            grid-template-columns: 1fr;
          }
        }
        @media (max-width: 560px){
          /* Dentro del stack, pasa a 1 columna en móviles chicos */
          .cerfom-certificaciones .logo-stack{
            grid-template-columns: 1fr;
          }
        }
        
        /* 1) El contenedor de la sección actúa como grid y no centra sus hijos */
        section.cerfom-certificaciones{
          display: grid;                 /* por si el theme no lo trae */
          grid-template-columns: 1fr;    /* mismo track, sin cambiar columnas */
          justify-items: start;          /* hijos alineados a la IZQ dentro del track */
        }
        
        /* 2) La caja de contenido se queda a la izquierda dentro del grid */
        section.cerfom-certificaciones .cert-wrap{
          width: clamp(680px, 60vw, 960px); /* ajusta el ancho que quieras */
          justify-self: start !important;   /* izquierda dentro del grid */
          margin: 0 !important;             /* elimina centrados heredados */
        }
        
        /* 3) Nada adentro se recentra */
        section.cerfom-certificaciones .cert-card{
          display: grid;
          justify-items: start;             /* hijos alineados a la izq */
        }
        section.cerfom-certificaciones .cert-header,
        section.cerfom-certificaciones .cert-header h1{
          text-align: left !important;
        }
        section.cerfom-certificaciones .cert-row{
          justify-content: start;           /* filas grid no centradas */
          justify-items: start;
        }
        section.cerfom-certificaciones .logo{
          margin: 0;                        /* evita márgenes auto */
          justify-self: start;              /* cada logo a la izq de su celda */
        }
        
        section.cerfom-certificaciones .cert-header, section.cerfom-certificaciones .cert-header h1 {
            margin-left: -50px;
            color: #616161;
        }
        
        /* ====== Base: alinear a la izquierda y facilitar control por logo ====== */
        .cerfom-certificaciones .cert-logos .cert-row{
          justify-items: start;         /* cada celda del grid a la IZQUIERDA */
          align-items: center;
        }
        .cerfom-certificaciones .cert-logos .logo{
          justify-self: start;          /* por si algún tema lo centra */
          text-align: left;
          /* variables por logo (ancho/alto). Cambia en cada selector más abajo */
          --w: auto;                    /* ancho por defecto */
          --h: auto;                    /* alto por defecto */
        }
        .cerfom-certificaciones .cert-logos .logo img{
          display: block;
          width: var(--w);              /* usa ancho si lo defines */
          height: var(--h);             /* o usa alto si lo prefieres */
          max-width: 100%;
          object-fit: contain;          /* no deforma el logo */
        }
        
        /* ====== Fila 1 (Boreal – ChileValora – DS10) ====== */
        .cerfom-certificaciones .row-1 .logo:nth-child(1){ /* Boreal */
          --w: 130px;
        }
        .cerfom-certificaciones .row-1 .logo:nth-child(2){ /* ChileValora */
          --w: 240px;
        }
        .cerfom-certificaciones .row-1 .logo:nth-child(3){ /* DS10 */
          --w: 110px;
        }
        
        /* ====== Fila 2 (MINTRAB – SENCE – ISO9001) ====== */
        .cerfom-certificaciones .row-2 .logo:nth-child(1){ /* MINTRAB */
          --w: 105px;
        }
        .cerfom-certificaciones .row-2 .logo:nth-child(2){ /* SENCE (texto grande) */
          --w: 250px;
        }
        .cerfom-certificaciones .row-2 .logo:nth-child(3){ /* ISO 9001 */
          --w: 220px;
        }
        
        /* ====== Fila 3 (Applus a la izquierda + stack derecha) ====== */
        .cerfom-certificaciones .row-3 > .logo:first-child{ /* Applus (vertical) */
          --h: 250px;                  /* para logos verticales es más cómodo por alto */
        }
        
        .cerfom-certificaciones .row-3 .logo-stack .logo--sicep{  /* SICEP */
          --w: 190px;
        }
        .cerfom-certificaciones .row-3 .logo-stack .logo--senegocia{ /* Senegocia */
          --w: 280px;
        }
        .cerfom-certificaciones .row-3 .logo-stack .logo--rednegocios{ /* RedNegocios */
          --w: 100px;
        }
        
        /* Opcional: espaciado más fino entre logos */
        .cerfom-certificaciones .cert-logos .logo { margin: 4px 0; }
        
        
/*===============CLIENTES========================*/

        /* ===== Variables base ===== */
        .cap-page{
          --brand:#2a344f;        /* azul corporativo oscuro */
          --muted:#929396;        /* gris del titular */
          --card:#ffffff;         /* fondo tarjetas */
          --shadow:0 8px 24px rgba(0,0,0,.08);
          --g: clamp(12px, 2vw, 24px);       /* gap/espaciado */
          --wrap: min(1100px, 94vw);         /* ancho útil */
          font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
        }
        
        /* ===== HERO ===== */
        .cap-hero{
          width:100%;
          aspect-ratio: 16/6;          /* alto responsivo */
          background-image: var(--bg);
          background-size: cover;
          background-position: center;
          position: relative;
          isolation:isolate;
        }
        .cap-hero::before{
          content:"";
          position:absolute; inset:0;
          /* si quieres un sutil overlay, descomenta: */
          /* background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,0)); */
        }
        
        /* ===== CONTENEDOR ===== */
        .cap-wrap{
          width:var(--wrap);
          margin-inline:auto;
        
        }
        
        /* ===== TRÍPTICO ===== */
        .cap-triptych{
          display:grid;
          grid-template-columns: repeat(3, 1fr);
          gap: clamp(12px, 1.4vw, 18px);
          margin-bottom: clamp(18px, 3vw, 28px);
        }
        .cap-triptych figure{ margin:0; }
        .cap-triptych img{
          width:100%; height: 290px;
          object-fit: cover; border-radius: 0px;
          box-shadow: var(--shadow);
        }
        
        /* ===== BLOQUE CLIENTES ===== */
        .cap-clientes{
          position:relative;
          background: var(--card);
          border-radius: 14px;
          box-shadow: var(--shadow);
          padding: clamp(16px, 3vw, 28px) clamp(16px, 3.2vw, 32px);
          margin-bottom: clamp(22px, 3.6vw, 40px);
        }
        
        /* Decoración lateral izquierda */
        .cap-clientes--with-deco::before{
          content:"";
          position:absolute;
          left:0; top:0; bottom:0;
          width: clamp(18px, 7vw, 90px);
          background: url('assets/img/deco-hex-left.png') center/contain no-repeat;
          opacity:.18;
          pointer-events:none;
        }
        
        /* Título pequeño */
        .cap-clientes__head{
          font-size: clamp(11px, 1.2vw, 12px);
          letter-spacing: .16em;
          color:#888;
          font-weight:700;
          text-transform: uppercase;
          margin-bottom: clamp(10px, 1.6vw, 14px);
        }
        
        /* Grid de logos (fluido) */
        .cap-clientes__grid{
          display:grid;
          grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
          gap: clamp(10px, 1.6vw, 16px) clamp(12px, 1.8vw, 18px);
          align-items: center;
        }
        .cap-clientes__grid img{
          width:100%;
          height: 38px;                 /* altura visual homogénea */
          object-fit: contain;
          filter: none;
          transition: transform .2s ease, filter .2s ease;
        }
        .cap-clientes__grid img:hover{
          transform: scale(1.05);
          filter: drop-shadow(0 3px 8px rgba(0,0,0,.15));
        }
        
        /* ===== TITULAR DESTACADO ===== */
        .cap-highlight{
          padding: clamp(24px, 5vw, 48px) 0;
        }
        .cap-highlight h2{
          margin:0;
          line-height:1.05;
          text-transform: uppercase;
          font-weight: 800;
          color: var(--muted);
          font-size: clamp(28px, 6vw, 52px);
          letter-spacing: .02em;
          margin-left: 100px;
            line-height: 75px;
            font-family: 'Futura Md BT', sans-serif;
        }
        
        /* ===== FOTO GRANDE ANCHA ===== */
        .cap-photo-wide{
          margin: 0;
          width:100%;
          display:block;
        }
        .cap-photo-wide img{
          width:100%;
          height: auto;
          display:block;
          object-fit: cover;
        }
        
        /* ===== RESPONSIVE ===== */
        @media (max-width: 900px){
          .cap-triptych img{ height: 240px; }
          .cap-clientes__grid img{ height: 34px; }
        }
        @media (max-width: 640px){
          .cap-triptych{
            grid-template-columns: 1fr;
          }
          .cap-triptych img{ height: 300px; }
          .cap-clientes--with-deco::before{ display:none; }
        }
        
        
        
        /* === CLIENTES – Tríptico de imágenes === */
        .cap-triptych {
          display: grid;
          grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
          gap: 20px; /* espacio entre imágenes */
          margin: 40px auto;
          max-width: 1200px; /* ancho centrado */
        }
        
        .cap-triptych figure {
          margin: 0;
          border-radius: 0px;
          overflow: hidden; /* que las imágenes no se salgan */
          box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        
        .cap-triptych img {
          width: 100%;
          height: 100%;
          max-height: 100%; /* ajusta según tu diseño */
          object-fit: cover; /* asegura que se vea bien sin deformarse */
          display: block;
          transition: transform 0.4s ease, box-shadow 0.4s ease;
        }
        
        .cap-triptych img:hover {
          transform: scale(1.05); /* zoom suave al hover */
          box-shadow: 0 6px 20px rgba(0,0,0,0.25);
        }
        /* ===== CLIENTES SECTION ===== */
        .clientes-section {
          position: relative;
          padding: 20px 20px;
          overflow: hidden;
        }
        
        .clientes-bg {
          position: absolute;
          inset: 0;
          background: url('/wp-content/uploads/bg-clientes.png') no-repeat center/cover;
          opacity: 0.15; /* efecto suave de fondo */
          z-index: 1;
        }
        
        .clientes-container {
          position: relative;
          z-index: 2;
          max-width: 1200px;
          margin: 0 auto;
          text-align: center;
        }
        
        .clientes-title {
              font-size: 45px;
            font-weight: 400;
            margin-bottom: 40px;
            color: #333;
            font-family: 'Futura Md BT', sans-serif;
            text-align: justify;
                padding-top: 50px;
            margin-left: -60px;
            z-index: -1;
        }
        
        /* GRID LOGOS */
        .clientes-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
          gap: 30px;
          align-items: center;
          justify-items: center;
        }
        
        .clientes-grid figure {
          margin: 0;
        }
        
        .clientes-grid img {
          max-width: 140px;
          max-height: 70px;
          object-fit: contain;
       
          transition: filter 0.3s ease, transform 0.3s ease;
        }
        
        .clientes-grid img:hover {
          filter: grayscale(0%);
          transform: scale(1.1);
        }
        
        /* ===== SECCIÓN DESTACADA FULL WIDTH ===== */
        .cap-highlight {
          width: 100vw;           /* ancho completo de la ventana */
          margin-left: calc(-50vw + 50%); /* anula el container centrado */
          margin-right: calc(-50vw + 50%);
          padding: 60px 20px;     /* espacio interno */
          
          text-align: start;
        }
        
        /* ===== CLIENTES EN GRID ===== */
        .cap-clientes {
          width: 100vw;
          margin-left: calc(-50vw + 50%); /* full width */
          margin-right: calc(-50vw + 50%);
          padding: 0px 0px;
        
          background: #fff; /* fondo blanco */
          margin-bottom: 0;
        }
        
        .clientes-grid-wrap {
          display: grid;
          grid-template-columns: 1fr 3fr; /* izquierda (panal/hex) y derecha (logos) */
          gap: 40px;
          align-items: start;
          max-width: 95%;
          margin: 0 0;
          padding-bottom: 50px;
        }
        
        .clientes-deco img {
          display: block;
          max-width: 100%;
          margin-bottom: 20px;
        }
        
        .clientes-contenido {
          text-align: left;
        }
        
        
        
        .clientes-logos {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
          gap: 30px;
          align-items: center;
          justify-items: center;
        }
        
        .clientes-logos figure {
          margin: 0;
        }
        
        .clientes-logos img {
          max-width: 130px;
          max-height: 60px;
          object-fit: contain;
  
          transition: filter 0.9s ease, transform 0.9s ease;
        }
        
        .clientes-logos img:hover {
          filter: grayscale(0%);
          transform: scale(1.4);
        }
        /* Contenedor del panal y hexágono */
        .clientes-deco {
          position: relative;
          margin: 0 !important;   /* eliminamos márgenes */
          padding: 0 !important;  /* eliminamos padding */
        }
        
        /* Imagen de panal (fondo) */
        .clientes-deco img[alt="Decoración panal"] {
          position: absolute;
          top: 0;
          left: 0;
          margin: 0;
          padding: 0;
          z-index: 1; /* queda detrás */
        }
        
        /* Imagen de hexágono (encima del panal) */
        .clientes-deco img[alt="Decoración hexágono"] {
          position: absolute;
          top: 0;
          left: 0;
          margin: 0;
          padding: 0;
          z-index: 2; /* se superpone */
          width: 65%;
          transform: translateY(20%); /* centrado perfecto */
        }
        
        /* El título por encima de todo */
        .clientes-title {
          position: relative;
          z-index: 10; /* más alto que panal y hexágono */
        }
        
        /* Panal más grande, sobresaliendo a la derecha */
        .clientes-deco img[alt="Decoración panal"] {
          position: absolute;
          top: 0;
          left: 0;
          width: 140% !important;       /* lo hacemos más ancho */
          height: auto !important;      /* mantiene proporción */
          max-width: none !important;   /* ignorar límite de lazyload */
          z-index: 1;
        }
        
        .cap-photo-wide {
          position: relative;
          overflow: hidden; /* evita que al crecer se salga */
        }
        
        .cap-photo-wide img {
          width: 100%;
          height: auto;
          display: block;
          object-fit: cover;
          transition: transform 1s ease; /* animación suave */
        }
        
        .cap-photo-wide img:hover {
          transform: scale(1.1); /* zoom al 110% */
        }
        
/* ================= Contacto ========================== */
.contacto-wrap {
  background: url('../img/bg-contacto.png') center/cover no-repeat;
  padding: 60px 0;
}

.contacto-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1200px;
  margin: auto;
  gap: 40px;
  align-items: center;
}

.contacto-form {
  background: rgba(255, 255, 255, 0.8);
  padding: 30px;
  border-radius: 8px;
}

.contacto-form h2 {
  font-size: 40px;
  margin-bottom: 20px;
  color: #337ab7;
  font-family: 'Futura Md BT', sans-serif;
  TEXT-TRANSFORM: UPPERCASE;
}

/* Inputs */
.contacto-form input,
.contacto-form textarea {
  width: 100%;
  margin-bottom: 15px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

/* Botón */
.contacto-form input[type="submit"] {
  background: #007bff;
  color: white;
  border: none;
  padding: 14px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.3s;
}
.contacto-form input[type="submit"]:hover {
  background: #0056b3;
}

/* Redes sociales */
.contacto-redes {
  text-align: center;
  color: #337ab7;
}
.contacto-redes p {
  margin-bottom: 20px;
  font-size: 25px;
  font-family: 'Futura Md BT', sans-serif;
  line-height: 30px;
}
.redes-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.redes-icons a {
  font-size: 28px;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  color: white;
}
.redes-icons .facebook { background: #3b5998; }
.redes-icons .instagram { background: #000; }
.redes-icons .whatsapp { background: #25D366; }

/* Mapa */
.contacto-mapa {
  margin-top: 40px;
}
.contacto-mapa iframe {
  width: 100%;
  border: none;
  height: 400px;
}

/* Responsive */
@media (max-width: 768px) {
  .contacto-container {
    grid-template-columns: 1fr;
  }
  .contacto-redes {
    margin-top: 30px;
  }
}

.contacto-form {
  background: rgba(255, 255, 255, 0.8);
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* sombra alrededor */
}

/* Quitar borde morado por defecto y aplicar el nuevo estilo en todo el sitio */
input:focus,
textarea:focus,
select:focus {
  outline: none; /* elimina el borde por defecto */
  border: 2px solid #028bd3; /* tu color personalizado */
  box-shadow: 0 0 6px rgba(2, 139, 211, 0.4); /* efecto de brillo */
}

/*=========================== INCIO ========================*/

/* =============================
   ESTRUCTURA GENERAL
============================= */
.container {
  width: min(100%, 95%);
  margin: 0 auto;
  padding: 0px 20px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* =============================
   HERO / SLIDER
============================= */
.cerfom-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.cerfom-hero img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* =============================
   FRASE PRINCIPAL
============================= */
.cerfom-frase {
  text-align: center;
  padding: 60px 20px;
  background: #f8f9fa;
}

.cerfom-frase h2 {
  font-size: 2.2rem;
  font-weight: 700;
  color: #37487e;
  margin-bottom: 20px;
}

.cerfom-frase h2 span {
  color: #028bd3;
}

.cerfom-frase p {
  max-width: 800px;
  margin: 0 auto 30px;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

.cerfom-frase .phva-img {
  max-width: 200px;
  margin-top: 20px;
}

/* =============================
   FRASE SECUNDARIA
============================= */
.cerfom-frase-secundaria {
  background: #028bd3;
  color: #fff;
  padding: 60px 20px;
}

.cerfom-frase-secundaria .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.frase-box {
  flex: 1;
  min-width: 300px;
}

.frase-box p {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.frase-box span {
  font-size: 1rem;
  font-style: italic;
}

.frase-img {
  flex: 1;
  text-align: center;
}

.frase-img img {
  max-width: 240px;
  margin: 10px;
}

/* =============================
   GALERÍA DE IMÁGENES
============================= */
.cerfom-galeria {
  padding: 60px 20px;
  background: #f4f4f4;
}

.cerfom-galeria .galeria-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cerfom-galeria .galeria-item img:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* =============================
   NUESTRA EMPRESA
============================= */


.cerfom-empresa .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}

.empresa-texto {
  flex: 2;
  min-width: 300px;
}

.empresa-texto h2 {
  font-size: 32px;
    margin-bottom: 20px;
    font-weight: 400;
    color: #1a1a1a;
    font-family: 'Futura Md BT', sans-serif;
}

.empresa-texto p {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 20px;
  color: #444;
  line-height: 20px;
}

.empresa-img {
  flex: 1;
  min-width: 280px;
  text-align: center;
}

.empresa-img img {
  max-width: 250px;

}

/* =============================
   ESTADÍSTICAS
============================= */
        .cerfom-estadisticas {
          background: #37487e;
          color: #fff;
          text-align: center;
          padding: 80px 20px;
        }
        
        .cerfom-estadisticas .stat {
          background: rgba(255, 255, 255, 0.1);
          padding: 30px 20px;
          border-radius: 10px;
          transition: transform 0.3s ease, box-shadow 0.3s ease;
          width: 200px;
          height: 200px;
          border: 1px white solid;
        }
        
        .cerfom-estadisticas .stat:hover {
          transform: translateY(-5px);
          box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
        }
        
        .cerfom-estadisticas .numero {
          font-size: 2rem;
          font-weight: 700;
          color: #f7b500;
          display: block;
          margin-bottom: 10px;
        }
        
        .cerfom-estadisticas p {
          margin: 0;
          font-size: 1rem;
        }
        
        /* ===== Sección Aprendizaje ===== */
        .cerfom-aprendizaje {
          padding: 0px 20px;
          background: #fff;
        }
        
        .cerfom-aprendizaje .container {
          max-width: 100%;
          margin: 0 auto;
          margin-bottom: 50px;
        }
        
        .aprendizaje-titulo {
          font-size: 42px;
            font-weight: 800;
            text-align: start;
            color: #97989a;
            margin: 50px 0;
            line-height: 1.3;
            font-family: 'Futura Md BT', sans-serif;
        }
        
        .aprendizaje-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 40px;
          align-items: start;
        }
        
        .aprendizaje-img {
          width: 100%;
          border-radius: 6px;
          display: block;
        }
        
        .aprendizaje-col p {
          font-size: 18px;
          line-height: 1.6;
          color: #222;
          margin-bottom: 20px;
          width: 85%;
        }
        
        .aprendizaje-logo img {
          max-width: 120px;
          display: block;
        }
        
        .aprendizaje-logo {
          text-align: right;   /* Alinea el logo a la derecha */
          margin-top: 20px;
        }
        
        .aprendizaje-logo img {
          max-width: 200px;    /* Ajusta el tamaño del logo (puedes subir a 220px si lo quieres más grande) */
          width: 100%;
          height: auto;
        }
        
        /* Columna derecha: texto + logo */
        .aprendizaje-col {
          display: flex;
          flex-direction: column;     /* texto arriba, logo abajo */
          justify-content: space-between;
        }
        
        /* El logo alineado a la derecha */
        .aprendizaje-logo {
          display: flex;
          justify-content: flex-end;  /* mueve el contenido a la derecha */
          margin-top: 20px;
        }
        
        .aprendizaje-logo img {
          max-width: 220px;   /* ajusta el tamaño del logo */
          width: 100%;
          height: auto;
        }
        
        /* Animación inicial de aparición */
        .aprendizaje-img,
        .aprendizaje-logo img {

          transform: scale(0.95); /* un poco más chico al inicio */
          transition: opacity 1s ease, transform 0.6s ease;
        }
        
        /* Cuando carguen en pantalla (usando clase helper .show si usas JS o lazyload) */
        .aprendizaje-img.lazyloaded,
        .aprendizaje-logo img.lazyloaded {
          opacity: 1;
          transform: scale(1);
        }
        
        /* Hover: agrandar suavemente sin mover las demás cajas */
        .aprendizaje-img:hover,
        .aprendizaje-logo img:hover {
          transform: scale(1.1);  /* agranda un poco */
          transition: transform 0.4s ease;
          z-index: 2; /* que quede por encima */
        }
        
        .cerfom-estadisticas {
         position: relative !important;
         height: 850px !important;
         padding: 100px 10% 20px 10% !important;
         color: #fff !important;
         background: url(/wp-content/themes/cerfom2-child/assets/img/fondo-estadis.jpg) no-repeat top center !important;
         background-size: cover !important;
        }
        
        .cerfom-estadisticas {
          display: flex;
          flex-direction: column;
          align-items: center;   /* centra horizontal */
          
          text-align: center;
        }

.v-celeste {
  position: absolute;
  top: 55%;            /* al centro */
  left: 50%;
  transform: translate(-50%, -50%); /* centrar exacto */
  width: 100%;
  max-width: 100%;   /* controla el ancho */
  height: auto;
  background: url("/wp-content/themes/cerfom2-child/assets/img/v-celeste.png") no-repeat center;
  background-size: contain;
  z-index: 2;          /* para que quede sobre el fondo */
  pointer-events: none; /* no bloquear clics */
  height: 100%;
}

/* Colores específicos para cada stat */
.estadisticas-grid .stat:nth-child(1) {
  background: rgba(79, 84, 139, 0.7);   /* #4f548b */
}

.estadisticas-grid .stat:nth-child(2) {
  background: rgba(106, 125, 167, 0.7); /* #6a7da7 */
}

.estadisticas-grid .stat:nth-child(3) {
  background: rgba(124, 164, 190, 0.7); /* #7ca4be */
}

.estadisticas-grid .stat:nth-child(4) {
  background: rgba(139, 140, 168, 0.7); /* #8b8ca8 */
}

/* Efecto difuminado */
.cerfom-slider .swiper-slide {
  opacity: 0;
  transition: opacity 1.2s ease-in-out; /* duración y suavidad */
}

.cerfom-slider .swiper-slide-active {
  opacity: 1;
}

/* Estado base: transición ya definida */
.aprendizaje-img,
.aprendizaje-logo img {
  display: block;
  transform: scale(1);
  transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); /* más suave */
}

/* Hover: solo cambio de escala */
.aprendizaje-img:hover,
.aprendizaje-logo img:hover {
  transform: scale(1.08);
}

.estadisticas-grid {
  flex: 1; /* ocupa el espacio disponible arriba */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  justify-items: center;
  align-items: center;
}

.contacto-grid {
  margin-top: auto;  /* empuja hacia abajo */
  text-align: center;
  padding: 20px 0;
}

/* Grid */
.capacitacion-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  min-height: 600px;
  position: relative;
  overflow: hidden;
}

/* Columna izquierda */
.capacitacion-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Columna derecha */
.capacitacion-right {
  position: relative;

  text-align: left;
}

/* Cielo Parallax */
.cielo-parallax {
  background: url("<?php echo get_stylesheet_directory_uri(); ?>/assets/img/cielo.png") no-repeat center center;
  background-size: cover;
  position: absolute;
  top: 0; left: 0;
  right: 0; bottom: 0;
  z-index: -1;
  transform: translateY(0);
  transition: transform 0.5s ease-out;
}
body.scroll .cielo-parallax {
  transform: translateY(-50px); /* Efecto parallax */
}

/* Texto */
.capacitacion-titulo {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
}
.capacitacion-subtitulo {
  font-size: 18px;
  color: #e0e0e0;
  margin-bottom: 30px;
}

/* Línea animada */
.linea-animada {
  height: 2px;
  background: #fff;
  width: 0;
  animation: drawline 2s ease forwards;
}
@keyframes drawline {
  from { width: 0; }
  to   { width: 100%; }
}

/* Hombre naranja */
.hombre-naranja {
  position: absolute;
  bottom: 0;
  right: 40px;
  max-height: 400px;
  animation: fadeIn 2s ease forwards;
  opacity: 0;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================
   SECCIÓN CAPACITACIÓN
================================ */
.cerfom-capacitacion {
  position: relative;
  overflow: hidden;
  min-height: 600px;
  display: flex;
  align-items: center;
  padding: 0px 0;
}

/* Grid principal */
.capacitacion-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 2fr;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  z-index: 2;
  gap: 20px;
}

/* Fondo detrás de todo */
.capacitacion-bg {
  background: url("<?php echo get_stylesheet_directory_uri(); ?>/assets/img/inicio3.jpg") no-repeat center center;
  background-size: cover;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1; /* 🔑 Queda al fondo */
}

/* Columna izquierda */
.capacitacion-left {
  display: flex;
  justify-content: center;
  align-items: center;
}
.fondo-hexagonos {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Columna derecha */
.capacitacion-right {
  position: relative;

  z-index: 3;
}

/* Texto */
.capacitacion-titulo {
  font-size: 32px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3;
  margin-bottom: 20px;
}
.capacitacion-subtitulo {
  font-size: 18px;
  color: #444;
  margin-bottom: 30px;
}

/* Línea animada */
.linea-animada {
  width: 0;
  height: 2px;
  background: #028bd3;
  animation: drawLine 2s forwards;
}
@keyframes drawLine {
  from { width: 0; }
  to { width: 100%; }
}

/* Hombre naranja */
.hombre-naranja {
  max-width: 280px;
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0;
  animation: fadeInUp 2s ease forwards 1s;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.capacitacion-grid {
  display: grid;
  grid-template-columns: 1fr 2fr; /* izquierda = hexágonos, derecha = cielo */
  min-height: 600px;
}

/* Columna izquierda */
.capacitacion-left {
  display: flex;
  justify-content: center;
  align-items: center;
}
.capacitacion-left img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Columna derecha con fondo cielo */
.capacitacion-right {
  position: relative;

  background: url("<?php echo get_stylesheet_directory_uri(); ?>/assets/img/cielo.png") no-repeat center center;
  background-size: cover;
  background-attachment: fixed; /* 👈 ya con efecto parallax */
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.capacitacion-right {
  position: relative;

  background: url("/wp-content/themes/cerfom-child/assets/img/cielo.png") no-repeat center center;
  background-size: cover;
  background-attachment: fixed; /* Parallax */
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Sección general */
.cerfom-capacitacion {
  position: relative;
  overflow: hidden;
  min-height: 600px;
}

/* Fondo cielo */
.cielo-bg {
  background: url("<?php echo get_stylesheet_directory_uri(); ?>/assets/img/cielo.png") no-repeat center center;
  background-size: cover;
  background-attachment: fixed; /* Parallax */
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0; /* Detrás de todo */
  width: 100%;
}

/* Grid */
.capacitacion-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  z-index: 2; /* encima del cielo */
}

/* Columna izquierda */
.fondo-hexagonos {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 3; /* encima del cielo */
}

/* Columna derecha */
.capacitacion-right {
  position: relative;

  z-index: 4; /* más arriba que hexágonos */
  color: #111;
}

/* Texto */
.capacitacion-titulo {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 20px;
}
.capacitacion-subtitulo {
  font-size: 18px;
  margin-bottom: 30px;
}

/* Línea */
.linea-animada {
  width: 0;
  height: 2px;
  background: #028bd3;
  animation: drawLine 2s forwards;
}
@keyframes drawLine {
  from { width: 0; }
  to { width: 100%; }
}

/* Hombre */
.hombre-naranja {
  max-width: 280px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 5; /* delante de todo */
  opacity: 0;
  animation: fadeInUp 2s ease forwards 1s;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Sección completa */
.cerfom-capacitacion {
  position: relative;
  overflow: hidden;
  min-height: 600px;
}

/* Fondo cielo: cubre toda la sección */
.cielo-bg {
  background: url("<?php echo get_stylesheet_directory_uri(); ?>/assets/img/cielo.png") no-repeat center center;
  background-size: cover;
  background-attachment: fixed; /* Parallax */
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0; /* al fondo */
}

/* Grid de contenido */
.capacitacion-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  position: relative;
  z-index: 2; /* sobre el cielo */
  gap: 20px;
}

/* Columna izquierda */
.fondo-hexagonos {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 3; /* sobre el cielo */
}

/* Columna derecha */
.capacitacion-right {
  position: relative;

  z-index: 4; /* sobre el cielo */
  color: #111;
  height: 100%;
}

/* Texto */
.capacitacion-titulo {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 20px;
}
.capacitacion-subtitulo {
  font-size: 18px;
  margin-bottom: 30px;
}

/* Línea animada */
.linea-animada {
  width: 0;
  height: 2px;
  background: #028bd3;
  animation: drawLine 2s forwards;
}
@keyframes drawLine {
  from { width: 0; }
  to { width: 100%; }
}

/* Hombre naranja: siempre al frente */
.hombre-naranja {
  max-width: 280px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 5;
  opacity: 0;
  animation: fadeInUp 2s ease forwards 1s;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

.cerfom-capacitacion {
  position: relative;
  overflow: hidden;
  min-height: 600px;
}

.cerfom-capacitacion::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url("<?php echo get_stylesheet_directory_uri(); ?>/assets/img/cielo.png") no-repeat center center;
  background-size: cover;
  z-index: -1;
}

/* ================================
   SECCIÓN CAPACITACIÓN
================================ */
.cerfom-capacitacion {
  position: relative;
  overflow: hidden;
  min-height: 600px;
}

/* Fondo cielo ocupa todo */
.cerfom-capacitacion::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url("<?php echo get_stylesheet_directory_uri(); ?>/assets/img/cielo.png") no-repeat center center;
  background-size: cover;
  background-attachment: fixed; /* efecto parallax */
  z-index: 0;
}

/* Grid de contenido */
.capacitacion-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  position: relative;
  z-index: 2; /* sobre el cielo */
  gap: 20px;
}

/* Columna izquierda */
.fondo-hexagonos {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 3; /* sobre el cielo */
}

/* Columna derecha */
.capacitacion-right {
  position: relative;

  z-index: 3;
  color: #111;
  font-size: 40px!important;
 
}

/* Texto */
.capacitacion-titulo {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 20px;
}
.capacitacion-subtitulo {
  font-size: 25px;
  margin-bottom: 30px;
  color: white;
}

/* Línea */
.linea-animada {
  width: 0;
  height: 2px;
  background: #fff;
  animation: drawLine 5s forwards;
  margin-top: 20px;
}
@keyframes drawLine {
  from { width: 0; }
  to { width: 100%; }
}

/* Hombre naranja al frente */
.hombre-naranja {
  max-width: 280px;
  position: absolute;
  bottom: 0;
  right: 40px;
  z-index: 5; /* 👈 siempre delante */
  opacity: 0;
  animation: fadeInUp 2s ease forwards 1s;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Fondo cielo cubre toda la sección */
.cerfom-capacitacion {
  position: relative;
  overflow: hidden;
  min-height: 600px;
}

.cielo-bg {
  background: url("<?php echo get_stylesheet_directory_uri(); ?>/assets/img/cielo.png") no-repeat center center;
  background-size: cover;
  background-attachment: fixed; /* efecto parallax */
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0; /* detrás de todo */
}

/* Sección capacitación */
.cerfom-capacitacion {
  position: relative; /* referencia para el hijo absolute */
  overflow: hidden;
  min-height: 600px;
  z-index: 0;
}

/* Fondo cielo detrás de todo */
.cielo-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url("<?php echo get_stylesheet_directory_uri(); ?>/assets/img/cielo.png") no-repeat center center;
  background-size: cover;
  background-attachment: fixed; /* efecto parallax */
  z-index: -1; /* siempre al fondo */
}

/* Fondo cielo detrás de TODA la sección */
.cielo-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url("<?php echo get_stylesheet_directory_uri(); ?>/assets/img/cielo.png") no-repeat center center;
  background-size: cover;
  background-attachment: fixed; /* Parallax */
  z-index: -1; /* siempre detrás */
}

.capacitacion-right {
  width: 80%;
  line-height: 50px;
  color: white;
}

/* Grid 3 columnas */
.empresa-grid {
  display: grid;
  grid-template-columns: 4fr 2fr; /* imagen - texto - imagen */
  align-items: center;
  gap: 80px;
  max-width: 100%;
  margin: 0 auto;
 
}

/* Texto */
.empresa-texto {
  font-size: 16px;
  color: #333;
  line-height: 1.6;
  padding: 50px 0;
  margin-left: 150px;
}
.empresa-texto h2 {
  font-size: 32px;
  margin-bottom: 20px;
  font-weight: 700;
  color: #1a1a1a;
}

/* Imágenes */
.empresa-img img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Responsive */
@media (max-width: 991px) {
  .empresa-grid {
    grid-template-columns: 1fr; /* se apilan en mobile */
    text-align: center;
  }
  .empresa-texto {
    order: 2;
  }
  .empresa-img:first-child {
    order: 1;
  }
  .empresa-img:last-child {
    order: 3;
  }
}

.empresa-img.princ img {
    width: 100%;
    height: 100%;
}

.empresa-img.mono img {
    width: 50%;
    margin: 0 auto;
}

/* Imagen izquierda: ocupa toda la altura */
.empresa-img.princ {
  height: 100%;              /* ocupa todo el alto del grid */
}

.empresa-img.princ img {
  width: 100%;
  height: 100%;              /* estira la imagen al alto total */
  object-fit: cover;         /* asegura que no se deforme */
  display: block;
}

/* ====== SECCIÓN ESTADÍSTICAS ====== */
.cerfom-estadisticas {
  position: relative;
  padding: 60px 20px;
  color: #fff;
  background: rgba(0,0,0,0.5); /* capa sobre imagen de fondo */
}

/* GRID de estadísticas */
.estadisticas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 100px;
  text-align: center;
  margin-bottom: 50px;
      max-height: 200px;
}

.stat {
  background: rgba(255,255,255,0.1);
  padding: 20px;
  border-radius: 12px;
}
.stat i {
  font-size: 50px;
  margin-bottom: 10px;
  color: #fff;
}
.stat p {
  font-size: 16px;
  margin-bottom: 8px;
}
.stat .numero {
  font-size: 22px;
  font-weight: bold;
  color: #fff;
}

.pespacio {
    height: 20px;
}



/* GRID de contacto */
.contacto-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0px;
  text-align: center;
  font-size: 14px;
  width: 90%;
}
.contacto-grid i {
  display: block;
  font-size: 30px;
  margin-bottom: 6px;
  color: #fff;
}
.contacto-grid span {
  display: block;
  color: #fff;
}

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

/*=================FOOTER====================*/

/* Footer CERFOM */
.cerfom-footer {
  background: #0a0c3d; /* mismo tono azul oscuro */
  color: #fff;
  text-align: center;
  padding: 40px 20px;
  font-size: 14px;
}

.cerfom-footer h4 {
  color: #4dd0e1; /* celeste para títulos */
  font-size: 16px;
  margin-bottom: 10px;
}

.cerfom-footer .footer-top {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: 30px;
  width: 75%;
}

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

.cerfom-footer .footer-col li {
  margin: 4px 0;
}

.cerfom-footer .footer-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  flex-wrap: wrap;
 
}

.cerfom-footer .footer-logos img {
  height: 45px; /* ajusta según imagen */
  object-fit: contain;
}

.cerfom-footer .footer-menu {
  border-top: 1px solid rgba(255,255,255,0.2);
  margin-top: 20px;
  padding-top: 10px;
}

.cerfom-footer .footer-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  font-weight: 600;
}

.cerfom-footer .footer-nav {
  display: flex;
  justify-content: center;
  gap: 0px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cerfom-footer .footer-nav li {
  display: inline-block;
}

/* Columna general */
.cerfom-footer .footer-col {
  flex: 1;
  min-width: 220px;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Títulos */
.cerfom-footer .footer-col h4 {
  font-size: 18px;
  color: #4dd0e1; /* celeste */
  font-weight: 600;
  color: #5edce8 !important;
  font-family: 'Futura Md BT', sans-serif;
}

/* Listas */
.cerfom-footer .footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cerfom-footer .footer-col li {
  margin: 6px 0;
  font-size: 14px;

}

.fntcoft {
      font-family: 'Futura Md BT', sans-serif;
}

/* Contenedor superior del footer */
.footer-top.container {
  display: flex;
  justify-content: center;   /* centra horizontalmente */
  align-items: center;       /* centra verticalmente */
  gap: 60px;                 /* espacio entre columnas */
  flex-wrap: wrap;           /* permite que se acomoden en móviles */
  text-align: center;
  margin-bottom: 30px;
}

/* Columnas */
.footer-col {
  display: flex;
  flex-direction: column;   /* apila título y lista */
  align-items: center;      /* centra horizontalmente el contenido */
  justify-content: center;  /* centra verticalmente dentro de la columna */
  min-width: 220px;
}

/* Títulos */
.footer-col h4 {
  font-size: 16px;
  margin-bottom:0px;
  color: #4dd0e1; /* celeste */
  font-weight: 600;
      text-align: center;
}

/* Listas */
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li {
  margin: 5px 0;
  font-size: 14px;
}

/* Base para todos */
.footer-logos img {
  object-fit: contain;
  margin: 0 10px;
}

/* Tamaños individuales */
.logo-applus { height: 85px!important; }
.logo-sence { height: 40px!important; border-radius: 10px; }
.logo-iso { height: 50px!important; }
.logo-rednegocios { height: 25px!important; }
.logo-senegocia { height: 25px!important; }
.logo-sicep { height: 40px!important; }
.logo-mercadopublico { height: 35px!important; }

.footer-nav {
  display: flex;
  gap: 12px; /* espacio entre ítems */
}

.footer-nav li {
  list-style: none;
  margin: 0;
  padding: 0 12px;
  border-right: 2px solid #fff; /* línea separadora */
}

.footer-nav li:last-child {
  border-right: none; /* 👈 elimina la línea en el último */
}

/* ================= SLIDER ================= */

.page-slider {
  position: relative;
  width: 100%;
  height: auto;           /* altura automática según imagen */
  min-height: 100vh;      /* ocupa al menos la altura de pantalla */
  overflow: hidden;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Slides */
.page-slider .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Imagen dentro del slide */
.page-slider .slide img {
  width: 100%;          /* ocupa todo el ancho */
  height: auto;         /* altura proporcional */
  display: block;
  object-fit: cover;    /* asegura cubrir el ancho sin deformar */
  object-position: center;
}

/* Slide activa */
.page-slider .slide.active {
  opacity: 1;
  z-index: 1;
}

/* Controles */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  padding: 10px;
  cursor: pointer;
  user-select: none;
  transition: 0.3s;
  z-index: 3;
}
.prev:hover, .next:hover { color: #1135a5; }
.prev { left: 20px; }
.next { right: 20px; }

/*SUB-MENU=========================*/

.main-navigation ul.menu ul li a, .main-navigation ul.nav-menu ul li a {
    padding: 7px 5px 7px 10px;
    text-transform: uppercase;
    color: white;
    font-size: 12px;
}

.main-navigation ul.menu ul.sub-menu, .main-navigation ul.nav-menu ul.children {
    background-color: #096bc2 !important;
    width: 100%;
    
}

.main-navigation ul ul li, .secondary-navigation ul ul li {
    border-top: 1px white solid;
}

/* Estado normal de los enlaces del submenu */
.main-navigation ul.menu ul li a {
  background-color: transparent; /* sin fondo por defecto */
  color: white;
  transition: background-color 0.3s ease;
}

/* Estado hover en los enlaces del submenu */
.main-navigation ul.menu ul li a:hover {
  background-color: #0d4eb2;  /* fondo rojo solo al pasar el mouse */
  color: #fff;            /* mantener texto blanco */
}

/* Submenú: que el texto siempre quede dentro */
.main-navigation ul.sub-menu li a {
  display: block;               /* que sea bloque completo */
  white-space: normal;          /* permite salto de línea */
  word-wrap: break-word;        /* fuerza quiebre si es muy largo */
  overflow-wrap: break-word;    /* soporte moderno */
  text-align: left;             /* opcional: alinear texto */
  padding: 10px 15px;           /* espacio interno */
}

/* El <li> padre posiciona el submenú */
.main-navigation ul.menu > li { position: relative; }

/* El submenú toma exactamente el ancho del padre */
.main-navigation ul.menu > li > ul.sub-menu,
.main-navigation ul.nav-menu > li > ul.children {
  left: 0;
  width: 100%;
  min-width: 100%;
}

/* Cada link del submenú se ajusta al ancho y permite saltos */
.main-navigation ul.sub-menu li a,
.main-navigation ul.children li a {
  display: block;
  width: 100%;
  white-space: normal !important;   /* quita cualquier nowrap heredado */
  overflow-wrap: anywhere;          /* rompe en cualquier punto si es necesario */
  word-break: break-word;           /* fallback */
  hyphens: auto;                    /* guiones automáticos si el navegador soporta */
  line-height: 1.25;
  padding: 10px 15px;
  box-sizing: border-box;           /* padding no aumenta el ancho */
  text-align: left;
}

/* Ocultar submenús por defecto */
.main-navigation ul.sub-menu,
.main-navigation ul.children {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
}

/* Mostrar submenú SOLO al hacer hover sobre el padre */
.main-navigation ul li:hover > ul.sub-menu,
.main-navigation ul li:hover > ul.children {
  display: block;
}

.main-navigation ul li a:hover, .main-navigation ul li:hover > a, .site-title a:hover, .site-header ul.menu li.current-menu-item > a{
    color: white;
}

/*=========RELOJ DE ARENA========*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}

/* Contenedor con animación de giro */
.logo-container {
  position: relative;
  width: 120px;
  height: 120px;
  animation: spin 4s linear infinite;
}

.logo-base {
  width: 100%;
  height: auto;
  display: block;
}

/* Relleno que sube solo dentro de la forma */
.fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: #ffffff; /* Color de relleno (agua/blanco) */
  animation: fillUp 3s linear infinite;

  /* Aplica la forma del favicon como máscara */
  -webkit-mask-image: url("<?php echo get_stylesheet_directory_uri(); ?>/assets/img/favicon.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;

  mask-image: url("<?php echo get_stylesheet_directory_uri(); ?>/assets/img/favicon.png");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
}

/* Animaciones */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes fillUp {
  0%   { height: 0%; }
  100% { height: 100%; }
}

/* Contenedor general */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}

/* Contenedor con animación de giro */
.logo-container {
  position: relative;
  width: 120px;
  height: 120px;
  animation: spin 6s linear infinite; /* giro más lento */
}

/* Logo base */
.logo-base {
  width: 100%;
  height: auto;
  display: block;

  /* efecto latido */
  animation: heartbeat 1.5s ease-in-out infinite;
}

/* Relleno que sube dentro de la forma */
.fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: #ffffff; /* agua/blanco */
  animation: fillUp 3s linear infinite;

  /* máscara */
  -webkit-mask-image: url("<?php echo get_stylesheet_directory_uri(); ?>/assets/img/favicon.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;

  mask-image: url("<?php echo get_stylesheet_directory_uri(); ?>/assets/img/favicon.png");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
}

/* Animaciones */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes fillUp {
  0%   { height: 0%; }
  100% { height: 100%; }
}

@keyframes heartbeat {
  0%   { filter: brightness(1); transform: scale(1); }
  25%  { filter: brightness(1.5); transform: scale(1.05); }
  40%  { filter: brightness(1); transform: scale(1); }
  60%  { filter: brightness(1.5); transform: scale(1.08); }
  100% { filter: brightness(1); transform: scale(1); }
}


/* Animación de entrada */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (min-width: 1600px) {
    .qs-texto h1 {
    font-family: 'Futura Md BT', sans-serif;
    font-size: 42px;
    font-weight: 400;
    letter-spacing: 0px;
    margin-bottom: 50px;
    margin-top: 50px;
    color: #606062;
    text-transform: uppercase;
}
}

.qs-texto  {
    margin: 50px 0px;
}

/*=====================ARRIENDOS==================*/
/* ===== SECCIÓN ARRIENDOS ===== */
.arriendos-hero1 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: url('/wp-content/themes/cerfom2-child/assets/img/fondoarr1.jpg') no-repeat center center;
  background-size: cover;
  padding: 120px 8%;
  color: #ffffff;
  min-height: 100vh;
  position: relative;
}

.arriendos-hero2 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: url('/wp-content/themes/cerfom2-child/assets/img/fondoarr2.jpg') no-repeat center center;
  background-size: cover;
  padding: 120px 8%;
  color: #ffffff;
  min-height: 100vh;
  position: relative;
}

.arriendos-hero3 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: url('/wp-content/themes/cerfom2-child/assets/img/fondoarr3.jpg') no-repeat center center;
  background-size: cover;
  padding: 120px 8%;
  color: #ffffff;
  min-height: 100vh;
  position: relative;
}

.arriendos-hero4 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: url('/wp-content/themes/cerfom2-child/assets/img/fondoarr4.jpg') no-repeat center center;
  background-size: cover;
  padding: 120px 8%;
  color: #ffffff;
  min-height: 100vh;
  position: relative;
}

.arriendos-hero5 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: url('/wp-content/themes/cerfom2-child/assets/img/fondoarr5.jpg') no-repeat center center;
  background-size: cover;
  padding: 120px 8%;
  color: #ffffff;
  min-height: 100vh;
  position: relative;
}



.arriendos-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(42, 52, 79, 0.4); /* capa sutil para mejorar contraste */
}

.arriendos-contenido {
  position: relative;
  max-width: 800px;
  z-index: 2;
  margin-left: 200px;
}

.arriendos-contenido h2 {
  font-family: 'Futura Md BT', sans-serif;
  font-size: 2.4rem;
  margin-bottom: 25px;
  line-height: 1.2;
  font-weight: 700;
  color: #ffffff;
}

.arriendos-contenido h3 {
  font-family: 'Futura Md BT', sans-serif;
  font-size: 1.5rem;
  margin-top: 30px;
  margin-bottom: 10px;
  color: #a9d6ff;
  font-weight: 600;
}

.arriendos-contenido p,
.arriendos-contenido ul {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #f5f7fa;
}

.arriendos-contenido ul {
  list-style: disc;
  margin-left: 25px;
}

.arriendos-contenido strong {
  color: #ffffff;
  font-weight: 700;
}

@media (max-width: 768px) {
  .arriendos-hero {
    padding: 80px 30px;
    text-align: left;
  }
  .arriendos-contenido h2 {
    font-size: 1.8rem;
  }
}

/* ===== SECCIÓN GALERÍA DE ARRIENDOS ===== */
.arriendos-galeria {
  background: #f4f7fa;
  padding: 80px 5%;
  display: flex;
  justify-content: center;
}

.galeria-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  max-width: 1200px;
  width: 100%;
}

.galeria-item {
  overflow: hidden;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.galeria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.4s ease;
}

/* Efecto hover */
.galeria-item:hover img {
  transform: scale(1.08);
}

/* Opcional: efecto de brillo */
.galeria-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 70%, rgba(0,0,0,0.2));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.galeria-item:hover::after {
  opacity: 1;
}

/* Responsivo */
@media (max-width: 992px) {
  .galeria-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .galeria-grid {
    grid-template-columns: 1fr;
  }
}

.capacitacion-right.texto {
  position: relative;      /* permite controlar el z-index */
  z-index: 10;             /* asegura que esté encima */
  color: white;            /* mantiene el color visible */
  width: 80%;
  line-height: 50px;
}

.fondo-hexagonos {
  position: absolute;      /* fondo fijo o detrás del texto */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;              /* debajo del texto */
}

/* === Sección TRABAJA CON NOSOTROS === */
.trabaja-nosotros {
  position: relative; /* permite usar z-index dentro */
  z-index: 5;
}

.trabaja-nosotros::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none; /* evita que un pseudo-elemento tape el texto */
  z-index: 1;
}

/* Texto siempre visible encima */
.trabaja-nosotros .tn-header,
.trabaja-nosotros .tn-title,
.trabaja-nosotros .tn-intro {
  position: relative;
  z-index: 10;       /* encima de la imagen */
  color: #ffffff;    /* texto visible */
}

/* Ajuste de margen para pantallas medianas y pequeñas */
@media screen and (max-width: 1500px) {
  section.cerfom-certificaciones .cert-header h1 {
    margin-left: 20px !important;
  }
}

.menu-toggle {
    display:none!important;
}

/* ===========================
   📱 MENÚ MÓVIL CERFOM
=========================== */
.cerfom-mobile-header {
  display: none;
}

@media (max-width: 768px) {
  .cerfom-mobile-header {
    display: block;
    background-color: #004a8f;
    color: #fff;
    position: relative;
    z-index: 99999;
  }

  .cerfom-mobile-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 15px;
  }

  #cerfom-mobile-toggle {
    background: #fff;
    color: #004a8f;
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  #cerfom-mobile-toggle .menu-icon {
    width: 22px;
    height: 2px;
    background: #004a8f;
    position: relative;
    margin-right: 8px;
  }

  #cerfom-mobile-toggle .menu-icon::before,
  #cerfom-mobile-toggle .menu-icon::after {
    content: "";
    width: 22px;
    height: 2px;
    background: #004a8f;
    position: absolute;
    left: 0;
    transition: transform 0.3s;
  }

  #cerfom-mobile-toggle .menu-icon::before {
    top: -6px;
  }

  #cerfom-mobile-toggle .menu-icon::after {
    top: 6px;
  }

  /* Estado abierto */
  #cerfom-mobile-toggle.active .menu-icon {
    background: transparent;
  }
  #cerfom-mobile-toggle.active .menu-icon::before {
    transform: rotate(45deg) translate(5px, 5px);
  }
  #cerfom-mobile-toggle.active .menu-icon::after {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  /* Contenedor del menú */
  .cerfom-mobile-menu {
    display: none;
    background-color: #004a8f;
    width: 100%;
    text-align: left;
    padding: 10px 0;
    position: absolute;
    top: 100%;
    left: 0;
  }

  .cerfom-mobile-menu.open {
    display: block;
    animation: slideDown 0.3s ease;
  }

  .cerfom-mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .cerfom-mobile-menu li {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }

  .cerfom-mobile-menu li:first-child {
    border-top: none;
  }

  .cerfom-mobile-menu a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 12px 20px;
    font-weight: 500;
  }

  .cerfom-mobile-menu a:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ===========================
   🚫 Ocultar grid-menu en móviles
   =========================== */
@media (max-width: 768px) {
  .col-full.grid-menu {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

/* ===========================
   ALTURA AUTOMÁTICA SOLO EN CELULARES
   =========================== */
@media (max-width: 768px) {
  .page-slider {
      position: relative;
      width: 100%;
      height: auto;           /* altura automática según imagen */
      min-height: 50vh;      /* ocupa al menos la altura de pantalla */
      overflow: hidden;
      background: #000;
      display: flex;
      justify-content: center;
      align-items: center;
   
  }
  
  .aprendizaje-titulo {
    font-size: 30px;
    font-weight: 800;
    text-align: center;
    color: #97989a;
    margin: 20px 0;
    line-height: 1.3;
    font-family: 'Futura Md BT', sans-serif;
}

.cerfom-aprendizaje {
    padding: 0px 0px;
    background: #fff;
}

.aprendizaje-grid {
    display: block;
}

.aprendizaje-col p {
    font-size: 18px;
    line-height: 1.6;
    color: #222;
    margin-bottom: 20px;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.aprendizaje-logo {

    justify-content: CENTER;
    
}

.capacitacion-right.texto {
    position: relative;
    width: 100%;          /* ocupa todo el ancho */
    text-align: center;   /* centra el texto */
    color: white;
    line-height: 1.3em;
    z-index: 10;
    padding: 20px 10px;
     font-size: 20px !important;
  }

  .capacitacion-right.texto br {
    display: none;        /* elimina saltos de línea forzados */
  }

  .capacitacion-right.texto h2,
  .capacitacion-right.texto p {
    width: 100%;
    font-size: 1.4rem;    /* tamaño ajustado al móvil */
    margin: 0 auto;
  }

  .capacitacion-right.texto p.capacitacion-subtitulo {
    font-size: 1rem;
    margin-top: 10px;
  }

  .capacitacion-left img {
    width: 100%;
    height: auto;
    object-fit: contain; /* mantiene proporción */
  }

  /* Contenedor general */
  .capacitacion-section {
    display: flex;
    flex-direction: column-reverse; /* primero texto, luego imagen */
    align-items: center;
    justify-content: center;
    padding: 20px 0;
   
  }
  
  .capacitacion-grid,
  .capacitacion-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* ← centra horizontalmente todo */
    text-align: center;
    
  }
  
  .capacitacion-right.texto {
    position: absolute; /* lo hace flotar dentro del contenedor */
    top: 0;             /* lo alinea al borde superior */
    left: 0;
    width: 100%;
    text-align: center;
    color: white;
    line-height: 1.3em;
    z-index: 10;
    padding: 20px 10px 0 10px; /* agrega espacio arriba si quieres separarlo */
    font-size: 20px !important;
            height: auto;
  }
  
  .grid-4 {
    display: block;
}

.cerfom-galeria .container.grid-4 {
    display: flex;
    flex-direction: column; /* apila las imágenes */
    gap: 20px; /* separación vertical */
    padding: 0 !important; /* elimina padding */
    margin: 0 auto;
    width: 100%;
  }

  .cerfom-galeria .galeria-item {
    border-radius: 0 !important;
    overflow: hidden;
    width: 100%;
    background: #fff; /* fondo blanco detrás de la imagen */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* sombra elegante */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .cerfom-galeria .galeria-item:hover {
    transform: translateY(-3px); /* pequeño efecto al pasar el mouse */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  }

  .cerfom-galeria .galeria-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0 !important;
  }
  
  .cerfom-galeria {
    padding: 40px 20px;
  }
  
  .empresa-texto {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    padding: 20px 20px;
    margin-left: 0px;
}

.empresa-grid {
   
    gap: 0px;
    padding-bottom: 20px;
    
}

.cerfom-estadisticas {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0 20px; /* espacio interno controlado */
    margin: 0;
    overflow: hidden; /* evita que se extienda hacia el footer */
    background: #fff; /* opcional: color base neutro */
    height: 1400px!important;
  }

  .estadisticas-grid {
    display: grid;
    grid-template-columns: 1fr; /* una columna en móvil */
    gap: 20px; /* separación vertical entre ítems */
    justify-items: center;
    align-items: center;
    width: 100%;
    max-width: 95%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
  }

  .estadisticas-grid > div {
    background: #ffffff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
  }

  .estadisticas-grid > div:hover {
    transform: translateY(-4px);
  }

  /* Prevenir desbordamiento */
  footer, .site-footer {
    position: relative;
    z-index: 1;
  }
  
  .cerfom-estadisticas {
   
    padding: 40px 10% 20px 10% !important;
  }
  
  .v-celeste {

    top: 67%;
    
}

.cerfom-footer .footer-logos {
    display: block;
}

.cerfom-footer .footer-logos {
  display: flex;
  flex-direction: column;    /* los pone uno debajo del otro */
  justify-content: center;   /* centra verticalmente */
  align-items: center;       /* centra horizontalmente */
  text-align: center;
  gap: 25px;                 /* espacio entre logos */
  width: 100%;
  margin: 0 auto;
  padding: 10px 0;
  background: transparent;   /* conserva fondo del footer */
}

/* Ajuste de los logos */
.cerfom-footer .footer-logos img {
  max-width: 150px;   /* tamaño máximo del logo */
  height: auto;
  display: block;
  margin: 0 auto;
}

.site-footer .footer-menu-container ul,
  .site-footer .footer-nav {
    display: flex;
    flex-direction: column;   /* uno bajo otro */
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 12px;                /* espacio entre enlaces */
    padding: 20px 0;
    margin: 0;
  }

  .site-footer .footer-menu-container ul li {
    list-style: none;         /* quita los puntos */
    width: 100%;
  }

  .site-footer .footer-menu-container ul li a {
    color: #ffffff;           /* texto blanco */
    text-decoration: none;    /* sin subrayado */
    font-size: 16px;
    font-weight: 500;
    transition: color 0.3s ease;
  }

  .site-footer .footer-menu-container ul li a:hover {
    color: #00aaff;           /* color de hover (puedes usar tu azul institucional) */
  }
  
  .footer-nav li {
 
    border-right: none;
}

#cerfom-mobile-menu .has-submenu {
  position: relative;
}

/* enlace principal */
#cerfom-mobile-menu .has-submenu > a {
  position: relative;
  padding-right: 40px;
}

/* flecha indicadora */
#cerfom-mobile-menu .has-submenu > a::after {
  content: "▾";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #fff;
  transition: transform 0.3s ease;
}

/* contenedor submenu oculto */
#cerfom-mobile-menu .submenu {
  display: none;
  background: #0057c2; /* un azul un poco más oscuro */
  border-top: 1px solid rgba(255,255,255,0.15);
  padding: 4px 0;
}

/* elementos internos */
#cerfom-mobile-menu .submenu li {
  border: none;
}

#cerfom-mobile-menu .submenu li a {
  padding: 10px 32px;
  font-size: 15px;
  color: #e6f2ff;
  font-weight: 500;
  display: block;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}

/* hover en submenu */
#cerfom-mobile-menu .submenu li a:hover {
  background: rgba(255,255,255,0.1);
  border-left-color: #00a2ff; /* acento celeste */
  color: #fff;
}

/* al hacer hover o click en el padre */
#cerfom-mobile-menu .has-submenu.open > .submenu {
  display: block;
}

/* animación de flecha */
#cerfom-mobile-menu .has-submenu.open > a::after {
  transform: translateY(-50%) rotate(180deg);
}

.qs-wrapper {
    
    padding: 0px 0px 0px 0px;
  
}

.qs-wrapper {
    display: block;
}

.qs-texto h1 {
    font-size: 35px;
    
}

 .qs-wrapper {
    position: relative;
    background-image: url('https://cerfom2.mamutagencia.com/wp-content/themes/cerfom2-child/assets/img/Panal1000.png');
    background-repeat: no-repeat;
    background-size: contain; /* o 'cover' si quieres que ocupe todo */
    background-position: bottom center; /* ajusta si la quieres más arriba */
    padding: 30px 20px;
    z-index: 1;
  }

  .qs-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.85); /* capa semitransparente blanca para legibilidad */
    z-index: 0;
  }

  .qs-texto {
    position: relative;
    z-index: 2; /* texto por encima */
    color: #111;
    text-align: justify;
    line-height: 1.6;
  }

  .qs-texto h1 {
    text-align: center;

    margin-bottom: 20px;
    font-weight: 700;
  }

  /* Ocultar el div de hexágonos original (ya no se necesita como imagen separada) */
  .qs-hexagonos {
    display: none;
  }
  
  .qs-texto {
    margin: 10px 0px;
}

.qs-texto {
    
    margin-bottom: 200px;
}

.qs-equipo-barra {
    top: -200px;
}

.qs-logos-inner img {
    max-height: 30px;
}

.qs-logos {
     padding: 40px 20px 20px 20px;
}

    .et-wrapper {
        padding: 0;
    }
    
    .et-media img {
    
    margin-top: 0px;
}

.et-texto .titulo-letras {
    font-size: 30px;
    margin: 10px 0 30px 10px;
 
}

.et-slogan {
  
    margin: 40px 10px 40px 10px;
    
}

.et-list {

    margin-right: 20%;
    padding-left: 20px;
}

.valores-overlay {
   
    margin: 0 0 0 0 !important;
    padding: 10px 0px !important;
}

.valores-titulo {
    font-size: 25px;
}

.valores-section {

    height: auto !important;
}

.valores-lista {
    margin-bottom: 212px;
}

.decor-personas {

    right: 0;
    left: 60px;
    
}

.vm-col-der {
    margin-bottom: 100px;
}

.img-personas {
    position: relative;
    bottom: 0;
    right: 0px;
    width: 100%;
    z-index: 2;
    padding-right: 0px;
}

    .vm-col-der {
        margin-bottom: 0;
        padding-bottom: 0;
    }
    
    .vm-titulo {
    
    margin: 0px 0 20px;
}

.sgi-text {
    margin-left: 0px;
}

    .sgi-slide:nth-child(1) .sgi-welder {
        position: relative;
        top: 50%;
        left: 70%;
    }
    
    .sgi-slide {
        height: 100%!important;
    }
    
    .trabaja-nosotros .tn-header, .trabaja-nosotros .tn-title, .trabaja-nosotros .tn-intro {
    
    width: auto;
}

.trabaja-nosotros .tn-header {
   
    margin: 0 20px 0 20px;
}

.tn-left img {
    position: relative !important;
}

.tn-grid {
    gap: 0;
}

.cerfom-collage .a-group {
    display: none;
}

.cerfom-collage .collage-text {
    display: block;
    
}
    
.cerfom-collage .collage-text h2, .cerfom-collage .collage-text h2 span {
    color: #929396 !important;
    text-align: left !important;
    margin: 0;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: .04em;
    font-family: 'Futura Md BT', sans-serif;
    font-size: 25px;
    line-height: 25px;
}

.cerfom-collage .collage-text {

    padding: 20px 10px;
}

.cerfom-collage .collage-row img {
    width: 100%;
    height: auto;
}
.cerfom-collage .b-group {
        display: none;
    }

.grid-cursos {
    display: block;
   
    margin: 0px;
}

.curso-item {
    padding: 0px 30px;
}

    section.cerfom-certificaciones .cert-header, section.cerfom-certificaciones .cert-header h1 {
    margin-left: 0px;

}

.cerfom-certificaciones .cert-logos {
  display: flex !important;
  flex-direction: column; /* para mantener una debajo de otra si es necesario */
  align-items: center; /* centra horizontalmente */
  justify-content: center; /* centra verticalmente si el contenedor tiene altura */
  gap: 20px; /* separa los logos */
  margin: 0 auto;
  text-align: center;
}

.clientes-grid-wrap {
    display: block;
}

.clientes-deco img {
   display: none;
}

.clientes-title {
    
    margin-left: 0px;
        padding-top: 0px;
        margin-bottom: 10px;
 
}

    .clientes-title {

        padding-left: 30px;
    }
    
    .clientes-logos {
    display: block;
    }
    
    .clientes-logos figure {

    padding: 15px 0;
}

.arriendos-contenido {
 
    margin-left: 0;
}

.contacto-wrap {
  
    padding: 20px 0;
}


/*CORCHETE FINAL CELULAR*/
}

/* --- Logo sobre el slide --- */
.slide {
  position: relative;
}

.slide-logo {
  position: absolute;
  top: 50px;                /* distancia desde arriba */
  left: 50%;                /* centrado horizontal */
  transform: translateX(-50%);
  z-index: 5;               /* por encima de la imagen */
  width: 25%;
}

.slide-logo img {
  width: 100px;             /* ajusta el tamaño del logo */
  height: auto;
  opacity: 0.95;            /* leve transparencia opcional */
}

/*BOTON AULA VIRTUAL*/

/* ======== BOTÓN AULA VIRTUAL (TOPBAR) ======== */
.aula-virtual-btn {
  background-color: #00AEEF; /* azul coherente con el menú CONTACTO */
  color: #fff !important;
  padding: 6px 14px !important;
  border-radius: 5px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none !important;
  font-size: 13px !important;
  line-height: 1;
  margin-right: 10px;
  display: inline-block !important;
  transition: all 0.3s ease;
}

.aula-virtual-btn:hover {
  background-color: #008fcc !important;
  transform: translateY(-1px);
  color: #fff !important;
}

a:focus, button:focus, .button.alt:focus, input:focus, textarea:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus {
    outline-color: white;
}