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

:root{

  /* Aktiv Grotesk (Adobe Fonts) en los tres roles. El kit se carga en el
     <head> de cada página. Las tres variables quedan separadas a propósito:
     si algún día un rol vuelve a tener su propia familia, se cambia acá y
     no hay que tocar ninguna regla.
     "aktiv-grotesk" es el nombre que le da el kit; "Aktiv Grotesk" cubre
     el caso de tenerla instalada en la máquina. */
  --font-display: "aktiv-grotesk", "Aktiv Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Corte ANCHO, solo para titulares de sección. Es el recurso que usa Monks
     con la Helvetica Now Extended: el titular ocupa más caja sin pesar más. */
  --font-display-wide: "aktiv-grotesk-extended", var(--font-display);
  --font-body:    var(--font-display);
  --font-label:    var(--font-display);

  /* Escala tipográfica.

     Cada token es un ROL, no un elemento: --fs-display-2 es "titular de
     sección" y lo usan la home, services, about y las de proyecto. Tocarlo
     cambia las cuatro.

     clamp(mínimo, fluido, máximo): el primero manda en celular, el tercero
     en monitor grande, el del medio escala solo entre ambos. Por eso no hay
     media queries para tipografía.

     Medidos en el navegador a 1280×900, después del cambio a Aktiv Grotesk:
       display-1  66px   display-2  46px   display-3  38px
       display-4  28px   display-5  22px   bookend    66px
       lead       22px   body       18px   small      18px
       ui/label   15px   label-xs   14px

     display-1 depende también del ALTO de la ventana (8vh): en una pantalla
     baja da menos de 66px aunque el ancho sea el mismo. */
  /* Display — de mayor a menor. El hero es siempre el tope. */
  --fs-display-1: clamp(2.4rem, min(5.2vw, 8vh), 4.125rem);    /* hero, h1 de pagina   ~66px */
  --fs-display-2: clamp(1.75rem, 3.6vw, 3rem);                 /* titular de seccion   46px */
  --fs-display-3: clamp(1.6rem, 3vw, 2.5rem);                  /* item grande          38px */
  --fs-display-4: clamp(1.4rem, 2.2vw, 2.5rem);                /* item medio           28px */
  --fs-display-5: clamp(1.25rem, 1.8vw, 1.4rem);               /* titulo de tarjeta    22px */
  --fs-bookend:   clamp(2.4rem, 5.2vw, 4.125rem);              /* hero con video y cierre de la home, 38–66px */

  /* Texto */
  --fs-lead:      clamp(1.2rem, 1.05rem + .6vw, 1.4rem);       /* bajada de una linea  22px */
  --fs-body:      clamp(1.0625rem, 1rem + .25vw, 1.125rem);    /* prosa                ~18px */
  --fs-small:     clamp(1rem, .95rem + .2vw, 1.125rem);        /* tarjetas, notas      ~18px */
  --fs-ui:        .9375rem;                                    /* 15px — texto de interfaz: footer */

  /* Etiquetas. Monks no baja de 15px y no usa mayúsculas: estas ya no son
     "mono en caja alta", son texto chico en caja baja. */
  --fs-label:     .9375rem; /* 15px — eyebrows, numeradores, labels de campo */
  --fs-label-sm:  .9375rem; /* 15px — nav, botones, links con flecha, meta */
  --fs-label-xs:  .875rem;  /* 14px — piso: badges, dt, epigrafes, footer */

  /* Tracking. Monks va en normal en TODO, incluso a 166px: no cierra los
     titulares, deja que la letra respire su propio ancho. Quedan como tokens
     por si hay que cerrarlos: -.01em es lo primero que probaría. */
  --ls-xxl: normal;
  --ls-xl:  normal;
  --ls-lg:  normal;
  --ls-md:  normal;

  /* Pesos compartidos por rol: h1, titulares de seccion y nombres de item. */
  --fw-display-lg: 500;        /* h1 de pagina y cierres: siguen en Medium */
  --fw-section:    900;        /* titular de seccion — .h2 y .t-lg/.t-xl */
  --fw-item:       700;        /* nombre de item — h-list, svc, step */

  --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;
  /* El lila del logo (#AFACFA) sobre Nieve daba 1.95:1 y el punto pide 3:1 por
     ser texto grande. Este es el mismo hue bajado hasta pasar el umbral. */
  --dot:          #8A88C6;       /* Lila del logo, oscurecido · 3.07:1 */
  --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%;
}
/* El scroll suave NO arranca encendido: lo enciende main.js despues de resolver
   el #hash de entrada. Si estuviera desde el principio, entrar a index.html#work
   desde otra pagina se veria como un scroll largo bajando desde el hero, cuando
   lo que corresponde es aterrizar directo en Work. Ya estando en la home, el
   clic en Work si tiene que scrollear. */
