/* =========================================================
   Creativa Sotavento — estilo cálido atardecer / editorial
   ========================================================= */

:root{
  /* Fondo profundo — índigo de marca */
  --bg:        #16122a;
  --bg-2:      #201a3d;
  --ink:       #f4eff8;
  --ink-soft:  #cdbfe0;
  --muted:     #8f81ab;

  /* Ludicamente Lab: morado + naranja */
  --magenta:   #4b3bae;   /* morado (ancla fría) */
  --coral:     #e8452c;   /* naranja-rojo */
  --orange:    #f0862d;   /* naranja */
  --amber:     #f5a62f;   /* ámbar */
  --peach:     #f9c98a;   /* cálido claro */
  --purple-l:  #6e5bc6;   /* morado claro */
  --ink-brand: #221e33;   /* tinta del logo */

  --grad: linear-gradient(105deg, #4b3bae 0%, #7d3fb0 24%, #e8452c 56%, #f0862d 80%, #f5a62f 100%);
  --grad-soft: linear-gradient(135deg, #6e5bc6 0%, #f0862d 100%);

  --f-display: "Sora", sans-serif;
  --f-serif:   "Fraunces", serif;
  --f-body:    "Space Grotesk", sans-serif;
  --f-mono:    "JetBrains Mono", monospace;
  --f-fun:     "Fredoka", "Baloo 2", sans-serif;

  --max: 1200px;
  --pad: clamp(1.25rem, 5vw, 5rem);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:18px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Textura de grano sutil */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.06; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{ color:inherit; text-decoration:none; }
em{ font-style:italic; font-family:var(--f-serif); }

/* ---------------- NAV ---------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--pad);
  backdrop-filter:blur(10px);
  background:linear-gradient(to bottom, rgba(21,10,17,.85), rgba(21,10,17,0));
}
.nav__brand{
  font-family:var(--f-display); font-weight:800; font-size:1.05rem;
  letter-spacing:-.01em; display:inline-flex; align-items:center; gap:.5rem;
}
.nav__logo{ height:34px; width:auto; display:block; }
.nav__mark{ height:34px; width:34px; display:block; flex:none; }
.nav__wordmark{ height:19px; width:auto; display:block; }
.nav__brand em{ color:var(--orange); font-style:normal; }
.nav__right{ display:flex; align-items:center; gap:clamp(1rem,2.5vw,2rem); }
.nav__menu{ display:flex; align-items:center; gap:clamp(1rem,2.5vw,2rem); font-size:.95rem; }
.nav__menu a{ color:var(--ink-soft); transition:color .25s; }
.nav__menu a:hover{ color:var(--ink); }
.nav__toggle{ display:none; }
.nav__cta{
  padding:.45rem 1rem; border-radius:999px;
  background:var(--grad-soft); color:#fff !important; font-weight:500;
}
.nav__cta--wa{ display:none; align-items:center; justify-content:center; padding:.4rem .55rem; }
.nav__cta--wa svg{ display:block; }

/* ---------------- HERO / JUMBOTRON ---------------- */
.hero{
  position:relative; z-index:2;
  min-height:100vh;
  padding:9rem var(--pad) 4rem;
  display:flex; flex-direction:column; justify-content:center;
  max-width:var(--max); margin:0 auto;
}
.hero__glow{
  position:absolute; z-index:-1;
  top:-15%; left:-10%; width:70vw; height:70vw; max-width:900px; max-height:900px;
  background:radial-gradient(circle at 30% 30%, rgba(75,59,174,.45), transparent 60%),
             radial-gradient(circle at 70% 60%, rgba(240,134,45,.35), transparent 60%);
  filter:blur(40px); opacity:.8;
  animation:drift 16s ease-in-out infinite alternate;
}
@keyframes drift{ to{ transform:translate(8%, 6%) scale(1.1); } }

/* ===== Intro / splash de entrada ===== */
.intro{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 50% 42%, rgba(110,91,198,.28), transparent 62%),
    var(--bg);
  animation:intro-out 6.2s cubic-bezier(.7,0,.25,1) forwards;
}
.intro__lockup{
  display:flex; flex-direction:column; align-items:center; gap:1.3rem;
  transform-origin:50% 42%;
  animation:intro-zoom 6.2s cubic-bezier(.7,0,.25,1) forwards;
}
.intro__mark{ width:clamp(150px,32vw,300px); height:auto; }
.intro__word{ width:clamp(190px,38vw,340px); height:auto; animation:intro-word 6.2s ease forwards; }
@keyframes intro-out{
  0%,80%{ opacity:1; }
  99%{ opacity:0; }
  100%{ opacity:0; visibility:hidden; }
}
@keyframes intro-zoom{
  0%,80%{ transform:scale(1); }
  100%{ transform:scale(2.6); }
}
@keyframes intro-word{
  0%,42%{ opacity:0; transform:translateY(10px); }
  60%,80%{ opacity:1; transform:none; }
  100%{ opacity:0; }
}
.intro.is-done{ display:none; }
.intro-seen .intro{ display:none; }
body.intro-lock{ overflow:hidden; }
@media (prefers-reduced-motion: reduce){ .intro{ display:none; } }

.hero__eyebrow{
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); display:flex; align-items:center; gap:.6rem; margin-bottom:1.6rem;
}
.dot{ width:9px; height:9px; border-radius:50%; background:var(--grad-soft); box-shadow:0 0 12px var(--coral); }

.hero__title{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(2.6rem, 8vw, 6.5rem);
  line-height:.98; letter-spacing:-.02em; margin-bottom:1.6rem;
}

/* carrusel de palabras */
.carousel{
  display:inline-grid; vertical-align:top;
  line-height:1.15;            /* aire para los trazos descendentes (g j p q) */
  padding-bottom:.12em;        /* margen extra para que no se corten */
  overflow:visible;
}
.carousel__item{
  grid-area:1/1; opacity:0; visibility:hidden;
  transform:translateY(.4em) rotateX(-40deg);
  transition:opacity .5s, transform .5s, visibility 0s .5s;
  font-family:var(--f-serif); font-style:italic; font-weight:600;
  line-height:1.15;
  /* degradado por palabra (no en el contenedor) para que opacity la oculte bien */
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.carousel__item.is-active{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .5s, transform .5s, visibility 0s 0s;
}

.hero__lede{
  max-width:44ch; color:var(--ink-soft); font-size:1.05rem; margin-bottom:2.4rem;
}

/* banco de palabras interactivo */
.wordbank{
  display:flex; flex-wrap:wrap; gap:.7rem 1rem;
  max-width:780px; margin-bottom:3rem;
}
.word{
  font-family:var(--f-body); font-size:clamp(1.4rem, 3.4vw, 2.6rem);
  font-weight:500; line-height:1;
  background:none; border:none; cursor:pointer; color:var(--ink-soft);
  padding:.15em .1em; position:relative;
  opacity:0; transform:translateY(14px);
  transition:color .35s, transform .45s, letter-spacing .35s, font-weight .2s;
  will-change:transform;
}
.word.reveal{ opacity:1; transform:none; }
.word::after{
  content:""; position:absolute; left:.1em; right:.1em; bottom:.05em; height:3px;
  background:var(--grad); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.word:hover::after, .word:focus-visible::after{ transform:scaleX(1); }
.word:focus-visible{ outline:none; }

/* variantes de morfología tipográfica al hover (asignadas por JS) */
.word.m-serif:hover{ font-family:var(--f-serif); font-style:italic; font-weight:600; }
.word.m-mono:hover{ font-family:var(--f-mono); letter-spacing:-.04em; }
.word.m-display:hover{ font-family:var(--f-display); font-weight:800; }
.word.m-wide:hover{ letter-spacing:.18em; font-weight:700; }
.word.m-grad:hover{
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:700;
}
.word:hover{ color:var(--ink); }

/* "Ludificación": brinco por letra en oleada (translateY, sin cambiar el ancho) */
.word--jump span{ display:inline-block; }
.word--jump:hover span,
.word--jump:focus-visible span{
  animation:jl-bounce .6s ease infinite;
  animation-delay:calc(var(--i, 0) * .045s);
}
@keyframes jl-bounce{
  0%, 55%, 100%{ transform:translateY(0); }
  25%{ transform:translateY(-.28em); }
}

/* "Didáctico": tipografía divertida (Fredoka) + fade-in letra a letra */
.word--fade{ font-family:var(--f-fun); font-weight:500; }
.word--fade span{ display:inline-block; }
.word--fade:hover span,
.word--fade:focus-visible span{
  animation:jl-fade .5s ease both;
  animation-delay:calc(var(--i, 0) * .05s);
}
@keyframes jl-fade{
  0%{ opacity:0; transform:translateY(.16em); }
  100%{ opacity:1; transform:none; }
}

/* "Interactivo": onda de "pop" que reacta al cursor (scale, sin reflow) */
.word--pop span{ display:inline-block; transform-origin:center bottom; }
.word--pop:hover span,
.word--pop:focus-visible span{
  animation:jl-pop .45s ease both;
  animation-delay:calc(var(--i, 0) * .04s);
}
@keyframes jl-pop{
  0%, 100%{ transform:scale(1); }
  40%{ transform:scale(1.32); }
}

/* "Servicios Creativos": solo "Creativos" pulsa entre tipografías expresivas */
.word--typecycle{ white-space:nowrap; }
.tc-word{ display:inline-block; }
.word--typecycle:hover .tc-word,
.word--typecycle:focus-visible .tc-word{ animation:type-cycle 1.1s step-end infinite; }
@keyframes type-cycle{
  0%, 100%{ font-family:"Bricolage Grotesque", sans-serif; font-style:normal; font-weight:700; }
  25%     { font-family:"Instrument Serif", serif;         font-style:italic; font-weight:400; }
  50%     { font-family:"Caveat", cursive;                 font-style:normal; font-weight:700; }
  75%     { font-family:"Gloock", serif;                   font-style:normal; font-weight:400; }
}

.hero__scroll{
  font-family:var(--f-mono); font-size:.85rem; color:var(--muted);
  letter-spacing:.05em; transition:color .25s; align-self:flex-start;
}
.hero__scroll:hover{ color:var(--orange); }

/* ---------------- SECTION HEADS ---------------- */
section{ position:relative; z-index:2; }
.section-head{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); }
.section-num{
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--coral);
}
.section-title{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(2.2rem, 6.5vw, 4.8rem); line-height:1; letter-spacing:-.02em;
  margin:.6rem 0 0;
}

/* ---------------- SERVICIOS ---------------- */
.services{ padding:7rem 0; }
.services__grid{
  max-width:var(--max); margin:3rem auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:1.25rem;
}
.card{
  background:var(--bg-2); border:1px solid rgba(240,134,45,.14);
  border-radius:18px; padding:1.8rem 1.6rem 2rem; cursor:pointer;
  transition:transform .35s, border-color .35s, background .35s;
}
.card:hover{ transform:translateY(-6px); border-color:rgba(240,134,45,.5); }
.card__num{ font-family:var(--f-mono); font-size:.8rem; color:var(--coral); }
.card h3{
  font-family:var(--f-display); font-weight:700; font-size:1.45rem; line-height:1.1;
  margin:.7rem 0 .6rem; letter-spacing:-.01em;
}
.card p{ color:var(--ink-soft); font-size:.98rem; }
.card--accent{ background:var(--grad); border:none; }
.card--accent .card__num, .card--accent h3, .card--accent p{ color:#fff; }
.card--accent:hover{ transform:translateY(-6px) scale(1.01); }

/* botón Conoce más */
.card__more{
  margin-top:1.1rem; display:inline-flex; align-items:center; gap:.45em;
  background:none; border:none; cursor:pointer; padding:0;
  font-family:var(--f-mono); font-size:.82rem; letter-spacing:.04em;
  color:var(--coral); transition:color .25s, gap .25s;
}
.card__more span{ transition:transform .25s; }
.card:hover .card__more{ color:var(--orange); }
.card:hover .card__more span{ transform:translateX(4px); }
.card--accent .card__more{ color:#fff; }
.card__more:focus-visible{ outline:2px solid var(--peach); outline-offset:3px; border-radius:4px; }

/* ---------------- MODAL ---------------- */
.modal{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,2.5rem);
  visibility:hidden; opacity:0;
  transition:opacity .3s ease, visibility .3s;
}
.modal.is-open{ visibility:visible; opacity:1; }
.modal__overlay{
  position:absolute; inset:0;
  background:rgba(10,4,8,.72); backdrop-filter:blur(6px);
}
.modal__card{
  position:relative; z-index:1;
  width:min(640px, 100%); max-height:88vh; overflow-y:auto;
  background:var(--bg-2); border:1px solid rgba(240,134,45,.22);
  border-radius:22px; padding:clamp(1.8rem, 4vw, 3rem);
  box-shadow:0 40px 120px rgba(0,0,0,.55), 0 0 0 1px rgba(240,134,45,.08);
  transform:perspective(1200px) rotateX(10deg) translateY(28px) scale(.96);
  opacity:0; transition:transform .42s cubic-bezier(.2,.8,.2,1), opacity .42s;
}
.modal.is-open .modal__card{
  transform:perspective(1200px) rotateX(0) translateY(0) scale(1); opacity:1;
}
.modal__num{ font-family:var(--f-mono); font-size:.85rem; color:var(--coral); }
.modal__title{
  font-family:var(--f-display); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(1.9rem, 5vw, 2.8rem); line-height:1.02; margin:.5rem 0 1.1rem;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.modal__lead{ color:var(--ink); font-size:1.05rem; margin-bottom:1rem; }
.modal__extra{ color:var(--ink-soft); font-size:.98rem; margin-bottom:1.8rem; }
/* listado de proyectos dentro del modal */
.modal__projects{ margin:0 0 1.8rem; }
.modal__projects-label{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--coral); display:block; margin-bottom:.7rem;
}
.mproj-list{ display:flex; flex-direction:column; gap:.1rem; }
.mproj{
  display:flex; align-items:center; gap:.6em;
  padding:.55rem 0; border-bottom:1px solid rgba(240,134,45,.12);
  color:var(--ink-soft); font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.05rem,2.4vw,1.35rem); line-height:1.1;
  transition:color .3s, padding-left .3s;
}
.mproj:last-child{ border-bottom:none; }
.mproj__num{
  font-family:var(--f-mono); font-weight:400; font-size:.78rem; color:var(--coral);
  flex:none; transition:color .3s;
}
/* el título empieza "cerrado" y se abre al hover */
.mproj__name{
  max-width:0; opacity:0; overflow:hidden; white-space:nowrap;
  transition:max-width .45s cubic-bezier(.2,.8,.2,1), opacity .35s, margin .45s;
}
.mproj__open{
  flex:none; font-family:var(--f-mono); font-weight:400; font-size:.85rem; color:var(--muted);
  transition:opacity .3s, max-width .45s; overflow:hidden; white-space:nowrap; max-width:140px; opacity:1;
}
.mproj__arrow{ flex:none; margin-left:auto; color:var(--coral); opacity:0; transform:translateX(-6px); transition:opacity .3s, transform .3s; }

.mproj:hover, .mproj:focus-visible{ color:var(--ink); padding-left:.5rem; outline:none; }
.mproj:hover .mproj__name, .mproj:focus-visible .mproj__name{
  max-width:480px; opacity:1; margin-left:.1em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.mproj:hover .mproj__open, .mproj:focus-visible .mproj__open{ max-width:0; opacity:0; }
.mproj:hover .mproj__arrow, .mproj:focus-visible .mproj__arrow{ opacity:1; transform:none; }

/* listado de sub-servicios dentro del modal */
.msub{ display:flex; flex-direction:column; gap:.15rem; padding:.7rem 0; border-bottom:1px solid rgba(240,134,45,.12); }
.msub:last-child{ border-bottom:none; }
.msub__name{ font-family:var(--f-display); font-weight:700; font-size:1.05rem; color:var(--ink); letter-spacing:-.01em; }
.msub__desc{ color:var(--ink-soft); font-size:.9rem; line-height:1.45; }

.modal__cta{
  display:inline-block; font-family:var(--f-mono); font-size:.85rem; letter-spacing:.04em;
  padding:.7rem 1.3rem; border-radius:999px; background:var(--grad-soft); color:#fff;
  transition:transform .25s, box-shadow .25s;
}
.modal__cta:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(240,134,45,.35); }
.modal__close{
  position:absolute; top:1rem; right:1.2rem;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.06); border:1px solid rgba(240,134,45,.2);
  color:var(--ink); font-size:1.5rem; line-height:1; cursor:pointer;
  transition:background .25s, transform .25s;
}
.modal__close:hover{ background:rgba(240,134,45,.25); transform:rotate(90deg); }
body.modal-open{ overflow:hidden; }

