/* =========================================================
   cerro. — sistema base
   Paleta del rediseño (Claude Design): noche #1E1935 · profundo #16122B · niebla #F2EEFA · cian #5FD0EC · violeta #4B3BD6
   ========================================================= */

:root{

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala tipográfica. Las proporciones salen de la referencia:
     la bajada mide ~30% del display, el eyebrow ~14%, y el hero es
     siempre el tamaño mayor de la página. Valores a 1280px:
     display-1 95px · display-2 60px · lead 30px · body 21px · small 18px */
  /* Display — de mayor a menor. El hero es siempre el tope. */
  --fs-display-1: clamp(2.6rem, min(7.4vw, 10.5vh), 6.75rem);  /* hero, h1 de pagina  ~100px */
  --fs-display-2: clamp(1.9rem, 4.7vw, 4.25rem);               /* titular de seccion   ~68px */
  --fs-display-3: clamp(1.75rem, 4vw, 3.6rem);                 /* item grande          ~58px */
  --fs-display-4: clamp(1.5rem, 2.6vw, 2.5rem);                /* item medio           ~40px */
  --fs-display-5: clamp(1.5rem, 2.4vw, 2.4rem);                /* titulo de tarjeta    ~35px */
  --fs-bookend:   clamp(2.75rem, 6.4vw, 5.25rem);              /* hero con video y cierre de la home, 44–84px */

  /* Texto */
  --fs-lead:      clamp(1.2rem, 1.05rem + 1vw, 1.9rem);        /* bajada de una linea  ~30px */
  --fs-body:      clamp(1.0625rem, 1rem + .4vw, 1.3rem);       /* prosa                ~21px */
  --fs-small:     clamp(1rem, .95rem + .25vw, 1.15rem);        /* tarjetas, notas      ~18px */
  --fs-ui:        .875rem;                                     /* 14px — texto de interfaz: footer */

  /* Etiquetas mono. Tres pasos, no ocho. Ninguno baja de 12px. */
  --fs-label:     .85rem;   /* 13.6px — eyebrows, numeradores, labels de campo */
  --fs-label-sm:  .78rem;   /* 12.5px — nav, botones, links con flecha, meta */
  --fs-label-xs:  .75rem;   /* 12px   — piso: badges, dt, epigrafes, footer */

  --pad: clamp(1.25rem, 4vw, 4.5rem);
  --maxw: 1560px;
  --ease: cubic-bezier(.22,1,.36,1);

  /* colores de velos y textos sobre foto, en RGB para poder darles alfa */
  --rgb-bg:   16,22,28;
  --rgb-deep: 11,16,22;
  --rgb-on-media: 245,248,250;
  --rgb-glow: 175,172,250;      /* Lila: brillos decorativos (hero, cierre) */
  --img-outline: oklch(1 0 0 / .1);   /* contorno de fotos: blanco puro en oscuro */
  --on-media: #F5F8FA;

  /* un solo radio para todo lo que es foto o video */
  --radius-media: 0;
}

/* ---------- temas de color ----------
   Las secciones alternan oscuro (por defecto) y claro. Cada tema redefine
   los mismos tokens: los componentes no saben en cual estan.
   Contrastes medidos sobre el --bg de cada tema. */
:root,
.theme-dark,
.how__card{                       /* las tarjetas llevan fondo oscuro: siempre tema oscuro */
  --bg:        #10161C;          /* Grafito */
  --bg-alt:    #0B1016;          /* marquee, cierre, footer */
  --surface:   #44535F;          /* Pizarra */
  --ink:       #F5F8FA;          /* Nieve · 17.07:1 */
  --color-text-secondary: #CBD5DC;   /* Glaciar · 12.21:1 — parrafos y labels */
  --color-text-tertiary:  var(--color-text-secondary);   /* alias historico: mismo rol */
  --color-text-muted:     #95A3AF;   /* 7.05:1 — dt, epigrafes, placeholders */
  --danger:       #FF8A80;       /* errores de formulario */
  --accent:       #C6F432;       /* Ácido: fondos de CTA, lineas, vinetas */
  --on-accent:    #10161C;       /* 14.21:1 sobre el Ácido */
  --accent-lt:    #C6F432;       /* acento como TEXTO sobre grafito: 14.21:1 */
  --accent-hover: #AFACFA;       /* Lila */
  --dot:          #C6F432;
  --line:       rgba(245,248,250,.16);
  --line-input: rgba(245,248,250,.42);
  --line-soft:  rgba(245,248,250,.08);
}
.theme-light{
  --img-outline: oklch(0 0 0 / .1);   /* negro puro en claro */
  --bg:        #F5F8FA;          /* Nieve */
  --bg-alt:    #FFFFFF;
  --surface:   #CBD5DC;          /* Glaciar */
  --ink:       #10161C;          /* Grafito · 17.07:1 */
  --color-text-secondary: #44535F;   /* Pizarra · 7.43:1 — parrafos y labels */
  --color-text-tertiary:  var(--color-text-secondary);
  --color-text-muted:     #64717C;   /* 4.69:1 — dt, epigrafes, placeholders */
  --danger:       #B4231A;       /* errores de formulario */
  --accent:       #C6F432;       /* relleno: texto grafito encima · 14.21:1 */
  --on-accent:    #10161C;
  --accent-lt:    #4F46C9;       /* Lila profundo como texto · 6.45:1 */
  --accent-hover: #10161C;
  --dot:          #AFACFA;       /* Lila, igual que el punto del logo */
  --line:       rgba(var(--rgb-deep),.14);
  --line-input: rgba(var(--rgb-deep),.50);
  --line-soft:  rgba(var(--rgb-deep),.09);
}
/* en las secciones claras todos los puntitos van en Lila, como el del logo */
.theme-light .label::before,
.theme-light .checklist li::before,
.theme-light .marquee__track > span::after{ background:var(--dot); }
.theme-light,
.theme-dark{ background:var(--bg); color:var(--ink); }
.how__card{ color:var(--ink); }

*,*::before,*::after{ box-sizing:border-box; }

/* [hidden] tiene que ganarle a cualquier display de clase (.works, .form, etc.) */
[hidden]{ display:none !important; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

/* el header es fixed: sin esto, saltar a #work deja el titulo debajo del header */
:target,
[id]{ scroll-margin-top:clamp(5.5rem,9vw,7.5rem); }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:var(--accent); color:var(--on-accent); }

/* ---------- layout ---------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  /* el notch en apaisado come mas que --pad en pantallas angostas */
  padding-inline:max(var(--pad), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}

.section{ padding-block:clamp(4.5rem,10vw,9rem); }
.section--tight{ padding-block:clamp(3rem,6vw,5.5rem); }
.rule{ height:1px; background:var(--line-soft); border:0; margin:0; }

/* ---------- tipografía ---------- */
.display{
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:-.015em;
  line-height:1.12;
  margin:0;
  text-wrap:balance;
}

.t-hero{ font-size:var(--fs-display-1); }
.t-xl  { font-size:var(--fs-display-2); }
.t-lg  { font-size:var(--fs-display-2); }
.t-md  { font-size:var(--fs-display-4); line-height:1; }

.lead{
  font-size:var(--fs-lead);
  line-height:1.5;
  color:var(--color-text-tertiary);
  max-width:58ch;
  text-wrap:pretty;
}
/* Bajada larga. Cuando el texto bajo un titular es un parrafo de varias
   lineas y no un subtitulo de una linea, baja a la escala de prosa: a 30px
   compite con el titular en vez de apoyarlo. Todo lo demas (color, tracking,
   ancho de linea) queda igual. */
.lead--long{
  font-size:var(--fs-body);
  line-height:1.6;
}

.body-copy{ font-size:var(--fs-body); line-height:1.6; }
.body-copy p{
  margin:0 0 1.1em;
  color:var(--color-text-secondary);
  max-width:62ch;
}
.body-copy p:last-child{ margin-bottom:0; }
.body-copy strong{ color:var(--ink); font-weight:600; }

/* el punto azul del logo, como firma tipográfica */
.dot{ color:var(--dot); }

.label{
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--color-text-tertiary);
  display:flex;
  align-items:center;
  gap:.75rem;
  margin:0 0 clamp(1.75rem,3vw,3rem);
}
.label::before{
  content:"";
  width:9px; height:9px;
  border-radius:50%;
  background:var(--accent);
  flex:0 0 auto;
}

