/* === BASE / RESET === */



/* LZK — site.css
   Premium cleanup pass: comments/structure only.
   RULE: do not change visual output (layout/copy).
   Updated: 2026-02-01
*/

:root{

  /* micro semantic tokens (safe) */
  --panel-bg: var(--glass-bg);
  --pill-bg: var(--glass-bg-soft);
  --hairline: var(--glass-border);


  /* semantic aliases (safe) */
  --glass-bg: var(--w-06);
  --glass-bg-soft: var(--w-04);
  --glass-bg-strong: var(--w-10);
  --glass-border: var(--line);
  --glass-border-soft: var(--soft);
  --overlay-dim: var(--b-55);
  --overlay-deep: var(--b-88);
  --shadow-elev: var(--shadow);

  /* palette + overlays (generated) */
  --c-black: #000;
  --c-white: #fff;
  --c-cyan: #39d7ff;
  --c-cyan-soft: #8fe9ff;
  --c-magenta: #ff3bd1;
  --w-04: rgba(255,255,255,.04);
  --w-05: rgba(255,255,255,.05);
  --w-06: rgba(255,255,255,.06);
  --w-08: rgba(255,255,255,.08);
  --w-10: rgba(255,255,255,.10);
  --w-14: rgba(255,255,255,.14);
  --w-22: rgba(255,255,255,.22);
  --b-45: rgba(0,0,0,.45);
  --b-55: rgba(0,0,0,.55);
  --b-65: rgba(0,0,0,.65);
  --b-88: rgba(0,0,0,.88);
  --b-96: rgba(0,0,0,.96);

  --bg:var(--c-black); --fg:var(--c-white);
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.52);
  --line:var(--w-14);
  --soft:var(--w-08);
  --max:1100px; --pad:22px;
  --topbar-h:64px;
  --shadow:0 8px 30px var(--b-45);
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --fs-h1: clamp(34px, 4.4vw, 56px);
  --fs-h2: clamp(22px, 2.2vw, 30px);
  --fs-h3: 18px;
  --fs-body: 16px;
  --fs-lead: clamp(16px, 1.25vw, 19px);
  --lh-tight: 1.15;
  --lh-loose: 1.65;

  --accent:var(--c-cyan);
  --accent2:var(--c-magenta);

  --r-sm:12px;
  --r-md:16px;
  --r-lg:20px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --shadow-soft: 0 10px 34px var(--b-45);
  --shadow-lift: 0 18px 60px rgba(0,0,0,.60);}


*{box-sizing:border-box}
html, body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.55;
  letter-spacing:.15px;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;}
a{color:inherit;text-decoration:none}
a:focus-visible, button:focus-visible{ outline:none; outline-offset:3px; border-radius:10px;}

.container{max-width:var(--max); margin:0 auto; padding:0 var(--pad);}
.container.narrow{max-width:860px;}
main{padding-top:var(--topbar-h);}

.section{padding:clamp(44px, 6vw, 80px) 0;}
.section h1{font-size:var(--fs-h1); line-height:1.05; margin:0 0 14px; letter-spacing:-.6px;}
.section h2{font-size:var(--fs-h2); line-height:1.18; margin:0 0 14px; letter-spacing:-.2px;}
.section h3{font-size:var(--fs-h3); margin:0 0 10px; letter-spacing:-.15px;}
.section p{margin:10px 0; color:var(--muted); line-height:var(--lh-loose); max-width:72ch;}
.lead{font-size:var(--fs-lead); color:rgba(255,255,255,.92); max-width:70ch;}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:12px 16px;
  border-radius:14px; border:none;
  color:var(--fg); background:var(--panel-bg);
  min-height:44px;
  transition:transform .08s ease, background .15s ease, border-color .15s ease;}
.btn:hover{ background:var(--glass-bg-strong); border-color:var(--w-22);}
.btn:active{ transform:translateY(1px);}
.btn.primary{ background:var(--w-14);}
.btn.primary:hover{ background:rgba(255,255,255,.18);}
.btn.secondary{ background:transparent;}

.topbar{
  position:fixed; top:0; left:0; right:0;
  height:var(--topbar-h);
  background:var(--overlay-deep);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(120%) blur(10px);
  z-index:1000;}
.topbar-inner{
  height:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; max-width:var(--max);
  margin:0 auto; padding:0 var(--pad);}
.logo{ font-weight:600; letter-spacing:.6px; padding:10px 12px; border-radius:12px;}
.logo:hover{ background:var(--soft);}


/* === NAVIGATION === */
.nav{ display:flex; align-items:center; gap:10px; position:relative;}
.nav a, .nav button{
  background:transparent; border:0; color:var(--muted);
  font:inherit; padding:10px 12px; border-radius:12px; cursor:pointer;}
.nav a:hover, .nav button:hover{ background:var(--soft); color:var(--fg);}
.nav-cta{ color:var(--fg)!important; border:none; background:var(--panel-bg);}
.nav-cta:hover{ background:var(--glass-bg-strong);}

