/*---------------- reset ------------------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,fieldset,legend,caption,.filters ul li p,figure {margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent; line-height:normal; font-weight:normal;}
body {font-family: "proxima-nova",sans-serif; overflow:hidden; font-size:16px; background:#00388c; cursor: none}
.interiores {padding-top:100px;}
.interiores header {background:#333;}
html {overflow-x:hidden; height:100%;}
a{color:#fff}
ol,ul,li {list-style:none; font-weight:lighter; line-height:1.55rem; font-weight:300}
p{font-weight: 400; font-size: 1.2rem; line-height: 1.75rem;  letter-spacing: .05rem; color: #fff;}
.smallFont{font-size:1rem!important;}
b {font-weight:800;}
.headerNone {display:block;}
.dnone {display:none;}
.mb40 {margin-bottom:40px;}
.sticky + .content {padding-top:150px;}
.bck-line {position:absolute; top:1080px; left:0; width:8px; height:200px;}
.bck {background: url("../images/bck.png") right top no-repeat;}
.mobile{display: none}
.font{letter-spacing:0px;  color:#fff; font-size:8.594rem; font-weight:700; line-height:10.6rem; letter-spacing:-2.8px}
.fontUno{letter-spacing:0px;  color:#fff; font-size:7.594rem; font-weight:700; line-height:7.6rem; letter-spacing:-2.8px}
.fontDos{letter-spacing:0px;  color:#fff; font-size:5.653rem; font-weight:500; line-height:5.5rem;}
.fontTres{letter-spacing:0px;  color:#fff; font-size:3.375rem; font-weight:300; letter-spacing: -1.4px; line-height:4.2rem;}
.fontCuatro{letter-spacing:0px;  color:#fff; font-size:2.827rem; font-weight:300; letter-spacing: -1px; line-height:3.775rem;}
.fontCinco{letter-spacing:0px;  color:#fff; font-size:1.999rem; font-weight:600; letter-spacing: 0px; line-height:2rem;}
.fontSeis{letter-spacing:0px;  color:#fff; font-size:1.314rem}
.mBottom{margin-bottom:.75rem}
.colorWhite{color:#fff!important}
.colorBlue{color:#00388C!important}
.colorRed{color: #fe3f03!important;}
.colorGray{color: #ccc!important}

.cincuenta {width: 49%; float: left; margin-right: 1%;}
.setenta{width: 67%; float: left; margin-right: 1rem;}
.treinta{width:30%; float: left; }

strong{display:block}

/* ANIMACIONES SVG*/
.world-svg img, .contact-svg{margin-right:7px; transition: all 0.4s ease; filter: brightness(0.9) drop-shadow(0 0 0px white); transform: scale(.9);}
.world-svg span{transition: all 0.1s ease; color:#fff}
.world-svg img:hover, .contact-svg:hover { filter: brightness(1.1) drop-shadow(0 0 10px #000); transform: scale(1);}
 .world-svg:hover span{color:#ccc; }
 
.contact-svg{ margin-top:2px; filter: brightness(0.9)  transform: scale(.9);}


:root { --vh: 1vh; }
    #cursorDot{
      position:fixed; width:10px; height:10px; border-radius:50%;
      pointer-events:none; z-index:9999999999; transform:translate(-50%,-50%);
      background:#fff; box-shadow: 5px 5px 13px #000
    }
    /* Evitar parpadeos en multiscroll controlado por GSAP */
    #multiscroll-section { will-change: transform; }
    .left, .right { backface-visibility: hidden; transform: translateZ(0); }
    /* Asegúrate en tu style.css de NO tener transition: transform para .left/.right */
    /* Menú demo */
    #menu { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); list-style:none; display:flex; gap:12px; z-index: 999; }
    #menu li a { color:#666; text-decoration:none; font-weight:600; padding:6px 10px; border-radius:4px; }
    #menu li.active a { background:#000; color:#fff; }
    
    

/*---------------- Font Effects ------------------*/
.bck-p {position:absolute; top:200px;  left:0; width:8px; height:200px; z-index: 999999}
.bck-li {position:absolute; top:550px;  left:0; width:8px; height:200px; z-index: 999999}
.marker{color:#d1d5db!important;}
.aparragraph p, .aparragraph li, .aparragraph b , .aparragraph h2{
  opacity: 0.5;
  color: transparent;
  transition: color 0.3s ease-out;
}
.aparragraph p.marker, .aparragraph li.marker,  .aparragraph b.marker{
   opacity: 1;
}
.aparragraph h2.marker {
   opacity: 1;
   color: #fff!important
}

.bck-blue-degrade{background:#01c9f4;}

/*---------------- Font Pairing ------------------*/
.source-sans-3 {  font-optical-sizing:auto; font-weight:<weight>; font-style:normal;}
.roboto, #titleText, #titleText em { font-optical-sizing:auto; font-weight:900; font-variation-settings:"wdth" 100;}
#titleText em {font-style:italic;}
#resultado {color:#5e9211; font-weight:600; letter-spacing:-.3px; text-align:left; padding:8px 0 0 2px; display:none; font-size:.8rem; float:left;}
table {border-collapse:collapse; border-spacing:0; text-align:left; font-size:.6em; float:left; width:100%; text-transform:uppercase; font-weight:600;}
table tr {border-bottom:1px solid #141418;}
table td {padding:2px 4px;}
table tbody tr:nth-child(even) {background-color:#b5b5b529;}
table tbody tr:nth-child(odd) {background-color:#39302a;}
.center {text-align:center;}
#inicio {background:#0e0e0e;}
blockquote,q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
:focus {outline:0;}
ins {text-decoration:none;}
del {text-decoration:line-through;}
em {font-style:normal;}
a{text-decoration:none; cursor:pointer; color:#e7e4e4; font-weight:400; transition:background-color 0.3s, color 0.3s; text-align:left; background:none; border:none; transition: color 0.3s ease; /* transición suave */}
a:hoverr{color:#fff;}
button {font-size:.9em;}
#trendMenu {color:#fff !important;}
.clear {clear:both;}
*,:after,:before {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.clearfix:before, .clearfix:after {content:" "; display:table;}
.clearfix:after {clear:both;}
button {text-decoration:none;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
.blur {opacity:0;}
strong {font-weight:600;}
.padleft40 {padding-left:40px;}
.padright40 {padding-right:40px;}
.tleft {text-align:left;}
.hide {display:none;}
.proyects{color:#e7e4e4!important; font-weight: 800!important; font-size: 1.4rem!important;}

/*---------------- Menu ------------------*/
#avisos {float:left; width:100%; text-align:center; margin-top:20px;}
.texto {float:left; width:100%; color:#fff; padding:170px 0;}
.texto h1 {margin-top:20px;}
.texto strong {font-size:3.9em; float:left; width:100%; margin-top:20px;}
.texto p {font-size:1.2em; float:left; width:100%; padding:8px 0;}
.button, .dark-button, .light-button {display:block; position:fixed; width:40px; height:36px; border-radius:1px; margin:0 auto; top:20px; padding-top:0; transition:all 500ms cubic-bezier(1,0,0.645,0.65); right:12px; z-index:999999;}
.bar1 {top:0; animation:topbar-back 500ms; animation-fill-mode:both; animation-play-state:initial !important; width: 20px!important; margin-left:0px;}
.bar2 {opacity:1;}
.bar3 {bottom:0; animation:bottombar-back 500ms; animation-fill-mode:both; animation-play-state:initial !important; width: 20px!important; margin-left:0px;}
.menu-bar + .menu-bar {margin-top:7px;}
.menu {position:absolute; font-weight:600; color:#fff; left:-65px; height:20px; top:10px; text-transform:uppercase; text-align:right; width:60px; font-size:.9em; letter-spacing:1.5px;}
.toggled .bar3 {bottom:27%; animation:bottombar-x 500ms; animation-fill-mode:both; width: 24px!important; margin-left:0px;}
.toggled .bar2 {opacity:0; height:2px!important;}
.toggled .bar1 {top:25%; animation:topbar-x 500ms; animation-fill-mode:both; width: 24px!important; margin-left:0px;}
.toggled .menu-bar{height:3px;}
.menu-bar {display:block; position:relative; background:#fff; width:26px; height:3px; border-radius:5px; transition:all 300ms; box-shadow: 1px 1px 1px #1223638f;}
#menuNav {position:fixed; top:0; left:0; height:100vh; width:100%; padding:0; z-index:999999; display:none;}
#menuNavDiv {position:fixed; top:0; left:0; height:100vh; width:100%; background:#08255a; padding:0; z-index:999999; display:flex; align-items:center; justify-content:center;}

#menuNavDiv em {
  display: block;
  color: #01d1feba;
  font-weight: 300;
  font-size: 1.25rem;
  transition: color 0.3s ease-in-out; /* <-- transición suave */
}

#menuNavDiv nav a {
  color: #fff;
    letter-spacing: 4px !important;
    font-weight: 400;
    padding-left: 10px;
    transition: all 0.3s ease;
    font-size: 5rem;
     line-height: 6.5rem;
}

#menuNavDiv a:hover em {
  color: #fff; 
}
#menuNavDiv a:hover {
  color: #fff; background:#ff9d00;
}
.logoContacto{display: block; margin: 0 auto; width: 700px;}
#logoMenu{position: absolute;
    left: 2rem;
    top: 2rem;
    z-index: 999999;
    width: 140px;}
#logoMenu:hover{background:none!important}
#deleon a {
    color: #ff9d00 !important;
    display: block;
    /* margin-top: 4rem !important; */
    letter-spacing: 4px;
    font-size: 5.653rem;
    padding-left: 10px;
    font-weight: 200;
}
#deleon a:hover{background:none!important; color: #ff9d00!important}

#redesMenu{display: block; margin-top:3.25rem; margin-left: 35px;}
#redesMenu strong{float:left; margin-right: 1rem; line-height: 55px;}
#redesMenu li{float:left; background: none}
#redesMenu li a{background: none; padding-left: 0px !important; margin-right: 1rem;}
#redesMenu li a img{height:20px;}

.button:hover .menu-bar {
  transform: scale(2.5);
}
.button:hover .bar1,
.button:hover .bar2,
.button:hover .bar3 {
  background: #f9f9f9;
}
.button:not(.toggled):hover .menu-bar {
  transform: scale(1.1);
}
.toggled .bar2 {
  opacity: 0 !important;
  pointer-events: none;
}

#mobil {display:flex; flex-direction:column;}
#menu-toggle { position:absolute; z-index:9999999999999999999; top: 13px; right:-1px; display:block}
#menuNavegacion li {position:relative; }
#contactame {background:#5e9211; padding:20px; border-radius:4px; color:#141418;}
#contactame h3 {color:#e8dfd7;}
#contactame p {color:#faecd9; font-size:1em;}
.thirty {float:left; width:28%;}
.boton {display:block; width:100%; border:1px solid #fff; padding:3px 10px; text-align:center; font-size:.9em; border-radius:10px; margin-top:15px;}
#contacting {background:#ddd; float:left; width:100%;}
#contacting img {float:left; width:100%;}
#formContact {padding:40px; color:#333; float:left; width:100%; margin-top:40px;}
#formContact h1 {font-weight:200; float:left; width:100%;}
#formContact fieldset {float:left;}
#formContact fieldset label {float:left; width:100%; margin-top:20px; font-size:.7em; text-transform:uppercase; letter-spacing:-.5px; font-weight:800; padding:0 0 5px 5px;}
#formContact .in {float:left; width:97%; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; height:37px; border:1px solid #ccc; padding:10px; font-size:.9em;}
#formContact .te {float:left; width:97%; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; height:120px; border:1px solid #ccc; padding:10px;}
.menuOFF{display: none}

/* Banda fija con blur (debajo del header) */
.header-blur-band{
  position:fixed; top:0; left:0; right:0; height:60px;
  backdrop-filter: blur(2px);
  z-index: 99990;            /* debajo del header */
  pointer-events: none;
}

/*---------------- Header ------------------*/

/* Variable global de color base del logo (blanco) */
:root {
  --c-text-alt: #fff;
}

/* Header fijo y transparente */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height:70px;
  margin: 0 auto;
  padding: 0 0 10px 0;
  background: transparent;
  z-index: 99999;
  backdrop-filter: none;
}

/* Si quieres mantener un ligero blur detrás del header (no rompe el blend) */
header::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(2px);
  pointer-events: none;
  z-index: 0;
}

/* Contenedor centrado del logo */
.wrapCenter.header-blend {
  position: relative;
  z-index: 1;
}

/* Enlace del logo */
#logo {
  position: absolute;
  width: 120px;
  margin: 1.4rem 0 0 2rem;
  padding: 0;
  z-index: 100000;
  pointer-events: auto;
}

/* El blend se aplica al SVG y a la imagen (pinta vs fondo) */
#logo svg,
#logo img {
  display: block;
  width: 100%;
  mix-blend-mode: difference;
  will-change: opacity;
}

/* Forzamos los paths del SVG a heredar el color actual */
#logo svg path {
  fill: currentColor !important;
}

/* Color base (blanco) controlado por variable */
#logo svg {
  color: var(--c-text-alt);
  transition: opacity 0.35s ease;
}

/* Logo “small” (opcional si usas scroll) */
#logoSmall {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  filter: brightness(0) invert(1);
  transition: opacity 0.35s ease;
  width:120px;
}

#portafolio-page .acercadenosotros p{font-size: 7.654rem;  line-height: 7.7rem;}
#about-section-two .acercadenosotros-meta-label  svg{width:20px!important; height:20px; width:52.131px;}
.hero is-light is-medium {padding-top:4rem}
#nuestroNombre{padding:2rem 0 0; font-weight:300}
#descripcionNuestro .first{padding:1rem 0 2rem; font-weight:300; color: #28a5e2; font-style: italic; }
#descripcionNuestro p{padding:0 0 1.5rem}
/* Estados por defecto y scroll */
#logoBig {
  opacity: 1;
  transition: opacity 0.35s ease;
}
body.header-scrolled #logoBig {
  opacity: 0;
}
body.header-scrolled #logoSmall {
  opacity: 1;
}

/* Estilos generales del nav (sin tocar tu estructura) */
header nav {
  float: right;
  margin: 1rem 17rem;
  font-size: 1rem;
  font-weight: 600;
}
header nav li {
  float: right;
}



#menuContacto {
    position: fixed;
    top:.6rem;
    right: 10px;
    z-index: 999999;
    padding: 10px;
    width:54px;
    height: 48px;
    border-radius: 0.5rem;
    backdrop-filter: blur(7px);
}
#menuContacto a {font-weight:200; font-size:1.3em;}
#menuContacto a:hover, #menuNavegacion a:hover {color:#fff;}
#menuContacto li {padding:0 .45rem; height:24px; float: left; margin-right:.8px}
#menuContacto li img{float:left; width:27px;}
#menuContacto li span{float:left; line-height:28px; font-size: 1rem;}
#socialIcons a {padding:0 4px;}
#lenguage img {float:left; margin-right:8px; padding:8px 0;}
#menuNavegacion li a {
    float: left;
    padding: 0 11px;
    transition: border-color 0.4s, padding 0.4s;
    letter-spacing: .5px;
    color: #fff;
    line-height: 66px;
    text-shadow: 1px 1px 3px #1465b5;
}
#nuestro-equipo{background: url("../graphics/nuestro-equipo.png") -45% 100px no-repeat;}
/* About Section Styles */
.about-section {color:#fff; padding:6rem 2rem; min-height:80vh; display:flex; align-items:center;}
.about-container {max-width:1400px; margin:0 auto; display:grid; grid-template-columns:1.2fr 1.6fr; gap:4rem; align-items:start;}
.about-container-two {width:100%;  display:grid; grid-template-columns:1fr 1.75fr; gap:4rem; align-items:start;}
.about-left {padding:0rem;}
.about-left .about-company-name{margin-bottom:.55rem; letter-spacing: -.25px;}
.about-company-name {font-size:3.2rem; font-weight:200; line-height:1.1; margin-bottom:1.75rem; letter-spacing:0.07rem;}
.about-company-name img{width:470px;}
.about-meta {margin-bottom:3rem;}
.about-meta-item {margin-bottom:1.5rem;}
.about-meta-label {font-weight:600; color:#888; text-transform:uppercase; letter-spacing:.1em; margin-bottom:.75rem;}
.about-meta-value { color:#ccc; line-height:1.4;}
.download-btn {display:inline-flex; align-items:center; gap:.75rem; padding:1rem 2rem; background:rgba(255,255,255,0.1); color:#fff; border:1px solid rgba(255,255,255,0.2); border-radius:.75rem; font-weight:500; text-decoration:none; transition:all 0.3s ease; backdrop-filter:blur(10px);}
.download-btn:hover {background:rgba(255,255,255,0.15); border-color:rgba(255,255,255,0.3); transform:translateY(-2px);}
.about-right {padding-left:2rem;}
.about-right h3{font-size:2.8rem; letter-spacing:-1px; }
.about-subtitle {font-size:1.5rem; font-weight:600; margin-bottom:2rem; color:#fff; line-height:1.3;}
.about-description {font-size:1.15rem; line-height:1.55; color:#e2e2e2; margin-bottom:3rem;}
.about-section-two {
  position: relative;
  z-index: 2;
  padding: 0rem;
  z-index: 9999999;
}
.about-section-three {
  position: relative;
  z-index: 2;
  padding: 0rem;
  z-index: 9999999;
  height: 100vh
}
.about-description-two {
    letter-spacing: -0.07rem;
    font-weight: 300;
    margin-bottom: 4rem;
    padding-right: 2rem;
}
.fade-video-wrapper {
  transition: all 0.8s ease-out;
  transform-origin: center center;
  will-change: transform, opacity;
}

.fade-video-wrapper.is-fading {
  opacity: 0;
  transform: scale(0.7);
}

.about-section-two {
  position: relative;
  z-index: 1;
}
.about-tagline {
    font-size: 2rem;
    font-weight: 300;
    color: #597db8;
    margin-bottom: 2rem;}
.more-info-btn {display:inline-flex; align-items:center; gap:.75rem; padding:1rem 2.5rem; background:rgba(255,255,255,0.08); color:#fff; border:1px solid rgba(255,255,255,0.15); border-radius:2rem; font-weight:500; text-decoration:none; transition:all 0.3s ease; backdrop-filter:blur(10px);}
.more-info-btn:hover {background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.25); transform:translateY(-2px);}

#cursorDot {
  position: fixed;
  top: 0;
  left: 0;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
  transition: transform 0.05s linear;
}

/* Projects Section Styles - FONDO NEGRO COMO EL SLIDER */
        .projects-section {
            padding: 3rem 3rem 0;
            z-index: 9999999;
        }
        #image-box h3{
	        display:block; width:100%;
		    padding:1rem 0rem 1rem 4rem;
        }
        .projects-section-three{
            padding: 0 3rem;
            }

        .projects-container {
            max-width: 100%;
            margin: 0 auto;
        }
        
        .projects-container h2 {
		    padding: 0 1rem 2rem;
		    width:90%!important;
		    display:block;
		}

        /* Grid Layout: 25% izquierda | 75% derecha - ALTURAS CORREGIDAS SEGÚN REFERENCIA */
        .projects-grid {
            display: grid;
            grid-template-columns: 40% 60%;
            gap: 0;
            margin: 0;
        }
        
        .projects-grid-two {
            display: grid;
            grid-template-columns: 60% 40%;
            gap: 0;
            height: 100vh;
            margin: 0;
        }

        /* Columna izquierda: imagen arriba + contenido abajo */
        .project-left {
            display: flex;
            flex-direction: column;
        }

        /* Imagen izquierda: MENOS ALTA (60vh) - SIN BORDER RADIUS */
        .project-left-image {
            margin: 0 10px;
        }

        /* Contenido izquierdo: altura restante (40vh) - POSICIÓN RELATIVA PARA EL AÑO */
        .project-left-content {
            height: 40vh;
            padding:1rem 1.25rem;
            display: flex;
            flex-direction: column;
            justify-content: start;
            color: white;
            position: relative;
        }
        
        .projects-grid-two .project-left-content{padding:1rem 1rem!important;}

        .project-left-title {
            margin-bottom: 0.5rem;
        }

        .project-left-meta {
            font-size: 0.875rem;
            color: #ccc;
            margin-bottom: 1rem;
        }

        .project-left-description {
            margin-bottom: 2rem;
        }

        .project-left-highlight {
            color: white;
        }

        /* AÑO EN ESQUINA SUPERIOR DERECHA - LADO IZQUIERDO */
        .project-left-year {
            position: absolute;
            top: 1rem;
            right: 1.5rem;
            font-size: 1rem;
            font-weight: 500;
            color: #ccc;
        }

        /* Columna derecha: imagen arriba + contenido abajo */
        .project-right {
            display: flex;
            flex-direction: column;
        }

        /* Imagen derecha: MÁS ALTA (80vh) - SIN BORDER RADIUS - SEGÚN REFERENCIA */
        .project-right-image {
            margin: 0 10px;
        }

        /* Contenido derecho: altura restante (20vh) - POSICIÓN RELATIVA PARA EL AÑO */
        .project-right-content {
            height: 20vh;
            padding: 1rem 0 1rem 1.25rem;
            display: flex;
            flex-direction: column;
            justify-content: start;
            position: relative;
        }
        .projects-grid-two .project-right-content{padding: 1rem 1rem!important;}
        .project-right-title, .project-left-title {
            margin-bottom: 0.25rem;
            color:#ff9f01!important;
            font-size:1.75rem!important
        }

        .project-right-meta {
            font-size: 1rem;
            opacity: 0.9;
            margin-bottom: 0.5rem;
        }

        /* AÑO EN ESQUINA INFERIOR DERECHA - LADO DERECHO */
        .project-right-year {
            position: absolute;
            top: 1rem;
            right: 2rem;
            font-size: 1.125rem;
            font-weight: 500;
            color: #ccc;
        }

        .view-all-btn {
            display: inline-flex;
            align-items: center;
            gap: 1rem;
            padding: 1.25rem 3rem;
            background: #333;
            color: white;
            border: none;
            border-radius: 3rem;
            font-weight: 500;
            font-size: 1rem;
            text-decoration: none;
            transition: all 0.3s ease;
            margin: 0 auto;
            display: flex;
            width: fit-content;
        }

        .view-all-btn:hover {
            background: #555;
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }


#sectionCinco{ float: left; justify-content: center; align-items: center; width: 100%; padding:4rem 0 2rem; position: relative}
#tallerHome {
    display: block;
    width: 100%;
    border-radius: 20px;
    margin: 0px auto;
    padding: 0 8rem;
    min-height: 100vh;
}

.inner-container {
    display: flex;
}
.boxTaller {
    float: left;
    width: 66%;
    padding-right: 4rem;
}
#tallerHome h1{font-size: 3rem; font-weight:200; margin-bottom:1rem; color:#fff}
#tallerHome h2 {float: left; width: 100%; font-size:1.5rem; margin-bottom:1.25rem; color:#fff;}
#tallerHome p {padding: 0 0 0.75rem; color:#7c7d7d;}
#tallerHome b {float: left; width: 100%; letter-spacing:.03rem; color: #fff; line-height:2.75rem; font-size: 1rem}
#tallerHome li b {float: left; width: 100%; letter-spacing:.03rem; color: #fff; line-height:2.75rem; font-size: 1.25rem}
.mt{float: left; width: 100%; margin:.25rem 0 3rem;}
.boxTaller ul {
    float: left;
    width: 100%;
    margin-bottom:3rem
}
#tallerHome li {
    padding: 0 0 .25rem 0; color:#7c7d7d;
}
#incluye li {
    float: left;
    width: 100%;
    padding: 0 0 .5rem;
    list-style: disc;
    margin-left: 20px;
}

#tallerImagenTwo {
    float: left;
    width: 33%;
    background:#999;
    height:600px;
}
#tallerImagenTwo img {
    width: 100%;
}
.redBotonCien {
    background: #945285;
    width: 100%;
    float: left;
    margin: 20px auto 20px;
    border-radius: 6px;
    padding: 14px 20px;
    text-align: center;
}
.redBoton strong, .redBotonCien strong {
    display: block;
    letter-spacing: 0px;
    color: #fff;
}
#reservar span {
    float: left;
    width: 100%;
}
.videoTexto {
    padding: 10px 0;
    display: block;
    width: 100%;
    text-align: center;
    font-weight: 200;
}
#reservar span {
    float: left;
    width: 100%;
}

