/* LZK_LUNA app.css (base + layout + components + pages + modes + modals) */

/* === site.css (expanded) === */
/* LZK_LUNA: site.css expanded (no @import) */

/* === components/00-utilities.css === */
.u-flex-end {display: flex;
  justify-content: flex-end;
}


/* === components/01-base.css === */
* {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;
}


/* === components/02-layout.css === */
.container {max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

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: var(--w-92);
  max-width: 70ch;
}


/* === components/03-components.css === */
.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);
}

/* Icon-only buttons (SVG) */
.btn .icon {width: 18px;
  height: 18px;
  display: block;
}

.topbar {position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  background: var(--topbar-bg);
  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: 12px;
  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);
}


/* === components/04-navigation.css === */
.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);
  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: var(--b-78);
  color: var(--w-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,
var(--w-16),
transparent);
  opacity: .9;
  margin: 22px 0;
}


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

.footerbar__inner {display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.footerbar__left,
.footerbar__right {display: flex;
  align-items: center;
  gap: 14px;
}

.footerbar__brandtext {font-weight: 600;
}

.footerbar__legal {display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 0;
}

.footerbar__nav {display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 10px;
}


.footerbar__legal {gap: 0;
}

.footerbar__sep {color: var(--w-25);
}

.footerbar a {color: var(--w-74);
  text-decoration: none;
  transition: opacity .15s ease,
color .15s ease;
}

.footerbar a:hover {color: var(--w-95);
}

.footerbar a:focus-visible {outline: 2px solid var(--w-22);
  outline-offset: 4px;
  border-radius: 10px;
}

.footerbar__legal a {color: var(--w-62);
}

.footerbar__legal a + a::before {content: "\2022";
  display: inline-block;
  margin: 0 6px;
  color: var(--w-36);
  opacity: .75;
  
}

.footerbar__lang,
.footer2__lang {display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--footer-lang-border);
  background: var(--footer-lang-bg);
  -webkit-text-size-adjust: 100%;
}

.footerbar__langbtn {appearance: none;
  border: 0;
  background: transparent;
  color: var(--w-72);
  font: inherit;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.footerbar__langbtn:hover,
.footerbar__langbtn.is-active {font-weight: 600;
}


/* === components/99-media.css === */
.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;
}

:root {--footer-h: 56px;
  --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);
}

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

.footer {position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--footer-h);
  background: var(--topbar-bg);
  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 a {color: var(--muted);
}

.footer a:hover {color: var(--fg);
}

.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),
var(--b-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);
}

.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);
}

.service-card,
.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);
}

.btn,
.nav-cta {transition: transform .18s var(--ease),
filter .18s var(--ease),
background .18s var(--ease),
border-color .18s var(--ease);
}

a {text-underline-offset: 3px;
}

a:hover {text-decoration-color: var(--w-35);
}

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

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

.services-menu {display: none !important;
}

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

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

.reel-embed {position: relative;
  width: 100%;
  background: var(--glass-bg-strong);

  padding-top: 56.25%;
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  margin-top: 16px;
}

.reel-embed iframe {position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 1;
}


.reel-embed::before {content: "";
  position: absolute;
  inset: 0;
  background: var(--glass-bg-strong);
  z-index: 0;
  opacity: 1;
  transition: opacity .25s ease;
}

.reel-embed.is-loaded::before {opacity: 0;
}

.reel-embed .reel-skeleton {position: absolute;
  inset: 0;
  background: var(--glass-bg-strong);
  z-index: 2;
  opacity: 1;
  transition: opacity .25s ease;
}

.reel-embed.is-loaded .reel-skeleton {opacity: 0;
  
}

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

.reel-frame iframe {position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

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

.lz-split {display: grid;
  gap: 24px;
  align-items: start;
}

.lz-split__media {display: flex;
  justify-content: flex-end;
}

.lz-helmet{
  max-width: 200px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 35px rgba(0,0,0,0.25));
}


.lz-band {margin-top: 26px;
  padding: 44px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: radial-gradient(1200px 500px at 20% 40%,
var(--c-cyan-57-215-255-14),
transparent 60%),
radial-gradient(900px 400px at 80% 20%,
var(--c-magenta-255-59-209-10),
transparent 55%),
linear-gradient(180deg, rgba(246,246,244,.65), rgba(246,246,244,.65)),
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;
}

#presentacion > .container {padding-top: 0;
  padding-bottom: clamp(28px,
4.2vw,
56px);
}

#presentacion .lz-split--top {align-items: center;
}

#presentacion .lz-band {margin-top: 0;
}

#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-carousel[data-exp-ready="0"] .exp-viewport {opacity: 0;
  visibility: hidden;
}

#trayectoria .exp-carousel[data-exp-ready="1"] .exp-viewport {opacity: 1;
  visibility: visible;
  transition: opacity .18s ease;
}

#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: var(--exp-card-bg);
  border-radius: var(--exp-card-radius);
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#trayectoria .exp-img {display: block;
  width: 100%;
  height: 100%;
  max-width: 90%;
  max-height: 80%;
  object-fit: contain;
}

#trayectoria .exp-nav {width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--w-06);
  border: 1px solid var(--w-14);
  color: var(--c-white);
  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: var(--w-10);
}

#trayectoria .exp-nav:active {transform: translateY(1px);
}


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

.footerbar__brandtext {font-weight: 400;
  text-decoration: none;
  
}

.footerbar__brandtext:hover {text-decoration: none;
}

.footerbar__brandtext:hover,
.footerbar__brandtext:active,
.footerbar__brandtext:focus {text-decoration: none;
  outline: none;
}

.cta-link {color: var(--accent,
var(--c-blue-4da3ff));
  text-decoration: none;
}

.cta-link:hover {text-decoration: underline;
}

html,
body {overflow-x: hidden;
}





.footerbar__navlink {opacity: .6;
}

.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;
}
















.lab-cta-bg::after {content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right,
var(--w-35) 1px,
transparent 1px),
linear-gradient(to bottom,
var(--w-35) 1px,
transparent 1px);
  background-size: 64px 64px;
  opacity: .35;
  
}

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

.footerbar__navlink.is-current {opacity: .9;
}

.footer2 {display: none;
}

.footer.footerbar,
.footer2.footer2bar {backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.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__brandtext {font-weight: 600;
}

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

.footer2__langbtn {appearance: none;
  border: 0;
  background: transparent;
  color: var(--w-72);
  font: inherit;
  padding: 0;
  cursor: pointer;
}

.footer2__langbtn:hover {font-weight: 600;
}

.footer2__langbtn.is-active {font-weight: 600;
}

.footer-new {background: var(--topbar-bg);
  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;
  font-size: 12.5px;
  line-height: 1;
}

.footer-new .footer2__brandtext {font-family: inherit;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--w-72);
  line-height: 1;
}

.footer-new .footer2__langbtn {font-family: inherit;
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--w-72);
  line-height: 1;
}

.footer-new .footer2__langbtn.is-active {font-weight: 600;
  color: var(--w-95);
  font-size: 12px;
}

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

.footer-new * {font-size: inherit;
}

.footer-new .footer2__navlink {font-size: 12.5px;
  line-height: 1;
}

.no-break {display: inline-block;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.process-icons .pitem,
.process-icons .ptitle,
.process-icons .pdesc {text-align: left !important;
}

#proceso .process-icons .pitem,
#proceso .process-icons .ptitle,
#proceso .process-icons .pdesc {text-align: left !important;
}

.brand__assets .brand__asset,
.brand__assets .gm-brand-item,
.gm2-assets .gm-brand-item {padding: 0;
  overflow: hidden;
}

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

.gm-square {position: relative;
  overflow: hidden;
}

.gm-square__overlay {position: absolute;
  inset: 0;
  background: var(--b-75);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transition: opacity .2s ease;
  
}

.gm-square:hover .gm-square__overlay,
.gm-square.is-active .gm-square__overlay {opacity: 1;
}

.gm-square__overlay-text {padding: 18px 16px;
  text-transform: uppercase;
  line-height: 1.25;
}

.gm-square__l1 {font-weight: 700;
  letter-spacing: .04em;
}

.gm-square__l2,
.gm-square__l3 {font-weight: 400;
  letter-spacing: .02em;
}

@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 (max-width: 780px) {.footer.footerbar,
.footer2__legal {display: none !important;
}

.footer2 {display: block;
  position: static;
  height: auto;
  padding: 14px 0;
}

.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;
}

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

.footer2__sep {opacity: .45;
}

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

.footer2__navlink.is-current {color: var(--accent-blue,
var(--c-cyan-6bdcff));
  opacity: .75;
}
}

@media (max-width: 780px) {.footer2 {display: block !important;
}

: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));
}

.footer2__inner {display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

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

@media (max-width: 780px) {.footer2.footer2bar {background: var(--topbar-bg);
  border-top: 1px solid var(--line);
  backdrop-filter: saturate(120%) blur(10px);
  -webkit-backdrop-filter: saturate(120%) blur(10px);
}
}

@media (max-width: 780px) {.footer-new {position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  max-width: 100%;
  z-index: 9999;
  min-height: 72px;
  padding: 14px 0 calc(14px + env(safe-area-inset-bottom,
0px));
}

body {padding-bottom: calc(72px + env(safe-area-inset-bottom,
0px)) !important;
}

.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;
}

.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;
}

.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 var(--w-10) !important;
  background: var(--w-04) !important;
}

.footer-new .footer2__langbtn {appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--w-72) !important;
  font: inherit !important;
  padding: 0 !important;
}

.footer-new .footer2__langbtn.is-active {color: var(--w-95) !important;
  font-weight: 600 !important;
}

.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,
var(--c-cyan-6bdcff));
  opacity: .75;
}
}

@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%;
}

.footer-new {height: var(--footer-h) !important;
  min-height: var(--footer-h) !important;
  padding: 14px 0 !important;
}

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

@media (max-width: 780px) {.footer-new {height: var(--footer-h) !important;
  min-height: var(--footer-h) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

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

a[href^="mailto:"] {white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}
}

@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;
}
}

@media (max-width: 780px) {.footer-new .footer2__left,
.footer-new .footer2__brandtext {white-space: nowrap !important;
  flex-wrap: nowrap !important;
}
}

.nav-fs-btn {display: none;
  -webkit-tap-highlight-color: transparent;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--w-65);
  cursor: pointer;
}

@media (max-width: 980px) {.nav-fs-btn {display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 8px;
}
}

.nav-fs-btn .fs-ic-wrap {position: relative;
  width: 24px;
  height: 24px;
  display: block;
  transition: transform .25s ease;
}

.nav-fs-btn svg {position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity .25s ease,
transform .25s ease;
}

.nav-fs-btn .fs-ic--enter {opacity: 1;
}

.nav-fs-btn .fs-ic--exit {opacity: 0;
  transform: scale(.98);
}

.nav-fs-btn:hover {color: var(--w-92);
}

.nav-fs-btn:hover .fs-ic-wrap {transform: scale(1.05);
}

.nav-fs-btn:active .fs-ic-wrap {transform: scale(.95);
}

.nav-fs-btn.is-fs-active {color: var(--c-white);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 12px;
}

.nav-fs-btn.is-fs-active .fs-ic--enter {opacity: 0;
}

.nav-fs-btn.is-fs-active .fs-ic--exit {opacity: 1;
  transform: scale(1);
}

html.fs-mode,
body.fs-mode {overflow: auto !important;
  height: auto;
}

.fs-hint {position: fixed;
  z-index: 99999;
  background: rgba(0,
0,
0,
.88);
  color: #fff;
  border: 1px solid rgba(255,
255,
255,
.18);
  border-radius: 12px;
  padding: 7px 10px;
  font-size: 11px;
  line-height: 1.15;
  letter-spacing: .2px;
  box-shadow: none;
  opacity: 0;
  transform: translateY(-4px);
  
  transition: opacity .22s ease,
transform .22s ease;
  max-width: min(220px,
calc(100vw - 24px));
}

.fs-hint.is-visible {opacity: 1;
  transform: translateY(0);
}

@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;
}
}

@media (max-width:760px) {:root {--footer-h: 76px;
}

.footer .container {flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
}
}

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

@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;
}
}

@media (max-width: 700px) {}

@media (max-width: 480px) {}

@media (max-width: 768px) {.footerbar__navlink {pointer-events: auto;
  cursor: pointer;
  opacity: .9;
}

#presentacion .lz-split__media {justify-content: center;
}
}

@media (max-width: 560px) {.process-icons {grid-template-columns: repeat(2,
minmax(0,
1fr));
  gap: 12px;
}

.process-icons .ptitle {font-size: 16px;
}

.process-icons .pdesc {font-size: 14px;
  line-height: 1.4;
}
}

@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;
}

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

#trayectoria .exp-card {height: 84px;
  border-radius: var(--exp-card-radius);
}

#trayectoria .exp-img {width: 100%;
  height: 100%;
  max-width: 92%;
  max-height: 86%;
}
}

@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,
#contacto .contact-copy h2,
#contacto .contact-copy p {text-align: left !important;
}
}

@media (max-width: 820px) and (max-aspect-ratio: 1/1) {}

@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;
}
}

@media (max-width: 320px) {.footerbar__brandtext {display: none !important;
}
}

@media (max-width: 320px) {.footer-new .footer2__brandtext {display: none !important;
}
}

@media (max-width: 320px) {.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;
}

.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;
}

.footer-new .footer2__left,
.footer-new .footer2__right {flex: 0 0 auto !important;
  width: auto !important;
  justify-content: center !important;
  margin-left: 0 !important;
}

.footer-new .footer2__left,
.footer-new .footer2__right,
.footer-new .footer2__lang,
.footer-new .footer2__nav {white-space: nowrap !important;
}

.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;
}
}

.ag-modal.is-open,
.modal.is-open {display: flex;
  align-items: center;
  justify-content: center;
}

body.shell {min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.shell-main {flex: 1 1 auto;
}

.shell-frame {width: 100%;
  height: 100%;
  min-height: calc(100vh - 120px);
  border: 0;
  display: block;
}

body.embed-shell .topbar,
body.embed-shell .footer,
body.embed-shell .footer2,
body.embed-shell .footerbar,
body.embed-shell .footer2bar,
html[data-embed="1"] body .topbar,
html[data-embed="1"] body .footer,
html[data-embed="1"] body .footer2,
html[data-embed="1"] body .footerbar,
html[data-embed="1"] body .footer2bar {display: none !important;
}

body.embed-shell,
html[data-embed="1"] body {padding-top: 0 !important;
  padding-bottom: 0 !important;
  overscroll-behavior-y: none !important;
  overflow-x: hidden !important;
  background-image: none !important;
}

body.embed-shell main,
html[data-embed="1"] body main {padding-top: 0 !important;
}

html:has(body.embed-shell),
html[data-embed="1"] {
  overscroll-behavior-y: none;
}

.portfolio-item.has-thumb {background-size: cover;
  background-position: center;
  transition: transform .22s ease,
background-size .22s ease;
}

.portfolio-item.has-thumb:hover {background-size: 108%;
}

html.lzk-i18n-preload body {opacity: 0;
}

html.lzk-i18n-ready body {opacity: 1;
  transition: opacity .12s linear;
}

/* =========================================================
   LAPTOP MODE (Desktop width + low usable height)
   Goal: same layout,
less vertical air. Does NOT affect Mobile/Tablet/Desktop.
   Trigger: width >= 1024px AND height <= 820px
   ========================================================= */
@media (min-width: 1024px) and (max-height: 820px) {:root{--topbar-h: 52px;
    --footer-h: 44px;
  }

  body{padding-bottom: var(--footer-h);
    font-size: 15px;
  }

  /* Global vertical rhythm */
  .section{padding: clamp(22px,
2.8vw,
44px) 0;
  }
  .section:first-of-type{padding-top: clamp(34px,
3.8vw,
54px);
  }

  /* Make heroes shorter (same structure) */
  .hero{padding: clamp(44px,
5vw,
64px) 0 clamp(22px,
2.6vw,
34px);
  }
  .hero-kicker{margin: 0 0 8px; }
  .hero-divider{height: 1px !important;
  background: rgba(255,
255,
255,
.22);
}
  /* Laptop: slightly smaller hero typography across Home / Pro / Lab */
  .hero h1{font-size: clamp(34px,
4.2vw,
46px);
    line-height: 1.03;
    margin: 0 0 10px;
  }
  .hero h1::after{margin-top: 10px; }
  .hero-sub{font-size: 16.5px;
    line-height: 1.35;
    margin: 0 0 8px;
  }
  .hero-desc{font-size: 14.25px; line-height: 1.55; }
  .hero-cta{margin-top: 16px; gap: 10px; }

  /* Nav + footer slightly tighter */
  .topbar-inner{gap: 12px; }
  .logo{padding: 7px 9px; }
  .nav a,
.nav button{padding: 6px 9px;
    font-size: 13px;
  }
  .nav-cta{padding: 8px 12px; }

  .footer{height: var(--footer-h); }
  .footer .container{gap: 8px; }
  .footer,
.footer a{font-size: 12px; }
}



/* === modals.css === */
.ag-modal {position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
  background: var(--b-75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 2.5rem 1.5rem;
}

.ag-modal.is-open {display: flex;
  align-items: center;
  justify-content: center;
}

.ag-modal[aria-hidden="false"] {display: flex;
  align-items: center;
  justify-content: center;
}

.ag-modal__panel {position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: -webkit-fit-content;
  width: fit-content;
  min-width: min(320px,
calc(100vw - 3rem));
  max-width: min(800px,
calc(100vw - 3rem));
  border-radius: 24px;
  overflow: hidden;
  background: var(--c-black-0f);
  box-shadow: var(--shadow-modal);
}

.ag-modal__stage {width: -webkit-fit-content;
  width: fit-content;
  min-height: 160px;
  max-width: 100%;
  max-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-black);
}

.ag-modal__stage img {width: auto;
  max-width: min(800px,
calc(100vw - 3rem));
  height: auto;
  max-height: 72vh;
  object-fit: contain;
  display: block;
  background: var(--c-black);
}

.ag-modal__bar {display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: var(--c-black-1f);
  border-top: 1px solid var(--w-06);
}

.ag-modal__left {display: flex;
  gap: 10px;
}

.ag-modal__right {display: flex;
}

.ag-btn {transition: transform .18s ease,
background .18s ease,
border-color .18s ease,
filter .18s ease;
  height: 44px;
  width: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--w-06);
  border: 1px solid var(--w-10);
  color: var(--c-white);
  cursor: pointer;
  font-family: inherit;
  font-size: 1.15rem;
  line-height: 1;
}

.ag-btn:hover {background: var(--w-10);
  border-color: var(--w-22);
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.ag-btn--close {width: auto;
  min-width: auto;
  padding: 0 18px;
  border-radius: 14px;
  font-size: .95rem;
  letter-spacing: .01em;
}

/* SVG icons inside modal buttons */
.ag-btn .icon {width: 18px;
  height: 18px;
  display: block;
}

@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) and (pointer: coarse) {.ag-modal__panel {display: inline-flex;
  flex-direction: column;
  width: -webkit-fit-content;
  width: fit-content;
  max-width: calc(100vw - 3rem);
}

.ag-modal__stage {width: -webkit-fit-content;
  width: fit-content;
  min-height: 160px;
  max-width: 100%;
}

.ag-modal__stage img {width: auto;
  max-width: calc(100vw - 3rem);
  height: auto;
  max-height: 72vh;
}

.ag-modal__bar {width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
}

.modal {position: fixed;
  inset: 0;
  display: none;
  z-index: 20000;
  padding: 20px;
}

.modal.is-open,
.modal[aria-hidden="false"] {display: flex;
  align-items: center;
  justify-content: center;
}

.modal__backdrop {position: absolute;
  inset: 0;
  background: var(--b-72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal__panel {position: relative;
  width: min(980px,
100%);
  background: var(--ink-92);
  border: none;
  border-radius: 18px;
  overflow: hidden;
  max-height: calc(100vh - 40px);
  box-shadow: var(--shadow-modal);
}

.modal__frame {position: relative;
  aspect-ratio: 16/9;
  background: var(--c-black);
  font-size: 0;
  line-height: 0;
}

.modal__frame iframe {position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--c-black);
}

.lab-page .modal__frame {overflow: hidden;
}

.lab-page .modal__frame iframe {transform: scale(1.01);
  transform-origin: center center;
}

.gm2-modal {position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.gm2-overlay {position: absolute;
  inset: 0;
  background: var(--b-70);
}

.gm2-dialog {position: relative;
  margin: auto;
  max-width: 1100px;
  width: calc(100% - 50px);
  max-height: calc(100% - 50px);
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 25px;
  border-radius: 14px;
  background: var(--c-black-0c);
  box-shadow: 0 10px 40px var(--b-50);
  overflow: hidden;
}

.gm2-content {display: flex;
  flex-direction: column;
  gap: 25px;
  overflow: auto;
  padding-top: 10px;
}

.gm2-grid {display: grid;
  grid-template-columns: 300px 1fr;
  gap: 25px;
  align-items: start;
}

.gm2-card {border: 1px solid var(--w-10);
  border-radius: 14px;
  background: var(--w-03);
  padding: 14px;
}

.gm2-logo img {width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.gm2-big img {width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.gm2-right {display: flex;
  flex-direction: column;
  gap: 25px;
}

.gm2-video {padding: 0;
  overflow: hidden;
}

.gm2-video-ratio {position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--c-black);
}

.gm2-video-ratio iframe {position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--c-black);
}

.gm2-assets {display: grid;
  grid-template-columns: repeat(3,
1fr);
  gap: 25px;
}

.gm2-assets img {width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  object-fit: cover;
}

.gm2-footer {display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.gm2-nav {display: flex;
  gap: 10px;
}

.gm2-nav__btn {width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--w-12);
  background: var(--w-04);
  color: var(--c-white);
  font-size: 22px;
  cursor: pointer;
}

.brand__assets .brand__asset,
.brand__assets .gm-brand-item,
.gm2-assets .gm-brand-item {padding: 0;
  overflow: hidden;
}

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

.gm2-assets .gm2-card {padding: 0;
  overflow: hidden;
}

.gm2-card img {display: block;
}

.gm2-assets img {border-radius: 0;
}

.gm2-video,
.gm2-video-ratio {border-radius: 0;
}

@media (max-width:720px) {.ag-modal {padding: 2rem 1rem;
}

.ag-modal__bar {padding: 12px 12px;
}

.ag-btn {height: 42px;
  min-width: 42px;
}
}

@media (max-width:900px) {.gm2-dialog {width: calc(100% - 40px);
  max-height: calc(100% - 40px);
  padding: 20px;
  gap: 20px;
}

.gm2-content {gap: 20px;
}

.gm2-grid {grid-template-columns: 1fr;
}

.gm2-left {display: none;
}

.gm2-assets {grid-template-columns: 1fr;
  gap: 20px;
}
}

@media (max-width: 640px) {#video-modal.is-open,
#video-modal[aria-hidden="false"],
.gm2-modal.is-open {padding: 16px;
}

#video-modal .modal__panel,
.gm2-modal.is-open .gm2-dialog {position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,
-50%);
  margin: 0;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 32px);
  overflow: hidden;
}
}

.ag-modal.is-open,
.modal.is-open {align-items: center;
  justify-content: center;
  display: flex;
}

@media (min-width: 600px) {.modal[aria-hidden="false"] .modal__panel,
.modal.is-open .modal__panel {position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,
-50%);
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
}
}

@media (min-width: 600px) and (max-width: 1024px) {#video-modal.is-open .modal__panel,
#video-modal[aria-hidden="false"] .modal__panel {position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,
-50%);
  margin: 0;
  max-height: calc(100vh - 40px);
}
}

