/* =============================================================
   MUKIWA — styles.css
   Archivo único, por secciones. Mobile-first.
   Base: archetype "Brutalist Grid" con la paleta MUKIWA.
   ============================================================= */

/* =============================================================
   1. TOKENS
   ============================================================= */
:root {
  /* Paleta MUKIWA */
  --ink:        #232323;   /* casi negro — fondo */
  --paper:      #FFFFFF;
  --lime:       #C5ED2E;   /* acento principal */
  --blue:       #0068FB;   /* acento secundario */
  --mute:       rgba(255,255,255,0.60);
  --line:       rgba(255,255,255,0.16);

  --bg:         var(--ink);
  --fg:         var(--paper);
  --accent:     var(--lime);

  /* Tipografía */
  --display:      "Satoshi", "Inter", system-ui, sans-serif;   /* minimalista, peso black — el logo lleva la voz creativa */
  --sans:         "Satoshi", "Inter", system-ui, sans-serif;
  --mono:         "Cygnito Mono", ui-monospace, "JetBrains Mono", monospace;

  /* Ritmo */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --maxw: 1600px;
  --radius:    20px;         /* vidrio: redondeado moderado, no píldora */
  --radius-sm: 12px;         /* botones, chips, tags */

  /* Easings */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Ratios por segmento (los usa la retícula) */
  --ratio-16-9: 16 / 9;
  --ratio-9-16: 9 / 16;
  --ratio-4-5:  4 / 5;

  /* Glassmorphism "iOS Clear" — más transparente que opaco, refracción
     real (lo de detrás se nota, no se esconde), borde delgado y nítido
     que traza toda la pieza como un aro de vidrio, highlight puntual
     arriba-izquierda (no un degradado ancho). Esquinas rectas. */
  --glass-bg:        linear-gradient(160deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 22%, rgba(255,255,255,0.02) 60%, rgba(255,255,255,0.06) 100%), rgba(30, 30, 30, 0.20);
  --glass-bg-strong: linear-gradient(160deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.05) 22%, rgba(255,255,255,0.02) 60%, rgba(255,255,255,0.07) 100%), rgba(24, 24, 24, 0.22);
  --glass-border:    rgba(255, 255, 255, 0.38);
  --glass-blur:      blur(8px) saturate(240%) brightness(1.15) contrast(1.08);
  --glass-blur-strong: blur(14px) saturate(240%) brightness(1.18) contrast(1.08);
  --glass-shadow:    0 24px 60px -16px rgba(0,0,0,0.5), 0 2px 10px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(0,0,0,0.22), inset 1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(0,0,0,0.1);
  --glass-glow:      0 0 60px -8px rgba(197,237,46,0.22), 0 0 100px -20px rgba(0,104,251,0.22);
  /* Borde tornasol — lima/blanco/azul en degradado, nunca un solo color */
  --iris-border:       linear-gradient(135deg, rgba(197,237,46,0.65) 0%, rgba(255,255,255,0.65) 25%, rgba(0,104,251,0.65) 50%, rgba(255,255,255,0.45) 75%, rgba(197,237,46,0.6) 100%);
  --iris-border-hover: linear-gradient(135deg, rgba(197,237,46,0.95) 0%, rgba(255,255,255,0.6) 30%, rgba(0,104,251,0.6) 65%, rgba(197,237,46,0.85) 100%);
}

@font-face { font-family:"Satoshi"; src:url("assets/fonts/satoshi-variable.woff2") format("woff2"); font-weight:300 900; font-style:normal; font-display:swap; }
@font-face { font-family:"Satoshi"; src:url("assets/fonts/satoshi-variable-italic.woff2") format("woff2"); font-weight:300 900; font-style:italic; font-display:swap; }
@font-face { font-family:"Cygnito Mono"; src:url("assets/fonts/cygnito-mono.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Cygnito Mono"; src:url("assets/fonts/cygnito-mono-bold.woff2") format("woff2"); font-weight:700; font-display:swap; }

/* =============================================================
   2. RESET & BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 16px; line-height: 1.6;
  background: var(--bg); color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;                 /* clip, NO hidden (rompe sticky) */
  overscroll-behavior-y: none;
}
/* Fondo mesh-gradient sitewide: negro dominante, lima/azul difuminados,
   deriva lenta (el "pulso" de la marca). Vive detrás de todo (z-index -2)
   para que el glassmorphism de header/tarjetas tenga algo que blurear. */