#seccionSeis{float: left;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding:0 4rem 4rem;
    position: relative;}
#seccionSeis .setenta img {
    width: 48%;
    margin: 20px 1%;
    float: left;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
#seccionSeis .treinta strong {
    display: block;
    margin: 40px 0 10px;
}
#seccionSeis p {
    padding: 0 0 10px;
    font-size: .9rem;
}
#seccionSeis h4{float: left; width: 100%; font-size: 1.5rem; margin-bottom: 1.25rem; color: #fff; margin:1rem 0;}

/* Awards Section Styles - CORREGIDO */
        .awards-section {
            background: #00388c;
            color: white;
            padding: 8rem 0 2rem;
            align-items: center;
            float:left;
            width:100%;
        }

        .awards-container {
            width: 100%; /* CONTENEDOR AL 100% */
            max-width: none; /* Sin límite máximo */
            margin: 0;
            padding: 0 4rem;
        }

        /* TÍTULO ARRIBA - Centrado */
        .awards-header {
            text-align: left;
            margin-bottom: 4rem;
        }

        .awards-header h5 {
                color: #fff;
                font-weight:900;
        }

        .awards-header h3 {
		    color: #ffffff;
		    font-weight:500;
		    
		}
		.awards-header h2 {
		    color: #ffffff;
		    font-weight:300;
		    
		}

        /* TRES COLUMNAS - Excelencia + 2 párrafos */
        .awards-description-section {
            display: grid;
            grid-template-columns: 1fr 1.75fr;
            gap: 4rem;
            align-items: start;
            width: 100%;
            margin: 0 auto 0rem auto;
        }

        .awards-description-section h3 {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 0;
        }
        .awards-description-section p {
		    color: #ffffff;
        }

        .awards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
            gap: 1.5rem;
            width: 100%;
            margin: 0 auto;
            padding: 8rem 4rem;
        }

        .award-card {
            border-radius: 0.75rem;
            text-align: center;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            position: relative;
            overflow: hidden;
        }

        .award-card:hover {
            transform: translateY(-4px);
        }

        .award-logo {
            width: 100%;
            border-radius: 0.5rem;
            margin: 0 auto 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            font-size: 1.5rem;
            color: white;
            position: relative;
        }
        .award-logo img{width:60px;}

        .award-name {
            font-size: 0.875rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: white;
        }

        .award-year {
            font-size: 0.75rem;
            color: #9ca3af;
            font-weight: 400;
        }


