@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
    --ink:#11120f;
    --white: #ffffff;
    --paper:#f4f4ef;
    --white:#ffffff;
    --muted:#66675f;
    --lime:#eaff42;
    --yellow: #fac600;
    --violet:#c4b6ff;
    --orange:#ff7a3d;
    --red:#ff5353;
    --grey: #777777;
    --line:rgba(17,18,15,.14);
    --radius-xl:56px;
    --radius-lg:34px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    font-family:"Inter",sans-serif;
    color:var(--ink);
    background:var(--paper);
    overflow-x:hidden;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font:inherit}
.container{width:min(1240px,calc(100% - 44px));margin-inline:auto}
.section{padding:120px 0}

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    padding:22px 0;
    transition:.35s ease;
}
.header.scrolled{
    padding:18px 0;
    background:rgba(244,244,239,.9);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
}
.header__inner{
    display:flex;
    align-items:center;
    gap:36px;
}
.logo{margin-right:auto}
.logo img{height:52px;width:auto}
.nav {
    display: flex;
    gap: 20px;
}
.nav a {
    position: relative;
    font-size: .95rem;
    font-weight: 600;
    color: #111;
    text-decoration: none;
    padding-bottom: 4px;
    transition: color 0.3s ease;
    width: min-content;
}
.nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--red, #ff0000);
    transition: width 0.3s ease;
}
.nav a:hover::after {
    width: 100%;
}
.nav a:active::after {
    width: 100%;
}
.nav a.active {
    color: var(--red, #ff0000); 
    width: min-content;
}
.nav a.active::after {
    width: 100%;
}
.header__cta{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:45px;
    padding:0 20px;
    border-radius:999px;
    color: var(--white);
    background:var(--ink);
    font-weight:700;
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.15); 
    transition: transform 0.7s ease, box-shadow 0.7s ease;
}
.header__cta:hover {
    transform: translate(5px, 5px); 
    box-shadow: 0px 0px 0px transparent; 
}
.menu-button{display:none;border:0;background:transparent}


.hero{
    position:relative;
    /* min-height:100vh; */
    min-height:auto;
    padding: 55px 0 0;
    overflow:hidden;
}
.hero__inner{
    min-height:720px;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:60px;
    position:relative;
    z-index:3;
}
.eyebrow{
    display:inline-block;
    color:var(--ink);
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
}
.eyebrow--dark{color:var(--ink)}
.eyebrow--light{color:var(--white)}
.audience__copy .eyebrow{color: white;}
.audience_bl{color: var(--ink) !important;}
.audience__copy h2 span {
    display: inline-block;
    background-color: #000000;
    color: #ffffff;
    line-height: 1.1;
    border-radius: 4px;
}
.audience__copy_whit h2 span{
    background-color: var(--white);
    color: var(--ink);
}
.audience__copy h2 span .highlight-white {
    display: inline-block;
    background-color: #ffffff;
    color: #000000;
    padding: 2px 12px;
    line-height: 1.1;
    border-radius: 4px;
}
.hero h1{
    margin:24px 0 26px;
    font-family:"Space Grotesk",sans-serif;
    font-size:clamp(4.5rem,8vw,8rem);
    line-height:.86;
    letter-spacing:-.07em;
}
.hero h1 span{display:block;color:var(--red)}
.hero__lead{
    max-width:610px;
    color:var(--muted);
    font-size:1.18rem;
    line-height:1.7;
}
.hero__actions{display:flex;align-items:center;gap:26px;margin-top:34px}
.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-height:62px;
    padding:0 26px;
    border-radius:999px;
    font-weight:700;
}
.button--dark{background:var(--ink);color: var(--white)}
.button--light{background:var(--white);color:var(--ink)}
.hero__link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding-bottom:5px;
    border-bottom:1.5px solid var(--ink);
    font-weight:700;
}
.hero__visual{
    min-height:650px;
    position:relative;
    display:grid;
    place-items:center;
}
.hero__device{
    position:relative;
    z-index:3;
    width:92%;
    padding:40px;
    border-radius:50%;
}
.hero__device_serv{
    padding: 40px 0 0 !important;
}
.hero__device img{
    width:100%;
    filter:drop-shadow(0 34px 26px rgba(0,0,0,.25));
}
.orbit{
    position:absolute;
    width:92%;
    aspect-ratio:1;
    border:1px solid rgba(17,18,15,.3);
    border-radius:50%;
}
.orbit--one{transform:scaleY(.72) rotate(15deg)}
.orbit--two{transform:scaleY(.55) rotate(-12deg)}
.floating-tag{
    position:absolute;
    z-index:5;
    padding:12px 18px;
    border-radius:999px;
    color:#fff;
    background:var(--ink);
    font-weight:700;
        box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.15);

}
.floating-tag--one{top: 17%; left: -1%;}
.floating-tag--two{right:0;top:34%}
.floating-tag--three{left: 1%; bottom: 15%;}
.floating-tag--four{left: 5%; bottom: 48%;}
.floating-tag--five{left: 55%; bottom: 30%;}
.hero__shape{
    position:absolute;
    border-radius:50%;
    filter:blur(.2px);
}
.hero__shape--lime{
    width:350px;height:350px;
    background:var(--lime);
    left: -24%; top: 6%;
}
.hero__shape--violet{
    width:430px;height:430px;
    background:var(--violet);
    right: -30%; top: -28%;
    /* right:-220px;top:20px; */
}
.hero__ticker {
    position: relative;
    z-index: 5;
    overflow: hidden;
    padding: 22px 0;
    color: #fff;
    background: var(--ink);
    width: 100%;
}
.hero__ticker-track {
    display: flex;
    align-items: center;
    gap: 30px;
    width: max-content;
    white-space: nowrap;
    font-size: 1.25rem;
    font-weight: 700;
    will-change: transform;
}
.hero__ticker-track i {
    color: var(--lime);
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-33.3333%); 
    }
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.intro {
    position: relative;
    overflow: hidden;
}
.intro .container{
    position: relative;
    display:grid;
    grid-template-columns:1.3fr .7fr;
    gap:80px;
    align-items:end;
}