html.scroll-suave{ 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); }
/* Work ya tiene espacio interior para el header: el salto empieza en su fondo
   oscuro, sin dejar a la vista la seccion clara anterior. */
#work{ scroll-margin-top:0; }

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:var(--ls-md);
  line-height:1.15;
  margin:0;
  text-wrap:balance;
}

/* Cada escalón trae su tracking y, en los dos grandes, su peso. Antes esto
   vivía suelto en cada clase y el mismo cuerpo terminaba con tracking
   distinto según la página. */
.t-hero{ font-size:var(--fs-display-1); letter-spacing:var(--ls-xxl); font-weight:var(--fw-display-lg); }
.t-xl  { font-size:var(--fs-display-2); letter-spacing:var(--ls-xl);  font-weight:var(--fw-section); font-family:var(--font-display-wide); }
.t-lg  { font-size:var(--fs-display-2); letter-spacing:var(--ls-xl);  font-weight:var(--fw-section); font-family:var(--font-display-wide); }
.t-md  { font-size:var(--fs-display-4); line-height:1; letter-spacing:var(--ls-lg); }

.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; }

/* Puntos de firma circulares, independientes del glifo de la tipografia.
   El texto conserva la puntuacion para lectores de pantalla y copiado. */
.dot{ color:var(--dot); }
.dot:not(.dot--text), .period{
  display:inline-block;
  width:.16em; height:.16em;
  border-radius:50%;
  background:currentColor;
  overflow:hidden;
  text-indent:1em;
  vertical-align:baseline;
}

.label{
  font-family:var(--font-label);
  font-size:var(--fs-label);
  font-weight:500;
  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), transform .25s var(--ease);
  border-bottom:1px solid transparent;
  /* el translate va contra el borde de arriba: sale por donde entro */
  will-change:transform;
}
/* Scroll hacia abajo: el header se va hacia arriba y devuelve pantalla.
   Vuelve apenas se scrollea para arriba. Lo maneja header() en main.js. */
.hdr.is-hidden{ transform:translateY(-100%); }
.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-label);
  padding-block:.5rem;          /* 24px minimo de area tactil */
  font-size:var(--fs-label-sm);
  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-label);
  font-size:var(--fs-label-sm); 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); color:var(--on-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:normal;
    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;
    /* will-change:transform tambien crea un marco para el panel fixed. */
    will-change:auto;
    transform: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__in{ position:relative; z-index:2; width:100%; }

.hero__kicker{
  font-family:var(--font-label);
  font-size:var(--fs-label);
  color:var(--color-text-tertiary);
  margin:0 0 clamp(1.5rem,3vw,2.5rem);
}
.hero__title{ margin:0; }

.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; }
@media (max-width:820px){ .hero__foot{ grid-template-columns:1fr } }
@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:normal;
  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;
  /* 300ms: el hover tiene que terminar mientras el cursor sigue encima.
     A 900ms uno ve una deriva lenta, no una respuesta. */
  transition:transform .3s var(--ease), filter .3s var(--ease), opacity .3s var(--ease);
}
/* La portada va en diferido: hasta que decodifica se ve el --surface del
   contenedor y la foto entraba de golpe. Con el fundido, el relleno gris pasa
   a ser el primer cuadro de la entrada en vez de un salto.
   Scoped a .js: si main.js no responde, el script del <head> saca esa clase y
   las fotos quedan visibles igual. */
.js .work__media img{ opacity:0; }
.js .work__media img.is-loaded{ opacity:1; }
.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-label);
  font-size:var(--fs-label-xs); 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:var(--ls-lg);
  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-label);
  font-size:var(--fs-label-sm); 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-label);
  font-size:var(--fs-label); color:var(--accent-lt); padding-top:.5rem;   /* texto chico: --accent da 3.10:1 */
}
.svc__name{
  font-family:var(--font-display);
  font-weight:var(--fw-item); letter-spacing:normal; 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:normal; line-height:1;
  color:var(--ink);
}
.stat__lbl{
  font-family:var(--font-label); font-size:var(--fs-label-xs);
  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:normal; 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-label); font-size:var(--fs-label-xs);
  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-label); font-size:var(--fs-label-xs);
  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-label); font-size:var(--fs-label-sm);
  padding-block:.5rem;
  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-label); font-size:var(--fs-label-xs);
  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-label); font-size:var(--fs-label-sm);
  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-label); font-size:var(--fs-label-xs);
  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-label); font-size:var(--fs-label-sm);
  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 400ms var(--ease), transform 400ms 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:var(--ls-xxl); font-weight:var(--fw-display-lg); }