/* ---------------- ENFOQUE ---------------- */
.enfoque{ padding:6rem 0; }
.enfoque__cols{
  max-width:var(--max); margin:2.6rem auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:2rem;
}
.enfoque__cols p{ color:var(--ink-soft); font-size:1.05rem; }
.enfoque__cols p:first-child{ color:var(--ink); }

/* ---------------- TRABAJOS ---------------- */
.works{ padding:6rem 0; }
.works__grid{
  max-width:var(--max); margin:3rem auto 0; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.25rem;
}
.work{ display:block; border-radius:18px; overflow:hidden; position:relative; }
.work__media{ aspect-ratio:4/3; transition:transform .5s; }
.work__media--1{ background:linear-gradient(135deg,#4b3bae,#2a1c5e); }
.work__media--2{ background:linear-gradient(135deg,#f0862d,#4b3bae); }
.work__media--3{ background:linear-gradient(135deg,#f5a62f,#e8452c); }
.work__media--4{ background:linear-gradient(135deg,#e8452c,#241a44); }
.work__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.work:hover .work__media{ transform:scale(1.06); }
.work__meta{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1rem .2rem; font-size:.95rem;
}
.work__tag{ font-family:var(--f-mono); font-size:.75rem; color:var(--coral); }
.works__note{ max-width:var(--max); margin:2rem auto 0; padding:0 var(--pad); color:var(--muted); font-size:.9rem; }
.works__empty{ grid-column:1/-1; color:var(--muted); font-family:var(--f-mono); font-size:.92rem; padding:1.2rem 0; }
.work__badge{
  position:absolute; top:.7rem; left:.7rem; z-index:2;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.09em; text-transform:uppercase;
  color:#fff; background:rgba(22,18,42,.62); border:1px solid rgba(240,134,45,.6);
  padding:.28rem .6rem; border-radius:999px; backdrop-filter:blur(4px);
}
.works--wip .work__media{ filter:saturate(.92); }
.works__note code{ font-family:var(--f-mono); color:var(--amber); }

/* ---------------- EN CIFRAS ---------------- */
.figures{ padding:3rem 0; }
.figures__grid{
  max-width:var(--max); margin:0 auto; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1.5rem;
  border-top:1px solid rgba(240,134,45,.14); border-bottom:1px solid rgba(240,134,45,.14);
  padding-top:2.4rem; padding-bottom:2.4rem;
}
.figure{ display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.figure__num{
  font-family:var(--f-display); font-weight:800; letter-spacing:-.02em; line-height:1.15;
  font-size:clamp(1.3rem, 2.4vw, 2rem); padding-bottom:.06em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.figure__label{ font-family:var(--f-mono); font-size:.8rem; letter-spacing:.04em; color:var(--ink-soft); }

.contact__nda{
  font-family:var(--f-mono); font-size:.82rem; letter-spacing:.03em;
  color:var(--muted); margin:-.6rem 0 2rem;
}

/* ---------------- CONTACTO ---------------- */
.contact{ padding:8rem 0; }
.contact__inner{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); }
.contact__title{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(3rem, 11vw, 8rem); line-height:.92; letter-spacing:-.03em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.contact__lede{ color:var(--ink-soft); max-width:46ch; margin:1.6rem 0 2rem; font-size:1.1rem; }
.contact__mail{
  font-family:var(--f-serif); font-style:italic; font-weight:500;
  font-size:clamp(1.4rem,4vw,2.4rem); border-bottom:2px solid var(--coral);
  padding-bottom:.15em; transition:color .3s, border-color .3s;
}
.contact__mail:hover{ color:var(--orange); border-color:var(--orange); }

/* ---------------- FOOTER ---------------- */
.footer{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  max-width:var(--max); margin:0 auto; padding:2.5rem var(--pad);
  border-top:1px solid rgba(240,134,45,.14);
  font-family:var(--f-mono); font-size:.8rem; color:var(--muted);
}

/* ---------------- REVEAL on scroll ---------------- */
.card, .work, .enfoque__cols p, .section-title{ --rd:0ms; }
.will-reveal{ opacity:0; transform:translateY(24px); }
.will-reveal.in{ opacity:1; transform:none; transition:opacity .6s var(--rd), transform .6s var(--rd); }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .word, .will-reveal{ opacity:1 !important; transform:none !important; }
}

@media (max-width:640px){
  .nav__toggle{
    display:inline-flex; align-items:center; gap:4px;
    background:none; border:none; cursor:pointer; padding:.45rem .3rem; margin-left:.1rem;
  }
  .nav__toggle span{ width:5px; height:5px; border-radius:50%; background:var(--ink-soft); display:block; transition:background .25s, transform .25s; }
  .nav.is-open .nav__toggle span{ background:var(--orange); }
  .nav.is-open .nav__toggle span:nth-child(1){ transform:translateX(1px); }
  .nav.is-open .nav__toggle span:nth-child(3){ transform:translateX(-1px); }

  .nav__menu{
    position:absolute; top:calc(100% + 8px); right:var(--pad);
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg-2); border:1px solid rgba(240,134,45,.18);
    border-radius:14px; padding:.4rem; min-width:190px;
    box-shadow:0 22px 55px rgba(0,0,0,.55);
    opacity:0; transform:translateY(-8px) scale(.98); pointer-events:none;
    transition:opacity .22s ease, transform .22s ease;
  }
  .nav__menu a{ display:block; padding:.7rem .85rem; border-radius:9px; }
  .nav__menu a:hover{ background:rgba(255,255,255,.05); color:var(--ink); }
  .nav.is-open .nav__menu{ opacity:1; transform:none; pointer-events:auto; }

  /* CTA: icono de WhatsApp en móvil en vez de "Hablemos" */
  .nav__cta--text{ display:none; }
  .nav__cta--wa{ display:inline-flex; }
  .nav__right{ gap:.6rem; }

  /* espacios verticales más compactos entre secciones */
  .hero{ min-height:auto; padding:6.5rem var(--pad) 2.5rem; }
  .services{ padding:3.5rem 0; }
  .enfoque{ padding:3.5rem 0; }
  .figures{ padding:2rem 0; }
  .works{ padding:3.5rem 0; }
  .contact{ padding:4rem 0; }
  .section-head{ margin-bottom:0; }
  .services__grid, .works__grid{ margin-top:1.8rem; }
  .enfoque__cols{ margin-top:1.6rem; }
}

/* =========================================================
   PÁGINAS INTERNAS (plantillas servicio / trabajo)
   ========================================================= */
.subhero{
  position:relative; z-index:2;
  max-width:var(--max); margin:0 auto;
  padding:9rem var(--pad) 3rem;
}
.subhero .hero__glow{ top:-20%; }
.crumbs{
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.05em;
  color:var(--muted); margin-bottom:1.6rem;
}
.crumbs a{ color:var(--ink-soft); }
.crumbs a:hover{ color:var(--orange); }
.subhero__eyebrow{
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--coral);
}
.subhero__title{
  font-family:var(--f-display); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(2.6rem, 8vw, 5.5rem); line-height:.98; margin:.6rem 0 1.2rem;
}
.subhero__title em{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.subhero__lede{ max-width:52ch; color:var(--ink-soft); font-size:1.15rem; }

/* layout de contenido + meta lateral */
.page{
  position:relative; z-index:2;
  max-width:var(--max); margin:0 auto; padding:2rem var(--pad) 5rem;
  display:grid; grid-template-columns:1fr; gap:3rem;
}
.page--split{ grid-template-columns:minmax(0,1.6fr) minmax(220px,.9fr); }
@media (max-width:820px){ .page--split{ grid-template-columns:1fr; } }

.prose h2{
  font-family:var(--f-display); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(1.6rem,4vw,2.4rem); line-height:1.05; margin:2.4rem 0 1rem;
}
.prose h2:first-child{ margin-top:0; }
.prose p{ color:var(--ink-soft); margin-bottom:1.1rem; max-width:62ch; }
.prose ul{ list-style:none; margin:1rem 0 1.6rem; max-width:62ch; }
.prose ul li{
  position:relative; padding-left:1.4rem; margin-bottom:.6rem; color:var(--ink-soft);
}
.prose ul li::before{
  content:"→"; position:absolute; left:0; color:var(--coral); font-family:var(--f-mono);
}
.prose strong{ color:var(--ink); }

/* tarjeta meta (datos del proyecto/servicio) */
.meta{
  background:var(--bg-2); border:1px solid rgba(240,134,45,.16);
  border-radius:18px; padding:1.6rem; align-self:start; position:sticky; top:6rem;
}
.meta dt{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--coral); margin-top:1.1rem; }
.meta dt:first-child{ margin-top:0; }
.meta dd{ color:var(--ink); margin:.25rem 0 0; }
.meta .meta__cta{
  display:inline-block; margin-top:1.6rem; width:100%; text-align:center;
  padding:.7rem 1rem; border-radius:999px; background:var(--grad-soft); color:#fff;
  font-family:var(--f-mono); font-size:.82rem; transition:transform .25s, box-shadow .25s;
}
.meta .meta__cta:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(240,134,45,.35); }

/* galería de imágenes (placeholders editables) */
.gallery{
  max-width:var(--max); margin:0 auto 4rem; padding:0 var(--pad);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.1rem;
}
.gallery__item{
  aspect-ratio:4/3; border-radius:16px; overflow:hidden;
  background:linear-gradient(135deg,#e8452c,#2a1c5e);
  display:flex; align-items:flex-end; padding:1rem;
  color:rgba(255,255,255,.85); font-family:var(--f-mono); font-size:.78rem;
}
.gallery__item:nth-child(2n){ background:linear-gradient(135deg,#f0862d,#4b3bae); }
.gallery__item:nth-child(3n){ background:linear-gradient(135deg,#f5a62f,#e8452c); }
.gallery__item > img{ width:100%; height:100%; object-fit:cover; display:block; }

/* placeholder de marca cuando no hay imagen */
.gallery__item--ph{ position:relative; padding:0; }
.gallery__item--ph .ph{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:.4rem; padding:1.2rem;
}
.gallery__item--ph .ph::after{
  content:""; position:absolute; inset:0; opacity:.12; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ph__eyebrow{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.ph__title{ font-family:var(--f-display); font-weight:800; letter-spacing:-.02em; line-height:1.7; color:#fff;
  font-size:clamp(1.6rem, 4vw, 3rem); max-width:18ch; }
.ph-cover .ph__title{ font-size:clamp(2rem, 6vw, 4.2rem); }
.ph__mark{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; color:rgba(255,255,255,.7); margin-top:.4rem; }
.ph__mono{ font-family:var(--f-display); font-weight:800; font-size:2rem; color:rgba(255,255,255,.9);
  border:2px solid rgba(255,255,255,.5); border-radius:12px; width:58px; height:58px; display:flex; align-items:center; justify-content:center; }
/* isotipo blanco como marca de placeholder — sutil */
.ph__iso{ width:clamp(22px,2.4vw,30px); height:auto; opacity:.42; }
.ph-cover .ph__iso{ width:clamp(26px,2.8vw,34px); opacity:.42; margin-bottom:.5rem; }
.ph__ptitle{ font-family:var(--f-display); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(1rem,1.8vw,1.4rem); line-height:1.15; color:#fff; opacity:.92;
  max-width:26ch; text-align:center; margin-top:.35rem; }
.ph__cap{ font-family:var(--f-mono); font-size:.78rem; color:rgba(255,255,255,.85); }

/* placeholder en tarjetas de la portada */
.work__media--ph{ position:relative; }
.work__media--ph .ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:1rem; }
.work__media--ph .ph__title{ font-size:clamp(1.3rem,3vw,2rem); }

/* navegación inferior entre páginas */
.page-nav{
  max-width:var(--max); margin:0 auto; padding:2.5rem var(--pad);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-top:1px solid rgba(240,134,45,.14);
}
.page-nav a{ font-family:var(--f-mono); font-size:.9rem; color:var(--ink-soft); transition:color .25s; }
.page-nav a:hover{ color:var(--orange); }

/* aviso de edición para plantillas (quitar en producción) */
.tpl-note{
  max-width:var(--max); margin:1rem auto 0; padding:.9rem var(--pad);
  font-family:var(--f-mono); font-size:.78rem; color:var(--amber);
}
.tpl-note code{ color:var(--peach); }