.portfolio_subp{
    padding-top: 20px;
}
.intro h2,.portfolio h2,.contact h2{
    margin-top:18px;
    font-family:"Space Grotesk",sans-serif;
    font-size:clamp(3.3rem,6vw,6.4rem);
    line-height:.92;
    letter-spacing:-.065em;
}
.intro__text p{
    color:var(--muted);
    font-size:1.15rem;
    line-height:1.75;
}
.intro-process-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.section_srv{
    padding: 120px 0;
}
.bg-loop-line_sub {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    will-change: transform;
}
.bg-loop-svg {
    position: absolute;
    top: -15%;
    left: 2%;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.bg-loop-svg_sr{
    position: absolute;
    top: -11%;
    left: 2%;
    width: 97%;
    height: 132%;
    overflow: visible;
}
.bg-loop-svg_sb {
    position: absolute;
    top: 19%;
    left: 2%;
    width: 60%;
    height: 100%;
    overflow: visible;
}
.bg-loop-svg_np{
    position: absolute;
    top: -23%;
    left: 2%;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 1;
}
#svg-mono {
    transition: stroke-dashoffset 0.1s linear;
}
.bg-loop-line_sub {
    position: absolute;
    top: 35%;
    left: 45%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 100%;
    height: auto;
    pointer-events: none;
    z-index: 1;
    opacity: 0.8;
}
.intro-process-wrapper .intro,
.intro-process-wrapper .steps {
    position: relative;
    z-index: 2;
}
.circle-img {
    width: 250px;
    opacity: 0.8;
    transform-origin: center center;
    transition: transform 0.1s ease-out;
}
.circle-img {
    transition: transform 0.1s ease-out;
    transform-origin: center center; 
    display: block;
}
.steps{padding-top:20px}
.steps__grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--line);
}
.step{
    min-height:310px;
    padding:34px 30px;
    border-right:1px solid var(--line);
}
.step:last-child{border-right:0}
.step>span{
    display:grid;
    place-items:center;
    width:52px;height:52px;
    border-radius:50%;
    font-weight:800;
}
.step > span {
    background: var(--lime);
    color: var(--ink);
}
.step h3{
    margin:80px 0 16px;
    font-family:"Space Grotesk",sans-serif;
    font-size:2rem;
}
.step p{color:var(--muted);line-height:1.65}

/* ------------------Etatement--------------- */

.statement {
    position: relative;
    width: 100%;
    overflow: hidden; 
}
.statement__bg {
    width: 100%;
    height: auto; 
    aspect-ratio: 12 / 7; 
    background-image: url('img/fondo.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    position: relative;
}

.statement__container {
    display: flex;
    align-items: center;
}
.statement__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    max-width: 950px; 
    color: var(--white);
    gap: 16px;
    z-index: 2;
}
.statement__quote {
    font-size: clamp(1.8rem, 3.8vw, 3.8rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.5px;
    margin: 0;
}
.statement__subtext {
    font-size: 1.05rem;
    font-weight: 500;
    opacity: 0.9;
}
.statement__logo-wrapper {
    position: absolute;
    top: 47%;
    transform: translateY(-50%);
    right: -13%;
    height: 45%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    animation: rotateLogo linear;
    animation-timeline: scroll();
}
.statement__logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@keyframes rotateLogo {
    from {
        transform: translateY(-50%) rotate(0deg);
    }
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* ------------------Service--------------- */
.audiences{padding-top:20px}
.audiences .container{display:flex;flex-direction:column;gap:30px}
.audience{
    min-height:620px;
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    align-items:center;
    gap:60px;
    padding:58px;
    border-radius:var(--radius-xl);
    overflow:hidden;
}
.audience--lime{background:var(--lime)}
.audience--black{background:var(--ink)}
.audience--white{background:var(--white); border: 2px solid #000000;}
.audience__copy{color: #ffffff;}
.audience__copy h2{
    margin:18px 0 22px;
    font-family:"Space Grotesk",sans-serif;
    font-size:clamp(3rem,5vw,5.6rem);
    line-height:.94;
    letter-spacing:-.06em;
}
.audience__copy p{
    max-width:520px;
    font-size:1.08rem;
    line-height:1.7;
}
.audience__copy a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:28px;
    padding-bottom:5px;
    border-bottom:2px solid var(--ink);
    font-weight:700;
}
.audience__copy .txt_bl{
    border-bottom:2px solid var(--ink);
}
.copy_ult{
    color: var(--ink) !important;
}
.audience__image{
    position:relative;
    min-height:500px;
    overflow:hidden;
    border-radius:48px;
    background:#fff;
}
.audience__image img{
    width:100%;
    height:100%;
    min-height:500px;
    object-fit:cover;
    transition:.5s ease;
}
.audience:hover .audience__image img{transform:scale(1.04)}
.typed-cursor {
    display: inline-block;
    font-weight: 300;
    opacity: 1;
    animation: blinkCursor 0.8s infinite;
}

@keyframes blinkCursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ------------- Portfolio 1 ----------------*/

.portfolio__head{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:70px;
    align-items:end;
    margin-bottom:50px;
}
.portfolio__head h2 span{
    color: var(--red);
}
.portfolio__head p{
    max-width:450px;
    color:var(--muted);
    font-size:1.08rem;
    line-height:1.7;
}

.portfolio__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 28px 20px;
}

/* Card individual (3 columnas) */
.project {
    display: flex;
    flex-direction: column;
    flex: 1 1 calc(33.333% - 14px); 
    box-sizing:border-box;
    cursor:pointer;
}

/* Contenedor de la imagen con bordes redondeados */
.project__image {
    width: 100%;
    height: 240px;
    border-radius: 16px;
    overflow: hidden;
    background-color: #e5e5e5;
}

.project__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.project:hover .project__image img {
    transform: scale(1.04);
}

/* Textos debajo de la tarjeta */
.project__content {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.project__content span {
    color: #888888;
    font-size: 0.85rem;
    font-weight: 500;
}

.project__content h3 {
    color: #111111;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

/* -------------- Portafloio 2 --------------- */
/* Cabecera del carrusel */

/* Track y scroll */
.designers-section{
    padding-top: 20px;
}
.carousel-wrapper {
    width: 100%;
}
.carousel-track {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 32px 20px;
}
.designer-card {
    flex: 0 0 calc((100% - 40px) / 3);
    max-width: calc((100% - 40px) / 3);
}
.project__link {
    display: block;
    text-decoration: none;
    color: #fff;
}
.card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 25px;
}
.card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Overlay Rojo/Rosado al hacer Hover */
.portfolio-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 60, 60, 0.88); /* Tono rojo/rosado similar al de Feel */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    padding: 20px;
}

.portfolio-item-info {
    transform: translateY(20px);
    transition: transform 0.4s ease;
}
.portfolio-item-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 1.5px;
    color: #ffffff;
}
.portfolio-item-detail {
    font-family: 'Lato', sans-serif;
    font-size: 0.9rem;
    margin-bottom: 15px;
    color: #f0f0f0;
}
.icon-attachment {
    font-size: 1.2rem;
    color: #ffffff;
}