@media (width: 1194px) and (height: 834px) and (orientation: landscape) {.ag-modal__panel {width: fit-content;
  max-width: calc(100vw - 3rem);
}

.ag-modal__stage {width: -webkit-fit-content;
  width: fit-content;
  min-height: 160px;
  max-width: calc(100vw - 3rem);
}

.ag-modal__stage img {width: auto;
  max-width: calc(100vw - 3rem);
  max-height: 72vh;
}

.ag-modal__bar {width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
}

.modal__footer {display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  padding: 14px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

.modal__nav {display: flex;
  align-items: center;
  gap: 10px;
}

.modal__navbtn {-webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 14px;
  border: 0;
  background: var(--panel-bg);
  color: var(--fg);
  cursor: pointer;
  transition: transform .08s ease,
background .15s ease,
border-color .15s ease,
filter .15s ease;
}

.modal__navbtn:hover {transform: translateY(-1px);
  background: var(--glass-bg-strong);
  filter: brightness(1.05);
}

.modal__navbtn:active {transform: translateY(1px);
}

.modal__footer .btn:hover {transform: translateY(-1px);
  filter: brightness(1.05);
}

/* Close (X) button in video modals: match other footer controls (same chip style) */
.modal__footer .btn[data-close="1"] {cursor: pointer;
  /* align with .modal__navbtn sizing */
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 14px;
  border: 0;
  background: var(--panel-bg);
  color: var(--fg);
  transition: transform .08s ease,
background .15s ease,
border-color .15s ease,
filter .15s ease;
}

.modal__footer .btn[data-close="1"]:hover {transform: translateY(-1px);
  background: var(--glass-bg-strong);
  filter: brightness(1.05);
}

.modal__footer .btn[data-close="1"]:active {transform: translateY(1px);
}

.modal__footer #pro-freelance-modal-project:hover {color: var(--accent,
var(--c-blue-4da3ff));
}

.modal__meta {display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: right;
  color: var(--muted);
  font-size: 14px;
}



/* PRO / Freelance modal — keep icon-only buttons (labels remain in markup for a11y/i18n,
but are not shown). */
#pro-freelance-modal .btn .btn-label{display:none !important;
}
#pro-freelance-modal .btn{display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}


/* === index-page.css === */
:root {--c-black: var(--c-black);
  --c-white: var(--c-white);
  --c-cyan: var(--c-cyan-39d7ff);
  --c-cyan-soft: var(--c-cyan-8fe9ff);
  --c-magenta: var(--c-magenta-ff3bd1);
  --bg: var(--c-black);
  --fg: var(--c-white);
  --muted: var(--w-72);
  --muted2: var(--w-52);
  --line: var(--w-14);
  --soft: var(--w-08);
  --w-04: var(--w-04);
  --w-05: var(--w-05);
  --w-06: var(--w-06);
  --w-08: var(--w-08);
  --w-10: var(--w-10);
  --w-14: var(--w-14);
  --w-22: var(--w-22);
  --b-45: var(--b-45);
  --b-55: var(--b-55);
  --b-65: var(--b-65);
  --b-88: var(--b-88);
  --b-96: var(--b-96);
  --panel-bg: var(--w-06);
  --pill-bg: var(--w-04);
  --hairline: var(--line);
  --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);
  --max: 1100px;
  --pad: 22px;
  --radius: 18px;
  --radius2: 12px;
  --topbar-h: 64px;
  --shadow: 0 8px 30px var(--b-45);
  --shadow-elev: var(--shadow);
  --shadow-lift: 0 20px 60px var(--b-55);
  --font: ui-sans-serif,
system-ui,
-apple-system,
Segoe UI,
Roboto,
Helvetica,
Arial,
"Apple Color Emoji",
"Segoe UI Emoji";
  --fs-h1: clamp(40px,
5vw,
52px);
  --fs-h2: clamp(26px,
3vw,
32px);
  --fs-h3: 18px;
  --fs-body: 16px;
  --fs-lead: 18px;
  --lh-tight: 1.15;
  --lh-normal: 1.45;
  --lh-loose: 1.65;
  --ease-default: cubic-bezier(0.4,
0,
0.2,
1);
  --t-fast: 0.2s;
  --t-med: 0.35s;
  --t-slow: 0.6s;
  --z-modal: 9000;
  --z-overlay: 8000;
  --z-nav: 7000;
  --border-subtle: 1px solid var(--w-12);
}

* {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: 0.15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  font-feature-settings: "kern" 1,
"liga" 1;
}

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;
}

.section {padding: clamp(56px,
7vw,
92px) 0;
}

.section h2 {font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  margin: 0 0 14px;
  letter-spacing: 0.2px;
}

.section p {margin: 10px 0;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
}

.section .container.narrow p + p {margin-top: 12px;
}

.section .container.narrow h2 + p {margin-top: 10px;
}

.section .container.narrow p + .lead {font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--fg);
  opacity: 0.92;
}

.lead {font-size: clamp(16px,
1.25vw,
19px);
  line-height: 1.55;
  color: var(--fg);
  opacity: 0.92;
  max-width: 70ch;
}

.section-intro {color: var(--muted);
  max-width: 70ch;
}

.topbar {position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  background: var(--topbar-bg);
  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: 12px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.logo {font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
}

.logo:hover {background: var(--soft);
}

.nav {display: flex;
  align-items: center;
  gap: 10px;
}

.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);
  border: none;
  background: var(--w-06);
}

.nav-cta:hover {background: var(--w-10);
}

.nav-services {position: relative;
}

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

.topbar .nav {position: relative;
}

.services-menu {position: absolute;
  top: calc(var(--topbar-h) - 6px);
  right: calc(var(--pad));
  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(--w-10);
}

.services-menu small {color: var(--muted2);
}

main {padding-top: var(--topbar-h);
}

.hero {position: relative;
  padding: clamp(84px,
9vw,
120px) 0 clamp(56px,
6vw,
84px);
  overflow: hidden;
}

.hero::before {content: "";
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 520px;
  background: radial-gradient(closest-side,
var(--w-10),
var(--w-00));
  
  filter: blur(8px);
  opacity: 0.9;
}

.hero::after {content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
transparent,
var(--w-16),
transparent);
  opacity: 0.9;
}

.hero .container {position: relative;
}

.hero-kicker {display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  border: none;
  background: var(--w-05);
  color: var(--w-78);
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.hero-divider{height: 1px !important;
  background: rgba(255,
255,
255,
.22);
}

.hero h1 {font-size: var(--fs-h1);
  line-height: 1.02;
  margin: 0 0 18px;
  letter-spacing: -0.6px;
}

.hero h1::after {content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin-top: 18px;
  background: linear-gradient(90deg,
var(--w-60),
var(--w-00));
  opacity: 0.6;
}

.hero-sub {font-size: var(--fs-lead);
  line-height: 1.4;
  margin: 0 0 14px;
  color: var(--fg);
  opacity: 0.94;
  max-width: 68ch;
}

.hero-desc {max-width: 72ch;
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
}

.hero-cta {display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.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(--w-06);
  transition: transform 0.08s ease,
background 0.15s ease,
border-color 0.15s ease;
  min-height: 44px;
  cursor: pointer;
}

.btn:hover {background: var(--w-10);
  border-color: var(--w-22);
}

.btn:active {transform: translateY(1px);
}

.btn.primary {background: var(--w-14);
}

.btn.primary:hover {background: var(--w-18);
}

.btn.secondary {background: transparent;
}

body.home .btn.secondary {background: transparent;
}

.services-grid {display: grid;
  grid-template-columns: repeat(4,
minmax(0,
1fr));
  gap: 24px;
  margin-top: 22px;
}

.service-card {padding: 22px;
  border-radius: var(--radius);
  background: var(--w-04);
  border: 1px solid var(--line);
}

.service-card h3 {font-size: var(--fs-h3);
  margin: 0 0 12px;
  font-weight: 600;
}

.service-card p {font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

.section.services .services-grid {display: grid !important;
  grid-template-columns: repeat(4,
minmax(0,
1fr)) !important;
  gap: 24px !important;
}

.process-icons {margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4,
minmax(0,
1fr));
  gap: 24px;
  align-items: start;
}

.pitem {text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.picon {width: 54px;
  height: 54px;
  border-radius: 999px;
  background: var(--w-04);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 6px;
}

.picon svg {width: 26px;
  height: 26px;
  color: var(--w-78);
}

.ptitle {font-size: 15px;
  letter-spacing: 0.2px;
  color: var(--fg);
  margin: 0 0 6px;
  font-weight: 600;
}

.pdesc {font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

#proceso .process-icons .ptitle,
#proceso .process-icons .pdesc {width: 100%;
  text-align: left;
}

.section.process .pitem {margin: 0 !important;
}

.section.process .pdesc {font-size: 0.78rem;
  line-height: 1.35;
  max-width: 22ch;
  margin-inline: auto;
}

.portfolio-grid {display: grid;
  grid-template-columns: repeat(3,
minmax(0,
1fr));
  gap: 14px;
  margin-top: 18px;
}

.portfolio-item {height: 220px;
  border-radius: 18px;
  border: none;
  display: block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
}

.portfolio-item.has-thumb::before {content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
var(--b-00) 55%,
var(--b-35) 100%);
  
}

.portfolio-modal::before,
.portfolio-modal::after {content: none !important;
  display: none !important;
}

.portfolio-modal {cursor: pointer;
}

.section.contact.contact-band {border-top: 0;
  border-bottom: 0;
  margin-top: 0;
  padding: clamp(56px,
7vw,
92px) 0;
}

.contact-grid {display: grid;
  grid-template-columns: 0.9fr 1.5fr;
  gap: 28px;
  align-items: center;
}

.contact-visual {display: flex;
  justify-content: flex-end;
}

.contact-visual img {width: min(320px,
100%);
  height: auto;
  filter: drop-shadow(0 18px 50px var(--b-55));
}

.contact-copy h2 {font-size: clamp(28px,
4vw,
42px);
  line-height: 1.1;
  margin: 0 0 10px;
}

.contact-copy p {margin-top: 10px;
}

.contact-links {margin-top: 14px;
}

.contact-links a {color: var(--accent);
}

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

.modal__frame {aspect-ratio: 16/9;
  width: 100%;
  background: var(--w-04);
}

@media (max-width: 1200px) {.process-icons {grid-template-columns: repeat(2,
minmax(0,
1fr));
}

.section.process .process-icons {grid-template-columns: repeat(2,
minmax(0,
1fr));
}
}

@media (max-width: 1100px) {.section.services .services-grid {grid-template-columns: repeat(2,
minmax(0,
1fr)) !important;
}
}

@media (max-width: 980px) {.services-grid {grid-template-columns: repeat(2,
minmax(0,
1fr));
}

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

@media (max-width: 700px) {.contact-grid {grid-template-columns: 1fr;
  gap: 12px;
  text-align: center;
}

.contact-visual {justify-content: center;
  order: -1;
}
}

@media (max-width: 640px) {.section.services .services-grid {grid-template-columns: 1fr !important;
}

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

.section.process .process-icons {grid-template-columns: repeat(2,
minmax(0,
1fr));
}

.pitem {text-align: left;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  align-items: center;
}

.picon {margin: 0;
}

.ptitle {margin: 0 0 4px;
}
}

@media (max-width: 620px) {.nav a {display: none;
}

.nav a.nav-cta {display: inline-flex;
}

.services-menu {right: var(--pad);
}

.services-grid {grid-template-columns: 1fr;
}

.portfolio-grid {grid-template-columns: 1fr;
}
}

@media (min-width: 1024px) and (max-height: 820px) {/* HOME: Favorites should feel like LAB/LC (16:9 thumbs,
tighter) */
  #portfolio > .container{max-width: 860px;
  }
  #portfolio .portfolio-grid{gap: 12px;
    margin-top: 14px;
  }
  #portfolio .portfolio-item{height: auto !important;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
  }
}


/* Desktop alignment: keep process items coherent when the section uses the wide rail */
@media (min-width: 1200px){#proceso .process-icons{gap: 22px;
  }
  #proceso .pitem{align-items: flex-start;
    text-align: left;
  }
  #proceso .picon{margin-left: 0;
    margin-right: 0;
  }
  #proceso .pdesc{max-width: none;
    margin-inline: 0;
  }
  #proceso .ptitle{margin-bottom: 4px;
  }
}


/* === lab-inline.css === */
:root {--bg: var(--c-black);
  --fg: var(--c-white);
  --muted: var(--w-72);
  --muted2: var(--w-52);
  --line: var(--w-14);
  --soft: var(--w-08);
  --max: 1100px;
  --pad: 22px;
  --radius: 18px;
  --radius2: 12px;
  --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(40px,
5vw,
52px);
  --fs-h2: clamp(26px,
3vw,
32px);
  --fs-h3: 18px;
  --fs-body: 16px;
  --fs-lead: 18px;
  --lh-tight: 1.15;
  --lh-normal: 1.45;
  --lh-loose: 1.65;
}

* {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;
  font-kerning: normal;
  font-feature-settings: "kern" 1,
"liga" 1;
}

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;
}

.section .container.narrow p + p {margin-top: 12px;
}

.section .container.narrow h2 + p {margin-top: 10px;
}

.section .container.narrow p + .lead {font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--fg);
  opacity: .92;
}

.section {padding: clamp(56px,
7vw,
92px) 0;
}

.section h2 {font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  margin: 0 0 14px;
  letter-spacing: .2px;
}

.section p {margin: 10px 0;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
}

.lead {font-size: clamp(16px,
1.25vw,
19px);
  line-height: 1.55;
  color: var(--fg);
  opacity: .92;
  max-width: 70ch;
}

.topbar {position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  background: var(--b-88);
  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: 12px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.logo {font-weight: 600;
  letter-spacing: .6px;
  text-transform: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
}

.logo:hover {background: var(--soft);
}

.nav {display: flex;
  align-items: center;
  gap: 10px;
}

.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);
  border: none;
  background: var(--w-06);
}

.nav-cta:hover {background: var(--w-10);
}

.nav-services {position: relative;
}

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

.topbar .nav {position: relative;
}

.services-menu {position: absolute;
  top: calc(var(--topbar-h) - 6px);
  right: calc(var(--pad));
  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(--w-10);
}

.services-menu small {color: var(--muted2);
}

main {padding-top: var(--topbar-h);
}

.hero {position: relative;
  padding: clamp(84px,
9vw,
120px) 0 clamp(56px,
6vw,
84px);
  overflow: hidden;
}

.hero::before {content: "";
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 520px;
  background: radial-gradient(closest-side,
var(--w-10),
var(--w-00));
  
  filter: blur(8px);
  opacity: .9;
}

.hero::after {content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
transparent,
var(--w-16),
transparent);
  opacity: .9;
}

.hero .container {position: relative;
}

.hero-kicker {display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  border: none;
  background: var(--w-05);
  color: var(--w-78);
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.hero-divider{height: 1px !important;
  background: rgba(255,
255,
255,
.22);
}

.hero h1 {font-size: var(--fs-h1);
  line-height: 1.02;
  margin: 0 0 18px;
  letter-spacing: -0.6px;
}

.hero-sub {font-size: var(--fs-lead);
  line-height: 1.4;
  margin: 0 0 14px;
  color: var(--fg);
  opacity: .94;
  max-width: 68ch;
}

.hero-desc {max-width: 72ch;
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
}

.hero-cta {display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.hero h1::after {content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin-top: 18px;
  background: linear-gradient(90deg,
var(--w-60),
var(--w-00));
  opacity: .6;
}

.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(--w-06);
  transition: transform .08s ease,
background .15s ease,
border-color .15s ease;
  min-height: 44px;
}

.btn:hover {background: var(--w-10);
  border-color: var(--w-22);
}

.btn:active {transform: translateY(1px);
}

.btn.primary {background: var(--w-14);
}

.btn.primary:hover {background: var(--w-18);
}

.btn.secondary {background: transparent;
}

.services-grid {display: grid;
  grid-template-columns: repeat(3,
minmax(0,
1fr));
  gap: 14px;
  margin-top: 18px;
}

.service-card {border: none;
  border-radius: 18px;
  padding: 18px;
  background: var(--w-04);
  transition: transform .12s ease,
background .15s ease,
border-color .15s ease;
  min-height: 140px;
}

.service-card:hover {background: var(--w-07);
  border-color: var(--w-22);
  transform: translateY(-2px);
}

.service-card h3 {margin: 0 0 8px;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--fg);
}

.service-card p {margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.process-icons {margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4,
minmax(0,
1fr));
  gap: 24px;
  align-items: stretch;
}

.pitem {text-align: center;
}

.picon {width: 54px;
  height: 54px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: none;
  background: var(--w-03);
}

.picon svg {width: 26px;
  height: 26px;
  color: var(--w-78);
}

.ptitle {font-size: 15px;
  letter-spacing: .2px;
  color: var(--fg);
  margin: 0 0 6px;
  font-weight: 600;
}

.pdesc {font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 980px) {.process-icons {grid-template-columns: repeat(2,
minmax(0,
1fr));
  gap: 18px 22px;
}
}

@media (max-width: 620px) {.process-icons {grid-template-columns: 1fr;
  gap: 12px;
}

.pitem {text-align: left;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  align-items: center;
}

.picon {margin: 0;
}

.ptitle {margin: 0 0 4px;
}
}

.section-intro {color: var(--muted);
  max-width: 70ch;
}

.portfolio-grid {display: grid;
  grid-template-columns: repeat(3,
minmax(0,
1fr));
  gap: 14px;
  margin-top: 18px;
}

.portfolio-item {height: 220px;
  border-radius: 18px;
  border: none;
  background: var(--w-03);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted2);
  letter-spacing: 1px;
}

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

@media (max-width: 980px) {.services-grid {grid-template-columns: repeat(2,
minmax(0,
1fr));
}

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

@media (max-width: 620px) {.nav a {display: none;
}

.nav a.nav-cta {display: inline-flex;
}

.services-menu {right: var(--pad);
}

.services-grid {grid-template-columns: 1fr;
}

.portfolio-grid {grid-template-columns: 1fr;
}
}

.obr-cinema {max-width: var(--max);
  margin: 1.75rem auto 0;
}

.obr-screen {position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--c-black);
  border-radius: var(--radius2);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.obr-thumb {position: absolute;
  inset: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.obr-screen iframe {position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.obr-autonext {position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.92);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease,
visibility .18s ease;
  z-index: 4;
}

.obr-autonext.is-visible {opacity: 1;
  visibility: visible;
}

.obr-autonext__inner {display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  color: #fff;
  text-align: center;
  user-select: none;
}

.obr-autonext__label {font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .78;
}

.obr-autonext__count {font-size: clamp(44px, 9vw, 110px);
  line-height: 1;
  font-weight: 800;
}

.obr-controls {display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1rem;
}

.obr-controls button {background: transparent;
  border: 1px solid transparent;
  color: var(--fg);
  padding: .35rem .6rem;
  border-radius: 14px;
  font: inherit;
  font-size: .86rem;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .08s ease,
background .15s ease,
border-color .15s ease,
filter .15s ease;
}

.obr-controls button:hover {transform: translateY(-1px);
  background: var(--glass-bg-strong);
  border-color: var(--line);
  filter: brightness(1.05);
}

.obr-controls button:active {transform: translateY(1px);
}

.lab-sep {border: 0;
  height: 1px;
  background: var(--line);
  margin: 3.5rem auto;
  max-width: var(--max);
  opacity: .9;
}

.pfc-grid {display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
  margin-top: 1.25rem;
}

.pfc-video {position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--c-yellow-fef502);
  overflow: hidden;
  border-radius: 18px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  
}

.pfc-player {width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.pfc-play {position: absolute;
  inset: 0;
  margin: auto;
  width: 84px;
  height: 84px;
  background: none;
  border: 0;
  color: var(--c-ink);
  opacity: 0.95;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
}



/* PFC: hide play overlay when the local video is playing */
.pfc-video.is-playing .pfc-play{opacity: 0;
  
}
.pfc-play:hover {opacity: 1;
}


/* PFC: reveal the video when playing */
.pfc-video.is-playing .pfc-player{opacity: 1;
}


.pfc-col--content {display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.35rem;
  height: 100%;
}

.pfc-text p {margin: 0;
  line-height: 1.55;
  font-size: 1.05rem;
}

.pfc-image-row {display: grid;
  grid-template-columns: repeat(3,
minmax(0,
1fr));
  gap: 1rem;
}

.pfc-image-card {aspect-ratio: 1 / 1;
  border: none;
  border-radius: var(--radius2);
  background: transparent;
  opacity: .9;
  
}

.pfc-image-card img {width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 980px) {.pfc-grid {grid-template-columns: 1fr;
}
}

@media (max-width: 560px) {.pfc-image-row {grid-template-columns: 1fr;
}
}

.pfc-video video {position: absolute;
  inset: 0;
}

.pfc-video .pfc-player {opacity: 0;
}

.lab-beginnings {max-width: 1100px;
  margin: 0 auto;
}

.lab-intro {margin: 0;
  opacity: .8;
  line-height: 1.45;
}

.beginnings-grid {display: grid;
  grid-template-columns: repeat(3,
1fr);
  gap: 12px;
  margin-top: 2rem;
}

.beginnings-item {display: block;
  aspect-ratio: 16/9;
  border: 1px solid var(--b-18);
  background: var(--b-06);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform .22s ease;
}

.beginnings-item img {width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .22s ease;
}

.beginnings-item:hover {transform: scale(1.02); }
.lab-archivo-grafico .ag-grid {display: grid;
  grid-template-columns: repeat(4,
1fr);
  gap: 12px;
  margin-top: 28px;
}

.lab-archivo-grafico .ag-item {aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: var(--w-04);
  border: 1px solid var(--w-06);
}

.lab-archivo-grafico .ag-item img {width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.ag-item img {transition: transform .22s ease;
}

.ag-item:hover img {transform: scale(1.04);
}

@media (max-width: 1100px) {.lab-archivo-grafico .ag-grid {grid-template-columns: repeat(4,
1fr);
}
}

@media (max-width: 720px) {.lab-archivo-grafico .ag-grid {grid-template-columns: repeat(2,
1fr);
  gap: 14px;
}

.lab-archivo-grafico .ag-item {border-radius: 16px;
}
}

.lab-page .lab-cta-wrap {position: relative;
  margin: 72px 0 0;
  padding: 72px 56px;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-top: 1px solid var(--w-08);
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}

.lab-page .lab-cta-bg {position: absolute;
  inset: 0;
  
  background: radial-gradient(1200px 500px at 20% 40%,
var(--c-cyan-57-215-255-14),
transparent 60%),
radial-gradient(900px 400px at 80% 20%,
var(--c-magenta-255-59-209-10),
transparent 55%),
linear-gradient(180deg, rgba(246,246,244,.65), rgba(246,246,244,.65)),
repeating-linear-gradient(90deg,
var(--w-05) 0 1px,
transparent 1px 56px),
repeating-linear-gradient(0deg,
var(--pill-bg) 0 1px,
transparent 1px 56px);
  opacity: .55;
}

.lab-page .lab-cta-inner {position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.lab-page .lab-cta-media {margin-top: -18px;
}

@media (max-width: 700px) {.lab-page .lab-cta-inner {width: calc(100% - 48px);
  flex-direction: column;
  align-items: flex-start;
}
}

.lab-page .lab-cta-quote {margin: 0;
  font-size: clamp(22px,
2.3vw,
34px);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--w-92);
}

.lab-page .lab-cta-avatar {width: 220px;
  height: 220px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-black-0b);
  box-shadow: 0 24px 70px var(--b-55);
  border: 1px solid var(--w-10);
}

.lab-page .lab-cta-avatar img {width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%) contrast(110%);
}

.lab-page .lab-cta-sub {text-transform: none !important;
  color: var(--w-70) !important;
  text-transform: none;
}

.lab-page .lab-cta-link {color: var(--c-cyan-4cc3ff);
  text-decoration: none;
}

.lab-page .lab-cta-link:hover {text-decoration: underline;
}

/* === MODE SYSTEM: PRO/LAB header hierarchy overrides (v39 -> v39.01) === */
body.lab-page .hero{padding: clamp(72px,
7vw,
96px) 0 clamp(32px,
4vw,
48px);
}
body.lab-page .hero::before{opacity:.18; height:180px; inset:-28% -20% auto -20%; filter: blur(6px); }
body.lab-page .hero::after{opacity:.18; }
body.lab-page .hero h1{font-size: clamp(22px,
3vw,
32px);
  letter-spacing: -0.2px;
  margin-bottom: 14px;
}
body.lab-page .hero-sub{font-size: 14px;
  line-height: 1.75;
  font-weight: 400;
  max-width: 460px;
  color: var(--muted);
  opacity: .70;
  margin-bottom: 14px;
}
body.lab-page .hero-desc{font-size: 14px;
  line-height: 1.75;
  font-weight: 400;
  max-width: 460px;
  color: var(--muted);
  opacity: .70;
}
body.lab-page .hero-divider{height: 1px !important;
  background: rgba(255,
255,
255,
.22);
}

/* === pro-inline.css === */
:root {--bg: var(--c-black);
  --fg: var(--c-white);
  --muted: var(--w-72);
  --muted2: var(--w-52);
  --line: var(--w-14);
  --soft: var(--w-08);
  --max: 1100px;
  --pad: 22px;
  --radius: 18px;
  --radius2: 12px;
  --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(40px,
5vw,
52px);
  --fs-h2: clamp(26px,
3vw,
32px);
  --fs-h3: 18px;
  --fs-body: 16px;
  --fs-lead: 18px;
  --lh-tight: 1.15;
  --lh-normal: 1.45;
  --lh-loose: 1.65;
}

* {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;
  font-kerning: normal;
  font-feature-settings: "kern" 1,
"liga" 1;
}

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;
}