.icon {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Video Section */
#videoVdos {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
#videoVTres {
  position: relative;
  height: 95vh;
  width: 100%;
  overflow: hidden;
}



  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  overflow: hidden;
}
#miContenedorDeVideoDos {

  top: 0;
  left: 0;
  width: 100%;
  height: 95vh;
  z-index: 0;
  overflow: hidden;
}

#miContenedorDeVideo video, #miContenedorDeVideoDos video {
  object-fit: cover;
  display: block;
}
#miContenedorDeVideo, #miContenedorDeVideoDos { will-change: transform; }
#miVideo {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  transition: height 0.2s ease-out, opacity 0.2s ease-out;
  min-height: 220px;
  max-height: 100vh;
  z-index: 0;
}
#miVideoDos {
  width: 100%;
  height: 95vh;
  object-fit: cover;
  transition: height 0.2s ease-out, opacity 0.2s ease-out;
  min-height: 220px;
  max-height: 100vh;
  z-index: 0;
}

#contenidoDebajo {
  position: relative;
  z-index: 1;
  background: white;
  padding: 100vh 20px 200px;
}






	#videoBox {
    float: left;
    width: 100%;
    background: #141418;
}

#misControles {
    position: absolute;
    bottom: 14px;
    z-index: 999;
    width: 23px;
    right: 16px;
}
#misControles div {
    cursor: pointer;
}
#misControles div img {
    width: 18px;
}	

footer p {
  transition: opacity 0.3s ease-out;
  margin-top:10rem
}
footer h4{color:#69b0f1!important}
footer.visible p {
  opacity: 1;
}
.js-mail{    font-size: 1.4rem;
    border: 1px solid #fff;
    margin: 1rem 0;
    letter-spacing: 5px;
    padding: 0rem 2rem;
    float: left;}
.copyright {
  display: flex;
  justify-content: space-between; /* texto izq, imagen der */
  align-items: flex-end;          /* alinea ambos al fondo */
  width: 100%;
  font-size: 1rem;
  padding-bottom: 1rem;
  color: #fff;
}

.copyright span {
  flex: 1;                        /* ✅ ocupa todo el ancho disponible */
  text-align: left;
  white-space: normal;            /* permite que el texto haga línea completa */
}

.copyright a {
  color: inherit;
  margin-left: .5rem;
  text-decoration: underline;
}

.copyright img {
  display: block;
  width: 198px;                   /* ajusta según tamaño */
  margin-left: 1rem;              /* separación del texto */
  align-self: flex-end;           /* asegúrate de que quede abajo */
}

#contenedorVideo{background:#00388c;}
/* Estructura general */


/* Box Section */
#image-box {
  float: left;
  width: 100%;
  padding: 0;
  background: #00388c;
}

