* {
    box-sizing:border-box
}

::selection {
    background: rgb(245, 187, 14);
    color: #000;
}

::-moz-selection {
    background: rgb(245, 187, 14);
    color: #000;
}

.imgcompleta{
    width: 100%;
}

.sombraimagenestandar{box-shadow: 0 0px 25px rgba(0, 0, 0, 0.25);}
.doscolumnascontainer {
    width: 100%;
    margin: 0;
    padding: 0;

    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
}

.doscolumnas-columna {
    width: 100%;
    margin: 0;
    padding: 0;
}

.doscolumnas-columna img{
    width: 100%;
    box-shadow: 0 0px 25px rgba(0, 0, 0, 0.25);
}
/* Separador vertical entre las columnas */
.doscolumnas-columna:first-child {
    padding-right: 0px;
}

.doscolumnas-columna:last-child {
    padding-left: 0;
}


/* =========================================
   TABLET / PANTALLAS DE 900px HACIA ABAJO
   ========================================= */

@media (max-width: 900px) {

    .doscolumnascontainer {
        grid-template-columns: 1fr;
        row-gap: 40px;
    }

    /* Quitamos el separador vertical */
    .doscolumnas-columna:first-child {
        border-right: none;
        padding-right: 0;

    }

    .doscolumnas-columna:last-child {
        padding-left: 0;
    }

    .doscolumnas-columna img{
    width: 100%;
    box-shadow: 0 0px 15px rgba(0, 0, 0, 0.15);
}

}

.margin-1 { margin-top: clamp(60px, 8vw, 130px); }
.margin-2 { margin-top: clamp(50px, 6.5vw, 105px); }
.margin-3 { margin-top: clamp(40px, 5vw, 80px); }
.margin-4 { margin-top: clamp(30px, 4vw, 60px); }
.margin-5 { margin-top: clamp(20px, 3vw, 40px); }
.margin-6 { margin-top: clamp(15px, 2vw, 25px); }

.img-boxin {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
}

.img-boxin2 {
    box-shadow: 0 0px 15px rgba(0, 0, 0, 0.25);
}


.Contenido-estandarpup {
    width: clamp(85%, 64vw, 64%);
    margin-left: auto;
    margin-right: auto;
}

.contenedorcentrado-pieza {
    width: 550px;
    margin-left: auto;
    margin-right: auto;
}


/* Escritorio grande: 1401px en adelante */
@media (min-width: 1401px) {
    .contenedorcentrado-pieza {
        width: 800px;
    }
}

/* Móvil: 650px o menos */
@media (max-width: 650px) {
    .contenedorcentrado-pieza {
        width: 100%;
    }
}


.modal-window img{
    margin-bottom: -5px;
}
:root  {
    --yellow:#ffc81a;
    --dark:#090909;
    --pad:3.05vw;
    --ease:cubic-bezier(.2,.72,.2,1);
    --space-1:12px;
    --space-2:22px;
    --space-3:34px;
    --space-4:52px;
    --space-5:78px;
    --space-6:108px
}
html  {
    scroll-behavior:smooth
}
body  {
    margin:0;
    background:#fff;
    color:#111;
    font-family:"Plus Jakarta Sans",sans-serif;
    overflow-x:hidden
}
body.modal-open  {
    overflow:hidden
}
a  {
    text-decoration:none;
    color:inherit
}
a:visited,
a:hover,
a:focus {
    text-decoration:none
}
ul,
ol {
    list-style:none;
    margin:0;
    padding:0
}
button  {
    font:inherit
}
.site-header  {
    position:absolute;
    z-index:1000;
    top:0;
    left:0;
    right:0;
    height:calc(5.05vw - 15px);
    min-height:54px;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    transition:background .3s,box-shadow .3s,backdrop-filter .3s;
    box-shadow:0 21px 17px -30px rgba(0,0,0,0.75);
}
.site-header.fixed  {
    position:fixed;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 21px 17px -30px rgba(0,0,0,0.75);
}
.menu {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.05vw;
    height: 100%;
}


/* ==============================
   BARRA / PÍLDORA NEGRA
   ============================== */

.menu::before {
    content: "";
    position: absolute;
    z-index: 0;

    left: calc(var(--pill-x, 0px) - 15px);
    top: 50%;

    width: calc(var(--pill-w, 0px) + 30px);
    height: 40px;

    transform: translateY(-50%);

    border-radius: 999px;
    background: #111;

    transition:
        left .34s var(--ease),
        width .34s var(--ease);

    pointer-events: none;
}


/* ==============================
   ELEMENTOS DEL MENÚ
   ============================== */

.menu-link {
    position: relative;
    z-index: 1;

    font-size: 16px;
    font-weight: 300;

    padding: .16vw .7vw;

    border-radius: 2vw;
    white-space: nowrap;

    color: #636361;

    transition:
        color .2s,
        font-weight .2s;
}


/* ==============================
   ENLACES
   ============================== */

.menu-link a {
    padding: 0 30px;

    color: inherit;
    font-weight: inherit;
}


/* ==============================
   ACTIVE INICIAL
   Blanco + Bold
   ============================== */

.menu-link.is-active {
    background: transparent;

    color: #fff;
    font-weight: 800;

    padding-left: 1vw;
    padding-right: 1vw;
}

.menu-link.is-active a {
    color: inherit;
    font-weight: inherit;
}


/* ==============================
   CUANDO SE RECORRE EL MENÚ
   Todos Light + Gris
   ============================== */

.menu.menu-hovering .menu-link {
    color: #636361;
    font-weight: 300;
}

.menu.menu-hovering .menu-link a {
    color: inherit;
    font-weight: inherit;
}


/* ==============================
   ELEMENTO DONDE ESTÁ LA PÍLDORA
   Blanco + Bold
   ============================== */

.menu-link.pill-hover {
    color: #fff;
    font-weight: 800;
}

.menu-link.pill-hover a {
    color: inherit;
    font-weight: inherit;
}


/* ==============================
   ELEMENTO DONDE ESTÁ EL CURSOR
   Blanco + Bold
   ============================== */

.menu.menu-hovering .menu-link:hover {
    color: #fff;
    font-weight: 800;

    background: transparent;
    box-shadow: none;
}

.menu.menu-hovering .menu-link:hover a {
    color: inherit;
    font-weight: inherit;
}


/* ==============================
   CUANDO NO HAY HOVER
   El ACTIVE vuelve a Blanco + Bold
   ============================== */

.menu:not(.menu-hovering) .menu-link.is-active {
    color: #fff;
    font-weight: 800;
}

.menu:not(.menu-hovering) .menu-link.is-active a {
    color: inherit;
    font-weight: inherit;
}


/* ==============================
   HOVER GENERAL
   ============================== */

.menu-link:hover {
    background: transparent;
    box-shadow: none;
}
.cv-button  {
    position:absolute;
    right:0;
    top:0;
    height:calc((5.05vw - 15px) * .7);
    min-height:38px;
    padding:0 2.15vw;
    display:flex;
    align-items:center;
    background:var(--yellow);
    color:#fff;
    border-radius:0 0 0 30px;
    font-size:calc(.62vw + 5px);
    font-weight:700;
    overflow:hidden;
    isolation:isolate;
}
.cv-button:after  {
    content:"";
    position:absolute;
    z-index:-1;
    left:-35%;
    top:-60%;
    width:18%;
    height:220%;
    background:#fff;
    filter:blur:.5vw;
    transform:rotate(20deg) translateX(-250%);
    transition:transform .7s var(--ease);
}
.cv-button:hover:after  {
    transform:translateX(650%);
}
.mobile-menu  {
    display:none;
    background:transparent;
    font-size:24px;
}
.hero  {
    height:55.4vw;
    position:relative;
    overflow:hidden;
    background:#fff
}
.hero-heading  {
    will-change:transform,opacity;
    position:absolute;
    z-index:5;
    top:8.5vw;
    left:0;
    right:0;
    text-align:center
}
.hero-heading>div  {
    font-size:30px;
    font-weight:500
}
.hero-heading h1  {
    margin: 14px 0px;
    color:#f5bb0e;
    font-size:5.1vw;
    line-height:.98;
    letter-spacing:-.065em;
    font-weight:800
}
.hero-heading p  {
    margin:0;
    font-size:35px;
    font-weight:500
}
.hero-skills  {
    will-change:transform,opacity;
    position:absolute;
    z-index:5;
    left:140px;
    top:24vw;
    display:flex;
    flex-direction:column;
    gap:.72vw
}
.hero-skills span  {
    font-size:1.78vw;
    border-bottom:2px solid var(--yellow);
    padding-bottom:.34vw;
    width:max-content
}

.hero-skills span:nth-last-child(1)  {
    border-bottom:0;
}