.section .container.narrow p + p {margin-top: 12px;
}

.section .container.narrow h2 + p {margin-top: 10px;
}

.section .container.narrow p + .lead {font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--fg);
  opacity: .92;
}

.section {padding: clamp(56px,
7vw,
92px) 0;
}

.section h2 {font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  margin: 0 0 14px;
  letter-spacing: .2px;
}

.section p {margin: 10px 0;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
}

.lead {font-size: clamp(16px,
1.25vw,
19px);
  line-height: 1.55;
  color: var(--fg);
  opacity: .92;
  max-width: 70ch;
}

.topbar {position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  background: var(--b-88);
  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: 12px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.logo {font-weight: 600;
  letter-spacing: .6px;
  text-transform: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
}

.logo:hover {background: var(--soft);
}

.nav {display: flex;
  align-items: center;
  gap: 10px;
}

.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);
  border: none;
  background: var(--w-06);
}

.nav-cta:hover {background: var(--w-10);
}

.nav-services {position: relative;
}

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

.topbar .nav {position: relative;
}

.services-menu {position: absolute;
  top: calc(var(--topbar-h) - 6px);
  right: calc(var(--pad));
  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(--w-10);
}

.services-menu small {color: var(--muted2);
}

main {padding-top: var(--topbar-h);
}

.hero {position: relative;
  padding: clamp(84px,
9vw,
120px) 0 clamp(56px,
6vw,
84px);
  overflow: hidden;
}

.hero::before {content: "";
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 520px;
  background: radial-gradient(closest-side,
var(--w-10),
var(--w-00));
  
  filter: blur(8px);
  opacity: .9;
}

.hero::after {content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
transparent,
var(--w-16),
transparent);
  opacity: .9;
}

.hero .container {position: relative;
}

.hero-kicker {display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  border: none;
  background: var(--w-05);
  color: var(--w-78);
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.hero-divider{height: 1px !important;
  background: rgba(255,
255,
255,
.22);
}

.hero h1 {font-size: var(--fs-h1);
  line-height: 1.02;
  margin: 0 0 18px;
  letter-spacing: -0.6px;
}

.hero-sub {font-size: var(--fs-lead);
  line-height: 1.4;
  margin: 0 0 14px;
  color: var(--fg);
  opacity: .94;
  max-width: 68ch;
}

.hero-desc {max-width: 72ch;
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
}

.hero-cta {display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.hero h1::after {content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin-top: 18px;
  background: linear-gradient(90deg,
var(--w-60),
var(--w-00));
  opacity: .6;
}

.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(--w-06);
  transition: transform .08s ease,
background .15s ease,
border-color .15s ease;
  min-height: 44px;
}

.btn:hover {background: var(--w-10);
  border-color: var(--w-22);
}

.btn:active {transform: translateY(1px);
}

.btn.primary {background: var(--w-14);
}

.btn.primary:hover {background: var(--w-18);
}

.btn.secondary {background: transparent;
}

.reel-frame {position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  background: var(--c-black);
}

.reel-frame iframe {position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--c-black);
}

.services-grid {display: grid;
  grid-template-columns: repeat(3,
minmax(0,
1fr));
  gap: 14px;
  margin-top: 18px;
}

.service-card {border: none;
  border-radius: 18px;
  padding: 18px;
  background: var(--w-04);
  transition: transform .12s ease,
background .15s ease,
border-color .15s ease;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  height: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.service-card.reel-card {padding: 0;
  background: transparent;
  min-height: 0;
}

.service-card:hover {background: var(--w-07);
  border-color: var(--w-22);
  transform: translateY(-2px);
}

.service-card h3 {margin: 0 0 8px;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--fg);
}

.service-card p {margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.process-icons {margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4,
minmax(0,
1fr));
  gap: 24px;
  align-items: start;
}

.pitem {text-align: center;
}

.picon {width: 54px;
  height: 54px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: none;
  background: var(--w-03);
}

.picon svg {width: 26px;
  height: 26px;
  color: var(--w-78);
}

.ptitle {font-size: 15px;
  letter-spacing: .2px;
  color: var(--fg);
  margin: 0 0 6px;
  font-weight: 600;
}

.pdesc {font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 980px) {.process-icons {grid-template-columns: repeat(2,
minmax(0,
1fr));
  gap: 18px 22px;
}
}

@media (max-width: 620px) {.process-icons {grid-template-columns: 1fr;
  gap: 12px;
}

.pitem {text-align: left;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  align-items: center;
}

.picon {margin: 0;
}

.ptitle {margin: 0 0 4px;
}
}

.section-intro {color: var(--muted);
  max-width: 70ch;
}

.portfolio-grid {display: grid;
  grid-template-columns: repeat(3,
minmax(0,
1fr));
  gap: 14px;
  margin-top: 18px;
}

.portfolio-item {height: 220px;
  border-radius: 18px;
  border: none;
  background: var(--w-03);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted2);
  letter-spacing: 1px;
  overflow: hidden;
}

#grafico .portfolio-item {height: auto !important;
  aspect-ratio: 4 / 3;
}

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

.ratio-16x9 {aspect-ratio: 16 / 9;
  height: auto;
}

.portfolio-item.ratio-16x9 {height: auto;
}

@media (max-width: 980px) {}

.two-col {display: grid;
  grid-template-columns: repeat(2,
minmax(0,
1fr));
  gap: 14px;
  margin-top: 18px;
  align-items: stretch;
}

.portfolio-grid.tight {margin-top: 0;
}

@media (max-width: 980px) {.two-col {grid-template-columns: 1fr;
}
}

body.pro .contact-band.lz-band {background: radial-gradient(1200px 500px at 20% 40%,
var(--c-cyan-57-215-255-14),
transparent 60%),
radial-gradient(900px 400px at 80% 20%,
var(--c-magenta-255-59-209-10),
transparent 55%),
linear-gradient(180deg, rgba(246,246,244,.65), rgba(246,246,244,.65)),
repeating-linear-gradient(90deg,
var(--w-05) 0 1px,
transparent 1px 56px),
repeating-linear-gradient(0deg,
var(--pill-bg) 0 1px,
transparent 1px 56px),
url("../img/_others/relampagos.jpg") center/cover no-repeat;
}

body.pro 


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

@media (max-width: 980px) {.services-grid {grid-template-columns: repeat(2,
minmax(0,
1fr));
}

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

@media (max-width: 620px) {.nav a {display: none;
}

.nav a.nav-cta {display: inline-flex;
}

.services-menu {right: var(--pad);
}

.services-grid {grid-template-columns: 1fr;
}

.portfolio-grid {grid-template-columns: 1fr;
}
}

@media (max-width: 620px) and (max-aspect-ratio: 1/1) {#motion4startups .portfolio-grid.tight {grid-template-columns: repeat(3,
minmax(0,
1fr));
}
}

@media (min-width: 701px) and (max-width: 820px) and (max-aspect-ratio: 1/1) {#motion4startups .portfolio-grid.tight {grid-template-columns: repeat(3,
minmax(0,
1fr));
}
}

.modal__frame {aspect-ratio: 16/9;
  width: 100%;
  background: var(--w-04);
}

.modal__navbtn {width: 42px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: var(--w-06);
  color: var(--fg);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.modal__navbtn:disabled {opacity: .35;
  
}

/* Hide the right-side project meta only on small phones.
   iPad mini/11/13 portrait should keep the meta visible. */
@media (max-width: 719px) {#pro-freelance-modal .modal__meta {display: none !important;
  }

  #pro-freelance-modal .modal__footer {gap: 0 !important;
  }
}

.portfolio-modal::before,
.portfolio-modal::after {content: none !important;
  display: none !important;
}

.modal__panel--brand {width: min(1100px,
100%);
}

.brand {padding: 18px;
}

.brand__grid {display: grid;
  grid-template-columns: 320px 1fr;
  gap: 12px;
}

.brand__left {display: flex;
  flex-direction: column;
  gap: 12px;
}

.brand__logo {aspect-ratio: 1/1;
  width: 100%;
  border: none;
  border-radius: 16px;
  background: var(--w-04);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand__logo img {width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.brand__name {font-weight: 700;
  letter-spacing: .2px;
  opacity: .92;
}

.brand__versions {display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.brand__version {aspect-ratio: 1/1;
  border: none;
  border-radius: 14px;
  background: var(--w-03);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--w-55);
  font-size: 12px;
  letter-spacing: .12em;
}

.brand__version img {width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 14px;
}

.brand__right {display: flex;
  flex-direction: column;
  gap: 12px;
}

.brand__video {aspect-ratio: 16/9;
  width: 100%;
  border: none;
  border-radius: 16px;
  background: var(--w-04);
  overflow: hidden;
}

.brand__video iframe {width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.brand__assets {display: grid;
  grid-template-columns: repeat(2,
1fr);
  gap: 10px;
}

.brand__asset {aspect-ratio: 1/1;
  border: none;
  border-radius: 14px;
  background: var(--w-03);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--w-55);
  font-size: 12px;
  letter-spacing: .12em;
}

.ph {user-select: none;
}

@media (max-width: 880px) {.brand__grid {grid-template-columns: 1fr;
}
}

@media (max-width: 640px) {.gm2-assets {display: none !important;
}

.gm2-big {display: none !important;
}

.brand__assets {display: none !important;
}

.brand__versions {display: none !important;
}

.brand__grid {display: flex;
  flex-direction: column;
  gap: 12px;
}

.brand__right {display: contents;
}

.brand__video {order: 1;
  border-radius: 18px;
}

.brand__left {order: 2;
}

.brand__assets {order: 3;
  display: grid;
  grid-template-columns: repeat(3,
1fr);
  gap: 8px;
}

.brand__versions {display: none;
}

.brand__logo {border-radius: 18px;
}
}

#gloubo-mola .gm-card {padding: 0;
  overflow: hidden;
  border: none;
  box-shadow: none;
}

/* LZK FIX: Golubo mini-grid should not sit on service-card background */
#gloubo-mola .service-card.gm-card,
#gloubo-mola .gm-card.service-card {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}


#gloubo-mola .gm-card:hover {transform: none;
  box-shadow: none;
}

#gloubo-mola .gm-square {aspect-ratio: 1/1;
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
}

#gloubo-mola .gm-square img {width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: transparent;
  }

#gloubo-mola .gm-mini-grid {display: grid;
  grid-template-columns: repeat(3,
1fr);
  gap: 12px;
  padding: 0;
}

#gloubo-mola .gm-brand-item {border: none;
  border-radius: 18px;
  background: transparent;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
}

#gloubo-mola .gm-brand-item img {width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
  transition: transform .22s ease;
}

#gloubo-mola .gm-brand-item:hover img {transform: scale(1.04);
}

#gloubo-mola .gm-brand-item:focus {outline: none;
  outline-offset: 2px;
}

.gm-lock {overflow: hidden !important;
}

.gm-modal {position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.gm-modal.is-open {display: block;
}

.gm-modal__overlay {position: absolute;
  inset: 0;
  background: var(--b-75);
  backdrop-filter: blur(6px);
}

.gm-modal__dialog {position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,
-50%);
  width: min(1200px,
calc(100vw - 48px));
  height: min(760px,
calc(100vh - 48px));
  border-radius: 22px;
  border: none;
  background: var(--c-black-0b);
  box-shadow: var(--shadow-gm);
  overflow: hidden;
}

.gm-modal__close {position: absolute;
  right: 14px;
  top: 12px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: none;
  background: var(--w-04);
  color: var(--c-white);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.gm-modal__content {position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.gm-panel {flex: 1;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 12px;
  padding: 18px;
  min-height: 0;
  overflow: hidden;
}

.gm-panel__left {display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  min-height: 0;
}

@media (min-width: 720px) and (max-width: 1024px) {#gmModal.is-open,
#gmModalV2.is-open {display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#gmModal .gm-panel {grid-template-columns: 240px 1fr !important;
}

#gmModal .gm-video,
#gmModalV2 .gm2-big {height: 260px !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}

#gmModal .gm-video__ratio,
#gmModalV2 .gm2-video,
#gmModalV2 .gm2-video-ratio {height: 100% !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}

#gmModal .gm-video__ratio iframe,
#gmModal .gm-video__ratio video,
#gmModal .gm-video__ratio img,
#gmModalV2 .gm2-big img,
#gmModalV2 .gm2-video-ratio iframe,
#gmModalV2 .gm2-video-ratio video,
#gmModalV2 .gm2-video-ratio img {width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border: 0 !important;
}
}

.gm-panel__left,
.gm-panel__right {display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  min-height: 0;
}

.gm-block {border: none;
  border-radius: 18px;
  background: var(--w-03);
  overflow: hidden;
}

.gm-brand__logo {aspect-ratio: 1/1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-ink);
}

.gm-brand__logo img {max-width: 78%;
  max-height: 78%;
  object-fit: contain;
  display: block;
}

.gm-brand__name {padding: 12px 14px;
  font-weight: 600;
  color: var(--c-white);
}

.gm-versions__grid {display: grid;
  grid-template-columns: repeat(2,
1fr);
  gap: 12px;
  padding: 12px;
}

.gm-video {border: none;
  border-radius: 18px;
  overflow: hidden;
  background: var(--c-black);
  flex: 0 0 auto;
}

.gm-video__ratio {position: relative;
  width: 100%;
  aspect-ratio: 16/9;
}

.gm-assets {flex: 1;
  min-height: 0;
  display: flex;
}

.gm-assets__grid {flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3,
1fr);
  gap: 12px;
  padding: 0;
}

.gm-video__ratio iframe {position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.gm-ph {aspect-ratio: 1/1;
  border-radius: 14px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--w-50);
  font-size: 12px;
  letter-spacing: .08em;
}

.gm-asset {aspect-ratio: 4/3;
  border-radius: 14px;
  border: none;
  background: var(--w-03);
  overflow: hidden;
}

.gm-asset img {width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gm-footer {height: 74px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  gap: 12px;
}

.gm-nav {display: flex;
  align-items: center;
  gap: 10px;
}

.gm-nav__btn {width: 40px;
  height: 40px;
  border-radius: 14px;
  border: none;
  background: var(--w-04);
  color: var(--c-white);
  font-size: 22px;
  cursor: pointer;
}

.gm-modal__close,
.gm-nav__btn,
.gm-footer .btn {transition: transform .15s ease,
filter .15s ease,
background-color .15s ease,
color .15s ease;
}

.gm-modal__close:hover,
.gm-nav__btn:hover,
.gm-footer .btn:hover {transform: translateY(-1px);
  filter: brightness(1.10);
}

.gm-modal__close:active,
.gm-nav__btn:active,
.gm-footer .btn:active {transform: translateY(0px);
  filter: brightness(1.00);
}

.gm-meta {color: var(--w-70);
  font-size: 14px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 700px) {.gm-panel {grid-template-columns: 1fr;
}

.gm-meta {display: none;
}
}

#motion4startups iframe {display: block;
  background: var(--c-black);
}

#motion4startups .reel {background: var(--c-black);
  overflow: hidden;
}

#gmModal,
#gmModal .modal__panel--brand {overflow: hidden;
}

#gmModal .brand {overflow: hidden;
}

.gm-versions {min-height: 0;
}

body.pro.modal-open {overflow: hidden;
}

.gm2-modal {position: fixed;
  inset: 0;
  display: none;
  z-index: 10000;
}

.gm2-modal.is-open {display: block;
}

.gm2-overlay {position: absolute;
  inset: 0;
  background: var(--b-75);
  backdrop-filter: blur(6px);
}

.gm2-dialog {position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,
-50%);
  width: min(1200px,
calc(100vw - 50px));
  height: min(760px,
calc(100vh - 50px));
  border-radius: 22px;
  background: var(--c-black-0b);
  box-shadow: var(--shadow-gm);
  overflow: hidden;
}

.gm2-content {position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.gm2-grid {flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 25px;
  padding: 25px;
  overflow: hidden;
}

.gm2-left,
.gm2-right {min-height: 0;
  display: grid;
  gap: 25px;
}

.gm2-left {grid-template-rows: auto 1fr;
}

.gm2-right {grid-template-rows: auto 1fr;
}

.gm2-card {border-radius: 18px;
  background: var(--w-03);
  overflow: hidden;
  border: none;
}

.gm2-logo {display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: var(--c-ink);
}

.gm2-logo img {width: 100%;
  max-width: 300px;
  height: auto;
  object-fit: contain;
  display: block;
}

.gm2-big {background: var(--c-ink);
}

.gm2-big img {width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--c-ink);
}

.gm2-video {background: var(--c-black);
}

.gm2-video-ratio {position: relative;
  width: 100%;
  aspect-ratio: 16/9;
}

.gm2-video-ratio iframe {position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.gm2-assets {display: grid;
  grid-template-columns: repeat(3,
1fr);
  gap: 25px;
  align-items: stretch;
}

.gm2-asset {aspect-ratio: 4/3;
  background: var(--w-03);
}

.gm2-asset img {width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gm2-footer {height: 74px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 25px;
  gap: 12px;
}

.gm2-nav {display: flex;
  align-items: center;
  gap: 10px;
}

.gm2-nav__btn {width: 40px;
  height: 40px;
  border-radius: 14px;
  border: none;
  background: var(--w-04);
  color: var(--c-white);
  font-size: 22px;
  cursor: pointer;
}

.gm2-nav__btn,
.gm2-footer .btn {transition: transform .15s ease,
filter .15s ease,
background-color .15s ease,
color .15s ease;
}

.gm2-nav__btn:hover,
.gm2-footer .btn:hover {transform: translateY(-1px);
  filter: brightness(1.10);
}

.gm2-nav__btn:active,
.gm2-footer .btn:active {transform: translateY(0px);
  filter: brightness(1.00);
}

@media (min-width: 700px) and (max-width: 1100px) {#gmModalV2 .gm2-right {grid-template-rows: 260px 1fr;
}

#gmModalV2 .gm2-big {height: 260px;
  overflow: hidden;
  border-radius: 18px;
}

#gmModalV2 .gm2-big img {width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

#gmModalV2 .gm2-video {overflow: hidden;
  border-radius: 18px;
}

#gmModalV2 .gm2-video-ratio {height: 100%;
  border-radius: 18px;
  overflow: hidden;
}

#gmModalV2 .gm2-video-ratio iframe {width: 100%;
  height: 100%;
  display: block;
  border: 0;
  border-radius: 18px;
}
}

#gmModalV2 .gm2-footer button {cursor: pointer;
}

.gm2-nav__btn[disabled] {opacity: .35;
  
}

.gm2-meta {color: var(--w-70);
  font-size: 14px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 700px) {.gm2-grid {grid-template-columns: 1fr;
}

.gm2-left {grid-template-rows: auto;
}

.gm2-big {display: none;
}

.gm2-assets {grid-template-columns: 1fr;
}

.gm2-meta {display: none;
}
}

@media (max-width: 640px) {.brand__grid {display: flex;
  flex-direction: column;
  gap: 12px;
}

.brand__video {order: 1;
  max-height: 38vh;
}

.brand__left {order: 2;
}

.brand__assets {order: 3;
  grid-template-columns: repeat(3,
1fr);
  gap: 8px;
}

@media (max-height: 700px) {.brand__assets {display: none;
}
}
}

@media (max-width: 640px) {.gm2-modal {padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.gm2-grid {row-gap: 16px !important;
}

.gm2-card {margin: 0 !important;
}
}

@media (max-width: 640px) {.gm2-dialog {width: calc(100vw - 24px) !important;
  height: calc(100vh - 24px) !important;
}

.gm2-grid {padding: 12px !important;
  gap: 12px !important;
}

.gm2-left,
.gm2-right {gap: 12px !important;
}
}

@media (max-width: 640px) {.gm2-dialog {height: calc(100svh - 24px) !important;
  max-height: calc(100svh - 24px) !important;
  display: flex !important;
  align-items: flex-start !important;
}

@supports not (height: 100svh) {.gm2-dialog{height: calc(100vh - 24px) !important;
      max-height: calc(100vh - 24px) !important;}
}

.gm2-content {display: block !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

.gm2-grid {align-content: start !important;
}
}

@media (max-width: 640px) {.gm2-dialog {height: auto !important;
  max-height: calc(100svh - 24px) !important;
}

@supports not (height: 100svh) {.gm2-dialog{max-height: calc(100vh - 24px) !important;}
}

.gm2-content {height: auto !important;
  max-height: inherit !important;
}
}

@media (max-width: 640px) {.gm2-overlay {display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.gm2-dialog {width: calc(100vw - 24px) !important;
  max-width: calc(100vw - 24px) !important;
  margin: 0 !important;
}

.gm2-content {width: 100% !important;
}
}

@media (max-width: 640px) {.gm2-overlay {display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 12px !important;
}

.gm2-dialog {position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: calc(100svh - 24px) !important;
  margin: 0 !important;
}

@supports not (height: 100svh) {}

.gm2-content {position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: inherit !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}

.gm2-grid {flex: 0 0 auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  align-content: start !important;
}
}

@media (max-width: 640px) {.gm2-overlay {padding: max(12px,
env(safe-area-inset-left)) !important;
}

.gm2-dialog {border-radius: 18px !important;
}
}

@media (max-width: 640px) {.gm2-modal.is-open {display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: max(12px,
env(safe-area-inset-top))
      max(12px,
env(safe-area-inset-right))
      max(12px,
env(safe-area-inset-bottom))
      max(12px,
env(safe-area-inset-left)) !important;
  box-sizing: border-box !important;
}

.gm2-dialog {width: 100% !important;
  max-width: 100% !important;
}
}

@media (max-width: 640px) {.gm2-modal.is-open {padding: 16px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.gm2-dialog {position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%,
-50%) !important;
  width: calc(100vw - 32px) !important;
  max-width: calc(100vw - 32px) !important;
  height: auto !important;
  max-height: calc(100svh - 32px) !important;
  margin: 0 !important;
}

@supports not (height: 100svh) {.gm2-dialog{max-height: calc(100vh - 32px) !important;}
}
}

#grafico .ag-grid {display: grid;
  grid-template-columns: repeat(5,
1fr);
  gap: 12px;
  margin-top: 28px;
}

#grafico .ag-item {aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: var(--w-04);
  border: 1px solid var(--w-06);
}

#grafico .ag-item img {width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.ag-item {transition: transform .22s var(--ease),
border-color .22s var(--ease),
box-shadow .22s var(--ease);
}

.ag-item img {transition: transform .35s var(--ease);
  will-change: transform;
}

.ag-item:hover {transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--w-14);
}

.ag-item:hover img {transform: scale(1.06);
}

@media (max-width: 1100px) {#grafico .ag-grid {grid-template-columns: repeat(3,
1fr);
}

}

@media (max-width: 720px) {#grafico .ag-grid {grid-template-columns: repeat(3,
1fr);
  gap: 14px;
}

#grafico .ag-item {border-radius: 16px;
}

}

#motion4startups .portfolio-item {box-shadow: none;
}