body::before {
  content: "";
  position: fixed; inset: -12%;
  z-index: -2; pointer-events: none;
  background:
    radial-gradient(110% 85% at 6% 104%, rgba(0, 104, 251, 0.62), transparent 60%),
    radial-gradient(60% 55% at 90% 6%, rgba(197, 237, 46, 0.45), transparent 62%),
    radial-gradient(45% 40% at 58% 42%, rgba(197, 237, 46, 0.16), transparent 65%),
    #000;
  filter: blur(110px) saturate(135%);
  animation: meshShift 26s ease-in-out infinite alternate;
}
@keyframes meshShift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-3%, 3%, 0) scale(1.06); }
  100% { transform: translate3d(3%, -2%, 0) scale(1); }
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.02; letter-spacing: -0.02em; font-family: var(--sans); font-weight: 900; }
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

/* =============================================================
   3. UTILIDADES
   ============================================================= */
.skip-link { position: fixed; top: -100px; left: 1rem; padding: .6rem 1rem; background: var(--lime); color: var(--ink); z-index: 9999; }
.skip-link:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.kicker { font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
main > section { padding: clamp(3rem, 8vw, 7rem) var(--gutter); border-top: 1px solid var(--line); max-width: var(--maxw); margin-inline: auto; }

/* =============================================================
   4. TIPOGRAFÍA
   ============================================================= */
h1 { font-size: clamp(2rem, 7vw, 4.5rem); text-transform: uppercase; }
h2 { font-size: clamp(1.6rem, 4.5vw, 3rem); }
.lede { font-family: var(--mono); font-size: clamp(1rem, 2vw, 1.25rem); color: var(--mute); max-width: 52ch; }
.meta { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }

/* =============================================================
   5. COMPONENTES
   ============================================================= */
/* .btn ------------------------------------------------------- */
.btn { display: inline-block; padding: .9rem 1.6rem; background: var(--lime); color: var(--ink); font-family: var(--mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; border-radius: var(--radius-sm); transition: background .3s var(--ease-out), color .3s var(--ease-out); }
.btn:hover { background: var(--blue); color: var(--paper); }
.btn-ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); }

/* .header — glass ---------------------------------------------- */
/* backdrop-filter vive en ::before (no en .header) para que .header NO se
   vuelva containing block de descendientes position:fixed (el nav móvil). */
