/*
    Template Name: Classic - Minimal CV/Personal Portfolio
    Version: 1.0
    Author: BulkStudio
    Author URI: http://bulkstudio.com
    Description: CV, Resume, Portfolio Minimal HTML5 Template
*/

/* -------------------------------------
           Table of Contents
* -------------------------------------- 
    0.  Global
    1.  Menu
    2.  Header
    3.  About
    4.  Skills
    5.  Education & Work Experience
    6.  Testimonials
    7.  Work Process
    8.  Portfolio
    9.  Fun facts
    10. Contact
    11. Extras
            11.1  Loader
            11.2  Line art
            11.3  Texture
            11.4  Social links
            11.5  Owl Carousel Modified
    12. Responsive

*/


/* -------------------------------------
            0. GLOBAL
* ------------------------------------- */
body {
    font-family: "Roboto Mono", monospace, sans-serif; 
    height: 100%;
    color: #2c2c2b;
    font-size: 15px;
    line-height: 1.75;
}

p {
    font-size: 15px;
    line-height: 1.78;
    color: #2c2c2b;
    margin: 0 0 16px;
    letter-spacing: -0.1px;
}

.section-holder p {
    color: #2c2c2b;
    font-size: 15px;
    line-height: 1.78;
}

.faq-item {
    margin-bottom: 18px;
}

.faq-item h4 {
    font-size: 15px;
    font-weight: 700;
    margin: 14px 0 8px 0;
    color: #101010;
    line-height: 1.4;
}

.faq-item p {
    color: #2c2c2b;
    font-size: 14px;
    line-height: 1.72;
    margin-bottom: 12px;
}

.time-item p {
    color: #2c2c2b;
    font-size: 15px;
    line-height: 1.75;
}

a, a:hover, a:visited, a:active, a:focus {
    color: #101010;
    font-weight: 500;
    text-decoration: none;
}

a:hover {
    font-weight: 700;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Lato', sans-serif;
    margin: 20px 0;
    color: #101010; 
}

section {
    margin-bottom: 30px;
    padding: 50px 0 0 0; 
    position: relative;
}

.btn-cl {
    color: #101010;
    border: 1px solid #2c2c2b;
    padding: 8px 18px;
    background: transparent;
    border-radius: 0;
    outline: none;
    font-size: 13px;
    font-family: 'Roboto Mono', monospace;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    text-decoration: none;
    line-height: 1.4;
}

.btn-cl i {
    font-size: 15px;
    line-height: 1;
    color: #2c2c2b;
    transition: color 0.2s ease;
}

.btn-cl:hover, 
.btn-cl:focus, 
.btn-cl:active {
    color: #ffffff !important;
    background: #2c2c2b !important;
    border-color: #2c2c2b !important;
    outline: none;
    box-shadow: none;
    text-decoration: none;
}

.btn-cl:hover i, 
.btn-cl:focus i, 
.btn-cl:active i {
    color: #ffffff !important;
}

.btn-cl:visited {
    color: #101010;
    border-color: #2c2c2b;
}

.btn-cl:visited:hover,
.btn-cl:visited:focus {
    color: #ffffff !important;
    background: #2c2c2b !important;
    border-color: #2c2c2b !important;
}

.btn-cl:visited:hover i,
.btn-cl:visited:focus i {
    color: #ffffff !important;
}

.booking-btn {
    min-width: 155px;
    height: 42px;
    margin: 0 6px 10px !important;
}

.sep-mini {
    margin-top: 30px;
    width: 20px;
    position: relative;
    height: 1px;
    background: #101010;
}

.icon-holder {
    display: inline-block;
    position: relative;
}

.i-size-big {
    font-size: 60px;
}

.i-size-med {
    font-size: 40px;
}

.i-size-small {
    font-size: 30px;
}

.i-size-big, .i-size-med, .i-size-small {
    color: #101010;
}

.icon-holder:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 1px;
    background: #101010;
}

.icon-holder-center {
    display: inline-block;
    position: relative;
    margin: 0 auto;
}

.icon-holder-center:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 50%;
    height: 1px;
    background: #101010;
}

.section-holder {
  border: 1px solid #aaa;
  padding: 30px 30px 50px; 
}

.section-title {
    position: relative;
}

.section-title:before {
    content: '';
    position: absolute;
}

.section-big-title {
    position: absolute;
    opacity: 1;
    bottom: 0;
    left: 0;
    display: inline-block;
    font-size: 180px;
    font-weight: 700;
    z-index: -1;
    margin: 0;
    color: #ececec;
}


/* -------------------------------------
            1. MENU & LANGUAGE SWITCHER
* ------------------------------------- */
.lang-switcher-top {
    position: absolute;
    top: 24px;
    right: 28px;
    z-index: 990;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-family: 'Roboto Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.lang-switcher-top a {
    color: rgba(255, 255, 255, 0.6) !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
    padding: 2px 3px;
}

.lang-switcher-top a:hover {
    color: #ffffff !important;
}

.lang-switcher-top .lang-active {
    background: transparent !important;
    color: #ffffff !important;
    font-weight: 700;
    border-bottom: 2px solid #ffffff;
    padding: 2px 3px;
}

.lang-switcher-top .lang-sep {
    color: rgba(255, 255, 255, 0.3);
    font-weight: 300;
}

.lang-switcher-light {
    position: absolute;
    top: 24px;
    right: 28px;
    z-index: 990;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-family: 'Roboto Mono', monospace;
    font-size: 13px;
    font-weight: 500;
}

.lang-switcher-light a {
    color: #888888 !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
    padding: 2px 3px;
}