#motion4startups .portfolio-item:hover {box-shadow: none;
}

@media (min-width: 1024px) and (max-height: 820px) {/* PRO: Freelance grid should feel like LAB/LC (16:9 thumbs,
tighter) */
  #freelance > .container{max-width: 860px;
  }
  #freelance .portfolio-grid{gap: 12px;
    margin-top: 14px;
  }
  #freelance .portfolio-item{height: auto !important;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
  }
}

/* === MODE SYSTEM: PRO/LAB header hierarchy overrides (v39 -> v39.01) === */
body.pro .hero{padding: clamp(72px,
7vw,
96px) 0 clamp(32px,
4vw,
48px);
}
body.pro .hero::before{opacity:.25; height:220px; inset:-30% -20% auto -20%; filter: blur(6px); }
body.pro .hero::after{opacity:.25; }
body.pro .hero h1{font-size: clamp(22px,
3vw,
32px);
  letter-spacing: -0.2px;
  margin-bottom: 14px;
}
body.pro .hero-desc{font-size: 14px;
  max-width: 460px;
  opacity: .70;
}
body.pro .hero-divider{height: 1px !important;
  background: rgba(255,
255,
255,
.22);
}


/* === proyectos-inline.css === */
.muted {opacity: .7;
  font-size: .95rem;
}

.media {margin: 20px 0;
}

.media-embed {position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--b-05);
}

.media-embed iframe {position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ph-grid {display: grid;
  gap: 14px;
  margin: 14px 0 28px;
}

.ph-6 {grid-template-columns: repeat(3,
1fr);
}

.ph-4 {grid-template-columns: repeat(2,
1fr);
}

.ph-3 {grid-template-columns: repeat(3,
1fr);
}

.ph-strip {display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(160px,
1fr);
  gap: 14px;
  overflow: auto;
  padding-bottom: 6px;
}

.ph-img {width: 100%;
  display: block;
  border-radius: 14px;
  border: none;
  background: var(--b-03);
}

.ph-img.square {aspect-ratio: 1/1;
  object-fit: cover;
}

.ph-img.thumb {height: 110px;
  object-fit: cover;
}

.project-nav {margin: 40px 0;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.project-nav a[aria-disabled="true"] {opacity: .35;
}

@media (max-width:860px) {.ph-6,
.ph-3 {grid-template-columns: repeat(2,
1fr);
}

.project-nav {flex-direction: column;
}

.project-nav a {width: 100%;
}
}


/* === proyectos-proyecto_03-inline.css === */
.muted {opacity: .7;
  font-size: .95rem;
}

.kicker {letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .78rem;
  opacity: .7;
}

.hero {margin-top: 18px;
}

.hero h1 {margin: 6px 0 10px;
}

.hero .lead {margin: 0;
}

.top-actions {display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.layout-2col {display: grid;
  grid-template-columns: 1fr 1.55fr;
  gap: 12px;
  align-items: start;
  margin: 18px 0 10px;
}

.media-embed {position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 14px;
  overflow: hidden;
  background: var(--b-05);
  border: none;
}

.media-embed iframe {position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.method-grid {display: grid;
  grid-template-columns: repeat(3,
1fr);
  gap: 14px;
  margin: 14px 0 10px;
}

.method-grid .card h3 {margin-top: 0;
}

.ph-grid {display: grid;
  gap: 14px;
  margin: 14px 0 22px;
}

.ph-6 {grid-template-columns: repeat(3,
1fr);
}

.ph-4 {grid-template-columns: repeat(2,
1fr);
}

.ph-3 {grid-template-columns: repeat(3,
1fr);
}

.ph-strip {display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(160px,
1fr);
  gap: 14px;
  overflow: auto;
  padding-bottom: 6px;
  margin: 14px 0 4px;
}

.ph-img {width: 100%;
  display: block;
  border-radius: 14px;
  border: none;
  background: var(--b-03);
}

.ph-img.square {aspect-ratio: 1/1;
  object-fit: cover;
}

.ph-img.thumb {height: 110px;
  object-fit: cover;
}

.project-nav {margin: 34px 0 4px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.project-nav a[aria-disabled="true"] {opacity: .35;
}

.section-title {margin: 18px 0 8px;
}

@media (max-width: 960px) {.layout-2col {grid-template-columns: 1fr;
}

.method-grid {grid-template-columns: 1fr;
}

.ph-6,
.ph-3 {grid-template-columns: repeat(2,
1fr);
}

.project-nav {flex-direction: column;
}

.project-nav a {width: 100%;
}
}


/* === pages/legal-standalone.css === */
:root {--bg: #000;
  --fg: #fff;
  --muted: rgba(255,
255,
255,
.72);
  --muted2: rgba(255,
255,
255,
.52);
  --line: rgba(255,
255,
255,
.14);
  --soft: rgba(255,
255,
255,
.08);
  --max: 1100px;
  --pad: 22px;
  --radius: 18px;
  --radius2: 12px;
  --topbar-h: 64px;
  --shadow: 0 8px 30px rgba(0,
0,
0,
.45);
  --font: ui-sans-serif,
system-ui,
-apple-system,
Segoe UI,
Roboto,
Helvetica,
Arial,
"Apple Color Emoji",
"Segoe UI Emoji";
  --fs-h1: clamp(40px,
5vw,
52px);
  --fs-h2: clamp(26px,
3vw,
32px);
  --fs-h3: 18px;
  --fs-body: 16px;
  --fs-lead: 18px;
  --lh-tight: 1.15;
  --lh-normal: 1.45;
  --lh-loose: 1.65;
}

* {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;
  font-kerning: normal;
  font-feature-settings: "kern" 1,
"liga" 1;
}

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;
}

.section .container.narrow p + p {margin-top: 12px;
}

.section .container.narrow h2 + p {margin-top: 10px;
}

.section .container.narrow p + .lead {font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--fg);
  opacity: .92;
}

.section {padding: clamp(56px,
7vw,
92px) 0;
}

.section h2 {font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  margin: 0 0 14px;
  letter-spacing: .2px;
}

.section p {margin: 10px 0;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
}

.lead {font-size: clamp(16px,
1.25vw,
19px);
  line-height: 1.55;
  color: var(--fg);
  opacity: .92;
  max-width: 70ch;
}

.topbar {position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  background: rgba(0,
0,
0,
.88);
  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: 12px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.logo {font-weight: 600;
  letter-spacing: .6px;
  text-transform: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
}

.logo:hover {background: var(--soft);
}

.nav {display: flex;
  align-items: center;
  gap: 10px;
}

.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);
  border: none;
  background: rgba(255,
255,
255,
.06);
}

.nav-cta:hover {background: rgba(255,
255,
255,
.10);
}

.nav-services {position: relative;
}

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

.topbar .nav {position: relative;
}

.services-menu {position: absolute;
  top: calc(var(--topbar-h) - 6px);
  right: calc(var(--pad));
  width: min(320px,
calc(100vw - 2*var(--pad)));
  background: rgba(0,
0,
0,
.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: rgba(255,
255,
255,
.10);
}

.services-menu small {color: var(--muted2);
}

main {padding-top: var(--topbar-h);
}

.hero {position: relative;
  padding: clamp(84px,
9vw,
120px) 0 clamp(56px,
6vw,
84px);
  overflow: hidden;
}

.hero::before {content: "";
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 520px;
  background: radial-gradient(closest-side,
rgba(255,
255,
255,
.10),
rgba(255,
255,
255,
0));
  
  filter: blur(8px);
  opacity: .9;
}

.hero::after {content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
transparent,
rgba(255,
255,
255,
.16),
transparent);
  opacity: .9;
}

.hero .container {position: relative;
}

.hero-kicker {display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  border: none;
  background: rgba(255,
255,
255,
.05);
  color: rgba(255,
255,
255,
.78);
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.hero-divider{height: 1px !important;
  background: rgba(255,
255,
255,
.22);
}

.hero h1 {font-size: var(--fs-h1);
  line-height: 1.02;
  margin: 0 0 18px;
  letter-spacing: -0.6px;
}

.hero-sub {font-size: var(--fs-lead);
  line-height: 1.4;
  margin: 0 0 14px;
  color: var(--fg);
  opacity: .94;
  max-width: 68ch;
}

.hero-desc {max-width: 72ch;
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
}

.hero-cta {display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.hero h1::after {content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin-top: 18px;
  background: linear-gradient(90deg,
rgba(255,
255,
255,
.6),
rgba(255,
255,
255,
0));
  opacity: .6;
}

.btn {display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  border: none;
  color: var(--fg);
  background: rgba(255,
255,
255,
.06);
  transition: transform .08s ease,
background .15s ease,
border-color .15s ease;
  min-height: 44px;
  cursor: pointer;
}

.btn:hover {background: rgba(255,
255,
255,
.10);
  border-color: rgba(255,
255,
255,
.22);
}

.btn:active {transform: translateY(1px);
}

.btn.primary {background: rgba(255,
255,
255,
.14);
}

.btn.primary:hover {background: rgba(255,
255,
255,
.18);
}

.btn.secondary {background: transparent;
}

body.home .btn.secondary {background: transparent;
}

.services-grid {display: grid;
  grid-template-columns: repeat(3,
minmax(0,
1fr));
  gap: 14px;
  margin-top: 18px;
}

.service-card {border: none;
  border-radius: 18px;
  padding: 18px;
  background: rgba(255,
255,
255,
.04);
  transition: transform .12s ease,
background .15s ease,
border-color .15s ease;
  min-height: 140px;
}

.service-card:hover {background: rgba(255,
255,
255,
.07);
  border-color: rgba(255,
255,
255,
.22);
  transform: translateY(-2px);
}

.service-card h3 {margin: 0 0 8px;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--fg);
}

.service-card p {margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.process-icons {margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4,
minmax(0,
1fr));
  gap: 24px;
  align-items: start;
}

@media (max-width: 1200px) {.process-icons {grid-template-columns: repeat(2,
minmax(0,
1fr));
}
}

@media (max-width: 640px) {.process-icons {grid-template-columns: repeat(2,
minmax(0,
1fr));
}
}

.pitem {text-align: center;
}

.picon {width: 54px;
  height: 54px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: none;
  background: rgba(255,
255,
255,
.03);
}

.picon svg {width: 26px;
  height: 26px;
  color: rgba(255,
255,
255,
.78);
}

.ptitle {font-size: 15px;
  letter-spacing: .2px;
  color: var(--fg);
  margin: 0 0 6px;
  font-weight: 600;
}

.pdesc {font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 980px) {.process-icons {margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4,
minmax(0,
1fr));
  gap: 24px;
  align-items: start;
}

@media (max-width: 1200px) {.process-icons {grid-template-columns: repeat(2,
minmax(0,
1fr));
}
}

@media (max-width: 640px) {.process-icons {grid-template-columns: repeat(2,
minmax(0,
1fr));
}
}
}

@media (max-width: 620px) {.process-icons {margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4,
minmax(0,
1fr));
  gap: 24px;
  align-items: start;
}

@media (max-width: 1200px) {.process-icons {grid-template-columns: repeat(2,
minmax(0,
1fr));
}
}

@media (max-width: 640px) {.process-icons {grid-template-columns: repeat(2,
minmax(0,
1fr));
}
}

.pitem {text-align: left;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  align-items: center;
}

.picon {margin: 0;
}

.ptitle {margin: 0 0 4px;
}
}

.section-intro {color: var(--muted);
  max-width: 70ch;
}

.portfolio-grid {display: grid;
  grid-template-columns: repeat(3,
minmax(0,
1fr));
  gap: 14px;
  margin-top: 18px;
}

.portfolio-item {height: 220px;
  border-radius: 18px;
  border: none;
  display: block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.portfolio-item.has-thumb::before {content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
rgba(0,
0,
0,
0) 55%,
rgba(0,
0,
0,
.35) 100%);
  
}

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

@media (max-width: 980px) {.services-grid {grid-template-columns: repeat(2,
minmax(0,
1fr));
}

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

@media (max-width: 620px) {.nav a {display: none;
}

.nav a.nav-cta {display: inline-flex;
}

.services-menu {right: var(--pad);
}

.services-grid {grid-template-columns: 1fr;
}

.portfolio-grid {grid-template-columns: 1fr;
}
}

.portfolio-modal::before,
.portfolio-modal::after {content: none !important;
  display: none !important;
}

.modal {position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
  padding: 20px;
}

.modal[aria-hidden="false"] {display: flex;
  align-items: center;
  justify-content: center;
}

.modal__backdrop {position: absolute;
  inset: 0;
  background: rgba(0,
0,
0,
.72);
  backdrop-filter: blur(6px);
}

.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);
}

.modal__frame {aspect-ratio: 16/9;
  width: 100%;
  background: rgba(255,
255,
255,
.04);
}

.modal__frame iframe {width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.section.services .services-grid {display: grid !important;
  grid-template-columns: repeat(4,
minmax(0,
1fr)) !important;
  gap: 24px !important;
}

@media (max-width: 1100px) {.section.services .services-grid {grid-template-columns: repeat(2,
minmax(0,
1fr)) !important;
}
}

@media (max-width: 640px) {.section.services .services-grid {grid-template-columns: 1fr !important;
}
}

.section.process .process-icons {margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4,
minmax(0,
1fr));
  gap: 24px;
  align-items: start;
}

@media (max-width: 1200px) {}

@media (max-width: 640px) {}

.section.process .pitem {margin: 0 !important;
}

@media (max-width: 1200px) {.section.process .process-icons {margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4,
minmax(0,
1fr));
  gap: 24px;
  align-items: start;
}

@media (max-width: 1200px) {.process-icons {grid-template-columns: repeat(2,
minmax(0,
1fr));
}
}

@media (max-width: 640px) {.process-icons {grid-template-columns: repeat(2,
minmax(0,
1fr));
}
}
}

@media (max-width: 640px) {.section.process .process-icons {margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4,
minmax(0,
1fr));
  gap: 24px;
  align-items: start;
}

@media (max-width: 1200px) {.process-icons {grid-template-columns: repeat(2,
minmax(0,
1fr));
}
}

@media (max-width: 640px) {.process-icons {grid-template-columns: repeat(2,
minmax(0,
1fr));
}
}
}

.section.process .pdesc {font-size: 0.78rem;
  line-height: 1.35;
  max-width: 22ch;
  margin-inline: auto;
}

.contact-visual {order: -1;
  display: flex;
  justify-content: flex-end;
}




.section.contact.contact-band {border-top: 0;
  border-bottom: 0;
  margin-top: 0;
  padding: clamp(56px,
7vw,
92px) 0;
}

.contact-grid {display: grid;
  grid-template-columns: 0.9fr 1.5fr;
  gap: 28px;
  align-items: center;
}

.contact-visual img {width: min(320px,
100%);
  height: auto;
  filter: drop-shadow(0 18px 50px rgba(0,
0,
0,
.55));
}

.contact-copy h2 {font-size: clamp(28px,
4vw,
42px);
  line-height: 1.1;
  margin: 0 0 10px;
}

.contact-copy p {margin-top: 10px;
}

.contact-links {margin-top: 14px;
}

.contact-links a {color: var(--accent);
}

@media (max-width: 900px) {.contact-grid {grid-template-columns: 1fr;
  gap: 12px;
  text-align: center;
}

.contact-visual {justify-content: center;
}
}

@media (max-width: 700px) {}

@media (max-width: 480px) {}

#trayectoria #trayectoria 
#trayectoria #trayectoria #trayectoria


.modal {position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.modal[aria-hidden="false"] {display: block;
}

.modal__backdrop {position: absolute;
  inset: 0;
  background: rgba(0,
0,
0,
.5);
}

.modal__panel {position: relative;
  max-width: 960px;
  margin: 8vh auto;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
}

.portfolio-modal {cursor: pointer;
}



/* === 99-modes.css === */
/* 99-modes.css
   Architecture: exactly ONE mode is active at a time via <html data-mode="..."> set by assets/js/mode-manager.js
   This file intentionally contains only safe scaffolding + debug chip styling.
   Move per-mode overrides here gradually,
under html[data-mode="..."] selectors,
to keep modes isolated.
*/

/* Debug chip (click to toggle) */
#lzk-modechip{position:fixed;
  top:10px;
  left:10px;
  z-index:999999;
  padding:6px 10px;
  font: 12px/1.2 ui-monospace,
SFMono-Regular,
Menlo,
Monaco,
Consolas,
"Liberation Mono",
"Courier New",
monospace;
  border-radius: 10px;
  background: rgba(0,
0,
0,
.72);
  color:#fff;
  border:1px solid rgba(255,
255,
255,
.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  user-select:none;
  cursor:pointer;
}
#lzk-modechip small{display:block;
  opacity:.75;
  margin-top:2px;
}

/* If user hides it */
html[data-modechip="off"] #lzk-modechip{display:none; }

/* ===== Mode scaffolding (empty by design) ===== */
html[data-mode="mobile-portrait"]{}html[data-mode="mobile-landscape"]{}html[data-mode="tablet-portrait"]{/* MIGRATION #1 (proof): HOME — "Proceso de trabajo" must stay 4 columns in tablet portrait */
}


/* HOME — Proceso de trabajo: force 4 columns on larger modes (override legacy MQs) */
html[data-mode="tablet-portrait"] #proceso .process-icons,
html[data-mode="tablet-portrait"] .section.process .process-icons,
html[data-mode="tablet-landscape"] #proceso .process-icons,
html[data-mode="tablet-landscape"] .section.process .process-icons,
html[data-mode="laptop"] #proceso .process-icons,
html[data-mode="laptop"] .section.process .process-icons,
html[data-mode="desktop"] #proceso .process-icons,
html[data-mode="desktop"] .section.process .process-icons{display: grid;
  grid-template-columns: repeat(4,
minmax(0,
1fr));
  gap: 24px;
}


/* ============================================================
   LAB — CTA rail alignment (iPad 13 portrait / tablet-portrait)
   Goal: align CTA content to the same inner (narrow) rail used
   across text-heavy sections for readability.
   ============================================================ */
html[data-mode="tablet-portrait"] .lab-page .lab-cta-inner.container{max-width: 860px;
}

/* Autoplay overlay (center-center) to fully cover Vimeo endscreen during auto-advance */
.lzk-autonext-overlay{position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  display:none;          /* hidden by default */
  align-items:center;
  justify-content:center;
  background:#000 !important;       /* 100% black */
  opacity:1 !important;             /* never translucent */
  z-index:999;           /* above iframe + controls */
  pointer-events:none;   /* switched on when visible */
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
}
.lzk-autonext-overlay,
.lzk-autonext-overlay *{user-select:none !important;
  -webkit-user-select:none !important;
  -ms-user-select:none !important;
  -webkit-tap-highlight-color: transparent;
}
/* Even if some browser ends up selecting text,
never show selection highlight */
.lzk-autonext-overlay ::selection{background: transparent !important; color: inherit !important; }
.lzk-autonext-overlay ::-moz-selection{background: transparent !important; color: inherit !important; }
.lzk-autonext-overlay.is-visible{display:flex;
  pointer-events:auto;   /* block taps/clicks */
}

/* When the autonext overlay is active,
force the video frame itself to be pure black.
   This avoids any browser-specific highlight/selection-looking artifacts over light frame backgrounds (white skin). */
.modal__frame.lzk-autonext-active{background:#000 !important;
}

.lzk-autonext-overlay__inner{display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:18px 20px;
  border-radius:16px;
  background:transparent;
}
.lzk-autonext-overlay__label{font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  opacity:.92;
}
.lzk-autonext-overlay__count{font-size:34px;
  line-height:1;
  letter-spacing:.02em;
  color:#fff;
}


/* End-of-playlist panel (CTA buttons) */
.lzk-autonext-overlay__msg{font-size:14px;
  line-height:1.35;
  color:#fff;
  opacity:.9;
  text-align:center;
  max-width: 26ch;
}
.lzk-autonext-overlay__actions{display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  margin-top: 6px;
}
.lzk-autonext-btn{appearance:none;
  border:1px solid rgba(255,
255,
255,
.18);
  background: rgba(255,
255,
255,
.10);
  color:#fff;
  font-size:13px;
  padding:10px 14px;
  border-radius:999px;
  cursor:pointer;
  outline:none;
  box-shadow:none;
}
.lzk-autonext-btn:focus,
.lzk-autonext-btn:focus-visible{outline:none !important;
  box-shadow:none !important;
}
.lzk-autonext-btn:hover{background: rgba(255,
255,
255,
.14);
}
.lzk-autonext-btn--ghost{background: transparent;
  border-color: rgba(255,
255,
255,
.12);
  opacity:.9;
}


/* Prevent accidental text selection while overlays/panels are shown (fixes "selected text" look in white skin) */
.lzk-no-select,
.lzk-no-select *{user-select:none !important;
  -webkit-user-select:none !important;
  -ms-user-select:none !important;
  -webkit-tap-highlight-color: transparent;
}
.lzk-no-select *:focus{outline:none !important;
}



/* v48 — Force LAB/PRO hero typography parity (override skins.css hero sizing) */
body.lab-page .hero .hero-sub,
body.lab-page .hero .hero-desc{font-size: 14px !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;
  max-width: 460px !important;
  color: var(--muted) !important;
  opacity: .70 !important;
}

body.pro .hero .hero-desc{font-size: 14px !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;
  max-width: 460px !important;
  color: var(--muted) !important;
  opacity: .70 !important;
}


/* === ISO FIX: HOME process icons visibility === */
/* Ensure process icons keep their intended minimal style and remain visible,
regardless of generic .picon styling used elsewhere. */
.section.process .process-icons .picon{width: 28px;
  height: 28px;
  background: none;
  border: 0;
  border-radius: 0;
  display: block;
  margin: 0;
  opacity: .9;
}
.section.process .process-icons .picon svg{width: 100%;
  height: 100%;
  display: block;
  color: var(--fg);
}



/* ISO PATCH: Modal centering + Golubo desktop (no !important) */

/* Ensure Video modal panel is centered in all viewports (Safari-safe) */
#video-modal.is-open .modal__panel,
#video-modal[aria-hidden="false"] .modal__panel{position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,
-50%);
  margin: 0;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
}

/* Ensure Golubo modal can open on desktop too */
#gmModal.is-open,
#gmModalV2.is-open{display: flex;
  align-items: center;
  justify-content: center;
}


/* ISO PATCH: center PRO/Freelance modal panel (keep scoped) */
#pro-freelance-modal.is-open .modal__panel,
#pro-freelance-modal[aria-hidden="false"] .modal__panel{position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,
-50%);
  margin: 0;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
}

/* v18: make hero title underline visible in WHITE skin (keep BLACK unchanged) */

/* v19: strengthen lower hero divider (all skins) */
.hero-divider{height: 1px !important;
  background: rgba(255,
255,
255,
.22);
}


/* v22: restore hero divider gradient + width,
unify to the subtle PRO/LAB look */
.hero-divider{height: 1px !important;
  width: min(520px,
100%) !important;
  background: linear-gradient(90deg,
rgba(255,
255,
255,
.22),
rgba(255,
255,
255,
.06)) !important;
  opacity: .22 !important;
}


/* v25: restore/boost PRESENTACION band background (grid + subtle color glow) */
#presentacion .lz-band{background:
    radial-gradient(1200px 500px at 20% 40%,
rgba(57,
215,
255,
.22),
transparent 60%),
radial-gradient(900px 400px at 80% 20%,
rgba(255,
59,
209,
.16),
transparent 55%),
linear-gradient(180deg,
rgba(14,
14,
14,
1),
rgba(0,
0,
0,
1)),
repeating-linear-gradient(90deg,
rgba(255,
255,
255,
.08) 0 1px,
transparent 1px 56px),
repeating-linear-gradient(0deg,
rgba(255,
255,
255,
.06) 0 1px,
transparent 1px 56px);
}