.header { position: sticky; top: 0; z-index: 100; background: var(--glass-bg-strong) padding-box, var(--iris-border) border-box; border: 0 solid transparent; border-bottom-width: 1.5px; box-shadow: 0 4px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.18); }
.header::before { content: ""; position: absolute; inset: 0; z-index: -1; backdrop-filter: var(--glass-blur-strong); -webkit-backdrop-filter: var(--glass-blur-strong); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem var(--gutter); max-width: var(--maxw); margin-inline: auto; }
.brand-mark { display: block; height: 26px; width: auto; }
.nav { display: none; gap: 1.5rem; font-family: var(--mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
.nav a { position: relative; padding: .25rem 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--lime); transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease-out); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { color: var(--lime); }
.nav-toggle { font-family: var(--mono); font-size: .78rem; text-transform: uppercase; }

/* .grid-trabajos — ratio y columnas los fija cada página -------- */
.grid-trabajos { display: grid; gap: .6rem; grid-template-columns: 1fr; }
[data-segmento="eventos"] .card-media,
[data-segmento="comerciales"] .card-media { aspect-ratio: var(--ratio-16-9); }
[data-segmento="contenido"] .card-media    { aspect-ratio: var(--ratio-9-16); }
[data-segmento="sesiones"] .card-media     { aspect-ratio: var(--ratio-4-5); }
.grid-diseno { display: grid; gap: .6rem; grid-template-columns: repeat(2, 1fr); }
.grid-diseno .card-media { aspect-ratio: var(--ratio-4-5); }

/* .card — vidrio esmerilado, esquinas rectas ------------------ */
.card {
  position: relative; overflow: hidden; cursor: pointer;
  counter-increment: caso;
  background: var(--glass-bg) padding-box, var(--iris-border) border-box;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  transition: background .3s var(--ease-out);
}
.card:hover { background: var(--glass-bg) padding-box, var(--iris-border-hover) border-box; }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .card { backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
}
.card-media { overflow: hidden; }
.card-media img, .card-media video { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.card:hover .card-media img { transform: scale(1.04); }
.card-body { padding: 1rem; display: flex; justify-content: space-between; gap: 1rem; }
.card-titulo { font-family: var(--sans); font-weight: 700; font-size: 1rem; text-transform: uppercase; }
.card-sector { font-family: var(--mono); font-size: .7rem; color: var(--mute); text-transform: uppercase; }
.card-anio { color: var(--lime); }
.card-disciplinas { display: flex; flex-wrap: wrap; gap: .35rem; }
.card-disciplinas li { font-family: var(--mono); font-size: .62rem; padding: .18rem .45rem; border: 1px solid var(--line); border-radius: 6px; text-transform: uppercase; }

/* .chips / .segmento-tabs ------------------------------------ */
.chips, .segmento-tabs { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin-bottom: 2rem; }
.chips button, .segmento-tabs button { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; padding: .5rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); transition: background .25s var(--ease-out), color .25s var(--ease-out); }
.chips button[aria-pressed="true"], .segmento-tabs button[aria-selected="true"] { background: var(--lime); color: var(--ink); border-color: var(--lime); }

/* .cliente-lista / .canal-item (estudio.html, "con quién trabajo") */
.cliente-lista { list-style: none; padding: 0; display: grid; gap: .6rem; }
.canal-item { background: var(--glass-bg) padding-box, var(--iris-border) border-box; border: 1.5px solid transparent; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); border-radius: var(--radius); padding: 1.5rem var(--gutter); display: grid; gap: .75rem; }
.canal-nombre { color: var(--lime); }
.canal-clientes { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-family: var(--display); text-transform: uppercase; font-size: clamp(1rem, 2.2vw, 1.4rem); }

/* .entregables / .modalidad (bloque 3 de cada segmento) --------- */
.entregables ul { list-style: none; padding: 0; display: grid; gap: .5rem; margin-bottom: 1.5rem; }
.entregables ul:not(:empty) { border: 1px solid var(--line); }
.entregables li { background: var(--glass-bg) padding-box, var(--iris-border) border-box; border: 1.5px solid transparent; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); border-radius: var(--radius-sm); padding: 1rem 1.25rem; }
.entregables li::before { content: "— "; color: var(--lime); font-family: var(--mono); }
.modalidad { font-family: var(--mono); font-size: .85rem; color: var(--mute); max-width: 60ch; }
.contacto-datos { font-family: var(--mono); }

/* .depto-item (estudio.html, "02 · Departamentos") -------------- */
.departamentos ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.depto-item { background: var(--glass-bg) padding-box, var(--iris-border) border-box; border: 1.5px solid transparent; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); border-radius: var(--radius); padding: 1.75rem var(--gutter); display: grid; gap: .5rem; }
.depto-item h3 { font-size: clamp(1.1rem, 2.5vw, 1.6rem); text-transform: uppercase; }
.depto-item p { font-family: var(--mono); color: var(--mute); max-width: 50ch; }
@media (min-width: 720px) { .departamentos ul { grid-template-columns: repeat(3, 1fr); } }

/* .manifiesto / .metodo (estudio.html) -------------------------- */
.manifiesto-texto, .metodo p { font-size: clamp(1.1rem, 2.2vw, 1.5rem); max-width: 62ch; color: var(--fg); }

/* .showreel ------------------------------------------------------ */
.showreel video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; margin-top: 1.5rem; }

/* .overlay-nav ---------------------------------------------------- */
.overlay-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.overlay-nav button { font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; padding: .6rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); transition: border-color .25s var(--ease-out), color .25s var(--ease-out); }
.overlay-nav button:hover { border-color: var(--lime); color: var(--lime); }