/* ---------- header ---------- */
.hdr{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  padding-block:clamp(1rem,1.6vw,1.5rem);
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(var(--rgb-bg),.82);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line-soft);
}
.hdr__in{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }

.brand{ display:block; flex:0 0 auto; }
.brand img{ height:clamp(24px,2.4vw,32px); width:auto; }

.nav{ display:flex; align-items:center; gap:clamp(1.5rem,2.5vw,2.75rem); }
.nav a{
  font-family:var(--font-mono);
  padding-block:.5rem;          /* 24px minimo de area tactil */
  font-size:var(--fs-label-sm);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-text-secondary);
  transition:color .25s var(--ease);
  position:relative;
}
@media (hover:hover){ .nav a:hover{ color:var(--ink); } }
.nav a::after{
  content:"";
  position:absolute; inset-inline-start:0; inset-inline-end:100%; bottom:.15rem;
  height:1px; background:var(--accent);
  transition:inset-inline-end .35s var(--ease);
}
@media (hover:hover){ .nav a:hover::after{ inset-inline-end:0; } }
.nav__cta{
  border:1px solid var(--line);
  border-radius:999px;
  padding:.5rem 1rem;
  color:var(--ink)!important;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.nav__cta::after{ display:none; }
@media (hover:hover){ .nav__cta:hover{ background:var(--accent); border-color:var(--accent); color:var(--on-accent)!important; } }

/* ---------- menu en pantallas chicas ---------- */
.nav__toggle{
  display:none;
  font-family:var(--font-mono);
  font-size:var(--fs-label-sm); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.5rem 1rem;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
@media (hover:hover){ .nav__toggle:hover{ background:var(--accent); border-color:var(--accent); } }

@media (max-width:700px){
  .nav__toggle{ display:inline-block; }

  /* el panel es hijo del header: logo y boton tienen que quedar por encima
     para seguir viendose y poder cerrarlo */
  .brand,
  .nav__toggle{ position:relative; z-index:95; }

  /* el menu abierto es un panel a pantalla completa */
  .nav__list{
    position:fixed; inset:0;
    z-index:90;
    background:var(--bg);
    display:flex; flex-direction:column;
    justify-content:center;
    gap:.5rem;
    padding:max(var(--pad), env(safe-area-inset-top, 0px))
            max(var(--pad), env(safe-area-inset-right, 0px))
            max(var(--pad), env(safe-area-inset-bottom, 0px))
            max(var(--pad), env(safe-area-inset-left, 0px));
    transform:translateY(-8px);
    opacity:0; visibility:hidden;
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
  }
  .nav__list[data-open="true"]{
    opacity:1; visibility:visible; transform:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s;
  }
  .nav__list a{
    font-family:var(--font-display);
    font-weight:500;
    font-size:var(--fs-display-3);
    letter-spacing:-.015em;
    text-transform:none;
    color:var(--ink);
    padding-block:.5rem;
  }
  .nav__list a::after{ display:none; }
  .nav__list .nav__cta{
    border:0; border-radius:0; padding:0;
    background:none;
    color:var(--accent-lt)!important;
  }

  /* backdrop-filter en el header lo vuelve el marco de los position:fixed de
     adentro: el panel quedaba del alto del header y los links se desbordaban.
     Con el menu abierto el panel tapa todo, el desenfoque no hace falta. */
  /* body + .hdr doble: tiene que ganarle a la franja del header sobre el video */
  body .hdr.hdr:has(.nav__list[data-open="true"]){
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    transition:none;
  }
}

@media (min-width:701px){
  /* en desktop la lista es la barra de siempre */
  .nav__list{ display:contents; }
}

/* ---------- hero ---------- */
.hero{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-top:clamp(7rem,14vh,11rem);
  padding-bottom:clamp(2rem,5vh,3.5rem);
  position:relative;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
}
.hero__bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(var(--rgb-glow),.30), transparent 58%),
    radial-gradient(90% 70% at 8% 92%, rgba(var(--rgb-glow),.14), transparent 62%);
}
.hero__in{ position:relative; z-index:2; width:100%; }

.hero__kicker{
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--color-text-tertiary);
  margin:0 0 clamp(1.5rem,3vw,2.5rem);
}
.hero__title{ margin:0; }
/* los saltos manuales solo desde tablet: en mobile el texto fluye solo */
.hero__title br{ display:none; }
@media (min-width:760px){ .hero__title br{ display:inline; } }
.hero__title em{
  font-style:normal;
  color:var(--accent-lt);
}
.hero__foot{
  margin-top:clamp(2.5rem,5vw,4rem);
  display:grid;
  grid-template-columns:1fr auto;
  gap:2rem clamp(2rem,6vw,6rem);
  align-items:end;
}
.hero__cta{ margin:0; }
.hero__scroll{
  font-family:var(--font-mono);
  font-size:var(--fs-label-sm);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--color-text-muted);
  display:flex; align-items:center; gap:.5rem;
  white-space:nowrap;
}
.hero__scroll span{
  width:1px; height:34px;
  background:linear-gradient(var(--accent),transparent);
  animation:drop 2.4s var(--ease) infinite;
}
@keyframes drop{ 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }
@media (max-width:820px){ .hero__foot{ grid-template-columns:1fr } .hero__scroll{ display:none } }
@media (max-width:760px){
  /* en pantallas chicas el bloque se centra: queda menos vacío arriba */
  .hero{ justify-content:center; padding-top:clamp(5rem,16vh,7rem); }
}

/* ---------- marquee ---------- */
.marquee{
  border-block:1px solid var(--line-soft);
  overflow:hidden;
  padding-block:clamp(1rem,1.6vw,1.5rem);
  --speed:38s;
}
.marquee__track{
  display:flex; width:max-content;
  animation:slide var(--speed) linear infinite;
}
.marquee__track > span{
  font-family:var(--font-display);
  font-weight:500;
  font-size:var(--fs-display-5);
  letter-spacing:-.02em;
  padding-inline:clamp(1rem,2vw,2rem);
  display:flex; align-items:center; gap:clamp(1rem,2vw,2rem);
  color:var(--color-text-secondary);
  white-space:nowrap;
}
.marquee__track > span::after{
  content:"";
  width:9px; height:9px; border-radius:50%;
  background:var(--accent);
}
@keyframes slide{ to{ transform:translateX(calc(-1 * var(--shift, 50%))) } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none } }

/* ---------- grilla de trabajos ---------- */
.works{ display:grid; gap:clamp(2.5rem,5vw,5rem); }
@media (min-width:900px){
  .works{ grid-template-columns:repeat(12,1fr); }
  .work{ grid-column:span 6; }
  .work--wide{ grid-column:span 12; }
}

.work{ display:block; position:relative; }
.work__media{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-media);
  box-shadow:inset 0 0 0 1px var(--img-outline);   /* borde de imagen */
  background:var(--surface);
  aspect-ratio:16/10;
}
.work--wide .work__media{ aspect-ratio:16/8; }
.work__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .9s var(--ease), filter .6s var(--ease);
}
.work__media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(var(--rgb-bg),.55), transparent 55%);
  opacity:0; transition:opacity .5s var(--ease);
}
@media (hover:hover){ .work:hover .work__media img{ transform:scale(1.045); } }
@media (hover:hover){ .work:hover .work__media::after{ opacity:1; } }

.work__badge{
  position:absolute; z-index:2;
  inset-inline-start:1rem; inset-block-start:1rem;
  font-family:var(--font-mono);
  font-size:var(--fs-label-xs); letter-spacing:.16em; text-transform:uppercase;
  background:rgba(var(--rgb-deep),.78);
  backdrop-filter:blur(8px);
  border:1px solid rgba(var(--rgb-on-media),.28);
  border-radius:999px;
  padding:.5rem .75rem;
  color:var(--on-media);                     /* la seccion puede ser clara: el badge va siempre sobre la foto */
}