.lang-switcher-light a:hover {
    color: #101010 !important;
}

.lang-switcher-light .lang-active {
    background: transparent !important;
    color: #101010 !important;
    font-weight: 700;
    border-bottom: 2px solid #101010;
    padding: 2px 3px;
}

.lang-switcher-light .lang-sep {
    color: #cccccc;
    font-weight: 300;
}
    opacity: 0.65;
}

.lang-switcher-top .lang-active {
    background: #101010;
    color: #ffffff !important;
    padding: 1px 5px;
}

.lang-switcher-top .lang-sep {
    color: #aaa;
    font-weight: 400;
}

.menu {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 999;
    padding: 20px 40px 20px 20px;
}

.menu-ul {
    padding: 0;
    list-style: none;
    display: none;
    transition: opacity .15s ease-in;
    margin: 0 0 15px;
    border-bottom: 1px solid #aaa;
}

.menu-ul li {
    margin-bottom: 20px;
}

.menu-ul li.current a {
    border-bottom: 2px solid #101010;
}

.menu.menu-active {
    background: rgba(255,255,255,.8);
}

.menu.menu-active .menu-ul {
    display: block;
    opacity: 1;
}

.menu.menu-active .menu-bar {
    background: none;
}

.menu.menu-active .menu-bar:before {
    top: 0;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}

.menu.menu-active .menu-bar:after {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    bottom: 0;
}

.menu.menu-active .menu-holder {
    background: transparent;
}

.menu-holder {
    width: 50px;
    height: 50px;
    position: relative;
    background: rgba(255,255,255,.8);
    cursor: pointer;
}

.menu-bar {
    height: 2px;
    background: #101010;
    position: absolute;
    top: 24px;
    left: 8px;
    right: 8px;
}

.menu-bar:after, .menu-bar:before {
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #101010;
    content: "";
    transition-property: top, -webkit-transform;
    transition-property: top, transform;
    transition-property: top, transform, -webkit-transform;
    transition-duration: .25s;
    transition-timing-function: cubic-bezier(.23,1,.23,1);
    transition-delay: transform .35s ease-in;
}
.menu-bar:before {
    top: -12px;
}

.menu-bar:after {
    bottom: -12px;
}


/* -------------------------------------
            2. HEADER
* ------------------------------------- */
.header {
    background-size: cover;
    background-position: center;
    height: 400px;
    width: 100%;
    position: relative;
}