/* v26: FIX presentacion band grid visibility (grid layers must sit ABOVE panel gradient) */
#presentacion .lz-band{background:
    radial-gradient(1200px 500px at 20% 40%,
rgba(57,
215,
255,
.22),
transparent 60%),
radial-gradient(900px 400px at 80% 20%,
rgba(255,
59,
209,
.16),
transparent 55%),
repeating-linear-gradient(90deg,
rgba(255,
255,
255,
.08) 0 1px,
transparent 1px 56px),
repeating-linear-gradient(0deg,
rgba(255,
255,
255,
.06) 0 1px,
transparent 1px 56px),
linear-gradient(180deg,
rgba(14,
14,
14,
.92),
rgba(0,
0,
0,
1));
}



.modal {z-index: 20000 !important;
}

/* v29: Fix HOME iframe top "fringe" — prevent hero glow pseudo-element from bleeding above in embed mode */
body.embed-shell .hero::before{inset: 0 !important;
}

/* v31: PRO Freelance modal footer matches universal modal bar (background + divider) */
#pro-freelance-modal .modal__footer{background: var(--modalbar-bg);
  border-top: 1px solid var(--modalbar-border);
}

/* v37: Unified band background (Presentacion + CTA) driven by tokens */
#presentacion .lz-band,
.contact-band.lz-band{background:
    radial-gradient(1200px 500px at 20% 40%,
var(--band-glow-a),
transparent 62%),
radial-gradient(900px 400px at 80% 20%,
var(--band-glow-b),
transparent 58%),
repeating-linear-gradient(90deg,
var(--band-grid-a) 0 1px,
transparent 1px 56px),
repeating-linear-gradient(0deg,
var(--band-grid-b) 0 1px,
transparent 1px 56px),
linear-gradient(180deg,
var(--band-base-a),
var(--band-base-b)),
var(--band-img) center/cover no-repeat;
}


/* v38: Unify LAB CTA background with band tokens (same material as Presentacion + CTAs) */
.lab-cta-bg{background:
    radial-gradient(1200px 500px at 20% 40%,
var(--band-glow-a),
transparent 62%),
radial-gradient(900px 400px at 80% 20%,
var(--band-glow-b),
transparent 58%),
repeating-linear-gradient(90deg,
var(--band-grid-a) 0 1px,
transparent 1px 56px),
repeating-linear-gradient(0deg,
var(--band-grid-b) 0 1px,
transparent 1px 56px),
linear-gradient(180deg,
var(--band-base-a),
var(--band-base-b)),
var(--band-img) center/cover no-repeat;
}

/* v39: Single source of truth for CTA/Band background */
#presentacion .lz-band,
.contact-band.lz-band,
.lab-cta-bg{background: var(--cta-band-bg) !important;
}

/* v40: LAB CTA uses unified band bg without extra overlay grid (removes double lines) */
.lab-cta-bg{opacity: 1 !important;
}
.lab-cta-bg::after{content: none !important;
  display: none !important;
  background: none !important;
}

/* v43: PRO-only CTA background image (others stay grid+gradient) */
body.pro .contact-band.lz-band{position: relative;
}
body.pro .contact-band.lz-band::before{content: "";
  position: absolute;
  inset: 0;
  background: var(--cta-band-img, url("/assets/img/_others/relampagos.jpg")) center/cover no-repeat;
  opacity: 0.28;
  pointer-events: none;
  border-radius: inherit;
}
body.pro .contact-band.lz-band > *{position: relative;
  z-index: 1;
}



.ag-modal__bar button,
.modal__footer button,
.gm-footer button,
.gm2-footer button,
.ag-modal__bar a,
.modal__footer a,
.gm-footer a,
.gm2-footer a{color: var(--fg) !important;
}

.ag-modal__bar button,
.modal__footer button,
.gm-footer button,
.gm2-footer button,
.ag-modal__bar a,
.modal__footer a,
.gm-footer a,
.gm2-footer a{color: var(--fg) !important;
}

/* =====================================================================
   Skin-driven UI bars (TOPBAR + MODAL BARS)
   Goal: Yellow is the "seed". Any new skin only changes token values.
   These rules must NOT be duplicated per-skin.
   ===================================================================== */

:root{
  /* Modal bar tokens (derived from existing skin tokens) */
  --modalbar-bg: var(--footer-bg);
  --modalbar-border: var(--footer-border);
  --modalbar-fg: var(--footer-fg, var(--fg));

  /* Button tokens (work on light & dark bars) */
  --modalbtn-bg: color-mix(in srgb, var(--modalbar-fg) 12%, transparent);
  --modalbtn-bg-hover: color-mix(in srgb, var(--modalbar-fg) 18%, transparent);
  --modalbtn-border: color-mix(in srgb, var(--modalbar-fg) 28%, transparent);
  --modalbtn-fg: var(--modalbar-fg);
}

/* Shell topbar (navbar) */
.topbar{
  background: var(--topbar-bg) !important;
  border-bottom: 1px solid var(--topbar-border) !important;
  color: var(--topbar-fg) !important;
}

/* Universal modal bar / footer (PRO cards modal) */
.ag-modal__bar{
  background: var(--modalbar-bg) !important;
  border-top: 1px solid var(--modalbar-border) !important;
  color: var(--modalbar-fg) !important;
}

/* Golubo / Freelance modal footer bars (legacy variants) */
.gm-footer, .gm2-footer{
  background: var(--modalbar-bg) !important;
  border-top: 1px solid var(--modalbar-border) !important;
  color: var(--modalbar-fg) !important;
}

/* Golubo / Freelance modal nav groups (legacy variants) */
.gm-nav, .gm2-nav{
  background: transparent !important;
  border-top: 0 !important;
  color: var(--modalbar-fg) !important;
}
/* Safety: remove "extra rectangle" behind controls */
.gm-nav__controls, .gm2-nav__controls,
.gm-footer__controls, .gm2-footer__controls,
.gm-controls, .gm2-controls{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Make footer buttons consistently "circles" across skins */
.ag-btn,
.modal__navbtn,
.gm-nav__btn, .gm2-nav__btn,
.gm-footer__btn, .gm2-footer__btn{
  border-radius: 999px !important;
  background: var(--modalbtn-bg) !important;
  border: 1px solid var(--modalbtn-border) !important;
  color: var(--modalbtn-fg) !important;
}

.ag-btn:hover,
.modal__navbtn:hover,
.gm-nav__btn:hover, .gm2-nav__btn:hover,
.gm-footer__btn:hover, .gm2-footer__btn:hover{
  background: var(--modalbtn-bg-hover) !important;
}

/* =====================================================================
   v69 BLUE initiative: remove per-skin selectors from app.css
   Contract: structural rules are generic, skin differences live only in tokens.css
   ===================================================================== */

/* Token-driven hero underline/divider (replaces WHITE-only overrides) */
.hero h1::after{background: var(--hero-underline-bg) !important;}
.hero-divider{background: var(--hero-divider-bg) !important;}

/* Token-driven trayectoria nav foreground (replaces WHITE-only override) */
#trayectoria .exp-nav{color: var(--exp-nav-fg) !important;}


/* Helmet shadow fix */
.lz-split__media { overflow: visible; }



/* Helmet shadow: prevent cut by next section background (paint order)
   1) Give the media block breathing room so shadow stays within section.
   2) Ensure presentacion paints above following band if overlap still occurs. */
#presentacion{ position: relative; z-index: 2; }
.lz-band{ position: relative; z-index: 1; }
#presentacion .lz-split__media{ padding-bottom: 28px; }



/* --- SWATCH v16 MICROFIX: unify glass backgrounds --- */
.hero-kicker,
.service-card,
.service-card:hover{
    background-color: #FFFFFF24;
}


/* --- SWATCH v17 EXP: Lottie helmet sizing --- */
.lz-helmet-wrap{ display:block; }
.lz-helmet--lottie{ width:100%; height:100%; }
.lz-helmet--lottie svg{ width:100% !important; height:100% !important; display:block; }


/* Reel smooth transition */
.reel-embed video,
.reel-embed iframe{
  opacity:0;
  transition:opacity .35s ease;
  background:#ffffff;
}

.reel-embed.is-loaded video,
.reel-embed.is-loaded iframe{
  opacity:1;
}

.reel-embed .reel-skeleton{
  opacity:1;
  transition:opacity .35s ease;
}

.reel-embed.is-loaded .reel-skeleton{
  opacity:0;
  pointer-events:none;
}

/* v75: Reel — remove top "hairline" caused by shadow blur */
.home-page .reel-embed,
.home .reel-embed{
  box-shadow: none !important;
}

/* v76: Reel skeleton shimmer (subtle) */
.reel-embed .reel-skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 100%);
  transform:translateX(-60%);
  animation:reelShimmer 1.6s ease-in-out infinite;
  mix-blend-mode:overlay;
  pointer-events:none;
}
.reel-embed.is-loaded .reel-skeleton::after{
  animation:none;
  opacity:0;
}
@keyframes reelShimmer{
  0%{ transform:translateX(-60%); }
  100%{ transform:translateX(60%); }
}

/* v101: laptop rail fix for shell chrome
   tokens.css loads before app.css, so shell rules must be repeated here late
   to ensure navbar/footer obey Laptop(inner) vs Desktop(outer). */
@media (min-width: 1024px) and (max-height: 820px) {
  .topbar-inner,
  .footer.footerbar > .container,
  .footer.footerbar .footerbar__inner{
    max-width: var(--laptop-rail) !important;
    width: 100%;
    margin-inline: auto;
  }
}

@media (min-width: 1200px) and (min-height: 821px) {
  .topbar-inner,
  .footer.footerbar > .container,
  .footer.footerbar .footerbar__inner{
    max-width: var(--max) !important;
  }
}


/* v103: LAB / PFC spacing and precision alignment by explicit mode */
html[data-mode="desktop"] .lab-page #pfc .pfc-grid{
  gap: 28px;
}

html[data-mode="laptop"] .lab-page #pfc .pfc-grid{
  gap: 20px;
  align-items: stretch;
}

html[data-mode="laptop"] .lab-page #pfc .pfc-grid > *{
  min-width: 0;
}

html[data-mode="laptop"] .lab-page #pfc .pfc-col--content{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  min-height: 100%;
}

html[data-mode="laptop"] .lab-page #pfc .pfc-text{
  min-height: 0;
}

html[data-mode="laptop"] .lab-page #pfc .pfc-text p{
  font-size: 1rem;
  line-height: 1.48;
}

html[data-mode="laptop"] .lab-page #pfc .pfc-image-row{
  gap: 12px;
  margin-top: auto;
  align-self: stretch;
}

html[data-mode="laptop"] .lab-page #pfc .pfc-image-card{
  aspect-ratio: 4 / 3;
}

/* v104: Responsive Canon v1
   One global mode bridge for structural layout so major modules switch together.
   This block lives LAST on purpose and overrides mixed legacy MQs. */
html[data-mode]{
  --mode-rail: var(--max);
  --mode-shell-rail: var(--max);
  --mode-pfc-gap: 12px;
  --mode-pfc-thumb-ratio: 1 / 1;
}

html[data-mode="laptop"]{
  --mode-rail: 860px;
  --mode-shell-rail: 860px;
  --mode-pfc-gap: 24px;
  --mode-pfc-thumb-ratio: 1 / 1;
}

html[data-mode="desktop"]{
  --mode-rail: var(--max);
  --mode-shell-rail: var(--max);
  --mode-pfc-gap: 28px;
  --mode-pfc-thumb-ratio: 1 / 1;
}

/* Core rail bridge: sections, shell chrome, and known band/CTA exceptions obey the same mode rail. */
html[data-mode="laptop"] .section > .container,
html[data-mode="desktop"] .section > .container,
html[data-mode="laptop"] .topbar-inner,
html[data-mode="desktop"] .topbar-inner,
html[data-mode="laptop"] .footer.footerbar > .container,
html[data-mode="desktop"] .footer.footerbar > .container,
html[data-mode="laptop"] .footer.footerbar .footerbar__inner,
html[data-mode="desktop"] .footer.footerbar .footerbar__inner,
html[data-mode="laptop"] body.home #presentacion .lz-band > .container,
html[data-mode="desktop"] body.home #presentacion .lz-band > .container,
html[data-mode="laptop"] body.lab-page .lab-cta-inner,
html[data-mode="desktop"] body.lab-page .lab-cta-inner{
  max-width: var(--mode-rail) !important;
  width: 100%;
  margin-inline: auto;
}

html[data-mode="laptop"] .topbar-inner,
html[data-mode="desktop"] .topbar-inner,
html[data-mode="laptop"] .footer.footerbar > .container,
html[data-mode="desktop"] .footer.footerbar > .container,
html[data-mode="laptop"] .footer.footerbar .footerbar__inner,
html[data-mode="desktop"] .footer.footerbar .footerbar__inner{
  max-width: var(--mode-shell-rail) !important;
}

/* PFC goes back to a calm two-column layout, then mode vars adjust spacing together. */
html[data-mode="laptop"] .lab-page #pfc .pfc-grid,
html[data-mode="desktop"] .lab-page #pfc .pfc-grid{
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--mode-pfc-gap);
  align-items: start;
}

html[data-mode="laptop"] .lab-page #pfc .pfc-grid > *,
html[data-mode="desktop"] .lab-page #pfc .pfc-grid > *{
  min-width: 0;
}

html[data-mode="laptop"] .lab-page #pfc .pfc-col--content,
html[data-mode="desktop"] .lab-page #pfc .pfc-col--content{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.1rem;
  height: 100%;
  min-height: 0;
}

html[data-mode="laptop"] .lab-page #pfc .pfc-image-row,
html[data-mode="desktop"] .lab-page #pfc .pfc-image-row{
  gap: 12px;
  margin-top: auto;
}

html[data-mode="laptop"] .lab-page #pfc .pfc-image-card,
html[data-mode="desktop"] .lab-page #pfc .pfc-image-card{
  aspect-ratio: var(--mode-pfc-thumb-ratio);
}


/* v105: Responsive Canon v2
   Unify the most common structural split modules so Laptop/Desktop jump together.
   This stays scoped to explicit modes only; tablet/mobile keep their existing rules. */
html[data-mode]{
  --mode-split-top-cols: minmax(0, 1fr);
  --mode-split-band-cols: minmax(0, 1fr);
  --mode-two-col-cols: minmax(0, 1fr);
  --mode-layout-2col-cols: minmax(0, 1fr);
  --mode-split-gap: 24px;
  --mode-two-col-gap: 14px;
  --mode-layout-2col-gap: 12px;
}

html[data-mode="laptop"]{
  --mode-split-top-cols: minmax(0, 1.35fr) minmax(0, .65fr);
  --mode-split-band-cols: minmax(0, .75fr) minmax(0, 1.25fr);
  --mode-two-col-cols: minmax(0, 1fr) minmax(0, 1fr);
  --mode-layout-2col-cols: minmax(0, 1fr) minmax(0, 1.55fr);
  --mode-split-gap: 24px;
  --mode-two-col-gap: 16px;
  --mode-layout-2col-gap: 14px;
}

html[data-mode="desktop"]{
  --mode-split-top-cols: minmax(0, 1.35fr) minmax(0, .65fr);
  --mode-split-band-cols: minmax(0, .75fr) minmax(0, 1.25fr);
  --mode-two-col-cols: minmax(0, 1fr) minmax(0, 1fr);
  --mode-layout-2col-cols: minmax(0, 1fr) minmax(0, 1.55fr);
  --mode-split-gap: 28px;
  --mode-two-col-gap: 20px;
  --mode-layout-2col-gap: 18px;
}

html[data-mode="laptop"] .lz-split--top,
html[data-mode="desktop"] .lz-split--top,
html[data-mode="laptop"] .lz-split--band,
html[data-mode="desktop"] .lz-split--band,
html[data-mode="laptop"] .two-col,
html[data-mode="desktop"] .two-col,
html[data-mode="laptop"] .layout-2col,
html[data-mode="desktop"] .layout-2col{
  min-width: 0;
}

html[data-mode="laptop"] .lz-split--top,
html[data-mode="desktop"] .lz-split--top{
  grid-template-columns: var(--mode-split-top-cols);
  gap: var(--mode-split-gap);
  align-items: start;
}

html[data-mode="laptop"] .lz-split--band,
html[data-mode="desktop"] .lz-split--band{
  grid-template-columns: var(--mode-split-band-cols);
  gap: var(--mode-split-gap);
  align-items: center;
}

html[data-mode="laptop"] .two-col,
html[data-mode="desktop"] .two-col{
  grid-template-columns: var(--mode-two-col-cols);
  gap: var(--mode-two-col-gap);
  align-items: stretch;
}

html[data-mode="laptop"] .layout-2col,
html[data-mode="desktop"] .layout-2col{
  grid-template-columns: var(--mode-layout-2col-cols);
  gap: var(--mode-layout-2col-gap);
  align-items: start;
}

html[data-mode="laptop"] .two-col > *,
html[data-mode="desktop"] .two-col > *,
html[data-mode="laptop"] .layout-2col > *,
html[data-mode="desktop"] .layout-2col > *,
html[data-mode="laptop"] .lz-split--top > *,
html[data-mode="desktop"] .lz-split--top > *,
html[data-mode="laptop"] .lz-split--band > *,
html[data-mode="desktop"] .lz-split--band > *{
  min-width: 0;
}


/* v106: Responsive Canon v3
   Extend the same mode logic to SECRET, legal/privacy, and individual project pages.
   Goal: auxiliary pages must obey the same laptop/desktop rhythm as HOME/PRO/LAB. */
html[data-mode]{
  --mode-narrow-rail: min(100%, 760px);
  --mode-grid-2-cols: minmax(0, 1fr);
  --mode-grid-2-gap: 14px;
  --mode-project-nav-gap: 12px;
}

html[data-mode="laptop"]{
  --mode-narrow-rail: min(100%, 860px);
  --mode-grid-2-cols: minmax(0, 1fr) minmax(0, 1fr);
  --mode-grid-2-gap: 16px;
  --mode-project-nav-gap: 14px;
}

html[data-mode="desktop"]{
  --mode-narrow-rail: min(100%, var(--max));
  --mode-grid-2-cols: minmax(0, 1fr) minmax(0, 1fr);
  --mode-grid-2-gap: 20px;
  --mode-project-nav-gap: 18px;
}

/* SECRET iframe page: keep its main wrapper on the same rail cadence. */
html[data-mode="laptop"] body.secret-page .secret-wrap > .container,
html[data-mode="desktop"] body.secret-page .secret-wrap > .container{
  max-width: var(--mode-rail) !important;
  width: 100%;
  margin-inline: auto;
}

/* Legal/privacy + individual project pages use .container.narrow outside the generic section pattern. */
html[data-mode="laptop"] body.case .container.narrow,
html[data-mode="desktop"] body.case .container.narrow,
html[data-mode="laptop"] body:not(.home):not(.pro):not(.lab-page):not(.secret-page):not(.case):not(.shell) main.section > .container,
html[data-mode="desktop"] body:not(.home):not(.pro):not(.lab-page):not(.secret-page):not(.case):not(.shell) main.section > .container{
  max-width: var(--mode-narrow-rail) !important;
  width: 100%;
  margin-inline: auto;
}

/* Project inner split/cards should also jump by mode together. */
html[data-mode="laptop"] body.case .grid-2,
html[data-mode="desktop"] body.case .grid-2{
  grid-template-columns: var(--mode-grid-2-cols);
  gap: var(--mode-grid-2-gap);
  align-items: start;
}

html[data-mode="laptop"] body.case .grid-2 > *,
html[data-mode="desktop"] body.case .grid-2 > *{
  min-width: 0;
}

html[data-mode="laptop"] body.case .project-nav,
html[data-mode="desktop"] body.case .project-nav{
  gap: var(--mode-project-nav-gap);
}

/* v107: Responsive Canon v4
   Bring the remaining high-visibility content grids under the same mode logic.
   Focus: process/services/contact/ag/portfolio blocks that still felt breakpoint-driven.
   Mobile/tablet legacy behavior stays intact; these overrides only win in laptop/desktop. */
html[data-mode]{
  --mode-services-cols: repeat(4, minmax(0,1fr));
  --mode-services-gap: 24px;
  --mode-process-cols: repeat(4, minmax(0,1fr));
  --mode-process-gap: 24px;
  --mode-contact-cols: minmax(0, 1fr);
  --mode-contact-gap: 24px;
  --mode-portfolio-cols: repeat(3, minmax(0,1fr));
  --mode-portfolio-gap: 14px;
  --mode-pro-ag-cols: repeat(4, minmax(0,1fr));
  --mode-lab-ag-cols: repeat(4, minmax(0,1fr));
  --mode-ag-gap: 12px;
}

html[data-mode="laptop"]{
  --mode-services-cols: repeat(4, minmax(0,1fr));
  --mode-services-gap: 22px;
  --mode-process-cols: repeat(4, minmax(0,1fr));
  --mode-process-gap: 22px;
  --mode-contact-cols: minmax(0, .95fr) minmax(0, 1.45fr);
  --mode-contact-gap: 24px;
  --mode-portfolio-cols: repeat(3, minmax(0,1fr));
  --mode-portfolio-gap: 14px;
  --mode-pro-ag-cols: repeat(5, minmax(0,1fr));
  --mode-lab-ag-cols: repeat(4, minmax(0,1fr));
  --mode-ag-gap: 12px;
}

html[data-mode="desktop"]{
  --mode-services-cols: repeat(4, minmax(0,1fr));
  --mode-services-gap: 24px;
  --mode-process-cols: repeat(4, minmax(0,1fr));
  --mode-process-gap: 24px;
  --mode-contact-cols: minmax(0, .9fr) minmax(0, 1.5fr);
  --mode-contact-gap: 28px;
  --mode-portfolio-cols: repeat(3, minmax(0,1fr));
  --mode-portfolio-gap: 14px;
  --mode-pro-ag-cols: repeat(5, minmax(0,1fr));
  --mode-lab-ag-cols: repeat(4, minmax(0,1fr));
  --mode-ag-gap: 12px;
}

html[data-mode="laptop"] .services-grid,
html[data-mode="desktop"] .services-grid,
html[data-mode="laptop"] .section.services .services-grid,
html[data-mode="desktop"] .section.services .services-grid,
html[data-mode="laptop"] .process-icons,
html[data-mode="desktop"] .process-icons,
html[data-mode="laptop"] .section.process .process-icons,
html[data-mode="desktop"] .section.process .process-icons,
html[data-mode="laptop"] .contact-grid,
html[data-mode="desktop"] .contact-grid,
html[data-mode="laptop"] .portfolio-grid,
html[data-mode="desktop"] .portfolio-grid,
html[data-mode="laptop"] #grafico .ag-grid,
html[data-mode="desktop"] #grafico .ag-grid,
html[data-mode="laptop"] .lab-archivo-grafico .ag-grid,
html[data-mode="desktop"] .lab-archivo-grafico .ag-grid{
  min-width: 0;
}

html[data-mode="laptop"] .services-grid,
html[data-mode="desktop"] .services-grid,
html[data-mode="laptop"] .section.services .services-grid,
html[data-mode="desktop"] .section.services .services-grid{
  grid-template-columns: var(--mode-services-cols) !important;
  gap: var(--mode-services-gap) !important;
}

html[data-mode="laptop"] .process-icons,
html[data-mode="desktop"] .process-icons,
html[data-mode="laptop"] .section.process .process-icons,
html[data-mode="desktop"] .section.process .process-icons,
html[data-mode="laptop"] #proceso .process-icons,
html[data-mode="desktop"] #proceso .process-icons{
  grid-template-columns: var(--mode-process-cols) !important;
  gap: var(--mode-process-gap) !important;
}

html[data-mode="laptop"] .contact-grid,
html[data-mode="desktop"] .contact-grid{
  grid-template-columns: var(--mode-contact-cols);
  gap: var(--mode-contact-gap);
  align-items: center;
}

html[data-mode="laptop"] .portfolio-grid,
html[data-mode="desktop"] .portfolio-grid,
html[data-mode="laptop"] .portfolio-grid.tight,
html[data-mode="desktop"] .portfolio-grid.tight{
  grid-template-columns: var(--mode-portfolio-cols);
  gap: var(--mode-portfolio-gap);
}

html[data-mode="laptop"] #grafico .ag-grid,
html[data-mode="desktop"] #grafico .ag-grid{
  grid-template-columns: var(--mode-pro-ag-cols);
  gap: var(--mode-ag-gap);
}

