/*---------------- 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}
.interiores {padding-top:100px;}
.interiores header {background:#333;}
html {overflow-x:hidden; height:100%;}
ol,ul,li {list-style:none; font-weight:lighter; line-height:1.55rem; font-weight:300}
p{font-weight: 400; font-size: 1.15rem; line-height: 1.75rem;  letter-spacing: .05rem; color: #000;}
.smallFont{font-size:1rem!important;}
b {font-weight:800; font-size:1rem; line-height:1.55rem; letter-spacing:.05rem}
.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}
.fontUno{letter-spacing:0px;  color:#333; font-size:7.993rem; font-weight:900; line-height:8rem;}
.fontDos{letter-spacing:0px;  color:#333; font-size:5.653rem; font-weight:100; letter-spacing: -4px; line-height:5.5rem;}
.fontTres{letter-spacing:0px;  color:#333; font-size:3.998rem; font-weight:300; letter-spacing: -1.4px; line-height:4.2rem;}
.fontCuatro{letter-spacing:0px;  color:#333; font-size:2.827rem; font-weight:300; letter-spacing: -1.8px; line-height:3.2rem;}
.fontCinco{letter-spacing:0px;  color:#333; font-size:1.999rem; font-weight:600; letter-spacing: 0px; line-height:2rem;}
.fontSeis{letter-spacing:0px;  color:#333; font-size:1.414rem}
.mBottom{margin-bottom:.75rem}
.colorWhite{color:#fff!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);}

/*---------------- 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-family:"Source Sans 3", sans-serif; font-optical-sizing:auto; font-weight:<weight>; font-style:normal;}
.roboto, #titleText, #titleText em {font-family:"Roboto", sans-serif; 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%; font-family:'Montserrat'; color:#fff; padding:170px 0;}
.texto h1 {margin-top:20px;}
.texto strong {font-size:.9em; float:left; width:100%; margin-top:20px;}
.texto p {font-size:.8em; 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: 14px!important; margin-left: 11px;}
.bar2 {opacity:1;}
.bar3 {bottom:0; animation:bottombar-back 500ms; animation-fill-mode:both; animation-play-state:initial !important; width: 14px!important; margin-left: 11px;}
.menu-bar + .menu-bar {margin-top:8px;}
.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; font-family:'Work Sans', sans-serif;}
.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:1.5px;}
.menu-bar {display:block; position:relative; background:#fff; width:26px; height:1.5px; border-radius:1px; transition:all 300ms;}
#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: radial-gradient(circle at center, #126199 0%, #0a0f2c 150%); padding:0; z-index:999999; display:flex; align-items:center; justify-content:center;}

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

#mobil {display:flex; flex-direction:column;}
#menu-toggle { position:absolute; z-index:9999999999999999999; top: 14px; right: 15px; 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}

/*---------------- Header ------------------*/
#logo {
    position: absolute;
    width: 95px;
    margin: 1.3rem 0 0px 4rem;
    padding: 0;
}
#logoFooter {display:block; width:100px; margin:100px auto 0;}
#logo img, #logoFooter img {width:100%;}
header {display:block; width:100%; padding:0px 0 10px 0; position:fixed; z-index:99999; top:0; left:0; height:100px; margin:0 auto;     }
header nav {float: right;
    margin: 1rem 17rem;
    font-size: 1rem;
    font-weight: 600;}
header nav li {float:right;}
#menuContacto {
    position: fixed;
    top: 1.5rem;
    right: 2rem;
    z-index: 999999;
    background: #21212152;
    padding: 10px 10px 10px 20px;
    width: 225px;
    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;
    font-family: 'Raleway', sans-serif;
    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-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: #eee;
  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{
	        float:left;
		    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 {
            margin-bottom: 0.25rem;
        }

        .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: #036ce4;
            color: white;
            padding: 8rem 0;
            min-height: 100vh;
            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:100;
		    
		}

        /* 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;
}

footer {
  background: #036ce4;
  color: white;
  width: 100%;
  height: 0px;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  transition: height 0.3s ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  box-shadow: -5px -5px 38px #0000006b;
}

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

#miContenedorDeVideo {

  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  overflow: hidden;
}
#videoVdos{z-index: 0px;}
#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;
}

#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;
}



@media only screen and (max-width:1366px) {
	#videoVdos {width: 100%; margin:0rem auto 0;}
}

@media only screen and (max-width:1280px) {
#mainVideo{height:738px}
#videoVdos {width: 95%; margin: 8rem auto 0;}
}


@media only screen and (max-width: 1024px){
	#videoVdos { margin: 8rem auto 0; width: 730px;}
}


@media only screen and (max-width:798px){
	#videoVdos {margin: 6rem auto 0; width: 100%;}
	
	}
	

footer p {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

footer.visible p {
  opacity: 1;
}
#contenedorVideo{background:#00388c;}
/* Estructura general */


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

.wrap-box {
  float: left;
  width: 100%;
}

.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;
  box-shadow:
    inset 0 40px 60px rgb(0 0 0 / 64%), 0 10px 25px rgba(0, 0, 0, 0.05);
}

.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: 4rem;  }
.wTreinta{width:33%}
.wSesenta{width:67%;}
.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;}
.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: 20px;
  top: 50%;
  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;
  border: 1px solid #999;
  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: 24px;
  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);
  }
}

@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); } }