.header:before {
    content: '';
    background: linear-gradient(to right,#101010 50%, #444);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: .2;
}

.header:after {
    content: '';
    background: url('assets/images/pattern.png');
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: .8;
}

.sector {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    color: #fff; 
    z-index: 1;
}

.sector .box {
    display: inline-block;
    border: 1px solid #f8f8f8;
    padding: 5px 20px;
}

.sector .box h1 {
    color: #fff;
}

.sector .main-title {
    margin: 30px 0;
    font-size: 75px;
    font-weight: 300;
    color: #fff;
}

.sector .tagline {
    margin-bottom: 0;
    color: #fff;
}

/* -------------------------------------
            3. ABOUT
* ------------------------------------- */
.img-holder {
    position: relative;
    margin: 20px auto 30px; 
    text-align: center;
}

.img-holder img {
    margin: 0 auto !important;
    display: inline-block;
}

.tweet {
    margin-top: 20px;
}

.tweet ul {
    list-style: none;
    margin: 0;
    padding: 0
}
.cv-download {
    float: right;
    color: #101010;
}

.tooltip-cl {
    display: inline-block;
    position: relative;
}

.tooltip-cl:hover:after {
    background: #101010;
    bottom: 40px;
    color: #fff;
    font-weight: 400;
    font-size: 11.5px;
    content: attr(data-tooltip);
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    padding: 4px 10px;
    position: absolute;
    z-index: 999;
    white-space: nowrap;
    border-radius: 2px;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* Normalización de Iconos: Font Awesome 6 + Academicons (Solo iconos limpios, proporcionados y sin círculos) */
.social-links {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 22px;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #222222;
    font-size: 21px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.social-links a:hover {
    color: #000000 !important;
    background: transparent;
    transform: scale(1.2);
}

.social-links a i,
.social-links a .ai {
    font-size: 21px;
    line-height: 1;
    display: inline-block;
}

.pub-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 14px;
    margin-bottom: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: #101010;
    text-decoration: none;
    transition: all 0.2s ease;
}
.pub-link:hover {
    color: #555;
    text-decoration: underline;
}
.pub-link i,
.pub-link .ai {
    font-size: 16px;
    line-height: 1;
}

/* -------------------------------------
          4. SKILLS
* ------------------------------------- */
.skill-title {
    text-align: right;
    position: relative;
}

.skill-title:after {
    content: '';
    position: absolute;
    right: 0;
    width: 20px;
    background: #101010;
    height: 1px;
    bottom: -5px;
}

.skillbar {
    position:relative;
    display:block;
    margin-bottom:10px;
    width:100%;
    transition:0.4s linear;
    transition-property:width, background-color;
    padding:15px 0;
}

.skillbar-title {
    position: relative;
    font-size: 14px;
    color: #101010;
    z-index: 100;
    display: block;
    width: 100%;
}

.skillbar-title span {
    display: block;
    height: 35px;
    line-height: 35px;
    text-align: right;
}

.skillbar-bar {
    height:2px;
    width:0;
    z-index:10;
    position:absolute;
    right: 0;
    background: #101010;
}

.skill-bar-percent {
    position:absolute;
    left:0;
    top:15px;
    font-size:12px;
    height:35px;
    line-height:35px;
    color:#aaa;
    z-index: 100;
}

.skillbar-bg {
    width: 100%;
    height: 2px;
    background: #aaa;
    position: absolute;
    z-index: 0;
}


/* -------------------------------------
    5. EDUCATION & WORK EXPERIENCE
* ------------------------------------- */
.time-line {
    position: relative;
}

.time-item {
    padding: 15px 0;
    position: relative;
}

.time-year {
    position: absolute;
    top: 18px;
    right: 0;
    font-size: 20px;
    color: #b0b0b0;
    opacity: 0.8;
    font-weight: 500;
}

.icon-holder-time {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 22px;
    left: -30px;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    background: #fff;
    font-size: 14px;
    width: 22px;
    height: 22px;
    line-height: 1;
    z-index: 2;
    color: #101010;
}

.i-size-big i,
.i-size-big .ai {
    font-size: 42px;
    color: #2c2c2b;
    line-height: 1;
    display: inline-block;
}

.i-size-small i,
.i-size-small .ai {
    font-size: 24px;
    color: #2c2c2b;
    line-height: 1;
    display: inline-block;
}

/* -------------------------------------
           6. TESTIMONIALS
* ------------------------------------- */
.owl-item .testi-item  img {
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
}

.testi-bottom {
    position: relative;
    border-top: 1px solid #aaa;
    margin-top: 40px;
}

.testi-icon {
    position: absolute;
    top: 0;
    margin: 0;
    right: 10%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    border: 1px solid #aaa;
    padding: 5px 15px;
    background: #fff;
}


/* -------------------------------------
          7. WORK PROCESS
* ------------------------------------- */
.process {
    padding: 0;
    margin: 0;
    text-align: center;
    width: 100%;
    list-style-type: none;
}

.process .icon-process {
    margin: 10px 0 -10px 0;
}

.process li {
    border: 1px solid #aaa;
    min-width: 120px;
    display: inline-block;
    margin: 10px 10px 18px;
}

.process .step {
    width: 20px;
    height: 20px;
    background-color: #101010;
    color: #fff;
    margin-bottom: 0;
    padding-top: 4px;
}


/* -------------------------------------
          8. PORTFOLIO
* ------------------------------------- */
.port-holder {
    margin-top: 10px;
}

.box-it {
    border: 1px solid #aaa;
    position: relative;
    margin-bottom: 30px;
}

.box-it:hover {
    background: rgba(16, 16, 16, .5);
}

.box-it:hover img {
    opacity: .8;
}

.box-it:hover .box-inner {
    opacity: 0;
}

.box-it img {
    opacity: 0;
}

.box-it:hover:before{
    background: none;
}

.box-it:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
}

.box-it .box-inner {
    position: absolute;
    top: 50%;
    width: 100%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    text-align: center;
}

/*
 Magnific popup
*/
.mfp-close {
    font-size: 40px;
    margin-bottom: 30px;
    cursor: crosshair !important;
}

.mfp-close i {
    cursor: pointer;
}

.popup-it, .popup-it:hover, .popup-it:focus {
    color: #444;
    text-decoration: none;  
}

.popup-it:focus {
    outline: none;
}

.mfp-zoom-out-cur {
    cursor: crosshair !important;
}


/* -------------------------------------
          9. FUN FACTS & PROYECTOS
* ------------------------------------- */
#fun-fact .counter,
#proyectos .counter {
    padding: 0;
    margin: 30px 0 0 0;
    text-align: center;
    width: 100%;
    list-style-type: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

#fun-fact .counter li,
#proyectos .counter li {
    border: 1px solid #ddd;
    text-align: center;
    display: inline-block;
    min-width: 220px;
    flex: 1 1 220px;
    max-width: 320px;
    min-height: 205px;
    padding: 28px 20px 32px;
    background: url("assets/images/texture.png");
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

#proyectos .counter li:hover {
    border-color: #2c2c2b;
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.07);
}

#proyectos .counter li a {
    display: block;
    color: #2c2c2b;
    text-decoration: none;
}

#proyectos .project-icon-box {
    width: 75px;
    height: 75px;
    margin: 0 auto 16px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#proyectos .project-icon-box svg,
#proyectos .project-icon-box img {
    max-width: 60px;
    max-height: 60px;
    width: auto;
    height: auto;
    filter: grayscale(100%) brightness(0.2);
    transition: all 0.3s ease;
}

#proyectos .counter li:hover .project-icon-box svg,
#proyectos .counter li:hover .project-icon-box img,
#proyectos .counter li:active .project-icon-box svg,
#proyectos .counter li:active .project-icon-box img {
    filter: none;
    transform: scale(1.1);
}

#proj-cpb:hover,
#proj-cpb:active {
    border-color: #3B829E;
    box-shadow: 0 8px 24px rgba(59, 130, 158, 0.18);
}

#proj-cpb:hover h4,
#proj-cpb:active h4 {
    color: #3B829E;
}

#proj-brifi:hover,
#proj-brifi:active {
    border-color: #E75A4D;
    box-shadow: 0 8px 24px rgba(231, 90, 77, 0.15);
}

#proj-brifi:hover h4,
#proj-brifi:active h4 {
    color: #E75A4D;
}

#proyectos .counter h4 {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin: 10px 0 0 0;
    color: #2c2c2b;
    transition: color 0.3s ease;
}

/* ------------ JHEY TOMPKINS CHARACTER-SPLIT GLITCH (Z STUDIO) ------------ */
#proj-zstudio h4 {
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin: 10px 0 0 0;
    color: #2c2c2b;
    letter-spacing: 0.5px;
}