/* .contacto-datos / .contacto-form -------------------------------- */
.contacto { display: grid; gap: 3rem; }
.contacto-datos { list-style: none; padding: 0; display: grid; gap: .5rem; }
.contacto-datos li { background: var(--glass-bg) padding-box, var(--iris-border) border-box; border: 1.5px solid transparent; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); border-radius: var(--radius-sm); padding: 1.1rem 1.25rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.contacto-datos a { text-decoration: underline; text-underline-offset: .2em; }
.contacto-datos a:hover { color: var(--lime); }
.contacto-form { display: grid; gap: 1.25rem; max-width: 640px; }
.contacto-form label { display: grid; gap: .4rem; font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.contacto-form input, .contacto-form select, .contacto-form textarea {
  font: inherit; font-family: var(--sans); font-size: 1rem; color: var(--fg);
  background: transparent; border: 1px solid var(--line); padding: .8rem 1rem;
}
.contacto-form select { appearance: none; border-radius: 0; }
.contacto-form input:focus, .contacto-form select:focus, .contacto-form textarea:focus { border-color: var(--lime); }
.contacto-form button { justify-self: start; }
@media (min-width: 960px) { .contacto { grid-template-columns: 1fr 1.2fr; align-items: start; } }

/* .overlay (detalle de trabajo, sin cambio de página) ---------- */
.overlay { position: fixed; inset: 0; z-index: 200; background: var(--ink); overflow-y: auto; overscroll-behavior: contain; }
.overlay[hidden] { display: none; }
.overlay-close { position: fixed; top: 1rem; right: var(--gutter); z-index: 210; font-family: var(--mono); font-size: .75rem; text-transform: uppercase; padding: .5rem .9rem; background: var(--lime); color: var(--ink); }
.overlay-panel { max-width: var(--maxw); margin-inline: auto; padding: 4rem var(--gutter); }
.overlay-head .meta { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; padding: 0; margin-top: 1rem; color: var(--mute); }
.overlay-media { display: grid; gap: 2px; margin: 2.5rem 0; grid-template-columns: 1fr; }   /* 2 col con gutter mínimo en escritorio */
.overlay-media .full { grid-column: 1 / -1; }                                                /* vídeo a ancho completo */

/* .ctabar (barra fija inferior contextual) --------------------- */
.ctabar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; display: flex; align-items: center; gap: 1rem; padding: .8rem var(--gutter); background: var(--lime); color: var(--ink); transform: translateY(100%); transition: transform .45s var(--ease-out); }
.ctabar[data-visible="true"] { transform: translateY(0); }
.ctabar-msg { font-family: var(--mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.ctabar-link { font-weight: 700; text-decoration: underline; }
.ctabar-close { margin-left: auto; font-size: 1.2rem; line-height: 1; }

/* .splash ----------------------------------------------------- */
.splash { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; gap: 1rem; background: var(--ink); animation: splashOut .8s var(--ease-in) 1.6s forwards, splashKill 0s linear 4.5s forwards; }
.splash-logo { width: clamp(160px, 30vw, 280px); height: auto; }
.splash-word { font-family: var(--mono); font-size: .85rem; letter-spacing: .14em; color: var(--lime); text-transform: uppercase; text-align: center; }
@keyframes splashOut  { to { opacity: 0; } }
@keyframes splashKill { to { display: none; visibility: hidden; } }
.is-ready .splash { display: none; }

/* .footer — glass, a lo ancho en pantallas grandes ------------- */
.footer {
  position: relative;
  border: 0 solid transparent; border-top-width: 1.5px;
  background: var(--glass-bg) padding-box, var(--iris-border) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  padding: 3rem var(--gutter) 4rem;
}
.footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.footer-inner { max-width: var(--maxw); margin-inline: auto; display: grid; gap: 2rem; }
.footer-brand { font-family: var(--display); font-weight: 900; text-transform: uppercase; }
.footer-depts, .footer-social { list-style: none; padding: 0; font-family: var(--mono); font-size: .78rem; text-transform: uppercase; display: grid; gap: .4rem; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.footer-claim { font-family: var(--mono); color: var(--lime); font-size: .78rem; letter-spacing: .12em; }
.footer-credit, .footer-rights { font-family: var(--mono); color: var(--mute); font-size: .68rem; letter-spacing: .06em; }
.footer-rights { margin-left: auto; }
@media (min-width: 860px) {
  .footer-inner { grid-template-columns: auto 1fr auto; align-items: start; }
  .footer-brand { font-size: 1.1rem; }
  .footer-social { justify-self: end; text-align: right; }
  .footer-bottom { grid-column: 1 / -1; }
}

/* =============================================================
   6. SECCIONES
   ============================================================= */
.page-head { display: grid; gap: 1rem; }
.proceso-lista { list-style: none; padding: 0; display: grid; gap: .6rem; }
.proceso-lista li { background: var(--glass-bg) padding-box, var(--iris-border) border-box; border: 1.5px solid transparent; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); border-radius: var(--radius); padding: 1.5rem; display: grid; gap: .5rem; align-content: start; }
.proceso-lista p { font-family: var(--mono); color: var(--mute); }
@media (min-width: 720px) { .proceso-lista { grid-template-columns: repeat(3, 1fr); } }
.cta-final { display: grid; gap: 1.5rem; justify-items: start; }

/* .landing (index.html — pantalla única, sin scroll) ------------ */
.landing {
  min-height: 100svh; min-height: 100dvh;
  display: grid; place-items: center; text-align: center;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  padding: clamp(1.5rem, 6vw, 3rem) var(--gutter);
  border-top: 0 !important;
}
.landing-brand { display: grid; justify-items: center; gap: .4rem; }
.landing-logo { width: clamp(220px, 46vw, 520px); height: auto; margin-inline: auto; }
.landing-depts { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1rem; list-style: none; padding: 0; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.landing-depts li { position: relative; padding-right: 1rem; }
.landing-depts li:not(:last-child)::after { content: "·"; position: absolute; right: 0; color: var(--mute); }
.landing-tagline { font-family: var(--mono); font-size: clamp(.9rem, 2.4vw, 1.15rem); letter-spacing: .14em; text-transform: uppercase; color: var(--lime); }
.landing-doors { display: grid; gap: .6rem; width: min(100%, 640px); }
.door {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  padding: 1.6rem 1.5rem;
  background: var(--glass-bg-strong) padding-box, var(--iris-border) border-box;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow), var(--glass-glow);
  transition: background .3s var(--ease-out), color .3s var(--ease-out), box-shadow .4s var(--ease-out);
}
.door:hover { box-shadow: var(--glass-shadow), 0 0 80px -6px rgba(197,237,46,0.32), 0 0 120px -16px rgba(0,104,251,0.3); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .door { backdrop-filter: var(--glass-blur-strong); -webkit-backdrop-filter: var(--glass-blur-strong); }
}
.door:hover { background: color-mix(in srgb, var(--lime) 16%, var(--glass-bg-strong)); color: var(--lime); }
.door-num { font-family: var(--mono); font-size: .8rem; color: var(--lime); }
.door-label { font-family: var(--sans); font-weight: 900; font-size: clamp(1rem, 2.4vw, 1.3rem); text-transform: uppercase; }
@media (min-width: 540px) { .landing-doors { grid-template-columns: repeat(2, 1fr); } }
.landing-social { display: flex; gap: 1rem; list-style: none; padding: 0; font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.landing-social a:hover { color: var(--lime); }

/* .segmentos-picker (trabajos.html — selector de entrada) -------- */
.segmentos-picker { display: grid; gap: 1.25rem; margin-bottom: 2.5rem; }
.segmento-door {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: .75rem;
  width: 100%; text-align: left;
  font-family: inherit; color: inherit;
  padding: clamp(2rem, 6vw, 3.5rem) clamp(1.75rem, 5vw, 3rem);
  background: rgba(20,20,20,0.45) padding-box, var(--iris-border) border-box;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow), var(--glass-glow);
  cursor: pointer;
  transition: background .3s var(--ease-out), color .3s var(--ease-out), box-shadow .4s var(--ease-out);
}
/* Reel de fondo, difuminado, para dar profundidad y contraste detrás del texto */
.segmento-door-bg {
  position: absolute; inset: -12px; z-index: 0; pointer-events: none;
  width: calc(100% + 24px); height: calc(100% + 24px);
  object-fit: cover;
  filter: blur(18px) saturate(140%) brightness(.6);
  transform: scale(1.05);
}
.segmento-door-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(165deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.6) 100%);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .segmento-door { backdrop-filter: var(--glass-blur-strong); -webkit-backdrop-filter: var(--glass-blur-strong); }
}
.segmento-door:hover, .segmento-door:focus-visible {
  box-shadow: var(--glass-shadow), 0 0 80px -6px rgba(197,237,46,0.32), 0 0 120px -16px rgba(0,104,251,0.3);
  color: var(--lime);
}
.segmento-door:hover .segmento-door-scrim { background: linear-gradient(165deg, color-mix(in srgb, var(--lime) 22%, rgba(0,0,0,.55)) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.6) 100%); }
.segmento-door-num, .segmento-door-label, .segmento-door-promesa { position: relative; z-index: 2; }
.segmento-door-num { font-family: var(--mono); font-size: .85rem; color: var(--lime); }
.segmento-door-label { font-family: var(--sans); font-weight: 900; font-size: clamp(1.8rem, 5vw, 3rem); text-transform: uppercase; }
.segmento-door-promesa { font-family: var(--mono); color: var(--mute); font-size: clamp(.9rem, 1.4vw, 1.05rem); max-width: 60ch; }
.segmento-door:hover .segmento-door-promesa { color: inherit; }

