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

:root {
    --black:#0a0a0a;
    --white:#f5f5f2;
    --gray:#777;
    --line:#252525;
    --accent:#d8ff00;
    --container:1240px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--white);font-family:'Manrope',sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

.header{
    height:86px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,.08);position:fixed;inset:0 0 auto;z-index:1000;
    background:rgba(10,10,10,.88);backdrop-filter:blur(15px)
}
.logo{font-size:20px;font-weight:800;letter-spacing:-.8px}
.logo span,.footer-logo span{color:var(--accent)}
.nav{display:flex;gap:38px}
.nav a{font-family:'DM Mono',monospace;font-size:11px;text-transform:uppercase;color:#aaa;transition:.3s}
.nav a:hover{color:var(--accent)}
.header-whatsapp{padding:12px 20px;border:1px solid rgba(255,255,255,.2);font-size:11px;text-transform:uppercase;letter-spacing:1px;transition:.3s}
.header-whatsapp:hover{background:var(--accent);color:var(--black);border-color:var(--accent)}
.menu-button{display:none}

.hero{
    min-height:100vh;max-width:var(--container);margin:auto;padding:150px 5vw 80px;
    display:grid;grid-template-columns:1.15fr .85fr;align-items:center;position:relative
}
.hero-content{position:relative;z-index:2}
.eyebrow{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:3px;color:var(--accent);margin-bottom:30px}

.hero-title{
    display:block;
    max-width:850px;
    font-size:clamp(58px,7vw,105px);
    font-weight:700;
    letter-spacing:-5px;
    line-height:1.12;
}

.hero-title span{
    display:block;
    position:relative;
    line-height:1.12;
    min-height:1.12em;
}

.hero-title .outline{
    color:transparent;
    -webkit-text-stroke:1px rgba(245,245,242,.9);
    text-stroke:1px rgba(245,245,242,.9);
    margin-top:8px;
    padding-bottom:8px;
}

.hero-description{margin-top:34px;max-width:510px;color:#999;font-size:16px;line-height:1.7}
.hero-buttons{display:flex;gap:14px;margin-top:40px}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;padding:16px 22px;font-family:'DM Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:1px;transition:.3s}
.button-primary{background:var(--accent);color:var(--black)}
.button-primary:hover{transform:translateY(-4px)}
.button-outline{border:1px solid #444}
.button-outline:hover{border-color:var(--white)}

.hero-visual{height:570px;position:relative;display:flex;align-items:center;justify-content:center}
.hero-circle{width:410px;height:410px;border:1px solid rgba(216,255,0,.25);border-radius:50%;position:absolute;animation:rotate 18s linear infinite}
.hero-circle:after{content:"";width:8px;height:8px;background:var(--accent);border-radius:50%;position:absolute;top:20px;left:50%}
.hero-card-main{width:290px;height:380px;background:#171717;border:1px solid #333;padding:25px;position:relative;transform:rotate(7deg);box-shadow:25px 25px 60px rgba(0,0,0,.5)}
.card-number{font-family:'DM Mono',monospace;font-size:11px;color:var(--accent)}
.card-symbol{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);font-size:170px;font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.65)}
.hero-card-main p{position:absolute;bottom:25px;left:25px;font-family:'DM Mono',monospace;font-size:11px;line-height:1.7;text-transform:uppercase}
.floating-text{position:absolute;right:-15px;bottom:60px;font-family:'DM Mono',monospace;font-size:9px;line-height:1.8;letter-spacing:3px;color:#666}
.scroll-indicator{position:absolute;bottom:35px;left:5vw;display:flex;align-items:center;gap:12px;font-family:'DM Mono',monospace;font-size:9px;color:#555}
.scroll-indicator span{width:35px;height:1px;background:#555}
@keyframes rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.marquee{
    width:100%;
    max-width:100vw;
    overflow:hidden;
    border-top:1px solid #222;
    border-bottom:1px solid #222;
    padding:24px 0;
    white-space:nowrap;
}
.marquee-track{
    display:flex;
    width:max-content;
    will-change:transform;
    animation:marquee 24s linear infinite;
}
.marquee-content{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:30px;
    padding-right:30px;
}
.marquee span{
    font-size:12px;
    font-family:'DM Mono',monospace;
    letter-spacing:2px;
}
.marquee b{color:var(--accent)}
@keyframes marquee{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}

.section{max-width:var(--container);margin:auto;padding:140px 5vw}
.section-label{display:flex;align-items:center;gap:18px;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:2px;color:#777;margin-bottom:70px}
.section-label span{color:var(--accent)}

.about-content{display:grid;grid-template-columns:1fr 1fr;gap:10vw}
.about-title h2,.services-heading h2,.portfolio-heading h2{font-size:clamp(50px,6vw,82px);line-height:.95;letter-spacing:-4px}
.about-title em,.services-heading em,.portfolio-heading em,.cta h2 em,.contact h2 em{color:var(--accent);font-style:normal}
.about-text{max-width:520px}
.about-text .large-text{font-size:25px;line-height:1.4;color:var(--white);margin-bottom:25px}
.about-text p{color:#888;font-size:15px;line-height:1.8;margin-bottom:20px}
.text-link{display:inline-block;margin-top:20px;padding-bottom:8px;border-bottom:1px solid var(--accent);font-family:'DM Mono',monospace;font-size:11px;text-transform:uppercase}

.services{background:#0d0d0d;max-width:none;padding-left:max(5vw,calc((100vw - var(--container))/2 + 5vw));padding-right:max(5vw,calc((100vw - var(--container))/2 + 5vw))}
.services-heading{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:70px}
.services-heading p,.portfolio-heading p{max-width:350px;color:#777;font-size:14px;line-height:1.7}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #2a2a2a;border-left:1px solid #2a2a2a}
.service-card{min-height:430px;padding:30px;border-right:1px solid #2a2a2a;border-bottom:1px solid #2a2a2a;position:relative;transition:.4s}
.service-card:hover{background:var(--accent);color:var(--black)}
.service-number{font-family:'DM Mono',monospace;font-size:10px}
.service-icon{margin-top:80px;font-size:35px}
.service-card h3{margin-top:30px;font-size:27px;line-height:1;letter-spacing:-1px}
.service-card p{margin-top:20px;color:#777;font-size:12px;line-height:1.7}
.service-card:hover p{color:#333}
.service-arrow{position:absolute;right:30px;bottom:30px;font-size:25px}

.portfolio-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:70px}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:70px 25px}
.project-image{height:480px;overflow:hidden;position:relative}
.project-large .project-image{height:620px}
.project-one{background:radial-gradient(circle at 70% 30%,#d8ff00 0,transparent 35%),#191919}
.project-two{background:linear-gradient(135deg,#272727,#111)}
.project-three{background:radial-gradient(circle at 30% 70%,#777,transparent 35%),#151515}
.project-four{background:linear-gradient(135deg,#222,#080808)}
.project-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}
.project-placeholder span{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:4px;color:#777}
.project-placeholder strong{font-size:150px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.4)}
.project-info{display:flex;justify-content:space-between;padding-top:20px}
.project-info span:first-child{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:2px;color:var(--accent)}
.project-info h3{margin-top:8px;font-size:21px}
.project-link{font-size:24px}

.cta{background:var(--accent);color:var(--black);padding:130px 10vw;display:grid;grid-template-columns:100px 1fr}
.cta-number{font-family:'DM Mono',monospace;font-size:11px}
.cta-content p{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:2px;margin-bottom:20px}
.cta h2{font-size:clamp(60px,8vw,120px);line-height:.85;letter-spacing:-6px;max-width:900px}
.button-light{margin-top:50px;background:var(--black);color:var(--white)}
.button-light:hover{transform:translateY(-4px)}

.contact{min-height:80vh}
.contact-content{max-width:900px}
.contact h2{font-size:clamp(55px,7vw,95px);line-height:.9;letter-spacing:-5px}
.contact-content>p{margin-top:35px;color:#777;max-width:500px;line-height:1.7}
.contact-links{margin-top:70px;border-top:1px solid #292929}
.contact-links a{display:grid;grid-template-columns:150px 1fr 30px;padding:25px 0;border-bottom:1px solid #292929;align-items:center;transition:.3s}
.contact-links a:hover{padding-left:15px}
.contact-links span{font-family:'DM Mono',monospace;font-size:10px;color:#666}
.contact-links strong{font-size:18px;font-weight:500}
.contact-links b{color:var(--accent)}

.footer{border-top:1px solid #222;padding:45px 5vw}
.footer-top{display:flex;align-items:center;justify-content:space-between}
.footer-logo{font-size:25px;font-weight:800}
.footer-top p{color:#666;font-family:'DM Mono',monospace;font-size:10px}
.back-top{font-family:'DM Mono',monospace;font-size:9px;color:#777}
.footer-bottom{display:flex;justify-content:space-between;margin-top:80px;color:#444;font-family:'DM Mono',monospace;font-size:9px}

.whatsapp{position:fixed;right:25px;bottom:25px;z-index:999;display:flex;align-items:center;gap:10px;background:#25D366;color:#fff;padding:13px 18px;border-radius:40px;box-shadow:0 10px 35px rgba(0,0,0,.35);transition:.3s}
.whatsapp:hover{transform:translateY(-5px) scale(1.03)}
.whatsapp-icon{font-size:20px}
.whatsapp-text{font-family:'DM Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:1px}

.service-card,.project,.about-content,.contact-content{opacity:0;transform:translateY(25px);transition:opacity .7s ease,transform .7s ease}
.service-card.visible,.project.visible,.about-content.visible,.contact-content.visible{opacity:1;transform:translateY(0)}


/* PORTAFOLIO REAL — ARTES PARA REDES SOCIALES */
.real-project {
    background:#111;
}
.real-project img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .6s ease;
}
.project:hover .real-project img {
    transform:scale(1.025);
}
.social-portfolio .project-info h3 {
    max-width:520px;
}


/* =====================================================
   LIGHTBOX — PORTAFOLIO
===================================================== */

.portfolio-clickable {
    cursor: zoom-in;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 80px;
    background: rgba(0,0,0,.94);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s ease;
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.lightbox-content {
    width: min(900px, 88vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.lightbox-content img {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 25px 80px rgba(0,0,0,.6);
}

.lightbox-caption {
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 25px;
    padding: 0 4px;
}

.lightbox-caption span {
    color: var(--accent);
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    letter-spacing: 2px;
}

.lightbox-caption strong {
    font-size: 17px;
    font-weight: 600;
    text-align: right;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(10,10,10,.7);
    color: var(--white);
    cursor: pointer;
    transition: .25s ease;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    background: var(--accent);
    color: var(--black);
    border-color: var(--accent);
}

.lightbox-close {
    top: 25px;
    right: 30px;
    width: 46px;
    height: 46px;
    font-size: 30px;
    line-height: 1;
}

.lightbox-prev,
.lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    font-size: 38px;
    line-height: 1;
}

.lightbox-prev { left: 25px; }
.lightbox-next { right: 25px; }

body.lightbox-open {
    overflow: hidden;
}

@media (max-width: 700px) {
    .lightbox {
        padding: 70px 18px 25px;
    }

    .lightbox-content {
        width: 94vw;
        max-height: 88vh;
    }

    .lightbox-content img {
        max-height: 72vh;
    }

    .lightbox-caption {
        flex-direction: column;
        gap: 5px;
    }

    .lightbox-caption strong {
        text-align: left;
        font-size: 14px;
    }

    .lightbox-prev,
    .lightbox-next {
        top: auto;
        bottom: 18px;
        transform: none;
        width: 44px;
        height: 44px;
        font-size: 30px;
    }

    .lightbox-prev { left: 18px; }
    .lightbox-next { right: 18px; }

    .lightbox-close {
        top: 18px;
        right: 18px;
    }
}

@media (max-width:900px){
    .header{height:70px}
    .nav{position:fixed;top:70px;left:0;right:0;background:#0a0a0a;border-bottom:1px solid #222;flex-direction:column;gap:0;padding:20px 5vw;transform:translateY(-150%);transition:.4s}
    .nav.active{transform:translateY(0)}
    .nav a{padding:18px 0;border-bottom:1px solid #222}
    .header-whatsapp{display:none}
    .menu-button{display:flex;width:38px;height:38px;border:1px solid #333;background:none;flex-direction:column;justify-content:center;align-items:center;gap:6px;cursor:pointer}
    .menu-button span{width:17px;height:1px;background:var(--white)}
    .hero{grid-template-columns:1fr;padding-top:120px}
    .hero-title{letter-spacing:-4px}
    .hero-visual{height:450px;margin-top:40px}
    .hero-circle{width:300px;height:300px}
    .hero-card-main{width:230px;height:310px}
    .card-symbol{font-size:130px}
    .about-content{grid-template-columns:1fr;gap:50px}
    .services-heading,.portfolio-heading{flex-direction:column;align-items:start}
    .services-grid{grid-template-columns:repeat(2,1fr)}
    .portfolio-grid{grid-template-columns:1fr}
    .project-image,.project-large .project-image{height:450px}
    .cta{grid-template-columns:1fr;gap:30px}
}

@media (max-width:600px){
    .section{padding-top:90px;padding-bottom:90px}
    .hero{padding-left:6vw;padding-right:6vw}
    .hero-title{
        display:block;
        font-size:clamp(52px,15vw,70px);
        letter-spacing:-3px;
        line-height:1.12;
    }
    .hero-title span{
        line-height:1.12;
        min-height:1.12em;
    }
    .hero-title .outline{
        margin-top:8px;
        padding-bottom:8px;
    }
    .hero-description{font-size:14px}
    .hero-buttons{flex-direction:column;align-items:stretch}
    .button{justify-content:space-between}
    .services{padding-left:6vw;padding-right:6vw}
    .services-grid{grid-template-columns:1fr}
    .service-card{min-height:350px}
    .portfolio-grid{gap:50px}
    .project-image,.project-large .project-image{height:380px}
    .project-placeholder strong{font-size:100px}
    .cta{padding:90px 7vw}
    .cta h2{letter-spacing:-4px}
    .contact-links a{grid-template-columns:1fr 30px;gap:10px}
    .contact-links span{grid-column:1 / -1}
    .footer-top{align-items:flex-start;flex-direction:column;gap:20px}
    .footer-bottom{flex-direction:column;gap:10px;margin-top:50px}
    .whatsapp{right:15px;bottom:15px}
}


/* =====================================================
   GALERÍA UNIFORME — EQUILIBRIO VISUAL
===================================================== */
.social-portfolio {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:42px 28px;
}

.social-portfolio .project,
.social-portfolio .project.project-large {
    grid-column:auto !important;
    width:100%;
}

.social-portfolio .project-image {
    width:100%;
    aspect-ratio:1 / 1;
    overflow:hidden;
}

.social-portfolio .project-image.real-project img {
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
}

.social-portfolio .project-info {
    min-height:72px;
    padding-top:16px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}

.social-portfolio .project-info h3 {
    margin-top:7px;
}

@media (max-width:900px) {
    .social-portfolio {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:34px 18px;
    }
}

@media (max-width:600px) {
    .social-portfolio {
        grid-template-columns:1fr;
        gap:30px;
    }
}



/* =====================================================
   PORTAFOLIO — ORDEN POR EMPRESA / TAMAÑO UNIFORME
===================================================== */
.portfolio-companies{display:flex;flex-direction:column;gap:100px}
.company-projects{width:100%}
.company-heading{display:flex;align-items:center;gap:20px;margin-bottom:30px;padding-bottom:18px;border-bottom:1px solid rgba(245,245,242,.14)}
.company-number{font-family:'DM Mono',monospace;font-size:10px;color:var(--accent);letter-spacing:2px}
.company-heading h3{margin-top:6px;font-size:clamp(30px,4vw,46px);font-weight:600;letter-spacing:-1.5px}
.social-portfolio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 26px}
.social-portfolio .project{grid-column:auto!important;width:100%}
.social-portfolio .project-image{width:100%;aspect-ratio:1/1;overflow:hidden;background:#111}
.social-portfolio .project-image.real-project img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;transition:transform .55s ease}
.social-portfolio .project:hover .real-project img{transform:scale(1.025)}
.social-portfolio .project-info{min-height:72px;padding-top:14px;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.social-portfolio .project-info h3{margin-top:7px;font-size:17px}
@media(max-width:900px){.portfolio-companies{gap:75px}.social-portfolio{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}}
@media(max-width:600px){.portfolio-companies{gap:60px}.company-heading{gap:14px;margin-bottom:20px}.company-heading h3{font-size:30px}.social-portfolio{grid-template-columns:1fr;gap:28px}}


/* =====================================================
   PORTAFOLIO — HOVER / VER ARTE COMPLETO
===================================================== */
.social-portfolio .project{
    position:relative;
    transition:transform .35s ease, z-index .35s ease;
}
.social-portfolio .project:hover,
.social-portfolio .project:focus-within{
    transform:scale(1.035);
    z-index:10;
}
.social-portfolio .project-image.real-project{
    transition:box-shadow .35s ease, background .35s ease;
}
.social-portfolio .project:hover .project-image.real-project,
.social-portfolio .project:focus-within .project-image.real-project{
    box-shadow:0 24px 70px rgba(0,0,0,.48);
}
.social-portfolio .project:hover .project-image.real-project img,
.social-portfolio .project:focus-within .project-image.real-project img{
    object-fit:contain;
    transform:none;
    background:#111;
}
.social-portfolio .project-image::after{
    content:"VER COMPLETO  ↗";
    position:absolute;
    inset:auto 12px 12px auto;
    padding:8px 10px;
    background:rgba(8,8,8,.82);
    color:#f5f5f2;
    font-family:'DM Mono',monospace;
    font-size:8px;
    letter-spacing:1.5px;
    opacity:0;
    transform:translateY(6px);
    transition:.25s ease;
    pointer-events:none;
}
.social-portfolio .project-image:hover::after{
    opacity:1;
    transform:translateY(0);
}

/* =====================================================
   DISEÑO WEB — REFERENCIAS
===================================================== */
.web-projects-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:55px 28px;
}
.web-project{
    min-width:0;
    transition:transform .35s ease;
}
.web-project:hover{
    transform:translateY(-8px);
}
.web-browser{
    overflow:hidden;
    border:1px solid rgba(255,255,255,.13);
    background:#101010;
    box-shadow:0 18px 55px rgba(0,0,0,.28);
}
.browser-bar{
    height:38px;
    display:flex;
    align-items:center;
    gap:6px;
    padding:0 12px;
    background:#171717;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.browser-bar > span{
    width:7px;
    height:7px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.25);
}
.browser-bar small{
    margin-left:10px;
    color:#777;
    font-family:'DM Mono',monospace;
    font-size:8px;
    letter-spacing:.5px;
}
.web-preview{
    min-height:310px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:45px;
    position:relative;
    overflow:hidden;
    background:#191919;
}
.web-preview::before{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    border-radius:50%;
    right:-80px;
    bottom:-100px;
    border:1px solid rgba(255,255,255,.14);
}
.web-preview::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,rgba(0,0,0,.18),transparent 55%,rgba(255,255,255,.04));
    pointer-events:none;
}
.preview-content{
    position:relative;
    z-index:1;
    max-width:72%;
}
.preview-content span{
    display:block;
    margin-bottom:14px;
    color:var(--accent);
    font-family:'DM Mono',monospace;
    font-size:9px;
    letter-spacing:2px;
}
.preview-content strong{
    display:block;
    font-size:clamp(34px,4vw,62px);
    line-height:.95;
    letter-spacing:-3px;
}
.preview-content em{
    display:block;
    margin-top:18px;
    color:#a0a0a0;
    font-size:12px;
    font-style:normal;
}
.preview-hotel{background:linear-gradient(135deg,#172019,#26352b)}
.preview-cleaning{background:linear-gradient(135deg,#152027,#27333a)}
.preview-mabapro{background:linear-gradient(135deg,#171717,#292929)}
.preview-alta{background:linear-gradient(135deg,#0f1723,#18314d)}
.preview-lago{background:linear-gradient(135deg,#17151e,#2a2337)}
.preview-improvement{background:linear-gradient(135deg,#15191c,#263039)}
.preview-inpharmedic{background:linear-gradient(135deg,#101a20,#17323c)}
.preview-kreativa{background:linear-gradient(135deg,#17130f,#302219)}
.web-project-info{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:25px;
    padding-top:18px;
}
.web-project-info h3{
    margin-top:7px;
    font-size:21px;
}
.web-project-info p{
    margin-top:8px;
    max-width:470px;
    color:#777;
    font-size:12px;
    line-height:1.6;
}
.web-project-info > a{
    flex:none;
    color:var(--white);
    border-bottom:1px solid rgba(255,255,255,.4);
    padding-bottom:4px;
    font-family:'DM Mono',monospace;
    font-size:9px;
    letter-spacing:1.5px;
    transition:.25s ease;
}
.web-project-info > a:hover{
    color:var(--accent);
    border-color:var(--accent);
}

@media(max-width:900px){
    .web-projects-grid{grid-template-columns:1fr;gap:50px}
    .web-preview{min-height:300px}
}
@media(max-width:600px){
    .web-preview{min-height:250px;padding:30px}
    .preview-content strong{font-size:40px}
    .web-project-info{flex-direction:column;gap:15px}
    .web-project-info > a{align-self:flex-start}
}


/* =====================================================
   DISEÑO WEB — VISTA REAL DESDE EL ENLACE
   Solo reemplaza la presentación visual de las webs.
===================================================== */
.web-browser-real{
    position:relative;
    transition:transform .4s ease, box-shadow .4s ease;
}
.web-project:hover .web-browser-real,
.web-project:focus-within .web-browser-real{
    transform:scale(1.025);
    box-shadow:0 28px 75px rgba(0,0,0,.42);
    z-index:5;
}
.web-real-frame{
    position:relative;
    width:100%;
    height:430px;
    overflow:hidden;
    background:#fff;
}
.web-real-frame iframe{
    display:block;
    width:100%;
    height:100%;
    border:0;
    background:#fff;
}
.browser-open{
    margin-left:auto;
    width:25px;
    height:25px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#aaa;
    font-size:14px;
    line-height:1;
    transition:.25s ease;
}
.browser-open:hover{
    color:var(--accent);
    transform:translate(2px,-2px);
}
.web-frame-link{
    position:absolute;
    right:14px;
    bottom:14px;
    padding:10px 13px;
    background:rgba(8,8,8,.88);
    color:#fff;
    border:1px solid rgba(255,255,255,.18);
    font-family:'DM Mono',monospace;
    font-size:8px;
    letter-spacing:1.4px;
    opacity:0;
    transform:translateY(8px);
    transition:.25s ease;
    backdrop-filter:blur(8px);
}
.web-real-frame:hover .web-frame-link,
.web-real-frame:focus-within .web-frame-link{
    opacity:1;
    transform:translateY(0);
}
.web-frame-link:hover{
    color:var(--accent);
    border-color:var(--accent);
}
@media(max-width:900px){
    .web-project:hover .web-browser-real,
    .web-project:focus-within .web-browser-real{
        transform:none;
    }
    .web-real-frame{
        height:430px;
    }
    .web-frame-link{
        opacity:1;
        transform:none;
    }
}
@media(max-width:600px){
    .web-real-frame{
        height:360px;
    }
    .browser-open{
        display:none;
    }
}

/* =====================================================
   V12 — CONTENIDO PROFESIONAL DESDE C.V.
===================================================== */
.experience{background:rgba(255,255,255,.015)}
.experience-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:70px}
.timeline{margin-top:35px;border-top:1px solid rgba(255,255,255,.12)}
.timeline-item{display:grid;grid-template-columns:145px 1fr;gap:18px;padding:21px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.timeline-item span,.skills-kicker,.education-mini>span{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;color:var(--accent)}
.timeline-item strong{font-size:17px;font-weight:500}
.timeline-item p{grid-column:2;margin:3px 0 0;color:#8d8d8d;font-size:12px}
.skills-panel{border-left:1px solid rgba(255,255,255,.12);padding-left:35px}
.skill-list{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 40px}
.skill-list span{font-size:10px;border:1px solid rgba(255,255,255,.15);padding:9px 11px;color:#bbb}
.education-mini{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;margin-top:20px}
.education-mini strong{display:block;margin-top:10px;font-size:14px;font-weight:500}
.education-mini p{font-size:11px;line-height:1.7;color:#888;margin:8px 0 0}
.skills-detail{border-top:1px solid rgba(255,255,255,.1);padding-top:18px;margin-top:4px}
.skills-detail p{font-size:11px;line-height:1.8;color:#8d8d8d;margin:0}
.skills-detail strong{color:#cfcfcf;font-weight:500}
.additional-experience{margin-top:38px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12)}
.additional-experience-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:16px}
.additional-experience-grid strong{display:block;font-size:14px;font-weight:500}
.additional-experience-grid p{font-size:11px;line-height:1.7;color:#888;margin:6px 0 0}
@media(max-width:900px){
    .experience-grid{grid-template-columns:1fr;gap:45px}
    .skills-panel{border-left:0;border-top:1px solid rgba(255,255,255,.12);padding:35px 0 0}
    .additional-experience-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
    .timeline-item{grid-template-columns:1fr;gap:8px}
    .timeline-item p{grid-column:1}
}


/* =========================================================
   V14 — RESPONSIVE MOBILE / APP-STYLE NAVIGATION
   ========================================================= */

html {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Keep desktop navigation normal */
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 768px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        padding-bottom: 82px;
    }

    /* Prevent common flex/grid children from forcing horizontal overflow */
    .container,
    .section,
    .hero,
    .portfolio-grid,
    .services-grid,
    .experience-grid,
    .web-grid,
    .project,
    .project-image,
    .project-content,
    .experience-card,
    .skill-panel {
        max-width: 100%;
        min-width: 0;
    }

    img,
    video,
    iframe {
        max-width: 100%;
    }

    /* Mobile app-style bottom navigation */
    .mobile-bottom-nav {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 9999;
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        gap: 2px;
        min-height: 62px;
        padding: 7px 5px;
        border: 1px solid rgba(255,255,255,.10);
        border-radius: 20px;
        background: rgba(15,15,18,.94);
        box-shadow: 0 12px 35px rgba(0,0,0,.38);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .mobile-bottom-nav a {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 5px 2px;
        color: rgba(255,255,255,.68);
        text-decoration: none;
        font-size: 9px;
        line-height: 1.1;
        font-weight: 600;
        text-align: center;
        white-space: nowrap;
        border-radius: 14px;
        transition: .2s ease;
    }

    .mobile-bottom-nav a span {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-bottom-nav a .nav-icon {
        font-size: 18px;
        line-height: 1;
    }

    .mobile-bottom-nav a:active,
    .mobile-bottom-nav a.active {
        color: #fff;
        background: rgba(255,255,255,.08);
    }

    /* Make the long Experience label compact on phones */
    .mobile-bottom-nav a.experience-link span:last-child {
        font-size: 8px;
    }

    /* Header/nav must not create a second horizontal scroll area */
    header,
    .header,
    .site-header,
    nav {
        max-width: 100%;
    }

    /* Safer typography on small screens */
    h1, h2, h3, p {
        overflow-wrap: anywhere;
    }

    /* Web embeds: fit the phone instead of overflowing */
    .web-portfolio iframe {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Portfolio cards stay inside the viewport */
    .social-portfolio .project:hover,
    .social-portfolio .project:focus-within {
        transform: none;
    }

    .social-portfolio .project-image {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }
}

@media (max-width: 768px) {
    .marquee {
        width: 100%;
        max-width: 100vw;
        padding: 20px 0;
    }

    .marquee-track {
        animation-duration: 20s;
    }

    .marquee-content {
        gap: 22px;
        padding-right: 22px;
    }

    .marquee span {
        font-size: 10px;
        letter-spacing: 1.5px;
    }
}

/* Extra-small phones */
@media (max-width: 390px) {
    body {
        padding-bottom: 78px;
    }

    .mobile-bottom-nav {
        left: 6px;
        right: 6px;
        bottom: 6px;
        min-height: 59px;
        border-radius: 18px;
    }

    .mobile-bottom-nav a {
        font-size: 8px;
    }

    .mobile-bottom-nav a .nav-icon {
        font-size: 17px;
    }
}






/* =========================================================
   V19 — WHATSAPP AL LADO IZQUIERDO
   No se cruza con "Powered by Netlify"
   ========================================================= */

.whatsapp {
    position: fixed !important;
    left: 24px !important;
    right: auto !important;
    bottom: 40px !important;
    z-index: 100000 !important;
}

@media (max-width: 768px) {
    .whatsapp {
        left: 18px !important;
        right: auto !important;
        bottom: 40px !important;
        z-index: 100000 !important;
    }

    body {
        padding-bottom: 20px !important;
    }
}

@media (max-width: 390px) {
    .whatsapp {
        left: 14px !important;
        right: auto !important;
        bottom: 35px !important;
    }
}

/* V19: el menú inferior tipo app ya no se muestra */
.mobile-bottom-nav {
    display: none !important;
}

@media (max-width: 480px) {
    .logo {
        white-space: nowrap;
        font-size: clamp(17px, 5.8vw, 24px);
        letter-spacing: -0.4px;
    }

    .footer-logo {
        white-space: nowrap;
        font-size: clamp(20px, 7vw, 30px);
    }
}


/* =========================================================
   V21 — LOGO SR PREMIUM APROBADO
   ========================================================= */

.card-monogram {
    width: 245px;
    height: 245px;
    top: 43%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-monogram img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    mix-blend-mode: screen;
}

@media (max-width: 768px) {
    .card-monogram {
        width: 205px;
        height: 205px;
    }
}


/* =========================================================
   V25 — WHATSAPP: DERECHA + MÁS ABAJO + PULSO
   Solo modifica el botón flotante de WhatsApp.
   ========================================================= */
.whatsapp {
    left: auto !important;
    right: 18px !important;
    bottom: 10px !important;
    width: 66px;
    height: 66px;
    padding: 0 !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: #25D366;
    box-shadow: 0 8px 28px rgba(37, 211, 102, .35), 0 0 0 1px rgba(255,255,255,.08) inset;
    overflow: visible;
    isolation: isolate;
    animation: whatsapp-breathe 2.2s ease-in-out infinite;
}

.whatsapp::before,
.whatsapp::after {
    content: '';
    position: absolute;
    inset: -7px;
    border: 2px solid rgba(37, 211, 102, .55);
    border-radius: 50%;
    z-index: -1;
    animation: whatsapp-ripple 2.2s ease-out infinite;
    pointer-events: none;
}

.whatsapp::after {
    animation-delay: 1.1s;
}

.whatsapp-pulse {
    position: absolute;
    width: 13px;
    height: 13px;
    top: -1px;
    right: -1px;
    border-radius: 50%;
    background: #ff3b30;
    border: 3px solid #111;
    box-shadow: 0 0 12px rgba(255,59,48,.65);
    z-index: 4;
    animation: whatsapp-dot 1.4s ease-in-out infinite;
}

.whatsapp-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #fff;
    z-index: 2;
}

.whatsapp-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    display: block;
}

.whatsapp-copy {
    position: absolute;
    right: 72px;
    bottom: 4px;
    min-width: 165px;
    padding: 10px 13px;
    border-radius: 13px;
    background: rgba(17,17,17,.96);
    border: 1px solid rgba(37,211,102,.5);
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    opacity: 0;
    transform: translateX(8px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}

.whatsapp-copy::after {
    content: '';
    position: absolute;
    right: -7px;
    bottom: 17px;
    width: 12px;
    height: 12px;
    background: #111;
    border-top: 1px solid rgba(37,211,102,.5);
    border-right: 1px solid rgba(37,211,102,.5);
    transform: rotate(45deg);
}

.whatsapp-copy strong,
.whatsapp-copy small {
    display: block;
}

.whatsapp-copy strong {
    color: #fff;
    font-size: 13px;
    margin-bottom: 3px;
}

.whatsapp-copy small {
    color: #aaa;
    font-size: 10px;
}

.whatsapp:hover {
    transform: scale(1.08);
    box-shadow: 0 10px 35px rgba(37, 211, 102, .48), 0 0 24px rgba(37,211,102,.25);
}

.whatsapp:hover .whatsapp-copy {
    opacity: 1;
    transform: translateX(0);
}

@keyframes whatsapp-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.055); }
}

@keyframes whatsapp-ripple {
    0% { opacity: .7; transform: scale(.92); }
    70% { opacity: 0; transform: scale(1.45); }
    100% { opacity: 0; transform: scale(1.45); }
}

@keyframes whatsapp-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.18); opacity: .75; }
}

@media (max-width: 768px) {
    .whatsapp {
        left: auto !important;
        right: 12px !important;
        bottom: 8px !important;
        width: 60px;
        height: 60px;
    }

    .whatsapp-icon {
        width: 34px;
        height: 34px;
    }

    .whatsapp-copy {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp, .whatsapp::before, .whatsapp::after, .whatsapp-pulse {
        animation: none;
    }
}