#proj-zstudio h4 .char {
    --split: 50;
    color: transparent;
    position: relative;
    display: inline-block;
}

#proj-zstudio h4 .char.char-space {
    width: 0.3em;
}

#proj-zstudio h4 .char::before,
#proj-zstudio h4 .char::after {
    content: attr(data-char);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    color: #2c2c2b;
    -webkit-clip-path: var(--clip);
    clip-path: var(--clip);
}

#proj-zstudio h4 .char::after {
    --clip: inset(0 0 calc(var(--split) * 1%) 0);
    --shift-y: -20;
    --shift-x: 50;
    animation: jhey-shift-after 9.5s infinite steps(1);
}

#proj-zstudio h4 .char::before {
    --shift-x: -50;
    --shift-y: 0;
    --clip: inset(calc((95 - var(--split)) * 1%) 0 0 0);
    animation: jhey-shift-before 13s infinite steps(1);
}

/* Modificadores de desplazamiento por carácter */
#proj-zstudio h4 .char[data-char="Z"]::after,
#proj-zstudio h4 .char[data-char="s"]::after,
#proj-zstudio h4 .char[data-char="d"]::after {
    --shift-y: 25;
    --shift-x: 0;
}

#proj-zstudio h4 .char[data-char="t"]::before,
#proj-zstudio h4 .char[data-char="u"]::before,
#proj-zstudio h4 .char[data-char="o"]::before {
    --shift-y: -20;
    --shift-x: 40;
}

@keyframes jhey-shift-after {
    0%, 88%, 91%, 94%, 97%, 100% {
        transform: translate(0, 0);
    }
    89% {
        transform: translate(calc(var(--shift-x, 0) * 1%), calc(var(--shift-y, 0) * 1%));
    }
    90% {
        transform: translate(0, 0);
    }
    92% {
        transform: translate(calc(var(--shift-x, 0) * 1%), calc(var(--shift-y, 0) * 1%));
    }
    93% {
        transform: translate(0, 0);
    }
    95% {
        transform: translate(calc(var(--shift-x, 0) * -1%), calc(var(--shift-y, 0) * -1%));
    }
    96% {
        transform: translate(calc(var(--shift-x, 0) * 1%), calc(var(--shift-y, 0) * 1%));
    }
}

@keyframes jhey-shift-before {
    0%, 89%, 92%, 95%, 98%, 100% {
        transform: translate(0, 0);
    }
    90% {
        transform: translate(calc(var(--shift-x, 0) * 1%), calc(var(--shift-y, 0) * 1%));
    }
    91% {
        transform: translate(0, 0);
    }
    93% {
        transform: translate(calc(var(--shift-x, 0) * 1%), calc(var(--shift-y, 0) * 1%));
    }
    94% {
        transform: translate(0, 0);
    }
    96% {
        transform: translate(calc(var(--shift-x, 0) * -1%), calc(var(--shift-y, 0) * -1%));
    }
    97% {
        transform: translate(calc(var(--shift-x, 0) * 1%), calc(var(--shift-y, 0) * 1%));
    }
}

/* ------------ CYBERPUNK 2077 GLITCH EFFECT (Z STUDIO ONLY) ------------ */
#proj-zstudio {
    position: relative;
    user-select: none;
}

#proj-zstudio::before,
#proj-zstudio::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid transparent;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

#proj-zstudio.glitching::before {
    opacity: 0.9;
    border-color: #2ecdcd;
    box-shadow: 2px 0 12px rgba(46, 205, 205, 0.45);
    animation: cyber-box-glitch-1 0.65s steps(2, end) infinite;
}

#proj-zstudio.glitching::after {
    opacity: 0.9;
    border-color: #eb2d2d;
    box-shadow: -2px 0 12px rgba(235, 45, 45, 0.45);
    animation: cyber-box-glitch-2 0.65s steps(2, end) infinite;
}

#proj-zstudio.glitching {
    border-color: #2c2c2b !important;
    animation: cyber-card-shake 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* Aberración cromática en el SVG y en el título Z studio al pulsar */
#proj-zstudio.glitching .project-icon-box img,
#proj-zstudio.glitching .project-icon-box svg {
    filter: drop-shadow(-3px 0 0 rgba(46, 205, 205, 0.8)) drop-shadow(3px 0 0 rgba(235, 45, 45, 0.8));
    animation: cyber-icon-chroma 0.45s steps(2, end) infinite;
}

#proj-zstudio.glitching h4 {
    animation: cyber-title-chroma 0.45s steps(2, end) infinite;
}

#proj-zstudio.glitching h4 .char::before {
    color: #eb2d2d;
    text-shadow: 2px 0 #eb2d2d;
}

#proj-zstudio.glitching h4 .char::after {
    color: #2ecdcd;
    text-shadow: -2px 0 #2ecdcd;
}