/* .impacto (Our Vybz — métricas reales de Instagram) --------------
   Anillos por métrica en los colores de marca + acentos rojo/amarillo.
   El color activo viaja por --mc, así una sola regla sirve para las 4. */
.impacto { display: grid; gap: 1.25rem; }
.impacto h2 { margin-top: .25rem; }
.impacto .lede { margin-bottom: .5rem; }

.impacto-anillos { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; margin: .5rem 0 1.5rem; }
@media (min-width: 720px) { .impacto-anillos { grid-template-columns: repeat(4, 1fr); } }

.anillo {
  position: relative; display: grid; justify-items: center; gap: .75rem;
  padding: 1.5rem 1rem; font-family: inherit; color: inherit; cursor: pointer;
  background: var(--glass-bg) padding-box, var(--iris-border) border-box;
  border: 1.5px solid transparent; border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  transition: background .3s var(--ease-out), box-shadow .4s var(--ease-out);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .anillo { backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
}
.anillo:hover, .anillo:focus-visible { box-shadow: var(--glass-shadow), 0 0 60px -10px var(--mc); }
.anillo[aria-pressed="true"] {
  background: color-mix(in srgb, var(--mc) 14%, var(--glass-bg-strong)) padding-box, var(--iris-border) border-box;
  box-shadow: var(--glass-shadow), 0 0 70px -12px var(--mc);
}
.anillo-viz { position: relative; display: grid; place-items: center; width: clamp(96px, 22vw, 124px); aspect-ratio: 1; }
.anillo-viz svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo-pista { fill: none; stroke: rgba(255,255,255,0.10); stroke-width: 8; }
.anillo-arco  { fill: none; stroke: var(--mc); stroke-width: 8; stroke-linecap: round;
  transition: stroke-dashoffset 1.1s var(--ease-out); filter: drop-shadow(0 0 8px var(--mc)); }
.anillo-cifra { position: absolute; inset: 0; display: grid; place-items: center; }
.anillo-cifra b { font-family: var(--sans); font-weight: 900; font-size: clamp(1.15rem, 3.4vw, 1.6rem); letter-spacing: -.02em; }
.anillo-nombre { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); text-align: center; }
.anillo[aria-pressed="true"] .anillo-nombre { color: var(--mc); }