.experience  {
    will-change:transform,opacity;
    position:absolute;
    z-index:5;
    right:140px;
    top:24vw;
    text-align:right;
    padding-right:1.15vw
}
.experience strong  {
    display:block;
    font-size:3.836vw;
    font-weight:500;
    line-height:.95
}
.experience span  {
    display:block;
    font-size:1.28vw
}
.experience:after  {
    content:"";
    position:absolute;
    right:0;
    top:12%;
    width:3px;
    height:83%;
    background:var(--yellow);
    border-radius:2px
}
.hero-orb  {
    position:absolute;
    z-index:1;
    left:50%;
    bottom:0;
    width:65.31vw;
    height:30.29vw;
    transform:translateX(-50%);
    border-radius:65.31vw 65.31vw 0 0;
    background:linear-gradient(180deg,#fff 0%,#fff8e0 22%,#ffd75a 76%,#ffc71b 100%);
    transform-origin:center bottom;
    will-change:transform
}
.hero-person  {
    position:absolute;
    z-index:3;
    left:50%;
    bottom:-.05vw;
    width:28vw;
    height:36.5vw;
    transform:translateX(-50%);
    transform-origin:center bottom;
    will-change:transform
}
.hero-person img  {
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center bottom
}
.hero-bottom-mask  {
    position:absolute;
    z-index:4;
    left:-5%;
    right:-5%;
    bottom:-1px;
    height:205px;
    background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.06) 15%,rgba(255,255,255,.28) 36%,rgba(255,255,255,.62) 58%,rgba(255,255,255,.88) 80%,#fff 100%);
    opacity:0;
    transform:translateY(35px);
    pointer-events:none;
    will-change:opacity,transform
}
.what-section  {
    position:relative;
    height:80.6vw;
    background:#fff !important;
    overflow:visible
}
.what-top  {
    height:42.3vw;
    position:relative;
    padding-top:7.7vw;
    background:#fff;
    z-index: 2;
}
.section-heading  {
    text-align:center;
    position:relative;
    z-index:10
}
.section-heading span  {
    display:block;
    font-size:1.2vw;
    line-height:1;
    color:#e3af0b;
    font-weight:500
}
.section-heading i  {
    display:block;
    width:1.9vw;
    height:.09vw;
    background:var(--yellow);
    margin:.2vw auto .12vw
}
.section-heading h2  {
    margin:0;
    font-size:3vw;
    line-height:1;
    font-weight:800;
    letter-spacing:-.05em
}
.services  {
    position:relative;
    z-index:7;
    width:84%;
    margin:7.1vw auto 0;
    display:grid;
    grid-template-columns:repeat(4,1fr)
}
.service  {
    padding:0 2.3vw;
    border-right:2px solid #cfcfcf;
    opacity:0;
    transform:translateY(1vw);
    transition:opacity .75s var(--ease),transform .75s var(--ease)
}
.service:last-child  {
    border-right:0
}
.service.visible  {
    opacity:1;
    transform:translateY(0)
}
.service-icon  {
    height:5vw;
    margin-bottom:.8vw
}
.service-icon img  {
    height:100%;
    width:auto;
    object-fit:contain
}
.service h3  {
    margin:0 0 .35vw;
    font-size:1.71vw;
    line-height:1.1;
    font-weight:800
}
.service p  {
    margin:0;
    font-size:0.87vw;
    line-height:1.42;
    color:#666
}
.yellow-band  {
    position:absolute;
    z-index:1;
    left:-5%;
    right:-5%;
    top:41.3vw;
    height:12.1vw;
    background:linear-gradient(to bottom,#ffc61a 11%,rgba(255,200,26,.62) 34%,rgba(255,200,26,.2) 64%,rgba(255,255,255,0) 100%);
    filter:blur(.35vw);
    opacity:.05;
    transform:translateY(1.5vw);
    will-change:opacity,transform
}
.ia-stage  {
    position:sticky;
    z-index:5;
    top:13.1vw;
    width:84%;
    height:26.2vw;
    margin:-.2vw auto 0;
    display:grid;
    grid-template-columns:1fr 10vw 1fr;
    align-items:center;
    will-change:transform
}
.ia-left  {
    font-size:2.25vw;
    line-height:1.35;
    opacity:.08;
    will-change:opacity,transform;
    color: #353535;
}
.ia-left b  {
    font-weight:800
}
.ia-word  {
font-size: 15.1vw;
    line-height: .8;
    letter-spacing: 0;
    font-weight: 600;
    text-align: center;
    opacity: .08;
    will-change: opacity, transform;
    margin-left: -94px;
}
.ia-right  {
    font-size:1.32vw;
    line-height:1.42;
    opacity:.08;
    will-change:opacity,transform;
    color: #353535;
    margin-left: 90px;
}
.portfolio  {
    background:#fff
}
.portfolio-title  {
    height:15.4vw;
    position:relative;
    display:grid;
    place-items:center;
    overflow:hidden;
    margin-bottom: 90px;
}
.portfolio-title .section-heading  {
    z-index:5
}
.portfolio-word  {
    position:absolute;
    z-index:1;
    top:5.15vw;
    left:50%;
    transform:translateX(-50%);
    font-size:7.2vw;
    line-height:1;
    font-weight:800;
    letter-spacing:-.1em;
    color:transparent;
    background:linear-gradient(90deg,#e3e3e3,#fff 50%,#e3e3e3);
    background-clip:text;
    -webkit-background-clip:text;
    opacity:0;
    will-change:opacity,transform;
    padding-right: 9px;
}
.portfolio-grid  {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:repeat(5,24.7vw);
    gap:.23vw;
    background:#fff
}
.tile  {
    position:relative;
    overflow:hidden;
    background:#050505;
    border:0;
    padding:0;
    cursor:pointer;
    min-width:0
}
.tile picture,
.tile img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%
}
.tile img  {
    object-fit:cover;
    filter:grayscale(1);
    transform:scale(1);
    transition:filter .55s var(--ease),transform .75s var(--ease)
}
.tile:hover img  {
    filter:grayscale(0);
    transform:scale(1.025)
}
.tile:after  {
    content:"";
    position:absolute;
    z-index:2;
    left:0;
    right:0;
    bottom:0;
    height:60%;
    background:linear-gradient(transparent,rgba(0,0,0,1))
}
.tile-info  {
    position:absolute;
    z-index:3;
    left:1vw;
    bottom:1vw;
    color:#fff;
    text-align:left;
    padding: 18px;
}
.tile-info small  {
    display:block;
    color:var(--yellow);
    font-size:0.7vw;
    line-height:1.1;
    font-weight:600;
    text-transform: uppercase;
}
.tile-info h3  {
    margin:.22vw 0 0;
    font-size:1.2vw;
    line-height:1.15;
    font-weight:800
}
.tile:nth-child(1)  {
    grid-column:1;
    grid-row:1
}
.tile:nth-child(2)  {
    grid-column:2;
    grid-row:1
}
.tile:nth-child(3)  {
    grid-column:3;
    grid-row:1 / span 2
}
.tile:nth-child(4)  {
    grid-column:4;
    grid-row:1
}
.tile:nth-child(5)  {
    grid-column:1 / span 2;
    grid-row:2
}
.tile:nth-child(6)  {
    grid-column:4;
    grid-row:2
}
.tile:nth-child(7)  {
    grid-column:1;
    grid-row:3
}
.tile:nth-child(8)  {
    grid-column:2;
    grid-row:3
}
.tile:nth-child(9)  {
    grid-column:3 / span 2;
    grid-row:3
}
.tile:nth-child(10)  {
    grid-column:1;
    grid-row:4
}
.tile:nth-child(11)  {
    grid-column:2;
    grid-row:4
}
.tile:nth-child(12)  {
    grid-column:3 / span 2;
    grid-row:4
}
.tile:nth-child(13)  {
    grid-column:1;
    grid-row:5
}
.tile:nth-child(14)  {
    grid-column:2;
    grid-row:5
}
.tile:nth-child(15)  {
    grid-column:3;
    grid-row:5
}
.tile:nth-child(16)  {
    grid-column:4;
    grid-row:5
}
.behind  {
    height:48.9vw;
    padding-top:6.45vw;
    background:#fff
}
.behind-content  {
    width:80.5%;
    margin:3.45vw auto 0;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:2.35vw;
    align-items:center;
    opacity:0;
    transform:translateY(1.2vw);
    transition:.8s var(--ease);
    margin-top: 110px;
}
.behind-content.visible  {
    opacity:1;
    transform:none
}
.behind-photo  {
    aspect-ratio:1.43;
    overflow:hidden
}
.behind-photo img  {
    width:100%;
    height:100%;
    object-fit:cover
}
.behind-copy  {
    font-size:1vw;
    line-height:1.5;
    color:#666
}
.behind-copy p  {
    margin:0 0 -0.2vw
}
.behind-copy b  {
    color:#333
}
.footer  {
    border-top:2px solid #ddd;
    position:relative;
    background:#fff;
    color:#777;
    font-size:0.8vw;
    padding: 50px 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 90px;
}
.footer-copy  {
    position:absolute;
    left:var(--pad);
    bottom: 40px;
}
.location  {
    position:absolute;
    right:var(--pad);
    bottom: 40px;
}
.mail-button  {
    position:absolute;
    left:50%;
    bottom: 29px;
    transform:translateX(-50%);
    height:2.4vw;
    min-height:20px;
    padding:0 1.35vw;
    border-radius:2vw;
    background:var(--yellow);
    display:flex;
    align-items:center;
    gap:.65vw;
    font-size:0.9vw;
    font-weight: 500;
    color:#111;
    overflow:hidden;
    isolation:isolate
}

.circuloyellow{
  background: var(--yellow);
  width: 5px;
  height: 5px;
  border-radius: 100%;
  margin: 0 5px 3px 5px;
  display: inline-block;
}

.cv-button:after  {
    content:"";
    position:absolute;
    z-index:2;
    pointer-events:none;
    left:-32%;
    top:0;
    width:24%;
    height:100%;
    background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.10) 20%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.10) 80%,transparent 100%);
    filter:blur(.4vw);
    transform:translateX(-180%);
    transition:transform .75s var(--ease)
}
.cv-button:hover:after  {
    transform:translateX(720%)
}
.mail-button:after  {
    content:"";
    position:absolute;
    z-index:2;
    pointer-events:none;
    left:-32%;
    top:0;
    width:24%;
    height:100%;
    background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.10) 20%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.10) 80%,transparent 100%);
    filter:blur(.4vw);
    transform:translateX(-180%);
    transition:transform .75s var(--ease)
}
.mail-button:hover:after  {
    transform:translateX(720%)
}
.whatsapp-button  {
    position:absolute;
    left:calc(50% + 8.7vw);
    bottom: 29px;
    width:2.4vw;
    height:2.4vw;
    min-width:20px;
    min-height:20px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#111;
    color:#fff;
    font-size:1vw;
    transition:.25s
}
.whatsapp-button:hover  {
    background:#25D366;
    box-shadow:0 0 1.1vw rgba(37,211,102,.35)
}
.back-top  {
    position:absolute;
    right:3.1vw;
    top:-6.1vw;
    width:3.65vw;
    height:3.65vw;
    border-radius:50%;
    background:#eee;
    color:#aaa;
    cursor:pointer;
    transition:.25s;
    border: 0;
    font-size: 26px;
}
.back-top:hover  {
    background:var(--yellow);
    color:#111;
    box-shadow:0 0 2.1vw rgba(255,200,26,.85);
    top:-7.1vw;
}
.modal-overlay  {
    position:fixed;
    z-index:3000;
    inset:0;
    background:rgba(0,0,0,.58);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
    opacity:0;
    visibility:hidden;
    transition:.3s
}
.modal-overlay.open  {
    opacity:1;
    visibility:visible
}
.project-modal  {
    position:fixed;
    z-index:3010;
    inset:0;
    display:grid;
    grid-template-columns:3.2vw minmax(0,76vw) 3.2vw;
    gap:.9vw;
    align-items:center;
    justify-content:center;
    padding:2vw .8vw;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.3s
}
.project-modal.open  {
    opacity:1;
    visibility:visible;
    pointer-events:auto
}
.modal-window  {
    height:100%;
    min-height:0;
    background:#fff;
    overflow:hidden;
    box-shadow:0 2vw 6vw #0007;
    position:relative
}
.modal-scroll  {
    height:100%;
    overflow-y:auto;
    scrollbar-width:thin;
}
.modal-scroll::-webkit-scrollbar  {
    width:.4vw
}
.modal-scroll::-webkit-scrollbar-thumb  {
    background:#fff;
    border-radius:1vw
}
.modal-close,
.modal-chevron {
    background:#fff;
    color:#111;
    cursor:pointer;
    display:grid;
    place-items:center;
    transition:.25s
}
.modal-close  {
    position:absolute;
    z-index:8;
    right:1vw;
    top:1vw;
    width:2vw;
    height:2vw;
    border-radius:50%;
}
.modal-close:hover,
.modal-chevron:hover {
    background:var(--yellow);
    color:#111
}
.modal-chevron  {
    width:2vw;
    height:2vw;
    border-radius:50%;
    font-size:.85vw
}
.project-banner  {
    height:20vw;
    position:relative;
    overflow:hidden;
    background:#000
}
.project-banner img  {
    width:100%;
    height:100%;
    object-fit:cover
}
.project-banner-shadow  {
    position:absolute;
    inset:45% 0 0;
    background:linear-gradient(transparent,rgba(0,0,0,.95))
}
.project-banner-text  {
    position:absolute;
    left:4vw;
    bottom:3.2vw;
    color:#fff
}
.project-banner-text small  {
    font-size:.55vw
}
.project-banner-text h2  {
    margin:.35vw 0 0;
    font-size:3.2vw;
    line-height:.9;
    letter-spacing:-.07em
}
.project-description  {
    padding:4vw 13%;
    font-size:.75vw;
    line-height:1.8;
    text-align:center
}
.project-description p  {
    max-width:52vw;
    margin:auto
}
.media-image  {
    width:100%;
    height:auto
}
.media-video  {
    width:100%;
    aspect-ratio:16/9;
    background:#111
}
.media-video iframe,
.media-video video {
    width:100%;
    height:100%;
    border:0
}
.media-two  {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1vw;
    padding:0 1vw
}
.space-1  {
    height:2vw
}
.space-2  {
    height:3.5vw
}
.space-3  {
    height:5vw
}
.space-4  {
    height:7vw
}
.space-5  {
    height:10vw
}
.space-6  {
    height:14vw
}
.project-copy  {
    padding:0 13% 3vw;
    font-size:.72vw;
    line-height:1.75;
    color:#555
}
.project-copy p  {
    margin:0 0 1.2vw
}
.project-copy strong  {
    color:#111
}
.project-label  {
    padding:0 13% .7vw;
    font-size:.52vw;
    font-weight:700;
    letter-spacing:.04em;
    color:#999;
    text-transform:uppercase
}
.media-youtube,
.media-server {
    width:100%;
    aspect-ratio:16/9;
    background:#111
}
.media-youtube iframe,
.media-server video {
    width:100%;
    height:100%;
    display:block;
    border:0;
    object-fit:cover
}
.media-image  {
    display:block;
    width:100%;
    height:auto
}
.media-two>*  {
    min-width:0
}
.media-empty  {
    background:#f3f3f3;
    min-height:10vw
}
.space-1,
.space-2,
.space-3,
.space-4,
.space-5,
.space-6 {
    flex:none
}
@keyframes menuDrop  {
    from {
        opacity:0;
        transform:translateY(-18px);
        clip-path:inset(0 0 100% 0)
    }
    to  {
        opacity:1;
        transform:translateY(0);
        clip-path:inset(0 0 0 0)
    }
}