/* --- EFECTOS EN HOVER --- */

/* 1. Zoom en la imagen */
.designer-card:hover .card-media img {
    transform: scale(1.08);
}

/* 2. Revelar Overlay */
.designer-card:hover .portfolio-overlay {
    opacity: 1;
}

/* 3. Desplazamiento hacia arriba del texto */
.designer-card:hover .portfolio-item-info {
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 992px) {
    .designer-card {
        flex: 0 0 calc((100% - 20px) / 2);
        max-width: calc((100% - 20px) / 2);
    }
}

@media (max-width: 600px) {
    .designer-card {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* -------------- CONTACTO --------------- */

.footer{
    position:relative;
    overflow:hidden;
    color:#fff;
    background-image:
    linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.7) 50%,
        rgba(0, 0, 0, 1) 100%
    ),
    url(img/fondo_ng.png);
    background-size: cover;
    background-position: center;
    border-radius: 120px 120px 0 0;
}
.contact{
    padding: 180px 0 50px;
}
.contact__inner{position:relative;z-index:2}
.contact h2 span{display:block;color:var(--lime)}
.contact__inner>p{
    max-width:620px;
    margin-top:28px;
    color:white;
    font-size:1.15rem;
    line-height:1.2;
    font-weight: 600;
}
.contact__actions{
    display:flex;
    align-items:center;
    gap:24px;
    margin-top:34px;
}
.contact__email{
    padding-bottom:5px;
    font-weight:700;
}
.footer__top{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:60px;
    border-top: 1px solid rgba(255, 255, 255, 0.362);
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.362); */
    padding: 40px 0 20px;
}
.footer__top img{
    width:180px;
    height:auto;
}
.footer__rg{
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width:320px;
}
.footer__socials {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 0 20px;
    font-family: sans-serif;
}
.footer__socials-title {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
}
.footer__socials-icons {
    display: flex;
    gap: 20px; /* Espacio entre los círculos */
}
.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    color: #ffffff;
    text-decoration: none;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}
.social-icon:hover {
    color: var(--lime);
    transform: translateY(-3px);
}

.footer__logo img{height:60px;filter:brightness(0) invert(1)}
.footer nav{display:flex;gap:28px }

.footer nav a{
    display: inline-block;
    color: #fff;
    text-decoration: none;
    transition: transform .4s ease, text-shadow .4s ease;
}

.footer nav a:hover{
    transform: rotateY(30deg);
    text-shadow: 5px 2px 10px rgb(238 238 238);
}
.footer__bottom{
    display:flex;
    justify-content:space-between;
    padding:15px 0;
    color:rgba(255,255,255,.55);
    font-size:12px;
}
.footer__bottom span:nth-child(2){
    color: white;
}
.reveal{
    opacity:0;
    transform:translateY(28px);
    transition:.75s ease;
}
.reveal.visible{position:relative;opacity:1;transform:none; z-index: 10;}

.whatsapp-container{
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 999;
}