.wrap-box {
  float: left;
  width: 100%;
  position:relative;
}
.wrap-box h2{position: absolute; left: 0px; top: 0px; z-index: 999; padding: 2rem; text-transform: uppercase; line-height:40px;}
.wrap-box h2.fontCuatro svg {
    width: 60px;
    height: 24px;
    float: left;
    margin-top: 10px;}
.titleText{line-height:40px; float:left;}
.full-box-fix {
  float: left;
  width: 100%;
      overflow: hidden;
    position: relative;
}

.half-box {
  float: left;
  width: 50%;
      overflow: hidden;
    position: relative;
}

.half-box-hfifty {
  float: left;
  width: 50%;
      overflow: hidden;
    position: relative;
}

.wide-box-hfifty {
  float: left;
  width: 100%;
  height: 60vh;
      overflow: hidden;
    position: relative;
}

.wide-box-hveinte {
  float: left;
  width: 100%;
  height: 50vh;
}

/* Efecto de zoom limpio */
.zoom-inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.6s ease;
}

.zoom-inner:hover {
    transform: scale(1.02);
    box-shadow: 1px -112px 98px -43px rgba(0,0,0,0.53) inset;
-webkit-box-shadow: 1px -112px 98px -43px rgba(0,0,0,0.53) inset;
-moz-box-shadow: 1px -112px 98px -43px rgba(0,0,0,0.53) inset;
  cursor: pointer;
}
.zoom-inner-first {
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.6s ease;
  box-shadow:inset 0 40px 60px rgb(0 0 0 / 35%), 0 10px 25px rgba(0, 0, 0, 0.05);
}
.zoom-inner-first:hover{
	transform: scale(1.02);
    box-shadow: inset 0px -17px 60px rgb(0 0 0 / 40%), 0px -19px 25px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.wrap-box span {position: absolute; bottom:4rem;  left: 6rem;  }
.wTreinta{width:43%}
.wSesenta{width:90%;}
.wrap-box span strong{color:#fff!important; text-shadow: 0px 0px 8px #000000a1;}
.wrap-box span p{color:#fff!important; font-size:1.25rem;  text-shadow: 0px 0px 8px #000000a1; font-weight:300}
.animar-span {
  opacity: 0;
  transform: translateY(30px);
}
.hover-effect-span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  filter: blur(4px);
  transition: all 0.5s ease;
}

.hover-container:hover .hover-effect-span {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}


/* General hover-effect-span para otros casos */
.hover-effect-span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  filter: blur(4px);
  transition: all 0.5s ease;
}

/* Para el bounce-effect, redefine sin translateY y blur */
.bounce-effect .hover-effect-span {
  transform: scale(0);
  opacity: 0;
  filter: none;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Al hacer hover en el contenedor bounce-effect */
.bounce-effect:hover .hover-effect-span {
  transform: scale(1);
  opacity: 1;
  filter: none;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.la-huerta-box .zoom-inner span {
  display: inline-block;
  opacity: 0;
  transform: translateX(-40px) rotateY(3deg);
  transition: opacity 0.8s ease, transform 0.8s ease;
  width: 33%;
  color: #fff;
}
.botonVermas {float: right;
    float: left;
    margin:0rem 4rem 0 0;
    color: #000;
    font-size: 2rem;
    
}
.arrow-icon {
  transform: rotate(45deg); /* ↗ inicio */
  transition: transform 2s ease;
}

.botonVermas:hover .arrow-icon {
  transform: rotate(90deg); /* ↑ en hover */
}
.botonVermas .arrow-icon{width:94px; height:94px; transition: color 0.3s ease;}


.botonVermas:hover .arrow-icon {
  color: #036ce4; 
}

.small{animation: linear 15s rotate infinite}
.medium{animation: linear 30s rotate reverse infinite}

.scroll-circles {
  position: fixed;
  right: 30px;
  top: 40%;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.scroll-circles .circle.circle-white {
  background-color: #fff; 
}
.scroll-circles .circle.circle-blue {
  background-color: #0e53a3;
}

.scroll-circles a {
  position: relative;
  display: block;
}

.scroll-circles .circle {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #fff;
  transition: background-color 0.3s, transform 0.3s;
}

.scroll-circles .circle:hover {
  background-color: #066ce4;
  transform: scale(1.2);
}

/* Texto oculto y animado */
.scroll-circles a span {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease;
  position: absolute;
  right: 30px;
  width: 152px;
  top: -4px;
  background: #066ce4;
  color: white;
  padding: 4px 8px;
  text-align: center;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  transform: translateX(10px);
  pointer-events: none;
  white-space: nowrap;
}


/* Mostrar texto con animación suave */
.scroll-circles a:hover span {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.scroll-circles .circle.active {
  background-color: #066ce4;
  transform: scale(1.3);
  transition: all 0.3s ease;
}

@keyframes rotate {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}


/*---------------- DELEON ESTILOS ------------------*/
.acercadenosotros {width:100%;  display:block; background:#00388c; padding:4rem 4rem 4rem 4rem;}
.acercadenosotros-meta-label {font-weight:500; color:#00B7EB; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1.95rem;}
.parrafo p{ font-weight:500; color: #fff; text-transform: uppercase; opacity: 0; transform: translateY(16px);   will-change: opacity, transform; color:#0384c3; font-size:9.154rem; line-height: 8.7rem;}
 .parrafo p span{line-height: 7.6rem; color:#fff; font-weight:700}
.parrafoDos{float:right; width:69%;  padding:2rem 4rem 2rem 0; font-weight:200}
.parrafoDos p{font-weight:400;  color: #fff; font-weight:200}
.parrafoDos H1{font-size:8.8rem; font-weight:400; letter-spacing:0px; line-height:5.2rem; color: #fff;}
.parrafoTres p{font-size:2.2rem; font-weight:400; letter-spacing:0px; line-height:3.2rem; color: #fff;}
.parrafoTres strong{color: #fff; font-size: 3.8rem; padding: 2rem 0;}
.heading{float:left; width:100%; text-align:center; padding: 0 2rem; font-size:9.13rem; color:#fff}
.segundoParrafo borrar{margin-left:21%}
.cuartoParrafo borrar{margin-left:11%}


#proyectosIndex {
    display: block;
    width: 300px;
    margin: 4rem auto 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 300;
    border: 1px solid #fff;
    padding: .75rem 2rem;
    transition: background 0.3s ease-in-out;
}
#proyectosIndex:hover{background:#006ce0; color:#fff;}
/* multiscroll - estilos sólo si usas la sección */

#menu {
  position: fixed;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  list-style: none;
  display: flex;
  gap: 15px;
  z-index: 10;
}

#menu li a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}
h1{color: #fff}

.left, .right {
  width: 50%;
  height: 100%;
  position: relative;
  transition: transform 0.8s ease;
}

#multiscroll-section { will-change: transform; }
.left, .right { backface-visibility: hidden; transform: translateZ(0); }

#multiscroll-section { position: relative; display: flex; width: 100%; height: 100vh; position: relative; overflow: hidden;}
#multiscroll-section #menu { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); list-style: none; display: flex; gap: 15px; z-index: 999; }
#multiscroll-section #menu li a { color:#666; text-decoration:none; font-weight:bold; padding:6px 10px; border-radius:4px; }
#multiscroll-section #menu li.active a { background:#000; color:#fff; }
#myContainer { width:100%; height:100vh; background: url("../graphics/bebible.png") right top no-repeat; background-size: contain;}

.section { width:100%; height:100vh; display:flex; align-items:center; justify-content:center; font-size:2em; color:#fff; }
/* colores demo (puedes mover esto a tu CSS) */
.left .section:nth-child(odd) { background: #1bbc9b; }
.left .section:nth-child(even) { background: #4BBFC3; }
.right .section:nth-child(odd) { background: #7BAABE; }
.right .section:nth-child(even) { background: #f90; }


.left .section:nth-child(odd) { background: #1bbc9b; }
.left .section:nth-child(even) { background: #4BBFC3; }

.right .section:nth-child(odd) { background: #7BAABE; }
.right .section:nth-child(even) { background: #f90; }

#left1{background: url("../graphics/lala-left.png") right top no-repeat; background-size: cover;}
#right1{background: url("../graphics/lala-right.png") right top no-repeat; background-size: cover;}
#left2{background: url("../graphics/yogurth.webp") right top no-repeat; background-size: cover;}
#left3{background: url("../graphics/lala-left3.webp") right top no-repeat; background-size: cover;}

#image-box .zoom-inner,
#image-box .hover-container,
#firstBox-lenis { will-change: opacity, transform, clip-path; }

#image-box .open-center { overflow: hidden; } /* para que no “sangre” el clip */

/* accesibilidad */
@media (prefers-reduced-motion: reduce) {
  #image-box * { transition: none !important; animation: none !important; }
}


#aliado{display: block;
    margin: 8rem 0 4rem;
    width: 100%;
    text-align: center;
    background: #0249a8;
    padding: 8rem 4rem 8rem;}
#aliado a{background: #ff9f01;
    padding: .75rem 1.75rem;
    margin: 1.5rem auto;
    display: block;
    width: 420px;
    text-align: center;
    border-radius: 55px;
    font-weight: 400; transition: background 0.3s ease-in-out; color:#fff;}
#aliado a em{display:block; margin-top:.25rem}
#aliado a:hover{background:#f33b03}
#aliado h5{margin-top: 4rem; margin-bottom:.75rem}
#aliado h5 img{ display: block; text-align: center; width: 50px; margin: 0 auto 2rem;}
#aliado h3{margin-bottom:2rem}

footer {background: #060f5a; color: white; width: 100%; float: left; bottom: 0; left: 0; transition: height 0.3s ease-out; z-index: 9999; padding:4rem 8rem 0rem}
footer img {width:100%}
#proyectos-page-infra footer{padding: 8rem 8rem 8rem}

/* CSS (ponlo en tu CSS global o en <style>) */
#letter { display: inline;  font-weight:500}

.typed { display: inline; }

/* cada letra */
.typed .letter {
  display: inline-block;
  line-height: 1;
  will-change: transform, opacity;
  animation: bounceIn 480ms cubic-bezier(.34,1.56,.64,1) both;
}

/* cursor */
.typed_cursor {
  display: inline-block;
  margin-left: 6px;
  vertical-align: bottom;
  font-weight: 600;
  opacity: 1;
  animation: blink 1s steps(2, start) infinite;
}

.capabilities-description-section strong{float: left; width: 31%; color:#00D0FF}
.capabilities-description-section div{float: left; width: 69%;}
.capabilities-description-section p{padding-bottom:1.35rem}

/* CSS: evita saltos y reserva altura */
#letterDps{
  display:inline-block;
  min-height:1em;         /* altura de línea reservada */
  white-space:pre;        /* preserva espacios/tabs */
  vertical-align:baseline;
  will-change:transform, opacity;
}

/* ================================
   STEPS HORIZONTAL – ESTILOS BASE
   ================================ */

:root{
  --per-view: 3;     /* Tarjetas visibles por “página” (desktop) */
  --gap: 16px;       /* Separación horizontal entre tarjetas */
  --bg: #00388c;     /* Fondo de la sección */
  --text: #fff;      /* Color de texto principal */
  --text-dim: #d8d8d8;
}

@media (max-width:1024px){ :root{ --per-view: 2; } }
@media (max-width:640px){  :root{ --per-view: 1; } }

/* Sección y contenedor visible */
#steps-horizontal{
  position: relative;
  background: var(--bg);
  color: var(--text);
}
#steps-horizontal .steps-pin{
  position: relative;
  overflow: hidden;
  padding: 0 var(--gap); /* padding lateral igual al gap, evita recortes */
}

/* Track + Items */
#steps-horizontal .steps-track{
  display: flex;
  list-style: none;
  gap: var(--gap);
  margin: 0;
  padding: 0;               /* no padding aquí; lo lleva .steps-pin */
  min-height: 50vh;
  will-change: transform;
}

#steps-horizontal .step{
  /* Ancho exacto por vista descontando gaps para que entren N por página */
  flex: 0 0 calc((100% - (var(--gap) * (var(--per-view) - 1))) / var(--per-view));
  box-sizing: border-box;

  height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(16px, 1vw, 48px);
}
:root{
  --per-view: 3;
  --gap: clamp(8px, 2vw, 20px); /* gap responsivo */
  --bg: #00388c;
  --text: #fff;
  --text-dim: #d8d8d8;
}

@media (max-width:1024px){ :root{ --per-view: 2; } }
@media (max-width:640px){  :root{ --per-view: 1; } }

/* Sección */
#steps-horizontal{ position:relative; background:var(--bg); color:var(--text); }
#steps-horizontal .steps-pin{ position:relative; overflow:hidden; padding:0 var(--gap); }

/* Track + Items */
#steps-horizontal .steps-track{
  display:flex; gap:var(--gap);
  margin:0; padding:0; list-style:none;
  min-height:50vh; will-change:transform;
}

#steps-horizontal .step{
  /* ancho exacto por vista, descontando los gaps entre items */
  flex:0 0 calc((100% - (var(--gap) * (var(--per-view) - 1))) / var(--per-view));
  box-sizing:border-box;
  height:100%;
  display:grid; place-items:center;
  padding: clamp(12px, 1.2vw, 24px); /* un poco más compacto para evitar “huecos” */
}

/* Card (tu decisión de 100%) */
#steps-horizontal .card{
  width:100%;
  min-height:330px;
  border-radius:20px;
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 10px 40px rgba(0,0,0,0.35);
  padding:clamp(20px, 4vw, 28px);
  color:var(--text);
  will-change:transform, opacity;
}

/* Tipos */
#steps-horizontal .num img{ display:block; width:clamp(40px, 5vw, 72px); height:auto; }
#steps-horizontal h3{ margin:.2em 0 .4em; font-size:clamp(20px,4vw,36px); color:var(--text); }
#steps-horizontal p{ margin:0; line-height:1.5; color:var(--text-dim); }

/* Controles */
#steps-horizontal .steps-nav{ position:absolute; inset:0; pointer-events:none; }
#steps-horizontal .steps-nav .btn{
  pointer-events:auto; position:absolute; top:50%; transform:translateY(-50%);
  width:55px; height:55px; border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.25); color:#fff; font-size:22px; line-height:44px;
  text-align:center; cursor:pointer; backdrop-filter: blur(6px);
  transition: background .2s ease;
}
#steps-horizontal .steps-nav .btn:hover{ background:#ff9d00; }
#steps-horizontal .steps-nav .prev{ left:16px; }
#steps-horizontal .steps-nav .next{ right:55px; }

/* Pips */
#steps-horizontal .steps-pips{
  position:absolute; left:50%; bottom:-10px; transform:translateX(-50%);
  display:flex; gap:8px;
}
#steps-horizontal .steps-pips button{
  width:6px; height:12px; border-radius:50%; border:none; background:#666; opacity:.7; cursor:pointer;
}
#steps-horizontal .steps-pips button.is-active{ background:#fff; opacity:1; }
#steps-horizontal .steps-pin,
#steps-horizontal .steps-track {
  touch-action: pan-y;
}


#contactoIcon {
    position: fixed;
    bottom:10px;   /* distancia desde abajo */
    right: 10px;    /* distancia desde la derecha */
    z-index: 9999;  /* que quede por encima de todo */
    display: inline-block;
    width:50px;
    background:transparent;
    text-align:center;
  }
#contactoIcon span {
    background: #00388c70;
    float: left;
    margin-bottom: 1rem;
    padding: 1rem 0;
    border-radius: 10px;
    backdrop-filter: blur(2px);
}
#contactoIcon span {
    background: #00388c70;
    float: left;
    margin-bottom: 1rem;
    padding: 1rem 0;
    border-radius: 10px;
    backdrop-filter: blur(2px);
}
  .smallIcon {float:left; width:100%; text-align:center}
  .smallIcon img{width:26px!important; height:26px!important; margin:0 auto 14px; background:transparent; display: block;}

  #contactoIcon img {
    width: 50px;     /* tamaño del ícono */
    height: 50px;
    transition: transform 0.3s ease;
  }

  #contactoIcon img:hover {
    transform: scale(1.1);
  }

/* Contexto de posicionamiento */
#about-section-two { position: relative; }

/* LÍNEA VERTICAL */
#about-section-two .scroll-line{
  --x: 2%;                 /* 2%, 50%, 80%, etc. */
  position: absolute;
  top: 81px;               /* separada del top */
  bottom: 0;               /* hasta el final de la sección */
  left: var(--x);
  width: 2px;              /* grosor */
  background: rgb(0,183,235);   /* color válido */
  transform-origin: top center;
  transform: scaleY(0);         /* empieza oculta */
  pointer-events: none;
  z-index: 3;                   /* > contenido */
}

/

/* Contenido debajo de las líneas (pero visible e interactivo) */
#about-section-two > :not(.scroll-line):not(.scroll-line-h){
  position: relative;
  z-index: 2;
}

#about-section-two .scroll-line-h{
  --y: 97%;                 /* posición vertical: 0% arriba, 50% centro, etc. */
  position: absolute;
  left: 4%; right: 4%;        /* ocupa todo el ancho de la sección */
  top: var(--y);
  height: 2px;              /* grosor de la línea */
  background: rgb(0,183,235);
  transform-origin: left center;
  opacity: 0;               /* oculta antes de que JS setee el estado inicial */
  pointer-events: none;
  z-index: 3;
}

#redesTextFooter li{
	float: left;
    padding: .05rem .5rem 0rem 1.75rem;
    color: #fff;
    font-weight: 100 !important;
    text-align: right;
    width: 100%;
    letter-spacing: 2px;
    font-size:1rem;
}
#redesTextFooter li a{font-weight:300!important; color:#fff; }

/* Contenedor general */
.logo-rails{
  display: grid;
  gap: clamp(12px, 2vw, 24px);
  margin-top:4rem;
}

/* Viewport: recorta el track que se mueve */
.marquee-viewport{
  position: relative;
  width: 100%;
  padding:2rem;
  overflow: hidden;
  /* 👇 opcional: desvanecido en bordes (mejora visual) */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

/* El UL funciona como "track" animado */
.logo-row{
  --gap: clamp(28px, 4vw, 56px);
  --h: clamp(26px, 5vw, 44px);  /* altura uniforme de logos */
  --dur: 30s;                   /* duración por defecto */
  display: flex;
  gap: var(--gap);
  align-items: center;
  width: max-content;           /* clave para el loop */
  margin: 0;
  padding: 0;
  list-style: none;
  animation: marquee var(--dur) linear infinite;
  will-change: transform;
}

/* Dirección del segundo carril (derecha) */
.logo-row[data-direction="right"]{
  animation-direction: reverse;
}

/* Ajusta duración (velocidad) con data-attribute */
.logo-row[data-duration]{
  --dur: attr(data-duration s); /* algunos navegadores no soportan attr() en CSS vars */
}

/* Items */
.logo-row li{ flex: 0 0 auto; }
.logo-row img{
  max-height:80px;
  width: auto;
  display: block;
  object-fit: contain;
  filter: saturate(.95);
  opacity: .95;
  transition: transform .2s ease, opacity .2s ease;
}
.logo-row img:hover{ transform: scale(1.05); opacity: 1; }

.btnBoxes {
    position: relative;
    padding: .65rem 2.5rem .65rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    background: none;
    /* border: 2px solid #ffffff; */
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    float: left;
    margin-top: 1.15rem;
}
.zoom-inner .btnBoxes img, .zoom-inner-first .btnBoxes img{width: 26px!important;
    margin-right: .55rem;
    margin-top: 4px;
    padding-left: .55rem;
    float: left;}

.liquid {
  background: linear-gradient(#ff3c00 0 0) no-repeat calc(200% - var(--p, 0%))
    100% / 200% var(--p, 0.2em);
  transition: 0.3s var(--t, 0s),
    background-position 0.3s calc(0.3s - var(--t, 0s));
    
}

.liquid:hover {
  --p: 100%;
  --t: 0.3s;
  color: #fff;
  padding-left: .55rem;
}


.marginBottomContact{float: left; width: 100%; text-align: center;}
.marginBottomContact img{margin-bottom:0px!important}
footer p{font-weight:300!important}
#enlacesFooter li{float:left; margin:.75rem 1.50rem 0 0;}
#enlacesFooter li a{font-weight:300}

#proyectos-page{background:#fff}
#proyectos-page footer{padding-top:4rem}
.mainPicture{display:block; width:100%}
.mainPicture img{width:100%; display:block}
#tags-section{padding: 6rem 3rem;}
.projects-sectionn{padding: 6rem 3rem 3rem;}
.projects-grid {display: grid; grid-template-columns: 55% 45%; gap: 0; margin: 0;}
.project-title{ margin-bottom: 0.25rem; color: #00388C!important; font-weight: 400; padding-right: 2rem;}
.project-title em{font-style: italic; font-weight:800}
.project-description{color:#00388C!important; margin-bottom: 2rem;}
.project-meta {color:#fe3f03!important;  margin-bottom: 1rem;}
.project-meta em{background: #eee; padding: 0rem .75rem; margin-right: .55rem; color: #00388c; font-size: .85rem; border-radius: 4px; height: 28px; float: left; line-height: 27px;}
.project-content { padding: 1rem 1.25rem; display: flex; flex-direction: column; justify-content: start; color: white; position: relative;}
.project-title b{font-weight:800; color:#00388C!important;}
.zoom-inner-proyect {width: 100%; height: 100%; overflow: hidden; transition: transform 0.4s ease, box-shadow 0.6s ease;}
.zoom-inner-proyect:hover {transform: scale(1.02);cursor: pointer;}

/* Animación: con dos copias, -50% es un ciclo perfecto */
@keyframes marquee{
  to{ transform: translateX(-50%); }
}

/* Modo “reduce motion”: pausa animación */
@media (prefers-reduced-motion: reduce){
  .logo-row{ animation: none; }
}
#formIndex{display: block; width:100%; margin:0 auto;}
#formIndex label{
	display: block;
    color: #00b7eb;
    text-align: left;
    padding-bottom: 10px;
    font-weight: 300;
    padding-left: 10px;
    font-size: .95rem;
    font-weight: 500;
}
#formIndex .cincuenta{float:left; width:46.3%; margin:1rem 2rem .25rem 0;}
#formIndex .cien{float:left; width:100%; margin:1rem 1rem 0rem 0rem;}
#formIndex .input {
    float: left;
    width: 100%;
    height: 62px;
    padding: 0px 10px;
    background: none;
    border: none;
    border-bottom: 1px solid #8fb7ed;
    color: #fff;
    font-size:1.65rem;
    font-weight:200
}
#formIndex .select {
  float: left;
  border: none;
  height: 62px;
  background: none;
  border-bottom: 1px solid #8fb7ed;
  color: #ffffff;
  width: 95.5%;
  padding: 0px 20px 0 6px;
  transition: all 0.3s ease;
  font-size: 1.65rem;
  font-weight: 200 !important;
  background-color: #00388c; 
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
#formIndex .select option {
  background-color: #00388c; 
  color: #fff;
  font-size: 1rem;
}
#formIndex .select::-ms-expand {
  display: none;
}
#formIndex .select option[disabled] {
  color: rgba(255,255,255,0.5);
}
#formIndex .select:focus {
  outline: none;
  border-bottom: 1px solid #ff9d00;
}

#formIndex .select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg ...%3C/svg%3E"); /* si quieres icono */
  background-repeat: no-repeat;
  background-position: right 10px center;
}


#formIndex .select.active {
  background: #94a9d6;
  color: #fff;
}
/* el texto cambia a blanco */
.select.hasValue {color: #fff!important;}
#formIndex ::placeholder{color:#fff; font-weight:400!important}
#formIndex .cien .input{width:95.4%}
#formIndex textarea:placeholder{font-size:1.65rem; font-weight:300; font-family:"proxima-nova",sans-serif;}
#formIndex textarea{
	float: left;
    border: none;
    height: 124px;
    background: none;
    border-bottom: 1px solid #8fb7ed;
    color: #fff;
    width: 95.5%;
    padding: 20px 20px 20px 13px;
    font-size:1.65rem;
    font-family:"proxima-nova",sans-serif;
    }