.work__info{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1.5rem; margin-top:1.25rem;
  border-top:1px solid var(--line-soft);
  padding-top:1rem;
}
.work__title{
  font-family:var(--font-display);
  min-width:0;                   /* cede antes que la meta */
  font-weight:500; letter-spacing:-.015em;
  font-size:var(--fs-display-4);
  line-height:1; margin:0;
  transition:color .3s var(--ease);
}
@media (hover:hover){ .work:hover .work__title{ color:var(--accent-lt); } }
.work__client{
  font-family:var(--font-mono);
  font-size:var(--fs-label-sm); letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-text-tertiary);
  min-width:0; text-align:end;   /* con un cliente largo envuelve, no se sale */
}
@media (max-width:700px){
  /* en mobile el título necesita el ancho completo: la meta baja */
  .work__info{ flex-direction:column; align-items:flex-start; gap:.5rem; }
  .work__client{ text-align:start; }
}

/* ---------- servicios ---------- */
.svc{ border-top:1px solid var(--line-soft); }
.svc__item{
  border-bottom:1px solid var(--line-soft);
  padding-block:clamp(1.5rem,3vw,2.5rem);
  display:grid;
  grid-template-columns:4.5rem minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(1rem,3vw,3.5rem);
  align-items:start;
  transition:background .4s var(--ease);
}
@media (hover:hover){ .svc__item:hover{ background:color-mix(in srgb, var(--ink) 2.5%, transparent); } }
.svc__num{
  font-family:var(--font-mono);
  font-size:var(--fs-label); letter-spacing:.12em;
  color:var(--accent-lt); padding-top:.5rem;   /* texto chico: --accent da 3.10:1 */
}
.svc__name{
  font-family:var(--font-display);
  font-weight:500; letter-spacing:-.015em; line-height:1.12;
  font-size:var(--fs-display-3);
  margin:0 0 .5rem;
  text-wrap:balance;
}
.svc__desc{ color:var(--color-text-tertiary); margin:0; max-width:52ch; padding-top:.5rem;
  font-size:var(--fs-small); line-height:1.55; }
@media (max-width:900px){
  .svc__item{ grid-template-columns:4.5rem minmax(0,1fr); }
  .svc__desc{ grid-column:2; padding-top:0; }
}
@media (max-width:640px){
  .svc__item{ grid-template-columns:1fr; gap:.5rem }
  .svc__num{ padding-top:0 }
  .svc__desc{ grid-column:1 }
}

/* ---------- manifiesto ---------- */
.manifest{
  display:grid; gap:clamp(2rem,5vw,5rem);
  grid-template-columns:1fr;
}
@media (min-width:900px){ .manifest{ grid-template-columns:1.35fr 1fr; align-items:start } }
.stats{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);
  margin-top:clamp(2rem,4vw,3rem);
}
.stat__val{
  font-family:var(--font-display); font-weight:500;
  font-size:var(--fs-display-3);
  letter-spacing:-.04em; line-height:1;
  color:var(--ink);
}
.stat__lbl{
  font-family:var(--font-mono); font-size:var(--fs-label-xs);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-text-tertiary); margin-top:.5rem;
}

/* ---------- contacto ---------- */
.contact{
  padding-block:clamp(5rem,12vw,11rem);
  border-top:1px solid var(--line-soft);
  position:relative; overflow:hidden;
}
.contact::before{
  content:"";
  position:absolute; inset:auto 0 -40% 0; height:80%;
  background:radial-gradient(60% 100% at 50% 100%, rgba(var(--rgb-glow),.24), transparent 70%);
  pointer-events:none;
}
.contact__in{ position:relative; z-index:1; }
.mail{
  display:inline-block;
  font-family:var(--font-display); font-weight:500;
  font-size:var(--fs-display-1);
  letter-spacing:-.02em; line-height:1.12;
  margin:clamp(1.5rem,3vw,2.5rem) 0 0;
  word-break:break-word;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;
  background-size:0% 3px;
  background-position:0 100%;
  transition:background-size .55s var(--ease), color .35s var(--ease);
}
@media (hover:hover){ .mail:hover{ color:var(--accent-lt); background-size:100% 3px; } }
.contact__meta{
  margin-top:clamp(2.5rem,5vw,4rem);
  display:grid; gap:1.75rem;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border-top:1px solid var(--line-soft);
  padding-top:clamp(1.75rem,3vw,2.5rem);
}
.contact__meta dt{
  font-family:var(--font-mono); font-size:var(--fs-label-xs);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-text-muted); margin-bottom:.5rem;
}
.contact__meta dd{ margin:0; color:var(--color-text-secondary); }
@media (hover:hover){ .contact__meta a:hover{ color:var(--accent-lt); } }

/* ---------- footer ---------- */
.ftr{
  border-top:1px solid var(--line-soft);
  padding-block:clamp(2rem,4vw,3rem);
  display:flex; flex-wrap:wrap; gap:1.25rem 2rem;
  align-items:center; justify-content:space-between;
  font-family:var(--font-mono); font-size:var(--fs-label-xs);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-text-muted);
}
@media (hover:hover){ .ftr a:hover{ color:var(--color-text-secondary); } }
.ftr__links{ display:flex; gap:1.5rem; flex-wrap:wrap; }
.ftr__links a{ display:inline-block; padding-block:.5rem; }  /* area tactil */

/* ---------- página de proyecto ---------- */
.pj-hero{ padding-top:clamp(8rem,16vh,12rem); }
.back{
  font-family:var(--font-mono); font-size:var(--fs-label-sm);
  padding-block:.5rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-text-tertiary);
  display:inline-flex; align-items:center; gap:.5rem;
  margin-bottom:clamp(2rem,4vw,3.5rem);
  transition:color .25s var(--ease), gap .25s var(--ease);
}
@media (hover:hover){ .back:hover{ color:var(--ink); gap:1rem; } }

.pj-head{ display:grid; gap:clamp(1.5rem,3vw,2.5rem); }
.pj-meta{
  display:grid; gap:1.5rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:1px solid var(--line-soft);
  padding-top:clamp(1.5rem,3vw,2rem);
  margin-top:clamp(1.5rem,3vw,2.5rem);
}
.pj-meta dt{
  font-family:var(--font-mono); font-size:var(--fs-label-xs);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-text-muted); margin-bottom:.5rem;
}
.pj-meta dd{ margin:0; color:var(--ink); font-size:var(--fs-small); line-height:1.5; }

.frame{
  position:relative;
  border-radius:var(--radius-media); overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--img-outline);   /* borde de imagen */
  background:var(--surface);
  aspect-ratio:16/9;
}
.frame video,.frame iframe,.frame img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; border:0;
}
.frame--empty{
  display:grid; place-items:center;
  border:1px dashed var(--line);
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 2%, transparent) 0 12px, transparent 12px 24px);
}
.frame--empty p{
  font-family:var(--font-mono); font-size:var(--fs-label-sm);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-text-muted); text-align:center; margin:0; padding:1.5rem;
}

.pj-grid{
  display:grid; gap:clamp(2.5rem,5vw,5rem);
  grid-template-columns:1fr;
}
@media (min-width:900px){ .pj-grid{ grid-template-columns:1fr 1fr; } }

.results{
  display:grid; gap:clamp(1.5rem,3vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.result{
  border-top:2px solid var(--accent);
  padding-top:1rem;
}

.gallery{
  display:grid; gap:clamp(.75rem,1.4vw,1.25rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
}
.gallery figure{ margin:0; }
.gallery button{
  display:block; width:100%; padding:0;
  border-radius:var(--radius-media); overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--img-outline);   /* borde de imagen */
  background:var(--surface); aspect-ratio:16/10;
}
.gallery img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease), opacity .4s var(--ease);
}
@media (hover:hover){ .gallery button:hover img{ transform:scale(1.05); opacity:.9; } }
.gallery figcaption{
  font-family:var(--font-mono); font-size:var(--fs-label-xs);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--color-text-muted); margin-top:.75rem;
}

.next{
  border-top:1px solid var(--line-soft);
  padding-block:clamp(3rem,7vw,6rem);
  display:block;
}
@media (hover:hover){ .next:hover .t-xl{ color:var(--accent-lt); } }
.next .t-xl{ transition:color .35s var(--ease); }