.nav-services::after{ content:"▾"; margin-left:8px; opacity:.8;}

.services-menu{
  position:absolute;
  top:calc(var(--topbar-h) - 6px);
  right:0;
  width:min(320px, calc(100vw - 2*var(--pad)));
  background:var(--b-96);
  border:none;
  border-radius:16px;
  padding:10px;
  box-shadow:var(--shadow);
  display:none;}
.services-menu a{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 12px; border-radius:12px;
  color:var(--muted); border:none;}
.services-menu a:hover{ background:var(--soft); color:var(--fg); border-color:var(--glass-bg-strong);}
.services-menu small{ color:var(--muted2);}

.back-pill{
  position:fixed;
  top:calc(var(--topbar-h) + 14px);
  right:var(--pad);
  z-index:900;
  padding:10px 12px;
  border-radius:999px;
  border:none;
  background:rgba(0,0,0,.78);
  color:rgba(255,255,255,.86);}
.back-pill:hover{ background:var(--panel-bg); border-color:var(--w-22);}

.card{
  border:none;
  border-radius:18px;
  padding:18px;
  background:var(--pill-bg);}

.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}

hr.div{ border:0; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); opacity:.9; margin:22px 0;}

.footer{ border-top:1px solid var(--line); padding:26px 0; color:var(--muted2); font-size:13px;}


/* === FOOTER BAR (SYSTEM) === */
.footer.footerbar{
  border-top:1px solid var(--line);
  padding:14px 0;
  font-size:12.5px;
  color:rgba(255,255,255,.72);
}
.footerbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.footerbar__left,
.footerbar__right{
  display:flex;
  align-items:center;
  gap:14px;
}
.footerbar__brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.92);
  text-decoration:none;
  letter-spacing:.02em;
}
.footerbar__mark{
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 0 0 1px rgba(0,0,0,.35) inset;
}
.footerbar__brandtext{ font-weight:600; }
.footerbar__legal,
.footerbar__nav{
  display:inline-flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}
.footerbar__sep{
  color:rgba(255,255,255,.25);
}
.footerbar a{
  color:rgba(255,255,255,.74);
  text-decoration:none;
  transition:opacity .15s ease, color .15s ease;
}
.footerbar a:hover{
  color:rgba(255,255,255,.95);
}
.footerbar a:focus-visible{
  outline:2px solid rgba(255,255,255,.22);
  outline-offset:4px;
  border-radius:10px;
}
.footerbar__legal a{
  color:rgba(255,255,255,.62);
}
.footerbar__navlink.is-active{
  color:rgba(255,255,255,.95);
  font-weight:600;
}
.footerbar__lang{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}
.footerbar__langbtn{
  appearance:none;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.72);
  font:inherit;
  padding:0;
  cursor:default;
}
.footerbar__langbtn.is-active{
  color:rgba(255,255,255,.95);
  font-weight:600;
}
.footerbar__social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.80);
}
.footerbar__in{ font-weight:700; font-size:12px; line-height:1; }

/* Responsive: keep the same content, just wrap */
@media (max-width: 780px){
  .footerbar__inner{ flex-wrap:wrap; justify-content:flex-start; }
  .footerbar__legal{ order:3; width:100%; gap:10px; }
  .footerbar__right{ width:100%; justify-content:space-between; }
}

/* === MEDIA QUERIES === */
@media (max-width: 980px){
}
@media (max-width: 620px){
  .nav a{ display:none;}
  .nav a.nav-cta{ display:inline-flex;}
  .grid-2{ grid-template-columns:1fr;}
  .back-pill{ right:12px;}
}

/* === FIX v2: services dropdown anchored under Servicios button === */

.nav{ position:relative;}
.nav-services-wrap{ position:relative; display:inline-flex; align-items:center;}
.nav-services-wrap .services-menu{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  right:auto;
  width:min(320px, calc(100vw - 2*var(--pad)));
  background:var(--b-96);
  border:none;
  border-radius:16px;
  padding:10px;
  box-shadow:var(--shadow);
  display:none;
  z-index:1100;}
.nav-services-wrap.is-open .services-menu{ display:block;}


/* === FIX v2: fixed footer bar === */

:root{ --footer-h:56px;}
body{ padding-bottom:var(--footer-h);}
.footer{
  position:fixed;
  left:0; right:0; bottom:0;
  height:var(--footer-h);
  background:var(--overlay-deep);
  border-top:1px solid var(--line);
  backdrop-filter:saturate(120%) blur(10px);
  z-index:999;}
.footer .container{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;}
.footer .footer-left, .footer .footer-mid, .footer .footer-right{
  display:flex; align-items:center; gap:12px;
  color:var(--muted);
  font-size:13px;}
.footer a{ color:var(--muted);}
.footer a:hover{ color:var(--fg);}
.footer .ico{ width:18px; height:18px; display:inline-block; opacity:.9;}
.footer .footer-mid{ opacity:.85;}
@media (max-width:760px){
  :root{ --footer-h:76px;}
  .footer .container{
    flex-direction:column;
    justify-content:center;
    gap:8px;
    padding-top:8px;
    padding-bottom:8px;
}
}


