/* ============================================================
   KAYOLA ESCENOGRAFÍAS — Sistema visual
   Paleta, tipografía y componentes compartidos (Home + Portafolio)
   ============================================================ */

:root{
  /* --- Paleta de marca --- */
  --red:#ec1329;
  --blue:#1d69cd;
  --yellow:#ffbe24;
  --green:#90d011;
  --cream:#f5f1ea;
  --ink:#15191c;
  --white:#ffffff;

  /* Color protagonista (tweakable) */
  --brand:var(--red);
  --on-brand:#ffffff;

  /* Superficies */
  --paper:#f5f1ea;
  --paper-2:#efe9df;
  --panel:#ffffff;

  /* Texto */
  --tx:#15191c;
  --tx-2:#3c424a;
  --tx-muted:#6a7178;

  /* Líneas */
  --line:rgba(21,25,28,.13);
  --line-2:rgba(21,25,28,.28);
  --line-dark:rgba(245,241,234,.16);

  /* Tipografía (display tweakable) */
  --font-display:'Anton', 'Archivo', sans-serif;
  --font-sans:'Archivo', system-ui, -apple-system, sans-serif;
  --font-serif:'Instrument Serif', Georgia, serif;

  /* Forma */
  --r-soft:16px;
  --r-card:18px;
  --r-pill:999px;

  /* Layout */
  --container:1280px;
  --gutter:24px;
  --header-h:78px;

  /* Movimiento */
  --dur:.28s;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Intensidad de color (tweakable) */
  --sat:1;
}

/* niveles de intensidad (nunca desaturan: solo intensifican) */
body[data-intensity="limpio"]{ --sat:1; }
body[data-intensity="equilibrado"]{ --sat:1.1; }
body[data-intensity="colorido"]{ --sat:1.28; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--paper);
  color:var(--tx);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

.tint{ filter:saturate(var(--sat)); }
.deco{ opacity:1; }

/* formas de marca (img svg) */
.kshape{ position:absolute; z-index:0; pointer-events:none; display:block; }
.brand-shapes{ display:inline-flex; gap:10px; align-items:center; }
.brand-shapes img{ width:30px; height:30px; }

/* ---------- utilidades de tipografía ---------- */
.eyebrow{
  font-weight:700; font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--brand); display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:currentColor; display:inline-block; }
.eyebrow.plain::before{ display:none; }

.display{
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  line-height:.92; letter-spacing:.005em; margin:0;
}
em.em{ font-family:var(--font-serif); font-style:italic; text-transform:none; color:var(--brand); font-weight:400; letter-spacing:0; }