#formIndex .input:focus, #formIndex textarea:focus {border:none; border-bottom: 1px solid #ff9d00;}
input[type="checkbox"]:checked {accent-color: #0249a8; height: 20px;}
.checklist{float:left;}
#formIndex span{color:#fff; float:left; margin-left:10px}
#enviar{display:block; width:46.4%; background:none; border:1px solid #fff; color:#fff; padding:.75rem 1.75rem; margin-top:1rem; font-size: 1.65rem;  letter-spacing:5px;  transition: all 0.3s ease; cursor: pointer} 
#enviar:hover{background:#de3a08}


/* ========= LOADER AISLADO Y SIN CONFLICTOS ========= */
:root {
  /* valores por defecto (por ejemplo index) */
  --circle-duration: .7s;
  --backdrop-duration: .4s;
  --timing: ease-in-out;
  --azul-oscuro: #00255a; /* fondo por defecto */
  --circle-color: #ffffff; /* círculo blanco */
}

/* === Personalización por página === */
body#proyectos-page-la_huerta {
  --azul-oscuro: #00513b; 
  --circle-color: #ffffff;    /* círculo sigue blanco */
  background: #00388c!important;
}

body#proyectos-page-country_lakes {
  --azul-oscuro: #d8b44a; 
  --circle-color: #ffffff;    /* círculo sigue blanco */
  background: #00388c!important;
}