/* .t-mega para frases cortas y contundentes */
.t-mega{ font-size:var(--fs-display-1); letter-spacing:var(--ls-xxl); font-weight:var(--fw-display-lg); }

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

.eyebrow{
  font-family:var(--font-label);
  font-size:var(--fs-label);
  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-label);
  font-size:var(--fs-label-sm); 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-label);
  font-size:var(--fs-label-sm); 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 ---------- */
/* Linea que presenta la lista de entregables. Va arriba del <ul>, en la misma
   columna, para que no quede separada de lo que anuncia. */
/* flecha de enlace externo */
.ext{ margin-inline-start:.35em; font-size:.85em; vertical-align:.05em; }

.checklist__intro{
  margin:0 0 1rem;
  font-size:var(--fs-small);
  color:var(--color-text-secondary);
}
.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-label);
  font-size:var(--fs-label-sm); 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-label);
  font-size:var(--fs-label); line-height:1.7;
  color:var(--accent-lt);
  max-width:64ch;
}
.todo b{ display:block; font-weight:500; 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-label); font-size:var(--fs-label);
  color:var(--color-text-muted); margin-bottom:1rem;
}
.step__name{
  font-family:var(--font-display); font-weight:var(--fw-item);
  letter-spacing:var(--ls-lg); 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-label); font-size:var(--fs-label);
  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-label); font-size:var(--fs-label);
  color:var(--color-text-tertiary);
}
.field label .opt{ color:var(--color-text-muted); text-transform:none; }
.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-label); font-size:var(--fs-label-sm);
  color:var(--color-text-muted); margin:0; max-width:42ch;
}
.form__status{
  grid-column:1 / -1; margin:0;
  font-family:var(--font-label); font-size:var(--fs-label-sm); 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;
  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;
}
/* El bloque de contacto directo se fue al footer, asi que el formulario queda
   solo: una columna, con un ancho que no estire los campos de lado a lado. */
.contact-layout .form{ max-width:46rem; }
.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-label); font-size:var(--fs-label-xs);
  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:normal;
  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"); }

/* ---------- hero con video de fondo ---------- */
.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
/* Header de la home: transparencia y desenfoque sobre el reel. */
.hero:has(.hero__bg--video) .hero__kicker{ color:var(--ink); }
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);
}
body:has(.hero__bg--video) .hdr:not(.is-stuck) .nav a{ color:var(--ink); }
@media (max-width:760px){
  .hero:has(.hero__bg--video){ justify-content:flex-end; }
}

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

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

/* ---- hero: video de fondo, titulo apoyado abajo ---- */
.hero__title{
  font-size:var(--fs-bookend);
  line-height:1.15;
  letter-spacing:var(--ls-xxl);
  font-weight:var(--fw-display-lg);
}
@media (max-width:759px){ .hero__title{ line-height:1.08; } }
.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-label);
  font-size:var(--fs-label-sm); 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-wide); font-weight:var(--fw-section);
  font-size:var(--fs-display-2);
  line-height:1.15; letter-spacing:var(--ls-xl);
  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-label); font-size:var(--fs-label);
  color:var(--color-text-muted); padding-top:8px;
}
.h-list__name{
  font-family:var(--font-display); font-weight:var(--fw-item);
  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-label); font-size:var(--fs-label); color:var(--color-text-muted); padding-top:10px; }
.h-svc__name{
  font-family:var(--font-display); font-weight:var(--fw-item);
  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 con una variacion tonal amplia, sin formas decorativas. */
.closer{ background:var(--bg-alt); border-top:0; }
/* La opacidad baja evita que el brillo se lea como una pieza grafica. */
.closer::before{
  inset:0; height:auto;
  background:
    radial-gradient(85% 115% at 12% 105%, rgba(var(--rgb-glow),.07) 0%, transparent 72%),
    radial-gradient(65% 85% at 92% -10%, rgba(var(--rgb-glow),.04) 0%, transparent 75%);
}

/* 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-label); font-size:var(--fs-label-xs);
  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, .site-ftr li > [data-mail]{ display:inline-block; padding-block:6px; }   /* area tactil */
/* Contacto del pie: la etiqueta va arriba y el handle debajo, igual que en el
   resto del sitio. El par se separa del item de al lado para que se lea como
   bloque y no como una lista corrida. */
.site-ftr__pair{ margin-top:.9rem; }
/* El selector va con .site-ftr li delante a proposito: `.site-ftr li > span`
   ya declara inline-block y le gana en especificidad a una clase sola. */
.site-ftr li > .site-ftr__label{
  display:block;
  font-family:var(--font-label); font-size:var(--fs-label-xs);
  color:var(--color-text-muted);
  padding-block:0;
  margin-bottom:.15rem;
}
@media (hover:hover){ .site-ftr a:hover, .site-ftr [data-mail]: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-label); font-size:var(--fs-label-xs);
  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" necesitan mas velo que el titulo.
   De ahi para abajo queda parejo. */
.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-label);
  font-size:var(--fs-label);
  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; } }