@keyframes cyber-icon-chroma {
    0% { transform: scale(1.1) translate(0, 0); }
    25% { transform: scale(1.1) translate(-3px, 1px); filter: drop-shadow(-4px 0 0 #2ecdcd) drop-shadow(3px 0 0 #eb2d2d); }
    50% { transform: scale(1.1) translate(3px, -1px); filter: drop-shadow(3px 0 0 #2ecdcd) drop-shadow(-4px 0 0 #eb2d2d); }
    75% { transform: scale(1.1) translate(-2px, -1px); filter: drop-shadow(-3px 0 0 #2ecdcd) drop-shadow(4px 0 0 #eb2d2d); }
    100% { transform: scale(1.1) translate(0, 0); }
}

@keyframes cyber-title-chroma {
    0% { transform: translate(0, 0); text-shadow: -2px 0 0 #2ecdcd, 2px 0 0 #eb2d2d; }
    25% { transform: translate(-2px, 1px); text-shadow: 2px 0 0 #2ecdcd, -2px 0 0 #eb2d2d; }
    50% { transform: translate(2px, -1px); text-shadow: -3px 0 0 #2ecdcd, 3px 0 0 #eb2d2d; }
    75% { transform: translate(-1px, 0); text-shadow: 3px 0 0 #2ecdcd, -3px 0 0 #eb2d2d; }
    100% { transform: translate(0, 0); text-shadow: -2px 0 0 #2ecdcd, 2px 0 0 #eb2d2d; }
}

.zstudio-notice {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    margin: 0;
    padding: 0;
    border: none;
    animation: fadeInCyber 0.3s ease forwards;
}

.zstudio-notice.closing {
    animation: fadeOutCyber 0.35s ease forwards;
}

.cyber-glitch-text {
    position: relative;
    display: inline-block;
    font-family: 'Roboto Mono', monospace;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #2c2c2b;
    line-height: 1.4;
}

.cyber-glitch-text::before,
.cyber-glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.cyber-glitch-text.glitching::before {
    opacity: 0.9;
    color: #eb2d2d;
    text-shadow: 1px 0 #eb2d2d;
    animation: cyber-glitch-anim 0.6s steps(2, end) infinite;
}

.cyber-glitch-text.glitching::after {
    opacity: 0.9;
    color: #2ecdcd;
    text-shadow: -1px 0 #2ecdcd;
    animation: cyber-glitch-anim-2 0.6s steps(2, end) infinite;
}

@keyframes cyber-box-glitch-1 {
    0% { clip-path: inset(10% 0 70% 0); transform: translate(-3px, -2px); }
    20% { clip-path: inset(60% 0 15% 0); transform: translate(3px, 2px); }
    40% { clip-path: inset(30% 0 45% 0); transform: translate(-2px, 1px); }
    60% { clip-path: inset(80% 0 5% 0); transform: translate(4px, -1px); }
    80% { clip-path: inset(5% 0 80% 0); transform: translate(-3px, 2px); }
    100% { clip-path: inset(45% 0 35% 0); transform: translate(2px, -2px); }
}

@keyframes cyber-box-glitch-2 {
    0% { clip-path: inset(65% 0 10% 0); transform: translate(3px, 2px); }
    20% { clip-path: inset(15% 0 65% 0); transform: translate(-3px, -2px); }
    40% { clip-path: inset(75% 0 10% 0); transform: translate(2px, -1px); }
    60% { clip-path: inset(20% 0 60% 0); transform: translate(-4px, 1px); }
    80% { clip-path: inset(50% 0 25% 0); transform: translate(3px, -2px); }
    100% { clip-path: inset(10% 0 75% 0); transform: translate(-2px, 2px); }
}

@keyframes cyber-glitch-anim {
    0% { clip-path: inset(20% 0 60% 0); transform: translate(-3px, -1px); }
    20% { clip-path: inset(65% 0 10% 0); transform: translate(3px, 1px); }
    40% { clip-path: inset(40% 0 40% 0); transform: translate(-2px, 2px); }
    60% { clip-path: inset(80% 0 5% 0); transform: translate(3px, -1px); }
    80% { clip-path: inset(10% 0 75% 0); transform: translate(-3px, 1px); }
    100% { clip-path: inset(30% 0 50% 0); transform: translate(2px, -2px); }
}

@keyframes cyber-glitch-anim-2 {
    0% { clip-path: inset(60% 0 20% 0); transform: translate(3px, 1px); }
    25% { clip-path: inset(10% 0 70% 0); transform: translate(-3px, -1px); }
    50% { clip-path: inset(75% 0 15% 0); transform: translate(2px, -2px); }
    75% { clip-path: inset(30% 0 50% 0); transform: translate(-3px, 1px); }
    100% { clip-path: inset(50% 0 30% 0); transform: translate(3px, 2px); }
}

@keyframes cyber-card-shake {
    0%, 100% { transform: translateY(-4px) translate(0, 0); }
    15% { transform: translateY(-4px) translate(-4px, 2px); }
    30% { transform: translateY(-4px) translate(4px, -2px); }
    45% { transform: translateY(-4px) translate(-3px, -2px); }
    60% { transform: translateY(-4px) translate(3px, 2px); }
    75% { transform: translateY(-4px) translate(-2px, 1px); }
}

@keyframes fadeInCyber {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOutCyber {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(5px); }
}

#fun-fact .counter h1:before{
    position: absolute;
    content: '';
    background: #333;
    width: 20px;
    height: 1px;
    margin-top: 46px;
}

#fun-fact .counter .counter-icon {
    margin: 0 auto;
}


/* -------------------------------------
          10. CONTACT FORM
* ------------------------------------- */

.map-open {
    position: relative;
}

.map-open:after {
    content: '';
    position: absolute;
    left: 0;
    width: 20px;
    background: #101010;
    height: 1px;
    bottom: -10px;
}

#contact .form-control{
    border: 0;
    background: transparent;
    border-bottom: 1px solid #101010;
    box-shadow: none;
    border-radius: 0;
    -webkit-border-radius:0;
    -moz-border-radius:0;
}

#contact input, #contact textarea {
    text-indent: 10px;
}

#contact input.form-control{
    height: 50px;
}

#contact .form-control:focus {
    border-bottom: 1px solid #aaa;
    box-shadow: none;
}

#contact .form-control-feedback {
    left: 0;
    height: 50px;
    line-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #101010;
}

#contact .form-control-feedback i {
    font-size: 15px;
    line-height: 1;
}

#contact .message .form-control-feedback {
    height: 40px;
    align-items: flex-start;
    padding-top: 14px;
}

/* Icono de mano saludando con inclinación */
.wave-icon {
    transform: rotate(20deg);
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: 70% 70%;
}

.wave-icon.waving {
    animation: wave-hand 1.3s ease-in-out;
}

@keyframes wave-hand {
    0%, 100% { transform: rotate(20deg); }
    15% { transform: rotate(40deg); }
    30% { transform: rotate(8deg); }
    45% { transform: rotate(38deg); }
    60% { transform: rotate(12deg); }
    75% { transform: rotate(34deg); }
}

#msgSubmit {
    text-align: center;
    float: none;
    font-weight: 400;
    padding: 10px;
    font-size: 16px;
    color: #101010;
    border: 1px solid #aaa;
    transition: all .25s ease-in;
}

/* -------------------------------------
            11. EXTRAS
* ------------------------------------- */

/* ------------ 11.1 LOADER ------------ */
#loader{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 9999;;
}