body#proyectos-page-del_monte {
  --azul-oscuro: #ce4400; 
  --circle-color: #ffffff;    /* círculo sigue blanco */
  background: #f0f2f4!important;
}

body#proyectos-page-rekord {
  --azul-oscuro: #ff5454; 
  --circle-color: #ffffff;    /* círculo sigue blanco */
  background: #f0f2f4!important;
}

body#proyectos-page-nutri {
  --azul-oscuro: #002e20; 
  --circle-color: #ffffff;    /* círculo sigue blanco */
  background: #f0f2f4!important;
}

/* Página de proyectos */
body#proyectos-page-lala {
  --azul-oscuro: #c3231c;     /* fondo rojo */
  --circle-color: #ffffff;    /* círculo sigue blanco */
}

/* Página de contacto */
body#contacto-page {
  --azul-oscuro: #005fe0;     /* azul brillante */
  --circle-color: #f2f2f2;    /* tono gris claro */
}

/* El contenedor crea nuevo contexto y va por encima de todo */
#app-loader{
  position: fixed;
  inset: 0;
  z-index: 2147483647; /* máximo práctico */
  isolation: isolate;  /* evita mezclar stacking con lo demás */
  pointer-events: auto; /* capturamos eventos para bloquear hovers abajo */
}
/* Dentro del loader, nada necesita eventos, solo el contenedor bloquea */
#app-loader *{
  pointer-events: none;
}

/* Fondo azul mientras se encoge el círculo blanco */
#app-loader .backdrop{
  position: absolute;
  inset: 0;
  background: var(--azul-oscuro);
  animation: appLoaderBackdropFade var(--backdrop-duration) var(--timing) forwards;
  animation-delay: calc(var(--circle-duration) - .3s);
}

#app-loader .circle{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200vmax;
  height: 200vmax;
  background: #ffffff8a;     /* círculo blanco */
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  animation: appLoaderShrink var(--circle-duration) var(--timing) forwards;
  box-shadow: 0 0 36px rgba(255,255,255,.6); /* leve glow */
  will-change: transform, opacity;
}

/* Animaciones con nombres únicos para que no choquen */
@keyframes appLoaderShrink {
  0%   { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
  70%  { transform: translate(-50%, -50%) scale(0.01); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0);    opacity: 0; }
}
@keyframes appLoaderBackdropFade { to { opacity: 0; } }

/* Contenido: aparece al final (clase la agrega el script) */
#page-content{
  opacity: 0;
  transition: opacity .6s ease-in;
}
body.reveal #page-content{ opacity: 1; }

/* ====== BLOQUEO DE HOVERS/CURSOS/ANIM MIENTRAS CARGA ====== */
/* Mientras el loader está activo, desactivamos interacciones debajo */
body.loader-active{
  cursor: wait;
}
/* Sin hovers, sin transiciones ni animaciones sobre el resto del sitio */
body.loader-active *:not(#app-loader):not(#app-loader *){
  pointer-events: none !important;
  animation-play-state: paused !important;
  transition: none !important;
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  #app-loader .circle, #app-loader .backdrop { animation-duration: .01s !important; }
}


#circle-loader {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200vmax; /* grande para cubrir toda la pantalla */
  height: 200vmax;
  background-color: #00388c;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  z-index: 9999;
  animation: shrinkCircle 1.2s ease-in-out forwards;
}

/* Animación inversa: de lleno a pequeño */
@keyframes shrinkCircle {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  70% {
    transform: translate(-50%, -50%) scale(0.01);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}

#page-content {
  opacity: 0;
  transition: opacity .6s ease-in;
  z-index: 1;
}

#page-content.show {
  opacity: 1;
}

/* ==============================
	Acordion
============================== */


/* anchor links */
#acordion a {
	text-decoration: none;
	color: #00388C;
	transition: all ease-in-out;
	backface-visibility: hidden;
}
.nav-item-inner-heading:hover{color: #ff9d00!important;}
#acordion p{color: #00388C;}

#acordion .ul-reset {
	padding-left: 0;
	margin-top: 0;
	margin-bottom: 0;
	list-style: none;
}