/* ---------- lightbox ---------- */
.lbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(var(--rgb-deep),.94);
  backdrop-filter:blur(6px);
  display:grid; place-items:center;
  padding:clamp(1rem,4vw,3rem);
  overscroll-behavior:contain;
  opacity:0; visibility:hidden;
  /* visibility no se anima: al abrir pasa a visible en 0s, para que el boton
     de cerrar sea focusable en el mismo instante en que se abre el dialogo.
     Al cerrar se retrasa 350ms para que el fundido llegue a verse. */
  transition:opacity .35s var(--ease), visibility 0s linear .35s;
}
.lbox[data-open="true"]{
  opacity:1; visibility:visible;
  transition:opacity .35s var(--ease), visibility 0s;
}
.lbox img{ max-width:100%; max-height:88vh; object-fit:contain; border-radius:var(--radius-media); }
.lbox__close{
  position:absolute; inset-block-start:clamp(1rem,3vw,2rem); inset-inline-end:clamp(1rem,3vw,2rem);
  padding:.5rem .75rem; margin:-.5rem -.75rem;   /* area tactil sin mover el texto */
  font-family:var(--font-mono); font-size:var(--fs-label-sm);
  letter-spacing:.16em; text-transform:uppercase; color:var(--color-text-tertiary);
}
@media (hover:hover){ .lbox__close:hover{ color:var(--ink); } }

/* ---------- reveal ----------
   Oculto solo debajo de .js, que agrega el script inline del <head> (asi no
   parpadea). Si main.js no marca .reveal-ready en 2,5 s, ese mismo script saca
   .js y todo queda visible: una falla de JS nunca deja la pagina en blanco.
   Fundido corto y 12px de recorrido: acompaña la lectura, no la demora. */
.js [data-reveal]{
  opacity:0; transform:translateY(12px);
  transition:opacity 600ms var(--ease), transform 600ms var(--ease);
}
.js [data-reveal].is-in,
.js [data-reveal]:focus-within{ opacity:1; transform:none; }   /* un link enfocado nunca queda invisible */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    transition-delay:0s!important;
    scroll-behavior:auto!important;
  }
  /* menos movimiento, no cero: queda el fundido, sin recorrido ni escalonado */
  .js [data-reveal]{ transform:none; transition:opacity 400ms var(--ease)!important; }
}

/* accesibilidad */
:focus-visible{ outline:2px solid var(--accent-lt); outline-offset:3px; border-radius:2px; }
/* Recortado en vez de empujado fuera de pantalla: un left negativo se vuelve
   desborde real cuando el documento es RTL. */
.skip{
  position:absolute;
  inset-block-start:0; inset-inline-start:0;
  z-index:300;
  width:1px; height:1px;
  padding:0; overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  background:var(--accent); color:var(--ink);
}
.skip:focus{
  width:auto; height:auto;
  overflow:visible; clip-path:none;
  inset-block-start:.75rem; inset-inline-start:var(--pad);
  padding:.75rem 1.25rem;
}

/* =========================================================
   SITIO MULTIPÁGINA — componentes nuevos
   ========================================================= */

/* ---------- escalas tipográficas ---------- */
/* .t-hero se usa para titulares largos (una frase completa) */
.t-lead-hero{ font-size:var(--fs-display-1); letter-spacing:-.025em; }
/* .t-mega para frases cortas y contundentes */
.t-mega{ font-size:var(--fs-display-1); }

.prose{ max-width:64ch; }
.prose-narrow{ max-width:52ch; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--color-text-tertiary);
  margin:0 0 clamp(1.5rem,3vw,2.5rem);
}

/* ---------- header multipágina ---------- */
.nav a[aria-current="page"]{ color:var(--ink); }
.nav a[aria-current="page"]::after{ inset-inline-end:0; }
.nav__cta[aria-current="page"]{ background:var(--accent); border-color:var(--accent); color:var(--on-accent)!important; }

/* ---------- botón / link con flecha ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.75rem;
  font-family:var(--font-mono);
  font-size:var(--fs-label-sm); letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--line);
  border-radius:999px;
  padding:1rem 1.5rem;
  transition:background .3s var(--ease), border-color .3s var(--ease), gap .3s var(--ease), scale .12s var(--ease);
}
.btn:active{ scale:.96; }
@media (hover:hover){ .btn:hover{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); gap:1rem; } }
.btn--solid{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
@media (hover:hover){ .btn--solid:hover{ background:var(--accent-hover); border-color:var(--accent-hover); } }

.arrow-link{
  display:inline-flex; align-items:center; gap:.5rem;
  padding-block:.5rem;
  font-family:var(--font-mono);
  font-size:var(--fs-label-sm); letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-text-secondary);
  transition:color .25s var(--ease), gap .25s var(--ease);
}
@media (hover:hover){ .arrow-link:hover{ color:var(--accent-lt); gap:1rem; } }

/* ---------- hero de páginas internas ---------- */
.page-hero{
  padding-top:clamp(8rem,18vh,13rem);
  padding-bottom:clamp(3rem,7vw,6rem);
}

/* ---------- statement (frase grande + apoyo) ---------- */
.statement{
  display:grid; gap:clamp(1.75rem,4vw,4rem);
  grid-template-columns:1fr;
}
/* Apilado, no a dos columnas: el titular arriba y la bajada debajo,
   contra el mismo borde. Es el armado de la referencia y deja una sola
   lógica de lectura en toda la página. */
.statement__body{ color:var(--color-text-tertiary); margin:0; }
.statement__body strong{ color:var(--ink); font-weight:600; }

/* ---------- lista con viñeta de acento ---------- */
.checklist{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.checklist li{
  font-size:var(--fs-small); line-height:1.55;
  position:relative;
  padding-inline-start:1.5rem;
  color:var(--color-text-secondary);
}
.checklist li::before{
  content:"";
  position:absolute; inset-inline-start:0; top:.62em;
  width:7px; height:7px; border-radius:50%;
  background:var(--accent);
}

/* ---------- callout ---------- */
.callout{
  border:1px solid var(--line);
  border-inline-start:2px solid var(--accent);
  border-radius:4px;
  padding:clamp(1.5rem,3vw,2.25rem);
  background:color-mix(in srgb, var(--ink) 2.5%, transparent);
}
.callout .callout__h{
  font-family:var(--font-mono);
  font-size:var(--fs-label-sm); letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); margin:0 0 1rem;
}
.callout p{ margin:0; color:var(--color-text-secondary); max-width:60ch;
  font-size:var(--fs-small); line-height:1.6; }

/* ---------- nota de contenido pendiente ----------
   Visible a propósito: no puede publicarse sin que se note. */
.todo{
  border:1px dashed rgba(var(--rgb-glow),.55);
  border-radius:4px;
  padding:clamp(1.25rem,2.5vw,1.75rem);
  background:rgba(var(--rgb-glow),.07);
  font-family:var(--font-mono);
  font-size:var(--fs-label); line-height:1.7;
  color:var(--accent-lt);
  max-width:64ch;
}
.todo b{ display:block; font-weight:500; letter-spacing:.16em; text-transform:uppercase; font-size:var(--fs-label-xs); margin-bottom:.5rem; color:var(--accent-lt); }

/* ---------- proceso: Define → Launch → Scale ---------- */
.steps{
  display:grid; gap:clamp(1.25rem,2.5vw,2rem);
  grid-template-columns:1fr;
  counter-reset:step;
}
@media (min-width:820px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step{
  border-top:1px solid var(--line);
  padding-top:1.25rem;
}
.step__num{
  font-family:var(--font-mono); font-size:var(--fs-label);
  letter-spacing:.14em; color:var(--color-text-muted); margin-bottom:1rem;
}
.step__name{
  font-family:var(--font-display); font-weight:500;
  letter-spacing:-.015em; line-height:1.12;
  font-size:var(--fs-display-4);
  margin:0 0 .5rem;
  text-wrap:balance;
}
.step__note{ margin:0; color:var(--color-text-tertiary); font-size:var(--fs-small); line-height:1.55; }

/* ---------- bloque grande de servicio ---------- */
.svc-block{
  border-top:1px solid var(--line-soft);
  padding-block:clamp(3rem,7vw,6rem);
}
.svc-block__head{ margin-bottom:clamp(2rem,4vw,3rem); }
.svc-block__tag{
  font-family:var(--font-mono); font-size:var(--fs-label);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-text-secondary); margin:0 0 1rem;
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
}
.svc-block__flag{
  border:1px solid var(--line);
  border-radius:999px; padding:.25rem .75rem;
  color:var(--ink);
}
.svc-block__grid{
  display:grid; gap:clamp(2rem,4vw,4rem);
  grid-template-columns:1fr;
}
@media (min-width:960px){ .svc-block__grid{ grid-template-columns:1.1fr 1fr; } }