/* ===== Navbar style (brand dot + CTA) ===== */

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  letter-spacing:.3px;}
.logo::before{
  content:"";
  width:18px; height:18px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--c-cyan-soft), var(--accent) 45%, var(--accent2) 78%);
  box-shadow: 0 0 0 4px var(--w-05), 0 10px 26px var(--b-65);
  flex:0 0 auto;}

.topbar{
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, var(--b-65), rgba(0,0,0,.28));
  border-bottom:1px solid var(--w-08);}

.nav a{ opacity:.85;}
.nav a:hover{ opacity:1;}

.nav-cta{
  padding:10px 16px;
  border-radius:999px;
  font-weight:700;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:var(--c-black) !important;
  border:0;
  box-shadow: 0 10px 30px var(--overlay-dim);}
.nav-cta:hover{ transform: translateY(-1px); filter: brightness(1.02);}


/* ===== Micro-polish v1 (coherence pass) ===== */

/* Consistent section rhythm */

.section{ padding: clamp(54px, 6vw, 88px) 0;}
.section:first-of-type{ padding-top: clamp(72px, 8vw, 110px);}
.section + .section{ border-top: 1px solid var(--pill-bg);}

/* Cards: unified radius, border, hover */

.service-card, .
/* === PORTFOLIO / PROJECTS === */
portfolio-item, .card{
  border-radius: var(--r-lg);
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
  box-shadow: var(--shadow-soft);}
.service-card:hover, .portfolio-item:hover, .card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);}

/* Buttons: consistent pill + hover */

.btn, .nav-cta{
  transition: transform .18s var(--ease), filter .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);}
.btn.secondary{
  border-radius: 999px;
  border:none;
  background: var(--pill-bg);}
.btn.secondary:hover{
  transform: translateY(-1px);
  background: var(--panel-bg);
  border-color: var(--w-22);}

/* Links / micro-interactions */

a{ text-underline-offset: 3px;}
a:hover{ text-decoration-color: rgba(255,255,255,.35);}

/* Reduce “banding” on dark backgrounds */

body{
  background-image:
    radial-gradient(900px 500px at 50% -120px, var(--pill-bg), transparent 60%);}


/* ===== NAV CTA visibility fix ===== */

.nav-cta{
  opacity: 1 !important;}
.nav-cta:hover,
.nav-cta:focus-visible{
  opacity: 1 !important;}


/* ===== Hotfix: ensure Contactar CTA always visible ===== */

.nav a.nav-cta{ display:inline-flex !important; opacity:1 !important;}


/* ===== Fix: dropdown menu must be hidden by default ===== */

.services-menu{ display:none !important;}
.nav-services-wrap.is-open .services-menu{ display:block !important;}


/* ===== Definitive fix: nav link opacity ===== */
/* On desktop, never hide nav links via opacity */

@media (min-width: 768px){
  .nav a{ opacity: 1 !important;}
  .nav a.nav-cta{ opacity: 1 !important;}
}


/* ===== Fix: make Contactar CTA styling definitive everywhere ===== */

.nav-cta{
  background: linear-gradient(135deg, var(--accent), var(--accent2)) !important;
  color:var(--c-black) !important;
  border:0 !important;
  opacity:1 !important;}


/* ===== Home reel (Vimeo) ===== */

.reel-embed{
  position:relative;
  width:100%;
  padding-top:56.25%; /* 16:9 */
  overflow:hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);}
.reel-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;}


/* ===== Vimeo reel embed ===== */

.reel-embed{ margin-top:16px;}
.reel-frame{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg, 20px);
  overflow:hidden;
  border:none;
  background: rgba(255,255,255,.02);
  box-shadow: 0 18px 60px var(--overlay-dim);}
.reel-frame iframe{
  position:absolute; inset:0;
  width:100%; height:100%;}

/* Utility: fixed 16:9 cards (used in PRO placeholders) */

.ratio-16x9{
  display:block;
  width:100%;
  aspect-ratio: 16 / 9;}

/* Thumbs inside cards */

.portfolio-item.has-thumb{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;}


/* LZK microtuning — Freelance Operativo split + band (Honō skin-compatible) */