.whatsapp{
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 1.9rem;
    text-decoration: none;
    box-shadow: 0 14px 30px rgba(0,0,0,.18);
}
.whatsapp-message{
    position: absolute;
    right: 75px;
    bottom: 10px;
    width: 150px;
    background: #fff;
    color: #1cb529;
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);

    transition: .3s;
}
/* Mostrar al pasar el mouse */
.whatsapp-container:hover .whatsapp-message{
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* -------------- SUB-PÁGINAS --------------- */
/* -------------- BANNER --------------- */

.banner-project{
    margin-top:95px;
}
.position_bnr_zs img{
    width:100%;
    height:330px;
    object-fit:cover;
    display:block;
    object-position: center 76%;
}
.position_bnr_np img{
    width:100%;
    height:330px;
    object-fit:cover;
    display:block;
    object-position: center 28%;
}
.position_bnr_zvr img{
    width:100%;
    height:330px;
    object-fit:cover;
    display:block;
    object-position: center 22%;
}
.position_npb img{
    width:100%;
    height:330px;
    object-fit:cover;
    display:block;
    object-position: center 50%;
}

/* -------------- BRANDING --------------- */

.branding-gallery-container{
    position: relative;
    z-index: 100;
}
.flex-mosaic {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.flex-item {
    flex: 1 1 50%;
    max-width: 50%;
    overflow: hidden;
}
.flex-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.flex-item:hover img {
    transform: scale(1.02);
}
.bottom-branding-section{
    position: relative;
}
.floating-cards-wrapper {
    width: 100%;
}
.floating-cards-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}
.branding-title {
    position: absolute;
    top: 90%;
    right: 8%;
}
.bottom-branding-section h3{
    font-size: 3rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 20px;
}

/* -------------- PROYECTO --------------- */

/* -------------- SHOWCASE SECCIÓN (LAPTOP Y CAPTURAS) --------------- */



/* 1. Imagen Superior (Facebook) */
.img-top {
    width: 85%;
    margin: auto;
    position: relative;
    z-index: 2;
    margin-bottom: -50px; /* Hace que se monte sobre la sección morada */
}
.img-top img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.purple-section {
    width: 100%;
    height: 90vh;
    padding-top: 110px;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-image: url(img/banner_zago.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.purple-section h2 {
    color: #ffffff;
    font-family: monospace, 'Courier New', Courier, sans-serif;
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 25px;
    padding: 0 15px;
}


/* -------------- PORTAFOLIO - SUBPAGINA --------------- */

.portfolio_sub{
    background-color: var(--white);
}
.portfolio__head_sub{
    margin-bottom: 1.5rem;
}
.portfolio__head_sub h3{
    font-size: 2rem;
    font-weight: 800;
}


/*  */
/* -------------- NUEVA ACTUALIZACIÓN --------------- */
/* -------------- PORTAFOLIO - SUBPAGINA - ZANEI STUDIO --------------- */

.project-hero-container {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.project-title {
    font-size: 72px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -1.5px;
    line-height: 1;
}
.project-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
}
.project-meta {
    flex: 1 1 290px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
}
.meta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 40px;
}
.meta-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 130px;
}
.meta-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.meta-value {
    font-size: 15px;
    color: var(--grey);
    font-weight: 400;
}
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 12px 24px;
    background-color: var(--ink);
    color: var(--white);
    border-radius: 50px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.15);
    transition: transform 0.7s ease, box-shadow 0.7s ease;
}
.btn-primary:hover {
    transform: translate(5px, 5px);
    box-shadow: 0px 0px 0px transparent;
}
.btn-arrow {
    font-size: 14px;
}
.project-description {
    flex: 1 1 500px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.project-description p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    font-weight: 400;
}

/* -------------- PALETA DE COLORES--------------- */