.lede{ font-size:clamp(16px,1.5vw,19px); line-height:1.55; color:var(--tx-2); }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; justify-content:center;
  font-weight:700; font-size:15px; line-height:1; letter-spacing:.005em;
  padding:16px 26px; border-radius:var(--r-pill); border:2px solid transparent;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  white-space:nowrap;
}
.btn .arr{ transition:transform var(--dur) var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.btn-brand{ background:var(--brand); color:#fff; }
.btn-brand:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -10px color-mix(in srgb, var(--brand) 70%, transparent); }
.btn-ink{ background:var(--ink); color:#fff; }
.btn-ink:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -12px rgba(21,25,28,.6); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:#fff; transform:translateY(-2px); }
.btn-ghost-d{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn-ghost-d:hover{ background:#fff; color:var(--ink); border-color:#fff; transform:translateY(-2px); }
.btn-sm{ padding:13px 20px; font-size:14px; }

/* ============================================================
   HEADER
   ============================================================ */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:200; height:var(--header-h);
  display:flex; align-items:center;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:saturate(140%) blur(12px); -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-head .container{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brandmark{ display:flex; align-items:center; gap:9px; line-height:1; }
.brandmark img{ height:38px; width:auto; display:block; }
.brandmark b{ font-family:var(--font-display); font-size:26px; letter-spacing:.012em; color:var(--ink); }
.brandmark span{ font-weight:700; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--tx-muted); }
.main-nav{ display:flex; align-items:center; gap:28px; }
.main-nav .mob-cta{ display:none; }
.main-nav a{ position:relative; font-weight:600; font-size:14.5px; color:var(--tx-2); padding:4px 0; transition:color var(--dur) var(--ease); }
.main-nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--brand); transition:right var(--dur) var(--ease); }
.main-nav a:hover{ color:var(--ink); }
.main-nav a:hover::after{ right:0; }
.main-nav a.active{ color:var(--ink); }
.main-nav a.active::after{ right:0; }
.main-nav .btn-brand{ color:#fff; }
.head-actions{ display:flex; align-items:center; gap:12px; }
.nav-toggle{ display:none; width:44px; height:44px; border:1px solid var(--line-2); border-radius:12px; background:transparent; align-items:center; justify-content:center; flex-direction:column; gap:4px; }
.nav-toggle span{ width:18px; height:2px; background:var(--ink); transition:transform .3s var(--ease), opacity .2s; }
body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ============================================================
   SECCIONES
   ============================================================ */
.section{ padding:clamp(64px,9vw,118px) 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:clamp(34px,4vw,56px); flex-wrap:wrap; }
.section-head .title{ font-family:var(--font-display); font-weight:400; text-transform:uppercase; line-height:.94; font-size:clamp(40px,6vw,82px); margin:10px 0 0; max-width:14ch; }
.section-head .title em{ font-family:var(--font-serif); font-style:italic; text-transform:none; color:var(--brand); }
.section-head .aside{ max-width:380px; }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* ---------- tarjeta base ---------- */
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card); }
.r-mix-a{ border-radius:18px 18px 18px 84px; }
.r-mix-b{ border-radius:84px 18px 18px 18px; }
.r-mix-c{ border-radius:18px 84px 18px 84px; }
.r-circle{ border-radius:50%; }
.r-pill-sh{ border-radius:var(--r-pill); }

/* ============================================================
   HERO (Bento editorial)
   ============================================================ */
.hero{ padding-top:calc(var(--header-h) + 28px); padding-bottom:28px; }
.hero-grid{
  display:grid; grid-template-columns:1.12fr .88fr; grid-template-rows:1fr auto; gap:16px;
  min-height:calc(100vh - var(--header-h) - 56px);
}
.hero-txt{ position:relative; grid-row:1; padding:clamp(34px,4vw,56px); display:flex; flex-direction:column; justify-content:center; border-radius:18px 18px 18px 90px; overflow:hidden; isolation:isolate; }
.hero-txt > *:not(.kshape):not(.hero-chip){ position:relative; z-index:1; }
.hero-txt h1{ font-family:var(--font-display); font-weight:400; text-transform:uppercase; line-height:.97; letter-spacing:.005em; font-size:clamp(42px,5.2vw,86px); margin:18px 0 4px; }
.hero-txt h1 em{ font-family:var(--font-serif); font-style:italic; text-transform:none; color:var(--brand); }
.hero-txt .lede{ max-width:46ch; margin:24px 0 34px; }
.hero-cta{ display:grid; grid-template-columns:auto auto; column-gap:13px; row-gap:4px; align-items:start; justify-content:start; }
.hero-cta .btn:first-of-type{ grid-column:1; grid-row:1; }
.hero-cta .btn:last-of-type{ grid-column:2; grid-row:1; }
.hero-cta .hero-chip{ grid-column:1; grid-row:2; }
.hero-chip{ position:relative; z-index:1; flex-basis:100%; flex-grow:0; max-width:fit-content; align-self:flex-start; margin-top:-10px; background:var(--yellow); color:var(--ink); font-weight:700; font-size:13px; padding:11px 18px; border-radius:var(--r-pill); transform:rotate(-3deg); }

.hero-media{ position:relative; grid-row:1 / span 2; overflow:hidden; border-radius:90px 18px 18px 18px; background:#10141a; }
.hero-media video, .hero-media .poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; }
.hero-media .veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(16,20,26,.15), rgba(16,20,26,.55)); z-index:2; }
.hero-vlabel{ position:absolute; left:22px; bottom:20px; z-index:3; display:flex; align-items:center; gap:9px; font-weight:700; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.hero-vlabel .dot{ width:8px; height:8px; border-radius:50%; background:var(--brand); animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.hero-badge{ position:absolute; right:18px; top:18px; z-index:4; width:118px; height:118px; border-radius:50%; background:var(--brand); color:var(--on-brand); display:flex; flex-direction:column; align-items:center; justify-content:center; transform:rotate(-8deg); box-shadow:0 16px 36px -14px color-mix(in srgb,var(--brand) 70%,transparent); }
.hero-badge b{ font-family:var(--font-display); font-size:34px; line-height:1; }
.hero-badge span{ font-weight:700; font-size:9px; letter-spacing:.16em; text-transform:uppercase; margin-top:3px; }

.hero-stats{ grid-column:1; grid-row:2; display:grid; grid-template-columns:repeat(3,1fr); background:var(--panel); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.hero-stats .s{ padding:20px 22px; border-right:1px solid var(--line); }
.hero-stats .s:last-child{ border-right:none; }
.hero-stats .s b{ font-family:var(--font-display); font-size:clamp(28px,3vw,40px); display:block; line-height:1; }
.hero-stats .s small{ font-weight:600; font-size:12.5px; color:var(--tx-muted); }

/* ============================================================
   NOSOTROS (bento)
   ============================================================ */
.bento{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px; grid-auto-rows:minmax(10px,auto); }
.about-quote{ grid-column:span 7; padding:clamp(30px,3.4vw,52px); display:flex; flex-direction:column; justify-content:center; background:var(--ink); color:#fff; border-radius:18px 18px 18px 84px; }
.about-quote .q{ font-family:var(--font-display); font-weight:400; text-transform:uppercase; line-height:.96; font-size:clamp(30px,3.7vw,56px); margin:14px 0 0; }
.about-quote .q em{ font-family:var(--font-serif); font-style:italic; text-transform:none; color:var(--yellow); }
.about-img-a{ grid-column:span 5; height:340px; overflow:hidden; border-radius:84px 18px 84px 18px; }
.about-img-a img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-text{ grid-column:span 4; padding:clamp(26px,2.6vw,38px); }
.about-text p{ margin:0 0 16px; color:var(--tx-2); line-height:1.6; }
.about-text p:last-child{ margin-bottom:0; }
.about-img-b{ grid-column:span 4; overflow:hidden; border-radius:18px; align-self:stretch; }
.about-img-b img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-tags{ grid-column:span 4; padding:clamp(26px,2.6vw,38px); display:flex; flex-direction:column; justify-content:center; gap:12px; background:var(--yellow); border-radius:18px 84px 18px 18px; }
.about-tags .lbl{ font-weight:700; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:color-mix(in srgb,var(--ink) 70%,transparent); }
.about-tags ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.about-tags li{ background:rgba(21,25,28,.08); color:var(--ink); font-weight:600; font-size:13px; padding:8px 14px; border-radius:var(--r-pill); }

/* ============================================================
   EXPERIENCIA
   ============================================================ */
.exp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.exp-card{ padding:clamp(30px,3.2vw,48px); border-radius:18px; min-height:260px; display:flex; flex-direction:column; justify-content:space-between; }
.exp-card .big{ font-family:var(--font-display); font-weight:400; line-height:.9; font-size:clamp(50px,6vw,96px); }
.exp-card .cap{ font-weight:600; font-size:15px; line-height:1.4; max-width:22ch; }
.exp-card.c1{ background:var(--brand); color:var(--on-brand); border-radius:18px 18px 18px 80px; }
.exp-card.c2{ background:var(--panel); border:1px solid var(--line); color:var(--ink); }
.exp-card.c3{ background:var(--ink); color:#fff; border-radius:80px 18px 18px 18px; }
.exp-card .small-lbl{ font-weight:700; font-size:11px; letter-spacing:.2em; text-transform:uppercase; opacity:.7; }

/* ============================================================
   SERVICIOS (bento)
   ============================================================ */
.svc-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.svc{ position:relative; overflow:hidden; padding:clamp(24px,2.4vw,34px); min-height:230px; display:flex; flex-direction:column; justify-content:flex-end; border-radius:18px; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.svc:hover{ transform:translateY(-5px); box-shadow:0 20px 40px -22px rgba(21,25,28,.4); }
.svc h3{ font-family:var(--font-display); font-weight:400; text-transform:uppercase; line-height:.96; font-size:clamp(22px,1.8vw,28px); margin:0 0 8px; }
.svc p{ margin:0; font-size:14px; line-height:1.5; opacity:.85; }
.svc .shape{ position:absolute; z-index:0; }
.svc > *{ position:relative; z-index:1; }
.svc.neutral{ background:var(--panel); border:1px solid var(--line); color:var(--ink); }
.svc.c-red{ background:var(--red); color:#fff; }
.svc.c-blue{ background:var(--blue); color:#fff; }
.svc.c-green{ background:var(--green); color:var(--ink); }
.svc.c-yellow{ background:var(--yellow); color:var(--ink); }
/* spans */
.svc.span2{ grid-column:span 2; }
.svc.span3{ grid-column:span 3; }
.svc.span4{ grid-column:span 4; }
.svc.tall{ min-height:300px; }
/* abstract shapes */
.sh-circle{ width:120px; height:120px; border-radius:50%; top:-30px; right:-24px; }
.sh-ring{ width:130px; height:130px; border-radius:50%; border:22px solid currentColor; top:-34px; right:-30px; opacity:.5; }
.sh-cap{ width:64px; height:150px; border-radius:999px; top:-30px; right:24px; }
.sh-mix{ width:130px; height:110px; border-radius:60px 8px 60px 8px; top:-26px; right:-20px; }

/* ============================================================
   CTA + FORMULARIO
   ============================================================ */
.contact-wrap{ position:relative; }
.cta-block{ position:relative; overflow:hidden; background:var(--brand); color:var(--on-brand); border-radius:24px 24px 0 0; padding:clamp(44px,5.5vw,84px) clamp(30px,4vw,72px) clamp(54px,6vw,92px); }
.cta-block h2{ font-family:var(--font-display); font-weight:400; text-transform:uppercase; line-height:.94; font-size:clamp(40px,6vw,84px); margin:14px 0 0; max-width:16ch; }
.cta-block h2 em{ font-family:var(--font-serif); font-style:italic; text-transform:none; color:var(--yellow); }
.cta-block p{ max-width:48ch; font-size:clamp(16px,1.5vw,19px); line-height:1.55; opacity:.92; margin:18px 0 30px; }
.cta-block .cta-row{ display:flex; gap:13px; flex-wrap:wrap; }
.cta-block .deco-shape{ position:absolute; z-index:0; pointer-events:none; }
.cta-block > *{ position:relative; z-index:1; }
.btn-on-brand{ background:#fff; color:var(--ink); }
.btn-on-brand:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(0,0,0,.45); }
.btn-out-brand{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.btn-out-brand:hover{ background:#fff; color:var(--ink); border-color:#fff; transform:translateY(-2px); }

.form-block{ background:var(--ink); color:#fff; border-radius:0 0 24px 24px; padding:clamp(40px,5vw,72px) clamp(30px,4vw,72px) clamp(44px,5vw,80px); }
.form-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,4vw,64px); align-items:start; }
.form-intro h3{ font-family:var(--font-display); font-weight:400; text-transform:uppercase; line-height:.96; font-size:clamp(28px,3vw,44px); margin:12px 0 0; }
.form-intro .lede{ color:rgba(255,255,255,.72); margin-top:16px; }
.form-meta{ margin-top:28px; display:flex; flex-direction:column; gap:14px; }
.form-meta a, .form-meta span{ display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.82); font-weight:600; font-size:15px; }
.form-meta .k{ color:var(--yellow); }

.kform{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.kform .full{ grid-column:1 / -1; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-weight:600; font-size:12.5px; letter-spacing:.04em; color:rgba(255,255,255,.72); }
.field input, .field select, .field textarea{
  font-family:inherit; font-size:15px; color:#fff; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:14px 16px; outline:none;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field textarea{ resize:vertical; min-height:120px; }
.field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,.4); }
.field select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.6) 50%),linear-gradient(135deg,rgba(255,255,255,.6) 50%,transparent 50%); background-position:calc(100% - 20px) 20px,calc(100% - 14px) 20px; background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--yellow); background:rgba(255,255,255,.1); }
.field input[type="date"]{ color-scheme:dark; }
.field input[type="date"]::-webkit-calendar-picker-indicator{ filter:invert(1); opacity:.55; cursor:pointer; }
.field.err input, .field.err select, .field.err textarea{ border-color:#ff8a8a; }
.kform .submit-row{ grid-column:1 / -1; display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:4px; }
.form-note{ font-size:13px; color:rgba(255,255,255,.55); }
.form-ok{ grid-column:1/-1; display:none; align-items:center; gap:12px; background:rgba(141,190,34,.16); border:1px solid rgba(141,190,34,.5); color:#dff3b5; padding:16px 18px; border-radius:14px; font-weight:600; }
.kform.sent .form-ok{ display:flex; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{ background:var(--ink); color:rgba(255,255,255,.7); padding:clamp(48px,6vw,80px) 0 32px; }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid var(--line-dark); }
.foot-brand b{ font-family:var(--font-display); font-size:34px; color:#fff; letter-spacing:.012em; }
.foot-brand img{ height:42px; width:auto; filter:brightness(0) invert(1); }
.foot-brand p{ max-width:34ch; margin:14px 0 0; line-height:1.6; }
.foot-col h4{ font-weight:700; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.45); margin:0 0 16px; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.foot-col a{ color:rgba(255,255,255,.78); font-weight:500; transition:color var(--dur) var(--ease); }
.foot-col a:hover{ color:var(--yellow); }
.foot-bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:24px; font-size:13px; color:rgba(255,255,255,.45); flex-wrap:wrap; }

/* ============================================================
   PROCESO
   ============================================================ */
.proc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.proc-card{ position:relative; padding:clamp(26px,2.6vw,40px); border:1px solid var(--line); border-radius:18px; background:var(--panel); overflow:hidden; }
.proc-card:nth-child(1){ border-radius:18px 18px 18px 70px; }
.proc-card:nth-child(4){ border-radius:70px 18px 18px 18px; }
.proc-card .num{ font-family:var(--font-display); font-size:clamp(46px,5vw,76px); line-height:.9; color:var(--brand); }
.proc-card h3{ font-family:var(--font-sans); font-weight:800; font-size:19px; margin:16px 0 9px; letter-spacing:-.01em; }
.proc-card p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--tx-2); }
.proc-card .kshape{ width:60px; height:60px; top:-14px; right:-12px; }
@media (max-width:860px){ .proc-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .proc-grid{ grid-template-columns:1fr; } }

/* ============================================================
   BANDA DE EXPERIENCIA (teatros / tags)
   ============================================================ */
.exp-band{ margin-top:16px; display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,48px); align-items:center; background:var(--ink); color:#fff; border-radius:18px 70px 18px 70px; padding:clamp(26px,3vw,40px) clamp(28px,3.2vw,46px); }
.exp-band .bl{ font-weight:700; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--yellow); max-width:14ch; line-height:1.5; }
.exp-band .venues{ display:flex; flex-wrap:wrap; gap:10px; }
.exp-band .venues span{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); color:#fff; font-weight:600; font-size:14px; padding:9px 16px; border-radius:var(--r-pill); }
@media (max-width:760px){ .exp-band{ grid-template-columns:1fr; gap:16px; } }

/* ============================================================
   PORTAFOLIO
   ============================================================ */
.pf-hero{ padding-top:calc(var(--header-h) + clamp(40px,7vw,96px)); padding-bottom:clamp(30px,4vw,56px); position:relative; overflow:hidden; isolation:isolate; }
.pf-hero .deco-shape{ position:absolute; z-index:0; pointer-events:none; }
.pf-hero .kshape{ z-index:0; }
.pf-hero .container{ position:relative; z-index:1; }
.pf-hero h1{ font-family:var(--font-display); font-weight:400; text-transform:uppercase; line-height:.9; letter-spacing:.005em; font-size:clamp(64px,15vw,220px); margin:14px 0 0; }
.pf-hero h1.title{ font-size:clamp(40px,6vw,82px); line-height:.94; }
.pf-hero h1.title em{ font-family:var(--font-serif); font-style:italic; text-transform:none; color:var(--brand); }
.pf-hero .row{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-top:18px; }
.pf-hero .row .lede{ max-width:46ch; }

.pf-project{ margin-top:clamp(48px,6vw,92px); }
.pf-proj-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:18px; flex-wrap:wrap; }
.pf-proj-head h2{ font-family:var(--font-display); font-weight:400; text-transform:uppercase; line-height:1; font-size:clamp(28px,3.4vw,52px); margin:0; }
.pf-proj-head .meta{ font-weight:600; font-size:13px; letter-spacing:.04em; color:var(--tx-muted); display:flex; align-items:center; gap:14px; }
.pf-proj-head .meta .tag{ color:var(--brand); }
.pf-desc{ max-width:93ch; color:var(--tx-2); font-size:15.5px; line-height:1.6; margin:-2px 0 18px; }

/* bento grid de imágenes por proyecto */
.pf-grid{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:300px; gap:14px; }
.pf-item{ position:relative; overflow:hidden; cursor:pointer; border-radius:16px; background:#10141a; transform:translateZ(0); }
.pf-item img{ width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); will-change:transform; }
.pf-item .ov{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,25,28,0) 40%, rgba(21,25,28,.72)); opacity:0; transition:opacity var(--dur) var(--ease); display:flex; align-items:flex-end; padding:18px; z-index:2; }
.pf-item .ov .t{ color:#fff; font-weight:700; font-size:15px; transform:translateY(8px); transition:transform var(--dur) var(--ease); }
.pf-item .badge-plus{ position:absolute; top:14px; right:14px; z-index:3; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.16); backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.4); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; opacity:0; transform:scale(.8); transition:all var(--dur) var(--ease); }
.pf-item:hover img, .pf-item:focus-visible img{ transform:scale(1.07); }
.pf-item:hover .ov, .pf-item:focus-visible .ov{ opacity:1; }
.pf-item:hover .ov .t, .pf-item:focus-visible .ov .t{ transform:none; }
.pf-item:hover .badge-plus, .pf-item:focus-visible .badge-plus{ opacity:1; transform:none; }
.pf-item:focus-visible{ outline:3px solid var(--brand); outline-offset:2px; }
.badge-chip{ display:inline-block; background:var(--yellow); color:var(--ink); font-weight:700; font-size:12px; padding:4px 12px; border-radius:var(--r-pill); vertical-align:middle; margin-left:6px; white-space:nowrap; }
/* siempre visible el título en táctil */
@media (hover:none){ .pf-item .ov{ opacity:1; } .pf-item .ov .t{ transform:none; } }