/* +10% sobre el titular de seccion: el brief pide mas presencia, y el nowrap
   la mantiene en una linea en desktop. */
.statement-solo .h2{ max-width:none; text-wrap:nowrap; font-size:calc(var(--fs-display-2) * 1.1); }
/* 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 y marquee ---- */
.hero__aside{ display:flex; align-items:center; gap:clamp(20px, 3vw, 36px); }
/* Control de pausa: solo icono, discreto. El area de click es de 40px aunque
   el dibujo mida 12, para que siga siendo comodo de tocar. */
.hero__motion{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  color:var(--on-media);
  border:1px solid rgba(var(--rgb-on-media),.55);
  border-radius:50%;
  background:rgba(var(--rgb-bg),.62);
  transition:background .25s var(--ease);
}
.hero__motion-icon{ width:18px; height:18px; fill:currentColor; }
.hero__motion-play{ display:none; }
.motion-paused .hero__motion-pause{ display:none; }
.motion-paused .hero__motion-play{ display:block; }
@media (hover:hover){ .hero__motion:hover{ background:rgba(var(--rgb-bg),.85); } }
.motion-paused .marquee__track{ 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__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-label); font-weight:500;
  font-size:var(--fs-ui); 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 .3s var(--ease), filter .3s var(--ease), opacity .3s var(--ease);
}
.js .tile__btn img{ opacity:0; }
.js .tile__btn img.is-loaded{ opacity:1; }
@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),.05), transparent 72%),
    radial-gradient(65% 55% at 5% 100%,  rgba(var(--rgb-glow),.03), transparent 76%);
}
/* 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),.05), transparent 72%),
    radial-gradient(65% 55% at 95% 100%, rgba(var(--rgb-glow),.03), transparent 76%) !important;
}
/* Secciones claras: la misma idea pero aun mas suave. Sobre Nieve un .025 de
   lila es casi imperceptible — justo lo que pide el brief — y alcanza para que
   el plano no se lea completamente uniforme. */
.section.theme-light{ position:relative; isolation:isolate; }
.section.theme-light::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(70% 55% at 88% 0%,  rgba(var(--rgb-glow),.025), transparent 74%),
    radial-gradient(60% 50% at 8% 100%, rgba(var(--rgb-glow),.015), transparent 78%);
}

/* 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),.04), transparent 78%);
}
/* .hero (via .hero__in::before) 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. */

/* Punto final de la marca: se agrega al wordmark actual sin modificarlo. */
.brand, .site-ftr__brand{
  --logo-mark-height:clamp(24px,2.4vw,32px);
  display:inline-flex;
  align-items:flex-end;
  gap:calc(var(--logo-mark-height) * .1);
}
.site-ftr__brand{ --logo-mark-height:28px; }
.brand::after, .site-ftr__brand::after{
  content:"";
  flex:0 0 auto;
  width:calc(var(--logo-mark-height) * .3);
  height:calc(var(--logo-mark-height) * .3);
  margin-block-end:calc(var(--logo-mark-height) * .02);
  border-radius:50%;
  background:#7C5ACB;
}

/* Copiar email: mismo aspecto que el dato de contacto y aviso accesible. */
[data-mail]{ padding-inline:0; text-align:start; }
.email-copy-status{
  position:fixed;
  z-index:200;
  inset:auto 1rem max(1rem, env(safe-area-inset-bottom));
  width:fit-content;
  max-width:calc(100% - 2rem);
  margin-inline:auto;
  padding:.85rem 1.25rem;
  border:1px solid var(--line-soft);
  border-radius:12px;
  background:var(--bg);
  color:var(--ink);
  box-shadow:0 8px 32px rgba(0,0,0,.25);
  font-size:var(--fs-ui);
  text-align:center;
  overflow-wrap:anywhere;
  visibility:hidden;
  pointer-events:none;
}
.email-copy-status.is-visible{ visibility:visible; }
.email-copy-field{ position:fixed; top:0; left:0; width:1px; height:1px; padding:0; opacity:0; }