/* ---------- formulario ---------- */
.form{
  display:grid; gap:clamp(1.25rem,2.5vw,1.75rem);
  grid-template-columns:1fr;
  max-width:760px;
}
@media (min-width:720px){
  .form{ grid-template-columns:1fr 1fr; }
  .field--full{ grid-column:1 / -1; }
}
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field label{
  font-family:var(--font-mono); font-size:var(--fs-label);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-text-tertiary);
}
.field label .opt{ color:var(--color-text-muted); text-transform:none; letter-spacing:.06em; }
.field input,
.field select,
.field textarea{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  color:var(--ink);
  background:color-mix(in srgb, var(--ink) 3.5%, transparent);
  border:1px solid var(--line-input);
  border-radius:4px;
  padding:1rem 1rem;
  width:100%;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.field textarea{ min-height:150px; resize:vertical; }
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--color-text-tertiary) 50%),linear-gradient(135deg,var(--color-text-tertiary) 50%,transparent 50%);
  background-position:calc(100% - 20px) center, calc(100% - 14px) center;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-inline-end:2.75rem;
}
.field select option{ background:var(--bg); color:var(--ink); }
/* la flecha del select acompaña al lado de cierre */
[dir="rtl"] .field select{ background-position:20px center, 14px center; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--accent-lt);
  background:color-mix(in srgb, var(--ink) 6%, transparent);
}
.field input::placeholder,
.field textarea::placeholder{ color:var(--color-text-muted); }

.form__actions{
  grid-column:1 / -1;
  display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem;
}
.form__note-link{ color:var(--accent-lt); }
.form__note{
  font-family:var(--font-mono); font-size:var(--fs-label-sm);
  letter-spacing:.06em; color:var(--color-text-muted); margin:0; max-width:42ch;
}
.form__status{
  grid-column:1 / -1; margin:0;
  font-family:var(--font-mono); font-size:var(--fs-label-sm); letter-spacing:.06em;
  color:var(--accent-lt);
}
/* La region polite queda siempre en el DOM para que los anuncios repetidos
   se escuchen. Vacia no ocupa alto, pero no se saca con display:none. */
.form__status:empty{ height:0; overflow:hidden; }

.field__error{
  margin:0;
  font-size:var(--fs-label);
  line-height:1.45;
  color:var(--danger);
}
.field__error:empty{ display:none; }
/* el error le gana al color de foco: el anillo ya marca el foco */
.field [aria-invalid="true"],
.field [aria-invalid="true"]:focus{
  border-color:var(--danger);
}

/* ---------- cierre / CTA de página ---------- */
.closer{
  border-top:1px solid var(--line-soft);
  padding-block:clamp(4.5rem,10vw,9rem);
  position:relative; overflow:hidden;
}
.closer::before{
  content:"";
  position:absolute; inset:auto 0 -50% 0; height:100%;
  background:radial-gradient(55% 100% at 50% 100%, rgba(var(--rgb-glow),.22), transparent 70%);
  pointer-events:none;
}
.closer__in{ position:relative; z-index:1; }

/* ---------- work: estado provisorio ---------- */
.work-interim{
  border:1px solid var(--line);
  border-radius:6px;
  padding:clamp(2rem,5vw,4rem);
  display:grid; gap:1.5rem;
  justify-items:start;
  background:color-mix(in srgb, var(--ink) 2%, transparent);
}

/* ---------- layout de la página de contacto ---------- */
.contact-layout{
  display:grid; gap:clamp(2.5rem,5vw,5rem);
  grid-template-columns:1fr; align-items:start;
}
@media (min-width:1020px){
  .contact-layout{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); }
}
.contact-layout .form{ max-width:none; }
.contact-aside{ display:grid; gap:clamp(2rem,4vw,3rem); }
.stack-meta{ display:grid; gap:1.5rem; margin:0; }
.stack-meta dt{
  font-family:var(--font-mono); font-size:var(--fs-label-xs);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-text-muted); margin-bottom:.5rem;
}
.stack-meta dd{ margin:0; color:var(--color-text-secondary); }
.stack-meta dd a{ display:inline-block; padding-block:.5rem; }  /* area tactil */
@media (hover:hover){ .stack-meta a:hover{ color:var(--accent-lt); } }

/* =========================================================
   HOW WE DO IT — cajas numeradas con arte abstracto de fondo
   ========================================================= */

.how{
  display:grid;
  gap:clamp(1.5rem,2.4vw,2rem);   /* misma curva que el padding de la tarjeta */
  grid-template-columns:1fr;
}
@media (min-width:680px){ .how{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .how{ grid-template-columns:repeat(3,1fr); } }

.how__card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:10px;
  border:1px solid var(--line-soft);
  padding:clamp(1.5rem,2.4vw,2rem);
  min-height:clamp(17rem,26vw,20rem);
  display:flex; flex-direction:column;
  justify-content:flex-end;   /* el texto se apoya abajo, el arte respira arriba */
  background:var(--surface);
}

/* el arte va de fondo, siempre por debajo de un velo que garantiza contraste */
.how__card::before{
  content:"";
  position:absolute; inset:0; z-index:-2;
  background-image:var(--art);
  background-size:cover;
  background-position:center;
  opacity:1;
  transition:transform 1.1s var(--ease), opacity .6s var(--ease);
}
.how__card::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,
    rgba(var(--rgb-bg),.10) 0%,
    rgba(var(--rgb-bg),.38) 30%,
    rgba(var(--rgb-bg),.93) 62%,
    rgba(var(--rgb-bg),.97) 100%);
}
@media (hover:hover){ .how__card:hover::before{ transform:scale(1.06); opacity:1; } }

.how__title{
  font-family:var(--font-display);
  font-weight:500;
  letter-spacing:-.015em;
  line-height:1.15;
  font-size:var(--fs-display-5);
  margin:0 0 .75rem;
  text-wrap:balance;
}
.how__text{
  margin:0;
  color:var(--color-text-tertiary);   /* un escalon abajo del titulo */
  font-size:var(--fs-small);
  line-height:1.55;
  max-width:40ch;
}

/* asignacion del arte — las rutas viven en el CSS, no en el HTML */
.how__card[data-art="beam"]  { --art:url("../img/abstract/beam.svg?v=design1"); }
.how__card[data-art="bands"] { --art:url("../img/abstract/bands.svg?v=design1"); }
.how__card[data-art="flow"]  { --art:url("../img/abstract/flow.svg?v=design1"); }
.how__card[data-art="fold"]  { --art:url("../img/abstract/fold.svg?v=design1"); }
.how__card[data-art="halo"]  { --art:url("../img/abstract/halo.svg?v=design1"); }
.how__card[data-art="grid"]  { --art:url("../img/abstract/grid.svg?v=design1"); }