html[data-mode="laptop"] .lab-archivo-grafico .ag-grid,
html[data-mode="desktop"] .lab-archivo-grafico .ag-grid{
  grid-template-columns: var(--mode-lab-ag-cols);
  gap: var(--mode-ag-gap);
}

html[data-mode="laptop"] .services-grid > *,
html[data-mode="desktop"] .services-grid > *,
html[data-mode="laptop"] .section.services .services-grid > *,
html[data-mode="desktop"] .section.services .services-grid > *,
html[data-mode="laptop"] .process-icons > *,
html[data-mode="desktop"] .process-icons > *,
html[data-mode="laptop"] .section.process .process-icons > *,
html[data-mode="desktop"] .section.process .process-icons > *,
html[data-mode="laptop"] .contact-grid > *,
html[data-mode="desktop"] .contact-grid > *,
html[data-mode="laptop"] .portfolio-grid > *,
html[data-mode="desktop"] .portfolio-grid > *,
html[data-mode="laptop"] #grafico .ag-grid > *,
html[data-mode="desktop"] #grafico .ag-grid > *,
html[data-mode="laptop"] .lab-archivo-grafico .ag-grid > *,
html[data-mode="desktop"] .lab-archivo-grafico .ag-grid > *{
  min-width: 0;
}


/* v110: LAB / PFC exact-height sync hook for laptop
   JS writes --pfc-video-h and --pfc-thumb-h so both columns close on the same baseline. */
html[data-mode="laptop"] .lab-page #pfc .pfc-grid{
  align-items: stretch;
}

html[data-mode="laptop"] .lab-page #pfc .pfc-col--video,
html[data-mode="laptop"] .lab-page #pfc .pfc-col--content{
  min-height: 0;
}

html[data-mode="laptop"] .lab-page #pfc[data-sync="on"] .pfc-col--content{
  height: var(--pfc-video-h, auto);
}

html[data-mode="laptop"] .lab-page #pfc[data-sync="on"] .pfc-image-row{
  margin-top: auto;
  align-items: stretch;
}

html[data-mode="laptop"] .lab-page #pfc[data-sync="on"] .pfc-image-card{
  aspect-ratio: auto;
  height: var(--pfc-thumb-h, auto);
  min-height: 0;
}


/* v111: LAB / PFC laptop micro-tuning
   Compress copy rhythm slightly so right column closes level with the video. */
html[data-mode="laptop"] .lab-page #pfc .pfc-col--content{
  gap: .75rem;
}

html[data-mode="laptop"] .lab-page #pfc .pfc-text p{
  font-size: .96rem;
  line-height: 1.38;
}

html[data-mode="laptop"] .lab-page #pfc .pfc-image-row{
  gap: 10px;
}


/* v112: HOME / Servicios laptop card shape lock
   Keep the four service cards visually square in laptop so they do not become tall columns. */
html[data-mode="laptop"] body.home #servicios .services-grid{
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 18px !important;
}

html[data-mode="laptop"] body.home #servicios .service-card{
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  padding: 18px;
}

html[data-mode="laptop"] body.home #servicios .service-card h3{
  margin: 0 0 8px;
  font-size: clamp(1.05rem, 1.1vw, 1.35rem);
  line-height: 1.15;
}

html[data-mode="laptop"] body.home #servicios .service-card p{
  margin: 0;
  font-size: .92rem;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

/* === v115: embed HOME edge-trim (top/bottom visual fringes) === */
body.home.embed-shell .hero{
  padding-top: clamp(36px, 5vw, 56px) !important;
  padding-bottom: clamp(40px, 5vw, 64px) !important;
}

body.home.embed-shell main > .section:last-of-type{
  padding-bottom: clamp(20px, 3vw, 32px) !important;
}

body.home.embed-shell .contact-band,
body.home.embed-shell .contact.lz-band,
html[data-embed="1"] body.home .contact-band,
html[data-embed="1"] body.home .contact.lz-band{
  margin-bottom: 0 !important;
}

body.home.embed-shell .hero,
html[data-embed="1"] body.home .hero{
  margin-top: 0 !important;
}

/* v117: PRO CTA hotfix for legacy WHITE/BLACK skins */
html[data-skin="white"] body.pro .contact-band.lz-band,
html[data-skin="black"] body.pro .contact-band.lz-band,
html[data-skin="cinema"] body.pro .contact-band.lz-band{
  position: relative;
}
html[data-skin="white"] body.pro .contact-band.lz-band::before,
html[data-skin="black"] body.pro .contact-band.lz-band::before,
html[data-skin="cinema"] body.pro .contact-band.lz-band::before{
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  pointer-events: none;
  border-radius: inherit;
}
html[data-skin="white"] body.pro .contact-band.lz-band::before{
  background-image: linear-gradient(rgba(255,255,255,0.20),rgba(255,255,255,0.20)), url("../img/_others/relampagos.jpg") !important;
  opacity: 1 !important;
}
html[data-skin="black"] body.pro .contact-band.lz-band::before{
  background-image: url("../img/_others/relampagos.jpg") !important;
  opacity: 1 !important;
}
html[data-skin="white"] body.pro .contact-band.lz-band > *,
html[data-skin="black"] body.pro .contact-band.lz-band > *,
html[data-skin="cinema"] body.pro .contact-band.lz-band > *{
  position: relative;
  z-index: 1;
}

/* v121: mobile portrait shell viewport fix (measured chrome)
   Goal: use the REAL rendered heights of topbar/footer on phones.
   The old block used a hardcoded 72px footer, but the mobile footer can be taller
   depending on breakpoint/device, so the iframe could still end behind it.
*/
@media (max-width: 519px) and (orientation: portrait){
  :root{
    --shell-mobile-topbar-h: var(--topbar-h);
    --shell-mobile-footer-h: var(--footer-h);
  }

  body.shell{
    height: 100svh;
    height: 100dvh;
    min-height: 100svh;
    min-height: 100dvh;
    padding-bottom: 0 !important;
    overflow: hidden;
  }

  body.shell .shell-main{
    box-sizing: border-box;
    flex: 0 0 auto;
    height: 100%;
    padding-top: var(--shell-mobile-topbar-h);
    padding-bottom: calc(var(--shell-mobile-footer-h) + env(safe-area-inset-bottom, 0px));
  }

  body.shell .shell-frame{
    width: 100%;
    height: calc(100dvh - var(--shell-mobile-topbar-h) - (var(--shell-mobile-footer-h) + env(safe-area-inset-bottom, 0px)));
    height: calc(100svh - var(--shell-mobile-topbar-h) - (var(--shell-mobile-footer-h) + env(safe-area-inset-bottom, 0px)));
    min-height: 0 !important;
    display: block;
  }
}


/* v122: HOME reel — keep wrapper/video/iframe in the exact same box and remove white flash residue */
body.home #reel .reel-embed{
  background-color: var(--bg) !important;
  background-image: url("../img/reel/reel-thumb.jpg") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  isolation: isolate;
}
body.home #reel .reel-embed{
  border-radius: var(--r-lg) !important;
  overflow: hidden;
}
body.home #reel .reel-embed .reel-skeleton,
body.home #reel .reel-embed::before,
body.home #reel .reel-embed video,
body.home #reel .reel-embed iframe{
  border-radius: inherit;
}
body.home #reel .reel-embed::before,
body.home #reel .reel-embed .reel-skeleton{
  background-color: var(--bg) !important;
}
body.home #reel .reel-embed video,
body.home #reel .reel-embed iframe{
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  background: transparent !important;
}
body.home #reel .reel-embed iframe{
  color-scheme: auto;
}

/* v124: Responsive Canon v5 — Tablet
   Extend the same global-mode philosophy to tablet portrait/landscape so shell, rails,
   helper pages and the known rebel modules switch together instead of following legacy MQs.
   Portrait stays tighter/readable; landscape approaches laptop without fully opening desktop rails. */
html[data-mode="tablet-portrait"],
html[data-mode="tablet-landscape"]{
  --mode-rail: 860px;
  --mode-shell-rail: 860px;
  --mode-narrow-rail: min(100%, 860px);
  --mode-split-gap: 20px;
  --mode-two-col-gap: 16px;
  --mode-layout-2col-gap: 16px;
  --mode-services-gap: 18px;
  --mode-process-gap: 20px;
  --mode-contact-gap: 18px;
  --mode-portfolio-gap: 14px;
  --mode-ag-gap: 12px;
  --mode-pfc-gap: 18px;
}

html[data-mode="tablet-portrait"]{
  --mode-rail: 860px;
  --mode-shell-rail: 860px;
  --mode-narrow-rail: min(100%, 860px);
  --mode-split-top-cols: minmax(0, 1fr);
  --mode-split-band-cols: minmax(0, 1fr);
  --mode-two-col-cols: minmax(0, 1fr);
  --mode-layout-2col-cols: minmax(0, 1fr);
  --mode-services-cols: repeat(2, minmax(0,1fr));
  --mode-process-cols: repeat(4, minmax(0,1fr));
  --mode-contact-cols: minmax(0, 1fr);
  --mode-portfolio-cols: repeat(2, minmax(0,1fr));
  --mode-pro-ag-cols: repeat(5, minmax(0,1fr));
  --mode-lab-ag-cols: repeat(4, minmax(0,1fr));
  --mode-grid-2-cols: minmax(0, 1fr);
  --mode-grid-2-gap: 16px;
  --mode-project-nav-gap: 14px;
  --mode-pfc-thumb-ratio: 4 / 3;
}

html[data-mode="tablet-landscape"]{
  --mode-rail: 940px;
  --mode-shell-rail: 940px;
  --mode-narrow-rail: min(100%, 940px);
  --mode-split-top-cols: minmax(0, 1.25fr) minmax(0, .75fr);
  --mode-split-band-cols: minmax(0, .78fr) minmax(0, 1.22fr);
  --mode-two-col-cols: minmax(0, 1fr) minmax(0, 1fr);
  --mode-layout-2col-cols: minmax(0, 1fr) minmax(0, 1.35fr);
  --mode-services-cols: repeat(4, minmax(0,1fr));
  --mode-process-cols: repeat(4, minmax(0,1fr));
  --mode-contact-cols: minmax(0, 1fr) minmax(0, 1.2fr);
  --mode-portfolio-cols: repeat(3, minmax(0,1fr));
  --mode-pro-ag-cols: repeat(5, minmax(0,1fr));
  --mode-lab-ag-cols: repeat(4, minmax(0,1fr));
  --mode-grid-2-cols: minmax(0, 1fr) minmax(0, 1fr);
  --mode-grid-2-gap: 18px;
  --mode-project-nav-gap: 16px;
  --mode-pfc-thumb-ratio: 4 / 3;
}

/* Tablet rail bridge: the same shell/content helpers used in laptop+desktop now obey tablet too. */
html[data-mode="tablet-portrait"] .section > .container,
html[data-mode="tablet-landscape"] .section > .container,
html[data-mode="tablet-portrait"] .topbar-inner,
html[data-mode="tablet-landscape"] .topbar-inner,
html[data-mode="tablet-portrait"] .footer.footerbar > .container,
html[data-mode="tablet-landscape"] .footer.footerbar > .container,
html[data-mode="tablet-portrait"] .footer.footerbar .footerbar__inner,
html[data-mode="tablet-landscape"] .footer.footerbar .footerbar__inner,
html[data-mode="tablet-portrait"] body.home #presentacion .lz-band > .container,
html[data-mode="tablet-landscape"] body.home #presentacion .lz-band > .container,
html[data-mode="tablet-portrait"] body.lab-page .lab-cta-inner,
html[data-mode="tablet-landscape"] body.lab-page .lab-cta-inner,
html[data-mode="tablet-portrait"] body.secret-page .secret-wrap > .container,
html[data-mode="tablet-landscape"] body.secret-page .secret-wrap > .container,
html[data-mode="tablet-portrait"] body.case .container.narrow,
html[data-mode="tablet-landscape"] body.case .container.narrow,
html[data-mode="tablet-portrait"] body:not(.home):not(.pro):not(.lab-page):not(.secret-page):not(.case):not(.shell) main.section > .container,
html[data-mode="tablet-landscape"] body:not(.home):not(.pro):not(.lab-page):not(.secret-page):not(.case):not(.shell) main.section > .container{
  max-width: var(--mode-rail) !important;
  width: 100%;
  margin-inline: auto;
}

html[data-mode="tablet-portrait"] .topbar-inner,
html[data-mode="tablet-landscape"] .topbar-inner,
html[data-mode="tablet-portrait"] .footer.footerbar > .container,
html[data-mode="tablet-landscape"] .footer.footerbar > .container,
html[data-mode="tablet-portrait"] .footer.footerbar .footerbar__inner,
html[data-mode="tablet-landscape"] .footer.footerbar .footerbar__inner{
  max-width: var(--mode-shell-rail) !important;
}

/* Tablet structural modules now switch by data-mode, not scattered media queries. */
html[data-mode="tablet-portrait"] .lz-split--top,
html[data-mode="tablet-landscape"] .lz-split--top,
html[data-mode="tablet-portrait"] .lz-split--band,
html[data-mode="tablet-landscape"] .lz-split--band,
html[data-mode="tablet-portrait"] .two-col,
html[data-mode="tablet-landscape"] .two-col,
html[data-mode="tablet-portrait"] .layout-2col,
html[data-mode="tablet-landscape"] .layout-2col,
html[data-mode="tablet-portrait"] body.case .grid-2,
html[data-mode="tablet-landscape"] body.case .grid-2,
html[data-mode="tablet-portrait"] .services-grid,
html[data-mode="tablet-landscape"] .services-grid,
html[data-mode="tablet-portrait"] .section.services .services-grid,
html[data-mode="tablet-landscape"] .section.services .services-grid,
html[data-mode="tablet-portrait"] .process-icons,
html[data-mode="tablet-landscape"] .process-icons,
html[data-mode="tablet-portrait"] .section.process .process-icons,
html[data-mode="tablet-landscape"] .section.process .process-icons,
html[data-mode="tablet-portrait"] .contact-grid,
html[data-mode="tablet-landscape"] .contact-grid,
html[data-mode="tablet-portrait"] .portfolio-grid,
html[data-mode="tablet-landscape"] .portfolio-grid,
html[data-mode="tablet-portrait"] .portfolio-grid.tight,
html[data-mode="tablet-landscape"] .portfolio-grid.tight,
html[data-mode="tablet-portrait"] #grafico .ag-grid,
html[data-mode="tablet-landscape"] #grafico .ag-grid,
html[data-mode="tablet-portrait"] .lab-archivo-grafico .ag-grid,
html[data-mode="tablet-landscape"] .lab-archivo-grafico .ag-grid,
html[data-mode="tablet-portrait"] .lab-page #pfc .pfc-grid,
html[data-mode="tablet-landscape"] .lab-page #pfc .pfc-grid{
  min-width: 0;
}

html[data-mode="tablet-portrait"] .lz-split--top,
html[data-mode="tablet-landscape"] .lz-split--top{
  grid-template-columns: var(--mode-split-top-cols);
  gap: var(--mode-split-gap);
  align-items: start;
}

html[data-mode="tablet-portrait"] .lz-split--band,
html[data-mode="tablet-landscape"] .lz-split--band{
  grid-template-columns: var(--mode-split-band-cols);
  gap: var(--mode-split-gap);
  align-items: center;
}

html[data-mode="tablet-portrait"] .two-col,
html[data-mode="tablet-landscape"] .two-col{
  grid-template-columns: var(--mode-two-col-cols);
  gap: var(--mode-two-col-gap);
  align-items: stretch;
}

html[data-mode="tablet-portrait"] .layout-2col,
html[data-mode="tablet-landscape"] .layout-2col{
  grid-template-columns: var(--mode-layout-2col-cols);
  gap: var(--mode-layout-2col-gap);
  align-items: start;
}

html[data-mode="tablet-portrait"] body.case .grid-2,
html[data-mode="tablet-landscape"] body.case .grid-2{
  grid-template-columns: var(--mode-grid-2-cols);
  gap: var(--mode-grid-2-gap);
  align-items: start;
}

html[data-mode="tablet-portrait"] body.case .project-nav,
html[data-mode="tablet-landscape"] body.case .project-nav{
  gap: var(--mode-project-nav-gap);
}

html[data-mode="tablet-portrait"] .services-grid,
html[data-mode="tablet-landscape"] .services-grid,
html[data-mode="tablet-portrait"] .section.services .services-grid,
html[data-mode="tablet-landscape"] .section.services .services-grid{
  grid-template-columns: var(--mode-services-cols) !important;
  gap: var(--mode-services-gap) !important;
}

html[data-mode="tablet-portrait"] .process-icons,
html[data-mode="tablet-landscape"] .process-icons,
html[data-mode="tablet-portrait"] .section.process .process-icons,
html[data-mode="tablet-landscape"] .section.process .process-icons,
html[data-mode="tablet-portrait"] #proceso .process-icons,
html[data-mode="tablet-landscape"] #proceso .process-icons{
  grid-template-columns: var(--mode-process-cols) !important;
  gap: var(--mode-process-gap) !important;
}

html[data-mode="tablet-portrait"] .contact-grid,
html[data-mode="tablet-landscape"] .contact-grid{
  grid-template-columns: var(--mode-contact-cols);
  gap: var(--mode-contact-gap);
  align-items: center;
}

html[data-mode="tablet-portrait"] .portfolio-grid,
html[data-mode="tablet-landscape"] .portfolio-grid,
html[data-mode="tablet-portrait"] .portfolio-grid.tight,
html[data-mode="tablet-landscape"] .portfolio-grid.tight{
  grid-template-columns: var(--mode-portfolio-cols);
  gap: var(--mode-portfolio-gap);
}

html[data-mode="tablet-portrait"] #grafico .ag-grid,
html[data-mode="tablet-landscape"] #grafico .ag-grid{
  grid-template-columns: var(--mode-pro-ag-cols);
  gap: var(--mode-ag-gap);
}

html[data-mode="tablet-portrait"] .lab-archivo-grafico .ag-grid,
html[data-mode="tablet-landscape"] .lab-archivo-grafico .ag-grid{
  grid-template-columns: var(--mode-lab-ag-cols);
  gap: var(--mode-ag-gap);
}

html[data-mode="tablet-portrait"] .lab-page #pfc .pfc-grid{
  grid-template-columns: minmax(0,1fr);
  gap: var(--mode-pfc-gap);
  align-items: start;
}

html[data-mode="tablet-landscape"] .lab-page #pfc .pfc-grid{
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--mode-pfc-gap);
  align-items: start;
}

html[data-mode="tablet-portrait"] .lab-page #pfc .pfc-col--content,
html[data-mode="tablet-landscape"] .lab-page #pfc .pfc-col--content{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
}

html[data-mode="tablet-landscape"] .lab-page #pfc .pfc-image-row,
html[data-mode="tablet-portrait"] .lab-page #pfc .pfc-image-row{
  gap: 10px;
}

html[data-mode="tablet-portrait"] .lab-page #pfc .pfc-image-card,
html[data-mode="tablet-landscape"] .lab-page #pfc .pfc-image-card{
  aspect-ratio: var(--mode-pfc-thumb-ratio);
}

/* HOME services in tablet should stay card-like instead of collapsing into awkward tall columns. */
html[data-mode="tablet-portrait"] body.home #servicios .service-card,
html[data-mode="tablet-landscape"] body.home #servicios .service-card{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}

html[data-mode="tablet-landscape"] body.home #servicios .service-card{
  aspect-ratio: 1 / 1;
  padding: 18px;
}

html[data-mode="tablet-portrait"] body.home #servicios .service-card{
  padding: 18px;
}

html[data-mode="tablet-portrait"] body.home #servicios .service-card p,
html[data-mode="tablet-landscape"] body.home #servicios .service-card p{
  line-height: 1.34;
}

/* v125: Tablet portrait microtuning — HOME key split sections stay in one row */
html[data-mode="tablet-portrait"] body.home #presentacion .lz-split--top{
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr) !important;
  align-items: center;
}

html[data-mode="tablet-portrait"] body.home #presentacion .lz-split--band{
  grid-template-columns: minmax(220px, .78fr) minmax(0, 1.22fr) !important;
  align-items: center;
}

html[data-mode="tablet-portrait"] body.home #contacto .contact-grid{
  grid-template-columns: minmax(0, 1.08fr) minmax(240px, .92fr) !important;
  align-items: center;
}

html[data-mode="tablet-portrait"] body.home #contacto .contact-copy{
  order: 1;
}

html[data-mode="tablet-portrait"] body.home #contacto .contact-visual{
  order: 2;
  justify-self: end;
}

html[data-mode="tablet-portrait"] body.home #presentacion .lz-split__media,
html[data-mode="tablet-portrait"] body.home #presentacion .lz-stamp,
html[data-mode="tablet-portrait"] body.home #contacto .contact-visual{
  min-width: 0;
}

html[data-mode="tablet-portrait"] body.home #presentacion .lz-stamp img,
html[data-mode="tablet-portrait"] body.home #contacto .contact-visual img{
  max-width: 100%;
  height: auto;
}


/* v126: Tablet portrait microtuning — PRO */
html[data-mode="tablet-portrait"] body.pro #gloubo-mola .two-col.gm-two-col{
  grid-template-columns: minmax(260px, .92fr) minmax(0, 1.08fr) !important;
  align-items: start;
}

html[data-mode="tablet-portrait"] body.pro #gloubo-mola .gm-card{
  min-width: 0;
}

html[data-mode="tablet-portrait"] body.pro #gloubo-mola .gm-square{
  max-width: 100%;
}

html[data-mode="tablet-portrait"] body.pro #motion4startups .portfolio-grid.tight{
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
}

html[data-mode="tablet-portrait"] body.pro #grafico .ag-grid{
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
}

html[data-mode="tablet-portrait"] body.pro #grafico .ag-item:nth-child(10){
  display: block !important;
}


/* Tablet portrait — SECRET grid 3 columns */
html[data-mode="tablet-portrait"] body.secret-page #secretGrid.portfolio-grid{
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
}


/* v130: Tablet portrait — PRO / Golubo equalize column heights */
html[data-mode="tablet-portrait"] body.pro #gloubo-mola .two-col.gm-two-col{
  grid-template-columns: minmax(280px, 1fr) minmax(0, .94fr) !important;
  gap: 10px !important;
  align-items: start;
}

html[data-mode="tablet-portrait"] body.pro #gloubo-mola .gm-mini-grid{
  gap: 10px !important;
}

html[data-mode="tablet-portrait"] body.pro #gloubo-mola .gm-brand-item{
  border-radius: 16px;
}

/* v135: HOME reel — make .reel-embed the single 16:9 master box in tablet/laptop/desktop too */
body.home #reel .reel-embed{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding-top: 0 !important;
}

body.home #reel .reel-embed .reel-skeleton,
body.home #reel .reel-embed::before,
body.home #reel .reel-embed video,
body.home #reel .reel-embed iframe{
  position: absolute;
  inset: 0;
}

body.home #reel .reel-embed video,
body.home #reel .reel-embed iframe{
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* v135: PRO / M4S / tablet-landscape — radical geometry, valid CSS only.
   Left track is the 16:9 master. Right track width is solved so:
   3 rows of 16:9 thumbs + 2 internal gaps == left reel height,
   and the inter-column gap == the thumb grid gap.
   For tablet-landscape in this project the gap is canonically 14px. */
html[data-mode="tablet-landscape"] body.pro #motion4startups .two-col{
  grid-template-columns: minmax(0, calc(50% + 3.889px)) minmax(0, calc(50% - 17.889px)) !important;
  gap: 14px !important;
  align-items: start;
}

html[data-mode="tablet-landscape"] body.pro #motion4startups .two-col > *,
html[data-mode="tablet-landscape"] body.pro #motion4startups .service-card.reel-card,
html[data-mode="tablet-landscape"] body.pro #motion4startups .portfolio-grid.tight{
  min-width: 0;
}

html[data-mode="tablet-landscape"] body.pro #motion4startups .reel-frame{
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
}

html[data-mode="tablet-landscape"] body.pro #motion4startups .portfolio-grid.tight{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 0;
}

