/* ==========================================================================
   davidbahamon.com — estilos
   1. Fuentes (locales, sin Google)   5. Portada (t-home)
   2. Temas y variables               6. Hotel tech (t-hotel)
   3. Base                            7. Live coding (t-punk)
   4. Componentes compartidos         8. Eventos (t-night) · 9. Páginas simples
   ========================================================================== */

/* 1. Fuentes ------------------------------------------------------------- */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/assets/fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-latin-wdth-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

/* 2. Temas --------------------------------------------------------------- */
:root {
  --sans: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --pad: clamp(20px, 4.5vw, 64px);
  --max: 1440px;
  --radius: 16px;
  --focus: #F5C518;

  /* tema por defecto (portada) */
  --paper: #FAF8F5;
  --surface: #FFFFFF;
  --ink: #141414;
  --muted: #5C5A55;
  --line: #E6E2DB;
  --accent: #9E1450;
  --on-accent: #FFFFFF;
  --field-bg: #FFFFFF;
  --field-line: #CFC9BF;
}
.t-hotel {
  --paper: #F2EFE8;
  --surface: #FBF9F4;
  --ink: #16161A;
  --muted: #57544C;
  --line: #D6D0C3;
  --accent: #B8391A;
  --field-line: #C4BDAF;
}
.t-punk {
  --paper: #0A0A0A;
  --surface: #151515;
  --ink: #F5F5F0;
  --muted: #9A9A93;
  --line: #2A2A2A;
  --accent: #F06A3F;
  --on-accent: #0A0A0A;
  --field-bg: #151515;
  --field-line: #3A3A3A;
}
.t-night {
  --paper: #0E0E10;
  --surface: #19191D;
  --ink: #F4F2EE;
  --muted: #A8A49B;
  --line: #2C2C31;
  --accent: #F06A3F;
  --on-accent: #0E0E10;
  --field-bg: #19191D;
  --field-line: #3A3A40;
}

/* 3. Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.narrow { max-width: 820px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 12px 18px; background: var(--ink); color: var(--paper); border-radius: 8px;
  text-decoration: none; font-weight: 700;
}
.skip-link:focus { top: 12px; }

.section { padding-block: clamp(72px, 9vw, 120px); border-top: 1px solid var(--line); }
.eyebrow {
  font-family: var(--mono); font-size: 13px; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.h1 { font-size: clamp(56px, 9vw, 120px); font-weight: 800; line-height: 0.92; letter-spacing: -0.045em; }
.h2 {
  margin-top: 16px; font-size: clamp(40px, 6vw, 76px); font-weight: 800;
  line-height: 0.98; letter-spacing: -0.035em;
}
.h3 { margin-top: 56px; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.lead { font-size: clamp(19px, 2vw, 24px); line-height: 1.45; color: var(--muted); max-width: 38ch; }
.section-intro { margin-top: 20px; max-width: 52ch; font-size: 19px; color: var(--muted); }

/* 4. Componentes compartidos --------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 28px; border: 2px solid transparent; border-radius: 999px;
  font: inherit; font-size: 17px; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-lg { min-height: 64px; padding: 0 36px; font-size: 20px; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-light { background: #FFFFFF; color: #141414; }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-outline { border-color: currentColor; color: var(--ink); background: transparent; }

/* Header */
.site-header { position: relative; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 96px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 48px; height: 48px; border: 3px solid currentColor; border-radius: 12px;
  font-size: 20px; font-weight: 800; letter-spacing: -0.04em;
}
.brand-text { display: flex; flex-direction: column; gap: 2px; }
.brand-name { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.brand-tag { font-size: 13px; opacity: 0.8; }

.site-nav { display: flex; align-items: center; gap: 8px; }
.nav-list { display: flex; gap: 4px; }
.nav-list a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
}
.nav-list a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.lang-switch { display: flex; margin-inline: 8px; font-family: var(--mono); font-size: 12px; }
.lang-switch a {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  text-decoration: none; opacity: 0.65;
}
.lang-switch a[aria-current="true"] { opacity: 1; font-weight: 500; text-decoration: underline; text-underline-offset: 5px; }
.nav-cta {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px; border-radius: 6px;
  background: var(--ink); color: var(--paper); text-decoration: none;
  font-size: 15px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
}
.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 0; border: 0; background: transparent;
  color: inherit; cursor: pointer; align-items: center; justify-content: center;
}

@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; }
  .brand-tag { display: none; }
  .header-inner { min-height: 72px; }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 16px;
    padding: 16px var(--pad) 28px; background: var(--ink); color: var(--paper);
  }
  .site-nav.is-open { display: flex; }
  .nav-list { flex-direction: column; }
  .nav-list a { width: 100%; min-height: 52px; padding: 0; font-size: 22px; border-bottom: 1px solid rgba(255,255,255,0.15); }
  .t-punk .site-nav, .t-night .site-nav { background: var(--surface); color: var(--ink); }
  .lang-switch { margin: 0; }
  .nav-cta { justify-content: center; background: var(--paper); color: var(--ink); }
  .t-punk .nav-cta, .t-night .nav-cta { background: var(--accent); color: var(--on-accent); }
}

/* Contacto */
.contact { padding-block: clamp(72px, 9vw, 120px); border-top: 1px solid var(--line); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact-title { font-size: clamp(56px, 9vw, 128px); font-weight: 800; line-height: 0.9; letter-spacing: -0.045em; }
.contact-text { margin-top: 24px; max-width: 30ch; font-size: 20px; color: var(--muted); }
.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: 15px; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 54px; padding: 14px 16px;
  border: 1.5px solid var(--field-line); border-radius: 10px;
  background: var(--field-bg); color: var(--ink); font: inherit; font-size: 17px;
}
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--muted); }
.check input { width: 22px; height: 22px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--ink); }
.check a { color: var(--ink); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 860px) {
  .contact-grid, .contact-form { grid-template-columns: minmax(0, 1fr); }
}