#tags-section{display: grid; grid-template-columns: 38% 62%; gap: 0; margin: 0; background: #00388c;}
#contact-section{display: grid; grid-template-columns: 35% 64%; gap: 0; margin: 0; background: #00388c; padding:6rem 0}
#contact-section .specialHeader img{width:100%}
#contact-section .project-content{padding:0rem 4rem 1rem 2rem}
#contact-section .description p{font-weight:300; color:#fff; margin-bottom:2.25rem;}
.specialHeader{
	font-weight: 600;
    line-height: 6.6rem;
    font-size: 5.875rem;
    margin-bottom: .25rem;
    color: #00b7eb;
    letter-spacing: -1px;
    display: block;
}
.specialHeader i{font-style: normal; font-weight: 600; line-height: inherit;  }
#tags-section .description h1{color:#00388C!important}
#contact-section .description h1{color:#00388C!important}
.project-tags em {
    background: #006ce4;
    padding: 0rem .75rem;
    margin-right: .55rem;
    color: #fff;
    font-size: .85rem;
    border-radius: 4px;
    height: 30px;
    float: left;
    line-height: 27px;
    margin-top: 1.25rem;
}
.project-tags em:hover{background:#ff9d00; transition: all 0.2s ease; cursor: none; color:#fff}
#tags-section .description em, #contact-section .description em {
    font-style: italic;
    font-weight: 800;
}

#acordion .nav-wrapper {
	width: 100%;
	margin: auto;
}

/* jQuery Accordion Navigation Menu */
#acordion .nav-item {
	border-bottom: 1px solid #7b8bb9;  border-top: 1px solid #343434;
	&:first-child {
		border-top: none;
	}
}
.nav-item p{font-weight:300; padding-bottom:1.25rem; color:#fff!important}
.nav-item a span{    float: right;
    border-radius: 24px;
    -moz-border-radius: 24px;
    -webkit-border-radius: 24px;
    transition: all 0.1s ease;
    height: 42px;
    width: 42px;
    text-align: center;
    padding:1px; background:#006ce0;}
.nav-item a span img{height:32px; margin-top:2px;}
.minus span{border: 2px solid #7b8bb9; background:none!important;}
.bold{font-weight:700}
#acordion .nav-item-inner {
	> a {
		display: block;
	}
}

#acordion-images .slider li {
  position: relative;
}
#acordion-images .slider li::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.28);
  opacity: .25;                          /* base visible */
  transition: opacity .35s ease;
  pointer-events: none;                 /* no bloquea el hover */
}
#acordion-images .slider li:hover::before{
  opacity: 2;                         /* más oscuro al hover */
}


#acordion .nav-item-inner-heading {
	position: relative;
	display: block;
	width:100%;
	font-size:1.99rem;
	padding: 1.25rem 0;
	font-weight: 700;
	color:#fff;
	&:focus {
		opacity: 1;
	}
	&.minus:after,
	&.plus:after {
		position: absolute;
		top: 50%;
		right: .75rem;
		transform: translateY(-50%);
		width: 1rem;
		text-align: center;
		font-family: FontAwesome;
		font-style: normal;
		font-size: .6rem;
		color: GoldenRod;
	}
}

#acordion .nav-sub-list {
	display: none;
	font-size: 1rem;
	overflow: hidden;
	padding-bottom: 1.25rem;
}
.nav-item a span img {
  height: 32px;
  transform: rotate(0deg);
  transition: transform 0.9s cubic-bezier(0.25, 1.5, 0.5, 1);
}

.nav-item a.minus span img {
  transform: rotate(45deg);
}


/*Accordion Images Capabilities */
#acordion-images{
    display: block;
    padding:0rem;
    overflow: hidden;
}

#acordion-images .slider {
 list-style: none;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: nowrap;
    width: 100%;
    height: 90vh;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}
#acordion-images .slider li {
  position: relative;
  background: none no-repeat center/cover;
  min-height: 100%;
  overflow: hidden;
  flex-grow: 1;
  transition: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
#acordion-images .slider li:hover {
  flex-grow: 5;
}
#acordion-images .slider li:hover h1 {
  transform: rotateZ(0) translateY(0);
}
#acordion-images .slider li:hover p {
  transform: translateY(calc((100% + 2rem) * -1)) rotateZ(0);
}
#acordion-images .slider a {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: 1px -17px 52px 15px rgb(0 0 0 / 28%) inset;
-webkit-box-shadow: 1px -17px 52px 15px rgb(0 0 0 / 28%) inset;
-moz-box-shadow: 1px -17px 52px 15px rgb(0 0 0 / 28%) inset;
}
#acordion-images .slider h2 {
position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    margin: 0;
    font-size: 2.2rem;
    color: white;
    text-transform: uppercase;
    transform-origin: left top;
    transform: rotateZ(90deg) translateY(-1em);
    font-family: sans-serif;
    transition: 0.25s cubic-bezier(0.35, 0, 0, 1);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    font-weight: 900;
    width:500px

}
#acordion-images .slider p{
  position: absolute;
  bottom: 1rem;
  left: 2rem;
  right: 0;
  padding: 1.25rem;
  color: #fff;
  line-height: 1.5;
  height: 100px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.8s ease 0.25s, /* entra con un pequeño retraso */
    transform 0.8s ease 0.25s;
  pointer-events: none;
}
#acordion-images .slider h1 {
  position: absolute;
  bottom: 4rem;
  left: 2rem;
  right: 0;
  padding: 1.25rem;
  color: #fff;
  line-height: 1.5;
  height: 100px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.8s ease 0.25s, /* entra con un pequeño retraso */
    transform 0.8s ease 0.25s;
  pointer-events: none;
  font-weight: 800;
}

#acordion-images .slider li:hover p, #acordion-images .slider li:hover h1 {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


#acordion-images .slider .one, #acordion-mobile .one {
  background-image: url(https://deleon-pro.com/assets/graphics/estrategiademarca-deleon.webp);
}
#acordion-images .slider .two, #acordion-mobile .two {
  background-image: url(https://deleon-pro.com/assets/graphics/produccionimpression-deleon.webp);
}
#acordion-images .slider .three, #acordion-mobile .three {
  background-image: url(https://deleon-pro.com/assets/graphics/disenografico-deleon.webp);
}
#acordion-images .slider .four, #acordion-mobile .four {
  background-image: url(https://deleon-pro.com/assets/graphics/arquitectura-deleon.webp);
}
#acordion-images .slider .five, #acordion-mobile .five {
  background-image: url(https://deleon-pro.com/assets/graphics/index-lahuerta.webp);
}
#acordion-images .slider .six, #acordion-mobile .six{
  background-image: url(https://deleon-pro.com/assets/graphics/camion-infra.webp);
}
#acordion-images .slider .seven, #acordion-mobile .seven {
  background-image: url(https://deleon-pro.com/assets/graphics/proyecto-lala.png);
}
#acordion-images .slider .eight, #acordion-mobile .eight {
  background-image: url(https://deleon-pro.com/assets/graphics/del-monte-ajo.webp);
}
#acordion-images .slider .nine, #acordion-mobile .nine {
  background-image: url(https://deleon-pro.com/assets/graphics/country-lakes-brandbook.webp);
}
#acordion-images .slider .ten, #acordion-mobile .ten {
  background-image: url(https://deleon-pro.com/assets/graphics/imperfacil-familia.webp);
}
#acordion-images .slider .eleven, #acordion-mobile .eleven {
  background-image: url(https://deleon-pro.com/assets/graphics/rekord.png);
}
#acordion-images .slider .twelve, #acordion-mobile .twelve {
  background-image: url(https://deleon-pro.com/assets/graphics/familia-nutri-slide.webp);
}

#capabilities-page acercadenosotros, #trabajos-page acercadenosotros{
	    padding: 4rem 4rem 0rem 4rem;
}

#capabilities-page .acercadenosotros-meta-label, #trabajos-page .acercadenosotros-meta-label {
    color: #ffffff;
}

#capabilities-page .parrafo p, #trabajos-page .parrafo p {
    font-size: 6.754rem;
    line-height: 6.9rem;
}

#capabilities-page .parrafo p span, #trabajos-page .parrafo p span {
    line-height: 6.8rem;
}

#capabilities-page .parrafoDos, #trabajos-page .parrafoDos {
    float: right;
    width: 69%;
    padding: 2rem 10rem 2rem 0;
    font-weight: 200;
    line-height:2rem;
 }
.hero{
	padding:0 0 6rem;
}

#capabilities-page #tags-section, #trabajos-page #tags-section{grid-template-columns: 100% 0%;  background: #00388c; padding: 0rem 3rem 3rem;}
#capabilities-page #acordion .nav-item, #trabajos-page #acordion .nav-item {
    border-bottom:1px solid #89b6ed;
}
#capabilities-page #acordion a, #trabajos-page #acordion a {
    color: #ffffff; transition: all 0.4s ease; 
}
#capabilities-page .nav-item-inner-heading:hover, #trabajos-page .nav-item-inner-heading:hover {
    color: #0384c3 !important;
}
#capabilities-page .nav-item p, #trabajos-page .nav-item p {
    color: #fff!important;
}
#capabilities-page .nav-sub-list strong, #trabajos-page .nav-sub-list strong{color:#0384c3!important; margin-bottom:.5rem;}
#capabilities-page .nav-sub-list b, #trabajos-page .nav-sub-list b{display: block;
    margin-top: 2.95rem;
    font-size: 1.414rem;
    font-weight: 300;
    margin-bottom: .75rem;}
#capabilities-page .nav-sub-list span, #trabajos-page .nav-sub-list span{background: #006ce0; float: left; margin-right: .75rem; padding: .25rem .75rem; margin-top: .55rem; border-radius: 4px;}

#capabilities-page .nav-sub-list li, #trabajos-page .nav-sub-list li{float:left; width:100%;}
#capabilities-page .project-content, #trabajos-page .project-content{padding: 1rem 3.25rem;}

/* ===== Tu grid actual (lo dejas igual) ===== */
.grid:after { content: ""; display: block; clear: both; }
.grid-sizer, .grid-item { width: 33.33%; }
.grid-item { float: left; }
.grid-item:hover { cursor: pointer; }
.grid-item img { display: block; max-width: 100%; }

