/* ============================================================
lEkY dg — hoja pública.
Sale de los dos mockups aprobados (mockup-lekydg-home.html y
mockup-lekydg-portfolio.html), fusionados: lo común está una sola vez y
lo que difería entre los dos quedó como modificador explícito, no como
"la última regla gana". Los valores no se retocaron — los mockups son la
spec visual.
Lo único que no venía de un mockup son los bloques de la FICHA DE
PROYECTO y de la página 404, que no tenían maqueta propia: están escritos
con los mismos tokens y el mismo lenguaje que el resto.
============================================================ */
:root{
--negro:#131313;
--blanco:#ffffff;
--gris:#f5f5f4;
--gris-med:#8a8a8a;
--rojo:#e2003b;
--teal:#0099a9;
--teal-suave:rgba(0,153,169,.08);
--rojo-suave:rgba(226,0,59,.07);
--sombra:0 20px 50px rgba(0,0,0,.09);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Poppins',-apple-system,'Segoe UI',sans-serif;color:var(--negro);background:var(--blanco);overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--teal);color:#fff}
/* ---------- HEADER ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px 5vw;display:flex;align-items:center;justify-content:space-between;transition:all .35s ease;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
header.scrolled{padding:10px 5vw;box-shadow:0 2px 24px rgba(0,0,0,.08)}
.logo img{height:52px;width:auto;transition:height .35s ease}
header.scrolled .logo img{height:40px}
nav{display:flex;align-items:center;gap:34px}
nav a.nl{font-size:.86rem;font-weight:500;letter-spacing:.06em;position:relative;padding:4px 0}
nav a.nl::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--rojo);transition:width .3s ease}
nav a.nl:hover::after{width:100%}
nav a.nl.activo{font-weight:700}
nav a.nl.activo::after{width:100%}
.btn-wa-nav{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;border:2px solid var(--teal);color:var(--teal);border-radius:50px;padding:9px 20px;transition:all .3s ease}
.btn-wa-nav:hover{background:var(--teal);color:#fff;transform:translateY(-2px)}
.btn-wa-nav svg{width:16px;height:16px;fill:currentColor}
#menu-toggle{display:none}
.hamburger{display:none;cursor:pointer;z-index:110}
.hamburger span{display:block;width:26px;height:2.5px;background:var(--negro);margin:6px 0;border-radius:2px;transition:all .3s ease}
/* ---------- BLOBS ----------
.blob es absoluto; el contenedor que lo usa le pone position:relative a sus
PROPIOS hijos con :not(.blob). Sin ese :not(), un "contenedor > *" con
position:relative pisa el absolute del blob (misma especificidad, gana la
regla posterior) y lo mete en el flujo: fue un bug real del mockup de la
home, que medía 1708px de hero por esto. No sacar el :not(). */
.blob{position:absolute;border-radius:50%;filter:blur(70px);z-index:0;pointer-events:none}
@keyframes flotar{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,30px) scale(1.12)}}
/* ---------- HERO (home) ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative;padding:140px 6vw 90px;background:var(--blanco)}
.hero > *:not(.blob):not(.scroll-hint){position:relative;z-index:1}
.hero .blob.b1{width:480px;height:480px;background:var(--teal-suave);top:-120px;right:-120px;animation:flotar 11s ease-in-out infinite alternate}
.hero .blob.b2{width:420px;height:420px;background:var(--rojo-suave);bottom:-140px;left:-120px;animation:flotar 13s ease-in-out infinite alternate-reverse}
/* height:auto NO es redundante: el lleva width="640" height="233" en el
HTML (están para que el navegador reserve el espacio y no salte el layout al
cargar). Si el CSS pisa solo el ancho, el alto se queda con el 233 del
atributo y el logo sale estirado al doble en vertical. Cada vez que una regla
fije UNA dimensión de una imagen con atributos, la otra va en auto. */
.hero .logo-hero{width:min(340px,64vw);height:auto;margin-bottom:44px}
.eyebrow{font-size:.8rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--gris-med);margin-bottom:22px}
.eyebrow b{color:var(--teal);font-weight:600}
h1{font-size:clamp(2.2rem,5.4vw,4.3rem);font-weight:700;line-height:1.08;letter-spacing:-.02em;max-width:900px}
h1 .dot{color:var(--rojo)}
h1 em{font-style:normal;color:var(--teal)}
.hero p.sub{margin-top:26px;font-size:clamp(.98rem,1.4vw,1.15rem);font-weight:300;color:#555;max-width:640px;line-height:1.75}
.hero-ctas{margin-top:42px;display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:10px;font-size:.95rem;font-weight:600;border-radius:50px;padding:15px 34px;transition:all .3s ease;cursor:pointer}
.btn-negro{background:var(--negro);color:#fff;border:2px solid var(--negro)}
.btn-negro:hover{background:var(--rojo);border-color:var(--rojo);transform:translateY(-3px);box-shadow:0 12px 28px rgba(226,0,59,.28)}
.btn-borde{background:transparent;color:var(--negro);border:2px solid #d8d8d8}
.btn-borde:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-3px)}
.btn svg{width:18px;height:18px;fill:currentColor}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);width:24px;height:40px;border:2px solid #ccc;border-radius:14px;z-index:1}
.scroll-hint::before{content:'';position:absolute;top:7px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--rojo);animation:rueda 1.8s ease infinite}
@keyframes rueda{0%{opacity:1;transform:translateY(0)}70%{opacity:0;transform:translateY(14px)}100%{opacity:0}}
/* El :not(.scroll-hint) de arriba corrige un bug que venía del mockup: la
regla del contenedor tiene MÁS especificidad (0,2,0) que .scroll-hint
(0,1,0), así que le pisaba el position:absolute sin importar el orden y el
indicador de scroll terminaba en el flujo, corrido a la derecha en vez de
centrado abajo. Es el mismo bug que ya se había corregido para los .blob:
un "contenedor > *" con position:relative se come el absolute de cualquier
hijo con especificidad igual o menor. */
/* ---------- CABECERA DE PÁGINA (portfolio, ficha, 404) ---------- */
.page-hero{position:relative;padding:170px 6vw 60px;text-align:center;background:var(--blanco);overflow:hidden}
.page-hero > *:not(.blob){position:relative;z-index:1}
.page-hero .blob.b1{width:420px;height:420px;background:var(--teal-suave);top:-140px;right:-100px}
.page-hero .blob.b2{width:380px;height:380px;background:var(--rojo-suave);top:-80px;left:-140px}
.page-hero h1{font-size:clamp(2.4rem,5vw,4rem);font-weight:800;letter-spacing:-.02em}
.page-hero h1 .dot{color:var(--rojo)}
.page-hero p.sub{margin:18px auto 0;font-size:clamp(.95rem,1.3vw,1.1rem);font-weight:300;color:#555;max-width:560px;line-height:1.75}
/* ---------- MARQUEE ---------- */
.marquee{background:var(--negro);overflow:hidden;padding:20px 0;transform:rotate(-1.2deg) scale(1.02);margin:0 -10px}
.marquee-track{display:inline-flex;white-space:nowrap;animation:cinta 30s linear infinite}
.marquee span{color:#fff;font-size:1.05rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;padding:0 18px}
.marquee i{font-style:normal;padding:0 6px}
.marquee i.r{color:var(--rojo)}
.marquee i.t{color:var(--teal)}
@keyframes cinta{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ---------- SECCIONES ---------- */
section{padding:110px 6vw}
.sec-head{text-align:center;margin-bottom:70px}
.sec-head .bar{width:46px;height:4px;border-radius:4px;margin:0 auto 18px;background:var(--rojo)}
.sec-head .bar.t{background:var(--teal)}
.sec-head h2{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.sec-head p{margin-top:12px;color:var(--gris-med);font-weight:300;font-size:1rem}
/* ---------- SOBRE MI ---------- */
#sobre-mi{background:var(--blanco)}
.sobre-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:70px;align-items:center;max-width:1100px;margin:0 auto}
.foto-wrap{position:relative}
.foto-wrap::before{content:'';position:absolute;top:-16px;left:-16px;right:38px;bottom:38px;border:3px solid var(--teal);border-radius:14px;z-index:0}
.foto-wrap img{position:relative;z-index:1;border-radius:14px;box-shadow:var(--sombra);filter:grayscale(1) contrast(1.05)}
.foto-badge{position:absolute;z-index:2;right:-18px;bottom:-18px;width:108px;height:108px;border-radius:50%;background:var(--rojo);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;font-weight:600;line-height:1.15;box-shadow:0 14px 30px rgba(226,0,59,.35)}
.foto-badge b{font-size:1.35rem;font-weight:800}
.foto-badge small{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.sobre-txt h3{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:700;line-height:1.2;margin-bottom:20px}
.sobre-txt h3 .dot{color:var(--rojo)}
.sobre-txt p{font-weight:300;color:#4a4a4a;line-height:1.85;margin-bottom:16px}
.sobre-txt p b{font-weight:600;color:var(--negro)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chip{font-size:.8rem;font-weight:500;border:1.5px solid #e2e2e2;border-radius:50px;padding:7px 16px;color:#555;transition:all .3s ease}
.chip:hover{border-color:var(--teal);color:var(--teal)}
.chip.solid{background:var(--negro);border-color:var(--negro);color:#fff}
/* ---------- SERVICIOS ---------- */
#servicios{background:var(--gris)}
.serv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1150px;margin:0 auto}
.serv-card{--acc:var(--teal);background:#fff;border-radius:16px;padding:38px 32px 34px;position:relative;overflow:hidden;transition:all .35s ease;box-shadow:0 4px 18px rgba(0,0,0,.04)}
.serv-card:nth-child(even){--acc:var(--rojo)}
.serv-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.serv-card:hover{transform:translateY(-8px);box-shadow:var(--sombra)}
.serv-card:hover::before{transform:scaleX(1)}
.serv-num{font-size:3rem;font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1.5px #dcdcdc;margin-bottom:16px;transition:all .35s ease}
.serv-card:hover .serv-num{-webkit-text-stroke:1.5px var(--acc)}
.serv-card h4{font-size:1.12rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px}
.serv-card p{font-size:.9rem;font-weight:300;color:#5c5c5c;line-height:1.75}
/* ---------- GRILLA DE PROYECTOS ----------
Dos anchos, según cuántas tarjetas hay:
.port-grid--home 4 columnas — la home muestra 8 destacados (8/4 = 2
filas justas). El tope de la home se recorta a un
múltiplo de 4 en index.php por este motivo.
.port-grid--todos 3 columnas — portfolio.php, cantidad variable.
Columnas fijas a propósito, nunca auto-fit: con auto-fit el número de
columnas es consecuencia del ancho y no una decisión. */
#portfolio{background:var(--blanco)}
.port-grid{display:grid;max-width:1250px;margin:0 auto}
.port-grid--home{grid-template-columns:repeat(4,1fr);gap:16px}
.port-grid--todos{grid-template-columns:repeat(3,1fr);gap:18px}
.port-item{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:56/45;cursor:pointer;display:block;background:var(--gris)}
.port-item.oculto{display:none}
.port-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.port-item:hover img{transform:scale(1.08)}
.port-info{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:20px;background:linear-gradient(to top,rgba(10,10,10,.82) 0%,rgba(10,10,10,.28) 45%,transparent 70%);opacity:.92;transition:opacity .4s ease}
.port-grid--todos .port-info{padding:22px;opacity:.94}
.port-item:hover .port-info{opacity:1}
.port-info small{font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin-bottom:5px}
.port-item:nth-child(even) .port-info small{color:#ff6d92}
.port-info strong{color:#fff;font-size:.98rem;font-weight:600;line-height:1.3}
.port-grid--todos .port-info strong{font-size:1.02rem}
.port-cta{text-align:center;margin-top:52px}
.port-cta .btn-negro svg{transition:transform .3s ease}
.port-cta .btn-negro:hover svg{transform:translateX(5px)}
.port-cta p{margin-top:14px;font-size:.8rem;color:var(--gris-med);font-weight:300}
.port-wrap{padding:44px 6vw 40px}
.port-vacio{text-align:center;color:var(--gris-med);font-weight:300;padding:40px 0}
/* ---------- FILTROS ---------- */
.filtros{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:36px 6vw 10px;position:relative;z-index:1}
.filtro{font-family:inherit;font-size:.83rem;font-weight:500;letter-spacing:.04em;border:1.5px solid #e2e2e2;background:#fff;border-radius:50px;padding:9px 22px;color:#555;cursor:pointer;transition:all .3s ease}
.filtro:hover{border-color:var(--teal);color:var(--teal)}
.filtro.activo{background:var(--negro);border-color:var(--negro);color:#fff}
.filtro .n{color:var(--rojo);font-weight:700;margin-left:5px;font-size:.75rem}
.filtro.activo .n{color:#ff6d92}
/* ---------- FICHA DE PROYECTO (sin mockup propio) ---------- */
.proyecto-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.proyecto-desc{max-width:720px;margin:26px auto 0;font-weight:300;color:#4a4a4a;line-height:1.9;text-align:center}
.proyecto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1250px;margin:0 auto}
.proyecto-foto{display:block;position:relative;border-radius:12px;overflow:hidden;aspect-ratio:56/45;background:var(--gris);cursor:zoom-in}
.proyecto-foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.proyecto-foto:hover img{transform:scale(1.06)}
.proyecto-foto figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;color:#fff;font-size:.82rem;font-weight:400;line-height:1.4;background:linear-gradient(to top,rgba(10,10,10,.8) 0%,transparent 100%);opacity:0;transition:opacity .35s ease}
.proyecto-foto:hover figcaption,.proyecto-foto:focus-visible figcaption{opacity:1}
.proyecto-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:56px}
.proyecto-otros{padding:0 6vw 40px}
/* ---------- LIGHTBOX ---------- */
.lightbox{position:fixed;inset:0;background:rgba(8,8,8,.94);z-index:300;display:none;align-items:center;justify-content:center;flex-direction:column;padding:5vh 5vw;cursor:zoom-out}
.lightbox.abierto{display:flex}
.lightbox img{max-width:min(880px,92vw);max-height:70vh;object-fit:contain;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb-caption{margin-top:22px;text-align:center;color:#fff}
.lb-caption small{display:block;font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin-bottom:6px}
.lb-caption strong{font-size:1.25rem;font-weight:700}
.lb-cerrar{position:absolute;top:24px;right:30px;font-size:2.2rem;font-weight:300;color:#fff;background:none;border:none;cursor:pointer;line-height:1;opacity:.7;transition:opacity .3s}
.lb-cerrar:hover{opacity:1}
.lb-hint{margin-top:14px;font-size:.72rem;color:#777;font-weight:300}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);font-size:2.6rem;font-weight:300;color:#fff;background:none;border:none;cursor:pointer;line-height:1;opacity:.55;padding:10px 18px;transition:opacity .3s}
.lb-nav:hover{opacity:1}
.lb-nav--prev{left:8px}
.lb-nav--next{right:8px}
.lb-contador{margin-top:10px;font-size:.72rem;color:#888;font-weight:300;letter-spacing:.1em}
/* ---------- CONTACTO ---------- */
#contacto{background:var(--negro);color:#fff;text-align:center;position:relative;overflow:hidden}
#contacto .blob.b3{width:520px;height:520px;background:rgba(0,153,169,.13);top:-180px;left:-160px}
#contacto .blob.b4{width:420px;height:420px;background:rgba(226,0,59,.12);bottom:-160px;right:-120px}
#contacto .sec-head h2{color:#fff}
#contacto h3.grande{font-size:clamp(2.2rem,5.5vw,4rem);font-weight:800;line-height:1.1;position:relative;z-index:1}
#contacto h3.grande .dot{color:var(--rojo);animation:latido 2.2s ease infinite}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.35}}
#contacto p.sub{margin:22px auto 0;max-width:520px;font-weight:300;color:#b9b9b9;line-height:1.8;position:relative;z-index:1}
.btn-wa-big{display:inline-flex;align-items:center;gap:12px;background:#25d366;color:#fff;font-size:1.05rem;font-weight:700;border-radius:50px;padding:18px 42px;margin-top:44px;transition:all .3s ease;position:relative;z-index:1;box-shadow:0 14px 38px rgba(37,211,102,.32)}
.btn-wa-big:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 20px 48px rgba(37,211,102,.45)}
.btn-wa-big svg{width:24px;height:24px;fill:#fff}
.contact-row{display:flex;justify-content:center;gap:56px;flex-wrap:wrap;margin-top:64px;position:relative;z-index:1}
.contact-item{display:flex;flex-direction:column;align-items:center;gap:8px}
.contact-item svg{width:22px;height:22px;fill:var(--teal)}
.contact-item small{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#8a8a8a}
.contact-item a,.contact-item span{font-size:.95rem;font-weight:400;color:#eee;transition:color .3s}
.contact-item a:hover{color:var(--teal)}
/* ---------- CTA FINAL (portfolio y ficha) ---------- */
.cta-final{background:var(--negro);color:#fff;text-align:center;padding:90px 6vw;position:relative;overflow:hidden}
.cta-final .blob.b3{width:460px;height:460px;background:rgba(0,153,169,.13);top:-160px;left:-140px}
.cta-final .blob.b4{width:380px;height:380px;background:rgba(226,0,59,.12);bottom:-140px;right:-100px}
.cta-final > *:not(.blob){position:relative;z-index:1}
.cta-final h3{font-size:clamp(1.9rem,4.2vw,3.2rem);font-weight:800;line-height:1.15}
.cta-final h3 .dot{color:var(--rojo);animation:latido 2.2s ease infinite}
.cta-final .btn-wa-big{font-size:1rem;padding:16px 38px;margin-top:36px}
.cta-final .btn-wa-big svg{width:22px;height:22px}
.volver{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-size:.85rem;font-weight:500;color:#b9b9b9;transition:color .3s}
.volver:hover{color:#fff}
.volver svg{width:15px;height:15px;fill:currentColor;transform:rotate(180deg)}
/* ---------- FOOTER ---------- */
footer{background:#0b0b0b;text-align:center;padding:46px 6vw 40px}
footer img{height:56px;width:auto;margin:0 auto 18px;opacity:.95}
footer p{font-size:.78rem;font-weight:300;color:#6d6d6d;letter-spacing:.04em}
footer p b{color:#999;font-weight:500}
.footer-redes{display:flex;justify-content:center;gap:18px;margin-bottom:18px}
.footer-redes a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1.5px solid #2a2a2a;transition:all .3s ease}
.footer-redes a:hover{border-color:var(--teal);background:var(--teal)}
.footer-redes svg{width:16px;height:16px;fill:#8a8a8a;transition:fill .3s ease}
.footer-redes a:hover svg{fill:#fff}
/* ---------- WHATSAPP FLOTANTE ---------- */
.wa-float{position:fixed;bottom:24px;right:24px;width:58px;height:58px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(37,211,102,.45);z-index:200;transition:transform .3s ease}
.wa-float:hover{transform:scale(1.12)}
.wa-float svg{width:30px;height:30px;fill:#fff}
/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.reveal.vis{opacity:1;transform:translateY(0)}
/* ---------- RESPONSIVE ---------- */
@media(max-width:960px){
.serv-grid{grid-template-columns:repeat(2,1fr)}
.port-grid--home,.port-grid--todos,.proyecto-grid{grid-template-columns:repeat(2,1fr)}
.sobre-grid{grid-template-columns:1fr;gap:64px;max-width:520px}
}
@media(max-width:640px){
.hamburger{display:block}
/* El menú de pantalla completa NO puede usar "inset:0": el tiene
backdrop-filter, y un ancestro con filtro convierte al elemento en el
bloque contenedor de sus hijos position:fixed. Con inset:0 el