/* ---------- arte de fondo en hero y cierre, muy tenue ---------- */
.hero__bg::before{
  content:"";
  position:absolute; inset:0;
  background:url("../img/abstract/beam.svg?v=design1") center right / cover no-repeat;
  opacity:.5;
  mask-image:linear-gradient(to left, #000 0%, transparent 72%);
  -webkit-mask-image:linear-gradient(to left, #000 0%, transparent 72%);
}
.closer::after{
  content:"";
  position:absolute; inset:auto 0 -30% 0; height:90%;
  background:url("../img/abstract/halo.svg?v=design1") center bottom / cover no-repeat;
  opacity:.32;
  mask-image:linear-gradient(to top, #000 10%, transparent 85%);
  -webkit-mask-image:linear-gradient(to top, #000 10%, transparent 85%);
  pointer-events:none;
}

/* ---------- hero con video de fondo ---------- */
.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
/* el video es pastel claro: velo oscuro más denso abajo-izquierda, donde vive el texto */
.hero__bg--video::before{ display:none; }
/* textos chicos arriba del video: un escalón más de tinta para sostener 4.5:1 */
.hero:has(.hero__bg--video) .hero__scroll{ color:var(--ink); }
.hero:has(.hero__bg--video) .hero__kicker{ color:var(--ink); }
/* En la home el header arranca sin barra: logo y links van directo sobre el
   video. La barra (fondo + desenfoque) recien aparece al scrollear, con
   .is-stuck. Para que los links se lean arriba, el hero lleva un degradado
   propio en el borde superior, que se desvanece a los 11rem. */
/* En la home el header no tiene barra arriba: el logo y los links van sobre el
   video. La barra (fondo + desenfoque) aparece al scrollear, con .is-stuck.
   Sin velo arriba por decision de diseno: sobre la parte blanca del video los
   links quedan por debajo del minimo de contraste. Van en tinta plena, que es
   lo que mas ayuda sin sumar ninguna capa. */
/* Arriba del todo, la misma barra pero 90% transparente: el desenfoque aplana
   el video detras del logo y el menu. Al scrollear pasa a la barra de .is-stuck
   (.82) con la transicion que ya tiene .hdr. */
body:has(.hero__bg--video) .hdr:not(.is-stuck){
  background:rgba(var(--rgb-bg),.10);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line-soft);
}
/* Sobre el video los links van en tinta clara, por decision de diseno: en las
   escenas claras del reel quedan por debajo del minimo de contraste. */
body:has(.hero__bg--video) .hdr:not(.is-stuck) .nav a,
body:has(.hero__bg--video) .hdr:not(.is-stuck) .nav__toggle{ color:var(--ink); }





/* sin bajada: el titular se apoya abajo también en mobile */
@media (max-width:760px){
  .hero:has(.hero__bg--video){ justify-content:flex-end; }
}
.hero__bg--video::after{
  z-index:1;
  background:
    linear-gradient(to top, rgba(var(--rgb-bg),.92) 0%, rgba(var(--rgb-bg),.82) 30%, rgba(var(--rgb-bg),.52) 60%, rgba(var(--rgb-bg),.08) 100%),
    linear-gradient(to right, rgba(var(--rgb-bg),.25) 0%, rgba(var(--rgb-bg),0) 60%);
}

/* skip link: mismo par que los CTA */
.skip{ color:var(--on-accent); }

/* =========================================================
   HOME — rediseño (Claude Design)
   ========================================================= */

/* ---- hero: video de fondo, titulo en dos lineas apoyado abajo ---- */
.hero__bg--video::after{
  background:
    radial-gradient(120% 90% at 72% 22%, rgba(var(--rgb-glow),.28) 0%, rgba(90,80,180,.10) 42%, transparent 70%),
    linear-gradient(to top, rgba(var(--rgb-bg),.94) 0%, rgba(var(--rgb-bg),.84) 30%, rgba(var(--rgb-bg),.55) 60%, rgba(var(--rgb-bg),.12) 100%),
    linear-gradient(to right, rgba(var(--rgb-bg),.30) 0%, rgba(var(--rgb-bg),0) 60%);
}
.hero__title{
  font-size:var(--fs-bookend);
  line-height:1.02;
  letter-spacing:-.02em;
}
@media (max-width:759px){ .hero__title{ line-height:1.08; } }
/* en angosto el titulo ocupa cuatro lineas y el kicker sube a la mitad del hero:
   sin brillo y con el tramo medio mas denso (con el velo de desktop cae a 3.94:1) */
@media (max-width:759px){
  .hero__bg--video::after{
    background:
      linear-gradient(to top, rgba(var(--rgb-bg),.94) 0%, rgba(var(--rgb-bg),.86) 30%, rgba(var(--rgb-bg),.74) 60%, rgba(var(--rgb-bg),.20) 100%),
      linear-gradient(to right, rgba(var(--rgb-bg),.30) 0%, rgba(var(--rgb-bg),0) 60%);
  }
}
.hero__cta{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:12px 24px;
}
.hero__link{
  display:inline-block;
  padding-block:8px 4px;
  font-family:var(--font-mono);
  font-size:var(--fs-label-sm); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink);
  border-bottom:1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
@media (hover:hover){ .hero__link:hover{ color:var(--accent-lt); border-color:var(--accent-lt); } }

/* ---- marquee sobre el fondo profundo ---- */
.marquee{ background:var(--bg-alt); border-block:1px solid var(--line-soft); }
.marquee__track > span{ color:var(--ink); font-size:var(--fs-display-5); }
.marquee__track > span::after{ width:6px; height:6px; }

/* ---- bloque de dos columnas: texto + complemento ---- */
.split{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap:clamp(36px, 5vw, 72px);
  align-items:start;
}
.split--center{ align-items:center; }
.split--end{ align-items:end; }
.split__body{ margin-top:clamp(20px, 2.4vw, 28px); max-width:46ch; color:var(--color-text-secondary); }
.section--flush-top{ padding-top:0; }
.h2{
  font-family:var(--font-display); font-weight:500;
  font-size:var(--fs-display-2);
  line-height:1.06; letter-spacing:-.02em;
  margin:0; text-wrap:balance;
}

/* lista numerada de disciplinas */
.h-list{ list-style:none; margin:0; padding:0; }
.h-list li{
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(16px, 3vw, 32px);
  padding-block:20px;
  border-top:1px solid var(--line);
}
.h-list li:last-child{ border-bottom:1px solid var(--line); }
.h-list__num{
  font-family:var(--font-mono); font-size:var(--fs-label);
  letter-spacing:.14em; color:var(--color-text-muted); padding-top:8px;
}
.h-list__name{
  font-family:var(--font-display); font-weight:500;
  font-size:var(--fs-lead); line-height:1.2; margin:0;
}
.h-list__desc{ margin:8px 0 0; font-size:var(--fs-small); line-height:1.6; color:var(--color-text-secondary); max-width:40ch; }


/* filas de servicios, cada una es un link */
.h-svc{ border-bottom:1px solid var(--line-soft); }
.h-svc__row{
  display:grid;
  grid-template-columns:auto minmax(0, 1.1fr) minmax(0, 1.3fr);
  gap:clamp(16px, 3vw, 40px);
  padding-block:clamp(24px, 3vw, 32px);
  border-top:1px solid var(--line-soft);
  transition:background-color .25s var(--ease);
}
@media (hover:hover){ .h-svc__row:hover{ background:color-mix(in srgb, var(--ink) 3%, transparent); } }
@media (max-width:719px){
  .h-svc__row{ grid-template-columns:auto 1fr; }
  .h-svc__desc{ grid-column:2; }
}
.h-svc__num{ font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.14em; color:var(--color-text-muted); padding-top:10px; }
.h-svc__name{
  font-family:var(--font-display); font-weight:500;
  font-size:var(--fs-display-5); line-height:1.12; margin:0;
}



/* trabajos: pie sin linea (confundia con la foto) */
.work__info{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline;
  gap:12px; margin-top:18px; padding-top:0;
  border-top:0;
}

/* encabezado de seccion: aire antes de lo que sigue */
.h-head{ margin-bottom:clamp(48px, 6vw, 88px); }


/* cierre: dos columnas, fondo profundo con brillo cian */
.closer{ background:var(--bg-alt); border-top:0; }
.closer::before{
  inset:0; height:auto;
  background:radial-gradient(90% 120% at 15% 100%, rgba(var(--rgb-glow),.14) 0%, transparent 60%);
}
.closer::after{ display:none; }
.closer__title{ font-size:var(--fs-bookend); line-height:1.02; max-width:14ch; }

/* footer de cuatro columnas */
.site-ftr{ background:var(--bg-alt); border-top:1px solid var(--line-soft); padding-block:clamp(48px, 6vw, 72px) 32px; }
.site-ftr__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap:clamp(28px, 4vw, 48px); }
.site-ftr__brand img{ height:28px; width:auto; }
.site-ftr__tag{ margin:16px 0 0; font-size:var(--fs-ui); line-height:1.6; color:var(--color-text-secondary); max-width:26ch; }
.site-ftr__h{
  margin:0 0 12px;
  font-family:var(--font-mono); font-size:var(--fs-label-xs);
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
}
.site-ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; font-size:var(--fs-ui); color:var(--color-text-secondary); }
.site-ftr li > a, .site-ftr li > span{ display:inline-block; padding-block:6px; }   /* area tactil */
@media (hover:hover){ .site-ftr a:hover{ color:var(--ink); } }
.site-ftr__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
  margin-top:clamp(36px, 5vw, 56px); padding-top:24px;
  border-top:1px solid var(--line-soft);
  font-family:var(--font-mono); font-size:var(--fs-label-xs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--color-text-secondary);
}