.lz-split{display:grid; gap:24px; align-items:start;}
@media (min-width: 520px){
  .lz-split--top{grid-template-columns: 1.35fr .65fr; align-items:start;}
}
@media (min-width: 720px){
  .lz-split--band{grid-template-columns: .75fr 1.25fr; align-items:center;}
}
.lz-split__media{display:flex; justify-content:flex-end;}
.lz-helmet{max-width:180px; width:100%; height:auto; filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));}
.lz-band{margin-top:26px; padding:44px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
/* subtle 'LZK' tech grid, not a heavy image */

.lz-band{
  background:
    radial-gradient(1200px 500px at 20% 40%, rgba(57,215,255,.14), transparent 60%),
    radial-gradient(900px 400px at 80% 20%, rgba(255,59,209,.10), transparent 55%),
    linear-gradient(180deg, var(--panel-bg), rgba(255,255,255,0)),
    repeating-linear-gradient(90deg, var(--w-05) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, var(--pill-bg) 0 1px, transparent 1px 56px);}
.lz-stamp{display:flex; justify-content:flex-start;}
.lz-stamp img{max-width:360px; width:100%; height:auto; opacity:.95; filter: drop-shadow(0 18px 50px var(--overlay-dim));}
.lz-band__copy p{margin:0 0 14px;}
.lz-since{margin-top:10px;}


/* Microtuning — Presentación (Freelance Operativo): balance vertical */

#presentacion.section{
  padding-top: clamp(30px, 4.2vw, 56px);
  padding-bottom: 0;}
#presentacion > .container{
  padding-top: 0;
  padding-bottom: clamp(28px, 4.2vw, 56px);}
#presentacion .lz-split--top{
  align-items: center; /* centra copy + casco */}
#presentacion .lz-band{
  margin-top: 0; /* elimina salto que descompensa el bloque */}


/* Microtuning — Carrusel de logos: 5 por bloque */

.logo-page{
  grid-template-columns: repeat(5, auto) !important;
  gap: 12px;
  justify-content: flex-start;
  align-content: center;

  display: grid;
}
@media (max-width: 700px){
  .logo-page{ grid-template-columns: repeat(3, minmax(0,1fr)) !important;}
}
@media (max-width: 480px){
  .logo-page{ grid-template-columns: repeat(2, minmax(0,1fr)) !important;}
}
.logo-card{ overflow:hidden;
  justify-self: start;
}
.logo-img{ object-fit: contain;}


/* v1.39 – Trayectoria / Clientes carousel height fix */

#trayectoria .carousel,

#trayectoria .carousel-track,

#trayectoria .carousel-item{
  height: 50%;
  max-height: 280px;
  flex: 0 0 auto;
}

#trayectoria .carousel-item img{
  max-height: 100%;
  object-fit: contain;}

/* v1.39 – tighten logo card spacing */

#trayectoria .logo-page,

#trayectoria .carousel-track{
  Jpx;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}


/* GLOUBO — cards sin padding interno */

#gloubo .service-card,

#gloubo .card{
  padding: 0 !important;
  overflow: hidden;}


/* CTA Haiku background (lightning) */


.contact-band .container,
.contact-band .contact-grid,
.contact-band .contact-band

/* HOME CTA background restored from v1.40 */

/* Scoped HOME CTA */


/* Scoped PRO CTA */


/* Semantic aliases (no functional change) */
:root{
  --glass-border-soft: var(--panel-bg);
  --glass-border: var(--glass-bg-strong);
  --glass-border-strong: var(--w-22);
  --overlay-dark: var(--overlay-dim);
  --overlay-darker: var(--overlay-deep);
}

/* TOC micro-adjustment: HOME video modal footer background */
#video-modal .modal-footer{
  background: var(--overlay-dim);
}

/* TOC rebuild: Experiencia profesional (trayectoria_new) */
#trayectoria .exp-carousel{
  margin-top: 32px;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
#trayectoria .exp-viewport{
  overflow: hidden;
}
#trayectoria .exp-track{
  display: flex;
  transition: transform .35s ease;
  will-change: transform;
}
#trayectoria .exp-page{
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
#trayectoria .exp-card{
  background: #fff;
  border-radius: 10px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#trayectoria .exp-img{
  max-width: 90%;
  max-height: 80%;
  object-fit: contain;
  display: block;
}
#trayectoria .exp-nav{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}
#trayectoria .exp-nav:hover{
  background: rgba(255,255,255,.10);
}
#trayectoria .exp-nav:active{
  transform: translateY(1px);
}

#trayectoria .exp-intro{ max-width:none; }


/* === FOOTER BRAND PLAIN TEXT === */
.footerbar__brandtext{
  cursor: default;
  font-weight: 400;
  text-decoration: none;
}
.footerbar__brandtext:hover{
  text-decoration: none;
}


/* === FOOTER BRAND ZERO ACTIVITY === */
.footerbar__brandtext{
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}
.footerbar__brandtext:hover,
.footerbar__brandtext:active,
.footerbar__brandtext:focus{
  text-decoration: none;
  outline: none;
}


/* === CTA LINK COLOR (PRO consistency) === */
.cta-link{
  color: var(--accent, #4da3ff);
  text-decoration: none;
}
.cta-link:hover{
  text-decoration: underline;
}


/* === HOME MOBILE WIDTH FIX === */
/* Prevent rare horizontal overflow on HOME (mobile). Does not affect layout. */
html, body {
  overflow-x: hidden;
}


}


/* === FOOTER NAV DESKTOP PASSIVE / MOBILE ACTIVE === */
/* Desktop & tablet: footer nav is informational only */
.footerbar__navlink {
  pointer-events: none;
  cursor: default;
  opacity: .6;
}