.tituloestandar-popup{
    color: #505050;
}

.contenedor-lineasinferiores{
    position: relative;
    width: 100%;
}

.lineainferior{
    width: 100%;
    height: 1px;
    background-color: #ccc;
}

.lineainferior2{
    background-color: #ccc;
    position: absolute;
    bottom: 0;
}





.tituloestandar-popup{
    font-size: .60vw;
}

.lineainferior{
    margin-top: -4px;
    margin-bottom: 30px;
}

.lineainferior2{
    width: 90px;
    height: 3px;
    margin-top: -10px;
}

.margen3{
    width: 100%;
    height: 80px;
}

@media(max-width:1100px)  {
    .site-header {
        height:6.4vw;
        min-height:52px
    }
    .cv-button  {
        height:calc(6.4vw * .7);
        min-height:37px
    }
    .menu  {
        gap:.8vw
    }
    .menu-link  {
        font-size:calc(1vw + 8px)
    }
    .cv-button  {
        font-size:calc(1vw + 5px)
    }
    .hero  {
        height:70vw
    }
    .hero-heading  {
        top:15vw
    }
    .hero-heading h1  {
        font-size:5.8vw
    }
    .hero-heading>div  {
        font-size:1.25vw
    }
    .hero-heading p  {
        font-size:1.75vw
    }
    .hero-skills  {
        top:35vw
    }
    .hero-skills span  {
        font-size:1.38vw
    }
    .experience  {
        top:35vw
    }
    .experience strong  {
        font-size:4.48vw
    }
    .experience span  {
        font-size:1.12vw
    }
    .hero-orb  {
        width:64.5vw;
        height:32.7vw
    }
    .hero-person  {
        width:39vw;
        height:50vw
    }
    .what-section  {
        height:105vw
    }
    .what-top  {
        height:43vw;
        padding-top:8vw
    }
    .section-heading span  {
        font-size:1vw
    }
    .section-heading h2  {
        font-size:2.2vw
    }
    .services  {
        width:92%
    }
    .service  {
        height:10vw;
        padding:0 2vw
    }
    .service-icon  {
        height:4vw
    }
    .service h3  {
        font-size:1vw
    }
    .service p  {
        font-size:.67vw
    }
    .yellow-band  {
        top:43vw
    }
    .ia-stage  {
        top:6.5vw;
        width:92%;
        grid-template-columns:1fr 14vw 1fr
    }
    .ia-left  {
        font-size:1.35vw
    }
    .ia-word  {
        font-size:9vw
    }
    .ia-right  {
        font-size:.8vw
    }
    .portfolio-title  {
        height:18vw;
        margin-bottom: 20px;
    }
    .portfolio-word  {
        font-size:5.8vw
    }
    .portfolio-grid  {
        grid-template-rows:repeat(5,32vw)
    }
    .tile-info small  {
        font-size:.62vw
    }
    .tile-info h3  {
        font-size:.75vw
    }
    .behind  {
        height:60vw;
        padding-top:7vw
    }
    .behind-content  {
        width:90%
    }
    .behind-copy  {
        font-size:.75vw
    }
    .footer  {
        height:11vw
    }
    .footer-copy,
    .location {
        font-size:.55vw
    }
}
@media(max-width:700px)  {
    .site-header {
        height:58px;
        min-height:58px;
        padding:0 18px;
        justify-content:flex-end
    }
    .menu::before  {
        display:none
    }
    .menu  {
        display:none;
        position:absolute;
        left:0;
        right:0;
        top:58px;
        height:auto;
        padding:9px 18px 15px;
        background:rgba(255,255,255,.95);
        backdrop-filter:blur(14px);
        flex-direction:column;
        align-items:stretch;
        gap:2px
    }
    .menu.open  {
        display:flex;
        animation:menuDrop .38s var(--ease) both
    }
    .menu-link  {
        font-size:16px;
        padding:9px
    }
    .cv-button  {
        position:static;
        height:42px;
        min-height:42px;
        font-size:15px;
        justify-content:center;
        border-radius:0 0 0 22px
    }
    .mobile-menu  {
        display:block
    }
    .hero  {
        height:125vw;
        min-height:600px
    }
    .hero-bottom-mask  {
        position:absolute;
        z-index:4;
        left:-5%;
        right:-5%;
        bottom:-1px;
        height:205px;
        background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.06) 15%,rgba(255,255,255,.28) 36%,rgba(255,255,255,.62) 58%,rgba(255,255,255,.88) 80%,#fff 100%);
        opacity:0;
        transform:translateY(35px);
        pointer-events:none;
        will-change:opacity,transform
    }
    .hero-heading  {
        top:18vw
    }
    .hero-heading>div  {
        font-size:3vw
    }
    .hero-heading h1  {
        font-size:9.8vw;
        margin:1.2vw 0
    }
    .hero-heading p  {
        font-size:3.7vw
    }
    .hero-skills  {
        top:55vw;
        left:18px;
        gap:2.2vw
    }
    .hero-skills span  {
        font-size:4.875vw
    }
    .experience  {
        top:57vw;
        right:18px
    }
    .experience strong  {
        font-size:10.08vw
    }
    .experience span  {
        font-size:3.01vw
    }
    .hero-orb  {
        width:157.5vw;
        height:79.8vw
    }
    .hero-person  {
        width:65vw;
        height:73vw
    }
    .what-section  {
        height:158vw
    }
    .what-top  {
        height:62vw;
        padding-top:13vw
    }
    .section-heading span  {
        font-size:2.3vw
    }
    .section-heading i  {
        width:2.5vw;
        height:1px;
        margin:1vw auto .8vw
    }
    .section-heading h2  {
        font-size:4.8vw
    }
    .services  {
        width:94%;
        grid-template-columns:1fr 1fr;
        margin-top:8vw
    }
    .service  {
        height:25vw;
        padding:0 5vw;
        margin-bottom:7vw
    }
    .service:nth-child(2n)  {
        border-right:0
    }
    .service-icon  {
        height:9vw;
        margin-bottom:3vw
    }
    .service h3  {
        font-size:2.5vw
    }
    .service p  {
        font-size:1.65vw
    }
    .yellow-band  {
        top:62vw;
        height:18vw
    }
    .ia-stage  {
        top:8vw;
        width:92%;
        height:56vw;
        grid-template-columns:1fr 20vw 1fr
    }
    .ia-left  {
        font-size:3vw
    }
    .ia-word  {
        font-size:14vw
    }
    .ia-right  {
        font-size:1.7vw
    }
    .portfolio-title  {
        height:31vw
    }
    .portfolio-word  {
        font-size:11vw;
        top:10vw
    }
    .portfolio-grid  {
        grid-template-columns:1fr 1fr;
        grid-template-rows:repeat(8,31vw);
        gap:2px
    }
    .tile,
    .tile:nth-child(n) {
        grid-column:auto!important;
        grid-row:auto!important;
        min-height:0
    }
    .tile-info  {
        left:3vw;
        bottom:3vw
    }
    .tile-info small  {
        font-size:1.5vw
    }
    .tile-info h3  {
        font-size:1.8vw
    }
    .behind  {
        height:auto;
        padding:13vw 18px 8vw
    }
    .behind-content  {
        width:100%;
        grid-template-columns:1fr;
        margin-top:8vw;
        gap:7vw
    }
    .behind-copy  {
        font-size:2vw
    }
    .footer  {
        height:20vw;
        font-size:1.5vw
    }
    .footer-copy  {
        left:18px;
        max-width:42%;
        bottom:3vw
    }
    .location  {
        right:18px;
        max-width:37%;
        bottom:3vw;
        text-align:right
    }
    .mail-button  {
        height:5vw;
        min-height:25px;
        font-size:1.7vw;
        bottom:7vw;
        padding:0 4vw
    }
    .whatsapp-button  {
        width:5vw;
        height:5vw;
        bottom:7vw;
        left:calc(50% + 15vw);
        font-size:2.5vw
    }
    .back-top  {
        width:7vw;
        height:7vw;
        right:18px;
        top:-9vw
    }
    .project-modal  {
        grid-template-columns:30px minmax(0,1fr) 30px;
        gap:3px;
        padding:14px 3px
    }
    .modal-chevron  {
        width:30px;
        height:30px;
        font-size:12px
    }
    .modal-close  {
        width:34px;
        height:34px;
        top:10px;
        right:10px
    }
    .project-banner  {
        height:52vw
    }
    .project-banner-text  {
        left:5vw;
        bottom:5vw
    }
    .project-banner-text small  {
        font-size:1.7vw
    }
    .project-banner-text h2  {
        font-size:8vw
    }
    .project-description  {
        padding:8vw 8%;
        font-size:2.5vw
    }
    .media-two  {
        grid-template-columns:1fr
    }
}
@media(prefers-reduced-motion:reduce)  {
    html {
        scroll-behavior:auto
    }
    .reveal,
    .hero-orb,
    .hero-person {
        transition:none
    }
}
@keyframes menuDrop  {
    from {
        opacity:0;
        transform:translateY(-12px)
    }
    to  {
        opacity:1;
        transform:translateY(0)
    }
}
/* === V1 POPUP ENGINE: intentionally overrides only popup styles === */
.modal-backdrop  {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.58);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
    z-index:900;
    opacity:0;
    visibility:hidden;
    transition:opacity .35s ease,visibility .35s
}
.modal-backdrop.open  {
    opacity:1;
    visibility:visible
}
.project-modal  {
    position:fixed;
    inset:0;
    z-index:910;
    display:grid;
    grid-template-columns:minmax(42px,1fr) minmax(0,1500px) minmax(42px,1fr);
    align-items:center;
    padding:clamp(22px,3.2vw,58px) clamp(12px,19vw,156px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .35s ease,visibility .35s
}
.project-modal.open  {
    opacity:1;
    visibility:visible;
    pointer-events:auto
}
.modal-window  {
    height:100%;
    min-height:0;
    background:#fff;
    position:relative;
    overflow:hidden;
    box-shadow:0 25px 80px rgba(0,0,0,.35);
    border-radius: 6px;
}
.modal-scroll  {
    height:100%;
    overflow-y:auto;
    scroll-behavior:smooth;
    scrollbar-width:thin;
    scrollbar-color:#ccc transparent;
    padding-right:3px
}
.modal-scroll::-webkit-scrollbar  {
    width:5px
}
.modal-scroll::-webkit-scrollbar-track  {
    background:transparent;
    margin:20px 0
}
.modal-scroll::-webkit-scrollbar-thumb  {
    background:#bdbdbd;
    border-radius:0px
}
.modal-close,
.modal-arrow {
    cursor:pointer;
    display:grid;
    place-items:center;
    background:#fff;
    color:#111;
    transition:.3s ease
}
.modal-close {
position: absolute;
    z-index: 10;
    top: 0;
    right: 15px;
    width: 35px;
    height: 35px;
    border-radius: 0px 0px 0px 10px;
    border: 0;
    font-size: 17px;
}
.modal-close:hover  {
    background:var(--yellow);
    color:#000
}
.modal-arrow  {
    width:44px;
    height:44px;
    border-radius:50%;
    justify-self:center;
    font-size:18px
}
.modal-arrow:hover  {
    background:var(--yellow);
    box-shadow:var(--shadow-yellow)
}
.modal-prev  {
    grid-column:1
}
.modal-next  {
    grid-column:3
}
.project-banner  {
    position:relative;
    min-height:clamp(360px,50vh,700px);
    overflow:hidden;
    background:#000
}
.project-banner img  {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover
}
.project-banner-shade  {
    position:absolute;
    inset:35% 0 0;
    background:linear-gradient(transparent,rgba(0,0,0,.92))
}
.project-banner-copy  {
    position:absolute;
    z-index:2;
    left:clamp(30px,5vw,90px);
    right:70px;
    bottom:clamp(30px,4vw,70px);
    color:#fff
}
.project-banner-copy span  {
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.13em;
    color:#ddd
}
.project-banner-copy h2  {
    margin:8px 0 0;
    font-size:clamp(38px,5vw,41px);
    line-height:.9;
    letter-spacing:-.07em
}
.project-description  {
    padding:clamp(50px,5vw,110px) max(30px,clamp(8vw,8vw,192px));
    text-align:center
}
.project-description p  {
    max-width:1200px;
    margin:0 auto;
    font-size:clamp(13px,1vw,16px);
    line-height:1.8;
    color: #696969;
}
.project-media  {
    display:flex;
    flex-direction:column;
    gap:0
}
.project-media-block  {
    width:100%;
    margin:0
}
.project-media-block img  {
    width:100%;
    height:auto
}
.project-video  {
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    background:#111;
    overflow:hidden
}
.project-video iframe,
.project-video video {
    width:100%;
    height:100%;
    border:0;
    display:block;
    object-fit:cover
}
.project-video video  {
    cursor:pointer
}
.project-media-space  {
    width:100%;
    height:clamp(16px,4vw,80px)
}
.project-media-two  {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(8px,1.2vw,22px);
    padding:0 clamp(8px,1.2vw,22px)
}
.project-media-two .project-video  {
    min-width:0
}
.reveal  {
    opacity:1;
    transform:translateY(20px);
    transition:opacity .8s var(--ease),transform .8s var(--ease)
}
.reveal.is-visible  {
    opacity:1;
    transform:none
}
@media (max-width:1000px)  {
    .main-nav {
        gap:8px
    }
    .nav-link  {
        font-size:10px;
        padding:9px 5px
    }
    .cv-link  {
        padding:10px 11px
    }
    .services-stage  {
        grid-template-columns:repeat(2,1fr)
    }
    .project-tile  {
        grid-column:span 6!important;
    }
    .portfolio-grid  {
        grid-template-columns:repeat(2,1fr)
    }
    .about-grid  {
        grid-template-columns:1fr
    }
    .about-image  {
        max-width:700px
    }
    .contact-main  {
        flex-direction:column;
        align-items:flex-start
    }
    .project-modal  {
        grid-template-columns:40px minmax(0,1fr) 40px;
        padding:22px 8px
    }
}
@media (max-width:1000px)  {
    :root {
        --space-1:14px;
        --space-2:24px;
        --space-3:36px;
        --space-4:56px;
        --space-5:80px;
        --space-6:110px
    }
}
@media (max-width:700px)  {
    :root {
        --space-1:16px;
        --space-2:28px;
        --space-3:45px;
        --space-4:70px;
        --space-5:100px;
        --space-6:150px;
        --header-h:62px;
        --page-pad:18px
    }
    .main-nav  {
        position:absolute;
        top:100%;
        left:0;
        right:0;
        display:none;
        flex-direction:column;
        align-items:stretch;
        padding:12px 18px 18px;
        background:rgba(255,255,255,.95);
        backdrop-filter:blur(15px);
        box-shadow:0 15px 30px -25px #000
    }
    .main-nav.open  {
        display:flex
    }
    .mobile-menu  {
        display:block
    }
    .nav-link  {
        font-size:11px
    }
    .cv-link  {
        justify-content:center
    }
    .hero-copy  {
        top:15%;
        left:18px
    }
    .hero-copy h1  {
        font-size:clamp(45px,14vw,75px)
    }
    .hero-orbit  {
        width:92vw;
        top:54%
    }
    .hero-person-wrap  {
        width:78vw;
        height:65vh
    }
    .hero-side  {
        font-size:8px
    }
    .hero-label  {
        bottom:24px
    }
    .services  {
        min-height:auto;
        padding-top:95px
    }
    .services-stage  {
        grid-template-columns:1fr 1fr;
        gap:48px 20px
    }
    .service-icon  {
        height:clamp(58px,18vw,82px);
        margin-bottom:18px
    }
    .service-card h3  {
        font-size:17px
    }
    .service-card p  {
        font-size:11px
    }
    .services-sticky  {
        height:55vh
    }
    .services-sticky p  {
        font-size:24px;
        margin-bottom:10vh
    }
    .portfolio-intro  {
        min-height:42vh
    }
    .portfolio-word  {
        font-size:25vw
    }
    .portfolio-grid  {
        grid-template-columns:repeat(2,1fr)
    }
    .project-tile,
    .project-tile:nth-child(n) {
        grid-column:span 1!important;
        min-height:42vw!important
    }
    .project-info  {
        left:14px;
        right:14px;
        bottom:14px
    }
    .project-info h3  {
        font-size:15px
    }
    .project-info p  {
        font-size:9px
    }
    .about  {
        padding-top:95px;
        padding-bottom:95px
    }
    .about-grid  {
        margin-top:55px
    }
    .about-copy h2  {
        font-size:43px
    }
    .about-copy p:last-child  {
        font-size:13px
    }
    .contact-main  {
        padding:80px 0
    }
    .contact-main h2  {
        font-size:25vw
    }
    .contact-actions  {
        width:100%;
        display:grid;
        grid-template-columns:1fr 1fr 50px
    }
    .contact-button  {
        padding:0 10px;
        font-size:11px
    }
    .contact-meta  {
        font-size:9px
    }
    .project-modal  {
        grid-template-columns:28px minmax(0,1fr) 28px;
        padding:14px 4px
    }
    .modal-arrow  {
        width:30px;
        height:30px;
        font-size:13px
    }
    .modal-close  {
        top:10px;
        right:10px;
        width:34px;
        height:34px
    }
    .project-banner  {
        min-height:48vh
    }
    .project-banner-copy  {
        left:22px;
        right:50px;
        bottom:25px
    }
    .project-banner-copy h2  {
        font-size:39px
    }
    .project-description  {
        padding:44px 24px
    }
    .project-description p  {
        font-size:13px;
        line-height:1.8
    }
    .project-media-two  {
        grid-template-columns:1fr
    }
    .project-media-two .project-video  {
        width:100%
    }
    .project-media-space  {
        height:34px
    }

.modal-close {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 18px;
    width: 42px;
    height: 42px;
    border-radius: 0px 0px 0px 9px;
    border: 0;
    font-size: 16px;
}

}
@media (prefers-reduced-motion:reduce)  {
    html {
        scroll-behavior:auto
    }
    *,
    *:before,
    *:after {
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important
    }
}
.project-video-empty  {
    background:#111
}
.project-media-two .project-media-block:empty  {
    visibility:hidden
}




/* =========================================================
   AJUSTES RESPONSIVE — 1500px HACIA ABAJO
   La versión de 1500px+ queda intacta.
   ========================================================= */

.menu-list {
    display:flex;
    align-items:center;
    gap:1.05vw;
    height:100%;
    margin:0;
    padding:0;
    list-style:none;
}

.menu-item {
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    height:100%;
    margin:0;
    padding:0;
}

/* El área sensible del menú pertenece al LI completo. */
.menu-item .menu-link {
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
}

/* El texto activo también se actualiza cuando el cursor está
   sobre el LI y no solamente sobre el A. */
.menu.menu-hovering .menu-item.is-pill-hover .menu-link {
    color:#fff;
    font-weight:800;
}

@media (max-width:1499px) {

.tituloestandar-popup{
    font-size: 9px;
}

.lineainferior{
    margin-top: -4px;
    margin-bottom: 20px;
}

.lineainferior2{
    width: 70px;
    height: 3px;
    margin-top: -10px;
}   

.margen3{
    width: 100%;
    height: 50px;
}


 .portfolio-title  {
        margin-bottom: 40px;
    }

    .site-header {
        height:clamp(60px,5.05vw,76px);
        min-height:60px;
    }

    .menu {
        height:100%;
    }

    .menu-list {
        gap:clamp(8px,1.05vw,16px);
    }

    .menu-link {
        font-size:clamp(13px,1.07vw,16px);
        padding:6px clamp(7px,.7vw,12px);
    }

    .menu-link.is-active {
        padding-left:clamp(10px,1vw,15px);
        padding-right:clamp(10px,1vw,15px);
    }

    .menu::before {
        height:clamp(34px,2.67vw,40px);
    }

    .cv-button {
        height:clamp(40px,3.53vw,53px);
        min-height:40px;
        padding:0 clamp(22px,2.15vw,32px);
        font-size:clamp(12px,.62vw + 5px,15px);
    }

    /* HERO */
    .hero {
        height:clamp(650px,55.4vw,830px);
    }

    .hero-heading {
        top:clamp(90px,8.5vw,128px);
    }

    .hero-heading > div {
        font-size:clamp(20px,2vw,30px);
    }

    .hero-heading h1 {
        margin:14px 0;
        font-size:clamp(56px,5.1vw,76px);
    }

    .hero-heading p {
        font-size:clamp(23px,2.34vw,35px);
    }

    .hero-skills {
        left:clamp(55px,9.35vw,140px);
        top:46%;
        gap:clamp(7px,.72vw,11px);
    }

    .hero-skills span {
        font-size:clamp(17px,1.78vw,26px);
        padding-bottom:5px;
    }

    .experience {
        right:clamp(55px,9.35vw,140px);
        top:46%;
        padding-right:18px;
    }

    .experience strong {
        font-size:clamp(45px,3.84vw,58px);
    }

    .experience span {
        font-size:clamp(15px,1.28vw,19px);
    }

    .hero-orb {
        width:clamp(700px,65.31vw,979px);
        height:clamp(330px,30.29vw,454px);
    }

    .hero-person {
        width:clamp(360px,28vw,420px);
        height:clamp(470px,36.5vw,548px);
    }

    /* LO QUE HAGO */
    .what-section {
        height:clamp(1000px,80.6vw,1208px);
    }

    .what-top {
        height:clamp(525px,42.3vw,634px);
        padding-top:clamp(90px,7.7vw,115px);
    }

    .section-heading span {
        font-size:clamp(15px,1.2vw,18px);
    }

    .section-heading i {
        width:clamp(22px,1.9vw,29px);
        height:1px;
        margin:4px auto 3px;
    }

    .section-heading h2 {
        font-size:clamp(32px,3vw,45px);
    }

    .services {
        width:min(84%,1260px);
        margin-top:clamp(70px,7.1vw,106px);
    }

    .service {
        padding:0 clamp(22px,2.3vw,34px);
    }

    .service-icon {
        height:clamp(60px,5vw,75px);
        margin-bottom:clamp(10px,.8vw,12px);
    }

    .service h3 {
        font-size:clamp(18px,1.71vw,25px);
    }

    .service p {
        font-size:clamp(12px,.87vw,14px);
    }

    .yellow-band {
        top:clamp(515px,41.3vw,619px);
        height:clamp(145px,12.1vw,181px);
    }

    .ia-stage {
        top:clamp(80px,13.1vw,196px);
        width:min(84%,1260px);
        height:clamp(300px,26.2vw,392px);
        grid-template-columns:1fr clamp(130px,10vw,150px) 1fr;
    }

    .ia-left {
        font-size:clamp(20px,2.25vw,34px);
    }


    .ia-word {
        font-size:clamp(105px,15.1vw,226px);
    }

    .ia-right {
        font-size:clamp(13px,1.32vw,20px);
        margin-left:150px;
    }

    /* PORTAFOLIO */
    .portfolio-title {
        height:clamp(210px,15.4vw,231px);
    }

    .portfolio-word {
        top:clamp(70px,5.15vw,77px);
        font-size:clamp(75px,7.2vw,108px);
    }

    .portfolio-grid {
        grid-template-rows:repeat(5,clamp(270px,24.7vw,370px));
    }

    .tile-info {
        left:clamp(14px,1vw,20px);
        bottom:clamp(14px,1vw,20px);
        padding:13px;
    }

    .tile-info small {
        font-size:clamp(10px,.7vw,11px);
    }

    .tile-info h3 {
        font-size:clamp(13px,1.5vw,15px);
    }

    /* DETRÁS DEL DISEÑO */
    .behind {
        height:clamp(650px,48.9vw,733px);
        padding-top:clamp(80px,6.45vw,97px);
    }

    .behind-content {
        width:min(80.5%,1210px);
        margin-top:clamp(70px,7.3vw,110px);
        gap:clamp(25px,2.35vw,35px);
    }

    .behind-copy {
        font-size:clamp(13px,1vw,15px);
    }

    .behind-copy p {
        margin-bottom:clamp(3px,-0.9vw,17px);
    }

    /* FOOTER */
    .footer {
        padding:40px 30px;
        font-size:clamp(12px,.9vw,14px);
    }

    .footer-copy,
    .location {
        bottom:30px;
    }

    .mail-button {
        height:clamp(32px,2.4vw,36px);
        min-height:28px;
        padding:0 clamp(16px,1.35vw,20px);
        font-size:clamp(12px,.9vw,14px);
    }

    .whatsapp-button {
        width:clamp(32px,2.4vw,36px);
        height:clamp(32px,2.4vw,36px);
        font-size:clamp(13px,1vw,15px);
    }

    .back-top {
        width:clamp(48px,3.65vw,55px);
        height:clamp(48px,3.65vw,55px);
        top:clamp(-92px,-6.1vw,-60px);
        right:clamp(25px,3.1vw,46px);
    }

    /* POPUP — siempre por encima del header */
    .modal-backdrop {
        z-index:2000 !important;
    }

    .project-modal {
        z-index:2010 !important;
    }

    .modal-window {
        border-radius:6px;
    }

    .modal-scroll {
        scrollbar-width:auto;
        padding-right:0;
    }

    .modal-scroll::-webkit-scrollbar {
        width:10px;
    }

    .modal-scroll::-webkit-scrollbar-track {
        background:#fff;
        margin:0;
    }

    .modal-scroll::-webkit-scrollbar-thumb {
        border-radius:10px;
        border:2px solid #fff;
    }

    .modal-scroll::-webkit-scrollbar-button {
        display:none;
        width:0;
        height:0;
    }

    .modal-arrow {
        width:auto !important;
        height:auto !important;
        min-width:34px;
        min-height:44px;
        padding:8px;
        border:0;
        border-radius:0 !important;
        background:transparent !important;
        box-shadow:none !important;
        color:var(--yellow) !important;
        font-size:clamp(25px,2.1vw,34px);
    }

    .modal-arrow:hover {
        background:transparent !important;
        color:var(--yellow) !important;
        box-shadow:none !important;
        transform:scale(1.12);
    }

    .modal-arrow i {
        color:inherit;
    }

    .modal-close {
        z-index:20;
    }

    .project-banner-copy h2 {
    margin: 8px 0 0;
    font-size: clamp(31px, 5vw, 31px);
    line-height: .9;
    letter-spacing: -.07em;
}

.project-banner-copy span{
    font-size: 12px;
}

    /* Suaviza también los saltos provocados por los enlaces internos. */
    html {
        scroll-behavior:smooth;
    }
}

/* =========================================================
   TABLET — 701px a 1100px
   ========================================================= */
@media (min-width:701px) and (max-width:1100px) {

    .margen3{
    width: 100%;
    height: 0px;
}


    .site-header {
        height:64px;
        min-height:64px;
    }

    .menu-list {
        gap:5px;
    }

    .menu-link {
        font-size:13px;
        padding:6px 8px;
    }

    .menu-link.is-active {
        padding-left:10px;
        padding-right:10px;
    }

    .cv-button {
        height:44px;
        min-height:44px;
        padding:0 20px;
        font-size:13px;
    }

    .hero {
        height:680px;
        min-height:0;
    }

    .hero-heading {
        top:100px;
    }

    .hero-heading > div {
        font-size:21px;
    }

    .hero-heading h1 {
        font-size:60px;
    }

    .hero-heading p {
        font-size:25px;
    }

    .hero-skills {
        top:48%;
        left:50px;
    }

    .hero-skills span {
        font-size:18px;
    }

    .experience {
        top:48%;
        right:50px;
    }

    .experience strong {
        font-size:48px;
    }

    .experience span {
        font-size:15px;
    }

    .hero-orb {
        width:720px;
        height:355px;
    }

    .hero-person {
        width:390px;
        height:500px;
    }

    .what-section {
        height:1100px;
    }

    .what-top {
        height:570px;
        padding-top:90px;
    }

    .section-heading span {
        font-size:14px;
    }

    .section-heading h2 {
        font-size:32px;
    }

    .services {
        width:90%;
        grid-template-columns:repeat(2,1fr);
        row-gap:55px;
        margin-top:65px;
    }

    .service {
        min-height:150px;
        padding:0 28px;
    }

    .service:nth-child(2n) {
        border-right:0;
    }

    .service-icon {
        height:65px;
        margin-bottom:12px;
    }

    .service h3 {
        font-size:18px;
    }

    .service p {
        font-size:12px;
    }

    .yellow-band {
        top:555px;
        height:160px;
    }

    .ia-stage {
        top:95px;
        width:90%;
        height:370px;
        grid-template-columns:1.5fr 0.6fr 1.6fr;
    }

    .ia-left {
        font-size:19px;
    }

    .ia-word {
        font-size:125px;
    }

    .ia-right {
        font-size:12px;
    }

    .portfolio-title {
        height:190px;
    }

    .portfolio-word {
        top:65px;
        font-size:80px;
    }

    .portfolio-grid {
        grid-template-columns:repeat(2,1fr);
        grid-template-rows:repeat(8,300px);
        gap:2px;
    }

    .tile,
    .tile:nth-child(n) {
        grid-column:auto !important;
        grid-row:auto !important;
        min-height:0;
    }

    .tile-info {
        left:18px;
        bottom:18px;
        padding:10px;
    }

    .tile-info small {
        font-size:10px;
    }

    .tile-info h3 {
        font-size:14px;
    }

    .behind {
        height:auto;
        min-height:700px;
        padding:90px 40px 80px;
    }

    .behind-content {
        width:90%;
        margin-top:70px;
        gap:40px;
    }

    .behind-copy {
        font-size:13px;
    }

    .footer {
        height: 90px;
        margin-top:0;
        padding:40px 30px;
        display: flex;
        flex-direction: column;
        align-items: center
    }

    .footer-copy,
    .location {
        bottom:28px;
    }

    .mail-button {
        height:34px;
        font-size:12px;
        padding:0 18px;
    }

    .whatsapp-button {
        width:34px;
        height:34px;
        font-size:14px;
    }

    .project-modal {
        grid-template-columns:42px minmax(0,1fr) 42px;
        gap:4px;
        padding:22px 10px;
    }

    .modal-arrow {
        min-width:32px;
        font-size:28px;
    }

    .project-banner {
        min-height:310px;
    }

    .project-banner-copy h2 {
        font-size:clamp(30px,5vw,15px);
    }
}

/* =========================================================
   MÓVIL — hasta 700px
   ========================================================= */
@media (max-width:700px) {

        .margen3{
    width: 100%;
    height: 0px;
}

    .tituloestandar-popup{
    font-size: 9px;
    margin-top: 30px;
}

.lineainferior{
    margin-top: -4px;
    margin-bottom: 20px;
}

.lineainferior2{
    width: 70px;
    height: 3px;
    margin-top: -10px;
}  

    .site-header {
        height:58px;
        min-height:58px;
        padding:0 18px;
        justify-content:flex-end;
    }

    .menu {
        display:none;
        left:0;
        right:0;
        top:58px;
        height:auto;
        padding:9px 18px 15px;
        background:rgba(255,255,255,.96);
        backdrop-filter:blur(14px);
        -webkit-backdrop-filter:blur(14px);
        flex-direction:column;
        align-items:stretch;
        gap:2px;
    }

    .menu.open {
        display:flex;
    }

    .menu-list {
        width:100%;
        height:auto;
        flex-direction:column;
        align-items:stretch;
        gap:2px;
    }

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

    .menu-link,
    .menu-link.is-active {
        width:100%;
        min-height:40px;
        height:40px;
        justify-content:flex-start;
        padding:8px 10px;
        font-size:16px;
        color:#636361;
        font-weight:300;
    }

    .menu-link.is-active {
        color:#111;
        font-weight:800;
    }

    .menu.menu-hovering .menu-link {
        color:#636361;
        font-weight:300;
    }

    .menu.menu-hovering .menu-item.is-pill-hover .menu-link {
        color:#111;
        font-weight:800;
    }

    .menu::before {
        display:none;
    }

    .cv-button {
        position:static;
        height:42px;
        min-height:42px;
        font-size:15px;
        justify-content:center;
        border-radius:0 0 0 22px;
        padding:0 18px;
    }

    .mobile-menu {
        display:block;
        border:0;
        padding:0;
        color:#111;
        cursor:pointer;
    }

    .hero {
        height:630px;
        min-height:630px;
    }

    .hero-heading {
        top:106px;
        padding:0 18px;
    }

    .hero-heading > div {
        font-size:16px;
    }

    .hero-heading h1 {
        margin:10px 0;
        font-size:clamp(42px,9.8vw,69px);
        line-height:.98;
    }

    .hero-heading p {
        font-size:18px;
    }

    .hero-skills {
        top:275px;
        left:8%;
        gap:10px;
    }

    .hero-skills span {
        font-size:14px;
        padding-bottom:5px;
    }

    .experience {
        top:282px;
        right:8%;
        padding-right:12px;
    }

    .experience strong {
        font-size:30px;
    }

    .experience span {
        font-size:11px;
    }

    .hero-orb {
        width: 560px;
        height: 185px;
    }

    .hero-person {
        width:340px;
        height:385px;
    }

    .what-section {
        height:auto;
        min-height:1050px;
    }

    .what-top {
        height:auto;
        min-height:623px;
        padding:78px 18px 0;
    }

    .section-heading span {
        font-size:13px;
    }

    .section-heading i {
        width:24px;
        margin:7px auto 6px;
    }

    .section-heading h2 {
        font-size:31px;
    }

    .services {
        width:88%;
        grid-template-columns:1fr 1fr;
        gap:45px 20px;
        margin-top:-25px;
    }

    .service {
        min-height:0px;
        height:auto;
        padding:0 8px;
        margin:0;
    }
    .service:nth-child(1n) {
       padding-left: 10%;
    }
    .service:nth-child(2n) {
        border-right:0;
    }

    .service-icon {
        height:64px;
        margin-bottom:15px;
    }

    .service h3 {
        font-size:16px;
    }

    .service p {
        font-size:11px;
        line-height:1.5;
    }

    .yellow-band {
        top:620px;
        height:133px;
    }

    .ia-stage {
        position:relative;
        top:auto;
        width:100%;
        height:auto;
        min-height:390px;
        margin:0;
        padding:121px 18px 34px;
        display:grid;
        grid-template-columns:1fr;
        gap:30px;
        text-align:center;
    }

    .ia-left {
        font-size:23px;
        text-align:center;
    }

    .ia-word {
        font-size:110px;
        margin:0;
        line-height:.75;
    }

    .ia-right {
        font-size:15px;
        line-height:1.5;
        margin:0;
        text-align:center;
    }

    .portfolio-title {
        height:180px;
    }

.portfolio-word {
        top: 70px;
        font-size: 14vw;
    }

    .portfolio-grid {
        grid-template-columns:1fr 1fr;
        grid-template-rows:repeat(8,44vw);
        gap:2px;
    }

    .tile,
    .tile:nth-child(n) {
        grid-column:auto !important;
        grid-row:auto !important;
        min-height:0;
    }

    .tile-info {
        left:10px;
        right:8px;
        bottom:10px;
        padding:0;
    }

    .tile-info small {
        font-size:9px;
    }

    .tile-info h3 {
        font-size:12px;
    }

    .behind {
        height:auto;
        min-height:0;
        padding:85px 18px 70px;
    }

    .behind-content {
        width:100%;
        margin-top:55px;
        grid-template-columns:1fr;
        gap:38px;
    }

    .behind-photo {
        width:100%;
    }

    .behind-copy {
        font-size:13px;
        line-height:1.65;
    }

    .behind-copy p {
        margin-bottom:20px;
    }

    .behind-copy br {
        display:none;
    }

    .back-top {
        width:48px;
        height:48px;
        right:18px;
        top:-58px;
        font-size:20px;
    }

    /* POPUP MOBILE */
    .modal-backdrop {
        z-index:2000 !important;
    }

    .project-modal {
        z-index:2010 !important;
        grid-template-columns:28px minmax(0,1fr) 28px;
        gap:2px;
        padding:14px 3px;
    }

    .modal-window {
        border-radius:6px;
        width: 92%;
        left: 4%;
    }

    .modal-arrow {
        min-width:24px;
        min-height:42px;
        padding:5px 0;
        font-size:25px;
    }

    .modal-close {
        top:0px;
        right:15px;
        width:34px;
        height:34px;
    }

    .modal-scroll {
        scrollbar-width:auto;
    }

    .modal-scroll::-webkit-scrollbar {
        width:7px;
    }

    .modal-scroll::-webkit-scrollbar-track {
        background:#fff;
        margin:0;
    }

    .modal-scroll::-webkit-scrollbar-thumb {
        border:1px solid #fff;
        border-radius:8px;
    }

    .modal-scroll::-webkit-scrollbar-button {
        display:none;
        width:0;
        height:0;
    }

    .project-banner {
        min-height:220px;
    }

    .project-banner-copy {
        left:22px;
        right:50px;
        bottom:25px;
    }

    .project-banner-copy span {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: #ddd;
}

    .project-banner-copy h2 {
        font-size: 25px;
        line-height: 29px;
    }

    .project-description {
        padding:44px 43px;
    }

    .project-description p {
        font-size:13px;
        line-height:1.8;
    }
}

/* =========================================================
   AJUSTES FINALES — SCROLL, POPUP Y MENÚ MÓVIL
   Solo afectan comportamientos problemáticos y <=1499px.
   ========================================================= */

/* El popup siempre crea una capa superior al header. */
@media (max-width:1499px) {
    body.modal-open .site-header {
        z-index:0 !important;
        pointer-events:none !important;
    }

    .modal-backdrop {
        z-index:99990 !important;
    }

    .project-modal {
        z-index:100000 !important;
    }
}

@media (max-width:700px) {
    /* Header móvil: hamburguesa totalmente a la izquierda y CV a la derecha. */
    .site-header {
        position:absolute;
        top:0;
        left:0;
        right:0;
        height:60px;
        min-height:60px;
        padding:0;
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        background:#fff;
        box-shadow:0 2px 8px rgba(0,0,0,0.16);
    }

    .site-header.fixed {
        position:fixed;
        box-shadow:0 2px 8px rgba(0,0,0,0.16);
    }

    .mobile-menu {
        position:absolute;
        left:0;
        top:0;
        width:60px;
        height:60px;
        display:grid;
        place-items:center;
        border:0;
        padding:0;
        margin:0;
        background:#111;
        color:#fff;
        font-size:22px;
        line-height:1;
        cursor:pointer;
        z-index:20;
        transition:background .25s ease, transform .25s ease;
    }

    .mobile-menu:active {
        transform:scale(.96);
    }

    .cv-button {
        position:absolute;
        top:0;
        right:0;
        height:44px;
        min-height:44px;
        padding:0 18px 0 20px;
        display:flex;
        align-items:center;
        justify-content:center;
        background:var(--yellow);
        color:#fff;
        border-radius:0 0 0 22px;
        font-size:13px;
        font-weight:700;
        z-index:20;
    }

    /* Menú desplegable moderno, limpio y fácil de identificar. */
    .menu {
        position:absolute;
        left:10px;
        right:10px;
        top:68px;
        width:auto;
        height:auto;
        padding:10px;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        background:rgba(255,255,255,.98);
        border:1px solid rgba(17,17,17,.07);
        border-radius:18px;
        box-shadow:0 18px 45px rgba(0,0,0,.14);
        backdrop-filter:blur(18px);
        -webkit-backdrop-filter:blur(18px);
        overflow:hidden;
        z-index:30;
    }

    .menu.open {
        display:flex;
        animation:mobileMenuIn .28s cubic-bezier(.2,.72,.2,1) both;
    }

    .menu-list {
        width:100%;
        height:auto;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:4px;
    }

    .menu-item {
        width:100%;
        height:auto;
        display:block;
        border-radius:12px;
        overflow:hidden;
    }

    .menu-item .menu-link,
    .menu-link,
    .menu-link.is-active {
        position:relative;
        width:100%;
        height:48px;
        min-height:48px;
        display:flex;
        align-items:center;
        justify-content:flex-start;
        padding:0 15px 0 22px;
        border-radius:12px;
        color:#636361;
        font-size:15px;
        font-weight:500;
        letter-spacing:-.01em;
        background:transparent;
        transition:color .22s ease, background .22s ease, padding-left .22s ease;
    }

    .menu-link::before {
        content:"";
        position:absolute;
        left:8px;
        top:50%;
        width:5px;
        height:5px;
        border-radius:50%;
        background:var(--yellow);
        transform:translateY(-50%) scale(0);
        transition:transform .22s ease;
    }

    .menu-link.is-active {
        background:#111;
        color:#fff;
        font-weight:800;
        padding-left:22px;
    }

    .menu-link.is-active::before {
        transform:translateY(-50%) scale(1);
    }

    .menu.menu-hovering .menu-link,
    .menu.menu-hovering .menu-link.is-active,
    .menu.menu-hovering .menu-item.is-pill-hover .menu-link {
        background:transparent;
        color:#636361;
        font-weight:500;
    }

    .menu.menu-hovering .menu-item.is-pill-hover .menu-link {
        background:#111;
        color:#fff;
        font-weight:800;
    }

    .menu.menu-hovering .menu-item.is-pill-hover .menu-link::before {
        transform:translateY(-50%) scale(1);
    }

    .menu::before {
        display:none !important;
    }

    .menu-link a {
        padding:0;
    }

    @keyframes mobileMenuIn {
        from {
            opacity:0;
            transform:translateY(-8px) scale(.98);
        }
        to {
            opacity:1;
            transform:translateY(0) scale(1);
        }
    }

    /* El menú móvil no debe mostrar el hover del escritorio. */
    .menu-link:hover {
        background:transparent;
    }

    /* Popup móvil sigue quedando por encima de absolutamente todo. */
    body.modal-open .site-header {
        z-index:0 !important;
    }

    .modal-backdrop {
        z-index:99990 !important;
    }

    .project-modal {
        z-index:100000 !important;
    }
}

/* =========================================================
   FIX DEFINITIVO — CAPAS DEL POPUP
   El header SIEMPRE queda debajo del overlay cuando el popup
   está abierto, en escritorio, tablet y móvil.
   ========================================================= */

body.modal-open .site-header,
body.modal-open .site-header.fixed {
    z-index: 1 !important;
}

body.modal-open .site-header .menu,
body.modal-open .site-header .cv-button,
body.modal-open .site-header .mobile-menu {
    z-index: 1 !important;
}

body.modal-open .modal-backdrop {
    position: fixed !important;
    z-index: 2147483000 !important;
}

body.modal-open .project-modal {
    position: fixed !important;
    z-index: 2147483001 !important;
}

/* Evita que algún contexto visual del header pueda quedar por encima. */
body.modal-open .site-header {
    filter: none !important;
    transform: none !important;
}


/* =========================================================
   POPUP — CHEVRONS Y ESTADOS DE NAVEGACIÓN
   ========================================================= */
.modal-arrow {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 8px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--yellow) !important;
    font-size: 36px !important;
    line-height: 1 !important;
    opacity: 1;
    cursor: pointer;
    transform: none;
    transition: color .2s ease, opacity .2s ease, transform .2s ease;
}