/* velo del hero: atado al bloque de texto, no a la altura del hero.
   El degradé arranca 12rem por encima del kicker y llega justo al kicker con
   la opacidad minima que mantiene todo legible: medida sobre los 24 s del
   video, el kicker y "See the work" piden .64, el scroll .60 y el titulo .52.
   De ahi para abajo queda parejo. */
.hero__bg--video::after{ display:none; }
.hero:has(.hero__bg--video) .hero__in::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-28rem;                        /* rampa larga: la transicion no se corta */
  bottom:-8rem;                      /* pasa el padding inferior; el hero recorta */
  left:50%; width:100vw;
  transform:translateX(-50%);
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(var(--rgb-bg),0)   0,
    rgba(var(--rgb-bg),.04) 7rem,
    rgba(var(--rgb-bg),.14) 13rem,
    rgba(var(--rgb-bg),.30) 19rem,
    rgba(var(--rgb-bg),.48) 24rem,
    rgba(var(--rgb-bg),.64) 28rem,        /* kicker. Medido sobre el reel V3 (38 s): */
    rgba(var(--rgb-bg),.66) 100%);        /* con .60/.62 "See the work" caia a 4.4:1 en 4 frames */
}

/* ---- cuatro bloques de "Who we work with": fila a todo el ancho ---- */
.cats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap:clamp(20px, 3vw, 40px);
  margin:clamp(36px, 5vw, 56px) 0 0;
}
.cats dt{
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  letter-spacing:.16em; text-transform:uppercase;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.cats dd{
  margin:16px 0 0;
  font-size:var(--fs-small); line-height:1.6;
  color:var(--color-text-secondary);
  max-width:30ch;
}

/* ---- frase suelta, centrada ---- */
/* Salto de linea de composicion: en pantallas angostas el titulo ya rompe solo
   y el <br> fijo dejaba un rag feo. display:none en un <br> anula el salto.
   El markup lleva un espacio ANTES del <br>: sin el, al ocultarlo las dos
   palabras quedan pegadas ("speedbrands"). */
.br-wide{ display:none; }
@media (min-width:900px){ .br-wide{ display:inline; } }

.statement-solo .h2{ max-width:none; text-wrap:nowrap; }
/* Cierre de about: mismo cuerpo y mismo interlineado que la frase de cierre de
   la home (.statement-solo). La unica diferencia es que esta entra en dos
   lineas, por eso balance en lugar del nowrap de aquella. */
.statement-bookend .h2{ max-width:none; text-wrap:balance; }
.statement-bookend{ padding-block:clamp(1rem, 3vw, 2.5rem); }
@media (max-width:1100px){ .statement-solo .h2{ text-wrap:balance; } }

/* ---- pausa del movimiento: video del hero, marquee y la linea de scroll ---- */
.hero__aside{ display:flex; align-items:center; gap:clamp(20px, 3vw, 36px); }
.hero__motion{
  font-family:var(--font-mono);
  font-size:var(--fs-label-sm); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink);
  padding-block:8px 4px;                      /* area tactil de 24px+ */
  border-bottom:1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
@media (hover:hover){ .hero__motion:hover{ color:var(--accent-lt); border-color:var(--accent-lt); } }
.motion-paused .marquee__track,
.motion-paused .hero__scroll span{ animation-play-state:paused; }

/* ---- pagina de proyecto: pieza vertical y clips en la galeria ---- */
.frame--portrait{ max-width:min(420px, 100%); margin-inline:auto; }
.frame--portrait video{ object-fit:contain; }
/* ---- Our Work: grilla de 3 / 2 / 1, titulo dentro de la imagen ---- */
.works{ grid-template-columns:1fr; gap:clamp(12px, 1.6vw, 20px); }
@media (min-width:600px){ .works{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1000px){ .works{ grid-template-columns:repeat(3, 1fr); } }
.works .work{ grid-column:auto; }
.works .work__media{ aspect-ratio:4/3; }
.works .work__media::after{ display:none; }
.works .work__info{
  position:absolute; inset:auto 0 0 0; z-index:1;
  margin:0; border:0;
  padding:clamp(48px, 6vw, 72px) clamp(14px, 1.4vw, 20px) clamp(12px, 1.2vw, 18px);
  /* la foto puede ser clara: el pie lleva su propio degrade y tinta fija */
  background:linear-gradient(to top, rgba(var(--rgb-deep),.92) 0%, rgba(var(--rgb-deep),.68) 50%, rgba(var(--rgb-deep),0) 100%);
  display:flex; flex-direction:row; align-items:flex-end; justify-content:space-between; gap:12px;
}
.works .work__title{ font-size:var(--fs-lead); line-height:1.1; color:var(--on-media); }
.works .work__client{ color:#C9C3E0; text-align:end; flex:0 1 auto; }
@media (hover:hover){ .works .work:hover .work__title{ color:var(--accent-lt); } }
.works__more{ display:flex; justify-content:center; margin:clamp(28px, 4vw, 48px) 0 0; }

/* video principal cuadrado en la pagina de proyecto */
.frame--square{ max-width:min(640px, 100%); margin-inline:auto; }
.frame--square video{ object-fit:contain; }

/* ---- Our Work: mosaico pegado (uno grande + uno mediano, despues cuatro) ----
   Sin separacion entre piezas. Cada portada se encuadra con object-position
   (campo cover.position en projects.js) para que el recorte no coma el producto. */
.works{ gap:0; grid-template-columns:1fr; }
/* Cada tamaño de tile lleva la proporcion de su portada (XL 16:9, LG 9:10,
   SM 5:6). Con un 16:9 para todos, las portadas verticales se partian al
   medio en mobile y tablet: el recorte se comia el producto. */
.works .work__media{ aspect-ratio:16/9; }
.works .work--lg .work__media{ aspect-ratio:9/10; }
.works .work--sm .work__media{ aspect-ratio:5/6; }
@media (min-width:640px){
  .works{ grid-template-columns:repeat(2, 1fr); }
  .works .work{ grid-column:auto; }          /* anula el span 6 del CSS base */
  .works .work--xl{ grid-column:1 / -1; }
}
@media (min-width:1080px){
  .works{ grid-template-columns:repeat(12, 1fr); }
  .works .work--xl{ grid-column:span 8; }
  .works .work--lg{ grid-column:span 4; }
  .works .work--sm{ grid-column:span 3; }
  .works .work--xl .work__media,
  .works .work--lg .work__media{ aspect-ratio:auto; height:clamp(340px, 34vw, 560px); }
  .works .work--sm .work__media{ aspect-ratio:auto; height:clamp(300px, 28vw, 440px); }
}
.works .work__media::after{ display:none; }
.works .work__info{
  position:absolute; inset:auto 0 0 0; z-index:1;
  margin:0; border:0;
  padding:clamp(40px, 5vw, 64px) clamp(14px, 1.4vw, 20px) clamp(12px, 1.2vw, 18px);
  background:linear-gradient(to top, rgba(var(--rgb-deep),.92) 0%, rgba(var(--rgb-deep),.68) 50%, rgba(var(--rgb-deep),0) 100%);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:6px;
}
.works .work__title{
  font-family:var(--font-mono); font-weight:500;
  font-size:var(--fs-label-sm); letter-spacing:.14em; text-transform:uppercase;
  line-height:1.4; color:var(--on-media);
}
.works .work__client{ text-align:start; }

/* grilla: solo la marca, en tinta plena */
.works .work__client{ color:var(--on-media); }
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ---- pagina de proyecto: encabezado a dos columnas ---- */
.pj-top{ display:grid; grid-template-columns:1fr; gap:clamp(2rem, 4vw, 3.5rem); }
@media (min-width:900px){
  .pj-top{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:start; }
  .pj-top .pj-meta{
    margin:0; padding:0 0 0 clamp(2rem, 4vw, 3.5rem);
    border-top:0; border-inline-start:1px solid var(--line-soft);
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

/* ---- mosaico de piezas: videos y fotos en la misma grilla ----
   Alto de fila fijo y azulejos que lo llenan: asi los de distinto ancho
   terminan a la misma altura y no quedan huecos en la fila. */
.mosaic{
  display:grid; grid-template-columns:repeat(12, 1fr);
  grid-auto-rows:clamp(220px, 26vw, 430px);
  gap:clamp(8px, 1vw, 14px);
}
.tile{ margin:0; grid-column:span 12; height:100%; }
@media (min-width:760px){
  .tile--12{ grid-column:span 12; }
  .tile--10{ grid-column:span 10; }
  .tile--8 { grid-column:span 8; }
  .tile--7 { grid-column:span 7; }
  .tile--6 { grid-column:span 6; }
  .tile--5 { grid-column:span 5; }
  .tile--4 { grid-column:span 4; }

}
.tile__btn{
  position:relative; display:block; width:100%; height:100%; padding:0;
  overflow:hidden; background:var(--surface);
}

.tile__btn img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.78);
  transition:transform .9s var(--ease), filter .5s var(--ease);
}
@media (hover:hover){
  .tile__btn:hover img{ transform:scale(1.03); filter:none; }
}

/* pie del azulejo: icono, nombre y formato */
.tile__info{
  position:absolute; inset:auto 0 0 0; z-index:1;
  display:flex; align-items:center; gap:clamp(10px, 1.2vw, 16px);
  padding:clamp(28px, 4vw, 48px) clamp(14px, 1.4vw, 20px) clamp(12px, 1.2vw, 18px);
  background:linear-gradient(to top, rgba(var(--rgb-deep),.93) 0%, rgba(var(--rgb-deep),.55) 55%, rgba(var(--rgb-deep),0) 100%);
  text-align:start;
}
.tile__icon{
  position:relative; flex:0 0 auto;
  width:clamp(34px, 3vw, 44px); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(var(--rgb-on-media),.5);
  background:rgba(var(--rgb-deep),.42);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.tile__icon--play::after{
  content:""; position:absolute; inset:50% auto auto 50%;
  transform:translate(-38%, -50%);            /* el triangulo se centra optico */
  border-style:solid; border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent var(--on-media);
}
/* la foto lleva un marco en vez del triangulo */
.tile__icon--img::after{
  content:""; position:absolute; inset:50% auto auto 50%;
  transform:translate(-50%, -50%);
  width:14px; height:11px; border:1.5px solid var(--on-media); border-radius:2px;
}
@media (hover:hover){
  .tile__btn:hover .tile__icon{ background:var(--accent); border-color:var(--accent); }
  .tile__btn:hover .tile__icon--play::after{ border-left-color:var(--on-accent); }
  .tile__btn:hover .tile__icon--img::after{ border-color:var(--on-accent); }
}
.tile__name{
  min-width:0;
  font-family:var(--font-display); font-weight:500;
  font-size:var(--fs-display-5); line-height:1.1;
  color:var(--on-media);
}
/* preview mudo que arranca al pasar el mouse */
.tile__preview{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
  transition:opacity .4s var(--ease);
}
.is-previewing .tile__preview{ opacity:1; }

/* el mismo video, ampliado en el overlay */
.lbox--video video{
  /* max-*, no width fija: el video entra con su proporcion, sin barras negras */
  max-width:min(1400px, 92vw); max-height:86vh;
  width:auto; height:auto;
  background:#000; outline:none;
}
/* el aspect-ratio en linea evita el salto mientras carga; el tamaño sale de
   los max-*, nunca de un alto fijo (eso metia barras negras en los 16:9) */

/* ---- pagina de proyecto: ritmo del encabezado ---- */
.pj-text .lead{ margin:0; }
.pj-copy{ margin-top:.75rem; }             /* la descripcion sigue a la bajada */
.pj-copy p{ margin-bottom:.7em; }          /* parrafos mas juntos */
.pj-copy p:last-child{ margin-bottom:0; }
.pj-hero{ padding-bottom:clamp(2rem, 4vw, 3.25rem); }   /* la pieza llega antes */
.pj-hero + section{ padding-top:0; }

/* =========================================================
   AMBIENTE  ·  brillo suave en las bandas oscuras
   Las bandas oscuras eran plano puro y se leian como bloques
   pegados. Un halo radial muy bajo (lila de --rgb-glow) les da
   profundidad y marca donde empieza y termina cada una.
   Va en ::after con z-index:-1 bajo un stacking context propio:
   queda sobre el fondo de la banda y debajo de todo el contenido,
   sin tocar el z-index de nada que ya exista.
   ========================================================= */
.section:not(.theme-light),
.page-hero,
.site-ftr{
  position:relative;
  isolation:isolate;
}
.section:not(.theme-light)::after,
.page-hero::after,
.site-ftr::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(75% 60% at 85% 0%,   rgba(var(--rgb-glow),.15), transparent 62%),
    radial-gradient(65% 55% at 5% 100%,  rgba(var(--rgb-glow),.09), transparent 66%);
}
/* espeja el halo: en bandas oscuras consecutivas evita que se repita
   siempre la misma esquina encendida */
.glow-flip::after{
  background:
    radial-gradient(75% 60% at 12% 0%,   rgba(var(--rgb-glow),.14), transparent 62%),
    radial-gradient(65% 55% at 95% 100%, rgba(var(--rgb-glow),.09), transparent 66%) !important;
}
/* el footer cierra la pagina: halo bajo y centrado, sin competir con el closer */
.site-ftr::after{
  background:radial-gradient(80% 90% at 50% 100%, rgba(var(--rgb-glow),.10), transparent 68%);
}
/* .hero (via .hero__bg::after) y .closer (via .closer::before) ya traen
   su propio halo, y ninguno de los dos lleva la clase .section: quedan
   fuera de las reglas de arriba a proposito. */

/* =========================================================
   PALETA ANTERIOR "NEBULA"  ·  html[data-palette="nebula"]
   Noche #1E1935 · profundo #16122B · niebla #F2EEFA · cian #5FD0EC · violeta #4B3BD6
   Queda para comparar: se enciende con ?palette=nebula y se apaga volviendo
   a ?palette=acido (o borrando el parametro guardado).
   ========================================================= */
html[data-palette="nebula"]{
  --rgb-bg:   30,25,53;
  --rgb-deep: 22,18,43;
  --rgb-on-media: 246,243,253;
  --rgb-glow: 122,150,230;
  --on-media: #F6F3FD;
}
html[data-palette="nebula"],
html[data-palette="nebula"] .theme-dark,
html[data-palette="nebula"] .how__card{
  --bg:        #1E1935;
  --bg-alt:    #16122B;
  --surface:   #262046;
  --ink:       #F6F3FD;           /* 15.38:1 */
  --color-text-secondary: #C9C3E0; /* 9.93:1 */
  --color-text-tertiary:  var(--color-text-secondary);
  --color-text-muted:     #B2ABCC; /* ~7.7:1 */
  --danger:       #FF8A80;
  --accent:       #5FD0EC;   /* cian */
  --on-accent:    #16122B;   /* 10.14:1 sobre cian */
  --accent-lt:    #5FD0EC;   /* 9.41:1 */
  --accent-hover: #F6F3FD;
  --dot:          #5FD0EC;
  --line:       rgba(246,243,253,.16);
  --line-input: rgba(246,243,253,.42);
  --line-soft:  rgba(246,243,253,.08);
}
html[data-palette="nebula"] .theme-light{
  --bg:        #F2EEFA;
  --bg-alt:    #FFFFFF;
  --surface:   #E6E1F4;
  --ink:       #16122B;                        /* 15.91:1 */
  --color-text-secondary: #59527A;             /* 6.31:1 */
  --color-text-tertiary:  var(--color-text-secondary);
  --color-text-muted:     #6A6390;             /* 4.84:1 */
  --danger:       #B42318;
  --accent:       #4B3BD6;   /* violeta */
  --on-accent:    #FFFFFF;
  --accent-lt:    #4B3BD6;   /* 6.35:1 */
  --accent-hover: #16122B;
  --dot:          #4B3BD6;
}
html[data-palette="nebula"] .hdr.is-stuck{ background:rgba(30,25,53,.82); }
html[data-palette="nebula"] .theme-light .label::before,
html[data-palette="nebula"] .theme-light .checklist li::before,
html[data-palette="nebula"] .theme-light .marquee__track > span::after{ background:var(--accent); }

/* La marca dentro del texto va escrita en la tipografia de la pagina, no como
   logo: el wordmark queda reservado para el header y el footer. */