/* Mobile: footer nav becomes active navigation */
@media (max-width: 768px) {
  .footerbar__navlink {
    pointer-events: auto;
    cursor: pointer;
    opacity: .9;
  }
}

/* v1.06 — Mobile fix: center helmet image in "QUIÉN SOY" only */
@media (max-width: 768px){
  #presentacion .lz-split__media{justify-content:center;}
}


/* v1.07 — Fix "Proceso de trabajo" layout (HOME) */
.process-icons{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px;
  margin-top: 28px;
}
.process-icons .pitem{
  display:flex;
  flex-direction:column;
  gap: 10px;
  min-width: 0;
}
.process-icons .picon{
  width: 28px;
  height: 28px;
  opacity: .9;
}
.process-icons .picon svg{
  width: 100%;
  height: 100%;
  display:block;
}
.process-icons .ptitle{
  font-weight: 700;
  line-height: 1.2;
}
.process-icons .pdesc{
  opacity: .82;
  line-height: 1.45;
}

}


/* v1.09 — Mobile fix: Proceso de trabajo fixed to 2 columns */
@media (max-width: 560px){
  .process-icons{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .process-icons .ptitle{
    font-size: 16px;
  }
  .process-icons .pdesc{
    font-size: 14px;
    line-height: 1.4;
  }
}


/* v1.10 — HARD override: force 2 columns on small screens (HOME -> #proceso) */
@media screen and (max-width: 600px){
  #proceso .process-icons{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100%;
  }
  #proceso .process-icons .pitem{
    min-width: 0;
  }
  #proceso .process-icons .ptitle{
    font-size: 16px !important;
    line-height: 1.2 !important;
  }
  #proceso .process-icons .pdesc{
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  #proceso .process-icons .picon{
    width: 26px !important;
    height: 26px !important;
  }
}


/* v1.11 — Mobile: "Experiencia profesional" logos bigger (2 cols per page) */
@media screen and (max-width: 600px){
  #trayectoria .exp-page{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  #trayectoria .exp-card{
    height: 84px;
    border-radius: 14px;
  }
  #trayectoria .exp-img{
    max-width: 92%;
    max-height: 86%;
  }
}


/* v1.14 — Mobile fix: HOME CTA image cropping + left-aligned copy */
@media screen and (max-width: 600px){
  #contacto .contact-grid{
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-items: stretch;
  }

  #contacto .contact-visual{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
  }
  #contacto .contact-visual img{
    width: min(520px, 100%);
    height: auto;
    display: block;
    object-fit: contain;
  }

  #contacto .contact-copy{
    text-align: left !important;
  }
  #contacto .contact-copy h2,
  #contacto .contact-copy p{
    text-align: left !important;
  }
}


/* v1.18 — LAB CTA uses SAME grid as HOME CTA */
.lab-cta-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.35) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.35) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .35;
  pointer-events: none;
}


/* v1.19 — Footer active page subtle highlight */
.footerbar__navlink{
  opacity: .6;
  transition: opacity .2s ease, color .2s ease;
}