.modal-arrow:hover:not(:disabled) {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--yellow) !important;
    transform: scale(1.12);
}

.modal-arrow:disabled,
.modal-arrow[aria-disabled="true"] {
    color: #9b9b9b !important;
    opacity: 1 !important;
    cursor: default !important;
    pointer-events: none;
    transform: none !important;
}

.modal-arrow:disabled i,
.modal-arrow[aria-disabled="true"] i {
    color: #9b9b9b !important;
}

.modal-arrow i {
    color: inherit !important;
    font-size: inherit !important;
}

@media (max-width: 767px) {
    .modal-arrow {
        font-size: 22px !important;
        padding: 6px !important;
    }
}


/* =========================================================
   AJUSTE FINAL — SCROLLBAR DEL POPUP EN TODAS LAS RESOLUCIONES
   ========================================================= */
.modal-scroll {
    scrollbar-width: auto !important;
    
}

.modal-scroll::-webkit-scrollbar {
    width: 10px !important;
    height: 10px !important;
}

.modal-scroll::-webkit-scrollbar-track {
    background: #fff !important;
}

.modal-scroll::-webkit-scrollbar-button {
    display: none !important;
}



.modal-scroll::-webkit-scrollbar-thumb {
    border: 2px solid #fff !important;
    border-radius: 0px !important;
}