#loader .box-one, #loader .box-two, #loader .box-three, #loader .box-four{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34px;
    height: 34px;
    border: 1px solid #101010;

}

#loader .box-one{
    -webkit-animation-name: loader-animation-one;
            animation-name: loader-animation-one;
    -webkit-animation-duration: 4s;
            animation-duration: 4s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
}

#loader .box-two{
    -webkit-animation-name: loader-animation-two;
            animation-name: loader-animation-two;
    -webkit-animation-duration: 4s;
            animation-duration: 4s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
}
#loader .box-three{
    -webkit-animation-name: loader-animation-three;
            animation-name: loader-animation-three;
    -webkit-animation-duration: 8s;
            animation-duration: 8s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
}

#loader .box-four{
    -webkit-animation-name: loader-animation-four;
            animation-name: loader-animation-four;
    -webkit-animation-duration: 8s;
            animation-duration: 8s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
}

@-webkit-keyframes loader-animation-one{
    0%{
        transform:rotate(0deg) translate(-50%, -50%);
        -moz-transform: rotate(0deg) translate(-50%, -50%);
        -webkit-transform: rotate(0deg) translate(-50%, -50%);
    }
    25%{
        transform:rotate(-90deg) translate(-50%, -50%);
        -moz-transform: rotate(-90deg) translate(-50%, -50%);
        -webkit-transform: rotate(-90deg) translate(-50%, -50%);
    }
    50%{
        transform:rotate(0deg) translate(-50%, -50%);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg) translate(-50%, -50%);
    }
    75%{
        transform:rotate(90deg) translate(-50%, -50%);
        -moz-transform: rotate(90deg) translate(-50%, -50%);
        -webkit-transform: rotate(90deg) translate(-50%, -50%);
    }
    100%{
        transform:rotate(0deg) translate(-50%, -50%);
        -moz-transform: rotate(0deg) translate(-50%, -50%);
        -webkit-transform: rotate(0deg) translate(-50%, -50%);
    }

}

@keyframes loader-animation-one{
    0%{
        transform:rotate(0deg) translate(-50%, -50%);
        -moz-transform: rotate(0deg) translate(-50%, -50%);
        -webkit-transform: rotate(0deg) translate(-50%, -50%);
    }
    25%{
        transform:rotate(-90deg) translate(-50%, -50%);
        -moz-transform: rotate(-90deg) translate(-50%, -50%);
        -webkit-transform: rotate(-90deg) translate(-50%, -50%);
    }
    50%{
        transform:rotate(0deg) translate(-50%, -50%);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg) translate(-50%, -50%);
    }
    75%{
        transform:rotate(90deg) translate(-50%, -50%);
        -moz-transform: rotate(90deg) translate(-50%, -50%);
        -webkit-transform: rotate(90deg) translate(-50%, -50%);
    }
    100%{
        transform:rotate(0deg) translate(-50%, -50%);
        -moz-transform: rotate(0deg) translate(-50%, -50%);
        -webkit-transform: rotate(0deg) translate(-50%, -50%);
    }

}
@-webkit-keyframes loader-animation-two{
    0%{
        transform:rotate(0deg) translate(-50%, -50%);
        -moz-transform: rotate(0deg) translate(-50%, -50%);
        -webkit-transform: rotate(0deg) translate(-50%, -50%);
    }
    25%{
        transform:rotate(90deg) translate(-50%, -50%);
        -moz-transform: rotate(90deg) translate(-50%, -50%);
        -webkit-transform: rotate(90deg) translate(-50%, -50%);
    }
    50%{
        transform:rotate(0deg) translate(-50%, -50%);
        -moz-transform: rotate(0deg) translate(-50%, -50%);
        -webkit-transform: rotate(0deg) translate(-50%, -50%);
    }
    75%{
        transform:rotate(-90deg) translate(-50%, -50%);
        -moz-transform: rotate(-90deg) translate(-50%, -50%);
        -webkit-transform: rotate(-90deg) translate(-50%, -50%);
    }
    100%{
        transform:rotate(0deg) translate(-50%, -50%);
        -moz-transform: rotate(0deg) translate(-50%, -50%);
        -webkit-transform: rotate(0deg) translate(-50%, -50%);
    }
}
@keyframes loader-animation-two{
    0%{
        transform:rotate(0deg) translate(-50%, -50%);
        -moz-transform: rotate(0deg) translate(-50%, -50%);
        -webkit-transform: rotate(0deg) translate(-50%, -50%);
    }
    25%{
        transform:rotate(90deg) translate(-50%, -50%);
        -moz-transform: rotate(90deg) translate(-50%, -50%);
        -webkit-transform: rotate(90deg) translate(-50%, -50%);
    }
    50%{
        transform:rotate(0deg) translate(-50%, -50%);
        -moz-transform: rotate(0deg) translate(-50%, -50%);
        -webkit-transform: rotate(0deg) translate(-50%, -50%);
    }
    75%{
        transform:rotate(-90deg) translate(-50%, -50%);
        -moz-transform: rotate(-90deg) translate(-50%, -50%);
        -webkit-transform: rotate(-90deg) translate(-50%, -50%);
    }
    100%{
        transform:rotate(0deg) translate(-50%, -50%);
        -moz-transform: rotate(0deg) translate(-50%, -50%);
        -webkit-transform: rotate(0deg) translate(-50%, -50%);
    }
}