.impacto-nota { color: var(--mute); font-size: .72rem; }

/* Ranking — aro de progreso + barra sutil de fondo por fila */
.rank { display: grid; gap: .35rem; }
.rank-fila {
  position: relative; display: grid; align-items: center; gap: .85rem;
  grid-template-columns: auto 40px 1fr auto;
  padding: .8rem 1rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); overflow: hidden;
  color: inherit; text-decoration: none;
  transition: border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.rank-fila::before {                      /* barra proporcional, detrás del texto */
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pct); z-index: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--mc) 22%, transparent), transparent);
  transition: width .8s var(--ease-out);
}
a.rank-fila:hover { border-color: var(--mc); transform: translateX(3px); }
.rank-pos, .rank-aro, .rank-txt, .rank-num { position: relative; z-index: 1; }
.rank-pos { font-family: var(--mono); font-size: .72rem; color: var(--mc); }
.rank-aro { width: 40px; height: 40px; }
.rank-aro svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rank-aro circle { fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 4; }
.rank-aro .rank-aro-fill { stroke: var(--mc); stroke-linecap: round; transition: stroke-dashoffset .8s var(--ease-out); }
.rank-txt { display: grid; gap: .1rem; min-width: 0; }
.rank-txt b { font-family: var(--sans); font-weight: 700; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-txt em { font-style: normal; font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.rank-num { font-family: var(--mono); font-size: .8rem; font-variant-numeric: tabular-nums; }
.impacto-pie { color: var(--mute); font-size: .68rem; margin-top: .5rem; }
@media (max-width: 560px) {
  .rank-fila { grid-template-columns: auto 1fr auto; gap: .6rem; padding: .7rem .8rem; }
  .rank-aro { display: none; }
}

.segmento-panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-bottom: 1.5rem; }
.segmento-panel-head h2 { font-size: clamp(1.4rem, 3vw, 2rem); }

/* En el landing el header se oculta: las dos puertas SON la navegación */
body[data-page="inicio"] .header { display: none; }

/* Fallback sólido si el navegador no soporta backdrop-filter ----- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header, .footer, .card, .proceso-lista li, .entregables li, .canal-item,
  .depto-item, .contacto-datos li, .door, .segmento-door { background: var(--glass-bg-strong); }
}

/* =============================================================
   7. EFECTOS
   ============================================================= */
/* Reveal por IntersectionObserver (threshold ≤ .05 + red de seguridad 6s en JS) */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
/* RED DE SEGURIDAD obligatoria: si el JS de split falla, el texto NO se queda invisible */
.reveal[data-split] { opacity: 1; transform: none; }

/* Transiciones entre páginas (View Transitions API) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; animation-timing-function: var(--ease-out); }

/* =============================================================
   8. RESPONSIVE (5 pasos fijos, nada de breakpoints inventados)
   ============================================================= */
@media (min-width: 540px) {
  .grid-diseno { grid-template-columns: repeat(2, 1fr); }
  .grid-trabajos[data-segmento="contenido"],
  .grid-trabajos[data-segmento="sesiones"] { grid-template-columns: repeat(2, 1fr); }  /* móvil: 2 col */
}
@media (min-width: 720px) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
  .overlay-media { grid-template-columns: repeat(2, 1fr); }   /* galería 2 col, gutter mínimo */
}
@media (min-width: 960px) {
  .grid-trabajos[data-segmento="eventos"],
  .grid-trabajos[data-segmento="comerciales"] { grid-template-columns: repeat(2, 1fr); }
  .grid-diseno,
  .grid-trabajos[data-segmento="sesiones"] { grid-template-columns: repeat(3, 1fr); }   /* Diseño y Sesiones: 3 col a 4:5 / 3:4 */
}
@media (min-width: 1280px) {
  .grid-trabajos[data-segmento="contenido"] { grid-template-columns: repeat(4, 1fr); }  /* Contenido: 4 col */
}
@media (max-width: 719.98px) {
  .nav[data-open="true"] {
    display: flex;
    position: fixed;
    inset: 60px 0 0 0;
    z-index: 90;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem var(--gutter);
    background: var(--ink);
    font-size: 1rem;
    overflow-y: auto;
  }
}

/* =============================================================
   9. REDUCED-MOTION — solo efectos intrusivos.
   NO desactivar hovers, fades ni reveals (Windows lo trae activado
   por defecto y dejaría la web "muerta").
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none; }
  video[autoplay] { display: none; }
}