.modal-scroll::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

@media (max-width: 767px) {
    .modal-scroll {
        scrollbar-width: auto !important;
    }

    .modal-scroll::-webkit-scrollbar {
        width: 7px !important;
    }

    .modal-scroll::-webkit-scrollbar-thumb {
        border: 1px solid #fff !important;
    }
}




@media (max-width: 1520px) and (min-width: 1295px) {
    
.menu-list {
    display: flex;
    align-items: center;
    gap: 2.05vw;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-link {
    position: relative;
    z-index: 1;
    font-size: 14px;
    font-weight: 300;
    padding: .16vw .7vw;
    border-radius: 2vw;
    white-space: nowrap;
    color: #636361;
    transition: color .2s, font-weight .2s;
}

.ia-word {
    margin-left: -52px !important;
}

.mail-button, .whatsapp-button{
    bottom: 24px;
}

.site-header {
    box-shadow: 0 21px 17px -28px rgba(0, 0, 0, 0.75);
}
    
}


@media (max-width:1294px) and (min-width: 1100px) {
    
.menu-list {
    display: flex;
    align-items: center;
    gap: 2.05vw;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-link {
    position: relative;
    z-index: 1;
    font-size: 14px;
    font-weight: 300;
    padding: .16vw .7vw;
    border-radius: 2vw;
    white-space: nowrap;
    color: #636361;
    transition: color .2s, font-weight .2s;
}

    .ia-left {
        font-size: clamp(20px, 2.45vw, 34px);
    }

.ia-word {
    margin-left: -24px !important;
}

    .ia-right {
        font-size: clamp(13px, 1.32vw, 20px);
        margin-left: 70px;
    }

.mail-button, .whatsapp-button{
    bottom: 24px;
}
    
.footer{
    margin-top: 10px;
}

.mail-button{
    gap: 1.45vw;
    left: 52%;
}
.whatsapp-button{
left: calc(50% + 12.7vw);
}

.site-header, .site-header.fixed {
    box-shadow: 0 21px 17px -27px rgba(0, 0, 0, 0.75);
}
    .hero {
        height: clamp(650px, 63.4vw, 830px);
    }

    .hero-heading h1 {
        margin: 7px 0;
        font-size: clamp(56px, 5.1vw, 76px);
    }

    .hero-heading {
        top: clamp(90px, 10.5vw, 128px);
    }

}

@media (max-width:1099px) and (min-width: 900px) {

    .mail-button{
    left: 53%;
}
.whatsapp-button{
left: calc(50% + 12.7vw);
}

}

@media (max-width:899px) and (min-width: 700px) {

    .mail-button{
    left: 55%;
}
.whatsapp-button{
left: calc(55% + 12.7vw);
}

}


@media (max-width:1099px) and (min-width: 700px) {

.site-header{
    justify-content: flex-start;
    padding-left: 50px;
}

.cv-button {
    border-radius: 0 0 0 19px;
}


    .hero-person {
        width: 375px;
        height: 467px;
    }
    
.menu-list {
    display: flex;
    align-items: center;
    gap: 2.05vw;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-link {
    position: relative;
    z-index: 1;
    font-size: 14px;
    font-weight: 300;
    padding: .16vw .7vw;
    border-radius: 2vw;
    white-space: nowrap;
    color: #636361;
    transition: color .2s, font-weight .2s;
}

    .ia-left {
        font-size: clamp(20px, 2.45vw, 34px);
    }

.ia-word {
    margin-left: -35% !important;
     font-size: 15vw;
}

    .ia-right {
        font-size: 1.7vw;
        margin-left: 4%;
    }

.mail-button, .whatsapp-button{
    bottom: 24px;
}
    
.footer{
    margin-top: 10px;
}


.site-header, .site-header.fixed {
    box-shadow: 0 21px 17px -27px rgba(0, 0, 0, 0.75);
}
    .hero {
        height: clamp(700px, 63.4vw, 830px);
    }

    .hero-heading h1 {
        margin: 7px 0;
        font-size: clamp(56px, 5.1vw, 76px);
    }

    .hero-heading {
        top: clamp(120px, 10.5vw, 128px);
    }

        .experience {
        top: 48%;
        right: 32px;
    }

        .hero-orb {
        width: 623px;
        height: 318px;
    }


    .what-top {
        height: 648px;
        padding-top: 90px;
    }

        .service:nth-child(2n) {
        border-right: 0;
        padding-left: 20%;
    }

        .services {
        padding: 0px 10%;
    }

        .yellow-band {
        top: 619px;
        height: 138px;
    }

    .what-section {
        height: 950px;
    }


.modal-close {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 15px;
    width: 35px;
    height: 35px;
    border-radius: 0px 0px 0px 15px;
    border: 0;
    font-size: 17px;
}

.behind-content{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.behind-content .behind-photo{

    width: 90%;
    margin: 10px auto 0px auto;

}

.behind-copy{
    width: 100%;
    text-align: center;
    font-size: 15px;
}

.footer-copy, .location{
    position: relative;
    left: 0;
    right: 0;
}

    .footer-copy, .location {
        font-size: 14px;
    }

    .footer{
        padding: 120px 30px 30px 30px;
        height: auto;
    }

.mail-button{
    order: 1;
    margin: 0 auto 76px -50px;
    font-size: 15px;
    border-radius: 500px;
}

.whatsapp-button{
    bottom: inherit;
    top: 42px;
}
    .footer-copy{
        order: 4;
        margin-top: 10px;
        margin-bottom: -20px;
    }

    .location{
        order: 3;
    }


    .back-top {
        width: clamp(48px, 3.65vw, 55px);
        height: clamp(48px, 3.65vw, 55px);
        top: clamp(-92px, -6.1vw, -87px);
        right: clamp(25px, 3.1vw, 46px);
    }

}

@media (max-width:699px) and (min-width: 600px) {

        .tile img{
    opacity: 1 !important;
    transition: all 0.5s ease;
}

        .margen3{
    width: 100%;
    height: 0px;
}

    .mail-button{
    left: 46%;
}
.whatsapp-button{
left: calc(54% + 12.7vw);
}

}

@media (max-width:599px) and (min-width: 400px) {

        .tile img{
    opacity: 1 !important;
    transition: all 0.5s ease;
}

        .margen3{
    width: 100%;
    height: 0px;
}

    .mail-button{
    left: 45%;
}
.whatsapp-button{
left: calc(57% + 12.7vw);
}

}


@media (max-width:699px) and (min-width: 461px) {

    .tile img{
    opacity: 1 !important;
    transition: all 0.5s ease;
}


        .margen3{
    width: 100%;
    height: 0px;
}

    .tile img{
        filter: none;
    }

    .modal-next{
        padding-right: 30px !important;
    }

    .modal-prev{
        padding-left: 30px !important;
    }

    .project-media-two{
        padding: 0;
    }

    .project-banner-copy h2{
        margin: 0;
    }
    
    .behind-copy{
        text-align: center;
        width: 90%;
        margin: 0 auto;
    }

.footer-copy, .location{
    position: relative;
    left: 0;
    right: 0;
}

    .footer-copy, .location {
        font-size: 12px;
    }

    .footer{
        padding: 120px 30px 30px 30px;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 0px;
    }

.mail-button{
    order: 1;
    font-size: 13px;
    border-radius: 500px;
    top: 34px;
}

.whatsapp-button{
    bottom: inherit;
    top: 34px;
}
    .footer-copy{
        max-width: 100%;
        order: 4;
        margin-top: 6px;
        margin-bottom: -20px;
    }

    .location{
        order: 3;
        max-width: 100%;
    }


    .back-top, .back-top:hover {
        width: 40px;
        height: 40px;
        top: -65px;
        right: 44%;
    }

    .behind {
        height: auto;
        min-height: 0;
        padding: 85px 18px 107px;
    }
    
}

/* =========================================================
   CURSOR PERSONALIZADO
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
    html,
    html *,
    html *::before,
    html *::after,
    body,
    body * {
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1' viewBox='0 0 1 1'%3E%3Cpath d='M0 0h0' fill='none'/%3E%3C/svg%3E") 0 0, none !important;
    }

    .custom-cursor {
        position: fixed;
        inset: 0;
        z-index: 2147483647;
        pointer-events: none;
        display: block;
    }

    .custom-cursor__ball {
        position: fixed;
        top: 0;
        left: 0;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #000;
        transform: translate3d(-100px, -100px, 0);
        will-change: transform;
    }

    .custom-cursor__ball--big {
        width: 24px;
        height: 24px;
        margin-left: -12px;
        margin-top: -12px;
        transition: width .25s ease, height .25s ease, margin-left .25s ease, margin-top .25s ease, background-color .25s ease;
    }

    .custom-cursor__ball--small {
        width: 8px;
        height: 8px;
        margin-left: -4px;
        margin-top: -4px;
        background: #000 !important;
        transition: background-color .18s ease;
        opacity: 1 !important;
        mix-blend-mode: normal !important;
        filter: none !important;
        z-index: 3;
    }

    .custom-cursor.is-overlapping .custom-cursor__ball--small {
        background: #fff !important;
    }

    .custom-cursor.is-hovering .custom-cursor__ball--big {
        width: 39px;
        height: 39px;
        margin-left: -19.5px;
        margin-top: -19.5px;
        background: var(--yellow) !important;
    }
}

@media (hover: none), (pointer: coarse) {
    .custom-cursor {
        display: none;
    }
}


/* =========================================================
   CONTENIDO HTML EDITABLE DE LOS PROYECTOS
   ========================================================= */

.project-media-grid {
    display: grid;
    gap: clamp(8px, 1.2vw, 22px);
    width: 100%;
    padding: 0 clamp(8px, 1.2vw, 22px);
    box-sizing: border-box;
}

.project-media-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-media-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.project-media-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.project-media-grid > .project-video {
    min-width: 0;
}

.project-video-vertical {
    aspect-ratio: 9 / 16;
}

.project-video-horizontal {
    aspect-ratio: 16 / 9;
}

.project-media-space-2 {
    height: var(--space-2);
}

.project-media-space-3 {
    height: var(--space-3);
}

.project-media-space-4 {
    height: var(--space-4);
}

@media (max-width: 1000px) {
    .project-media-grid-2,
    .project-media-grid-3,
    .project-media-grid-4 {
        grid-template-columns: 1fr;
    }
}





@media (max-width:460px) and (min-width: 200px) {

    .tile img{
    opacity: 1 !important;
    transition: all 0.5s ease;
}


        .margen3{
    width: 100%;
    height: 0px;
}

    .tile img{
        filter: none;
    }

    .modal-next{
        padding-right: 30px !important;
    }

    .modal-prev{
        padding-left: 30px !important;
    }

    .project-media-two{
        padding: 0;
    }

    .project-banner-copy h2{
        margin: 0;
    }
    
    .behind-copy{
        text-align: center;
        width: 90%;
        margin: 0 auto;
    }

.footer-copy, .location{
    position: relative;
    left: 0;
    right: 0;
}

    .footer-copy, .location {
        font-size: 12px;
    }

    .footer{
        padding: 120px 30px 30px 30px;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 0px;
    }

.mail-button{
    order: 1;
    font-size: 13px;
    border-radius: 500px;
    top: 34px;
    left: 44%;
}

.whatsapp-button{
    bottom: inherit;
    top: 34px;
    left: calc(60% + 15vw);
}
    .footer-copy{
        max-width: 100%;
        order: 4;
        margin-top: 6px;
        margin-bottom: -20px;
        text-align: center;
    }

    .location{
        order: 3;
        max-width: 100%;
        margin-bottom: 10px;
    }


    .back-top, .back-top:hover {
        width: 40px;
        height: 40px;
        top: -65px;
        right: 44%;
    }

    .behind {
        height: auto;
        min-height: 0;
        padding: 85px 18px 107px;
    }
    
        .portfolio-grid {
       grid-template-columns: 1fr;
grid-template-rows: repeat(12, 96vw);
        gap: 4px;
    }

        .project-tile, .project-tile:nth-child(n) {
        min-height: 96vw !important;
    }

        .tile-info {
        left: 30px;
        right: 8px;
        bottom: 30px;
        padding: 0 30px 0px 0px;
    }

        .tile-info h3 {
        font-size: 18px;
    }

        .tile-info small {
        font-size: 11px;
    }

        .modal-close {
        top: 0px;
        right: 0;
        width: 34px;
        height: 34px;
    }

    .project-banner-copy h2 {
        font-size: 18px;
        line-height: 21px;
    }
    .project-banner-copy span{
        display: none;
    }
    .project-banner {
        min-height: 192px;
    }

        .project-description p {
        font-size: 13px;
        line-height: 1.6;
    }

        .project-description {
        padding: 44px 23px;
    }
.project-modal{
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 0;
    width: 96%;
    height: 82vh;
    margin: 0;
    top: 10vh;
    left: 4%;
    transition: none;
}

.modal-arrow{
    display: none;
}
.modal-window{
            left: 2%;
        top: 8vh;
}

.yellow-band{
    right: 0;
}
.modal-backdrop{
    background: rgba(0, 0, 0, 0.8);
}

    .what-top {
        height: auto;
        min-height: 671px;
        padding: 78px 18px 0;
    }

        .yellow-band {
        top: 665px;
        height: 133px;
    }

}




















































/* =========================================================
   SISTEMA GENERAL DE VIDEOS
   ========================================================= */

.video-layout {
    width: 100%;
    box-sizing: border-box;

    /*
     * MARGEN LATERAL EXTERIOR
     * ESCRITORIO
     */

    padding-left: 62px;
    padding-right: 62px;

    /*
     * SEPARACIÓN VERTICAL ENTRE CONTENEDORES
     */

    margin-top: 24px;
    margin-bottom: 24px;
}


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

.video-layout--one {
    margin-top: 0;
}


/* =========================================================
   ÚLTIMO CONTENEDOR
   ========================================================= */

.video-layout--three {
    margin-bottom: 0;
}


/* =========================================================
   VIDEO CARD
   ========================================================= */

.video-card {
    position: relative;

    width: 100%;

    overflow: hidden;


    box-sizing: border-box;
}


/* =========================================================
   VIDEO
   ========================================================= */

.video-element {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    border-radius: 10px;
    background: #fff;
}


/* =========================================================
   OPCIÓN 1
   1 VIDEO
   ========================================================= */

.video-layout--one {
    display: block;
}


/* =========================================================
   OPCIÓN 2
   2 VIDEOS
   ========================================================= */

.video-layout--two {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    /*
     * ESPACIO ENTRE LOS DOS VIDEOS
     */

    gap: 24px;
}


/* =========================================================
   OPCIÓN 3
   3 VIDEOS
   ========================================================= */

.video-layout--three {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    /*
     * ESPACIO ENTRE LOS TRES VIDEOS
     */

    gap: 24px;
}


/* =========================================================
   VIDEOS VERTICALES
   1080 × 1920
   ========================================================= */

.video-card--vertical {
    aspect-ratio: 9 / 16;
}


.video-card--vertical .video-element {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   BOTÓN PLAY / PAUSE
   ========================================================= */

.video-control {
    position: absolute;

    top: 18px;
    right: 18px;

    width: 46px;
    height: 46px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;

    border: none;

    border-radius: 50%;

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

    cursor: pointer;

    z-index: 100;

    appearance: none;
    -webkit-appearance: none;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


/* =========================================================
   HOVER BOTÓN
   ========================================================= */

.video-control:hover {
    transform: scale(1.1);

    background: rgba(0, 0, 0, 0.95);
}


/* =========================================================
   ICONOS
   ========================================================= */

.video-icon {
    width: 18px;
    height: 18px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #fff;

    pointer-events: none;
}


.video-icon svg {
    display: block;

    width: 100%;
    height: 100%;

    fill: currentColor;
}


/* =========================================================
   PAUSE OCULTO
   ========================================================= */

.video-icon--pause {
    display: none;
}


/* =========================================================
   VIDEO REPRODUCIÉNDOSE
   ========================================================= */

.video-card.is-playing
.video-icon--play {
    display: none;
}


.video-card.is-playing
.video-icon--pause {
    display: flex;
}


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

@media (max-width: 900px) {

    .video-layout {

        /*
         * MARGEN LATERAL
         */

        padding-left: 16px;
        padding-right: 16px;

        /*
         * ESPACIO VERTICAL
         */

        margin-top: 16px;
        margin-bottom: 16px;
    }


    /* ---------------------------------------------
       PRIMER CONTENEDOR
       --------------------------------------------- */

    .video-layout--one {
        margin-top: 0;
    }


    /* ---------------------------------------------
       ÚLTIMO CONTENEDOR
       --------------------------------------------- */

    .video-layout--three {
        margin-bottom: 0;
    }


    /* ---------------------------------------------
       SEPARACIÓN INTERNA
       --------------------------------------------- */

    .video-layout--two,
    .video-layout--three {

        gap: 16px;

    }

}


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

@media (max-width: 600px) {

    .video-layout {

        /*
         * MARGEN LATERAL
         */

        padding-left: 16px;
        padding-right: 16px;

        /*
         * ESPACIO VERTICAL
         */

        margin-top: 16px;
        margin-bottom: 16px;

    }


    /* ---------------------------------------------
       OPCIÓN 1
       --------------------------------------------- */

    .video-layout--one {
        margin-top: 0;
    }


    /* ---------------------------------------------
       OPCIÓN 2
       --------------------------------------------- */

    .video-layout--two {

        grid-template-columns: 1fr;

        gap: 16px;

    }


    /* ---------------------------------------------
       OPCIÓN 3
       --------------------------------------------- */

    .video-layout--three {

        grid-template-columns: 1fr;

        gap: 16px;

        margin-bottom: 0;

    }


    /* ---------------------------------------------
       BOTÓN
       --------------------------------------------- */

    .video-control {

        top: 12px;
        right: 12px;

        width: 42px;
        height: 42px;

    }

}



.tile img{
    opacity: 1;
    transition: all 0.5s ease;
}

.tile:hover img{
    opacity: 1;
}

/* =========================================================
   FIX — POPUP MÓVIL: BLOQUEO DEL SCROLL DEL FONDO
   No modifica el diseño ni el comportamiento del popup.
   ========================================================= */
@media (max-width:700px) {
    html.modal-mobile-open,
    html.modal-mobile-open body {
        overflow: hidden !important;
        width: 100% !important;
        height: 100% !important;
    }

    html.modal-mobile-open body {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* El popup debe ocupar la pantalla desde arriba. */
    html.modal-mobile-open .project-modal {
        top: 0 !important;
    }
}