/* Si expandes a 2 columnas, que flote igual y quede arriba */
.grid-item.grid-item__expanded { width: 66.66%; z-index: 2; }

/* ===== Ajustes mínimos para overlay ===== */
.grid-item {
  position: relative;     /* Necesario para posicionar el overlay */
  overflow: hidden;       /* Evita que el overlay se salga */
}

/* Capa oscura sutil que aparece al hover */
.grid-item .grid-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;             /* invisible por defecto */
  text-decoration: none;
  transition: opacity .2s ease;
  z-index: 3;             /* por encima de la imagen y contenido */
  pointer-events: none;   /* no bloquea clicks normales cuando NO hay hover */
}

/* Al hacer hover, muestra overlay y permite click en él */
.grid-item:hover .grid-overlay {
  opacity: .8;
  pointer-events: auto;   /* ahora sí capta el click para abrir enlace */
}

/* Botón/ícono de lupa centrado */
.grid-item .grid-overlay .zoom-icon {
  width: 56px; height: 56px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.grid-item .grid-overlay svg {
  width: 20px; height: 20px; display: block;
}

/* Si el item está expandido, ocultamos el overlay (opcional) */
.grid-item.grid-item__expanded .grid-overlay { opacity: 0; pointer-events: none; }

/* ===== Tus tabs (los puedes dejar igual) ===== */
#buttonGroup { text-align:center; padding: 0 0 4.25rem 0; display:block; width:100%; padding:0rem 4rem 4rem }
#buttonGroup a:hover { background-color:#006ce0!important; color:#fff!important }
#buttonGroup li { display: inline; text-align:center; margin:.75rem .45rem; float:left; }
#buttonGroup li a { background: #fff; color: #0396c4; padding: .45rem 1rem; border-radius: 26px; transition: all 0.4s ease; }
.is-active a { background-color:#006ce0!important; color:#fff!important }
.hero-foot .container { float:left; width:100%; padding-bottom:4rem }

/* ===== (Opcional) Responsive simple ===== */
@media (max-width: 1024px) {
  .grid-sizer, .grid-item { width: 50%; }
  .grid-item.grid-item__expanded { width: 100%; }
}
@media (max-width: 640px) {
  .grid-sizer, .grid-item,
  .grid-item.grid-item__expanded { width: 100%; }
}


#acerca_de_nosotros-page .parrafo p {font-size: 4.754rem; line-height: 4.9rem;}
#acerca_de_nosotros-page .parrafo p span { line-height: 5.3rem;}
#acerca_de_nosotros-page .acercadenosotros-meta-label{color:#fff;}

.contacto {width: 100%; display: block; background: #00388c; padding:10rem 5rem 0rem 2rem; background:url("../graphics/contacto-deleon.png") right top no-repeat; height:70vh}

#contacto-page .parrafoDos {width: 100%; padding:8rem 15rem 2rem 15rem; text-align:center;}

#contacto-page .parrafo p { text-align:center; color: #fff;}

#contacto-page .acercadenosotros-meta-label{text-align:center}
#contacto-page .parrafo p span {color:#00b7eb;}

.cincuentaHeigh{height:65vh}


.half-box img{width:100%; float:left;}
.contact-modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgb(2 51 125);;
}

.contact-modal-content {
  background: rgb(2 51 125);
  position: relative;
  animation: fadeIn 0.3s ease;
  padding:6rem 0;
  display: block;
  width: 960px;
  margin: 0 auto;
}

.close-modal {
  position: absolute;
  right: 0rem;;
  top: 4rem;
  font-size: 2rem;
  cursor: pointer;
  color:#fff;
}

#address {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  font-size: 16px;
  line-height: 1.6;
  color: #222;
  padding:8rem 5%;
  background:#006ce0!important;
}
.titContact{width:36%; }
#address h2{
	    color: #fff;
    font-weight: 400;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.addres-One{border-right: 1px solid #fff; margin-right:0 2rem; float: left;}

#address > div {
  width: 29%;
}

#address p {
  margin: 0;
  white-space: pre-line; /* respeta los <br> */
  font-weight:200;
}

#logosSeccion{}
#logosSeccion strong {
    text-align: center;
    color: #fff;
    display: block;
}
#logosSeccion em {
    display: block;
    width: 100%;
    text-align: center;
    color: #69b0f1;
}
#logoPrincipal{width: 300px; margin: 2rem auto 4rem; display: block;}
#logoPrincipal img{width:100%}
#logosSeccion em{display: block; width: 100%; text-align: center; color:#69b0f1;}
#logosSeccion .treinta {float: left; width: 38.3%; color:#69b0f1; padding: 0 40px;}
#logosSeccion .veinte {float: left; width: 23.3%; color:#69b0f1; margin-bottom:4rem}
#logosSeccion .veinte img{width:100%}
#logosSeccion .tright{text-align:right}
#logosSeccion .tleft{text-align:left;}
#logosSeccion .treinta a{display: block;
    border: 2px solid #ce8333;
    width: 180px;
    letter-spacing: 2px;
    text-align: center;
    padding: .3rem 0;
    margin-top: .5rem;
    color: #ce8333;
    font-size: .9rem;  transition: all 0.4s ease; }
#logosSeccion .treinta a:hover{background:#ce8333; color:#fff }

.heightCien{height:100vh}
.heightCincuenta{height:50vh}

#buttonSelect { display:none; }



/* Mostrar/ocultar versiones */
  #acordion-images { display:block; }
  #acordion-mobile  { display:none; }
  @media (max-width:768px){
    #acordion-images { display:none; }
    #acordion-mobile  { display:block; }
  }

  /* ===== Slider mobile (1 por vista) ===== */
  #acordion-mobile .viewport{
    position:relative; width:100%; height:80vw; max-height:520px;
    overflow:hidden;
  }
  #acordion-mobile .track{
    display:flex; height:100%;
    transform:translateX(0); transition:transform .35s ease;
    will-change: transform;
  }
  #acordion-mobile .slide{
    min-width:100%; height:100%;
    position:relative; background-size:cover; background-position:center;
    color:#fff;
  }
  #acordion-mobile .slide::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,0) 35%, rgba(0,0,0,.7) 100%);
  }
  #acordion-mobile .content{
    position:absolute; left:0; right:0; bottom:0; z-index:1;
    padding:14px 16px 18px;
  }
  #acordion-mobile h2{ margin:0 0 6px; font-size:1.1rem;}
  #acordion-mobile p{ margin:0 0 10px; font-size:.95rem; opacity:.95;}
  #acordion-mobile .btn{
    display:inline-block; padding:8px 14px; border-radius:999px;
    border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.12);
    color:#fff; text-decoration:none; font-size:.95rem;
  }

  /* Flechas */
  #acordion-mobile .ctrl{
    position:absolute; top:50%; transform:translateY(-50%);
    width:42px; height:42px; border:0; border-radius:999px;
    background:rgba(0,0,0,.5); display:grid; place-items:center;
    cursor:pointer; z-index:2;
  }
  #acordion-mobile .ctrl svg{ width:20px; height:20px; stroke:#fff; }
  #acordion-mobile .prev{ left:8px; display: none}
  #acordion-mobile .next{ right:8px; display: none }
  
  /* ====== MODO FADE (override) ====== */
#acordion-mobile .track{
  position: relative;        /* deja de ser un carril horizontal */
  display: block;            /* ya no necesitamos flex aquí */
  height: 100%;
  transform: none !important; /* cancelamos cualquier translateX anterior */
}

#acordion-mobile .slide{
  position: absolute; inset: 0;
  min-width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 800ms ease; /* duración del fade */
}

#acordion-mobile .slide.active{
  opacity: 1;
  z-index: 1;              /* el activo arriba */
}

/* El link de cobertura sigue cubriendo todo el slide */
#acordion-mobile .cover-link{
  position: absolute; inset: 0; z-index: 2; display: block;
}

#videoVdosMobile{display: none}



/* --- Responsivo --- */
@media (max-width: 768px) {
  #address {
    flex-direction: column;
    text-align: center;
  }

  #address > div {
    width: 100%;
    margin-bottom: 30px;
  }
}


@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}


/* keyframes */
@keyframes blink { 50% { opacity: 0 } }

@keyframes bounceIn {
  0%   { transform: translateY(-40%) scale(.6); opacity: 0; }
  40%  { transform: translateY(0) scale(1.08); opacity: 1; }
  60%  { transform: translateY(-6px) scale(.98); }
  100% { transform: translateY(0) scale(1); }
}


@keyframes topbar-x { 0% { top: 0;
    -webkit-transform: rotate(0deg); }
  45% { top: 25%;
    -webkit-transform: rotate(145deg); }
  75% { -webkit-transform: rotate(130deg); }
  100% { -webkit-transform: rotate(135deg); } }

@keyframes topbar-back { 0% { top: 25%;
    -webkit-transform: rotate(135deg); }
  45% { -webkit-transform: rotate(-10deg); }
  75% { -webkit-transform: rotate(5deg); }
  100% { top: 0;
    -webkit-transform: rotate(0); } }

@keyframes bottombar-x { 0% { bottom: 0;
    -webkit-transform: rotate(0deg); }
  45% { bottom: 25%;
    -webkit-transform: rotate(-145deg); }
  75% { -webkit-transform: rotate(-130deg); }
  100% { -webkit-transform: rotate(-135deg); } }

@keyframes bottombar-back { 0% { bottom: 25%;
    -webkit-transform: rotate(-135deg); }
  45% { -webkit-transform: rotate(10deg); }
  75% { -webkit-transform: rotate(-5deg); }
  100% { bottom: 0;
    -webkit-transform: rotate(0); } }
    
 .typed .letter {display: inline-block; line-height: 1; will-change: transform, opacity; animation: smoothBounce 600ms cubic-bezier(.25,1.25,.5,1) both;}

@keyframes smoothBounce {
  0%   { transform: scale(0.3); opacity: 0; }
  50%  { transform: scale(1.2); opacity: 1; }
  70%  { transform: scale(0.9); }
  85%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}