/* tamaños bento (cada proyecto = 4 piezas) */
.pf-grid .a{ grid-column:span 4; grid-row:span 2; }
.pf-grid .b{ grid-column:span 2; grid-row:span 1; }
.pf-grid .c{ grid-column:span 2; grid-row:span 1; }
.pf-grid .d{ grid-column:span 6; grid-row:span 1; }
.pf-grid .e{ grid-column:span 3; grid-row:span 1; }
@media (max-width:760px){
  .pf-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:240px; }
  .pf-grid .a{ grid-column:span 2; grid-row:span 2; }
  .pf-grid .b, .pf-grid .c{ grid-column:span 1; }
  .pf-grid .d, .pf-grid .e{ grid-column:span 2; }
}
.pf-item.circle{ border-radius:50%; }
.pf-item.mix{ border-radius:60px 16px 60px 16px; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{ position:fixed; inset:0; z-index:1000; background:rgba(10,12,15,.92); backdrop-filter:blur(6px); display:none; flex-direction:column; padding:clamp(14px,3vw,40px); }
.lightbox.open{ display:flex; animation:lbin .25s var(--ease); }
@keyframes lbin{ from{ opacity:0; } to{ opacity:1; } }
.lb-bar{ display:flex; align-items:center; justify-content:space-between; color:#fff; }
.lb-count{ font-weight:700; font-size:13px; letter-spacing:.16em; color:rgba(255,255,255,.7); }
.lb-close{ width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.06); color:#fff; font-size:18px; display:flex; align-items:center; justify-content:center; transition:background var(--dur) var(--ease); }
.lb-close:hover{ background:rgba(255,255,255,.18); }
.lb-stage{ position:relative; flex:1; display:flex; align-items:center; justify-content:center; min-height:0; padding:18px 70px; }
.lb-img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:10px; transition:opacity .25s var(--ease); box-shadow:0 30px 80px -30px rgba(0,0,0,.8); }
.lb-nav{ position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:#fff; font-size:22px; display:flex; align-items:center; justify-content:center; transition:background var(--dur) var(--ease), transform var(--dur) var(--ease); z-index:5; }
.lb-nav.lb-prev{ left:0; }
.lb-nav.lb-next{ right:0; }
.lb-nav:hover{ background:rgba(255,255,255,.2); transform:translateY(-50%) scale(1.06); }
.lb-foot{ text-align:center; color:#fff; padding-top:8px; }
.lb-title{ font-family:var(--font-display); font-weight:400; text-transform:uppercase; font-size:clamp(20px,2.4vw,30px); line-height:1; }
.lb-caption{ font-size:14px; color:rgba(255,255,255,.6); margin-top:6px; }
@media (max-width:620px){
  .lb-nav{ position:fixed; top:auto; bottom:24px; transform:none; width:50px; height:50px; }
  .lb-nav:hover{ transform:scale(1.06); }
  .lb-nav.lb-prev{ left:20px; } .lb-nav.lb-next{ right:20px; }
  .lb-stage{ padding:18px 0; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hero-grid{ grid-template-columns:1fr; grid-template-rows:auto auto auto; min-height:0; }
  .hero-txt{ grid-row:auto; border-radius:18px 18px 18px 60px; }
  .hero-media{ grid-row:auto; min-height:380px; border-radius:60px 18px 18px 18px; }
  .hero-stats{ grid-column:auto; grid-row:auto; }
  .about-quote{ grid-column:span 12; }
  .about-img-a{ grid-column:span 12; }
  .about-text{ grid-column:span 6; }
  .about-img-b{ grid-column:span 6; }
  .about-tags{ grid-column:span 12; }
  .svc-grid{ grid-template-columns:repeat(4,1fr); }
  .svc.span4{ grid-column:span 4; }
  .svc.span3{ grid-column:span 2; }
  .form-grid{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  .main-nav, .head-actions .btn{ display:none; }
  .nav-toggle{ display:flex; }
  /* mobile menu */
  .main-nav.open{
    display:flex; position:fixed; top:var(--header-h); left:0; right:0; flex-direction:column; align-items:flex-start; gap:4px;
    background:var(--paper); border-bottom:1px solid var(--line); padding:18px var(--gutter) 26px; z-index:199;
  }
  .main-nav.open a{ font-size:20px; padding:12px 0; width:100%; border-bottom:1px solid var(--line); }
  .main-nav.open a::after{ display:none; }
  .main-nav.open .mob-cta{ display:inline-flex; margin-top:14px; }
  .mob-cta{ display:none; }
  .exp-grid{ grid-template-columns:1fr; }
  .hero-stats{ grid-template-columns:1fr; }
  .hero-stats .s{ border-right:none; border-bottom:1px solid var(--line); }
  .hero-stats .s:last-child{ border-bottom:none; }
}
@media (max-width:620px){
  :root{ --gutter:18px; }
  .svc-grid{ grid-template-columns:1fr 1fr; }
  .svc, .svc.span2, .svc.span3, .svc.span4{ grid-column:span 2; }
  .about-text, .about-img-b{ grid-column:span 12; }
  .foot-top{ grid-template-columns:1fr; gap:30px; }
  .section-head{ flex-direction:column; align-items:flex-start; }
  .form-block{ padding:36px 20px 44px; border-radius:0 0 18px 18px; }
  .kform{ grid-template-columns:1fr; }
  .kform .submit-row{ flex-direction:column; align-items:flex-start; }
  .kform .submit-row .btn{ width:100%; justify-content:center; }
}

/* ============================================================
   PAGE LOADER
   ============================================================ */
html{ overflow-x:hidden; }

#page-loader{
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper);
  overflow:hidden; box-sizing:border-box;
  transition:transform .5s cubic-bezier(.77,0,.18,1);
}
#page-loader.pl-out{
  transform:translateY(-100%);
  pointer-events:none;
}
.pl-shapes{
  display:flex; align-items:center; gap:28px;
}
.pl-shape{
  height:80px; width:auto; display:block;
  opacity:0; transform:scale(.6) translateY(8px);
  transition:opacity .22s ease, transform .22s ease;
}
.pl-shape.pl-in{
  opacity:1; transform:scale(1) translateY(0);
}
@media (max-width:620px){
  .pl-shapes{ gap:22px; }
  .pl-shape{ height:64px; }
}
@media (max-width:620px){
  .hero-cta{ display:flex; flex-wrap:wrap; }
  .hero-cta .btn:first-of-type, .hero-cta .btn:last-of-type, .hero-cta .hero-chip{ grid-column:auto; grid-row:auto; }
  .hero-chip{ flex-basis:auto; max-width:none; margin-top:0; transform:rotate(-3deg); align-self:center; }
}