html[data-mode="tablet-landscape"] body.pro #motion4startups .portfolio-grid.tight .portfolio-item{
  aspect-ratio: 16 / 9;
  height: auto;
}


/* v137: PRO / M4S only — apply the closed two-column geometry in both laptop and tablet-landscape.
   Reason: large iPad landscape instances are currently classified as laptop in this project,
   so M4S must obey the same exact law in both modes without altering any other section. */
html[data-mode="laptop"] body.pro #motion4startups .two-col,
html[data-mode="tablet-landscape"] body.pro #motion4startups .two-col{
  --m4s-gap: var(--mode-portfolio-gap, 14px);
  grid-template-columns:
    minmax(0, calc(50% + ((5 * var(--m4s-gap)) / 18)))
    minmax(0, calc(50% - ((23 * var(--m4s-gap)) / 18))) !important;
  gap: var(--m4s-gap) !important;
  align-items: start;
}

html[data-mode="laptop"] body.pro #motion4startups .two-col > *,
html[data-mode="tablet-landscape"] body.pro #motion4startups .two-col > *,
html[data-mode="laptop"] body.pro #motion4startups .service-card.reel-card,
html[data-mode="tablet-landscape"] body.pro #motion4startups .service-card.reel-card,
html[data-mode="laptop"] body.pro #motion4startups .portfolio-grid.tight,
html[data-mode="tablet-landscape"] body.pro #motion4startups .portfolio-grid.tight{
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

html[data-mode="laptop"] body.pro #motion4startups .reel-frame,
html[data-mode="tablet-landscape"] body.pro #motion4startups .reel-frame{
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
}

html[data-mode="laptop"] body.pro #motion4startups .portfolio-grid.tight,
html[data-mode="tablet-landscape"] body.pro #motion4startups .portfolio-grid.tight{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--m4s-gap) !important;
  margin-top: 0;
}

html[data-mode="laptop"] body.pro #motion4startups .portfolio-grid.tight .portfolio-item,
html[data-mode="tablet-landscape"] body.pro #motion4startups .portfolio-grid.tight .portfolio-item{
  aspect-ratio: 16 / 9;
  height: auto;
}

/* v138: LAB / PFC only — apply the same solved composition logic used to close M4S.
   Scope is intentionally narrow: only #pfc in laptop + tablet-landscape.
   Left column becomes the visual master (4:3 video), right column becomes the secondary rail,
   and any old JS height-sync is neutralized here so layout is governed by CSS only. */
html[data-mode="laptop"] body.lab-page #pfc .pfc-grid,
html[data-mode="tablet-landscape"] body.lab-page #pfc .pfc-grid{
  --pfc-lock-gap: var(--mode-pfc-gap, 24px);
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr) !important;
  gap: var(--pfc-lock-gap) !important;
  align-items: stretch;
}

html[data-mode="laptop"] body.lab-page #pfc .pfc-grid > *,
html[data-mode="tablet-landscape"] body.lab-page #pfc .pfc-grid > *,
html[data-mode="laptop"] body.lab-page #pfc .pfc-col--video,
html[data-mode="tablet-landscape"] body.lab-page #pfc .pfc-col--video,
html[data-mode="laptop"] body.lab-page #pfc .pfc-col--content,
html[data-mode="tablet-landscape"] body.lab-page #pfc .pfc-col--content{
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

html[data-mode="laptop"] body.lab-page #pfc .pfc-video,
html[data-mode="tablet-landscape"] body.lab-page #pfc .pfc-video{
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
}

html[data-mode="laptop"] body.lab-page #pfc .pfc-col--content,
html[data-mode="tablet-landscape"] body.lab-page #pfc .pfc-col--content{
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--pfc-lock-gap) !important;
  align-content: stretch;
  justify-content: stretch;
  height: 100%;
}

html[data-mode="laptop"] body.lab-page #pfc .pfc-text,
html[data-mode="tablet-landscape"] body.lab-page #pfc .pfc-text{
  min-width: 0;
  min-height: 0;
}

html[data-mode="laptop"] body.lab-page #pfc .pfc-image-row,
html[data-mode="tablet-landscape"] body.lab-page #pfc .pfc-image-row{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pfc-lock-gap) !important;
  margin-top: 0 !important;
  align-self: end;
}

html[data-mode="laptop"] body.lab-page #pfc .pfc-image-card,
html[data-mode="tablet-landscape"] body.lab-page #pfc .pfc-image-card,
html[data-mode="laptop"] body.lab-page #pfc[data-sync="on"] .pfc-image-card,
html[data-mode="tablet-landscape"] body.lab-page #pfc[data-sync="on"] .pfc-image-card{
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0;
}

html[data-mode="laptop"] body.lab-page #pfc[data-sync="on"] .pfc-col--content,
html[data-mode="tablet-landscape"] body.lab-page #pfc[data-sync="on"] .pfc-col--content{
  height: auto !important;
}


/* v139: LAB / PFC only — tighten gap between the three image cards.
   Scope stays narrow: only the image row inside #pfc on laptop + tablet-landscape. */
html[data-mode="laptop"] body.lab-page #pfc .pfc-image-row,
html[data-mode="tablet-landscape"] body.lab-page #pfc .pfc-image-row{
  gap: 10px !important;
}


/* v140: tablet-portrait microtuning — HOME CTA left align + LAB CTA no forced break */
html[data-mode="tablet-portrait"] body.home #contacto .contact-copy,
html[data-mode="tablet-portrait"] body.home #contacto .contact-copy h2,
html[data-mode="tablet-portrait"] body.home #contacto .contact-copy p,
html[data-mode="tablet-portrait"] body.home #contacto .contact-links{
  text-align:left !important;
}

html[data-mode="tablet-portrait"] body.lab-page .lab-cta-quote br{
  display:none;
}

/* v141: LAB CTA line break only hidden on iPad mini portrait; restored on iPad 11/13 portrait */
@media (min-width: 800px){
  html[data-mode="tablet-portrait"] body.lab-page .lab-cta-quote br{
    display: inline !important;
  }
}

/* v143: mobile-portrait microtuning only */
html[data-mode="mobile-portrait"] body.pro #freelance .portfolio-grid{
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
}

html[data-mode="mobile-portrait"] body.pro #grafico .ag-grid{
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
}

html[data-mode="mobile-portrait"] body.lab-page #pfc .pfc-image-row{
  gap: 8px !important;
}

html[data-mode="mobile-portrait"] body.lab-page .lab-cta-media{
  align-self: center !important;
  margin-inline: auto !important;
}

html[data-mode="mobile-portrait"] body.lab-page .lab-cta-avatar{
  margin-inline: auto !important;
}

html[data-mode="mobile-portrait"] body.secret-page #secretGrid.portfolio-grid{
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
}


/* v144: mobile-portrait — LAB PFC thumbnails should use native 4:3 cards, not square boxes */
html[data-mode="mobile-portrait"] body.lab-page #pfc .pfc-image-row{
  gap: 6px !important;
}

html[data-mode="mobile-portrait"] body.lab-page #pfc .pfc-image-card{
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  min-height: 0 !important;
}

html[data-mode="mobile-portrait"] body.lab-page #pfc .pfc-image-card img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
}


/* v145: mobile-portrait — LAB PFC gap must match container side padding exactly */
html[data-mode="mobile-portrait"] body.lab-page #pfc .pfc-image-row{
  gap: var(--pad) !important;
}


/* v146.1: Unified CTA contact links across HOME / PRO / LAB */
.contact-links a,
.cta-link,
.lab-cta-link,
.lab-cta-sub a {
  color: var(--c-blue-4da3ff) !important;
  text-decoration: none !important;
  transition: color .18s var(--ease, ease) !important;
}

.contact-links a:hover,
.contact-links a:focus-visible,
.cta-link:hover,
.cta-link:focus-visible,
.lab-cta-link:hover,
.lab-cta-link:focus-visible,
.lab-cta-sub a:hover,
.lab-cta-sub a:focus-visible {
  color: color-mix(in srgb, var(--c-blue-4da3ff) 72%, black) !important;
  text-decoration: none !important;
}


/* v148: black/white shell chrome + modal footer hardening */
.modal__footer{
  background: var(--modalbar-bg, var(--footer-bg)) !important;
  border-top: 1px solid var(--modalbar-border, var(--footer-border, var(--line))) !important;
  color: var(--modalbar-fg, var(--footer-fg, var(--fg))) !important;
}

html[data-skin="black"] .topbar,
html[data-skin="black"] .footer,
html[data-skin="black"] .footer2.footer2bar,
html[data-skin="black"] .footer-new,
html[data-skin="cinema"] .topbar,
html[data-skin="cinema"] .footer,
html[data-skin="cinema"] .footer2.footer2bar,
html[data-skin="cinema"] .footer-new{
  background: rgba(18,18,18,.96) !important;
  background-color: rgba(18,18,18,.96) !important;
  border-color: rgba(255,255,255,.10) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

html[data-skin="white"] .topbar,
html[data-skin="white"] .footer,
html[data-skin="white"] .footer2.footer2bar,
html[data-skin="white"] .footer-new{
  background: rgba(255,255,255,.96) !important;
  background-color: rgba(255,255,255,.96) !important;
  border-color: rgba(0,0,0,.10) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (max-width: 1023px){
  html[data-skin="black"] .topbar,
  html[data-skin="black"] .footer,
  html[data-skin="black"] .footer2.footer2bar,
  html[data-skin="black"] .footer-new,
  html[data-skin="cinema"] .topbar,
  html[data-skin="cinema"] .footer,
  html[data-skin="cinema"] .footer2.footer2bar,
  html[data-skin="cinema"] .footer-new,
  html[data-skin="white"] .topbar,
  html[data-skin="white"] .footer,
  html[data-skin="white"] .footer2.footer2bar,
  html[data-skin="white"] .footer-new{
    background-image: none !important;
    opacity: 1 !important;
  }
}

html[data-skin="black"] .ag-modal__bar,
html[data-skin="black"] .gm-footer,
html[data-skin="black"] .gm2-footer,
html[data-skin="black"] .modal__footer,
html[data-skin="cinema"] .ag-modal__bar,
html[data-skin="cinema"] .gm-footer,
html[data-skin="cinema"] .gm2-footer,
html[data-skin="cinema"] .modal__footer{
  background: rgba(38,38,38,.96) !important;
  border-top-color: rgba(255,255,255,.12) !important;
}

/* v152: PRO CTA relampagos + grid coexist (no pseudo overlay hiding grid) */
html[data-skin="white"] body.pro .contact-band.lz-band,
html[data-skin="black"] body.pro .contact-band.lz-band,
html[data-skin="cinema"] body.pro .contact-band.lz-band{
  position: relative;
}

html[data-skin="white"] body.pro .contact-band.lz-band::before,
html[data-skin="black"] body.pro .contact-band.lz-band::before,
html[data-skin="cinema"] body.pro .contact-band.lz-band::before{
  content: none !important;
  display: none !important;
}

html[data-skin="black"] body.pro .contact-band.lz-band{
  background:
    radial-gradient(1200px 500px at 20% 40%, var(--band-glow-a), transparent 62%),
    radial-gradient(900px 400px at 80% 20%, var(--band-glow-b), transparent 58%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.06) 0 1px, transparent 1px 56px),
    url("../img/_others/relampagos.jpg") center/cover no-repeat !important;
}

html[data-skin="cinema"] body.pro .contact-band.lz-band{
  background:
    radial-gradient(1200px 500px at 20% 40%, var(--band-glow-a), transparent 62%),
    radial-gradient(900px 400px at 80% 20%, var(--band-glow-b), transparent 58%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.06) 0 1px, transparent 1px 56px),
    url("../img/_others/relampagos.jpg") center/cover no-repeat !important;
}


html[data-skin="white"] body.pro .contact-band.lz-band{
  background:
    radial-gradient(1200px 500px at 20% 40%, var(--band-glow-a), transparent 62%),
    radial-gradient(900px 400px at 80% 20%, var(--band-glow-b), transparent 58%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.06) 0 1px, transparent 1px 56px),
    linear-gradient(rgba(255,255,255,0.20), rgba(255,255,255,0.20)),
    url("../img/_others/relampagos.jpg") center/cover no-repeat !important;
}

html[data-skin="white"] body.pro .contact-band.lz-band > *,
html[data-skin="black"] body.pro .contact-band.lz-band > *,
html[data-skin="cinema"] body.pro .contact-band.lz-band > *{
  position: relative;
  z-index: 1;
}


/* v149: mobile video-modal compositor hardening
   Fixes Android/Chrome flicker hairlines on outer rails when Vimeo starts painting inside modal iframes.
   Scope: video-bearing modals only. Graphic modal blur remains untouched.
*/
#video-modal,
#pro-freelance-modal,
#brand-modal{
  isolation:isolate;
}

#video-modal .modal__backdrop,
#pro-freelance-modal .modal__backdrop,
#brand-modal .modal__backdrop{
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

#video-modal .modal__panel,
#pro-freelance-modal .modal__panel,
#brand-modal .modal__panel{
  z-index:1;
  isolation:isolate;
  contain:layout paint;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform-style:preserve-3d;
}

#video-modal .modal__frame,
#pro-freelance-modal .modal__frame,
#brand-modal .modal__frame,
#video-modal .brand__video,
#brand-modal .brand__video{
  position:relative;
  overflow:hidden;
  background:#000;
  contain:paint;
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

#video-modal .modal__frame iframe,
#pro-freelance-modal .modal__frame iframe,
#brand-modal .modal__frame iframe,
#video-modal .brand__video iframe,
#brand-modal .brand__video iframe{
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

@media (max-width: 720px), (pointer: coarse) and (max-width: 1024px){
  /* Android/Chrome can leak backdrop-filter compositing artifacts outside the modal
     once the remote player starts animating. Keep the dim overlay on mobile,
     but disable blur only for video modals. */
  #video-modal .modal__backdrop,
  #pro-freelance-modal .modal__backdrop,
  #brand-modal .modal__backdrop{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgba(0,0,0,.72);
  }
}


/* v150: video-modal page-blur overlay
   Reintroduces the blurred-background language for video modals without relying on
   mobile backdrop-filter compositing against remote Vimeo iframes. */
html.video-modal-blur-active,
body.video-modal-blur-active{
  overflow:hidden;
}

body.video-modal-blur-active > *:not(#video-modal):not(#pro-freelance-modal):not(#brand-modal):not(script):not(style){
  filter: blur(10px);
  transform: translateZ(0);
  transition: filter .22s ease;
}

body.video-modal-blur-active .topbar,
body.video-modal-blur-active .footer,
body.video-modal-blur-active .footer2,
body.video-modal-blur-active .footer-new,
body.video-modal-blur-active main,
body.video-modal-blur-active .page,
body.video-modal-blur-active .site,
body.video-modal-blur-active .shell-page{
  will-change: filter;
}

#video-modal .modal__backdrop,
#pro-freelance-modal .modal__backdrop,
#brand-modal .modal__backdrop{
  background: rgba(0,0,0,.56);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

html[data-skin="white"] #video-modal .modal__backdrop,
html[data-skin="white"] #pro-freelance-modal .modal__backdrop,
html[data-skin="white"] #brand-modal .modal__backdrop{
  background: rgba(255,255,255,.18);
}

@media (max-width: 720px), (pointer: coarse) and (max-width: 1024px){
  body.video-modal-blur-active > *:not(#video-modal):not(#pro-freelance-modal):not(#brand-modal):not(script):not(style){
    filter: blur(8px);
  }

  #video-modal .modal__backdrop,
  #pro-freelance-modal .modal__backdrop,
  #brand-modal .modal__backdrop{
    background: rgba(0,0,0,.66);
  }

  html[data-skin="white"] #video-modal .modal__backdrop,
  html[data-skin="white"] #pro-freelance-modal .modal__backdrop,
  html[data-skin="white"] #brand-modal .modal__backdrop{
    background: rgba(255,255,255,.20);
  }
}


/* v151: unify modal overlays across image + video modals
   global overlay alpha 50% and blur 8px */
.ag-modal{
  background: rgba(0,0,0,.50) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.modal__backdrop{
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.video-modal-blur-active > *:not(#video-modal):not(#pro-freelance-modal):not(#brand-modal):not(script):not(style){
  filter: blur(8px) !important;
}
#video-modal .modal__backdrop,
#pro-freelance-modal .modal__backdrop,
#brand-modal .modal__backdrop{
  background: rgba(0,0,0,.50) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html[data-skin="white"] #video-modal .modal__backdrop,
html[data-skin="white"] #pro-freelance-modal .modal__backdrop,
html[data-skin="white"] #brand-modal .modal__backdrop{
  background: rgba(0,0,0,.50) !important;
}
@media (hover:none), (pointer:coarse){
  body.video-modal-blur-active > *:not(#video-modal):not(#pro-freelance-modal):not(#brand-modal):not(script):not(style){
    filter: blur(8px) !important;
  }
  #video-modal .modal__backdrop,
  #pro-freelance-modal .modal__backdrop,
  #brand-modal .modal__backdrop{
    background: rgba(0,0,0,.50) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}


/* === SWATCH secondary-accent system: collection-driven links + shell states === */
html[data-collection="swatch"] .nav a:hover,
html[data-collection="swatch"] .footerbar a:hover,
html[data-collection="swatch"] .footer2__navlink:hover,
html[data-collection="swatch"] .footer2__navlink.is-current,
html[data-collection="swatch"] .contact-links a,
html[data-collection="swatch"] .cta-link,
html[data-collection="swatch"] .lab-cta-link,
html[data-collection="swatch"] .lab-cta-sub a,
html[data-collection="swatch"] .modal__footer #pro-freelance-modal-project:hover {
  color: var(--link-accent, var(--accent2)) !important;
}

html[data-collection="swatch"] .contact-links a:hover,
html[data-collection="swatch"] .contact-links a:focus-visible,
html[data-collection="swatch"] .cta-link:hover,
html[data-collection="swatch"] .cta-link:focus-visible,
html[data-collection="swatch"] .lab-cta-link:hover,
html[data-collection="swatch"] .lab-cta-link:focus-visible,
html[data-collection="swatch"] .lab-cta-sub a:hover,
html[data-collection="swatch"] .lab-cta-sub a:focus-visible,
html[data-collection="swatch"] a:hover {
  color: var(--link-accent-hover, var(--link-accent, var(--accent2))) !important;
  text-decoration-color: color-mix(in srgb, var(--link-accent, var(--accent2)) 45%, transparent) !important;
}

/* === SNOW CALIBRATION FIXES === */
html[data-skin="snow"] .hero-kicker,
html[data-skin="snow"] .service-card,
html[data-skin="snow"] .service-card:hover,
html[data-skin="snow"] .btn.primary,
html[data-skin="snow"] body.home .btn.secondary,
html[data-skin="snow"] .footer2__lang{
  background: var(--soft) !important;
  background-color: var(--soft) !important;
  border-color: var(--line) !important;
}

html[data-skin="snow"] .hero-divider,
html[data-skin="snow"] .section + .section,
html[data-skin="snow"] .lz-band,
html[data-skin="snow"] .footer,
html[data-skin="snow"] .footer-new{
  border-color: var(--line) !important;
}

html[data-skin="snow"] .footer-new .footer2__brandtext,
html[data-skin="snow"] .footer-new .footer2__langbtn,
html[data-skin="snow"] .footer-new .footer2__navlink,
html[data-skin="snow"] .footerbar__brandtext,
html[data-skin="snow"] .footerbar__navlink,
html[data-skin="snow"] .footerbar a{
  color: var(--muted) !important;
}

html[data-skin="snow"] .footer-new .footer2__langbtn.is-active,
html[data-skin="snow"] .footerbar__navlink.is-current,
html[data-skin="snow"] .footer2__navlink.is-current,
html[data-skin="snow"] .footerbar a:hover,
html[data-skin="snow"] .footer2__navlink:hover{
  color: var(--link-accent, var(--accent2)) !important;
  opacity: 1 !important;
}

/* Rescue footer current-state color beyond mobile */
.footerbar__navlink.is-current,
.footer2__navlink.is-current{
  color: var(--link-accent, var(--accent2)) !important;
  opacity: 1 !important;
}


/* === SNOW separator + footer lang unification fix === */
html[data-skin="snow"] .section + .section{
  border-top: 0 !important;
  position: relative;
}

html[data-skin="snow"] .section + .section::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--laptop-rail, 1100px), calc(100% - 48px));
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--line) 32%, transparent) 10%,
    var(--line) 18%,
    var(--line) 82%,
    color-mix(in srgb, var(--line) 32%, transparent) 90%,
    transparent 100%);
  pointer-events: none;
}

html[data-skin="snow"] .footerbar__lang,
html[data-skin="snow"] .footer2__lang,
html[data-skin="snow"] .footer-new .footer2__lang{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  border: 1px solid var(--line) !important;
  background: var(--soft) !important;
  box-shadow: none !important;
}

html[data-skin="snow"] .footerbar__langbtn,
html[data-skin="snow"] .footer2__langbtn,
html[data-skin="snow"] .footer-new .footer2__langbtn{
  appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  color: var(--muted) !important;
}

html[data-skin="snow"] .footerbar__langbtn.is-active,
html[data-skin="snow"] .footer2__langbtn.is-active,
html[data-skin="snow"] .footer-new .footer2__langbtn.is-active{
  color: var(--link-accent, var(--accent2)) !important;
  font-weight: 600 !important;
}


/* === SNOW LAB separators: match the first faded separator === */
html[data-skin="snow"] .lab-sep{
  border: 0 !important;
  height: 1px !important;
  margin: 3.5rem auto !important;
  width: min(var(--laptop-rail, 1100px), calc(100% - 48px)) !important;
  max-width: min(var(--laptop-rail, 1100px), calc(100% - 48px)) !important;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--line) 32%, transparent) 10%,
    var(--line) 18%,
    var(--line) 82%,
    color-mix(in srgb, var(--line) 32%, transparent) 90%,
    transparent 100%) !important;
  opacity: 1 !important;
}


/* === SNOW MICROFIX: softer shadows + readable LAB CTA + white nav-cta hover === */
html[data-skin="snow"] .logo::before{
  box-shadow: 0 0 0 3px rgba(35,49,66,.08), 0 8px 18px rgba(35,49,66,.16) !important;
}

html[data-skin="snow"] .contact-visual img{
  filter: drop-shadow(0 10px 20px rgba(35,49,66,.14)) !important;
}

html[data-skin="snow"] .nav-cta{
  box-shadow: 0 8px 18px rgba(35,49,66,.14) !important;
}

html[data-skin="snow"] .nav-cta:hover,
html[data-skin="snow"] .nav-cta:focus-visible{
  color: #fff !important;
}

html[data-skin="snow"] .lab-page .lab-cta-quote{
  color: var(--fg) !important;
}

html[data-skin="snow"] .lab-page .lab-cta-sub{
  color: var(--muted) !important;
}


/* === SNOW MICROFIX: unified body text + home stamp visibility === */
html[data-skin="snow"] .section-intro,
html[data-skin="snow"] .hero-desc,
html[data-skin="snow"] .service-card p,
html[data-skin="snow"] .lz-band__copy p,
html[data-skin="snow"] .contact-copy p,
html[data-skin="snow"] .benefits-list li,
html[data-skin="snow"] .pdesc,
html[data-skin="snow"] .lab-page .lab-cta-sub,
html[data-skin="snow"] .lab-page .lab-cta-quote,
html[data-skin="snow"] .section > .container > p,
html[data-skin="snow"] .section .container p.lead,
html[data-skin="snow"] .section .container p:not(.hero-kicker):not(.hero-sub):not(.hero-desc):not(.footer2__brandtext){
  color: var(--fg) !important;
  opacity: .94;
}

html[data-skin="snow"] .lz-stamp img{
  content: none;
  filter: none !important;
}


/* === SWATCH structural parity (propagated from snow baseline) === */
html[data-skin="snow"] .section + .section,
html[data-skin="cinema"] .section + .section,
html[data-skin="sandia"] .section + .section,
html[data-skin="kiwi"] .section + .section,
html[data-skin="melocoton"] .section + .section,
html[data-skin="bubblegum"] .section + .section,
html[data-skin="banana"] .section + .section,
html[data-skin="lima"] .section + .section,
html[data-skin="menta"] .section + .section,
html[data-skin="strawberry"] .section + .section,
html[data-skin="lavanda"] .section + .section,
html[data-skin="grau"] .section + .section{
  border-top: 0 !important;
  position: relative;
}