/* Footer */
.site-footer { padding-top: 72px; background: #141414; color: #F5F5F0; }
.t-punk .site-footer { background: #0A0A0A; border-top: 1px solid var(--line); }
.t-night .site-footer { background: #09090A; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; padding-bottom: 56px; }
.footer-title { margin-bottom: 16px; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: #A8A49B; }
.footer-col a { display: inline-flex; align-items: center; min-height: 40px; font-size: 18px; font-weight: 600; text-decoration: none; }
.footer-col a:hover { text-decoration: underline; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  padding-block: 20px; border-top: 1px solid #333; font-family: var(--mono); font-size: 13px; color: #A8A49B;
}
.footer-legal { display: flex; gap: 8px; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }

/* 5. Portada ------------------------------------------------------------- */
.t-home .site-header {
  position: absolute; top: 0; left: 0; right: 0;
  background: transparent; border-bottom: 0; color: #FFFFFF;
}
.t-home .nav-list a[aria-current="page"] { color: #FFFFFF; }
.t-home .nav-cta { background: #FFFFFF; color: #141414; }
@media (max-width: 1000px) {
  .t-home .site-nav { background: #141414; color: #FFFFFF; }
  .t-home .nav-cta { background: #FFFFFF; color: #141414; }
}

.hero {
  position: relative; overflow: hidden; color: #FFFFFF;
  background-color: var(--accent);
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.9) 0, rgba(0,0,0,0) 220px),
    linear-gradient(100deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 58%);
}
.hero-inner {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end;
  min-height: clamp(700px, 100vh, 980px); gap: 24px;
}
.hero-copy { padding-block: 176px 96px; position: relative; z-index: 2; }
.hero-name { font-size: clamp(76px, 12vw, 176px); font-weight: 800; line-height: 0.86; letter-spacing: -0.05em; }
.hero-line { margin-top: 32px; max-width: 18ch; font-size: clamp(26px, 3.2vw, 46px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.hero-actions { display: flex; align-items: center; gap: 8px; margin-top: 40px; }
.btn-circle {
  display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px;
  border: 2px solid #FFFFFF; border-radius: 999px; color: #FFFFFF;
}
.hero-doors { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.hero-doors a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1px solid rgba(255,255,255,0.55); border-radius: 999px;
  font-family: var(--mono); font-size: 13px; text-decoration: none;
}
.hero-doors a:hover { background: rgba(255,255,255,0.12); }
.hero-photo { position: relative; align-self: end; }
.hero-photo img { width: 100%; max-width: 520px; height: auto; margin-inline: auto; }
.hero-badge { position: absolute; top: 4%; right: 0; width: clamp(112px, 12vw, 180px); height: auto; z-index: 3; }
.badge-bg { fill: #F5C518; }
.badge-core { fill: var(--accent); }
.badge-text { fill: #141414; font-family: var(--sans); font-size: 15px; font-weight: 800; letter-spacing: 1.5px; }
@media (prefers-reduced-motion: no-preference) {
  .hero-badge { animation: spin 24s linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-copy { padding-block: 120px 0; }
  .hero-photo img { max-width: 360px; }
  .hero-badge { top: 0; right: 4px; }
}

.motive-text {
  margin-top: 24px; max-width: 30ch; font-size: clamp(28px, 3.8vw, 52px); font-weight: 600;
  line-height: 1.15; letter-spacing: -0.025em;
}

.story-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.story-list li { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 3px solid var(--ink); }
.story-num { font-size: 48px; font-weight: 800; line-height: 1; color: var(--accent); }
.story-list h3 { font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.story-list p { color: var(--muted); font-size: 16px; }
@media (max-width: 1000px) { .story-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .story-list { grid-template-columns: minmax(0, 1fr); } }

.beliefs { background: #141414; color: #F5F5F0; border-top: 0; }
.beliefs .eyebrow { color: #A8A49B; }
.beliefs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px); margin-top: 40px; }
.belief h3 { font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
.belief p { margin-top: 20px; max-width: 44ch; font-size: 19px; color: #C9C6BE; }
@media (max-width: 760px) { .beliefs-grid { grid-template-columns: minmax(0, 1fr); } }

.doors-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.door {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  min-height: 480px; padding: 36px; border-radius: var(--radius); text-decoration: none;
  transition: transform .2s ease;
}
.door:hover { transform: translateY(-4px); }
.door-top, .door-bottom { position: relative; display: flex; }
.door-top { flex-direction: column; gap: 18px; }
.door-bottom { justify-content: space-between; align-items: center; gap: 16px; margin-top: 32px; }
.door-num { font-family: var(--mono); font-size: 13px; opacity: 0.8; }
.door-title { font-size: clamp(44px, 4.4vw, 60px); font-weight: 800; line-height: 0.95; letter-spacing: -0.035em; }
.door-text { font-size: 18px; line-height: 1.5; }
.door-tag { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.door-arrow {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 56px; height: 56px; border-radius: 999px; font-size: 22px;
}
.door-hotel { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.door-hotel .door-text, .door-hotel .door-tag { color: var(--muted); }
.door-hotel .door-arrow { background: var(--ink); color: var(--paper); }
.door-live { background: #0A0A0A; color: #F5F5F0; }
.door-live .door-text { color: #C9C6BE; }
.door-live .door-tag { color: #9A9A93; }
.door-live .door-arrow { background: #F06A3F; color: #0A0A0A; }
.door-live .door-top { padding-top: 150px; }
.door-art { position: absolute; right: -40px; top: -40px; width: 260px; height: 260px; }
.art-light { fill: #F5F5F0; }
.art-dark { fill: #0A0A0A; }
.art-accent { fill: #F06A3F; }
.door-events { background: var(--accent); color: #FFFFFF; }
.door-events .door-arrow { background: #FFFFFF; color: #141414; }
@media (max-width: 1000px) { .doors-grid { grid-template-columns: minmax(0, 1fr); } .door { min-height: 360px; } }

/* 6. Hotel tech ---------------------------------------------------------- */
.t-hotel .h1, .t-hotel .h2, .hotel-h1, .t-hotel .contact-title, .fact-value {
  font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em;
}
.t-hotel .h3 { font-family: var(--serif); font-weight: 400; font-size: 40px; }
.hotel-hero { padding-block: clamp(56px, 7vw, 88px); }
.hotel-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(40px, 6vw, 80px); align-items: end; }
.hotel-h1 { margin-top: 20px; font-size: clamp(76px, 10vw, 136px); line-height: 0.92; }
.hotel-hero .lead { margin-top: 24px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fact {
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  min-height: 176px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
}
.fact-value { font-size: 44px; line-height: 1; }
.fact-label { font-size: 15px; line-height: 1.45; color: var(--muted); }
@media (max-width: 1000px) { .hotel-hero-inner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .facts { grid-template-columns: minmax(0, 1fr); } .fact { min-height: 0; } }

.cases-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.case { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.case-media {
  display: flex; align-items: center; justify-content: center; height: 220px;
  background: #E5E0D5; border-bottom: 1px dashed #A8A193;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.case-body { display: flex; flex-direction: column; gap: 16px; padding: 28px; }
.case-num { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.case h3 { font-size: 26px; font-weight: 600; color: var(--muted); }
.case dl { display: flex; flex-direction: column; gap: 12px; }
.case dt { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.case dd { color: var(--muted); }
@media (max-width: 1000px) { .cases-grid { grid-template-columns: minmax(0, 1fr); } }

.experience-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(40px, 6vw, 80px); align-items: start; }
.timeline { margin-top: 32px; border-bottom: 1px solid var(--line); }
.timeline li { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 32px; padding-block: 24px; border-top: 1px solid var(--line); }
.tl-date { padding-top: 4px; font-family: var(--mono); font-size: 14px; color: var(--muted); }
.tl-body { display: flex; flex-direction: column; gap: 6px; }
.tl-role { font-size: 22px; font-weight: 600; line-height: 1.25; }
.tl-org { color: var(--muted); }
.side { display: flex; flex-direction: column; gap: 40px; padding-top: 136px; }
.side-block { display: flex; flex-direction: column; gap: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 8px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: 15px; }
.langs div { display: flex; justify-content: space-between; gap: 16px; padding-block: 14px; border-top: 1px solid var(--line); }
.langs div:last-child { border-bottom: 1px solid var(--line); }
.langs dd { color: var(--muted); }
@media (max-width: 1000px) {
  .experience-grid { grid-template-columns: minmax(0, 1fr); }
  .side { padding-top: 0; }
}
@media (max-width: 600px) { .timeline li { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* 7. Live coding --------------------------------------------------------- */
.t-punk .brand-mark { border-radius: 999px; }
.t-punk .brand-name { text-transform: lowercase; }
.t-punk .nav-list a { text-transform: lowercase; letter-spacing: 0; font-weight: 500; font-size: 18px; }
.t-punk .nav-list a[aria-current="page"] { background: var(--accent); color: var(--on-accent); border-radius: 999px; text-decoration: none; }
.t-punk .nav-cta { background: var(--accent); color: var(--on-accent); border-radius: 999px; text-transform: lowercase; letter-spacing: 0; }
.punk-hero { padding-block: clamp(56px, 7vw, 96px); }
.punk-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 48px; align-items: center; }
.punk-kicker { font-family: var(--mono); font-size: 15px; color: var(--accent); }
.punk-title { margin-top: 24px; font-size: clamp(88px, 14vw, 200px); font-weight: 800; line-height: 0.82; letter-spacing: -0.06em; }
.punk-text { margin-top: 28px; max-width: 26ch; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.3; color: #C9C6BE; }
.punk-soon { margin: 28px 0 20px; font-family: var(--mono); font-size: 14px; color: var(--muted); text-transform: lowercase; }
.op-art { width: 100%; height: auto; }
.art-rings circle { fill: none; stroke: #F06A3F; stroke-width: 5; }
@media (max-width: 860px) { .punk-hero-inner { grid-template-columns: minmax(0, 1fr); } .op-art { max-width: 360px; } }
.t-punk .contact-title { text-transform: lowercase; }

/* 8. Eventos ------------------------------------------------------------- */
.night-hero { padding-block: clamp(56px, 7vw, 96px); }
.night-title { margin-top: 20px; font-size: clamp(88px, 13vw, 184px); font-weight: 800; line-height: 0.85; letter-spacing: -0.05em; }
.night-text { margin-top: 24px; max-width: 30ch; font-size: 22px; color: #C9C6BE; }
.houses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.house { display: flex; flex-direction: column; gap: 14px; min-height: 360px; justify-content: flex-end; padding: 36px; border-radius: var(--radius); }
.house-casa { background: #26221D; }
.house-fastidios { background: #1D1B2A; }
.house-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.house-casa .house-kicker { color: #E8B58C; }
.house h2 { font-size: clamp(40px, 4.4vw, 56px); font-weight: 800; line-height: 0.95; letter-spacing: -0.04em; }
.house p:not(.house-kicker) { color: #C9C6BE; }
.house-soon {
  align-self: flex-start; margin-top: 8px; padding: 8px 14px; border: 1px solid #4A4A52; border-radius: 999px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
@media (max-width: 760px) { .houses { grid-template-columns: minmax(0, 1fr); } }

/* 9. Páginas simples ----------------------------------------------------- */
.plain-page { padding-block: clamp(64px, 9vw, 120px); }
.plain-page .lead { margin-block: 24px 36px; }
.legal h2 { margin-top: 40px; font-size: 22px; font-weight: 700; }
.legal p { margin-top: 12px; max-width: 70ch; }
.legal a { text-decoration: underline; }
.legal-date { color: var(--muted); }

/* 10. Event manager (t-stage) ------------------------------------------- */
.t-stage {
  --paper: #0D0C14;
  --surface: #17151F;
  --ink: #F3F1F8;
  --muted: #ABA7B9;
  --line: #2A2735;
  --accent: #724CF9;
  --accent-text: #CA7DF9;
  --on-accent: #FFFFFF;
  --field-bg: #17151F;
  --field-line: #3A3648;
}
.t-stage .eyebrow { color: var(--accent-text); }
.t-stage .site-footer { background: #08070D; border-top: 1px solid var(--line); }
.t-stage .nav-cta { background: var(--accent); color: var(--on-accent); }
.t-stage .check input { accent-color: var(--accent); }

/* Cabecera mínima: sin menú, solo idioma y contacto */
.header-min { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom: 0; color: #FFFFFF; }
.header-min-actions { display: flex; align-items: center; gap: 8px; }
@media (max-width: 600px) { .header-min .lang-switch a { width: 36px; } .header-min .nav-cta { padding: 0 16px; } }

.btn-ghost { border-color: rgba(255,255,255,0.7); color: #FFFFFF; background: rgba(0,0,0,0.2); }

/* Hero: foto de evento de fondo + retrato recortado */
.em-hero { position: relative; overflow: hidden; color: #FFFFFF; background: #0D0C14; }
.em-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.em-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(13,12,20,0.85) 0, rgba(13,12,20,0) 200px),
    linear-gradient(90deg, rgba(13,12,20,0.95) 0%, rgba(13,12,20,0.6) 50%, rgba(13,12,20,0.1) 100%),
    linear-gradient(0deg, #0D0C14 0, rgba(13,12,20,0) 160px);
}
.em-hero-inner {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: end; gap: 24px; min-height: clamp(720px, 100vh, 940px);
}
.em-hero-copy { padding-block: 168px 96px; }
.em-kicker { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.em-name { margin-top: 20px; font-size: clamp(56px, 8.5vw, 124px); font-weight: 800; line-height: 0.9; letter-spacing: -0.045em; }
.em-role { display: block; color: var(--accent-text); }
.em-lead { margin-top: 28px; max-width: 34ch; font-size: clamp(19px, 2vw, 24px); line-height: 1.45; color: #DAD6E6; }
.em-hero .actions { margin-top: 36px; }
.em-permit { margin-top: 24px; font-family: var(--mono); font-size: 13px; color: #C9C5D6; }
.em-portrait { align-self: end; width: 100%; max-width: 560px; height: auto; margin-left: auto; filter: drop-shadow(0 0 60px rgba(114,76,249,0.35)); }
@media (max-width: 860px) {
  .em-hero-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .em-hero-copy { padding-block: 128px 0; }
  .em-portrait { max-width: 340px; margin-inline: auto; }
}

/* Cifras */
.em-stats { border-block: 1px solid var(--line); }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats-grid div { display: flex; flex-direction: column-reverse; gap: 8px; padding: 36px 24px 36px 0; }
.stats-grid div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.stats-grid dd { font-size: clamp(44px, 5vw, 72px); font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.stats-grid dt { font-size: 15px; color: var(--muted); max-width: 22ch; }
@media (max-width: 860px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid div:nth-child(3) { padding-left: 0; border-left: 0; }
  .stats-grid div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* Eventos */
.case-feature {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px);
  margin-top: 56px; padding: clamp(20px, 3vw, 36px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.case-copy h3 { margin-top: 10px; font-size: clamp(30px, 3.2vw, 44px); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; }
.case-copy > p { margin-top: 16px; color: var(--muted); }
.case-copy h4 { margin-top: 24px; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.ticks { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.ticks li { position: relative; padding-left: 28px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 14px; height: 2px; background: var(--accent-text); }
.case-result { margin-top: 24px; padding: 16px 18px; border-radius: 10px; background: rgba(114,76,249,0.14); }
.case-result span { font-weight: 700; color: var(--accent-text); }
.case-tag { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.case-strip { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 12px; }
.case-strip img { width: 100%; height: 220px; object-fit: cover; border-radius: 10px; }
@media (max-width: 860px) {
  .case-feature { grid-template-columns: minmax(0, 1fr); }
  .case-strip { grid-template-columns: 1fr 1fr; }
  .case-strip img:nth-child(2) { grid-column: 1 / -1; order: -1; }
}

.case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; margin-top: 48px; }
.case-card { display: flex; flex-direction: column; gap: 12px; }
.case-card h3 { font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.case-card p:not(.case-tag) { color: var(--muted); font-size: 16px; }
.case-card .case-tag { margin-top: 6px; }
.media, .video { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 12px; background: #000; }
.case-feature .video { aspect-ratio: auto; min-height: 320px; }
.media img, .video img { width: 100%; height: 100%; object-fit: cover; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-btn {
  position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: #FFFFFF; font: inherit; font-size: 15px; font-weight: 700;
}
.video-btn::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; }
.video.is-empty .video-btn { background: rgba(13,12,20,0.8); color: #C9C5D6; cursor: default; }
.video.is-empty .video-btn::before { display: none; }
@media (max-width: 1000px) { .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .case-grid { grid-template-columns: minmax(0, 1fr); } }

/* Proceso */
.process-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 48px; border-top: 1px solid var(--line); }
.process-list li { display: flex; flex-direction: column; gap: 10px; padding: 32px 28px 36px 0; border-bottom: 1px solid var(--line); }
.process-list li:not(:nth-child(3n+1)) { padding-left: 28px; border-left: 1px solid var(--line); }
.process-num { font-family: var(--mono); font-size: 13px; color: var(--accent-text); }
.process-list h3 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.process-list p { color: var(--muted); }
@media (max-width: 860px) {
  .process-list { grid-template-columns: minmax(0, 1fr); }
  .process-list li:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
}

/* Diseño */
.em-design-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.poster-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; }
.poster-row img { width: 100%; height: auto; border-radius: 8px; }
.poster-row img:nth-child(2) { transform: translateY(-24px); }
@media (max-width: 860px) { .em-design-grid { grid-template-columns: minmax(0, 1fr); } }

.em-permit-side { font-family: var(--mono); font-size: 13px; color: var(--muted); }
@media (max-width: 480px) { .header-min .brand-text { display: none; } }

/* Showreel */
.reel-player { margin-top: 40px; }
.reel-player video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); background: #000; }
.reel-player figcaption { margin-top: 12px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.reel-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.reel-timeline li { display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--muted); }
.reel-timeline img { flex: none; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
.reel-time { font-family: var(--mono); font-size: 13px; color: var(--accent-text); }
@media (max-width: 860px) { .reel-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
video.em-hero-bg { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) {
  video.em-hero-bg { display: none; }
  .em-hero { background: #0D0C14 url("/assets/video/hero-poster.webp") center / cover no-repeat; }
}

/* Habilidades técnicas */
.skills-block { margin-top: clamp(48px, 6vw, 80px); }
.skills-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px 48px; align-items: end; }
.skills-head h3, .skills-more h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; }
.skills-head p { color: var(--muted); max-width: 52ch; }
@media (max-width: 860px) { .skills-head { grid-template-columns: minmax(0, 1fr); } }

.mapdemo { margin-top: 28px; padding: clamp(14px, 2vw, 24px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.mapdemo-steps { display: flex; flex-wrap: wrap; gap: 8px; }
.mapdemo-steps button {
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); cursor: pointer;
  background: transparent; color: var(--muted); font: inherit; font-size: 15px; font-weight: 600;
}
.mapdemo-steps button:hover { color: #FFFFFF; border-color: var(--accent-text); }
.mapdemo-steps button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.mapdemo-svg { display: block; width: 100%; height: auto; margin-top: 16px; border-radius: 10px; }
.mapdemo-captions { margin-top: 14px; min-height: 3.2em; }
.mapdemo-captions p { display: none; max-width: 70ch; }
.mapdemo[data-mode="2"] .mapdemo-captions p[data-step="2"],
.mapdemo[data-mode="3"] .mapdemo-captions p[data-step="3"],
.mapdemo[data-mode="4"] .mapdemo-captions p[data-step="4"] { display: block; }

.mp-label { font-family: var(--mono); font-size: 13px; fill: #8E89A3; }
.mp-beat { font-family: var(--mono); font-size: 15px; fill: #F896D8; display: none; }
.mp-map, .mp-mask { display: none; }
.mp-mask-lines polygon { fill: rgba(167,156,255,0.08); stroke: #CA7DF9; stroke-width: 2; stroke-dasharray: 7 5; }
.mp-mask-handles circle { fill: #FFFFFF; stroke: #724CF9; stroke-width: 2; }
.mapdemo[data-mode="2"] .mp-mask { display: inline; }
.mapdemo[data-mode="3"] .mp-map, .mapdemo[data-mode="4"] .mp-map { display: inline; }
.mapdemo[data-mode="2"] .mp-cone, .mapdemo[data-mode="3"] .mp-cone, .mapdemo[data-mode="4"] .mp-cone { opacity: 0.5; }
.mapdemo[data-mode="4"] .mp-beat { display: inline; animation: mp-beat 0.469s ease-out infinite; }
.mapdemo[data-mode="4"] .face { animation: mp-beat 0.469s ease-out infinite; }
.mapdemo[data-mode="4"] .face-1, .mapdemo[data-mode="4"] .face-4 { animation-duration: 0.938s; }
.mapdemo[data-mode="4"] .face-2, .mapdemo[data-mode="4"] .face-5 { animation-delay: 0.234s; }
@keyframes mp-beat { 0% { opacity: 1; } 100% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .mapdemo .face, .mapdemo .mp-beat { animation: none !important; } }

.pipeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 28px; counter-reset: none; }
.pipeline li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.pipeline li:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; right: -13px; width: 10px; height: 10px; z-index: 1;
  border-top: 2px solid var(--accent-text); border-right: 2px solid var(--accent-text); transform: translateY(-50%) rotate(45deg);
}
.pipeline h4 { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.pipeline p { color: var(--muted); font-size: 16px; }
@media (max-width: 1000px) {
  .pipeline { grid-template-columns: minmax(0, 1fr); }
  .pipeline li:not(:last-child)::after { top: auto; bottom: -13px; right: 50%; transform: translateX(50%) rotate(135deg); }
}

.skills-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; padding-top: 40px; border-top: 1px solid var(--line); }
.skills-more .ticks { margin-top: 16px; color: var(--muted); }
@media (max-width: 860px) { .skills-more { grid-template-columns: minmax(0, 1fr); } }

/* Eventos: rejilla de 4 */
.case-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .case-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .case-grid-4 { grid-template-columns: minmax(0, 1fr); } }

.map-real { margin-top: 24px; }
.map-real img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.map-real figcaption { margin-top: 12px; font-family: var(--mono); font-size: 13px; color: var(--muted); }


/* Motion graphic de impresión 3D (automático, 20 s en bucle) */
.motion3d { margin-top: 28px; }
.m3-stage {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--line); background: radial-gradient(ellipse at 50% 40%, #171427 0%, #0B0A12 70%);
}
.m3-layer, .m3-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.m3-scene { opacity: 0; }
.m3-stage img { position: absolute; display: block; height: auto; max-width: none; }
.m3-file { font-family: var(--mono); font-size: 18px; fill: #8E89A3; }
.m3-big { font-family: var(--mono); font-size: 64px; font-weight: 700; fill: #C6FF1A; }

.m3-s1 { animation: m3-s1 12s linear infinite; }
.m3-s2 { animation: m3-s2 12s linear infinite; }
.m3-s3 { animation: m3-s3 12s linear infinite; }
@keyframes m3-s1 { 0% { opacity: 0; } 2%, 46% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes m3-s2 { 0%, 47% { opacity: 0; } 49%, 67% { opacity: 1; } 69%, 100% { opacity: 0; } }
@keyframes m3-s3 { 0%, 68% { opacity: 0; } 70%, 97% { opacity: 1; } 99.5%, 100% { opacity: 0; } }

/* Escena 1: en el ordenador */
.m3-screen { left: 37.5%; top: 14.4%; width: 25%; }
.m3-logo, .m3-f1 { animation: m3-w1 12s linear infinite; }
.m3-f2 { animation: m3-w2 12s linear infinite; }
.m3-f3 { animation: m3-w3 12s linear infinite; }
.m3-wire { animation: m3-wire 12s linear infinite; }
@keyframes m3-w1 { 0%, 17% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes m3-w2 { 0%, 17% { opacity: 0; } 20%, 34% { opacity: 1; } 37%, 100% { opacity: 0; } }
@keyframes m3-w3 { 0%, 35% { opacity: 0; } 37%, 46% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes m3-wire {
  0%, 16% { opacity: 0; transform: perspective(900px) rotateY(-18deg); }
  20% { opacity: 1; }
  34% { opacity: 1; transform: perspective(900px) rotateY(18deg); }
  37%, 100% { opacity: 0; transform: perspective(900px) rotateY(18deg); }
}
.m3-scan { opacity: 0; animation: m3-scan 12s linear infinite; }
@keyframes m3-scan { 0%, 15% { opacity: 0; transform: translateY(0); } 16% { opacity: 1; } 22% { opacity: 1; transform: translateY(480px); } 23%, 100% { opacity: 0; transform: translateY(480px); } }
.m3-q { width: 12.5%; opacity: 0; animation: m3-split 12s ease-out infinite; }
.m3-q1 { left: 37.5%; top: 14.4%; --dx: -10%; --dy: -10%; }
.m3-q2 { left: 50%; top: 14.4%; --dx: 10%; --dy: -10%; }
.m3-q3 { left: 37.5%; top: 36.6%; --dx: -10%; --dy: 10%; }
.m3-q4 { left: 50%; top: 36.6%; --dx: 10%; --dy: 10%; }
@keyframes m3-split {
  0%, 35% { opacity: 0; transform: translate(0, 0); }
  37% { opacity: 1; transform: translate(0, 0); }
  41%, 46% { opacity: 1; transform: translate(var(--dx), var(--dy)); }
  48%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}

/* Escena 2: la impresora */
.m3-print { left: 41.875%; top: 48.9%; width: 16.25%; clip-path: inset(100% 0 0 0); animation: m3-print 12s linear infinite; }
@keyframes m3-print { 0%, 49% { clip-path: inset(100% 0 0 0); } 66%, 100% { clip-path: inset(0 0 0 0); } }
.m3-head-y { animation: m3-head-y 12s linear infinite; }
@keyframes m3-head-y { 0%, 49% { transform: translateY(0); } 66%, 100% { transform: translateY(-262px); } }
.m3-head-x { animation: m3-head-x 0.35s ease-in-out infinite alternate; }
@keyframes m3-head-x { from { transform: translateX(-120px); } to { transform: translateX(120px); } }
.m3-hot { animation: m3-hot 0.35s ease-in-out infinite alternate; }
@keyframes m3-hot { from { opacity: 0.4; } to { opacity: 1; } }

/* Escena 3: se pega y se mapea */
.m3-a { width: 16.25%; opacity: 0; animation: m3-in 12s cubic-bezier(.2,.8,.2,1) infinite; }
.m3-a1 { left: 33.75%; top: 21.1%; --fx: -70%; --fy: -60%; }
.m3-a2 { left: 50%; top: 21.1%; --fx: 70%; --fy: -60%; }
.m3-a3 { left: 33.75%; top: 50%; --fx: -70%; --fy: 60%; }
.m3-a4 { left: 50%; top: 50%; --fx: 70%; --fy: 60%; }
@keyframes m3-in {
  0%, 69% { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(-6deg); }
  76%, 100% { opacity: 1; transform: translate(0, 0) rotate(0); }
}
.m3-seam { stroke: #C6FF1A; stroke-width: 5; stroke-linecap: round; opacity: 0; animation: m3-seam 12s linear infinite; }
@keyframes m3-seam { 0%, 75% { opacity: 0; } 77%, 79% { opacity: 1; } 82%, 100% { opacity: 0; } }

/* Pasos debajo: se iluminan solos */
.m3-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.m3-steps li { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 3px solid var(--line); font-size: 15px; font-weight: 600; color: var(--muted); opacity: 0.45; }
.m3-steps li span { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--accent-text); }
.m3-l1 { animation: m3-l1 12s linear infinite; } .m3-l2 { animation: m3-l2 12s linear infinite; } .m3-l3 { animation: m3-l3 12s linear infinite; }
.m3-l4 { animation: m3-l4 12s linear infinite; } .m3-l5 { animation: m3-l5 12s linear infinite; } 
@keyframes m3-l1 { 0%, 17% { opacity: 1; color: #FFFFFF; border-top-color: var(--accent); } 18%, 100% { opacity: 0.45; } }
@keyframes m3-l2 { 0%, 17% { opacity: 0.45; } 18%, 34% { opacity: 1; color: #FFFFFF; border-top-color: var(--accent); } 35%, 100% { opacity: 0.45; } }
@keyframes m3-l3 { 0%, 35% { opacity: 0.45; } 36%, 47% { opacity: 1; color: #FFFFFF; border-top-color: var(--accent); } 48%, 100% { opacity: 0.45; } }
@keyframes m3-l4 { 0%, 48% { opacity: 0.45; } 49%, 67% { opacity: 1; color: #FFFFFF; border-top-color: var(--accent); } 68%, 100% { opacity: 0.45; } }
@keyframes m3-l5 { 0%, 68% { opacity: 0.45; } 69%, 100% { opacity: 1; color: #FFFFFF; border-top-color: var(--accent); } }
.m3-note { margin-top: 14px; color: var(--muted); max-width: 70ch; }
@media (max-width: 700px) {
  .m3-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 12px; }
  .mp2-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m3-steps li { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .motion3d * { animation: none !important; }
  .m3-s3, .m3-a { opacity: 1; }
  .m3-a { transform: none; }
  .m3-steps li { opacity: 1; }
}

/* Video mapping: mismo formato, ciclo de 16 s (pieza, máscaras, mapping, música) */
.mp2 { margin-top: 28px; }
.mp2 .m3-stage { background: radial-gradient(ellipse at 50% 10%, #1A1730 0%, #0B0A12 70%); }
.mp2-piece { left: 55%; top: 24.44%; width: 25%; }
.mp2-tag { animation: mp2-tag 9s linear infinite; }
.mp2-beam { opacity: 0; animation: mp2-beam 9s linear infinite; }
.mp2-lens { animation: mp2-lens 9s linear infinite; }
.mp2-fill, .mp2-mapped { opacity: 0; animation: mp2-fill 9s linear infinite; }
.mp2-face { animation: mp2-beat 9s linear infinite; }
.mp2-mapped { animation: mp2-fill 9s linear infinite, mp2-glow 9s linear infinite; }
.mp2-mask polygon, .mp2-mask circle { fill: rgba(167,156,255,0.10); stroke: #CA7DF9; stroke-width: 3; stroke-dasharray: 10 8; animation: mp2-ants 0.8s linear infinite; }
.mp2-mask, .mp2-handles, .mp2-sw { opacity: 0; animation: mp2-mask 9s linear infinite; }
.mp2-handles circle { fill: #FFFFFF; stroke: #724CF9; stroke-width: 3; }
.mp2-bpm { opacity: 0; fill: #F896D8; font-size: 40px; animation: mp2-bpm 9s linear infinite; }
@keyframes mp2-tag { 0%, 22% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes mp2-mask { 0%, 24% { opacity: 0; } 28%, 48% { opacity: 1; } 53%, 100% { opacity: 0; } }
@keyframes mp2-ants { to { stroke-dashoffset: -36; } }
@keyframes mp2-beam { 0%, 47% { opacity: 0; } 51%, 100% { opacity: 1; } }
@keyframes mp2-lens { 0%, 47% { fill: #4A4560; } 51%, 100% { fill: #FFFFFF; } }
@keyframes mp2-fill { 0%, 49% { opacity: 0; } 55%, 100% { opacity: 1; } }
@keyframes mp2-beat { 0%, 74.9% { opacity: 1; } 75.000% { opacity: 1; } 77.400% { opacity: 0.35; } 78.125% { opacity: 1; } 80.525% { opacity: 0.35; } 81.250% { opacity: 1; } 83.650% { opacity: 0.35; } 84.375% { opacity: 1; } 86.775% { opacity: 0.35; } 87.500% { opacity: 1; } 89.900% { opacity: 0.35; } 90.625% { opacity: 1; } 93.025% { opacity: 0.35; } 93.750% { opacity: 1; } 96.150% { opacity: 0.35; } 96.875% { opacity: 1; } 99.275% { opacity: 0.35; } 100% { opacity: 1; } }
@keyframes mp2-glow { 0%, 74.9% { filter: drop-shadow(0 0 20px rgba(248,150,216,0.35)); } 75.000% { filter: drop-shadow(0 0 46px rgba(248,150,216,0.7)); } 77.400% { filter: drop-shadow(0 0 8px rgba(114,76,249,0.3)); } 78.125% { filter: drop-shadow(0 0 46px rgba(248,150,216,0.7)); } 80.525% { filter: drop-shadow(0 0 8px rgba(114,76,249,0.3)); } 81.250% { filter: drop-shadow(0 0 46px rgba(248,150,216,0.7)); } 83.650% { filter: drop-shadow(0 0 8px rgba(114,76,249,0.3)); } 84.375% { filter: drop-shadow(0 0 46px rgba(248,150,216,0.7)); } 86.775% { filter: drop-shadow(0 0 8px rgba(114,76,249,0.3)); } 87.500% { filter: drop-shadow(0 0 46px rgba(248,150,216,0.7)); } 89.900% { filter: drop-shadow(0 0 8px rgba(114,76,249,0.3)); } 90.625% { filter: drop-shadow(0 0 46px rgba(248,150,216,0.7)); } 93.025% { filter: drop-shadow(0 0 8px rgba(114,76,249,0.3)); } 93.750% { filter: drop-shadow(0 0 46px rgba(248,150,216,0.7)); } 96.150% { filter: drop-shadow(0 0 8px rgba(114,76,249,0.3)); } 96.875% { filter: drop-shadow(0 0 46px rgba(248,150,216,0.7)); } 99.275% { filter: drop-shadow(0 0 8px rgba(114,76,249,0.3)); } }
@keyframes mp2-bpm { 0%, 74% { opacity: 0; } 76%, 100% { opacity: 1; } }
.mp2-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mp2-l1 { animation: mp2-l1 9s linear infinite; } .mp2-l2 { animation: mp2-l2 9s linear infinite; }
.mp2-l3 { animation: mp2-l3 9s linear infinite; } .mp2-l4 { animation: mp2-l4 9s linear infinite; }
@keyframes mp2-l1 { 0%, 24% { opacity: 1; color: #FFFFFF; border-top-color: var(--accent); } 25%, 100% { opacity: 0.45; } }
@keyframes mp2-l2 { 0%, 24% { opacity: 0.45; } 25%, 49% { opacity: 1; color: #FFFFFF; border-top-color: var(--accent); } 50%, 100% { opacity: 0.45; } }
@keyframes mp2-l3 { 0%, 49% { opacity: 0.45; } 50%, 74% { opacity: 1; color: #FFFFFF; border-top-color: var(--accent); } 75%, 100% { opacity: 0.45; } }
@keyframes mp2-l4 { 0%, 74% { opacity: 0.45; } 75%, 100% { opacity: 1; color: #FFFFFF; border-top-color: var(--accent); } }
.mp2-captions { display: grid; margin-top: 14px; }
.mp2-captions p { grid-area: 1 / 1; max-width: 70ch; opacity: 0; }
.mp2-c1 { animation: mp2-c1 9s linear infinite; } .mp2-c2 { animation: mp2-c2 9s linear infinite; }
.mp2-c3 { animation: mp2-c3 9s linear infinite; } .mp2-c4 { animation: mp2-c4 9s linear infinite; }
@keyframes mp2-c1 { 0%, 24% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes mp2-c2 { 0%, 24% { opacity: 0; } 25%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes mp2-c3 { 0%, 49% { opacity: 0; } 50%, 74% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes mp2-c4 { 0%, 74% { opacity: 0; } 75%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .mp2 * { animation: none !important; }
  .mp2-fill, .mp2-mapped, .mp2-beam, .mp2-c3 { opacity: 1; }
  .mp2-steps li { opacity: 1; }
}

/* Software */
.tool-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.tool { display: flex; flex-direction: column; gap: 10px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.tool-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; font-family: var(--mono); font-size: 18px; font-weight: 700; color: #0D0C14; }
.tool-meshy .tool-mark { background: #CA7DF9; }
.tool-bambu .tool-mark { background: #C6FF1A; }
.tool-resolume .tool-mark { background: #CA7DF9; }
.tool-canva .tool-mark { background: #F896D8; }
.tool h4 { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.tool p { color: var(--muted); font-size: 16px; }
@media (max-width: 1000px) { .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .tool-grid { grid-template-columns: minmax(0, 1fr); } }
.m3-ready { font-size: 26px; fill: #CA7DF9; opacity: 0; animation: m3-ready 12s linear infinite; }
@keyframes m3-ready { 0%, 81% { opacity: 0; } 84%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .m3-ready { opacity: 1; } }

/* Casos de estudio */
.editions { grid-column: 1 / -1; margin-top: 8px; }
.editions h4 { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.editions-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.editions-list li { display: flex; flex-direction: column; gap: 6px; }
.editions-list img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; }
.ed-num { font-family: var(--mono); font-size: 14px; font-weight: 700; color: #FFFFFF; }
.ed-meta { font-size: 14px; color: var(--muted); }
@media (max-width: 700px) { .editions-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.studies { display: grid; gap: clamp(40px, 5vw, 64px); margin-top: clamp(48px, 6vw, 80px); }
.study { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
.study-media { display: grid; gap: 12px; }
.study-media-2 { grid-template-columns: 1fr 1fr; }
.study-media img { width: 100%; height: auto; border-radius: 10px; }
.study-copy h3 { margin-top: 10px; font-size: clamp(28px, 3vw, 40px); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; }
.study-copy h4 { margin-top: 24px; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
.study-copy > p { margin-top: 8px; color: var(--muted); }
.study-copy .ticks { margin-top: 8px; }
.study-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.study-facts dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.study-facts dd { margin-top: 4px; font-size: 15px; font-weight: 600; }
.study:nth-child(even) .study-media { order: 2; }
@media (max-width: 900px) {
  .study { grid-template-columns: minmax(0, 1fr); }
  .study:nth-child(even) .study-media { order: 0; }
  .study-facts { grid-template-columns: minmax(0, 1fr); }
}
.more-title { margin-top: clamp(48px, 6vw, 80px); }

/* Contenido y promoción */
.promo-videos { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 0.8fr); gap: 16px; margin-top: 40px; align-items: start; }
.promo-videos video { display: block; width: 100%; border-radius: var(--radius); background: #000; }
.promo-main video { aspect-ratio: 16 / 9; }
.promo-vertical video { aspect-ratio: 9 / 16; }
.promo-videos figcaption { margin-top: 10px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
@media (max-width: 800px) { .promo-videos { grid-template-columns: minmax(0, 1fr); } .promo-vertical { max-width: 320px; } }
.poster-wall { columns: 4 220px; column-gap: 14px; margin-top: 20px; }
.poster-wall li { break-inside: avoid; margin-bottom: 14px; }
.poster-wall img { width: 100%; height: auto; border-radius: 10px; }

.tool-logo { width: 52px; height: 52px; object-fit: contain; border-radius: 14px; background: #FFFFFF; padding: 6px; }
.study-media-1 { max-width: 400px; justify-self: center; width: 100%; }

/* Reorganización: galerías de casos, fotos de mapping, streaming */
.study-gallery { grid-template-columns: 1fr 1fr; }
.study-gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.study-gallery img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.case-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .case-grid-2 { grid-template-columns: minmax(0, 1fr); } }
.map-photos { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; margin-top: 28px; }
.map-photos img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
.map-photos-cap { margin-top: 12px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
@media (max-width: 760px) { .map-photos { grid-template-columns: minmax(0, 1fr); } }
.stream-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-top: 28px; align-items: start; }
.stream-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; margin-top: 24px; }
@media (max-width: 760px) { .stream-list { grid-template-columns: minmax(0, 1fr); } }
.stream-grid img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
.stream-grid figcaption { margin-top: 10px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.stream-list { margin-top: 0; color: var(--muted); }
@media (max-width: 900px) { .stream-grid { grid-template-columns: minmax(0, 1fr); } }
.skills-sound { padding-top: 40px; border-top: 1px solid var(--line); }
.skills-sound h3 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; letter-spacing: -0.02em; }
.skills-sound .ticks { margin-top: 16px; color: var(--muted); }

/* Mapa de la página: barra fija con las secciones */
.em-map { position: sticky; top: 0; z-index: 30; background: rgba(11,10,18,0.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.em-map-inner { display: flex; align-items: center; gap: 16px; min-height: 60px; }
.em-map-list { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.em-map-list::-webkit-scrollbar { display: none; }
.em-map-list a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; white-space: nowrap; font-size: 15px; font-weight: 600; color: var(--muted); text-decoration: none; }
.em-map-list a span { font-family: var(--mono); font-size: 11px; color: var(--accent-text); }
.em-map-list a:hover { color: #FFFFFF; }
.em-map-list a.is-active { background: rgba(114,76,249,0.22); color: #FFFFFF; }
.em-map-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--accent); color: #FFFFFF; font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; }
@media (max-width: 700px) { .em-map-cta { display: none; } .em-map-inner { min-height: 52px; } }
.em-events, .em-skills, .em-reel, .em-process, .em-career, #contact, .study, .case-feature, .skills-block { scroll-margin-top: 76px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Índices dentro de las secciones */
.em-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.em-subnav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: none; }
.em-subnav a:hover { color: #FFFFFF; border-color: var(--accent-text); }

/* Software: muro de logos */
.logo-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.logo-wall li { display: grid; place-items: center; min-height: 110px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.logo-wall .tool-logo { width: auto; height: auto; max-width: 100%; max-height: 56px; object-fit: contain; background: none; padding: 0; border-radius: 0; }
.tool-name { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; text-align: center; color: #FFFFFF; }
@media (min-width: 1100px) { .logo-wall { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Habilidades: formato estándar (medio + texto + software) */
.skills-list { display: grid; gap: clamp(56px, 7vw, 96px); margin-top: clamp(40px, 5vw, 64px); }
.skill { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px 48px; align-items: start; scroll-margin-top: 76px; }
.skill:nth-child(even) .skill-media { order: 2; }
.skill-media { display: grid; gap: 12px; }
.skill-media > .motion3d, .skill-media > .mp2, .skill-media > figure { margin: 0; }
.skill-main, .skill-media .promo-main video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); background: #000; }
.skill-media .promo-main figcaption { display: none; }
.skill-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.skill-thumbs img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 30%; border-radius: 10px; background: #0D0C14; }
#sk-3d .skill-thumbs img { object-fit: contain; }
.skill-num { font-family: var(--mono); font-size: 13px; color: var(--accent-text); }
.skill-copy h3 { margin-top: 8px; font-size: clamp(28px, 3vw, 40px); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; }
.skill-copy > p { margin-top: 14px; color: var(--muted); }
.skill-copy .ticks { margin-top: 18px; }
.skill-tools { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.skill-tools h4 { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.skill-tools ul { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.skill-tools li { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; min-width: 52px; padding: 8px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.skill-tools .tool-logo { width: auto; height: 32px; max-width: 120px; object-fit: contain; background: none; padding: 0; border-radius: 0; }
.skill-tools .tool-name { font-size: 15px; }
.skill .m3-note, .skill .mp2-captions { font-size: 15px; }
.poster-more { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 16px; }
.poster-more summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-weight: 600; color: var(--muted); list-style: none; }
.poster-more summary::-webkit-details-marker { display: none; }
.poster-more summary:hover, .poster-more[open] summary { color: #FFFFFF; border-color: var(--accent-text); }
.poster-more-body { display: grid; grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr); gap: 16px; margin-top: 20px; align-items: start; }
.poster-more-body .promo-vertical video { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: var(--radius); background: #000; }
.poster-more-body .promo-vertical figcaption { margin-top: 10px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.poster-more-body .poster-wall { margin-top: 0; columns: 3 180px; }
@media (max-width: 960px) {
  .skill { grid-template-columns: minmax(0, 1fr); }
  .skill:nth-child(even) .skill-media { order: 0; }
  .poster-more-body { grid-template-columns: minmax(0, 1fr); }
  .poster-more-body .promo-vertical { max-width: 300px; }
}
.poster-more { order: 3; }


/* =====================================================================
   11. Event manager · rediseño con paleta collage (lima, cobalto, rosa)
   ===================================================================== */
.t-stage {
  --lime: #D5E02D;
  --cobalt: #1A4697;
  --hot: #F21761;
  --blush: #FBDEE8;
  --sky: #13ABE2;
  --flame: #E8541E;
  --sans: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --paper: #FFFFFF;
  --surface: #F4F6DF;
  --ink: #1A3A8C;
  --muted: #45558A;
  --line: #C9D0E6;
  --accent: #F21761;
  --accent-text: #C80F4E;
  --on-accent: #FFFFFF;
  --field-bg: #FFFFFF;
  --field-line: #9AA6CC;
  --focus: #F21761;
}
.t-stage body, body.t-stage { font-stretch: 100%; }
.t-stage .h2 { font-stretch: 68%; font-weight: 850; text-transform: uppercase; line-height: 0.88; letter-spacing: -0.01em; font-size: clamp(44px, 7vw, 104px); color: var(--cobalt); }
.t-stage .eyebrow { font-family: var(--sans); font-size: 17px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--accent-text); }
.t-stage .case-tag, .t-stage .case-copy h4, .t-stage .study-copy h4, .t-stage .skill-tools h4, .t-stage .editions h4 {
  font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--accent-text);
}
.t-stage .case-copy h3, .t-stage .study-copy h3, .t-stage .skill-copy h3, .t-stage .case-card h3 { font-stretch: 72%; font-weight: 850; text-transform: uppercase; line-height: 0.92; letter-spacing: 0; color: var(--cobalt); }
.t-stage .case-result { background: var(--lime); color: var(--cobalt); }
.t-stage .case-result span { color: var(--cobalt); }
.t-stage .ticks li::before { background: var(--hot); }
.t-stage .case-feature { background: var(--blush); border: 0; }
.t-stage .section { border-top: 2px solid var(--cobalt); }
.t-stage .site-footer { background: var(--cobalt); color: #FFFFFF; border-top: 0; }
.t-stage .video-btn { background: var(--hot); }
.t-stage .em-subnav a { border: 2px solid var(--cobalt); color: var(--cobalt); }
.t-stage .em-subnav a:hover { background: var(--lime); color: var(--cobalt); border-color: var(--cobalt); }
.t-stage .reel-time { color: var(--accent-text); font-family: var(--sans); font-weight: 700; }
.t-stage .stats-grid dd { font-stretch: 70%; font-weight: 850; color: var(--hot); }
.t-stage .em-stats { background: var(--lime); border-block: 2px solid var(--cobalt); }
.t-stage .em-stats .stats-grid div + div { border-left: 2px solid var(--cobalt); }
.t-stage .em-stats dt { color: var(--cobalt); }
.t-stage .em-stats + .section { border-top: 0; }
.t-stage .process-num, .t-stage .skill-num { font-family: var(--sans); font-weight: 800; color: var(--hot); }
.t-stage .m3-note, .t-stage .reel-player figcaption { font-family: var(--sans); }
.t-stage :focus-visible { outline: 3px solid var(--hot); outline-offset: 3px; }

/* Cabecera sobre la portada */
.t-stage .header-min { color: var(--cobalt); }
.t-stage .header-min .brand-mark { background: var(--cobalt); color: var(--lime); }
.t-stage .header-min .brand-tag { color: var(--cobalt); opacity: 0.8; }
.t-stage .header-min .lang-switch a { color: var(--cobalt); border-color: var(--cobalt); }
.t-stage .header-min .lang-switch a[aria-current="true"], .t-stage .header-min .lang-switch a[aria-current="page"] { background: var(--cobalt); color: var(--lime); }
.t-stage .header-min .nav-cta { background: var(--hot); color: #FFFFFF; }

/* Portada collage */
.em-hero2 { position: relative; overflow: hidden; min-height: clamp(700px, 100svh, 980px); background: var(--lime); color: var(--cobalt); isolation: isolate; }
.h2-shapes > * { position: absolute; display: block; }
.h2-blue { top: 0; left: 0; width: 46%; height: 52%; fill: var(--cobalt); }
.h2-blush-l { left: 0; top: 36%; width: 34%; height: 40%; fill: var(--blush); }
.h2-blush-r { right: 0; top: 4%; width: 34%; height: 78%; fill: var(--blush); }
.h2-pink { right: 0; top: 0; width: 36%; height: 62%; stroke: var(--hot); }
.h2-dots { right: 0; bottom: 0; width: 34%; height: 62%; background: radial-gradient(circle, var(--cobalt) 1.6px, transparent 2.1px) 0 0 / 12px 12px; -webkit-mask-image: linear-gradient(to left, #000 30%, transparent); mask-image: linear-gradient(to left, #000 30%, transparent); }
.h2-frame { left: 7%; right: 7%; top: 42%; bottom: 7%; border: 2px solid var(--flame); border-top: 0; }
.h2-bolt { width: clamp(56px, 7vw, 110px); top: 7%; fill: #FFFFFF; }
.h2-bolt-l { left: calc(50% - clamp(220px, 26vw, 420px)); }
.h2-bolt-r { right: calc(50% - clamp(220px, 26vw, 420px)); }
.h2-leaf { left: 9%; top: 22%; width: clamp(70px, 9vw, 140px); fill: var(--sky); transform: rotate(-24deg); }
.h2-title { position: relative; z-index: 3; padding-top: clamp(96px, 9vw, 120px); text-align: center; }
.h2-name { font-family: var(--serif); font-style: italic; font-size: clamp(26px, 3vw, 40px); line-height: 1; color: var(--cobalt); }
.h2-role { margin-top: 6px; font-stretch: 70%; font-weight: 900; text-transform: uppercase; font-size: clamp(56px, 8.4vw, 132px); line-height: 0.84; color: var(--hot); }
.h2-video { position: relative; z-index: 2; width: min(1040px, 80%, calc((100svh - 330px) * 1.5)); aspect-ratio: 1000 / 640; margin: clamp(-34px, -2.5vw, -14px) auto 0;
  -webkit-mask: url('/assets/img/em/blob.svg') center / 100% 100% no-repeat; mask: url('/assets/img/em/blob.svg') center / 100% 100% no-repeat; }
.h2-video video { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.15); }
.h2-sticker { position: absolute; z-index: 4; margin: 0; display: grid; place-content: center; text-align: center; font-stretch: 72%; font-weight: 850; text-transform: uppercase; line-height: 0.95; }
.h2-sticker-a { left: 12%; bottom: 13%; width: clamp(150px, 16vw, 240px); aspect-ratio: 1; border-radius: 50%; padding: 18px; color: var(--lime); font-size: clamp(17px, 1.7vw, 26px);
  background: radial-gradient(circle, #3466C9 1.7px, transparent 2.2px) 0 0 / 9px 9px, var(--cobalt); }
.h2-sticker-a strong { display: block; font-size: 1.9em; font-weight: 900; }
.h2-sticker-a::before { content: ""; position: absolute; left: 6%; top: -26%; width: 46%; height: 52%; background:
  linear-gradient(var(--sky), var(--sky)) 0 100% / 14px 100% no-repeat, linear-gradient(var(--sky), var(--sky)) 40% 100% / 14px 70% no-repeat, linear-gradient(var(--sky), var(--sky)) 80% 100% / 14px 50% no-repeat;
  transform: skewX(-14deg); z-index: -1; }
.h2-sticker-b { right: 10%; bottom: 15%; width: clamp(200px, 22vw, 330px); padding: 30px 28px; color: var(--hot); font-size: clamp(18px, 2vw, 30px);
  background: var(--blush); border-radius: 62% 38% 55% 45% / 48% 62% 38% 52%; }
.h2-sign { position: absolute; z-index: 4; right: 15%; top: 50%; margin: 0; padding: 4px 14px; background: #6E6E6E; color: #FFFFFF; border: 3px solid #FFFFFF; outline: 2px solid #6E6E6E;
  font-stretch: 62%; font-weight: 800; text-transform: uppercase; font-size: clamp(20px, 2.4vw, 36px); line-height: 1.1; transform: rotate(-4deg); }
.h2-bottom { position: absolute; z-index: 4; left: 50%; bottom: calc(7% - 0.62em); transform: translateX(-50%); display: flex; align-items: center; gap: clamp(14px, 2vw, 28px);
  padding-inline: 18px; background: var(--lime); font-size: clamp(20px, 2.8vw, 42px); white-space: nowrap; }
.h2-bottom a { font-stretch: 100%; font-weight: 900; text-transform: uppercase; color: var(--cobalt); text-decoration: none; letter-spacing: 0.02em; }
.h2-bottom a:hover { color: var(--hot); }
.h2-dot { width: 0.6em; height: 0.6em; border-radius: 50%; background: #FFFFFF; }
@media (max-width: 860px) {
  .em-hero2 { min-height: 0; padding-bottom: 28px; }
  .h2-video { width: 96%; margin-top: 8px; }
  .h2-blue { width: 70%; height: 22%; }
  .h2-name { color: var(--cobalt); position: relative; }
  .h2-sticker-a { left: 4%; bottom: auto; top: 62%; width: 128px; font-size: 15px; padding: 12px; }
  .h2-sticker-b { right: 3%; bottom: auto; top: 70%; width: 170px; padding: 18px; font-size: 15px; }
  .h2-sign { right: 6%; top: 47%; font-size: 18px; }
  .h2-frame, .h2-leaf { display: none; }
  .h2-bottom { position: relative; left: auto; bottom: auto; transform: none; flex-direction: column; gap: 8px; margin-top: 120px; background: none; font-size: 22px; }
  .h2-dot { display: none; }
  .h2-bolt { top: 10%; width: 44px; }
  .h2-bolt-l { left: 4%; } .h2-bolt-r { right: 4%; }
}
@media (prefers-reduced-motion: reduce) { .h2-video video { display: none; } .h2-video { background: url('/assets/video/hero-dance.webp') center / cover; } }

.em-intro { background: var(--blush); border-bottom: 2px solid var(--cobalt); }
.em-intro-inner { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; padding-block: clamp(40px, 6vw, 72px); }
.em-intro-lead { font-size: clamp(22px, 2.6vw, 34px); line-height: 1.3; font-weight: 500; color: var(--cobalt); max-width: 34ch; }
.em-intro-meta { font-size: 16px; font-weight: 700; color: var(--accent-text); }
@media (max-width: 860px) { .em-intro-inner { grid-template-columns: minmax(0, 1fr); } }

/* Mapa en cobalto */
.t-stage .em-map { background: var(--cobalt); border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.t-stage .em-map-list a { color: #DCE3F6; }
.t-stage .em-map-list a span { color: var(--lime); font-family: var(--sans); font-weight: 800; }
.t-stage .em-map-list a:hover { color: #FFFFFF; }
.t-stage .em-map-list a.is-active { background: var(--lime); color: var(--cobalt); }
.t-stage .em-map-list a.is-active span { color: var(--hot); }
.t-stage .em-map-cta { background: var(--hot); }

/* Habilidades: rejilla tipo "speakers" */
.sk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; border-top: 2px solid var(--cobalt); border-left: 2px solid var(--cobalt); }
.sk-item { border-right: 2px solid var(--cobalt); border-bottom: 2px solid var(--cobalt); }
.sk-open { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr; width: 100%; min-height: clamp(220px, 21vw, 300px); cursor: pointer; }
.sk-open:focus-visible { outline: 4px solid var(--hot); outline-offset: -4px; }
.sk-photo { overflow: hidden; border-right: 2px solid var(--cobalt); background: var(--cobalt); }
.sk-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); transition: filter 0.3s, transform 0.5s; }
.sk-text { position: relative; display: flex; flex-direction: column; padding: 16px 18px; background: #FFFFFF; color: var(--cobalt); transition: background 0.25s, color 0.25s; }
.sk-n { position: absolute; top: 10px; right: 14px; font-weight: 900; font-stretch: 75%; font-size: clamp(20px, 2vw, 30px); }
.sk-name { margin-top: clamp(24px, 3vw, 40px); font-stretch: 66%; font-weight: 900; text-transform: uppercase; line-height: 0.86; font-size: clamp(30px, 3.4vw, 56px); padding-right: 28px; hyphens: auto; }
.sk-tools { margin-top: auto; padding-top: 14px; font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: clamp(14px, 1.2vw, 18px); line-height: 1.05; color: var(--hot); }
.sk-open:hover .sk-photo img, .sk-open:focus-visible .sk-photo img { filter: none; transform: scale(1.04); }
.sk-open:hover .sk-text, .sk-open:focus-visible .sk-text { background: var(--cobalt); color: var(--lime); }
.sk-open:hover .sk-tools, .sk-open:focus-visible .sk-tools { color: #FFFFFF; }
.sk-hint { margin-top: 14px; font-size: 15px; color: var(--muted); }
@media (max-width: 900px) { .sk-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .sk-name { font-size: 28px; } .sk-text { padding: 12px; } }

.sk-dialog { width: min(1200px, calc(100vw - 24px)); max-height: calc(100svh - 24px); padding: clamp(18px, 3vw, 40px); border: 2px solid var(--cobalt); border-radius: 0; background: #FFFFFF; color: var(--ink); overflow: auto; }
.sk-dialog::backdrop { background: rgba(26,70,151,0.72); }
.sk-dialog .skill { scroll-margin-top: 0; }
.sk-close { position: sticky; top: 0; float: right; z-index: 5; min-height: 44px; padding: 0 18px; margin: 0 0 12px 12px; border: 0; background: var(--hot); color: #FFFFFF; font: inherit; font-weight: 800; cursor: pointer; }
.sk-dialog .skill:nth-child(even) .skill-media { order: 0; }
.sk-dialog .skill-thumbs img { background: var(--surface); }

/* Pósters: cover flow */
.em-posters { background: var(--blush); }
.cf { position: relative; height: clamp(380px, 46vw, 600px); margin-top: 32px; perspective: 1300px; overflow: hidden; outline: none; touch-action: pan-y; user-select: none; }
.cf:focus-visible { outline: 3px solid var(--hot); outline-offset: 4px; }
.cf-track { position: absolute; inset: 0; transform-style: preserve-3d; }
.cf-item { position: absolute; left: 50%; top: 4%; width: clamp(190px, 24vw, 330px); aspect-ratio: 707 / 1000; cursor: pointer;
  transition: transform 0.55s cubic-bezier(.2,.8,.2,1), opacity 0.4s; -webkit-box-reflect: below 6px linear-gradient(transparent 72%, rgba(255,255,255,0.35)); }
.cf-item img, .cf-item video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--cobalt); box-shadow: 0 18px 40px rgba(26,70,151,0.28); pointer-events: none; }
.cf-contain img { object-fit: contain; background: #FFFFFF; }
.cf-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 8px; }
.cf-btn { display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid var(--cobalt); border-radius: 50%; background: #FFFFFF; color: var(--cobalt); cursor: pointer; }
.cf-btn svg { width: 22px; height: 22px; }
.cf-btn:hover { background: var(--cobalt); color: var(--lime); }
.cf-caption { min-width: min(420px, 60vw); text-align: center; }
.cf-caption strong { display: block; font-stretch: 72%; font-weight: 900; text-transform: uppercase; font-size: clamp(22px, 2.4vw, 32px); line-height: 1; color: var(--cobalt); }
.cf-caption span { display: block; margin-top: 6px; font-size: 15px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .cf-item { transition: none; } }
.sk-open { height: clamp(240px, 24vw, 340px); min-height: 0; }
.sk-photo { position: relative; }
.sk-photo img { position: absolute; inset: 0; }
.t-stage .tool-name { color: var(--cobalt); }
.t-stage .skill-tools li { background: #FFFFFF; border: 2px solid var(--cobalt); border-radius: 0; }
.t-stage .m3-steps { margin-top: 0; padding: 12px 14px 14px; background: #0B0A12; border-radius: 0 0 var(--radius) var(--radius); }
.t-stage .m3-stage { border-radius: var(--radius) var(--radius) 0 0; }
@media (max-width: 420px) { .sk-open { height: 210px; } }


/* =====================================================================
   12. Portada: video en loop + barrido de entrada
   ===================================================================== */
.em-hero3 { position: relative; overflow: hidden; height: 100svh; min-height: 560px; max-height: 1100px; background: var(--cobalt); color: #FFFFFF; }
.h3-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.em-hero3::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(38,26,78,0.55) 0, rgba(38,26,78,0) 22%, rgba(38,26,78,0) 48%, rgba(38,26,78,0.78) 100%); }
.h3-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(28px, 5vw, 56px); }
.h3-title { margin: 0; text-transform: uppercase; line-height: 0.86; color: #FFFFFF; }
.h3-line { display: block; overflow: hidden; padding: 0.14em 0 0.04em; margin-top: -0.14em; }
.h3-line > span { display: block; font-stretch: 68%; font-weight: 900; font-size: clamp(56px, 11.5vw, 190px); letter-spacing: -0.01em; }
.h3-light > span { font-stretch: 62%; font-weight: 300; color: var(--lime); }
.h3-foot { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: clamp(18px, 2.6vw, 32px); }
.h3-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border: 2px solid #FFFFFF; border-radius: 999px;
  color: #FFFFFF; font-weight: 700; font-size: 17px; text-decoration: none; }
.h3-link:first-child { background: var(--hot); border-color: var(--hot); }
.h3-link:hover { background: #FFFFFF; color: var(--cobalt); border-color: #FFFFFF; }

/* Cabecera blanca sobre el video */
.t-stage .header-min { color: #FFFFFF; z-index: 5; }
.t-stage .header-min .brand-mark { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
.t-stage .header-min .brand-name, .t-stage .header-min .brand-tag { color: #FFFFFF; }
.t-stage .header-min .lang-switch a { color: #FFFFFF; border-color: rgba(255,255,255,0.6); }
.t-stage .header-min .lang-switch a[aria-current] { background: #FFFFFF; color: var(--cobalt); }

/* Barrido de entrada (solo CSS): un trazo cobalto tapa la pantalla y se retira; luego sube el nombre */
.h3-wipe { position: absolute; inset: 0; z-index: 10; width: 100%; height: 100%; pointer-events: none; animation: h3-gone 0s 2.2s forwards; }
.h3-wipe path { fill: none; stroke: var(--cobalt); stroke-width: 760; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: h3-wipe 2.1s 0.15s cubic-bezier(.65,0,.35,1) forwards; }
@keyframes h3-wipe { 0% { stroke-dashoffset: 1; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes h3-gone { to { visibility: hidden; } }
.h3-line > span { transform: translateY(105%); animation: h3-up 0.9s 1.35s cubic-bezier(.2,.8,.2,1) forwards; }
.h3-line + .h3-line > span { animation-delay: 1.48s; }
@keyframes h3-up { to { transform: none; } }
.h3-foot { opacity: 0; animation: h3-fade 0.6s 1.8s forwards; }
@keyframes h3-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .h3-wipe { display: none; }
  .h3-line > span, .h3-foot { animation: none; transform: none; opacity: 1; }
}
@media (max-width: 600px) {
  .em-hero3 { height: 88svh; }
  .h3-link { font-size: 15px; padding: 0 18px; }
}


/* =====================================================================
   13. Paleta lila (Lime Cream, Plum, Mauve, Majorelle, Dusty Grape) + casos
   ===================================================================== */
.t-stage {
  --lime: #C6FF1A;
  --cobalt: #564592;
  --hot: #724CF9;
  --blush: #F6E6F4;
  --sky: #CA7DF9;
  --plum: #F896D8;
  --mauve: #CA7DF9;
  --flame: #F896D8;
  --paper: #FFFFFF;
  --surface: #F5F1FC;
  --ink: #3B2F68;
  --muted: #6A5D99;
  --line: #DCD2F1;
  --accent: #724CF9;
  --accent-text: #5B34E8;
  --focus: #724CF9;
}
.t-stage .section { border-top: 0; }
.t-stage .h2 { color: var(--cobalt); }
.t-stage .em-map { background: var(--cobalt); }
.t-stage .em-map-list a.is-active { background: var(--lime); color: var(--cobalt); }
.t-stage .em-map-cta { background: var(--hot); }
.t-stage .header-min .nav-cta, .h3-link:first-child { background: var(--hot); border-color: var(--hot); }
.h3-wipe path { stroke: var(--hot); }
.em-hero3 { background: var(--cobalt); }
.em-posters { background: var(--plum); }
.em-posters .h2, .em-posters .cf-caption strong { color: var(--cobalt); }
.em-posters .section-intro, .em-posters .cf-caption span { color: #3B2F68; }
.em-skills { background: var(--surface); }
.t-stage .sk-grid, .t-stage .sk-item, .t-stage .sk-photo { border-color: var(--cobalt); }
.t-stage .sk-tools { color: var(--hot); }
.t-stage .em-subnav a { border-color: var(--cobalt); color: var(--cobalt); }
.t-stage .em-subnav a:hover { background: var(--lime); }
.t-stage .ticks li::before { background: var(--hot); }
.t-stage .site-footer { background: var(--cobalt); }

/* Casos de estudio con datos */
.ev { margin-top: clamp(48px, 6vw, 88px); }
.ev-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; padding-bottom: 14px; border-bottom: 2px solid var(--cobalt); }
.ev-head h3 { font-stretch: 64%; font-weight: 900; text-transform: uppercase; line-height: 0.85; font-size: clamp(52px, 8vw, 128px); color: var(--cobalt); }
.ev-head p { font-size: clamp(16px, 1.4vw, 19px); font-weight: 700; color: var(--hot); max-width: 32ch; text-align: right; }
.ev-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--lime); border-bottom: 2px solid var(--cobalt); }
.ev-facts div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 18px 20px 20px; }
.ev-facts div + div { border-left: 2px solid var(--cobalt); }
.ev-facts dd { font-stretch: 68%; font-weight: 900; font-size: clamp(30px, 3.6vw, 56px); line-height: 0.92; color: var(--cobalt); }
.ev-facts dt { font-size: 15px; font-weight: 600; color: #4A3D80; }
.ev-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px 48px; margin-top: 28px; align-items: start; }
.ev:nth-of-type(even) .ev-photos { order: 2; }
.ev-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ev-photos img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ev-photos img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.ev-lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--ink); }
.ev-copy h4 { margin-top: 24px; font-size: 15px; font-weight: 800; color: var(--hot); }
.ev-copy .ticks { margin-top: 10px; }
.ev-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 20px; padding: 0 20px; background: var(--cobalt); color: var(--lime); font-weight: 800; text-decoration: none; }
.ev-link:hover { background: var(--hot); color: #FFFFFF; }
@media (max-width: 900px) {
  .ev-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-facts div:nth-child(3) { border-left: 0; }
  .ev-facts div:nth-child(n+3) { border-top: 2px solid var(--cobalt); }
  .ev-body { grid-template-columns: minmax(0, 1fr); }
  .ev:nth-of-type(even) .ev-photos { order: 0; }
  .ev-head p { text-align: left; }
}
.ev-head p { margin-left: auto; }
.sk-photo img[src$=".svg"] { filter: none; object-fit: contain; } .sk-photo:has(img[src$=".svg"]) { background: #564592; }

/* Verde fluorescente + cifras con categoría */
.t-stage { --lime: #C6FF1A; }
.ev-facts div { flex-direction: column; justify-content: flex-start; gap: 4px; }
.ev-facts dt { display: contents; }
.ev-cat { order: 0; align-self: flex-start; padding: 3px 10px; background: var(--cobalt); color: var(--lime); font-size: 13px; font-weight: 800; }
.ev-facts dd { order: 1; margin-top: 10px; }
.ev-desc { order: 2; margin-top: 6px; font-size: 15px; font-weight: 600; line-height: 1.3; color: #3B2F68; }
.sk-photo-logo { display: grid; place-items: center; background: var(--cobalt); }
.sk-photo-logo img, .sk-photo.sk-photo-logo img { position: static; inset: auto; width: 44%; height: auto; object-fit: contain; filter: none; }
.sk-open:hover .sk-photo-logo img { transform: rotate(-12deg) scale(1.06); }
.ai-shot { position: relative; display: block; overflow: hidden; border-radius: 10px; background: #0B0A12; }
.ai-shot img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; transition: transform 0.4s; }
.ai-shot span { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; background: var(--lime); color: var(--cobalt); font-size: 13px; font-weight: 800; }
.ai-shot:hover img { transform: scale(1.03); }
.ai-shot-main img { aspect-ratio: 16 / 11; }
.ai-shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#sk-mapping .skill-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }


/* =====================================================================
   14. Eventos: índice con vista previa + casos apilados
   ===================================================================== */
.ev-index { margin-top: 36px; border-top: 2px solid var(--cobalt); }
.ev-index li { border-bottom: 2px solid var(--cobalt); }
.ev-index a { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.8fr); align-items: center; gap: 8px 32px;
  padding: clamp(14px, 2vw, 22px) 4px; color: var(--cobalt); text-decoration: none; transition: background 0.25s, padding 0.25s; }
.ev-i-name { font-stretch: 64%; font-weight: 900; text-transform: uppercase; line-height: 0.88; font-size: clamp(40px, 6.6vw, 104px); }
.ev-i-kind { font-size: 16px; font-weight: 600; color: #4A3D80; }
.ev-i-key { font-size: 15px; color: #4A3D80; text-align: right; }
.ev-i-key strong { display: block; font-stretch: 70%; font-weight: 900; font-size: clamp(24px, 2.4vw, 36px); line-height: 1; color: var(--hot); }
.ev-index a:hover, .ev-index a:focus-visible { background: var(--lime); padding-left: 20px; }
.ev-float { position: fixed; left: 0; top: 0; z-index: 40; width: clamp(220px, 22vw, 340px); aspect-ratio: 4 / 3; pointer-events: none;
  opacity: 0; transform: translate(-50%, -50%) scale(0.9) rotate(-3deg); transition: opacity 0.2s, transform 0.25s; }
.ev-float.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
.ev-float img { width: 100%; height: 100%; object-fit: cover; border: 3px solid var(--cobalt); box-shadow: 10px 10px 0 var(--hot); }
@media (hover: none), (max-width: 900px) { .ev-float { display: none; } }
@media (max-width: 900px) {
  .ev-index a { grid-template-columns: minmax(0, 1fr); }
  .ev-i-key { text-align: left; }
}

.ev-stack { margin-top: clamp(48px, 7vw, 96px); }
.ev-card { position: sticky; top: 72px; height: calc(100svh - 96px); min-height: 520px; max-height: 860px; margin-bottom: 24px; overflow: hidden;
  border: 2px solid var(--cobalt); background: var(--cobalt); color: #FFFFFF; scroll-margin-top: 72px; }
.ev-card:last-child { margin-bottom: 0; }
.ev-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ev-card::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(38,26,78,0.55) 0, rgba(38,26,78,0.05) 35%, rgba(38,26,78,0.35) 60%, rgba(38,26,78,0.92) 100%); }
.ev-card-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(18px, 2.6vw, 36px); }
.ev-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; }
.ev-card-head h3 { font-stretch: 64%; font-weight: 900; text-transform: uppercase; line-height: 0.85; font-size: clamp(52px, 9vw, 150px); color: #FFFFFF; }
.ev-card-head p { max-width: 30ch; margin-left: auto; text-align: right; font-weight: 700; font-size: clamp(16px, 1.4vw, 20px); color: var(--lime); }
.ev-card .ev-facts { margin-top: auto; border: 2px solid var(--cobalt); }
.ev-open { align-self: flex-start; margin-top: 16px; min-height: 48px; padding: 0 24px; border: 0; background: #FFFFFF; color: var(--cobalt); font: inherit; font-weight: 800; font-size: 17px; cursor: pointer; }
.ev-open:hover, .ev-open:focus-visible { background: var(--lime); }
@media (max-width: 900px) {
  .ev-card { position: relative; top: auto; height: auto; min-height: 0; max-height: none; }
  .ev-card-inner { min-height: 560px; }
  .ev-card-head p { text-align: left; margin-left: 0; }
}
.ev-dialog .ev-dlg { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 40px; clear: both; }
.ev-dialog .ev-copy h3 { font-stretch: 64%; font-weight: 900; text-transform: uppercase; line-height: 0.9; font-size: clamp(36px, 4vw, 60px); color: var(--cobalt); }
.ev-dialog .ev-lead { margin-top: 14px; }
@media (max-width: 860px) { .ev-dialog .ev-dlg { grid-template-columns: minmax(0, 1fr); } }
.ev-card-head p { padding: 6px 12px; background: var(--cobalt); color: var(--lime); }
.ev-card .ev-facts dd { font-size: clamp(28px, 3.1vw, 48px); }
@media (max-width: 900px) { .ev-card .ev-facts { margin-top: 24px; } .ev-card-inner { min-height: 0; justify-content: flex-start; gap: 12px; padding-top: 26vh; } }

/* v8 */
.ev-dialog .ev-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.ev-dialog .ev-ph { display: block; background: var(--surface); }
.ev-dialog .ev-ph:first-child { grid-column: 1 / -1; }
.ev-dialog .ev-photos img, .ev-dialog .ev-photos img:first-child { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.ev-dialog .ev-ph:hover img { outline: 3px solid var(--hot); }
#sk-stream .skill-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sk-photo.sk-photo-svg img { filter: none; object-fit: cover; }
.sk-photo-svg { background: #564592; }
.ai-shots { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* v9 */
a.sk-open { text-decoration: none; color: inherit; }
#sk-stream .skill-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#sk-sound .skill-main { aspect-ratio: 4 / 5; object-position: center 40%; }
#sk-sound .skill-thumbs { grid-template-columns: minmax(0, 1fr); }
#sk-sound .skill-thumbs img { aspect-ratio: 16 / 9; object-fit: contain; background: #564592; }
/* Video mapping: animación a todo el ancho y fotos grandes */
#sk-mapping { grid-template-columns: minmax(0, 1fr); }
#sk-mapping .skill-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#sk-mapping .skill-thumbs img { aspect-ratio: 4 / 3; }
/* IA: proyectos */
.ai-projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; margin-top: 20px; }
.ai-p h4 { margin-top: 10px; font-size: 18px; font-weight: 800; color: var(--cobalt); }
.ai-p p { margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.ai-p p a { color: var(--accent-text); font-weight: 700; }
.ai-p-media { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: #0B0A12; border: 2px solid var(--cobalt); }
.ai-p-media img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform 0.35s; }
.ai-p-media:hover img { transform: scale(1.04); }
.ai-p-blank { display: grid; place-items: center; background: var(--lime); color: var(--cobalt); font-stretch: 68%; font-weight: 900; font-size: 26px; text-transform: uppercase; text-align: center; padding: 8px; }
#sk-code { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) { .ai-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* v10: logos en blanco y negro, devices claros, diálogo de pósters */
.sk-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sk-logos .tool-logo { height: 30px; width: auto; max-width: 120px; object-fit: contain; filter: grayscale(1) contrast(1.15); }
.sk-logos .tool-name { font-size: inherit; color: inherit; }
.sk-logos .tool-logo { background: #FFFFFF; padding: 4px 6px; box-sizing: content-box; }
.skill-tools .tool-logo, .sk-photo-logo img { filter: grayscale(1) contrast(1.15); }
.sk-photo-logo { background: #FFFFFF; }
.sk-photo.sk-photo-logo img { filter: grayscale(1) brightness(0.2); }

.t-stage .m3-stage, .t-stage .mp2 .m3-stage { background: #F5F1FC; border: 3px solid var(--cobalt); border-bottom: 0; border-radius: 0; }
.t-stage .m3-steps { background: var(--cobalt); border-radius: 0; padding: 14px 16px 16px; }
.t-stage .m3-steps li { color: #FFFFFF; border-top-color: rgba(255,255,255,0.25); }
.t-stage .m3-steps li span { font-family: var(--sans); font-weight: 800; color: var(--lime); }
.t-stage .m3-file { fill: #564592; font-family: var(--sans); font-weight: 700; }
.t-stage .m3-big { fill: #724CF9; font-family: var(--sans); }
.t-stage .mp2-bpm { fill: #724CF9; }
.t-stage .mp2-mask polygon { fill: rgba(114,76,249,0.10); stroke: #724CF9; }
.t-stage .mp2-handles circle { fill: #C6FF1A; stroke: #564592; }
.t-stage .m3-seam { stroke: #724CF9; }
.t-stage .m3-ready { fill: #724CF9; }
.t-stage .mp2-base polygon { stroke: #564592; stroke-width: 3; stroke-linejoin: round; }
.t-stage .mp2-fill polygon { stroke: #564592; stroke-width: 3; stroke-linejoin: round; }
.t-stage .m3-q, .t-stage .m3-a, .t-stage .m3-print { filter: drop-shadow(6px 6px 0 rgba(86,69,146,0.35)); }
.t-stage .mp2-captions p, .t-stage .m3-note { color: var(--ink); }

.cf-dialog { background: #F896D8; width: min(1280px, calc(100vw - 24px)); }
.cf-dialog .cf-title { margin-top: 4px; }
.cf-dialog .section-intro { color: #3B2F68; }
.cf-dialog .cf { margin-top: 12px; height: clamp(360px, 42vw, 560px); }
.sk-logos .tool-logo { height: 40px; max-width: 150px; }
.t-stage .sk-photo.sk-photo-logo { background: #FFFFFF; }
.cf-dialog .cf-title { font-size: clamp(34px, 4.4vw, 64px); }
.cf-dialog .section-intro { margin-top: 8px; }
.cf-dialog .cf { height: clamp(330px, 36vw, 470px); }
.cf-dialog .cf-item { width: clamp(170px, 19vw, 270px); }

/* Video mapping v11: ordenador y pared, 7 s en bucle */
.vm { margin: 0; background: #564592; border: 3px solid #564592; }
.vm-svg { display: block; width: 100%; height: auto; }
.vm-lbl { font-family: var(--sans); font-weight: 800; font-size: 34px; fill: #FFFFFF; }
.vm-ui { font-family: var(--sans); font-weight: 700; font-size: 18px; fill: #CA7DF9; }
.vm-bpm { font-family: var(--sans); font-weight: 900; font-size: 40px; fill: #C6FF1A; opacity: 0; animation: vm-bpm 7s linear infinite; }
.vm-ghost polygon { fill: #3B2F68; }
.vm-obj { stroke: #2B2150; stroke-width: 3; stroke-linejoin: round; }
.vm-m polygon { fill: rgba(198,255,26,0.12); stroke: #C6FF1A; stroke-width: 4; stroke-dasharray: 12 8; stroke-linejoin: round; }
.vm-m { animation: vm-mask 7s cubic-bezier(.3,.7,.2,1) infinite; }
.vm-hs { fill: #C6FF1A; opacity: 0; animation: vm-hs 7s linear infinite; }
.vm-cable { animation: vm-cable 0.6s linear infinite; }
.vm-beam { opacity: 0.16; }
.vm-spill { opacity: 0; mix-blend-mode: normal; animation: vm-spill 7s linear infinite; }
.vm-lit { opacity: 0; stroke: #2B2150; stroke-width: 3; stroke-linejoin: round; animation: vm-lit 7s linear infinite; }
.vm-l0 { animation-delay: 0.00s; }
.vm-l1 { animation-delay: 0.07s; }
.vm-l2 { animation-delay: 0.14s; }
.vm-l3 { animation-delay: 0.21s; }
.vm-l4 { animation-delay: 0.28s; }
.vm-l5 { animation-delay: 0.35s; }
.vm-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; background: #2B2150; }
.vm-steps li { display: flex; gap: 10px; align-items: baseline; padding: 14px 16px; color: #FFFFFF; font-weight: 700; font-size: 16px; line-height: 1.3; opacity: 0.4; border-top: 4px solid transparent; }
.vm-steps li span { font-stretch: 70%; font-weight: 900; font-size: 26px; color: #C6FF1A; }
.vm-s1 { animation: vm-s1 7s linear infinite; } .vm-s2 { animation: vm-s2 7s linear infinite; } .vm-s3 { animation: vm-s3 7s linear infinite; }
@keyframes vm-s1 { 0%, 26% { opacity: 1; border-top-color: #C6FF1A; } 28%, 100% { opacity: 0.4; } }
@keyframes vm-s2 { 0%, 27% { opacity: 0.4; } 29%, 54% { opacity: 1; border-top-color: #C6FF1A; } 56%, 100% { opacity: 0.4; } }
@keyframes vm-s3 { 0%, 55% { opacity: 0.4; } 57%, 100% { opacity: 1; border-top-color: #C6FF1A; } }
@keyframes vm-spill { 0%, 2% { opacity: 0; } 6%, 30% { opacity: 0.9; } 50%, 100% { opacity: 0; } }
@keyframes vm-mask { 0%, 26% { transform: translate(var(--dx), var(--dy)); opacity: 0; } 30% { opacity: 1; transform: translate(var(--dx), var(--dy)); } 50%, 92% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
@keyframes vm-hs { 0%, 48% { opacity: 0; } 52%, 60% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes vm-lit { 0%, 52% { opacity: 0; } 56% { opacity: 1; } 62% { opacity: 0.55; } 64% { opacity: 1; } 70% { opacity: 0.55; } 72% { opacity: 1; } 78% { opacity: 0.55; } 80% { opacity: 1; } 86% { opacity: 0.55; } 88%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vm-bpm { 0%, 60% { opacity: 0; } 64%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vm-cable { to { stroke-dashoffset: -22; } }
@media (max-width: 700px) { .vm-steps { grid-template-columns: minmax(0, 1fr); } .vm-steps li { padding: 10px 14px; } }
@media (prefers-reduced-motion: reduce) { .vm * { animation: none !important; } .vm-lit, .vm-steps li { opacity: 1; } .vm-m { transform: none; } }

/* Logos: todos iguales (blanco y negro por defecto; a color al pasar el mouse o hacer click) */
.tool-logo, .sk-logos .tool-logo, .skill-tools .tool-logo { width: 40px !important; height: 40px !important; max-width: none !important; padding: 0 !important; background: none !important;
  object-fit: contain; filter: grayscale(1) contrast(1.1) brightness(0.85); transition: filter 0.25s ease, transform 0.25s ease; }
.sk-photo.sk-photo-logo img { filter: grayscale(1) brightness(0.2); transition: filter 0.3s ease, transform 0.5s ease; }
.sk-open:hover .tool-logo,
.sk-open:active .tool-logo,
.sk-open:focus-visible .tool-logo,
.sk-open.is-active .tool-logo,
.tool:hover .tool-logo,
.tool:active .tool-logo,
.tool:focus-visible .tool-logo,
.tool.is-active .tool-logo,
.sk-open:hover .sk-photo.sk-photo-logo img,
.sk-open:active .sk-photo.sk-photo-logo img,
.sk-open:focus-visible .sk-photo.sk-photo-logo img,
.sk-open.is-active .sk-photo.sk-photo-logo img { filter: none !important; }
.sk-logos { gap: 12px; }
.sk-logos .tool-name { font-size: 15px; }
.skill-tools li { min-width: 60px; min-height: 60px; padding: 10px; }

/* Página de caso */
dialog.cp { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; margin: 0; padding: 0; border: 0; background: #FFFFFF; color: var(--ink); overflow-y: auto; overscroll-behavior: contain; }
dialog.cp[open] { animation: cp-in 0.5s cubic-bezier(.2,.8,.2,1); }
@keyframes cp-in { from { transform: translateY(100%); } to { transform: none; } }
dialog.cp::backdrop { background: rgba(38,26,78,0.6); }
.cp-bar-top { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: 12px var(--pad); background: var(--cobalt); color: #FFFFFF; }
.cp-crumb { font-weight: 800; color: var(--lime); }
.cp-close { min-height: 44px; padding: 0 18px; border: 0; background: #FFFFFF; color: var(--cobalt); font: inherit; font-weight: 800; cursor: pointer; }
.cp-close:hover { background: var(--lime); }
.cp-hero { position: relative; height: 72vh; min-height: 420px; overflow: hidden; background: var(--cobalt); }
.cp-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(38,26,78,0) 35%, rgba(38,26,78,0.9) 100%); }
.cp-hero-in { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(20px, 4vw, 48px); z-index: 2; }
.cp-kind { display: inline-block; padding: 6px 12px; background: var(--lime); color: var(--cobalt); font-weight: 800; }
.cp-title { margin-top: 12px; font-stretch: 62%; font-weight: 900; text-transform: uppercase; line-height: 0.84; font-size: clamp(64px, 13vw, 220px); color: #FFFFFF; }
.cp-body { max-width: 1240px; margin: 0 auto; padding: 0 var(--pad) clamp(48px, 6vw, 96px); }
.cp-facts { margin-top: -2px; border: 2px solid var(--cobalt); }
.cp-lead { margin-top: clamp(32px, 4vw, 56px); max-width: 52ch; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.35; font-weight: 500; color: var(--cobalt); }
.cp-chapter { margin-top: clamp(40px, 5vw, 72px); padding-top: 20px; border-top: 2px solid var(--cobalt); }
.cp-h { font-stretch: 68%; font-weight: 900; text-transform: uppercase; font-size: clamp(26px, 2.6vw, 38px); line-height: 0.95; color: var(--cobalt); margin-bottom: 14px; }
.cp-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; }
.cp-three p { color: var(--ink); line-height: 1.55; }
.cp-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px 48px; }
.cp-yt { aspect-ratio: 16 / 9; }
.cp-mods li, .cp-time li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cp-mods span, .cp-time span { font-stretch: 70%; font-weight: 900; font-size: 22px; color: var(--hot); }
.cp-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cp-table th, .cp-table td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.cp-table thead th { font-size: 13px; color: var(--muted); }
.cp-table tbody th { font-weight: 800; color: var(--cobalt); }
.cp-table td:last-child { font-weight: 800; color: var(--hot); white-space: nowrap; }
.cp-note { margin-top: 12px; font-size: 14px; color: var(--muted); }
.cp-bars { display: grid; gap: 14px; }
.cp-bar { display: grid; gap: 6px; }
.cp-bar-l { font-size: 15px; font-weight: 600; }
.cp-bar-v { display: block; width: var(--w); padding: 10px 12px; background: var(--cobalt); color: #FFFFFF; font-weight: 900; font-stretch: 75%; font-size: 22px; transform-origin: left; }
.cp-bar-v.is-in { background: var(--lime); color: var(--cobalt); }
dialog.cp[open] .cp-bar-v { animation: cp-grow 0.9s 0.4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cp-grow { from { transform: scaleX(0); } }
.cp-phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.cp-phases li { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 2px solid var(--cobalt); margin-left: -2px; }
.cp-phases span { font-stretch: 70%; font-weight: 900; font-size: 34px; color: var(--hot); }
.cp-phases strong { font-size: 19px; color: var(--cobalt); }
.cp-gallery { columns: 3 240px; column-gap: 12px; }
.cp-gallery a { display: block; margin-bottom: 12px; break-inside: avoid; }
.cp-gallery img { display: block; width: 100%; height: auto; }
.cp-gallery a:hover img { outline: 4px solid var(--lime); outline-offset: -4px; }
.cp-next { display: flex; flex-direction: column; align-items: flex-start; width: 100%; margin-top: clamp(48px, 6vw, 80px); padding: clamp(20px, 3vw, 36px); border: 0; background: var(--cobalt); color: #FFFFFF; font: inherit; text-align: left; cursor: pointer; }
.cp-next span { font-weight: 800; color: var(--lime); }
.cp-next strong { font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: clamp(48px, 8vw, 120px); line-height: 0.9; }
.cp-next:hover { background: var(--hot); }
@media (max-width: 860px) { .cp-three, .cp-two, .cp-phases { grid-template-columns: minmax(0, 1fr); } .cp-phases li { margin-left: 0; margin-top: -2px; } }
@media (prefers-reduced-motion: reduce) { dialog.cp[open], dialog.cp[open] .cp-bar-v { animation: none; } }

/* ================= v13: páginas, acordeón, logos con nombre ================= */
/* Índice de eventos: una fila de saltos en vez de la lista larga */
.ev-jump { margin-top: 28px; }
.ev-jump ul { display: flex; flex-wrap: wrap; gap: 10px; }
.ev-jump a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border: 2px solid var(--cobalt); color: var(--cobalt); font-weight: 800; text-decoration: none; }
.ev-jump a span { font-stretch: 70%; font-weight: 900; color: var(--hot); }
.ev-jump a:hover, .ev-jump a:focus-visible { background: var(--lime); }
.ev-stack { margin-top: 32px; }

/* Foto de cada caso: se recorta alrededor de la gente, no del techo */
.ev-bg, .cp-bg { object-position: var(--fp, 50% 50%); }
@media (max-width: 900px) {
  .ev-card { display: flex; flex-direction: column; }
  .ev-card .ev-bg { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 3; flex: none; }
  .ev-card::after { display: none; }
  .ev-card-inner { padding-top: clamp(18px, 4vw, 28px); }
  .ev-card-head h3 { font-size: clamp(48px, 14vw, 96px); }
  .cp-hero { height: 58vh; min-height: 340px; }
}

/* Páginas (casos y habilidades): entrada con el trazo del inicio, en el color de cada página */
.cp-wipe { position: fixed; inset: 0; z-index: 30; width: 100vw; height: 100vh; pointer-events: none; visibility: hidden; }
dialog.cp[open] .cp-wipe { visibility: visible; animation: h3-gone 0s 1.5s forwards; }
.cp-wipe path { fill: none; stroke: var(--cp-c, var(--hot)); stroke-width: 760; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
dialog.cp[open] .cp-wipe path { animation: h3-wipe 1.4s 0.05s cubic-bezier(.65,0,.35,1) forwards; }
dialog.cp[open] .cp-title { animation: cp-title-up 0.7s 0.75s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cp-title-up { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
dialog.cp[open] { animation: none; }
.cp-kind { background: var(--cp-c, var(--lime)); }
.cp-sk[style*="#564592"] .cp-kind, .cp-sk[style*="#2B2150"] .cp-kind, .cp-sk[style*="#724CF9"] .cp-kind, .cp[style*="#724CF9"] .cp-kind { color: #FFFFFF; }
@media (prefers-reduced-motion: reduce) { .cp-wipe { display: none; } dialog.cp[open] .cp-title { animation: none; } }

/* Barra superior: lista de todas las páginas de la categoría */
.cp-bar-top { gap: 12px; }
.cp-tabs { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cp-tabs::-webkit-scrollbar { display: none; }
.cp-tabs ul { display: flex; gap: 6px; white-space: nowrap; }
.cp-tabs button { min-height: 44px; padding: 0 14px; border: 2px solid rgba(255,255,255,0.35); background: none; color: #FFFFFF; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.cp-tabs button:hover { border-color: var(--lime); }
.cp-tabs button[aria-current] { background: var(--lime); border-color: var(--lime); color: var(--cobalt); }
.cp-close { flex: none; }

/* Lista al final de cada página */
.cp-more { margin-top: clamp(48px, 6vw, 80px); padding-top: 20px; border-top: 2px solid var(--cobalt); }
.cp-more ol { border-top: 2px solid var(--cobalt); }
.cp-more li { border-bottom: 2px solid var(--cobalt); }
.cp-more button { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: baseline; gap: 4px 20px; width: 100%; padding: 18px 8px; border: 0; background: none; color: var(--cobalt); font: inherit; text-align: left; cursor: pointer; transition: background .2s, padding .2s; }
.cp-more-n { font-stretch: 70%; font-weight: 900; font-size: 20px; color: var(--hot); }
.cp-more strong { font-stretch: 64%; font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 4.4vw, 60px); line-height: 0.9; }
.cp-more em { font-style: normal; font-weight: 700; color: var(--muted); text-align: right; }
.cp-more button:hover, .cp-more button:focus-visible { background: var(--lime); padding-left: 20px; }
.cp-more button[aria-current] { background: var(--cobalt); color: #FFFFFF; cursor: default; padding-left: 20px; }
.cp-more button[aria-current] em, .cp-more button[aria-current] .cp-more-n { color: var(--lime); }
@media (max-width: 700px) { .cp-more button { grid-template-columns: 40px minmax(0, 1fr); } .cp-more em { grid-column: 2; text-align: left; } }

/* Acordeón de fotos (como en Techno n Painting) */
.acc { display: flex; gap: 6px; height: min(64vh, 560px); }
.acc button { flex: 1 1 0; min-width: 0; position: relative; overflow: hidden; cursor: pointer; border: 0; padding: 0; background: var(--cobalt);
  transition: flex-grow .55s cubic-bezier(.22,.61,.36,1); }
.acc button[aria-selected="true"] { flex-grow: 6; }
.acc img, .acc video { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.85); transition: filter .4s; }
.acc button[aria-selected="true"] img, .acc button[aria-selected="true"] video { filter: none; }
.acc button:focus-visible { outline: 4px solid var(--lime); outline-offset: 2px; }
.acc-tag { position: absolute; left: 10px; bottom: 10px; z-index: 2; padding: 4px 10px; background: rgba(18, 14, 36, 0.84); border: 1.5px solid var(--lime); color: var(--lime); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; pointer-events: none; backdrop-filter: blur(6px); white-space: nowrap; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; }
.acc-tip { margin-top: 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 700px) {
  .acc { height: auto; flex-direction: column; }
  .acc button { height: 64px; flex: none; transition: height .5s cubic-bezier(.22,.61,.36,1); }
  .acc button[aria-selected="true"] { height: 62vw; min-height: 240px; }
}
@media (prefers-reduced-motion: reduce) { .acc button { transition: none; } }

/* Habilidades como página */
.cp-sk .cp-hero { height: 62vh; }
.cp-device .vm, .cp-device .motion3d { max-width: 1100px; }
.cp-cf .cf { margin-top: 12px; height: clamp(360px, 42vw, 560px); }
.cp-cf .cf-caption { color: var(--ink); }

/* Logo + nombre: casillas iguales, en blanco y negro */
.tool { display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; width: 84px; text-align: center; }
.tool .tool-logo { width: 40px !important; height: 40px !important; object-fit: contain; filter: grayscale(1) contrast(1.15); background: none !important; padding: 0 !important; border-radius: 0 !important; }
.tool-n { font-size: 12px; font-weight: 700; line-height: 1.2; color: inherit; }
.sk-logos { display: grid !important; grid-template-columns: repeat(auto-fill, 84px); gap: 14px 8px !important; justify-content: start; }
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, 84px); gap: 18px 10px; }
.tools-all { padding: 16px; border: 2px solid var(--cobalt); background: #FFFFFF; color: var(--cobalt); }

/* Trayectoria: logo de cada empresa o escuela (a color y bien proporcionados dentro de su cuadro) */
.tl-row { flex-direction: row; align-items: center; gap: 16px; }
.tl-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.org-logo { flex: 0 0 64px; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; padding: 6px; background: #FFFFFF; border: 2px solid var(--cobalt); overflow: hidden; box-sizing: border-box; }
.org-logo img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; object-fit: contain; filter: none !important; -webkit-filter: none !important; }
.org-text { font-stretch: 70%; font-weight: 900; font-size: 15px; line-height: 1; text-transform: uppercase; color: var(--cobalt); text-align: center; overflow: hidden; }
@media (max-width: 640px) {
  .org-logo { flex: 0 0 56px; width: 56px; height: 56px; padding: 5px; }
}

/* Pie corto en esta página */
.site-footer-min .footer-bottom { border-top: 0; }
/* v13b: en la rejilla caben hasta 4 programas en una fila */
.sk-logos { grid-template-columns: repeat(auto-fill, 66px) !important; gap: 8px 6px !important; }
.sk-logos .tool { width: 66px; padding: 10px 2px !important; }
.sk-logos .tool .tool-logo { width: 32px !important; height: 32px !important; }
.sk-logos .tool-n { font-size: 10px; }

/* v14: casillas de programas iguales, legibles al pasar el ratón */
.sk-logos .tool, .tools-grid .tool { box-sizing: border-box; justify-content: flex-start; gap: 6px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; }
.sk-logos .tool { width: 70px; height: 84px; padding: 10px 3px !important; }
.tools-grid .tool { width: 88px; height: 100px; padding: 14px 4px; }
.sk-logos { grid-template-columns: repeat(auto-fill, 70px) !important; }
.tools-grid { grid-template-columns: repeat(auto-fill, 88px); }
.tool .tool-n { color: var(--cobalt); font-size: 10.5px; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.tools-grid .tool .tool-n { font-size: 11.5px; }
.sk-open:hover .sk-tools .tool-n, .sk-open:focus-visible .sk-tools .tool-n { color: var(--cobalt); }
.sk-open { height: auto; min-height: clamp(240px, 24vw, 340px); }
.sk-text { min-width: 0; }
@media (max-width: 640px) {
  .sk-open { min-height: 220px; height: auto; }
  .sk-text { padding: 12px 10px 14px; }
  .sk-name { margin-top: 22px; font-size: clamp(22px, 6vw, 30px); padding-right: 20px; }
  .sk-logos { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; }
  .sk-logos .tool { width: 100%; height: 68px; padding: 7px 2px !important; border-radius: 9px; gap: 4px; }
  .sk-logos .tool .tool-logo { width: 24px !important; height: 24px !important; }
  .sk-logos .tool .tool-n { font-size: 9px; line-height: 1.1; }
}

/* Galería de Sonido en Vivo */
.sound-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 12px; }
.sound-fig { margin: 0; border: 2px solid var(--cobalt); background: #0B0A14; overflow: hidden; }
.sound-fig img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center; }
@media (max-width: 700px) { .sound-gallery { grid-template-columns: 1fr; } }

/* v14: IA — videos y automatizaciones */
.ai-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ai-p-video { background: #0B0A14; }
.ai-video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; background: #0B0A14; }
.ai-p-video .ai-video { height: 100%; object-fit: contain; }
.ai-feature { margin: 16px 0 0; max-width: 960px; }
.ai-feature figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }
.ai-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 16px; }
.ai-videos .ai-feature { margin: 0; max-width: none; }
.ai-p-blank { text-decoration: none; line-height: 0.95; }
.auto-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.auto-list li { padding: 22px; border: 2px solid var(--cobalt); background: #FFFFFF; }
.auto-n { display: inline-block; font-stretch: 70%; font-weight: 900; font-size: 15px; color: var(--cobalt); background: var(--lime); padding: 2px 8px; }
.auto-list h4 { margin-top: 12px; font-size: 20px; font-weight: 800; color: var(--cobalt); }
.auto-list p { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--muted); }
@media (max-width: 700px) { .ai-two, .auto-list, .ai-videos { grid-template-columns: 1fr; } }

/* Visor interactivo de apps privadas (Fehlerkompass y PULSO) */
.app-showcase { border: 2px solid var(--cobalt); background: #0B0A14; overflow: hidden; display: flex; flex-direction: column; }
.app-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #17132A; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.app-dots { display: inline-flex; gap: 5px; flex: none; padding-left: 2px; }
.app-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.24); }
.app-dots i:first-child { background: #FF5F56; }
.app-dots i:nth-child(2) { background: #FFBD2E; }
.app-dots i:nth-child(3) { background: #27C93F; }
.app-tabs { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; }
.app-tab { min-height: 30px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.05); color: #E5E0F5; font: inherit; font-family: var(--mono); font-size: 11.5px; font-weight: 700; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.app-tab:hover { border-color: var(--lime); color: #FFFFFF; }
.app-tab[aria-selected="true"] { background: var(--lime); border-color: var(--lime); color: var(--cobalt); }
.app-zoom { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.07); color: #FFFFFF; font-size: 15px; line-height: 1; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.app-zoom:hover { background: var(--lime); border-color: var(--lime); color: var(--cobalt); }
.app-zoom[hidden] { display: none; }
.app-stage { position: relative; aspect-ratio: 16 / 10; background: #07060E; overflow: hidden; }
.app-pane { width: 100%; height: 100%; }
.app-pane[hidden] { display: none; }
.app-pane img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; cursor: zoom-in; transition: transform .3s ease; }
.app-pane img:hover { transform: scale(1.015); }
.app-pane-video .ai-video { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
.app-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: #141024; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 12px; color: #CFC7E8; }
.app-badge { flex: none; padding: 2px 7px; background: rgba(202, 125, 249, 0.18); border: 1px solid rgba(202, 125, 249, 0.45); color: #EED9FF; font-family: var(--mono); font-size: 11px; font-weight: 700; }
.app-caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #B9B0D4; }
.app-lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(11, 10, 20, 0.92); backdrop-filter: blur(8px); display: flex; flex-direction: column; }
.app-lightbox[hidden] { display: none; }
.app-lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px var(--pad); background: var(--cobalt); color: #FFFFFF; border-bottom: 2px solid rgba(255, 255, 255, 0.15); }
.app-lb-cap { font-weight: 700; font-size: 15px; color: var(--lime); }
.app-lb-body { flex: 1; min-height: 0; display: grid; place-items: center; padding: clamp(16px, 3vw, 36px); overflow: auto; cursor: zoom-out; }
.app-lb-img { max-width: min(1400px, 94vw); max-height: 82vh; width: auto; height: auto; border: 2px solid var(--lime); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65); background: #07060E; cursor: default; }

/* v15 — Logos de cada caso (tarjeta y portada) + galería horizontal de EducaKIDS */
.case-logo { display: inline-flex; align-items: center; margin-bottom: 14px; padding: 8px 12px; background: #FFFFFF; border-radius: 10px; }
.case-logo img { display: block; width: auto; height: clamp(38px, 4.4vw, 54px); max-width: 220px; object-fit: contain; }
.case-logo--dark { background: #0E0A33; }
.cp-hero-in .case-logo { margin-bottom: 18px; }
.cp-hero-in .case-logo img { height: clamp(46px, 5.6vw, 72px); max-width: 280px; }
.case-logo--round { padding: 0; background: none; border-radius: 50%; }
.case-logo--round img, .case-logo--tall img { height: clamp(64px, 7vw, 88px); }
.cp-hero-in .case-logo--round img, .cp-hero-in .case-logo--tall img { height: clamp(76px, 9vw, 112px); }
.cp-cf .cf.cf-land { height: clamp(230px, 36vw, 500px); }
.cf-land .cf-item { width: clamp(260px, 44vw, 620px); aspect-ratio: 4 / 3; }
.ek-privacy { margin-top: 14px; text-align: center; font-size: 14px; color: var(--muted); }

/* v16 — Móvil: el logo de cada caso pasa a una insignia en la esquina de la foto, no encima del nombre */
@media (max-width: 760px) {
  .ev-card .case-logo { position: absolute; bottom: calc(100% + 12px); right: 12px; z-index: 3; margin: 0; padding: 5px 8px; border-radius: 8px; box-shadow: 0 6px 18px rgba(18, 14, 36, 0.35); }
  .ev-card .case-logo img { height: 30px; max-width: 150px; }
  .ev-card .case-logo--round, .ev-card .case-logo--tall { padding: 0; }
  .ev-card .case-logo--tall { padding: 4px; }
  .ev-card .case-logo--round img, .ev-card .case-logo--tall img { height: 52px; }
  .cp-hero { position: relative; }
  .cp-hero-in .case-logo { position: absolute; bottom: calc(100% + 16px); right: 0; z-index: 3; margin: 0; padding: 5px 8px; border-radius: 8px; box-shadow: 0 6px 18px rgba(18, 14, 36, 0.35); }
  .cp-hero-in .case-logo img { height: 32px; max-width: 160px; }
  .cp-hero-in .case-logo--round { padding: 0; }
  .cp-hero-in .case-logo--tall { padding: 4px; }
  .cp-hero-in .case-logo--round img, .cp-hero-in .case-logo--tall img { height: 56px; }
}