@-webkit-keyframes loader-animation-three{
    0%{
        transform:rotate(0deg) translate(-50%, -50%);;
        -moz-transform: rotate(0deg) translate(-50%, -50%);;
        -webkit-transform: rotate(0deg) translate(-50%, -50%);;
    }
    25%{
        transform:rotate(-360deg) translate(-50%, -50%);;
        -moz-transform: rotate(-360deg) translate(-50%, -50%);;
        -webkit-transform: rotate(-360deg) translate(-50%, -50%);;
    }
    50%{
        transform:rotate(0deg) translate(-50%, -50%);;
        -moz-transform: rotate(0deg) translate(-50%, -50%);;
        -webkit-transform: rotate(0deg) translate(-50%, -50%);;
    }
    75%{
        transform:rotate(360deg) translate(-50%, -50%);;
        -moz-transform: rotate(360deg) translate(-50%, -50%);;
        -webkit-transform: rotate(360deg) translate(-50%, -50%);;
    }
    100%{
        transform:rotate(0deg) translate(-50%, -50%);;
        -moz-transform: rotate(0deg) translate(-50%, -50%);;
        -webkit-transform: rotate(0deg) translate(-50%, -50%);;
    }

}


@keyframes loader-animation-three{
    0%{
        transform:rotate(0deg) translate(-50%, -50%);;
        -moz-transform: rotate(0deg) translate(-50%, -50%);;
        -webkit-transform: rotate(0deg) translate(-50%, -50%);;
    }
    25%{
        transform:rotate(-360deg) translate(-50%, -50%);;
        -moz-transform: rotate(-360deg) translate(-50%, -50%);;
        -webkit-transform: rotate(-360deg) translate(-50%, -50%);;
    }
    50%{
        transform:rotate(0deg) translate(-50%, -50%);;
        -moz-transform: rotate(0deg) translate(-50%, -50%);;
        -webkit-transform: rotate(0deg) translate(-50%, -50%);;
    }
    75%{
        transform:rotate(360deg) translate(-50%, -50%);;
        -moz-transform: rotate(360deg) translate(-50%, -50%);;
        -webkit-transform: rotate(360deg) translate(-50%, -50%);;
    }
    100%{
        transform:rotate(0deg) translate(-50%, -50%);;
        -moz-transform: rotate(0deg) translate(-50%, -50%);;
        -webkit-transform: rotate(0deg) translate(-50%, -50%);;
    }

}
@-webkit-keyframes loader-animation-four{
    0%{
        transform:rotate(0deg) translate(-50%, -50%);;
        -moz-transform: rotate(0deg) translate(-50%, -50%);;
        -webkit-transform: rotate(0deg) translate(-50%, -50%);;
    }
    25%{
        transform:rotate(360deg) translate(-50%, -50%);;
        -moz-transform: rotate(360deg) translate(-50%, -50%);;
        -webkit-transform: rotate(360deg) translate(-50%, -50%);;
    }
    50%{
        transform:rotate(0deg) translate(-50%, -50%);;
        -moz-transform: rotate(0deg) translate(-50%, -50%);;
        -webkit-transform: rotate(0deg) translate(-50%, -50%);;
    }
    75%{
        transform:rotate(-360deg) translate(-50%, -50%);;
        -moz-transform: rotate(-360deg) translate(-50%, -50%);;
        -webkit-transform: rotate(-360deg) translate(-50%, -50%);;
    }
    100%{
        transform:rotate(0deg) translate(-50%, -50%);;
        -moz-transform: rotate(0deg) translate(-50%, -50%);;
        -webkit-transform: rotate(0deg) translate(-50%, -50%);;
    }
}
@keyframes loader-animation-four{
    0%{
        transform:rotate(0deg) translate(-50%, -50%);;
        -moz-transform: rotate(0deg) translate(-50%, -50%);;
        -webkit-transform: rotate(0deg) translate(-50%, -50%);;
    }
    25%{
        transform:rotate(360deg) translate(-50%, -50%);;
        -moz-transform: rotate(360deg) translate(-50%, -50%);;
        -webkit-transform: rotate(360deg) translate(-50%, -50%);;
    }
    50%{
        transform:rotate(0deg) translate(-50%, -50%);;
        -moz-transform: rotate(0deg) translate(-50%, -50%);;
        -webkit-transform: rotate(0deg) translate(-50%, -50%);;
    }
    75%{
        transform:rotate(-360deg) translate(-50%, -50%);;
        -moz-transform: rotate(-360deg) translate(-50%, -50%);;
        -webkit-transform: rotate(-360deg) translate(-50%, -50%);;
    }
    100%{
        transform:rotate(0deg) translate(-50%, -50%);;
        -moz-transform: rotate(0deg) translate(-50%, -50%);;
        -webkit-transform: rotate(0deg) translate(-50%, -50%);;
    }
}