.footerbar__navlink.is-current{
  color: var(--accent-blue, #6BDCFF);
  opacity: .75;
}


/* v1.22 — Footer 2.0 (parallel test)
   Goal: in mobile use Footer 2.0 (non-fixed, 1-line layout, legal hidden).
   Footer 1.0 remains in code (for comparison) but is hidden on mobile in this test version.
*/

/* Default: hide Footer 2.0 everywhere */
.footer2{ display:none; }

/* Mobile: use Footer 2.0 */
@media (max-width: 780px){
  /* Hide Footer 1.0 (fixed) to avoid viewport clipping */
  .footer.footerbar{ display:none !important; }

  /* Show Footer 2.0 */
  .footer2{ 
    display:block;
    position: static;
    height: auto;
    padding: 14px 0;
  }

  /* Layout: [© + ES/EN] left | [HOME|PRO|LAB] right */
  .footer2__inner{
    display:flex;
    flex-wrap: nowrap;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
  }
  .footer2__left{
    display:flex;
    align-items:center;
    gap: 12px;
    min-width: 0;
  }
  .footer2__right{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    margin-left:auto;
    flex: 0 0 auto;
    width:auto;
  }

  /* Hide legal links in mobile */
  .footer2__legal{ display:none !important; }

  .footer2__nav{
    display:inline-flex;
    align-items:center;
    gap: 10px;
    white-space: nowrap;
  }
  .footer2__sep{ opacity:.45; }

  /* Active link (reuse the blue, bold-free) */
  .footer2__navlink{
    opacity: .6;
    transition: opacity .2s ease, color .2s ease;
  }
  .footer2__navlink.is-current{
    color: var(--accent-blue, #6BDCFF);
    opacity: .75;
  }
}


/* v1.23 — Footer 2.0 mobile parity: match Footer 1.0 look + keep it fixed (no clipping) */

/* Make Footer 2.0 inherit the same base styling as Footer 1.0 */
.footer2.footer2bar{
  width: 100%;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}

/* Reuse Footer 1.0 visual treatment (background/border/shadow) */
.footer.footerbar,
.footer2.footer2bar{
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Map common UI atoms from footerbar__* to footer2__* (same typography & pills) */
.footerbar__lang,
.footer2__lang{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footerbar__navlink,
.footer2__navlink{
  text-decoration: none;
}

.footer2__navlink{
  opacity: .6;
  transition: opacity .2s ease, color .2s ease;
}

.footer2__navlink.is-current{
  color: var(--accent-blue, #6BDCFF);
  opacity: .75;
}

/* Mobile: show Footer 2.0 fixed, hide Footer 1.0, and reserve safe space */
@media (max-width: 780px){
  /* Hide Footer 1.0 (kept in HTML for now) */
  .footer.footerbar{ display:none !important; }

  /* Footer 2.0 visible and fixed */
  .footer2{ display:block !important; }

  /* Ensure no clipping on Android/iOS: safe-area + a touch more height */
  :root{ --footer2-h: 72px; }
  body{
    padding-bottom: calc(var(--footer2-h) + env(safe-area-inset-bottom, 0px)) !important;
  }

  .footer2.footer2bar{
    min-height: var(--footer2-h);
    padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
  }

  /* Keep the exact left|right layout */
  .footer2__inner{
    display:flex !important;
    flex-wrap: nowrap !important;
    align-items:center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }
  .footer2__legal{ display:none !important; }
  .footer2__nav{
    display:inline-flex !important;
    align-items:center !important;
    white-space: nowrap !important;
    gap: 10px !important;
  }
  .footer2__sep{ opacity:.45; }
}


/* v1.24 — Footer 2.0: match Footer 1.0 language pill + typography */
.footer2__brandtext{ font-weight:600; }

.footer2__lang{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}

.footer2__langbtn{
  appearance:none;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.72);
  font:inherit;
  padding:0;
  cursor:default;
}

.footer2__langbtn.is-active{
  color:rgba(255,255,255,.95);
  font-weight:600;
}


/* v1.25 — Footer 2.0 mobile: match desktop bar background (avoid light blur wash) */
@media (max-width: 780px){
  .footer2.footer2bar{
    background: var(--overlay-deep);
    border-top: 1px solid var(--line);
    backdrop-filter: saturate(120%) blur(10px);
    -webkit-backdrop-filter: saturate(120%) blur(10px);
  }
}


/* v1.28 — footer-new (clean, explicit footer skin)
   Base: desktop Footer 1.0 look (overlay-deep + line + blur)
   Use: applied to Footer 2.0 on mobile via .footer-new class
*/

/* Default: footer-new does nothing unless shown by existing footer2 mobile logic */
.footer-new{
  background: var(--overlay-deep);
  border-top: 1px solid var(--line);
  backdrop-filter: saturate(120%) blur(10px);
  -webkit-backdrop-filter: saturate(120%) blur(10px);
  box-sizing: border-box;
  border-radius: 0;
  margin: 0;
}

/* Ensure full-width fixed bar without 100vw overflow issues */
@media (max-width: 780px){
  .footer-new{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: 100%;
    z-index: 9999;
    /* Safe-area + stable height */
    min-height: 72px;
    padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
  }

  /* Reserve space so content isn't covered */
  body{
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Layout inside: left group | right group */
  .footer-new .footer2__inner{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .footer-new .footer2__left{
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  .footer-new .footer2__right{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
    width: auto !important;
  }

  /* Hide legal on mobile (requested) */
  .footer-new .footer2__legal{ display:none !important; }

  .footer-new .footer2__nav{
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    gap: 10px !important;
  }
  .footer-new .footer2__sep{ opacity: .45; }

  /* Language pill (match desktop feel) */
  .footer-new .footer2__lang{
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    padding:6px 10px !important;
    border-radius:999px !important;
    border:1px solid rgba(255,255,255,.10) !important;
    background:rgba(255,255,255,.04) !important;
  }
  .footer-new .footer2__langbtn{
    appearance:none !important;
    border:0 !important;
    background:transparent !important;
    color:rgba(255,255,255,.72) !important;
    font:inherit !important;
    padding:0 !important;
  }
  .footer-new .footer2__langbtn.is-active{
    color:rgba(255,255,255,.95) !important;
    font-weight:600 !important;
  }

  /* Active page highlight (same as before) */
  .footer-new .footer2__navlink{
    opacity: .6;
    transition: opacity .2s ease, color .2s ease;
    text-decoration: none;
  }
  .footer-new .footer2__navlink.is-current{
    color: var(--accent-blue, #6BDCFF);
    opacity: .75;
  }
}


/* v1.29 — footer-new: ©LAZERKID.COM typography parity with desktop footer */
.footer-new .footer2__brandtext{
  font-family: inherit;              /* same font as site */
  font-weight: 600;                  /* match desktop footer */
  font-size: 12.5px;                 /* exact desktop size */
  letter-spacing: .02em;             /* subtle desktop tracking */
  color: rgba(255,255,255,.72);      /* same tone as desktop footer */
  line-height: 1;
}


/* v1.30 — footer-new: ES | EN buttons typography parity with desktop */
.footer-new .footer2__langbtn{
  font-family: inherit;
  font-weight: 400;                 /* remove bold */
  font-size: 12.5px;                /* match desktop footer */
  letter-spacing: .02em;             /* same tracking */
  color: rgba(255,255,255,.72);
  line-height: 1;
}

.footer-new .footer2__langbtn.is-active{
  font-weight: 600;                  /* desktop active state */
  color: rgba(255,255,255,.95);
}


/* v1.31 — footer-new: ES | EN exact desktop font-size parity */
.footer-new .footer2__langbtn{
  font-size: 12px;                  /* exact desktop size */
  line-height: 1;
}

.footer-new .footer2__langbtn.is-active{
  font-size: 12px;                  /* keep identical */
}


/* v1.32 — footer-new: lock typography scale (override mobile root/font scaling)
   Reason: mobile uses larger base font-size; we hard-lock footer typography to desktop values.
*/
.footer-new{
  font-size: 12.5px;      /* desktop footer base */
  line-height: 1;         /* neutral */
}

.footer-new *{
  font-size: inherit;     /* prevent rem/em upscaling */
}

/* Explicit locks for nav + lang (belt & suspenders) */
.footer-new .footer2__navlink{
  font-size: 12.5px;
  line-height: 1;
}

.footer-new .footer2__langbtn{
  font-size: 12px;
  line-height: 1;
}


/* v1.33 — Mobile: lock ©LAZERKID.COM size (prevent any text inflation) */
@media (max-width: 780px){
  .footer-new .footer2__brandtext{
    font-size: 12px !important;
    line-height: 1 !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}


/* v1.34 — footer-new: mobile total height parity with desktop (56px) */
@media (max-width: 780px){
  .footer-new{
    height: var(--footer-h) !important;
    min-height: var(--footer-h) !important;
    padding: 14px 0 !important; /* same as .footer.footerbar */
  }

  body{
    padding-bottom: var(--footer-h) !important;
  }
}


/* v1.35 — footer-new: perfect vertical centering inside 56px bar on mobile */
@media (max-width: 780px){
  .footer-new{
    height: var(--footer-h) !important;     /* 56px */
    min-height: var(--footer-h) !important;
    padding: 0 !important;                  /* remove padding to avoid squeezing */
    display: flex !important;
    align-items: center !important;         /* true vertical centering */
  }

  .footer-new .footer2__inner{
    width: 100% !important;
    height: var(--footer-h) !important;
    align-items: center !important;
  }

  /* Keep body offset correct */
  body{ padding-bottom: var(--footer-h) !important; }
}


/* v1.36 — Fix mobile mail break: keep email on one line */
@media (max-width: 780px){
  a[href^="mailto:"]{
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
  }
}


/* v1.37 — HARD FIX: prevent email line-break everywhere (Android '@' wrap) */
@media (max-width: 780px){
  a[href^="mailto:"],
  .contact-links a[href^="mailto:"],
  .cta-link[href^="mailto:"],
  .lab-cta-link[href^="mailto:"],
  .lab-cta-sub a[href^="mailto:"]{
    display: inline-block !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    max-width: none !important;
  }
}


/* v1.38 — no-break utility for email (prevents '@' line split on mobile) */
.no-break{
  display:inline-block;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}


/* v1.39 — FINAL: keep © LAZERKID.COM on ONE line on mobile */
@media (max-width: 780px){
  .footer-new .footer2__left,
  .footer-new .footer2__brandtext{
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
  }
}


/* =========================================================
   LZK v2.00 — Prototype video modal (HOME thumb #1 only)
   Independent from legacy .modal system (scoped with .proto-*)
========================================================= */
.proto-modal{position:fixed; inset:0; display:none; z-index:10000; padding:20px;}
.proto-modal[aria-hidden="false"]{display:flex; align-items:center; justify-content:center;}
.proto-modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter: blur(6px);}
.proto-modal__panel{position:relative; width:min(980px, 100%); background: rgba(10,10,10,.92); border:none; border-radius: 18px; box-shadow: var(--shadow-lift); overflow:hidden; max-height: calc(100vh - 40px);}
.proto-modal__close{position:absolute; top:10px; right:10px; width:40px; height:40px; border-radius:999px; border:none; background:rgba(255,255,255,.06); color:var(--fg); cursor:pointer; z-index:60;}

.proto-video-wrap{position:relative; background:#000;}
.proto-video-stage{position:relative; width:100%; background:rgba(255,255,255,.04); aspect-ratio:16/9;}
.proto-video-stage iframe{width:100%; height:100%; border:0; display:block;}

/* End overlay: blocks Vimeo end screen + provides your own controls */
.proto-end-overlay{position:absolute; inset:0; z-index:50; display:grid; place-items:center;}
.proto-end-overlay__bg{position:absolute; inset:0; background:rgba(0,0,0,1);}
.proto-end-overlay__controls{position:relative; z-index:51; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; padding:14px;}

/* Fullscreen hint button */
.proto-fs-hint{position:absolute; left:0; right:0; bottom:0; z-index:55; border:0; padding:14px 16px; background:rgba(255,255,255,.10); color:var(--fg); cursor:pointer;}

@media (max-width: 820px) and (orientation: portrait){
  .proto-modal{padding:14px;}
  .proto-modal__panel{border-radius:16px;}
}


/* Prototype hard-hide helpers */
.proto-end-overlay[hidden]{display:none !important;}
.proto-fs-hint[hidden]{display:none !important;}

/* =========================================================
   Mobile landscape fallback (pseudo-fullscreen)
   If the browser blocks requestFullscreen(), we still expand the panel
   to cover the viewport so the experience feels like fullscreen.
========================================================= */
.proto-modal.proto-landscape{padding:0;}
.proto-modal.proto-landscape .proto-modal__backdrop{background:#000; backdrop-filter:none;}
.proto-modal.proto-landscape .proto-modal__panel{
  width:100vw;
  height:100vh;
  max-height:none;
  border-radius:0;
}
.proto-modal.proto-landscape .proto-video-stage{aspect-ratio:auto; height:100vh;}
.proto-modal.proto-landscape .proto-video-stage iframe{height:100%;}

/* v2.11a — ultra-small mobile footer safety (prevent overlaps)
   Strategy:
   - For very small widths, allow the footer layout to wrap into 2 lines
   - Hide ©LAZERKID.COM (most expendable) to preserve nav + language
   - Increase reserved bottom space to avoid clipping
*/
@media (max-width: 420px){
  .footer-new .footer2__nav{ gap: 8px !important; }
  .footer-new .footer2__navlink{ font-size: 12px; }
}

@media (max-width: 340px){
  .footer-new{
    min-height: 104px;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  }
  body{
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .footer-new .footer2__inner{
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
  }
  .footer-new .footer2__left,
  .footer-new .footer2__right{
    flex: 1 1 100% !important;
    width: 100% !important;
    justify-content: center !important;
    margin-left: 0 !important;
  }
  .footer-new .footer2__nav{
    gap: 8px !important;
  }
}



/* Footer 2 — hide brand only on ultra small phones (true 320px) */
@media (max-width: 320px){
}

/* LZK responsive safeguard — ultra small phones */
@media (max-width: 320px) {
  .footerbar__brandtext {
    display: none !important;
  }
}


/* Fix alignment: Proceso de trabajo items */
.process-icons .pitem,
.process-icons .ptitle,
.process-icons .pdesc{
  text-align: left !important;
}



/* Ultra-small footer: hide brand text only at 320px and below */
@media (max-width: 320px){
  .footer-new .footer2__brandtext{ display:none !important; }
}


/* Proceso de trabajo: enforce left alignment (all items) */
#proceso .process-icons .pitem,
#proceso .process-icons .ptitle,
#proceso .process-icons .pdesc{
  text-align:left !important;
}


/* Footer 2 — iPhone SE (320px): keep ES/EN + nav on ONE LINE (no wrap) */
@media (max-width: 320px){
  /* keep the footer compact */
  .footer-new{
    min-height: 64px !important;
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body{
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* hide brand and force single-row layout */
  .footer-new .footer2__brandtext{ display: none !important; }

  .footer-new .footer2__inner{
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 10px !important;
    align-items: center !important;
  }

  /* neutralize 360px wrap rules on columns */
  .footer-new .footer2__left,
  .footer-new .footer2__right{
    flex: 0 0 auto !important;
    width: auto !important;
    justify-content: center !important;
    margin-left: 0 !important;
  }

  /* prevent line breaks inside controls */
  .footer-new .footer2__left,
  .footer-new .footer2__right,
  .footer-new .footer2__lang,
  .footer-new .footer2__nav{
    white-space: nowrap !important;
  }

  /* slightly tighten typography so it fits */
  .footer-new .footer2__langbtn{
    padding: 5px 10px !important;
    font-size: 12px !important;
  }
  .footer-new .footer2__navlink{
    font-size: 11px !important;
  }
  .footer-new .footer2__sep{
    margin: 0 4px !important;
  }
}

/* --- Gloubo Mola: dead thumbs (radical reset) --- */
.gm-dead{cursor:default;pointer-events:auto;}
.gm-dead:hover,.gm-dead:active,.gm-dead:focus{transform:none !important;filter:none !important;outline:none !important;}


/* === EDGE-TO-EDGE IMAGES (v3.0) === */
.brand__card,
.brand__asset,
.brand__big,
.brand__media,
.gm-brand-item {
  padding: 0 !important;
  overflow: hidden;
}

.brand__card img,
.brand__asset img,
.brand__big img,
.brand__media img,
.gm-brand-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}