html[data-skin="snow"] .section + .section::before,
html[data-skin="cinema"] .section + .section::before,
html[data-skin="sandia"] .section + .section::before,
html[data-skin="kiwi"] .section + .section::before,
html[data-skin="melocoton"] .section + .section::before,
html[data-skin="bubblegum"] .section + .section::before,
html[data-skin="banana"] .section + .section::before,
html[data-skin="lima"] .section + .section::before,
html[data-skin="menta"] .section + .section::before,
html[data-skin="strawberry"] .section + .section::before,
html[data-skin="lavanda"] .section + .section::before,
html[data-skin="grau"] .section + .section::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--laptop-rail, 1100px), calc(100% - 48px));
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--line) 32%, transparent) 10%,
    var(--line) 18%,
    var(--line) 82%,
    color-mix(in srgb, var(--line) 32%, transparent) 90%,
    transparent 100%);
  pointer-events: none;
}

html[data-skin="snow"] .lab-sep,
html[data-skin="cinema"] .lab-sep,
html[data-skin="sandia"] .lab-sep,
html[data-skin="kiwi"] .lab-sep,
html[data-skin="melocoton"] .lab-sep,
html[data-skin="bubblegum"] .lab-sep,
html[data-skin="banana"] .lab-sep,
html[data-skin="lima"] .lab-sep,
html[data-skin="menta"] .lab-sep,
html[data-skin="strawberry"] .lab-sep,
html[data-skin="lavanda"] .lab-sep,
html[data-skin="grau"] .lab-sep{
  border: 0 !important;
  height: 1px !important;
  margin: 3.5rem auto !important;
  width: min(var(--laptop-rail, 1100px), calc(100% - 48px)) !important;
  max-width: min(var(--laptop-rail, 1100px), calc(100% - 48px)) !important;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--line) 32%, transparent) 10%,
    var(--line) 18%,
    var(--line) 82%,
    color-mix(in srgb, var(--line) 32%, transparent) 90%,
    transparent 100%) !important;
  opacity: 1 !important;
}

html[data-skin="snow"] .footerbar__lang,
html[data-skin="snow"] .footer2__lang,
html[data-skin="snow"] .footer-new .footer2__lang,
html[data-skin="cinema"] .footerbar__lang,
html[data-skin="cinema"] .footer2__lang,
html[data-skin="cinema"] .footer-new .footer2__lang,
html[data-skin="sandia"] .footerbar__lang,
html[data-skin="sandia"] .footer2__lang,
html[data-skin="sandia"] .footer-new .footer2__lang,
html[data-skin="kiwi"] .footerbar__lang,
html[data-skin="kiwi"] .footer2__lang,
html[data-skin="kiwi"] .footer-new .footer2__lang,
html[data-skin="melocoton"] .footerbar__lang,
html[data-skin="melocoton"] .footer2__lang,
html[data-skin="melocoton"] .footer-new .footer2__lang,
html[data-skin="bubblegum"] .footerbar__lang,
html[data-skin="bubblegum"] .footer2__lang,
html[data-skin="bubblegum"] .footer-new .footer2__lang,
html[data-skin="banana"] .footerbar__lang,
html[data-skin="banana"] .footer2__lang,
html[data-skin="banana"] .footer-new .footer2__lang,
html[data-skin="lima"] .footerbar__lang,
html[data-skin="lima"] .footer2__lang,
html[data-skin="lima"] .footer-new .footer2__lang,
html[data-skin="menta"] .footerbar__lang,
html[data-skin="menta"] .footer2__lang,
html[data-skin="menta"] .footer-new .footer2__lang,
html[data-skin="strawberry"] .footerbar__lang,
html[data-skin="strawberry"] .footer2__lang,
html[data-skin="strawberry"] .footer-new .footer2__lang,
html[data-skin="lavanda"] .footerbar__lang,
html[data-skin="lavanda"] .footer2__lang,
html[data-skin="lavanda"] .footer-new .footer2__lang,
html[data-skin="grau"] .footerbar__lang,
html[data-skin="grau"] .footer2__lang,
html[data-skin="grau"] .footer-new .footer2__lang{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  border: 1px solid var(--line) !important;
  background: var(--soft) !important;
  box-shadow: none !important;
}

html[data-skin="snow"] .footerbar__langbtn,
html[data-skin="snow"] .footer2__langbtn,
html[data-skin="snow"] .footer-new .footer2__langbtn,
html[data-skin="cinema"] .footerbar__langbtn,
html[data-skin="cinema"] .footer2__langbtn,
html[data-skin="cinema"] .footer-new .footer2__langbtn,
html[data-skin="sandia"] .footerbar__langbtn,
html[data-skin="sandia"] .footer2__langbtn,
html[data-skin="sandia"] .footer-new .footer2__langbtn,
html[data-skin="kiwi"] .footerbar__langbtn,
html[data-skin="kiwi"] .footer2__langbtn,
html[data-skin="kiwi"] .footer-new .footer2__langbtn,
html[data-skin="melocoton"] .footerbar__langbtn,
html[data-skin="melocoton"] .footer2__langbtn,
html[data-skin="melocoton"] .footer-new .footer2__langbtn,
html[data-skin="bubblegum"] .footerbar__langbtn,
html[data-skin="bubblegum"] .footer2__langbtn,
html[data-skin="bubblegum"] .footer-new .footer2__langbtn,
html[data-skin="banana"] .footerbar__langbtn,
html[data-skin="banana"] .footer2__langbtn,
html[data-skin="banana"] .footer-new .footer2__langbtn,
html[data-skin="lima"] .footerbar__langbtn,
html[data-skin="lima"] .footer2__langbtn,
html[data-skin="lima"] .footer-new .footer2__langbtn,
html[data-skin="menta"] .footerbar__langbtn,
html[data-skin="menta"] .footer2__langbtn,
html[data-skin="menta"] .footer-new .footer2__langbtn,
html[data-skin="strawberry"] .footerbar__langbtn,
html[data-skin="strawberry"] .footer2__langbtn,
html[data-skin="strawberry"] .footer-new .footer2__langbtn,
html[data-skin="lavanda"] .footerbar__langbtn,
html[data-skin="lavanda"] .footer2__langbtn,
html[data-skin="lavanda"] .footer-new .footer2__langbtn,
html[data-skin="grau"] .footerbar__langbtn,
html[data-skin="grau"] .footer2__langbtn,
html[data-skin="grau"] .footer-new .footer2__langbtn{
  appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  color: var(--muted) !important;
}

html[data-skin="snow"] .footerbar__langbtn.is-active,
html[data-skin="snow"] .footer2__langbtn.is-active,
html[data-skin="snow"] .footer-new .footer2__langbtn.is-active,
html[data-skin="cinema"] .footerbar__langbtn.is-active,
html[data-skin="cinema"] .footer2__langbtn.is-active,
html[data-skin="cinema"] .footer-new .footer2__langbtn.is-active,
html[data-skin="sandia"] .footerbar__langbtn.is-active,
html[data-skin="sandia"] .footer2__langbtn.is-active,
html[data-skin="sandia"] .footer-new .footer2__langbtn.is-active,
html[data-skin="kiwi"] .footerbar__langbtn.is-active,
html[data-skin="kiwi"] .footer2__langbtn.is-active,
html[data-skin="kiwi"] .footer-new .footer2__langbtn.is-active,
html[data-skin="melocoton"] .footerbar__langbtn.is-active,
html[data-skin="melocoton"] .footer2__langbtn.is-active,
html[data-skin="melocoton"] .footer-new .footer2__langbtn.is-active,
html[data-skin="bubblegum"] .footerbar__langbtn.is-active,
html[data-skin="bubblegum"] .footer2__langbtn.is-active,
html[data-skin="bubblegum"] .footer-new .footer2__langbtn.is-active,
html[data-skin="banana"] .footerbar__langbtn.is-active,
html[data-skin="banana"] .footer2__langbtn.is-active,
html[data-skin="banana"] .footer-new .footer2__langbtn.is-active,
html[data-skin="lima"] .footerbar__langbtn.is-active,
html[data-skin="lima"] .footer2__langbtn.is-active,
html[data-skin="lima"] .footer-new .footer2__langbtn.is-active,
html[data-skin="menta"] .footerbar__langbtn.is-active,
html[data-skin="menta"] .footer2__langbtn.is-active,
html[data-skin="menta"] .footer-new .footer2__langbtn.is-active,
html[data-skin="strawberry"] .footerbar__langbtn.is-active,
html[data-skin="strawberry"] .footer2__langbtn.is-active,
html[data-skin="strawberry"] .footer-new .footer2__langbtn.is-active,
html[data-skin="lavanda"] .footerbar__langbtn.is-active,
html[data-skin="lavanda"] .footer2__langbtn.is-active,
html[data-skin="lavanda"] .footer-new .footer2__langbtn.is-active,
html[data-skin="grau"] .footerbar__langbtn.is-active,
html[data-skin="grau"] .footer2__langbtn.is-active,
html[data-skin="grau"] .footer-new .footer2__langbtn.is-active{
  color: var(--link-accent, var(--accent2)) !important;
  font-weight: 600 !important;
}


/* === v153: swatch-wide hover/shadow/PRO-CTA parity fix === */
html[data-skin="snow"] .nav-cta,
html[data-skin="sandia"] .nav-cta,
html[data-skin="kiwi"] .nav-cta,
html[data-skin="melocoton"] .nav-cta,
html[data-skin="bubblegum"] .nav-cta,
html[data-skin="banana"] .nav-cta,
html[data-skin="lima"] .nav-cta,
html[data-skin="menta"] .nav-cta,
html[data-skin="strawberry"] .nav-cta,
html[data-skin="lavanda"] .nav-cta,
html[data-skin="grau"] .nav-cta,
html[data-skin="cinema"] .nav-cta{
  box-shadow: 0 8px 18px color-mix(in srgb, var(--fg) 12%, transparent) !important;
}

html[data-skin="snow"] .nav-cta:hover,
html[data-skin="snow"] .nav-cta:focus-visible,
html[data-skin="sandia"] .nav-cta:hover,
html[data-skin="sandia"] .nav-cta:focus-visible,
html[data-skin="kiwi"] .nav-cta:hover,
html[data-skin="kiwi"] .nav-cta:focus-visible,
html[data-skin="melocoton"] .nav-cta:hover,
html[data-skin="melocoton"] .nav-cta:focus-visible,
html[data-skin="bubblegum"] .nav-cta:hover,
html[data-skin="bubblegum"] .nav-cta:focus-visible,
html[data-skin="banana"] .nav-cta:hover,
html[data-skin="banana"] .nav-cta:focus-visible,
html[data-skin="lima"] .nav-cta:hover,
html[data-skin="lima"] .nav-cta:focus-visible,
html[data-skin="menta"] .nav-cta:hover,
html[data-skin="menta"] .nav-cta:focus-visible,
html[data-skin="strawberry"] .nav-cta:hover,
html[data-skin="strawberry"] .nav-cta:focus-visible,
html[data-skin="lavanda"] .nav-cta:hover,
html[data-skin="lavanda"] .nav-cta:focus-visible,
html[data-skin="grau"] .nav-cta:hover,
html[data-skin="grau"] .nav-cta:focus-visible,
html[data-skin="cinema"] .nav-cta:hover,
html[data-skin="cinema"] .nav-cta:focus-visible{
  color: #fff !important;
}

html[data-skin="snow"] .lab-page .lab-cta-avatar,
html[data-skin="sandia"] .lab-page .lab-cta-avatar,
html[data-skin="kiwi"] .lab-page .lab-cta-avatar,
html[data-skin="melocoton"] .lab-page .lab-cta-avatar,
html[data-skin="bubblegum"] .lab-page .lab-cta-avatar,
html[data-skin="banana"] .lab-page .lab-cta-avatar,
html[data-skin="lima"] .lab-page .lab-cta-avatar,
html[data-skin="menta"] .lab-page .lab-cta-avatar,
html[data-skin="strawberry"] .lab-page .lab-cta-avatar,
html[data-skin="lavanda"] .lab-page .lab-cta-avatar,
html[data-skin="grau"] .lab-page .lab-cta-avatar,
html[data-skin="cinema"] .lab-page .lab-cta-avatar{
  box-shadow: 0 12px 28px color-mix(in srgb, var(--fg) 14%, transparent) !important;
}

html[data-skin="snow"] body.pro .contact-band.lz-band,
html[data-skin="sandia"] body.pro .contact-band.lz-band,
html[data-skin="kiwi"] body.pro .contact-band.lz-band,
html[data-skin="melocoton"] body.pro .contact-band.lz-band,
html[data-skin="sandia"] body.pro .contact-band.lz-band,
html[data-skin="kiwi"] body.pro .contact-band.lz-band,
html[data-skin="melocoton"] body.pro .contact-band.lz-band,
html[data-skin="bubblegum"] body.pro .contact-band.lz-band,
html[data-skin="banana"] body.pro .contact-band.lz-band,
html[data-skin="lima"] body.pro .contact-band.lz-band,
html[data-skin="menta"] body.pro .contact-band.lz-band,
html[data-skin="strawberry"] body.pro .contact-band.lz-band,
html[data-skin="lavanda"] body.pro .contact-band.lz-band,
html[data-skin="grau"] body.pro .contact-band.lz-band{
  position: relative;
  background:
    radial-gradient(1200px 500px at 20% 40%, var(--band-glow-a), transparent 62%),
    radial-gradient(900px 400px at 80% 20%, var(--band-glow-b), transparent 58%),
    repeating-linear-gradient(90deg, var(--band-grid-a) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  var(--band-grid-b) 0 1px, transparent 1px 56px),
    url("../img/_others/relampagos.jpg") center/cover no-repeat !important;
}

html[data-skin="snow"] body.pro .contact-band.lz-band::before,
html[data-skin="sandia"] body.pro .contact-band.lz-band::before,
html[data-skin="kiwi"] body.pro .contact-band.lz-band::before,
html[data-skin="melocoton"] body.pro .contact-band.lz-band::before,
html[data-skin="sandia"] body.pro .contact-band.lz-band::before,
html[data-skin="kiwi"] body.pro .contact-band.lz-band::before,
html[data-skin="melocoton"] body.pro .contact-band.lz-band::before,
html[data-skin="bubblegum"] body.pro .contact-band.lz-band::before,
html[data-skin="banana"] body.pro .contact-band.lz-band::before,
html[data-skin="lima"] body.pro .contact-band.lz-band::before,
html[data-skin="menta"] body.pro .contact-band.lz-band::before,
html[data-skin="strawberry"] body.pro .contact-band.lz-band::before,
html[data-skin="lavanda"] body.pro .contact-band.lz-band::before,
html[data-skin="grau"] body.pro .contact-band.lz-band::before{
  content: none !important;
  display: none !important;
}

html[data-skin="snow"] body.pro .contact-band.lz-band > *,
html[data-skin="sandia"] body.pro .contact-band.lz-band > *,
html[data-skin="kiwi"] body.pro .contact-band.lz-band > *,
html[data-skin="melocoton"] body.pro .contact-band.lz-band > *,
html[data-skin="bubblegum"] body.pro .contact-band.lz-band > *,
html[data-skin="banana"] body.pro .contact-band.lz-band > *,
html[data-skin="lima"] body.pro .contact-band.lz-band > *,
html[data-skin="menta"] body.pro .contact-band.lz-band > *,
html[data-skin="strawberry"] body.pro .contact-band.lz-band > *,
html[data-skin="lavanda"] body.pro .contact-band.lz-band > *,
html[data-skin="grau"] body.pro .contact-band.lz-band > *{
  position: relative;
  z-index: 1;
}


/* v176b: PRO CTA premium image layering fix
   snow matches cinema exactly with the same visible grid construction.
   Other swatches keep relampagos under the grid with a lighter 25% veil. */
html[data-skin="snow"] body.pro .contact-band.lz-band,
html[data-skin="cinema"] body.pro .contact-band.lz-band{
  position: relative;
  background:
    radial-gradient(1200px 500px at 20% 40%, var(--band-glow-a), transparent 62%),
    radial-gradient(900px 400px at 80% 20%, var(--band-glow-b), transparent 58%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.06) 0 1px, transparent 1px 56px),
    url("../img/_others/relampagos.jpg") center/cover no-repeat !important;
}

html[data-skin="sandia"] body.pro .contact-band.lz-band,
html[data-skin="kiwi"] body.pro .contact-band.lz-band,
html[data-skin="melocoton"] body.pro .contact-band.lz-band,
html[data-skin="bubblegum"] body.pro .contact-band.lz-band,
html[data-skin="banana"] body.pro .contact-band.lz-band,
html[data-skin="lima"] body.pro .contact-band.lz-band,
html[data-skin="menta"] body.pro .contact-band.lz-band,
html[data-skin="strawberry"] body.pro .contact-band.lz-band,
html[data-skin="lavanda"] body.pro .contact-band.lz-band,
html[data-skin="grau"] body.pro .contact-band.lz-band{
  position: relative;
  background:
    radial-gradient(1200px 500px at 20% 40%, var(--band-glow-a), transparent 62%),
    radial-gradient(900px 400px at 80% 20%, var(--band-glow-b), transparent 58%),
    repeating-linear-gradient(90deg, var(--band-grid-a) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  var(--band-grid-b) 0 1px, transparent 1px 56px),
    linear-gradient(rgba(255,255,255,0.25), rgba(255,255,255,0.25)),
    linear-gradient(var(--band-base-a), var(--band-base-a)),
    url("../img/_others/relampagos.jpg") center/cover no-repeat !important;
}

html[data-skin="snow"] body.pro .contact-band.lz-band::before,
html[data-skin="cinema"] body.pro .contact-band.lz-band::before,
html[data-skin="sandia"] body.pro .contact-band.lz-band::before,
html[data-skin="kiwi"] body.pro .contact-band.lz-band::before,
html[data-skin="melocoton"] body.pro .contact-band.lz-band::before,
html[data-skin="bubblegum"] body.pro .contact-band.lz-band::before,
html[data-skin="banana"] body.pro .contact-band.lz-band::before,
html[data-skin="lima"] body.pro .contact-band.lz-band::before,
html[data-skin="menta"] body.pro .contact-band.lz-band::before,
html[data-skin="strawberry"] body.pro .contact-band.lz-band::before,
html[data-skin="lavanda"] body.pro .contact-band.lz-band::before,
html[data-skin="grau"] body.pro .contact-band.lz-band::before{
  content: none !important;
  display: none !important;
}


/* v176c+: SWATCH canonical component rules (clone-normalized) */
html[data-collection="swatch"] .nav-cta:hover,
html[data-collection="swatch"] .nav-cta:focus-visible,
html[data-collection="swatch"] .nav-cta:hover *,
html[data-collection="swatch"] .nav-cta:focus-visible *,
html[data-collection="swatch"] a.nav-cta:hover,
html[data-collection="swatch"] a.nav-cta:focus-visible,
html[data-collection="swatch"] a.nav-cta:hover *,
html[data-collection="swatch"] a.nav-cta:focus-visible *{
  color: var(--nav-cta-hover-fg, #fff) !important;
}

html[data-collection="swatch"] .contact-visual img{
  filter: var(--cta-icon-drop-shadow, drop-shadow(0 10px 20px rgba(35,49,66,.14))) !important;
}

html[data-collection="swatch"] .lab-page .lab-cta-avatar{
  box-shadow: var(--cta-avatar-shadow, 0 8px 18px rgba(35,49,66,.14)) !important;
}

html[data-collection="swatch"] body.pro .contact-band.lz-band{
  position: relative;
}

html[data-collection="swatch"] body.pro .contact-band.lz-band::before{
  content: none !important;
  display: none !important;
}

html[data-collection="swatch"] body.pro .contact-band.lz-band > *{
  position: relative;
  z-index: 1;
}

html[data-collection="swatch"] body.pro .contact-band .contact-copy h2,
html[data-collection="swatch"] body.pro .contact-band .contact-copy p,
html[data-collection="swatch"] body.pro .contact-band .contact-copy .section-intro,
html[data-collection="swatch"] body.pro .contact-band .contact-copy .contact-links,
html[data-collection="swatch"] body.pro .contact-band .contact-copy .contact-links span{
  color: var(--procta-text-fg, #fff) !important;
  -webkit-text-fill-color: var(--procta-text-fg, #fff) !important;
}

html[data-collection="swatch"] body.pro .contact-band .contact-copy a,
html[data-collection="swatch"] body.pro .contact-band .contact-copy .cta-link{
  color: var(--procta-link-fg, var(--link-accent)) !important;
  -webkit-text-fill-color: var(--procta-link-fg, var(--link-accent)) !important;
}

html[data-collection="swatch"] body.pro .contact-band .contact-copy a:hover,
html[data-collection="swatch"] body.pro .contact-band .contact-copy a:focus-visible,
html[data-collection="swatch"] body.pro .contact-band .contact-copy .cta-link:hover,
html[data-collection="swatch"] body.pro .contact-band .contact-copy .cta-link:focus-visible{
  color: var(--procta-link-hover-fg, var(--link-accent-hover)) !important;
  -webkit-text-fill-color: var(--procta-link-hover-fg, var(--link-accent-hover)) !important;
}

html[data-collection="swatch"][data-skin="snow"] body.pro .contact-band.lz-band,
html[data-collection="swatch"][data-skin="cinema"] body.pro .contact-band.lz-band{
  background:
    radial-gradient(1200px 500px at 20% 40%, var(--band-glow-a), transparent 62%),
    radial-gradient(900px 400px at 80% 20%, var(--band-glow-b), transparent 58%),
    repeating-linear-gradient(90deg, var(--procta-grid-a, var(--band-grid-a)) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  var(--procta-grid-b, var(--band-grid-b)) 0 1px, transparent 1px 56px),
    url("../img/_others/relampagos.jpg") center/cover no-repeat !important;
}

html[data-collection="swatch"]:not([data-skin="snow"]):not([data-skin="cinema"]) body.pro .contact-band.lz-band{
  background:
    radial-gradient(1200px 500px at 20% 40%, var(--band-glow-a), transparent 62%),
    radial-gradient(900px 400px at 80% 20%, var(--band-glow-b), transparent 58%),
    repeating-linear-gradient(90deg, var(--procta-grid-a, var(--band-grid-a)) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg,  var(--procta-grid-b, var(--band-grid-b)) 0 1px, transparent 1px 56px),
    linear-gradient(var(--procta-overlay), var(--procta-overlay)),
    linear-gradient(var(--procta-tint), var(--procta-tint)),
    url("../img/_others/relampagos.jpg") center/cover no-repeat !important;
}


/* === HOME stamp system === */
.lz-stamp{
  width:min(100%, 360px);
  aspect-ratio:1/1;
  color:var(--home-stamp-fg, var(--c-ink));
  background-color:currentColor;
  -webkit-mask:url("../img/_others/GG_PRO_EX.svg") no-repeat left center / contain;
  mask:url("../img/_others/GG_PRO_EX.svg") no-repeat left center / contain;
  opacity:.98;
  filter:drop-shadow(0 12px 32px var(--overlay-dim));
}
html[data-skin="cinema"] .lz-stamp{
  color:var(--c-white);
}
.lz-stamp img{
  display:none !important;
}


/* LZK grafico thumbs 4:3 override — scoped only to PRO/LAB archivo grafico */
.lab-archivo-grafico .ag-item,
.pro-archivo-grafico .ag-item,
.archivo-grafico-pro .ag-item {
  aspect-ratio: 4 / 3;
}


/* LZK FIX — PRO Golubo overlay text always white on all skins */
#gloubo-mola .gm-square__overlay,
#gloubo-mola .gm-square__overlay-text,
#gloubo-mola .gm-square__overlay-text strong,
#gloubo-mola .gm-square__l1,
#gloubo-mola .gm-square__l2,
#gloubo-mola .gm-square__l3 {
  color: #fff !important;
}