/* ------------ 11.2 LINE ART ------------ */
.line-art-top{
    position: absolute;
    top:0;
    left: 50%;
    -webkit-transform: translateX(-50%) rotate(90deg);
            transform: translateX(-50%) rotate(90deg);
    margin-top: -14px;
}

.line-art-bottom{
    position: absolute;
    bottom:0;
    left: 50%;
    -webkit-transform: translateX(-50%) rotate(90deg);
            transform: translateX(-50%) rotate(90deg);
    margin-bottom: -14px;
}

.line-art-left{
    position: absolute;
    top:50%;
    left: 0;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    margin-left: 5px;
}

.line-art-right{
    position: absolute;
    top:50%;
    right: 0;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    margin-right: 5px;
}

.line-art-top div, .line-art-bottom div, .line-art-left div, .line-art-right div{
    background: #101010;
    width: 10px;
    height: 1px;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}

.line-art-top div:nth-child(1), .line-art-top div:nth-child(2), .line-art-top div:nth-child(3), .line-art-top div:nth-child(4),
.line-art-bottom div:nth-child(1), .line-art-bottom div:nth-child(2), .line-art-bottom div:nth-child(3), .line-art-bottom div:nth-child(4),
.line-art-left div:nth-child(1), .line-art-left div:nth-child(2), .line-art-left div:nth-child(3), .line-art-left div:nth-child(4),
.line-art-right div:nth-child(1), .line-art-right div:nth-child(2), .line-art-right div:nth-child(3), .line-art-right div:nth-child(4){
    margin: 5px;
}


/* ------------ 11.3 TEXTURE ------------ */
.texture, 
#msgSubmit, 
#fun-fact .counter li, 
.process li:first-child, 
.process li:last-child,
.box-it:before {
    background: url("assets/images/texture.png");
}


/* ------------ 11.4 SOCIAL LINKS ------------ */
.social-links {
    display: inline-block;
}
.social-links a {
    margin-right: 5px;
    display: inline-block;
    text-decoration: none;
    font-weight: 400;
    color: #101010;
}

.social-links a:hover {
    text-decoration: none
}


/* ------------ 11.5 OWL CAROUSEL MODIFIED ------------ */
.owl-theme .owl-controls {
    margin-top: 10px;
}

.port-holder.owl-theme .owl-controls {
    margin-top: 0;
    margin-left: 15px;
    margin-right: 15px;
}

.owl-prev , .owl-next {
    display: inline-block;
    font-size: 25px;
    color: #101010;
}

.owl-prev {
  margin-right: 15px;
}


/* -------------------------------------
              12. RESPONSIVE
* ------------------------------------- */

@media (max-width: 991px) { 

    body {
        font-size: 13px;
    }

    p, .section-holder p, .time-item p {
        font-size: 13px;
        line-height: 1.7;
    }

    .faq-item h4 {
        font-size: 13.5px;
    }

    .faq-item p {
        font-size: 12.5px;
        line-height: 1.68;
    }

    section {
        margin-bottom: 0;
    }

    a {
        font-size: 13px;
    }
    
    .header {
        margin-bottom: 30px;
    }

    h1 { /* 36px */
        font-size: 30px;
    }

    h2 { /* 30px */
        font-size: 24px;
    }

    h3 { /* 24px */
        font-size: 18px;
    }

    h4 { /* 18px */
        font-size: 14px;
    }

    h5 { /* 14px */
        font-size: 12px;
    }

    h6 { /* 12px */
        font-size: 10px;
    }

    .sector .main-title {
        font-size: 50px;
    }

    [class*=col] {
        margin-bottom: 30px;
    }

    .menu {
        left: 0;
        bottom: 40px;
        padding: 15px 15px 0 15px;
    }

    .menu .menu-holder {
        border: 1px solid #101010;
    }

    .menu.menu-active .menu-holder {
        border: 1px solid transparent;
    }

    .i-size-med {
        font-size: 35px;
    }

    .i-size-big {
        font-size: 50px;
    }

    .img-holder {
        max-width: 350px;
        margin: 0 auto;
    }

    .skillbar-title {
        font-size: 13px;
    }

    .time-year {
        position: relative;
        font-size: 15px;
        color: #101010;
        font-weight: 400;
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }

    .icon-holder-time {
        top: 50px;
    }
    
    .box-it {
        max-width: 350px;
        margin:0 auto;
    }

}

@media (max-width: 479px) { 
    .process li {
        border: 1px solid #aaa;
        min-width: 90px;
        display: inline-block;
        margin: 10px 5px 18px;
    }
}

/* ------------ FONT AWESOME 6 & ACADEMICONS STYLING ------------ */
.social-links a i,
.social-links a .ai {
    font-size: 21px;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.2s ease;
}

.social-links a:hover i,
.social-links a:hover .ai {
    transform: scale(1.15);
}

.pub-link i,
.pub-link .ai {
    font-size: 16px;
    margin-right: 4px;
    display: inline-block;
    vertical-align: middle;
}

.i-size-big i,
.i-size-big .ai {
    font-size: 42px;
    line-height: 1;
    color: #2c2c2b;
    display: inline-block;
}

.i-size-small i,
.i-size-small .ai {
    font-size: 22px;
    line-height: 1;
    color: #2c2c2b;
    display: inline-block;
}

.form-control-feedback i {
    font-size: 16px;
    color: #101010;
    line-height: 1;
}