.project-showcase {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.showcase-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.showcase_pb{
    margin-bottom: 8rem;
}
.showcase-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* -------------- SUB-BANNER --------------- */

/* Section Container */
.colors-section {
    background-color: var(--ink);
    color: var(--white);
    width: 100%;
    padding: 0 0 100px;
}
.colors-section .container {
    display: flex;
    flex-direction: column;
    gap: 60px;
}
.title-wrapper {
    width: 100%;
    overflow: hidden;
}
.display-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(100px, 18vw, 300px);
    font-weight: 300;
    line-height: 0.75;
    display: flex;
    align-items: center;
    letter-spacing: -10px;
}
.letter-c { color: #0066cc; }
.letter-o { 
    color: #c2c2c2; 
    position: relative; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
}
.letter-l { color: #94cdbe; }
.letter-o2 { color: #f2f5a3; }
.letter-r { color: #ff5353; }
.letter-s { color: var(--white);}
.pill-badge {
    position: absolute;
    font-family: 'Inter', sans-serif;
    font-size: clamp(10px, 1vw, 14px);
    font-weight: 500;
    color: var(--white);
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 4px 9px;
    border-radius: 50px;
    backdrop-filter: blur(4px);
    top: 58%;
    right: 26.5%;
    letter-spacing: 0.5px;
}
.palette-group {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.group-label {
    font-size: 18px;
    font-weight: 500;
    color: #e0e0e0;
}
.cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.color-card {
    flex: 0 1 calc(32% - 10px);
    min-height: 220px;
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #111111;
}
.card-red { background-color: #ff5555; }
.card-green { background-color: #94cdbe; }
.card-gray { background-color: #d0d0d0; }

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.color-name {
    font-size: 18px;
    font-weight: 600;
}
.color-hex {
    font-size: 16px;
    font-weight: 700;
}
.card-description {
    font-size: 13px;
    line-height: 1.35;
    font-weight: 500;
    max-width: 90%;
    color: #1a1a1a;
}
.typography-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    padding-top: 40px;
}
.type-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.type-family {
    font-size: 48px;
    font-weight: 500;
    color: var(--white);
    line-height: 1;
}
.type-label {
    font-size: 12px;
    font-weight: 600;
    color: #888888;
}
.type-specimen {
    font-size: 18px;
    line-height: 1.4;
    color: #dddddd;
    font-weight: 400;
    letter-spacing: 0.5px;
}

/* -------------- APARATOS --------------- */

.responsive-section {
    width: 100%;
    overflow: hidden;
    padding-top: 120px;
}
.responsive-stage {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.wancho2 {
    width: 92%;
    max-width: calc(100% - 224px);
    margin: auto;
}
.wancho {
    width: 100%;
    margin: auto;
    margin-top: -160px;
}
.mockup-tablet {
    width: 100%;
    padding-top: 59.35%;
    margin-left: -50%;
    margin-top: 20%;
    z-index: -1; 
}
.mockup-tablet img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0px 15px 25px rgba(0, 0, 0, 0.12));
}
.mockup-laptop {
    width: 100%;
    padding-top: 59.35%;
    margin-right: -50%;
    z-index: 2;
}
.mockup-laptop img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 80%;
    filter: drop-shadow(0px 15px 25px rgba(0, 0, 0, 0.12));
}
.mockup-tablet, .mockup-laptop{
    position: relative;
    display: block;
}
.responsive-stage-down{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: end;
    position: relative;
    z-index: 2;
}
.mockup-phone {
    width: 30%;
    z-index: 3;
    z-index: 2;
}
.responsive-text, .responsive-text-left{
    width: max-content;
    margin-bottom: 80px;
}
.responsive-text span, .responsive-text-left span{
    pointer-events: none;
    user-select: none;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(90px, 13vw, 450px);
    font-weight: 800;
    line-height: 0.75;
    letter-spacing: -0.05em;
    white-space: nowrap;
}
.txt-black {
    color: var(--ink);
    filter: drop-shadow(0px 8px 12px rgba(0, 0, 0, 0.15));
}
.txt-red {
    color: var(--red);
    filter: drop-shadow(0px 8px 12px rgba(255, 83, 83, 0.25));
}
.responsive-text-left .txt-black{
    color: var(--red);
    margin-left: -5px;
    margin-right: 5px;
}


/* -------------- BRANDING --------------- */
/* -------------- NEIZA PROYECTOS --------------- */

.branding-gallery-container{
    position: relative;
    z-index: 100;
}
.flex-mosaic {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.flex-item {
    flex: 1 1 50%;
    max-width: 50%;
    overflow: hidden;
}
.flex-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.flex-item:hover img {
    transform: scale(1.02);
}
.bottom-branding-section{
    position: relative;
}
.floating-cards-wrapper {
    width: 100%;
}
.floating-cards-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}
.branding-title {
    position: absolute;
    top: 90%;
    right: 8%;
}



/* -------------- FRASE --------------- */

.statement-section {
    background-color: var(--paper);
    padding: 100px 0;
    width: 100%;
}
.statement-text {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(20px, 3.2vw, 38px);
    font-weight: 800;
    color: var(--ink);
    text-align: center;
    text-transform: uppercase;
    line-height: 1.20;
    max-width: 980px;
    margin: 0 auto;
    letter-spacing: -0.02em;
}
.sparkle {
    color: var(--lime);
    display: inline-block;
    margin: 0 8px;
    font-size: 0.9em;
    vertical-align: 2px;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
}

/* -------------- FONT --------------- */

.font-specimen-card {
    display: flex;
    width: 100%;
    min-height: 460px;
    border-radius: 20px;
    overflow: hidden;
    font-family: 'Bai Jamjuree', sans-serif;
    color: var(--white);
}
.font-specimen-hero {
    flex: 1 1 40%;
    background-color: #313131;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.font-specimen-glyph {
    font-size: clamp(120px, 16vw, 220px);
    font-weight: 700;
    line-height: 1;
    color: var(--white);
    user-select: none;
}
.font-specimen-content {
    flex: 1 1 60%;
    display: flex;
    flex-direction: column;
}
.font-specimen-brand {
    flex: 1;
    background-color: #BCBCBC;
    padding: 35px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}
.font-specimen-title {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    color: var(--white);
    line-height: 1;
    margin: 0;
}
.font-specimen-tag {
    font-size: 13px;
    font-weight: 600;
    color: var(--grey);
    opacity: 0.9;
}
.font-specimen-sample {
    flex: 1;
    background-color: var(--grey);
    padding: 35px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}
.font-specimen-text {
    font-size: clamp(13px, 1.6vw, 17px);
    font-weight: 700;
    line-height: 1.35;
    color: var(--white);
    margin: 0;
    letter-spacing: 0.3px;
}

/* -------------- PáginaWeb --------------- */
/* -------------- NEIZA PROYECTOS --------------- */

.letter-c_m{ color: #C3A998; }
.letter-o_wh { 
    color: #FFFFFF; 
    position: relative; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
}
.letter-l_pl { color: #6E6E6E; }
.letter-o2_bg { color: #D0CBC7; }
.letter-r_pl { color: #6E6E6E; }
.letter-s_wh { color: #F3F2F0;}

.card-white { background-color: #ffffff; }
.card-beige { background-color: #E9E4DE; }
.card-black { background-color: #000000; border: 2px solid white; }
.card-grey_medium { background-color: #BCBCBC; }
.card-dark_grey { background-color: #6E6E6E; }
.card-grey_tw { background-color: #F5F5F5; }

.card-black span, .card-black p{color: white; }
.card-black p{font-size: 11px;}

/* -------------- DIGITAL EXPERIENCE BANNER --------------- */

.digital-experience-section {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
}
.digital-experience-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.digital-experience-header {
    position: relative;
    width: 100%;
    text-align: left;
    z-index: 1;
}
.digital-experience-title {
    padding: 4rem 0;
    font-size: clamp(38px, 10vw, 130px);
    font-weight: 600;
    color: #0f0f0f;
    line-height: 0.9;
    letter-spacing: -0.03em;
    margin-bottom: -3rem;
}
.digital-experience-title span {
    display: block;
}
.digital-experience-lamp {
    position: absolute;
    top: -10px;
    right: 20%;
    width: clamp(24px, 15vw, 200px);
    height: auto;
    pointer-events: none;
    z-index: 3;
}
.digital-experience-mockup {
    width: 100%;
    margin-top: -60px;
    z-index: 2;
    position: relative;
}
.digital-experience-img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}


/* -------------- SUB PÁGINA ZAGO VR - EXPERIENCE --------------- */

.social-showcase-section {
    background-color: #dcdcdc;
    margin-top: 65px;
}
.social-showcase-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
}
.social-banner-card {
    width: 85%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    background-color: #ffffff;
    margin-top: -65px;
}
.social-banner-img {
    width: 100%;
    height: auto;
    display: block;
}
.social-statement-block {
    max-width: 1200px;
    text-align: center;
}
.social-statement-text {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: clamp(20px, 3.2vw, 36px);
    font-weight: 800;
    color: #111111;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    padding: 3rem 0 0;
    margin: 0;
}
.sparkle-icon {
    color: #eaff42;
    display: inline-block;
    margin: 0 6px;
    font-size: 0.9em;
    vertical-align: middle;
}
.social-mobile-card {
    width: 100%;
    /* max-width: 750px; */
    display: flex;
    justify-content: center;
}
.social-mobile-img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.12));
}

/* -------------- COLORS --------------- */

.letter-c_cyan{ color: #3DB6E0; }
.letter-o_purple { 
    color: #5A5CE5; 
    position: relative; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
}
.letter-l_fuchsia { color: #DD33EA; }
.letter-o2_darkblue { color: #222A4E; }
.letter-r_darkpurple { color: #7434B2; }
.letter-s_line{ color: #F0F1A5;}

.card-cyan { background-color: #3DB6E0; }
.card-purple { background-color: #5A5CE5; }
.card-darkblue { background-color: #222A4E; border: 1px solid white; }
.card-fuchsia { background-color: #DD33EA; }
.card-darkpurple { background-color: #7434B2; border: 1px solid white;}

.card-darkblue span, .card-darkblue p,
.card-darkpurple span, .card-darkpurple p{color: white; }


/* -------------- SERVICIOS --------------- */

/* Contenedor principal de la fila */
.service-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 40px 120px;
    gap: 40px;
}
.bg-lime { background-color: #c4b6ff; color: #000; }
.bg-dark { background-color: #eaff42; color: #000; }
.bg-white { background-color: #ffffff; color: #000; border-top: 1px solid #eee; }
.service-info {
    display: flex;
    flex-direction: column;
    flex: 1.2;
}
.tag {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.service-info h2 {
    font-size: 3rem;
    line-height: 1.1;
    margin: 15px 0 25px 0;
}
.service-body {
    display: flex;
    flex-direction: row;
    gap: 30px;
    align-items: flex-start;
}
.service-desc {
    flex: 1;
    margin: 0;
    line-height: 1.5;
}
.service-list {
    flex: 1;
    list-style: none;
    padding: 0;
    margin: 0;
}
.service-list li {
    font-size: 0.95rem;
    margin-bottom: 8px;
    opacity: 0.85;
}
.service-media {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.service-media img {
    width: 500px;
    height: 300px;
    object-fit: cover;
}

/* -------------- PROYECTOS --------------- */

.filter-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 40px;
}
.filter-btn {
    padding: 8px 20px;
    border: 1px solid #ddd;
    background-color: transparent;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}
.filter-btn.active,
.filter-btn:hover {
    background-color: #000;
    color: #fff;
    border-color: #000;
}
.portfolio-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
}
.project-card {
    display: flex;
    flex-direction: column;
    width: 32%;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.project-card img {
    width: 100%;
    margin: auto;
    height: 450px;
    border-radius: 12px;
    object-fit: cover;
}
.project-card h3 {
    margin: 15px 0 5px 0;
    font-size: 1.2rem;
}
.project-card p {
    margin: 0;
    color: #777;
    font-size: 0.9rem;
}

/* Ocultar elementos */
.project-card.hide {
    display: none;
}
@media (max-width: 768px) {
    .project-card {
        width: 100%; /* 1 columna en móvil */
    }
}

/* -------------- CONTACTO --------------- */

.contact-section {
    background-color: #f3f2ee;
    color: #1a1a1a;
    padding: 80px 0;
    font-family: system-ui, -apple-system, sans-serif;
}
.contact-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 60px;
    gap: 40px;
}
.header-left {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.tag {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    color: #666;
}
.header-left h1 {
    font-size: 4.5rem;
    font-weight: 800;
    margin: 0;
    line-height: 1;
    letter-spacing: -1.5px;
}
.header-right {
    flex: 0.8;
    display: flex;
    justify-content: flex-end;
}
.header-right p {
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
    margin: 0;
    max-width: 400px;
}
.contact-container {
    display: flex;
    flex-direction: row;
    gap: 80px;
}
.contact-info {
    display: flex;
    flex-direction: column;
    flex: 0.8;
    gap: 35px;
}
.info-block h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 8px 0;
}
.info-block p {
    font-size: 0.95rem;
    color: #666;
    margin: 0;
    line-height: 1.5;
}
.contact-form {
    display: flex;
    flex-direction: column;
    flex: 2;
    gap: 35px;
}
.form-row {
    display: flex;
    flex-direction: row;
    gap: 30px;
}
.form-group {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.form-group.full-width {
    flex: none;
    width: 100%;
}
.form-group textarea{
    font-family:"Inter",sans-serif;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #c28888;
    padding: 12px 0;
    font-size: 1rem;
    color: #1a1a1a;
    outline: none;
    transition: border-color 0.3s ease;
}
.contact-form input::placeholder,
.contact-form textarea {
    color: #555;
}
.contact-form select {
    cursor: pointer;
    appearance: none;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-bottom-color: #1a1a1a;
}
.submit-btn {
    align-self: flex-start;
    padding: 14px 32px;
    background-color: #1a1a1a;
    color: #fff;
    border: none;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.3s ease;
}
.submit-btn:hover {
    background-color: #333;
    transform: translateY(-2px);
}




/* -------------- RESPONSIVE --------------- */

@media(max-width:980px){
    .nav{
        display:none;
        position:absolute;
        top:74px;
        left:22px;
        right:22px;
        flex-direction:column;
        padding:24px;
        border-radius:24px;
        background:var(--white);
        box-shadow:0 20px 50px rgba(0,0,0,.12);
    }
    .nav.open{display:flex}
    .menu-button{
        display:flex;
        flex-direction:column;
        gap:6px;
    }
    .menu-button span{width:26px;height:2px;background:var(--ink)}
    .header__cta{display:none}
    .hero__inner,.intro .container,.audience,.portfolio__head{grid-template-columns:1fr; gap: 15px;}
    .hero__visual{min-height:560px}
    .steps__grid{grid-template-columns:1fr 1fr}
    .step:nth-child(2){border-right:0}
    .audience__image{order:-1}
    .project--large{grid-column:1/3;grid-row:auto}
    .hero{ padding: 110px 0 0;}
    .section{ padding: 90px 0 10px;}
    .hero__shape--violet{ top: 13%;}
    .hero__shape--orange{left: 74%; bottom: 25px;}
    .footer__top{ flex-wrap: wrap;}
    .contact{ padding: 40px 0 90px; margin-top: 90px;}
    .intro__img-wrapper{right: -4%; top: -11%;}
    .circle-img { width: 180px; }
    .statement__bg{ margin-top: 90px;}
    .statement{display:none}
    .footer__top{justify-content: center;}
    .designer-card {flex: 0 0 calc((100% - 30px) / 2);max-width: calc((100% - 30px) / 2);}
    .designers-section{padding-bottom: 80px;}
}
@media(max-width:640px){
    .container{width:min(100% - 24px,1240px)}
    .section{padding: 80px 0 10px}
    .header{padding:12px 0}
    .logo img{height:42px}
    .hero{padding-top:90px}
    .hero h1{font-size:4rem}
    .contact__actions{align-items:flex-start;}
    .hero__visual{min-height:440px}
    .hero__shape--violet{right: -21%;top: 30%;width:200px;height: 200px;}
    .hero__shape--lime{left: -46%; top: -3%;}
    .hero__shape--orange{left: 62%; bottom: -39px;}
    .contact__shape{width: 500px; height: 500px;}
    .hero__device{width:96%;padding:18px}
    .floating-tag{font-size:.75rem}
    .steps__grid{grid-template-columns:1fr}
    .step{border-right:0;border-bottom:1px solid var(--line)}
    .step h3{margin-top:50px}
    .audience{padding:30px 20px 60px;min-height:auto}
    .audience__image,.audience__image img{min-height:320px}
    .project--large{grid-column:auto}
    .footer__top,.footer__bottom{flex-direction:column; align-items: center; gap: 10px;}
    .footer__top, .footer__rg{ align-items: center;}
    .footer__rg p{text-align: center;}
    .contact{ padding: 90px 0; margin-top: 0;}
    .footer__bottom span:nth-child(1){text-align: center;}
    .circle-img { width: 120px;}
    .intro__img-wrapper{ top: -3%;}
    .statement__quote{ font-size: clamp(1rem, 3.8vw, 3.8rem);}
    .statement__bg { margin-top: 60px;}
    .statement{display:none}
    .project{flex: 1 1 calc(80% - 14px);}
    .footer__top{gap: 30px;}
    .footer__top{padding: 30px 0;}
    .footer{border-radius: 60px 60px 0 0;}
    .portfolio_sub{padding-bottom: 80px;}
    .footer__bottom{padding: 20px 0 30px;}
    .button{padding: 18px 15px;font-size: 12px;}
    .bg-loop-line_sub{display: none;}
    .hero__actions{flex-wrap: wrap; justify-content: space-around;}
    .button{min-height: 0;}
    .bg-loop-svg{display: none;}
    .designer-card {flex: 0 0 calc((100% - 20px) / 1);max-width: calc((100% - 20px) / 1);
    margin: auto;}
    .bottom-branding-section h3{font-size: 1rem;}
    .branding-title{top: 88%; right: 6%;}
    .project-showcase__grid{gap: 6px;}
    .purple-section{background-size: cover; background-position: center;}
    .purple-section h2{font-size: 2rem;}
    .position_bnr_zvr img, .position_npb img, .position_bnr_np img{height: 150px;}
    .designers-section{margin-bottom: 80px;}
    .project-description{margin-bottom: 30px;}
    .font-specimen-card{flex-direction: column;}
    .banner-project {margin-top: 66px;}
    .steps {padding-top: 20px !important;}

    /* SUB-PAGINAS - ZANEI STUDIO */
    .bg-loop-svg_sb{ display: none;}
    .meta-grid{gap: 30px 0;}
    .display-title{font-size: clamp(130px, 18vw, 300px);}
    .pill-badge{font-size: clamp(6px, 1vw, 14px);top: 56%;right: 12.5%;}
    .card-header{flex-direction: column; align-items: flex-start;}
    .cards-grid{ gap: 10px;}
    .color-card{flex: 0 1 calc(51% - 10px);}
    .responsive-text span, .responsive-text-left span{font-size: clamp(55px, 13vw, 450px);}
    .wancho{margin-top:20px;}
    .mockup-phone{width: 25%;}
    .wancho2 {max-width: 100%;}
    .mockup-laptop{margin-right: 0;right: -20%;}
    .mockup-tablet{margin-left: 0; margin-top: 0; right: 29%;}
    .color-card{min-height: 190px;}
    .mockup-laptop img{height: 100%;}
    .responsive-section{padding: 50px 0;}
    .responsive-text-left .txt-black{ margin-left: 0;}
    .responsive-text, .responsive-text-left{margin-bottom: 20px;}
    .responsive-stage{flex-direction: column-reverse;}

    /* SUB-PAGINAS - NEIZA PROYECTOS BRANDING */

    .typography-card{flex-direction: column;min-height: 560px;}

    /* SUB-PAGINAS - NEIZA PROYECTOS PÁGINA WEB */

    .digital-experience-mockup {margin-top: -16px;}
    .digital-experience-lamp {right: 4%;}
    .digital-experience-title {padding: 3rem 0;}
    .showcase_pb{margin: 4rem 0;}


    /* SUB-PAGINAS - ZAGO VR - SOCIAL MEDIA */

    .social-showcase-container{padding-top: 65px;}
    .social-banner-card{ margin-top: 0;}
    .social-statement-text{padding: 0;}

    /* SERVICIO */

    .intro__text p{margin-bottom: 30px;}
    .service-row{padding: 40px 20px;}
    .service-row{flex-direction: column;}


    /* PORTAFOLIO */

    .portfolio-grid{margin-bottom: 80px;}

    .contact-header,.contact-container {flex-direction: column;align-items: normal;gap: 40px;}
    .header-left h1 {  font-size: 3.2rem;}
    .form-row {flex-direction: column; gap: 35px;}
}

@media screen and (min-width: 768px) and (max-width: 1024px){
    .hero__shape--violet{ right: -260px;}
    .hero__shape--orange{ bottom: 25px;}
    .project-detail__top{gap: 30px;}
    .bg-loop-line_sub{display: none;}
    .footer__top{justify-content: space-between;}
    .audience{padding: 30px 25px 58px;}
    .bg-loop-svg{display: none;}
    .br-tw-cr{display:none;}
    .intro h2, .portfolio h2, .contact h2{max-width: 620px;}
    .purple-section{background-size: cover; background-position: center;}
    .branding-title{top: 78%;right: 6%;}
    .project-detail__top{flex-direction: column; gap: 40px;}
    .project-detail__image{width: 100%; max-width: 100% ;}
    .designers-section{padding-bottom: 120px;}
    .steps {padding-top: 20px !important;}

    /* SUB-PAGINAS - ZANEI STUDIO */
    .bg-loop-svg_sb{display: none;}
    .mockup-phone{width: 25%;}
    .wancho{margin-top: -51px;}
    .responsive-text span, .responsive-text-left span{font-size: clamp(90px, 16vw, 450px);}
    .responsive-stage-down{justify-content: center;}
    .responsive-text, .responsive-text-left{margin-bottom: 21px;}
    .project{flex: 0 1 calc(50% - 10px);}
    .portfolio_sub{ padding-bottom: 90px}
    .project-description{margin-bottom: 30px;}
    .color-card{flex: 0 1 calc(50% - 10px);}

    /* SUB-PAGINAS - NEIZA PROYECTOS BRANDING */
    .branding-title {top: 86%;}
    .display-title{font-size: clamp(100px, 24vw, 300px);}

    /* SUB-PAGINAS - NEIZA PROYECTOS PÁGINA WEB */
    .digital-experience-mockup{margin-top: -54px;}
    .bottom-branding-section .branding-title_sm{
    font-size: 2rem;}

    /* SERVICIO */

    .service-row{padding: 40px 20px;}
    .intro__text p{margin-bottom: 30px;}
    .hero__lead{margin: auto;}
    .hero__copy{text-align: center;}

    /* PORTAFOLIO */

    .portfolio-grid{margin-bottom: 80px;}
    .project-card img{height: 350px;}

}
@media(max-width:640px){
    .project-detail__top{flex-direction: column;}
    .project-detail__image{max-width: 100%;}
    .project-detail__top{gap: 50px;}
    .project_subpag{flex: 1 1 calc(100% - 14px);}
    
    }

@media screen and (min-width: 641px) and (max-width: 768px){
    .wancho { margin-top: -51px;}
    .bg-loop-svg_sb{display: none;}
    .project-description{margin-bottom: 30px;}
    .portfolio_sub{ padding-bottom: 90px}
    .service-row {padding: 40px 20px;}
    .intro__text p {margin-bottom: 30px;}
    .bg-loop-svg_sr{display: none;}
}