/* =====================================================================
   MOXEN — sitio estilo SIRNIK
   Réplica de la estructura y las animaciones de https://www.sirnik.co/
   con el contenido de Moxen. Tokens, escalas y medidas calcadas de su
   hoja de estilos de producción; el código es reimplementación propia.

   Índice
   01 Tokens y reset          06 Works (lista + panel fijo)
   02 Tipografía              07 Título horizontal
   03 Layout base             08 Servicios (tarjetas 3D)
   04 Navegación              09 Equipo · testimonios · formulario
   05 Hero · About            10 Footer · loader · responsive
   ===================================================================== */

/* ── 01 · Tokens y reset ───────────────────────────────────────────── */
/* Dos temas. Los nombres de token no cambian: cambia su valor, así que
   todo el resto de la hoja funciona igual en claro y en oscuro.
   Orden: oscuro por defecto → claro si el sistema lo pide → la elección
   manual (data-theme en <html>) manda sobre ambos. */
:root {
  color-scheme: dark;
  --black: #000;              /* texto sobre superficies invertidas */
  --bg: #0a0a0a;              /* fondo del sitio */
  --main-black: #191919;      /* superficies elevadas */
  --white: #e3e3e3;           /* texto principal (no es blanco puro) */
  --pure: #fff;               /* texto y superficies de contraste máximo */
  --soft: rgba(255, 255, 255, .6);   /* texto secundario */
  --dim: #353535;             /* títulos inactivos de trabajos */
  --muted: #8a8a8a;
  --line: rgba(227, 227, 227, .14);
  --grey-1: #3f3f3f;          /* tarjeta de servicio 3 */
  /* El menú va en negativo de lo que pase por detrás, y el negativo de un
     gris del 50 % es ese mismo gris: sobre #818181 daba 1,04:1, invisible.
     Este claro lo deja en 9,55:1 sin tocar el texto de la tarjeta. */
  --grey-2: #d4d4d4;          /* tarjeta de servicio 2 */
  --grey-2-fg: #0a0a0a;       /* claro de fondo, texto oscuro */
  --panel-line: rgba(0, 0, 0, .18);  /* dentro de la tarjeta invertida */
  --panel-soft: rgba(0, 0, 0, .5);
  --panel-hint: rgba(0, 0, 0, .42);
  --panel-ring: rgba(0, 0, 0, .25);
  --shot-bg: rgba(0, 0, 0, .15);
  --overlay: linear-gradient(180deg, rgba(10,10,10,.55), rgba(10,10,10,.85));
  --watermark: rgba(227, 227, 227, .055);
  --reveal-block: 60, 60, 60;   /* bloque que barre el texto al revelarlo */
  --loader-bg: #080808;
  --loader-fg: #fff;
  --logo-filter: none;        /* el wordmark ya viene claro */
  --mark-filter: invert(1);   /* la M sobre el círculo de contraste */

  --pad: 1.25rem;
  --nav-h: 13.5rem;
  /* Los rótulos en monoespaciada (kicker, números de paso, categorías). En
     Windows no hay SF Mono ni Menlo y `ui-monospace` solo lo entiende
     Safari: sin Consolas caía en Courier New. */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* paleta clara: mismos papeles, valores invertidos */
:root[data-theme="light"] {
  color-scheme: light;
  --black: #fff;
  --bg: #eeeeee;
  --main-black: #dcdcdc;
  --white: #1d1812;
  --pure: #0a0a0a;
  --soft: rgba(29, 24, 18, .62);
  --dim: #c3c0bb;
  --muted: #6b665f;
  --line: rgba(29, 24, 18, .16);
  --grey-1: #d7d5d1;
  --grey-2: #c9c6c1;
  --grey-2-fg: #1d1812;
  --panel-line: rgba(255, 255, 255, .22);
  --panel-soft: rgba(255, 255, 255, .55);
  --panel-hint: rgba(255, 255, 255, .45);
  --panel-ring: rgba(255, 255, 255, .3);
  --shot-bg: rgba(255, 255, 255, .12);
  --overlay: linear-gradient(180deg, rgba(238,238,238,.5), rgba(238,238,238,.86));
  --watermark: rgba(29, 24, 18, .07);
  --reveal-block: 186, 184, 180;
  --loader-bg: #eeeeee;
  --loader-fg: #0a0a0a;
  --logo-filter: invert(1);
  --mark-filter: none;
}

/* Mientras llega General Sans (Fontshare, font-display: swap) se pinta con
   Arial ajustada a sus medidas: el texto ocupa casi lo mismo y, al cambiar
   de fuente, los filtros, botones y títulos no saltan de línea (CLS). Arial
   no tiene 500: el 500 sale de la regular y el 600 de la negrita, cada una
   con su ajuste (medido sobre un párrafo del sitio). */
@font-face {
  font-family: "General Sans Respaldo"; src: local("Arial"), local("ArialMT");
  font-weight: 100 549; size-adjust: 99.5%; ascent-override: 101.5%; descent-override: 24.1%; line-gap-override: 0%;
}
@font-face {
  font-family: "General Sans Respaldo"; src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 550 900; size-adjust: 97.8%; ascent-override: 103.3%; descent-override: 24.5%; line-gap-override: 0%;
}

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

/* Escala fluida de la referencia: TODO el sitio se mide en rem y la raíz
   crece con el ancho de pantalla, así que las proporciones se mantienen
   idénticas en cualquier monitor. En móvil se fija a 16px. */
html {
  -webkit-text-size-adjust: 100%;
  font-size: 0.83vw;
}
@media (max-width: 1920px) { html { font-size: 0.83vw; } }
@media (max-width: 1440px) { html { font-size: 0.93vw; } }
@media (max-width: 767px)  { html { font-size: 16px; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: "General Sans", "General Sans Respaldo", "Inter", system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 115%;
  letter-spacing: -.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* bloquea el scroll mientras corre el loader */
/* El hueco de la barra de scroll se reserva siempre: si aparece a mitad
   de la entrada, el ancho cambia y la marca se recalcula a otro cuerpo. */
html { scrollbar-gutter: stable; }
/* `clip` y no `hidden`: recorta lo que se sale de lado —las palabras que
   entran desde fuera— sin crear un contenedor de scroll que rompería los
   anclajes de las secciones. */
body { overflow-x: clip; }

html.is-preloading, html.is-preloading body { overflow: hidden; height: 100%; }
/* Mientras la marca se escribe no se baja: la clase la pone y la quita el
   JS solo en la portada, así que las demás páginas no se ven afectadas. */
html.is-quieto, html.is-quieto body { overflow: hidden; height: 100%; }

/* ── 02 · Tipografía ───────────────────────────────────────────────
   Tamaños en rem calcados de la referencia; con la raíz fluida de arriba
   dan exactamente sus mismos píxeles a cada ancho. */
.h1 {
  margin: 0; color: var(--pure);
  font-size: 7.375rem; font-weight: 500; line-height: 85%; letter-spacing: -.03em;
}
.h1.is-hero { max-width: 95%; font-size: 7rem; }
/* titulares de sección */
.h2 { margin: 0; color: var(--pure); font-size: 4.375rem; font-weight: 600; line-height: 90%; letter-spacing: -.045em; }
.h2.is-team { font-size: 10.25rem; line-height: 85%; letter-spacing: -.07em; }
.h2.is-form { font-size: 4rem; line-height: 85%; letter-spacing: -.05em; color: var(--black); }
.h2.is-slide { font-size: 18vh; line-height: 85%; letter-spacing: -.07em; max-width: 66%; }
.h3 { margin: 0; font-size: 1.125rem; font-weight: 500; line-height: 100%; letter-spacing: -.02em; }
.p  { margin: 0; font-size: 1.125rem; font-weight: 500; line-height: 115%; letter-spacing: -.02em; color: var(--soft); }
.p.white { color: var(--pure); }
.p.is-lg { font-size: 1.5rem; line-height: 115%; }
.label { font-size: 1.125rem; font-weight: 500; line-height: 115%; letter-spacing: -.02em; color: var(--soft); }
.num { font-variant-numeric: tabular-nums; }

/* ── 03 · Layout base ──────────────────────────────────────────────── */
.padding-global { padding-left: var(--pad); padding-right: var(--pad); }
.container-global { width: 100%; max-width: 120rem; margin: 0 auto; }
.container-global.h-100 { height: 100%; }
.divider { height: 1px; background: var(--line); width: 100%; }

/* ── 04 · Navegación ───────────────────────────────────────────────── */
.nav_wrapper {
  position: absolute; inset: 0 0 auto 0; z-index: 20;
  min-height: var(--nav-h); padding-top: var(--pad);
}
.nav_contain {
  display: grid; grid-template-columns: 26rem 1fr 1fr auto;
  gap: 1.25rem; align-items: start;
}
.nav_actions { display: flex; align-items: center; gap: .75rem; justify-self: end; }
/* el logotipo real de Moxen, a la misma anchura de columna que la referencia */
.nav_logo { display: block; width: 100%; max-width: 26rem; }
.nav_logo .wordmark { width: 22rem; height: auto; filter: var(--logo-filter); }
.nav_col { display: flex; flex-direction: column; gap: .35rem; }
.nav_link { font-size: 1.125rem; letter-spacing: -.03em; color: var(--white); position: relative; width: fit-content; }
.nav_link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s var(--ease-out);
}
.nav_link:hover::after { transform: scaleX(1); }
.nav_link .soft { color: var(--muted); }
.nav_cta {
  border: 1px solid var(--line); border-radius: 500rem;
  padding: .5rem 1.1rem; font-size: 1.125rem; letter-spacing: -.02em; color: var(--pure);
  transition: background .35s var(--ease-out), color .35s var(--ease-out);
}
.nav_cta:hover { background: var(--white); color: var(--black); }
.nav_burger { display: none; }

/* ── 04b · Botón de tema ───────────────────────────────────────────
   Un solo botón redondo, del alto de la píldora de idiomas. Enseña el
   tema al que lleva: el sol en oscuro, la luna en claro. Al pulsarlo los
   iconos se relevan girando. Sin JS no se muestra. */
.theme-switch {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: calc(2.15rem + 2px); height: calc(2.15rem + 2px); padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 72%, transparent); color: var(--pure);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer; line-height: 0;
  transition: border-color .35s var(--ease-out), background .35s var(--ease-out);
}
html:not(.js) .theme-switch { display: none; }
.theme-switch:hover { border-color: var(--soft); }
.theme-switch:focus-visible { outline: 2px solid var(--pure); outline-offset: 2px; }
.theme-switch svg {
  grid-area: 1 / 1; width: 1rem; height: 1rem; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity .35s var(--ease-out), transform .5s var(--ease-out);
}
:root[data-theme="dark"]  .theme-switch .i-moon,
:root[data-theme="light"] .theme-switch .i-sun { opacity: 0; transform: rotate(-90deg) scale(.4); }
.theme-switch:hover .i-sun { transform: rotate(45deg); }
.theme-switch:hover .i-moon { transform: rotate(-15deg); }
:root[data-theme="dark"]  .theme-switch:hover .i-moon,
:root[data-theme="light"] .theme-switch:hover .i-sun { transform: rotate(-90deg) scale(.4); }

/* ── Selector de idioma ─────────────────────────────────────────────
   Junto al interruptor de tema y con su misma forma: una píldora con
   ES · EN · FR. Va fijo en la pantalla y assets/js/idioma.js lo coloca a
   la izquierda del interruptor, esté arriba (escritorio), abajo (teléfono)
   o en la barra de las páginas interiores. */
.idioma-switch {
  position: fixed; left: 0; top: 0; z-index: 40;
  display: inline-flex; align-items: center; gap: .1rem;
  padding: .3rem; border: 1px solid var(--line); border-radius: 500rem;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color .35s var(--ease-out), opacity .35s var(--ease-out);
}
html:not(.js) .idioma-switch { display: none; }
.idioma-switch:hover { border-color: var(--soft); }
.idioma-switch button {
  height: 1.55rem; min-width: 2rem; padding: 0 .45rem; border: 0; border-radius: 500rem; cursor: pointer;
  background: none; color: var(--soft);
  font: 500 .68rem/1 "General Sans", system-ui, sans-serif; letter-spacing: .06em;
  transition: background-color .25s, color .25s;
}
.idioma-switch button:hover { color: var(--pure); }
.idioma-switch button.is-on { background: var(--line); color: var(--pure); }
.idioma-switch button:focus-visible { outline: 2px solid var(--pure); outline-offset: 1px; }

/* El cambio de tema se funde, no salta.
   1) Si el navegador tiene View Transitions, se hace un fundido cruzado de
      toda la página (lo más limpio: nada parpadea ni se recalcula).
   2) Si no, se activa `theme-anim` durante medio segundo, que pone una
      transición de color a todo el árbol y luego se retira, para no dejar
      transiciones permanentes que estorben al resto de animaciones. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .5s;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  mix-blend-mode: normal;
}
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .5s var(--ease-out),
              background-image .5s var(--ease-out),
              color .5s var(--ease-out),
              border-color .5s var(--ease-out),
              box-shadow .5s var(--ease-out),
              fill .5s var(--ease-out),
              stroke .5s var(--ease-out) !important;
}
/* el logotipo se invierte con filter: se funde aparte */
.nav_logo .wordmark, .intro_mark img { transition: filter .5s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  html.theme-anim, html.theme-anim * { transition: none !important; }
  .theme-switch svg { transition: none; }
}

/* ── 05 · Hero: arco de trabajos que gira ──────────────────────────
   Réplica del carrusel circular de coveomusic.com. Cada tarjeta se
   coloca por ángulo con --item / --itemCount (trigonometría en CSS) y
   el conjunto gira una vuelta completa cada 120 s. Al pasar el cursor
   sobre una, la de al lado también crece: la amplitud decae de forma
   exponencial con la distancia circular, así se propaga como una onda.
   ------------------------------------------------------------------ */
.section_hero { position: relative; z-index: 2; background: var(--bg); }
.carouselContainer {
  position: relative; width: 100%; height: 100svh; overflow: hidden;
}
/* marca de agua de fondo */
.heroScript {
  position: absolute; left: 50%; top: 6%;
  transform: translateX(-50%) rotate(-10deg);
  width: 110vw; text-align: center; pointer-events: none; z-index: 0;
  transition: opacity 1s ease, filter .75s ease;
}
.heroScript span {
  font-size: 22vw; font-weight: 500; letter-spacing: -.05em; line-height: .8;
  color: var(--watermark);
}
.carouselContainer:has(.release:hover) .heroScript { opacity: .8; filter: blur(8px); }

/* texto lateral rotado: el giro vive en el envoltorio para que la
   animación de entrada (que escribe transform) no lo borre */
.side-text-wrap {
  position: absolute; left: 3.75rem; top: 50%; z-index: 3; width: 26rem;
  transform-origin: 0 50%;
  transform: rotate(-90deg) translate(-50%, 0);
}
.side-text {
  max-width: 25rem; margin: 0; color: var(--soft);
  font-size: 1.125rem; line-height: 130%; letter-spacing: -.02em;
}
.side-text span { color: var(--pure); }

/* el círculo */
.carousel {
  --diameter: 120vh;
  --radius: calc(var(--diameter) / 2);
  --carouselScale: 1;
  position: absolute; top: 20%; left: 50%;
  width: var(--diameter); height: var(--diameter); border-radius: 50%;
  z-index: 1;
  animation: heroSpin 120s infinite linear;
}
@keyframes heroSpin {
  from { transform: translateX(-50%) rotate(45deg)  scale(var(--carouselScale)); }
  to   { transform: translateX(-50%) rotate(405deg) scale(var(--carouselScale)); }
}
/* cada tarjeta, colocada por trigonometría */
.carousel .release {
  --artworkSize: calc(calc(220 / var(--itemCount)) * 1vh);
  --amp: 0; --itemDelay: 0s; --itemOpacity: 1; --itemBlur: 0px;
  --step: calc((2 * pi) / var(--itemCount));
  --angle: calc(var(--step) * var(--item));
  --x: calc(var(--diameter) / 2 + var(--radius) * cos(var(--angle)) - var(--artworkSize) / 2);
  --y: calc(var(--diameter) / 2 + var(--radius) * sin(var(--angle)) - var(--artworkSize) / 2);
  position: absolute; left: var(--x); top: var(--y);
  width: var(--artworkSize); height: var(--artworkSize);
  padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  perspective: 500px;
  transform: rotate(calc(360deg / var(--itemCount) * var(--item) + 90deg)) scale(calc(1 + var(--amp)));
  transition: transform .35s var(--itemDelay) cubic-bezier(.3, -.46, .6, 2.1),
              opacity 1s ease, filter .75s ease;
}
.carousel .release img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 24%;
  opacity: 0; transform: translate3d(0, 0, -100px);
  transition: transform var(--animation-duration) var(--animation-delay) cubic-bezier(.25, 1, .5, 1),
              opacity var(--animation-duration) var(--animation-delay) ease;
}
.carousel .release img.animated { opacity: 1; transform: translate3d(0, 0, 0); }
/* punto bajo la tarjeta al pasar el cursor */
.carousel .release::after {
  content: ""; position: absolute; bottom: -1.5rem; left: 50%;
  width: 8px; height: 8px; border-radius: 50%; transform: translateX(-50%);
  background: var(--muted); opacity: 0; transition: opacity .4s ease;
}
.carousel .release:hover::after { opacity: 1; }
/* las demás se atenúan y desenfocan según su distancia */
.carouselContainer:has(.release:hover) .release:not(:hover) {
  opacity: var(--itemOpacity); filter: blur(var(--itemBlur));
}

/* centro: marca + rótulo */
.intro {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
}
.intro_mark {
  width: 6.25rem; height: 6.25rem; border-radius: 50%;
  background: var(--pure); display: grid; place-items: center; overflow: hidden;
}
.intro_mark img { width: 55%; height: auto; filter: var(--mark-filter); }
.intro_text { text-align: center; display: flex; flex-direction: column; gap: .35rem; }
.intro_title { margin: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: .06em; color: var(--pure); }
.intro_sub { margin: 0; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; color: var(--soft); }

/* titular inferior */
.hero_headline {
  position: absolute; left: 0; right: 0; bottom: clamp(1.5rem, 5vh, 4rem);
  z-index: 3; text-align: center; pointer-events: none;
}
.hero_kicker { margin: 0 0 .4rem; font-size: 1rem; letter-spacing: .12em; color: var(--soft); }
.hero_headline .h1 { text-align: center; max-width: none; }

/* indicador de scroll */
.scroll {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
  z-index: 15; font-size: 1rem; letter-spacing: .18em; color: var(--soft);
  pointer-events: none;
}

/* hero en móvil: el círculo se centra y el texto lateral se oculta,
   igual que en la referencia */
@media (max-width: 991px) {
  .side-text-wrap { display: none; }
  .carousel {
    --diameter: 105vh;
    top: 50%;
    animation: heroSpinMobile 120s infinite linear;
  }
  @keyframes heroSpinMobile {
    from { transform: translate(-50%, -50%) rotate(0deg)   scale(var(--carouselScale)); }
    to   { transform: translate(-50%, -50%) rotate(360deg) scale(var(--carouselScale)); }
  }
  .heroScript span { font-size: 34vw; }
  .intro_mark { width: 4.5rem; height: 4.5rem; }
  .hero_headline .h1 { font-size: 3rem; }
}

/* ── 05b · About: palabras que se compactan ────────────────────────── */
.section_about { position: relative; background: var(--bg); }
.pin-height { height: 300vh; }
.container-global.is-about {
  position: sticky; top: 0; height: 100svh;
  display: flex; align-items: center; justify-content: flex-start; overflow: hidden;
}
.about-text {
  color: var(--pure); max-width: 76rem;
  font-size: 3.25rem;
  font-weight: 500; line-height: 110%; letter-spacing: -.02em;
}
/* cada palabra entra desde 100vw a la derecha y vuelve a su sitio con el scroll */
.section_about .word { display: inline-block; transform: translate(100vw, 0); will-change: transform; }
html:not(.js) .section_about .word { transform: none; }

/* ── 05c · Enfoque (imagen + notas) ────────────────────────────────── */
.section_approach { position: relative; padding: 8rem 0 10rem; }
.approach_grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 5rem; align-items: stretch; }
.approach_media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--main-black); }
.approach_media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.approach_notes { display: flex; flex-direction: column; justify-content: center; gap: 4rem; }
.approach_note { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: start; }
.approach_note p { max-width: 22rem; color: var(--pure); font-size: 1.125rem; line-height: 115%; letter-spacing: -.02em; }
.approach_note .tag { color: var(--soft); font-size: 1.125rem; letter-spacing: -.02em; }

/* ── 06 · Trabajos (spotlight de victorfuruya.com) ─────────────────
   Una sola imagen a la izquierda y la lista a la derecha. El bloque de
   títulos se desplaza mientras la sección queda anclada; el que pasa
   por el centro se ilumina y cambia la imagen. Medidas de la
   referencia: lista en 46vw, imagen en 30vw con proporción 270/153.
   ------------------------------------------------------------------ */
.section_works {
  position: relative; width: 100%; height: 100svh; overflow: hidden;
}
.spotlight-titles-container {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden;
}
.spotlight-titles {
  position: relative; left: 46vw; width: fit-content;
  display: flex; flex-direction: column; gap: clamp(.25rem, 1vh, .5rem);
  z-index: 2;
}
.spotlight-focus-label {
  color: var(--soft); font-size: 1rem; font-weight: 500;
  letter-spacing: -.02em; margin-bottom: -.5rem; pointer-events: none;
}
.h2_works {
  margin: 0; color: var(--pure);
  font-size: clamp(2rem, 5vw, 4rem);
  /* fuera del centro va en gris y de trazo normal; al llegar al centro se
     pone en negrita, y solo entonces sale su imagen */
  font-weight: 500; line-height: 1; letter-spacing: -.05em;
  white-space: nowrap; display: flex; align-items: center;
  opacity: .3;
  cursor: pointer;
  transition: font-weight .25s var(--ease-out);
}
.h2_works.is-active { opacity: 1; font-weight: 700; }
html:not(.js) .h2_works { opacity: 1; }
/* la ficha desplegable solo existe en el acordeón móvil */
.work_h2-case { display: none; }

.spotlight-images {
  position: absolute; top: 50%; left: 27vw; transform: translate(-50%, -50%);
  width: clamp(220px, 29vw, 500px); height: auto; aspect-ratio: 270 / 153;
  z-index: 1; pointer-events: none;
  clip-path: inset(100% 0 0 0);
  transition: clip-path .6s cubic-bezier(.76, 0, .24, 1);
}
.spotlight-images.active { clip-path: inset(0 0 0 0); }
.spotlight-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; will-change: transform;
}
.spotlight-img img, .spotlight-img video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── 07 · Intro de servicios: símbolo gigante de fondo ─────────────── */
.section_disciplines {
  position: relative; overflow: hidden;
  min-height: 100svh; display: flex; align-items: flex-end;
  padding-bottom: 4rem; padding-top: 12vh;
}
/* la marca llena la pantalla y el texto se apoya encima */
.disciplines_mark {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: min(74vw, 82vh); height: auto; pointer-events: none;
}
/* el titular se mezcla con la marca: sobre el trazo blanco se invierte a
   negro, así se lee siempre sin tapar el símbolo (mix-blend-mode de la
   referencia en .h2_services). */
.disciplines_grid .h2 { mix-blend-mode: difference; color: var(--pure); }
.section_disciplines .padding-global { position: relative; z-index: 2; width: 100%; }
.disciplines_grid {
  display: grid; grid-template-columns: 1.6fr 1fr;
  gap: 5rem; align-items: end; margin-top: 1.5rem;
}
.disciplines_grid .h2 { max-width: 18ch; }
.disciplines_grid .p { max-width: 26rem; }

/* ── 07b · Título con scroll horizontal ────────────────────────────
   Módulo del mismo sistema, activo solo en páginas que incluyan
   .section_long-title (la home no lo usa, igual que en la referencia). */
.section_long-title { position: relative; overflow: hidden; }
.section_long-title .container-global { display: flex; align-items: center; height: 100svh; }
.long-title {
  color: var(--pure); white-space: nowrap;
  font-size: clamp(4rem, 15.5vw, 15.5rem);
  font-weight: 500; line-height: 100%; letter-spacing: -.05em;
  will-change: transform;
}
.long-title .letter { display: inline-block; will-change: transform; }

/* ── 08 · Servicios: tarjetas que se apilan en 3D ──────────────────── */
.section_services { position: relative; }
.service_slide { height: 100svh; }
.content-wrapper { perspective: 250vw; width: 100%; height: 100%; }
/* Tarjeta y no pantalla completa: se recoge de los bordes y redondea las
   esquinas, como la de la referencia. Al inclinarse hacia atrás se ve que es
   una pieza que se retira, no un fondo que cambia. */
.slide-content {
  position: absolute; inset: 5vh 4vw; border-radius: 1.4rem;
  padding: clamp(1.5rem, 3vw, 3rem);
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--pure); color: var(--black);
  transform-style: preserve-3d; transform-origin: 50% 10%;
  will-change: transform, opacity;
}
.slide-content.is-grey  { background: var(--grey-1); color: var(--white); }
.slide-content.is-black { background: var(--grey-2); color: var(--grey-2-fg); }

/* Cuerpo: las cuatro caras del canto, plegadas 90° sobre cada borde. De
   frente quedan de perfil y no se ven; en cuanto la tarjeta se inclina
   aparecen y la losa deja de ser una lámina. El tono lo da un velo negro
   sobre el color heredado, no un `filter`, que aplanaría el 3D. */
.slide-content { --canto: 4.5rem; }
.slide_canto {
  position: absolute; pointer-events: none; border-radius: inherit;
  background-color: inherit;
  background-image: linear-gradient(rgba(0, 0, 0, .34), rgba(0, 0, 0, .34));
}
.slide_canto--ab {                        /* la cara de abajo, la más honda */
  left: 0; right: 0; top: 100%; height: var(--canto);
  transform-origin: 50% 0; transform: rotateX(-90deg);
  background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5));
}
.slide_canto--ar {
  left: 0; right: 0; bottom: 100%; height: var(--canto);
  transform-origin: 50% 100%; transform: rotateX(90deg);
  background-image: linear-gradient(rgba(0, 0, 0, .16), rgba(0, 0, 0, .16));
}
.slide_canto--de {
  top: 0; bottom: 0; left: 100%; width: var(--canto);
  transform-origin: 0 50%; transform: rotateY(90deg);
}
.slide_canto--iz {
  top: 0; bottom: 0; right: 100%; width: var(--canto);
  transform-origin: 100% 50%; transform: rotateY(-90deg);
  background-image: linear-gradient(rgba(0, 0, 0, .24), rgba(0, 0, 0, .24));
}
.slide_head { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; }
.slide_head .h2 { color: inherit; font-size: 13vh; line-height: 85%; letter-spacing: -.07em; max-width: 66%; }
.slide_num { font-size: 3.2rem; font-weight: 500; line-height: 1; opacity: .35; }
.slide_body { display: grid; grid-template-columns: 12rem 1fr 1fr 1.1fr; gap: 1.25rem; align-items: start; }
.slide_body .tag { font-size: 1.125rem; letter-spacing: -.02em; opacity: .55; }
.slide_body p { font-size: 1.125rem; line-height: 115%; letter-spacing: -.02em; margin: 0 0 1rem; }
.slide_shot { aspect-ratio: 16 / 10; overflow: hidden; background: var(--shot-bg); }
.slide_shot img { width: 100%; height: 100%; object-fit: cover; }
.slide_foot { border-top: 1px solid currentColor; padding-top: .8rem; font-size: 1.125rem; letter-spacing: -.02em; opacity: .85; }
/* La llamada del pie de cada tarjeta lleva al contacto: se nota al pasar. */
a.slide_foot { display: flex; justify-content: space-between; align-items: baseline;
               transition: opacity .25s var(--ease-out); }
a.slide_foot span { transition: transform .35s var(--ease-out); }
a.slide_foot:hover, a.slide_foot:focus-visible { opacity: 1; }
a.slide_foot:hover span, a.slide_foot:focus-visible span { transform: translateX(6px); }
/* Lo que aún no existe no se ofrece como enlace. */
.is-pronto { cursor: default; opacity: .55; }

/* ── 09a · Equipo ──────────────────────────────────────────────────── */
.section_team { position: relative; height: 500vh; margin-top: 40vh; }
.team_sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; padding: 1rem 0 2rem; max-width: 100%; }
.team_bg-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 20vw; font-weight: 500; letter-spacing: -.05em;
  color: rgba(227,227,227,.05); white-space: nowrap; pointer-events: none; user-select: none;
}
.team-sticky_top-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; position: relative; z-index: 2; }
.team-sticky_top .h2 { font-size: 10.25rem; line-height: 85%; letter-spacing: -.07em; }
.team-sticky-top_desc { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-self: end; }
.team-sticky_bottom-wrapper {
  position: absolute; left: var(--pad); right: var(--pad); bottom: 2rem; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end;
}
.team-sticky_h2-wrap .h2 { text-align: right; font-size: 10.25rem; line-height: 85%; letter-spacing: -.07em; }
.team_cards { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 10rem;
  padding: 30vh var(--pad) 0; }
.team-cards_row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }
/* sin min-width:0 los items de grid no bajan del ancho de su contenido */
.team-cards_column { min-width: 0; }
.team-card_wrapper { width: 17rem; }
.team-cards_column.is-2 { justify-self: end; }
.team-cards_column.is-mid { justify-self: center; }
.team_card-media { aspect-ratio: 3 / 4; overflow: hidden; background: var(--main-black); }
.team_card-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.team_card-info { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1rem; padding-top: .55rem; }
.team_card-info .h3 { color: var(--pure); }
.team_card-info .role { text-align: right; color: var(--soft); font-size: 1.125rem; line-height: 115%; letter-spacing: -.02em; min-width: 0; }

/* ── 09b · Testimonios ─────────────────────────────────────────────── */
.section_reviews { position: relative; padding: 8rem 0; }
.reviews_grid { display: grid; grid-template-columns: 20rem 1fr; gap: 4rem; align-items: start; }
.reviews_aside { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: 1.75rem; }
.reviews_mark { width: 7rem; opacity: .9; }
.reviews_facts { display: flex; flex-direction: column; gap: .4rem; }
.reviews_facts .h3 { font-size: 1.125rem; font-weight: 500; color: var(--white); line-height: 115%; }
.review_row { display: grid; grid-template-columns: 5rem 14rem 1fr; gap: 1.5rem; padding: 1.75rem 0; border-top: 1px solid var(--line); }
.review_row .idx { color: var(--soft); font-size: 1.125rem; letter-spacing: -.02em; }
.review_row .who { color: var(--pure); font-size: 1.125rem; letter-spacing: -.02em; }
.review_row .txt { color: var(--soft); font-size: 1.125rem; line-height: 115%; letter-spacing: -.02em; display: flex; flex-direction: column; gap: .8rem; }

/* ── 08b · Revelado por bloque ─────────────────────────────────────
   Cada letra (o palabra) va envuelta en un cuadro de color que primero
   se llena, y al llegar a la mitad se vacía mientras el carácter
   aparece. Mecánica tomada de victorfuruya.com. */
.block-revealer {
  display: inline-block; position: relative;
  padding: 0; margin: 0; opacity: 1;
  background-color: rgba(var(--reveal-block), 0);
}
.block-revealer > span { display: inline-block; opacity: 0; }
html:not(.js) .block-revealer > span { opacity: 1; }

/* ── 09 · Cómo trabajamos: pregunta fija + frases que suben ────────
   La etiqueta y la palabra grande quedan clavadas a la izquierda; las
   frases desfilan por la derecha y la que pasa por el centro se
   ilumina, cambiando la palabra grande. Igual que el bloque de valores
   de la referencia. */
.section_values {
  position: relative; width: 100%; height: 100svh; overflow: hidden;
  /* Fondo propio: la última tarjeta se va encogiendo e inclinándose, y al
     hacerlo deja ver lo que tiene detrás. Sin fondo, «Cómo trabajamos»
     asomaba por los lados de la tarjeta antes de que acabara de irse. */
  background: var(--bg);
}
.values_pinned {
  position: absolute; top: 50%; left: 8vw; transform: translateY(-50%);
  z-index: 3; display: flex; flex-direction: column; gap: .5rem;
  pointer-events: none;
}
.values_label { color: var(--soft); font-size: 1.125rem; font-weight: 500; line-height: 1; }
/* El punto de la palabra grande es una ventanita: va cambiando de relleno
   con las mismas imágenes que la X. Dos capas superpuestas para que el
   cambio no parpadee, y un punto invisible detrás que reserva el sitio. */
/* Una sola capa, en el flujo: así el punto conserva su línea base y sigue
   leyéndose una sola vez. El relleno cambia de imagen sin más, que en un
   glifo de este tamaño se percibe como textura viva, no como parpadeo. */
/* La marca escrita dentro de un texto va siempre con la tipografía del
   logotipo, que es lo que la hace reconocible. */
.marca {
  font-family: "Adoria", "General Sans", system-ui, sans-serif;
  /* Adoria dibuja glifos distintos para caja baja y caja alta —miden lo
     mismo, pero no son iguales—, y el logotipo usa los de caja alta: sin
     esto la «n» final salía con una cola que la marca no tiene. */
  text-transform: uppercase;
  /* Y viene con un único peso: pedirle negrita la deja falseada, así que
     el grosor se consigue engordando el contorno del propio glifo. */
  font-weight: 400; letter-spacing: 0;
  -webkit-text-stroke: .028em currentColor;
  paint-order: stroke fill;
  /* Adoria remata la N con un trazo largo: sin este aire se pega a la
     palabra siguiente. */
  margin-right: .14em;
}

/* El punto final es una ventanita redonda con las fotos de la X. Antes era
   el propio glifo recortando la imagen: el relleno se repartía por toda la
   caja de la letra —alta y estrecha— y en el punto solo caía una tajada,
   y el interletrado negativo de la palabra le cortaba el borde derecho.
   Ahora es una caja del tamaño del punto, con la foto entera dentro. */
.values_punto {
  display: inline-block; width: .21em; height: .21em; margin-left: .04em;
  border-radius: 50%; overflow: hidden; vertical-align: baseline;
  color: transparent; letter-spacing: 0;
  background-color: var(--pure);
}
.values_punto[data-fill] {
  -webkit-background-clip: border-box; background-clip: border-box;
  background-size: auto, cover; background-position: center;
}
/* El punto que se ve es uno solo y viaja de palabra en palabra (site.js,
   05e). Dentro de la palabra queda un hueco invisible que le guarda el
   sitio; el que se ve va encima, fuera del texto, para que no se apague
   cuando la palabra cambia. */
.values_punto-hueco { visibility: hidden; }
.values_punto-viaja {
  position: absolute; left: 0; top: 0; margin: 0;
  visibility: hidden; opacity: 0; will-change: transform;
}

/* La palabra manda en la sección: blanca y en negrita. En gris oscuro y
   peso medio sobre el negro apenas se leía. */
.values_title {
  font-size: clamp(4rem, 8vw, 12rem); font-weight: 700;
  color: var(--pure); line-height: .8; letter-spacing: -.055em;
}
.values_list-container {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  display: flex; justify-content: flex-end;
}
.values_list {
  width: min(46vw, 44rem); margin: 0; margin-right: 8vw;
  font-size: clamp(1.75rem, 3.4vw, 3.25rem);
  font-weight: 500; line-height: 115%; letter-spacing: -.02em;
  color: var(--pure); will-change: transform;
}
.value-item { display: block; opacity: 0; transition: opacity .3s ease; margin-bottom: .55em; }

@media (max-width: 991px) {
  .section_values { height: auto; padding: 5rem 0; }
  .values_pinned { position: relative; top: auto; left: auto; transform: none;
    padding: 0 var(--pad); margin-bottom: 2rem; }
  /* El punto de la palabra grande es una ventanita: va cambiando de relleno
   con las mismas imágenes que la X. Dos capas superpuestas para que el
   cambio no parpadee, y un punto invisible detrás que reserva el sitio. */
/* Una sola capa, en el flujo: así el punto conserva su línea base y sigue
   leyéndose una sola vez. El relleno cambia de imagen sin más, que en un
   glifo de este tamaño se percibe como textura viva, no como parpadeo. */

.values_title { font-size: 4rem; }
  .values_list-container { position: relative; inset: auto; display: block; }
  .values_list { width: auto; margin: 0; padding: 0 var(--pad); font-size: 1.75rem; }
  .value-item { opacity: 1 !important; }
}


/* ── 09c · Contacto ────────────────────────────────────────────────── */
.section_form { position: relative; min-height: 100svh; margin-top: 10rem; display: flex; align-items: center; }
.form_bg-wrap { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.form_bg { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.55); }
/* El vídeo de fondo cubre toda la sección, como la foto que había. Ya viene
   en penumbra, así que no se oscurece más: solo el velo de la sección. */
/* el vídeo ya viene en blanco y negro y con su contraste (un filtro sobre un
   vídeo se recalcula en cada fotograma, y en el teléfono pesa) */
video.form_bg { filter: none; object-position: 35% 50%; }

.form_bg-overlay { position: absolute; inset: 0; background: var(--overlay); }
.form_content-wrapper { position: relative; z-index: 2; width: 100%; }
/* El contacto con el formato de «Recado» (recursos): a la izquierda el
   título y los datos, a la derecha la tarjeta. Los colores salen del tema
   de la página; la carta y el sobre son papel claro en los dos. */
.section_form {
  --ct-texto: var(--pure); --ct-suave: var(--soft);
  --ct-tenue: color-mix(in srgb, var(--pure) 7%, transparent); --ct-borde: color-mix(in srgb, var(--pure) 13%, transparent);
  --ct-tarjeta: linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, var(--pure) 8%), color-mix(in srgb, var(--bg) 96%, var(--pure) 4%));
  --ct-rojo: #ff5a4e; --ct-verde: #3ccf6e; --ct-papel: #f3f3f1; --ct-papel-sombra: #dcdcd8;
  --ct-curva: cubic-bezier(.22, 1, .36, 1);
}
:root[data-theme="light"] .section_form { --ct-rojo: #d93a2f; --ct-verde: #1f9d4c; --ct-papel: #fff; --ct-papel-sombra: #e4e4e0; }
.ct { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 42rem); gap: clamp(2rem, 6vw, 6rem); align-items: center; color: var(--ct-texto); }
.ct_titulo { margin: 0; color: var(--ct-texto); font-size: clamp(3rem, 6.2vw, 6.2rem); font-weight: 600; line-height: .9; letter-spacing: -.055em; }
.ct_intro { max-width: 26rem; margin: 1.5rem 0 0; color: var(--ct-suave); font-size: 1.1rem; line-height: 1.5; }
.ct_tarjeta { position: relative; padding: clamp(1.4rem, 2.6vw, 2.6rem); overflow: hidden; border-radius: 28px; background: var(--ct-tarjeta); box-shadow: inset 0 0 0 1px var(--ct-borde), 0 40px 80px -44px rgba(0, 0, 0, .9); }
.ct_form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.05rem; }
.ct_form > * { grid-column: 1 / -1; }
.ct_form > .es-mitad { grid-column: auto; }
/* las etiquetas flotan: dentro del campo hasta que se escribe o se enfoca */
.ct_campo { position: relative; }
.ct_campo input, .ct_campo textarea {
  width: 100%; padding: 1.65rem 2.8rem .7rem 1.1rem; border: 0; border-radius: 14px; outline: none; resize: none;
  background: var(--ct-tenue); box-shadow: inset 0 0 0 1px var(--ct-borde); color: var(--ct-texto); font: inherit; font-size: 1.08rem; transition: box-shadow .25s;
}
.ct_campo textarea { min-height: 9rem; padding-right: 3.1rem; line-height: 1.45; }
.ct_campo input:focus, .ct_campo textarea:focus { box-shadow: inset 0 0 0 1.5px var(--ct-texto); }
.ct_campo label { position: absolute; left: 1.15rem; top: 1.25rem; color: var(--ct-suave); font-size: 1.05rem; pointer-events: none; transform-origin: 0 0; transition: transform .35s var(--ct-curva), color .25s; }
.ct_campo input:focus + label, .ct_campo input:not(:placeholder-shown) + label,
.ct_campo textarea:focus + label, .ct_campo textarea:not(:placeholder-shown) + label { transform: translateY(-.62rem) scale(.76); }
.ct_campo input:focus + label, .ct_campo textarea:focus + label { color: var(--ct-texto); }
/* el ✓ del correo se dibuja cuando es válido */
.ct_valido { position: absolute; right: 14px; top: 1.3rem; width: 20px; height: 20px; fill: none; stroke: var(--ct-verde); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .45s var(--ct-curva); }
.ct_campo.is-valido .ct_valido { stroke-dashoffset: 0; }
/* el anillo de caracteres del mensaje */
.ct_cuenta { position: absolute; right: 14px; top: 14px; width: 22px; height: 22px; transform: rotate(-90deg); fill: none; stroke-width: 2.4; }
.ct_cuenta-fondo { stroke: var(--ct-borde); }
.ct_cuenta-valor { stroke: var(--ct-texto); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--ct-lleno, 0)); stroke-linecap: round; transition: stroke-dashoffset .2s, stroke .2s; }
.ct_campo.is-casi .ct_cuenta-valor { stroke: var(--ct-rojo); }
/* el error: el campo niega con la cabeza y explica */
.ct_error { display: block; max-height: 0; overflow: hidden; color: var(--ct-rojo); font-size: .82rem; opacity: 0; transition: max-height .3s var(--ct-curva), opacity .25s, margin .3s; }
.ct_campo.is-error input, .ct_campo.is-error textarea { box-shadow: inset 0 0 0 1.5px var(--ct-rojo); }
.ct_campo.is-error, .ct_acepto.is-error { animation: ctNiega .45s var(--ct-curva); }
.ct_campo.is-error .ct_error { max-height: 2em; margin-top: 6px; opacity: 1; }
@keyframes ctNiega { 25% { transform: translateX(-8px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }

.ct_temas { display: flex; flex-wrap: wrap; gap: .45rem; margin: .1rem 0 0; padding: 0; border: 0; }
.ct_temas legend { width: 100%; margin-bottom: .5rem; padding: 0; color: var(--ct-suave); font-size: .84rem; }
.ct_temas label { cursor: pointer; }
.ct_temas input { position: absolute; opacity: 0; pointer-events: none; }
.ct_temas span { display: inline-flex; align-items: center; height: 36px; padding: 0 .95rem; border-radius: 99px; background: var(--ct-tenue); box-shadow: inset 0 0 0 1px var(--ct-borde); font-size: .88rem; transition: background-color .25s, color .25s, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.ct_temas input:checked + span { background: var(--ct-texto); color: var(--bg); box-shadow: none; transform: scale(1.04); }
.ct_temas input:focus-visible + span { outline: 2px solid var(--ct-texto); outline-offset: 2px; }

/* El consentimiento: una casilla sin marcar, con el enlace a la política
   (Ley 21.719: lo marca la persona). Casilla propia: la del sistema salía
   rellena en el iPhone aun sin marcar. */
.ct_acepto { display: flex; gap: .65rem; align-items: flex-start; cursor: pointer; color: var(--ct-suave); font-size: .84rem; line-height: 1.4; }
.ct_acepto input {
  flex: none; width: 18px; height: 18px; margin: .1rem 0 0; cursor: pointer; -webkit-appearance: none; appearance: none;
  border-radius: 5px; border: 1.5px solid var(--ct-borde); background: transparent; transition: background-color .15s, box-shadow .15s, border-color .15s;
}
.ct_acepto input:checked { border-color: var(--ct-texto); background: var(--ct-texto); box-shadow: inset 0 0 0 2.5px var(--bg); }
.ct_acepto input:focus-visible { outline: 2px solid var(--ct-texto); outline-offset: 2px; }
.ct_acepto a { color: var(--ct-texto); text-decoration: underline; text-underline-offset: 2px; }
.ct_acepto.is-error { color: var(--ct-rojo); }
.ct_acepto.is-error input { border-color: var(--ct-rojo); }

.ct_envios { display: grid; grid-template-columns: 1fr auto; gap: .55rem; margin-top: .2rem; }
.ct_envia { position: relative; display: grid; place-items: center; height: 58px; padding: 0 1.2rem; border-radius: 16px; background: var(--ct-texto); color: var(--bg); font-weight: 500; font-size: 1rem; transition: transform .3s var(--ct-curva); }
.ct_envia > * { grid-area: 1 / 1; transition: opacity .25s, transform .4s var(--ct-curva); }
.ct_envia:hover { transform: translateY(-1px); }
.ct_envia:focus-visible { outline: 2px solid var(--ct-texto); outline-offset: 3px; }
.ct_envia.es-segundo { background: var(--ct-tenue); box-shadow: inset 0 0 0 1px var(--ct-borde); color: var(--ct-texto); }
.ct_gira { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; opacity: 0; transform: scale(.6); }
.ct_gira circle { stroke-dasharray: 40 60; transform-origin: 12px 12px; animation: ctGira .8s linear infinite; }
@keyframes ctGira { to { transform: rotate(360deg); } }
.is-enviando .ct_envia:first-child .ct_envia-txt { opacity: 0; transform: translateY(-8px); }
.is-enviando .ct_gira { opacity: 1; transform: none; }

/* el envío: el formulario se va por piezas, la carta baja a su sobre, la
   solapa se cierra (por delante de la carta desde ese instante) y el sobre
   sale volando; queda un ✓ que se dibuja */
.is-enviado .ct_form > * { animation: ctSale .4s calc(var(--i) * 45ms) var(--ct-curva) both; }
@keyframes ctSale { to { opacity: 0; transform: translateY(-14px) scale(.98); } }
.is-enviado .ct_form { pointer-events: none; }
.ct_sobre { position: absolute; left: 50%; top: 50%; width: 210px; height: 132px; margin: -66px 0 0 -105px; opacity: 0; pointer-events: none; perspective: 600px; }
.ct_sobre > * { position: absolute; inset: 0; border-radius: 6px; }
.ct_sobre-fondo { background: var(--ct-papel-sombra); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .7); }
.ct_carta { inset: 10px 14px auto; z-index: 2; display: grid; align-content: start; gap: 8px; height: 120px; padding: 16px 16px 0; border-radius: 4px; background: var(--ct-papel); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.ct_carta i { display: block; height: 4px; border-radius: 2px; background: #cfcfcb; }
.ct_carta i:nth-child(1) { width: 40%; background: #9a9a96; } .ct_carta i:nth-child(3) { width: 85%; } .ct_carta i:nth-child(4) { width: 60%; }
.ct_sobre-frente { z-index: 3; background: var(--ct-papel); clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .06); }
.ct_sobre-solapa { z-index: 1; height: 62%; background: linear-gradient(#ececea, var(--ct-papel)); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; transform: rotateX(180deg); }
.is-enviado .ct_sobre { animation: ctSobre 1.9s .25s both; }
.is-enviado .ct_carta { animation: ctCarta 1.9s .25s both; }
.is-enviado .ct_sobre-solapa { animation: ctSolapa 1.9s .25s both; }
@keyframes ctSobre {
  0% { opacity: 0; transform: scale(.82) translateY(16px); }
  16% { opacity: 1; transform: none; animation-timing-function: linear; }
  66% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.55, 0, .75, .25); }
  100% { opacity: 0; transform: translate(190px, -190px) rotate(-16deg) scale(.42); }
}
@keyframes ctCarta { 0%, 14% { transform: translateY(-112px); animation-timing-function: cubic-bezier(.5, 0, .2, 1); } 40%, 100% { transform: translateY(4px); } }
@keyframes ctSolapa {
  0%, 42% { transform: rotateX(180deg); z-index: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  43% { z-index: 4; }
  58%, 100% { transform: rotateX(0deg); z-index: 4; }
}
.ct_listo { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .5rem; padding: 2rem; text-align: center; opacity: 0; pointer-events: none; }
.ct_listo-ico { width: 72px; height: 72px; margin-bottom: .6rem; fill: none; stroke: var(--ct-texto); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ct_listo-ico circle { stroke-dasharray: 190; stroke-dashoffset: 190; stroke-width: 2; }
.ct_listo-ico path { stroke-dasharray: 40; stroke-dashoffset: 40; }
.ct_listo-tit { margin: 0; font-size: 1.8rem; font-weight: 600; letter-spacing: -.035em; }
.ct_listo-txt { max-width: 22rem; margin: 0; color: var(--ct-suave); line-height: 1.45; }
.ct_otro { margin-top: 1.1rem; height: 42px; padding: 0 1.1rem; border-radius: 99px; background: var(--ct-tenue); box-shadow: inset 0 0 0 1px var(--ct-borde); color: var(--ct-texto); font-size: .9rem; font-weight: 500; }
.ct_otro:focus-visible { outline: 2px solid var(--ct-texto); outline-offset: 2px; }
.is-enviado .ct_listo { animation: ctListo .6s 1.75s var(--ct-curva) both; pointer-events: auto; }
.is-enviado .ct_listo-ico circle { animation: ctTraza .7s 1.85s var(--ct-curva) forwards; }
.is-enviado .ct_listo-ico path { animation: ctTraza .45s 2.25s var(--ct-curva) forwards; }
@keyframes ctListo { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ctTraza { to { stroke-dashoffset: 0; } }
@media (max-width: 991px) {
  .ct { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
}
@media (max-width: 767px) {
  .ct_titulo { font-size: min(3.4rem, 12.6vw); }
  .ct_intro { margin: 1rem 0 1.5rem; font-size: 1rem; }
  .ct_tarjeta { padding: 1.2rem; border-radius: 22px; }
  .ct_envios { grid-template-columns: minmax(0, 1fr); }
  .ct_form > .es-mitad { grid-column: 1 / -1; }
  .ct_temas span { height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .ct_campo.is-error, .ct_acepto.is-error { animation: none; }
  .is-enviado .ct_form > * { animation-duration: .01s; animation-delay: 0s; }
  .is-enviado .ct_sobre, .is-enviado .ct_carta, .is-enviado .ct_sobre-solapa { animation: none; }
  .is-enviado .ct_listo, .is-enviado .ct_listo-ico circle, .is-enviado .ct_listo-ico path { animation-delay: 0s; animation-duration: .01s; }
}

/* ── 09d · Espacio creativo ────────────────────────────────────────── */
.section_cs-hero { padding-top: calc(var(--nav-h) + 2rem); padding-bottom: 4rem; }
.section_cs-grid { padding-bottom: 6rem; }
.cs_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.cs_item { margin: 0; }
.cs_item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--main-black); }
.cs_item.is-wide { grid-column: span 2; }
.cs_item.is-tall img { aspect-ratio: 3 / 4; }
.cs_item figcaption { padding-top: .6rem; }
@media (max-width: 991px) {
  .cs_grid { grid-template-columns: 1fr 1fr; }
  .cs_item.is-wide { grid-column: span 2; }
}
@media (max-width: 600px) {
  .cs_grid { grid-template-columns: 1fr; }
  .cs_item.is-wide { grid-column: span 1; }
}

/* ── 09e · Páginas legales (privacidad y términos) ─────────────────── */
.section_legal { padding: calc(var(--pad) + 3.6rem) 0 6rem; }
.section_legal .sv_migas { margin-bottom: 2.4rem; }
.legal { max-width: 46rem; }
.legal h1 {
  margin: 0 0 1rem; color: var(--pure); font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: .95; letter-spacing: -.05em; text-wrap: balance;
}
.legal_fecha { margin: 0 0 2.4rem; color: var(--soft); font-size: .95rem; }
.legal h2 { margin: 2.6rem 0 .8rem; color: var(--pure); font-weight: 600; font-size: 1.35rem; line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
.legal p, .legal li { color: var(--white); font-size: 1.05rem; line-height: 1.6; letter-spacing: -.005em; }
.legal p { margin: 0 0 1rem; }
.legal ul { margin: .4rem 0 1rem; padding-left: 1.2rem; list-style: disc; }
.legal li::marker { color: var(--soft); }
.legal li { margin-bottom: .45rem; }
.legal strong { color: var(--pure); font-weight: 500; }
.legal a { color: var(--pure); text-decoration: underline; text-underline-offset: 2px; }
.legal_resumen { margin: 2.4rem 0 1rem; padding: 1.4rem 1.6rem .6rem; border: 1px solid var(--line); border-radius: 14px; }
.legal_resumen h2 { margin-top: 0; }
.legal_nota { color: var(--soft); font-size: .92rem; font-style: italic; }

/* ── 09f · Recursos ─────────────────────────────────────────────────
   Una vitrina de animaciones: cabecera corta, buscador y filtros que se
   quedan arriba, una grilla compacta de vídeos (corren al pasar el cursor,
   o solos en pantallas táctiles) y el detalle en un <dialog> con la demo
   en vivo y el código para copiar o descargar. */
/* arriba, la ruta pegada a la barra, a la misma altura que en servicios y en cada recurso */
.section_recursos { padding: calc(var(--pad) + 3.6rem) 0 6rem; }
.section_recursos .sv_migas { margin-bottom: 2.4rem; }
.rc_cabeza { max-width: 62rem; }
.rc_kicker { margin: 0 0 1rem; font: 400 .74rem/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); text-wrap: balance; }
.rc_k { white-space: nowrap; }   /* «268 animaciones ·» no se parte */
.rc_titulo { margin: 0; color: var(--pure); font-weight: 600; font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: .95; letter-spacing: -.05em; text-wrap: balance; }
.rc_lede { margin: 1.3rem 0 0; max-width: 40rem; text-wrap: pretty; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.4; letter-spacing: -.015em; color: var(--white); }

/* La barra se pega pegada a la píldora del menú, que queda por encima; al
   pegarse (`.is-pegada`, la pone recursos.js) estira su fondo hacia arriba
   y el menú se lee sobre esa misma franja, no sobre las tarjetas. */
body:has(.rc_barra) .nav_wrapper.is-pill { z-index: 35; }
.rc_barra {
  --sobre: calc(var(--pad) + 1.95rem);
  position: sticky; top: var(--sobre); z-index: 20; margin: 2.6rem calc(var(--pad) * -1) 1.6rem; padding: .9rem var(--pad);
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem;
  background: color-mix(in srgb, var(--bg) 95%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.rc_barra::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--sobre);
  background: inherit; -webkit-backdrop-filter: inherit; backdrop-filter: inherit;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.rc_barra.is-pegada::before { opacity: 1; }
.rc_busca {
  display: flex; align-items: center; gap: .6rem; width: 100%; height: 2.7rem; padding: 0 .95rem;
  border: 1px solid var(--line); border-radius: 12px; color: var(--soft);
  background: color-mix(in srgb, var(--pure) 3%, transparent);
  transition: border-color .25s, background-color .25s;
}
.rc_busca:focus-within { border-color: var(--soft); background: color-mix(in srgb, var(--pure) 5%, transparent); }
.rc_busca svg { flex: none; width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.rc_busca input { flex: 1; min-width: 0; border: 0; background: none; color: var(--pure); font: inherit; font-size: 1rem; outline: none; -webkit-appearance: none; appearance: none; }
.rc_busca input::-webkit-search-cancel-button, .rc_busca input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.rc_busca input::placeholder { color: var(--soft); }
.rc_filtros { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
.rc_filtros::-webkit-scrollbar { display: none; }
.rc_filtros button {
  flex: none; height: 2.3rem; padding: 0 .95rem; border: 1px solid var(--line); border-radius: 99px; cursor: pointer;
  background: none; color: var(--soft); font: inherit; font-size: .88rem; font-weight: 500; white-space: nowrap;
  transition: background-color .25s, color .25s, border-color .25s;
}
.rc_filtros button i { font-style: normal; opacity: .55; margin-left: .2rem; font-variant-numeric: tabular-nums; }
.rc_filtros button:hover { color: var(--pure); border-color: var(--soft); }
.rc_filtros button.is-on { background: var(--pure); border-color: var(--pure); color: var(--bg); }
/* con 21 categorías la fila no cabe: en escritorio pasa a dos líneas (con
   ratón, una fila que se desliza de lado no se descubre); en el teléfono
   sigue deslizándose con el dedo */
@media (min-width: 992px) { .rc_filtros { flex-wrap: wrap; overflow: visible; row-gap: .45rem; } }

.rc_grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem 1.4rem; }
@media (min-width: 1400px) { .rc_grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rc_tarjeta[hidden] { display: none; }
.rc_tarjeta { min-width: 0; }
.rc_video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.rc_info { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; padding-top: .85rem; }
.rc_nombre { margin: 0; color: var(--pure); font-size: 1.15rem; font-weight: 600; letter-spacing: -.025em; }
.rc_cat { flex: none; font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.rc_frase { margin: .3rem 0 0; color: var(--white); font-size: .92rem; line-height: 1.4; opacity: .8;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* «Gratis»: bajo la frase de cada tarjeta y, más grande, junto al título del
   detalle y de la página del recurso. Sobrio: letra pequeña en mayúsculas,
   en el tono del texto secundario y sin color propio ni pastilla. */
.rc_gratis {
  display: inline-flex; align-items: center; margin: .5rem 0 0; padding: 0; border: 0; background: none;
  color: var(--soft); font: 500 .68rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.rc_gratis.es-grande { margin: 0; padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 99px; font-size: .72rem; }

/* «Ver más»: la siguiente tanda de tarjetas */
.rc_mas { display: flex; justify-content: center; margin-top: 2.6rem; }
.rc_mas[hidden] { display: none; }
.rc_mas .rc_boton { min-width: 12rem; }
.rc_mas i { font-style: normal; color: var(--soft); font-size: .82rem; font-variant-numeric: tabular-nums; }

/* un botón que se lee como enlace, dentro de una frase */
.rc_enlace { padding: 0; border: 0; background: none; color: var(--pure); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rc_enlace:hover { text-decoration-thickness: 2px; }

.rc_medida {
  grid-column: 1 / -1; padding: 2rem 2.2rem; border-radius: 18px; background: var(--pure); color: var(--bg);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem 2rem; align-items: center;
}
.rc_medida[hidden] { display: none; }
.rc_medida p { margin: 0; grid-column: 1; line-height: 1.45; opacity: .75; max-width: 46rem; }
.rc_medida .rc_medida-tit { opacity: 1; font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; text-wrap: balance; }
.rc_medida-ir { grid-column: 2; grid-row: 1 / 3; font-weight: 500; white-space: nowrap; color: inherit;
  padding: .8rem 1.3rem; border-radius: 99px; border: 1px solid currentColor; }
.rc_medida-ir span { display: inline-block; transition: transform .35s var(--ease-out); }
.rc_medida-ir:hover span { transform: translateX(5px); }
.rc_vacio { color: var(--soft); padding: 2rem 0; }
.rc_vacio a { color: var(--pure); }

.rc_preguntas { margin-top: 5.5rem; max-width: 46rem; }
.rc_preguntas-tit { margin: 0 0 1rem; color: var(--pure); font-size: 1.6rem; font-weight: 600; letter-spacing: -.035em; }
.rc_preguntas details { border-top: 1px solid var(--line); }
.rc_preguntas details:last-child { border-bottom: 1px solid var(--line); }
.rc_preguntas summary { list-style: none; cursor: pointer; padding: 1.1rem 0; color: var(--pure); font-size: 1.1rem; display: flex; justify-content: space-between; gap: 1rem; }
.rc_preguntas summary::-webkit-details-marker { display: none; }
.rc_preguntas summary::after { content: "+"; color: var(--soft); transition: transform .3s var(--ease-out); }
.rc_preguntas details[open] summary::after { transform: rotate(45deg); }
.rc_preguntas details p { margin: 0 0 1.2rem; color: var(--white); line-height: 1.5; }

/* El visor de un recurso (09f3 trae sus medidas): lo que comparten sus partes. */
.rc_dialogo::backdrop { background: rgba(0, 0, 0, .75); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.rc_cerrar {
  position: absolute; top: .8rem; right: .8rem; z-index: 3; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid var(--line); cursor: pointer; background: color-mix(in srgb, var(--bg) 80%, transparent); color: var(--pure); font-size: 1.4rem; line-height: 1;
}
#rc-d-agregar.is-hecho { background: transparent; color: var(--pure); border-color: var(--soft); }
.rc_boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .3em; min-height: 2.6rem; padding: 0 1.15rem;
  border-radius: 99px; border: 1px solid var(--line); background: none; color: var(--pure); font: inherit; font-size: .92rem; font-weight: 500;
  white-space: nowrap; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s;
}
.rc_boton[hidden] { display: none; }
.rc_boton:hover { border-color: var(--soft); }
.rc_boton.es-lleno { background: var(--pure); color: var(--bg); border-color: var(--pure); }
.rc_boton.es-lleno:hover { background: transparent; color: var(--pure); }
.rc_boton.es-texto { border-color: transparent; color: var(--soft); }
.rc_boton.es-texto:hover { color: var(--pure); }
.rc_boton:focus-visible, .rc_cerrar:focus-visible { outline: 2px solid var(--pure); outline-offset: 2px; }

.c-com { color: #6f7680; font-style: italic; }
.c-cad { color: #a8d8a0; }
.c-pal { color: #c7a6ff; }
.c-num { color: #ffb37a; }
.c-tag { color: #8ec5ff; }
.c-atr { color: #ffd58a; }

@media (max-width: 991px) { .rc_grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .rc_grilla { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .rc_barra { margin-top: 2rem; }
  .rc_busca { flex: 1 1 100%; }
  .rc_medida { grid-template-columns: minmax(0, 1fr); padding: 1.5rem; }
  .rc_medida-ir { grid-column: 1; grid-row: auto; justify-self: start; margin-top: .6rem; }
}

/* ── el carrito ──────────────────────────────────────────────────────
   Un botón flotante abajo a la izquierda (abajo a la derecha están el
   idioma y el tema en el teléfono) y su ventana con la lista de lo que se
   quiere bajar y el botón «Descargar», que abre el cuadro del cupón (09l). */
.carrito_boton {
  position: fixed; left: var(--pad); bottom: var(--pad); z-index: 41;
  display: inline-flex; align-items: center; gap: .55rem; height: 2.9rem; padding: 0 1.1rem 0 .95rem;
  border: 0; border-radius: 99px; cursor: pointer; background: var(--pure); color: var(--bg);
  font: inherit; font-size: .92rem; font-weight: 500; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6);
  animation: carritoEntra .5s var(--ease-out);
}
.carrito_boton[hidden] { display: none; }
.carrito_boton svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.carrito_n { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem; border-radius: 99px; background: var(--bg); color: var(--pure); font-size: .75rem; font-variant-numeric: tabular-nums; }
@keyframes carritoEntra { from { opacity: 0; transform: translateY(14px); } }
/* en el teléfono, solo la bolsa y la cantidad: al lado van el idioma y el tema */
@media (max-width: 767px) {
  .carrito_boton { height: calc(2.15rem + 2px); padding: 0 .7rem 0 .75rem; gap: .4rem; }
  .carrito_total { display: none; }
}
.carrito {
  width: min(30rem, calc(100% - 1rem)); max-height: calc(100svh - 2rem); padding: 1.6rem 1.5rem 1.5rem; overflow: auto;
  border: 1px solid var(--line); border-radius: 22px; background: var(--bg); color: var(--white);
}
.carrito::backdrop { background: rgba(0, 0, 0, .75); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.carrito > form { display: contents; }
.carrito_tit { margin: 0; padding-right: 2.6rem; color: var(--pure); font-size: 1.6rem; font-weight: 600; letter-spacing: -.035em; }
.carrito_lista { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.carrito_lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.carrito_lista li span { display: flex; flex-direction: column; min-width: 0; }
.carrito_lista b { color: var(--pure); font-weight: 500; }
.carrito_lista small { color: var(--soft); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.carrito_lista button { width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--soft); cursor: pointer; font-size: 1rem; line-height: 1; }
.carrito_lista button:hover { color: var(--pure); border-color: var(--soft); }
.carrito_vacio { margin: 1.2rem 0 0; color: var(--soft); }
.carrito_vacio[hidden] { display: none; }
.carrito_pago { display: grid; gap: .5rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.carrito_pago[hidden] { display: none; }
.carrito_descarga { justify-self: stretch; }
.carrito_como { margin: .3rem 0 0; color: var(--soft); font-size: .86rem; line-height: 1.5; }
.carrito_como[hidden] { display: none; }

/* ── 09i · Páginas de servicio (servicios/<slug>/) ─────────────────
   Las escribe paginas_servicio.py y las mueve servicios.js. El inicio pone
   la maqueta viva del servicio junto al título; luego una cinta de temas,
   «Qué incluye» en dos formas (Capas y Vistazo, según ?incluye=), los
   rubros con sus vídeos, las preguntas, el cierre y los otros servicios. */
.es-servicio main { overflow-x: clip; }
.sv_kicker { margin: 0 0 1rem; font: 400 .74rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.sv_kicker b { font-weight: 500; color: var(--pure); }
.sv_h2 { margin: 0; color: var(--pure); font-size: clamp(2rem, 4.4vw, 4.2rem); font-weight: 600; letter-spacing: -.045em; line-height: .98; max-width: 18ch; text-wrap: balance; }
.sv_acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }

/* el inicio: la ruta pegada a la barra, el título a la izquierda y la maqueta */
.sv_hero { padding: calc(var(--pad) + 3.6rem) 0 4.5rem; }
.sv_hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); gap: 3.5rem; align-items: stretch; }
/* la ruta arriba, a la altura de la maqueta; el resto, centrado en lo que queda */
.sv_hero-texto { display: flex; flex-direction: column; min-width: 0; }
.sv_hero-texto .sv_kicker { margin-top: auto; }
.sv_hero-texto .sv_acciones { margin-bottom: auto; }
.sv_migas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 2.4rem; padding-top: .9rem; color: var(--soft); font-size: .82rem; }
.sv_migas a { color: inherit; transition: color .2s; }
.sv_migas a:hover { color: var(--pure); }
.sv_migas [aria-current] { color: var(--pure); }
.sv_h1 { margin: 0; color: var(--pure); font-size: clamp(2.6rem, 5.4vw, 5.6rem); font-weight: 600; letter-spacing: -.05em; line-height: .95; text-wrap: balance; }
.sv_w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .06em; margin-bottom: -.06em; }
.sv_w > span { display: inline-block; }
.sv-listo .sv_w > span { transform: translateY(105%); animation: svPalabra 1s var(--ease-out) forwards; animation-delay: calc(var(--i) * 55ms + 120ms); }
@keyframes svPalabra { to { transform: none; } }
.sv_lede { margin: 1.6rem 0 0; max-width: 34rem; text-wrap: pretty; color: var(--white); font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.5; }
.sv-listo .sv_lede, .sv-listo .sv_acciones, .sv-listo .sv_migas, .sv-listo .sv_hero .sv_kicker { animation: svSube .9s var(--ease-out) both; }
.sv-listo .sv_lede { animation-delay: .45s; }
.sv-listo .sv_acciones { animation-delay: .6s; }
.sv-listo .sv_demo { animation: svDemo 1.2s var(--ease-out) .3s both; }
@keyframes svSube { from { opacity: 0; transform: translateY(16px); } }
@keyframes svDemo { from { opacity: 0; transform: translateY(40px) scale(.97); } }

/* la maqueta: la misma de la portada, con su alto propio */
.sv_demo { position: relative; min-width: 0; }
.sv_demo .srv_fig { height: min(68svh, 40rem); }
.sv_demo .dv { --dv-borde: var(--line); }
.sv_demo .srv_fig figcaption { color: var(--soft); opacity: 1; }
.sv_demo-ia .srv_fig { height: min(64svh, 36rem); }
.sv_demo::before {              /* un halo detrás de la maqueta */
  content: ""; position: absolute; inset: -12% -8%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--pure) 10%, transparent), transparent 70%);
}

/* la app de pedidos en el teléfono */
.sv_app-fig { align-items: center; justify-content: center; }
.sv_app-tel { position: relative; height: 100%; display: grid; place-items: center; }
.sv_app-tel .dv_telefono { position: relative; right: auto; bottom: auto; height: 100%; animation: svFlota 7s ease-in-out infinite; }
@keyframes svFlota { 50% { transform: translateY(-10px) rotate(-1deg); } }
.sv_app { position: absolute; inset: 0; display: flex; flex-direction: column; background: #f5f5f7; color: #111; container-type: inline-size; font: 400 5cqw/1.3 -apple-system, "SF Pro Text", "General Sans", system-ui, sans-serif; overflow: hidden; }
.sv_app-estado { display: flex; justify-content: space-between; align-items: center; padding: 4.6cqw 8cqw 1cqw 10cqw; font-weight: 600; font-size: 4.2cqw; }
.sv_app-estado span { display: flex; gap: 1.5cqw; align-items: center; }
.sv_app-estado i { display: block; background: currentColor; }
.sv_app .e_bat { border-color: rgba(0, 0, 0, .4); }
.sv_app .e_bat::after { background: #111; }
.sv_app-cab { display: flex; justify-content: space-between; align-items: baseline; padding: 6cqw 6cqw 3cqw; }
.sv_app-cab b { font-size: 8.5cqw; letter-spacing: -.03em; }
.sv_app-cab span { color: #8a8a8e; font-size: 4cqw; }
.sv_app-lista { list-style: none; margin: 0; padding: 0 4cqw; display: flex; flex-direction: column; gap: 2.6cqw; }
.sv_app-lista li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 3cqw; padding: 3.6cqw 4cqw; border-radius: 4.4cqw; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); transition: opacity .45s, transform .45s var(--ease-out); }
.sv_app-lista li > i { width: 3.2cqw; height: 3.2cqw; border-radius: 50%; background: #f5a524; }
.sv_app-lista li[data-estado="app_camino"] > i { background: #3478f6; }
.sv_app-lista li[data-estado="app_entregado"] > i { background: #30a14e; }
.sv_app-lista li div { display: flex; flex-direction: column; min-width: 0; }
.sv_app-lista b { font-size: 4.6cqw; font-weight: 600; }
.sv_app-lista span { color: #6b6b70; font-size: 3.9cqw; }
.sv_app-lista em { font-style: normal; color: #8a8a8e; font-size: 3.6cqw; }
.sv_app-lista li.is-cambia span { animation: svEstado .5s var(--ease-out); }
@keyframes svEstado { from { opacity: 0; transform: translateY(6px); } }
.sv_app-lista li.is-entra { animation: svEntraPedido .6s var(--ease-out); }
@keyframes svEntraPedido { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
.sv_app-lista li.is-sale { opacity: 0; transform: translateY(10px) scale(.96); }
.sv_app-aviso { position: absolute; left: 5cqw; right: 5cqw; top: 13cqw; padding: 3.4cqw 4cqw; border-radius: 4.4cqw; background: rgba(28, 28, 30, .92); color: #fff; font-size: 4cqw; font-weight: 500; transform: translateY(-160%); opacity: 0; }
.sv_app-aviso.is-on { animation: svAviso 2.4s var(--ease-out); }
@keyframes svAviso { 12%, 78% { transform: none; opacity: 1; } 100% { transform: translateY(-160%); opacity: 0; } }
.sv_app-fig figcaption { color: var(--soft); text-align: center; }
.sv_app-lista { flex: 0 1 auto; overflow: hidden; }
.sv_app-resumen { margin: 0 4cqw 3.4cqw; padding: 4cqw 4.4cqw; border-radius: 4.4cqw; background: #111; color: #fff; display: grid; grid-template-columns: 1fr auto; align-items: end; row-gap: 2.6cqw; }
.sv_app-resumen span { font-size: 3.8cqw; color: rgba(255, 255, 255, .6); }
.sv_app-resumen b { font-size: 9cqw; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.sv_app-resumen i { grid-column: 1 / -1; height: 1.6cqw; border-radius: 1cqw; background: rgba(255, 255, 255, .15); overflow: hidden; }
.sv_app-resumen em { display: block; height: 100%; background: #30d158; transform-origin: 0 50%; transform: scaleX(var(--p)); transition: transform .9s var(--ease-out); }
.sv_app [data-entregados].is-sube { animation: svSube .5s var(--ease-out); }
.sv_app-barra { margin-top: auto; display: flex; justify-content: space-around; padding: 3cqw 4cqw 8cqw; border-top: 1px solid rgba(0, 0, 0, .06); background: rgba(255, 255, 255, .92); font-size: 3.2cqw; color: #8a8a8e; }
.sv_app-barra span { display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; }
.sv_app-barra i { width: 5.6cqw; height: 5.6cqw; border-radius: 1.6cqw; background: currentColor; opacity: .35; }
.sv_app-barra .is-on { color: #3478f6; }
.sv_app-barra .is-on i { opacity: 1; }
/* la oficina: lo que pasa en el teléfono llega al instante */
.sv_app-fig { position: relative; }
.sv_app-oficina {
  position: absolute; left: 0; bottom: 16%; width: min(18rem, 46%); z-index: 2; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--line); font-size: .78rem;
  background: color-mix(in srgb, var(--main-black) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7); animation: svFlota 8s ease-in-out -3s infinite;
}
.sv_app-of-barra { display: flex; gap: 5px; align-items: center; height: 26px; padding: 0 10px; background: color-mix(in srgb, var(--pure) 6%, transparent); }
.sv_app-of-barra i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--pure) 25%, transparent); }
.sv_app-of-barra em { margin-left: auto; font-style: normal; color: var(--soft); font-size: .68rem; }
.sv_app-of-cab { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .35rem .8rem; padding: .9rem 1rem .7rem; }
.sv_app-sync { grid-column: 1 / -1; display: flex; align-items: center; gap: .45rem; color: var(--soft); font-size: .7rem; }
.sv_app-sync i { width: 6px; height: 6px; border-radius: 50%; background: #30d158; animation: svPulso 2s infinite; }
@keyframes svPulso { 0% { box-shadow: 0 0 0 0 rgba(48, 209, 88, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(48, 209, 88, 0); } }
.sv_app-of-cab b { grid-column: 2; grid-row: 2; color: var(--pure); font-size: 2rem; font-weight: 500; line-height: 1; letter-spacing: -.04em; }
.sv_app-of-cab > span:last-child { grid-column: 1; grid-row: 2; color: var(--white); }
.sv_app-of-lista { list-style: none; margin: 0; padding: 0 .55rem .6rem; display: flex; flex-direction: column; gap: .3rem; height: 7.6rem; overflow: hidden; }
.sv_app-of-lista li { flex: none; display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; align-items: center; padding: .5rem .55rem; border-radius: 8px; background: color-mix(in srgb, var(--pure) 4%, transparent); color: var(--white); }
.sv_app-of-lista b { font-weight: 500; color: var(--pure); }
.sv_app-of-lista span { color: var(--soft); }
.sv_app-of-lista em { font-style: normal; color: var(--soft); font-size: .7rem; }
.sv_app-of-lista li.is-entra { animation: svOfEntra .8s var(--ease-out); }
@keyframes svOfEntra { from { opacity: 0; transform: translateY(-10px); background: rgba(48, 209, 88, .28); } }

/* la cinta de temas */

/* las secciones */
.sv_seccion { padding: 7rem 0 0; }
.sv_cab { margin-bottom: 2.6rem; }
.sv_cab, .sv_rubro, .sv_cierre, .sv_otro, .sv_preguntas details {
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s var(--ease-out) var(--d, 0ms), transform .9s var(--ease-out) var(--d, 0ms), border-color .3s;
}
.is-visto { opacity: 1 !important; transform: none !important; }
html:not(.js) .sv_cab, html:not(.js) .sv_rubro, html:not(.js) .sv_cierre,
html:not(.js) .sv_otro, html:not(.js) .sv_preguntas details { opacity: 1; transform: none; }

/* «Qué incluye» de las páginas de servicio: número, nombre y bajada;
   sin líneas ni ilustraciones. */
.sv_ents { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 48px; }
.sv_ent { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 8px; align-content: start; }
.sv_ent-num { grid-row: 1 / 3; padding-top: 9px; font-family: var(--mono); font-size: 12px; color: var(--soft); }
.sv_ent-nombre { margin: 0; color: var(--pure); font-size: 28px; font-weight: 500; line-height: 1.1; letter-spacing: -.03em; }
.sv_ent-bajada { margin: 10px 0 0; color: var(--soft); font-size: 16px; line-height: 1.45; letter-spacing: -.01em; max-width: 30em; }
@media (max-width: 991px) { .sv_ents { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 32px; } }
@media (max-width: 600px) {
  .sv_ents { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .sv_ent-nombre { font-size: 24px; }
}

/* rubros: cada uno con su vídeo */
.sv_rubros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem 1.4rem; }
.sv_rubro { display: flex; flex-direction: column; gap: .35rem; }
.sv_rubro-media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 18px; margin-bottom: .9rem; background: var(--main-black); }
.sv_rubro-media video, .sv_otro-media video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-out); }
.sv_rubro:hover .sv_rubro-media video { transform: scale(1.04); }
.sv_rubro b { color: var(--pure); font-size: 1.25rem; font-weight: 600; letter-spacing: -.035em; }
.sv_rubro span { color: var(--soft); font-size: .95rem; line-height: 1.45; }

/* las preguntas: el título a la izquierda */
.sv_preguntas { margin-top: 0; max-width: none; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); column-gap: 4rem; align-items: start; }
.sv_preguntas .rc_preguntas-tit { grid-column: 1; grid-row: 1 / span 12; margin: 0; font-size: clamp(2rem, 4.4vw, 4.2rem); letter-spacing: -.045em; line-height: .98; text-wrap: balance; }
.sv_preguntas details { grid-column: 2; }
.sv_preguntas summary { padding: 1.4rem 0; font-size: 1.2rem; }

/* el cierre, grande */
.sv_cierre { margin-top: 7rem; padding: 6rem 0; border-block: 1px solid var(--line); text-align: center;
  background: radial-gradient(60% 80% at 50% 120%, color-mix(in srgb, var(--pure) 8%, transparent), transparent 70%); }
.sv_cierre .sv_kicker { text-align: center; }
.sv_cierre-tit { margin: 0 auto; max-width: 16ch; color: var(--pure); font-size: clamp(2.6rem, 6.6vw, 6.4rem); font-weight: 600; letter-spacing: -.055em; line-height: .95; text-wrap: balance; }
.sv_cierre-texto { margin: 1.6rem auto 0; max-width: 38rem; color: var(--soft); font-size: 1.05rem; line-height: 1.5; }
.sv_cierre .sv_acciones { justify-content: center; }

/* los otros servicios */
.sv_otros-sec { padding-bottom: 6rem; }
.sv_otros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.sv_otro { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .3rem .8rem; color: var(--pure); }
.sv_otro-media { grid-column: 1 / -1; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 16px; margin-bottom: .7rem; background: var(--main-black); }
.sv_otro:hover .sv_otro-media video { transform: scale(1.05); }
.sv_otro-n { font: 400 .74rem/1 var(--mono); color: var(--soft); }
.sv_otro b { font-size: 1.25rem; font-weight: 600; letter-spacing: -.035em; }
.sv_otro-ir { transition: transform .35s var(--ease-out); }
.sv_otro:hover .sv_otro-ir { transform: translateX(6px); }

@media (max-width: 991px) {
  .sv_hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 3rem; }
  .sv_demo .srv_fig { height: auto; }
  .sv_demo-app .srv_fig, .sv_demo-ia .srv_fig { height: 34rem; }
  .sv_rubros, .sv_otros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv_preguntas { grid-template-columns: minmax(0, 1fr); }
  .sv_preguntas .rc_preguntas-tit { grid-row: auto; margin-bottom: 1.5rem; }
  .sv_preguntas details { grid-column: 1; }
}
@media (max-width: 767px) {
  .sv_hero { padding: calc(var(--pad) + 4.6rem) 0 3rem; }
  .sv_migas { margin-bottom: 1.6rem; }
  .sv_acciones .rc_boton { flex: 1 1 100%; }
  .sv_seccion { padding-top: 4.5rem; }
  .sv_rubros, .sv_otros { grid-template-columns: minmax(0, 1fr); }
  .sv_cierre { margin-top: 4.5rem; padding: 4rem 0; }
  .sv_demo-app .srv_fig { height: 30rem; }
  .sv_app-oficina { width: 60%; bottom: 8%; font-size: .7rem; }
  .sv_app-of-cab { padding: .7rem .8rem .5rem; }
  .sv_app-of-cab b { font-size: 1.6rem; }
  .sv_app-of-lista { height: 4.6rem; }
  .sv_app-of-lista li { grid-template-columns: 1fr auto; gap: .4rem; padding: .4rem .5rem; white-space: nowrap; }
  .sv_app-of-lista em { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-listo .sv_w > span, .sv-listo .sv_lede, .sv-listo .sv_acciones, .sv-listo .sv_migas, .sv-listo .sv_hero .sv_kicker, .sv-listo .sv_demo,
  .sv_app-tel .dv_telefono, .sv_app-lista li, .sv_app-oficina, .sv_app-sync i { animation: none !important; }
  .sv_cab, .sv_rubro, .sv_cierre, .sv_otro, .sv_preguntas details { opacity: 1; transform: none; transition: none; }
}

/* ── 09k · La página de cada recurso (recursos/<slug>/) ─────────────
   La escribe productos/empaqueta.py. En escritorio (desde 1100 px), con el
   menú de Moxen arriba, la página es una sola pantalla: a la izquierda la
   escena de «Probar en vivo» —un laptop o un celular con la demo corriendo,
   lo más grande que da el alto, 09m— y a la derecha una columna angosta (≈ 29 %)
   de alto completo y con su propio scroll: ruta, categoría, título con su
   «Gratis», Descargar y Agregar al carrito, la frase, la descripción y la
   ficha. Debajo, a todo el ancho, «Más de…». En tableta (768–1099 px) el título
   y los botones van arriba, luego la escena y, después, el texto junto a la
   ficha; en el teléfono, todo en una columna. El reel no está aquí: queda en
   la tienda y en «Más de…». */
.rp { padding: calc(var(--pad) + 3.6rem) 0 6rem; }
/* tableta y teléfono: una columna; la rejilla llena al menos la primera pantalla (lo que sobra queda
   bajo el texto), así «Más de…» no asoma cortado ni queda tras el carrito flotante */
.rp_grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; row-gap: 1.1rem; align-items: end;
  grid-template-areas: "migas migas" "cab acc" "vivo vivo" "detalle detalle"; grid-template-rows: auto auto auto 1fr; min-height: calc(100svh - 8rem);
}
.rp_info { display: contents; }
.rp_migas { grid-area: migas; margin: 0; padding-top: .2rem; }
.rp_cab { grid-area: cab; min-width: 0; max-width: 100%; }
.rp_cat { margin: 0 0 .7rem; color: var(--soft); font: 400 .74rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.rp_cat a { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.rp_cat a:hover { color: var(--pure); text-decoration-color: currentColor; }
.rp_titulo { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.rp_nombre { margin: 0; color: var(--pure); font-size: clamp(2.4rem, 4.2vw, 3.2rem); font-weight: 600; line-height: .95; letter-spacing: -.05em; text-wrap: balance; }
.rp_acciones { grid-area: acc; display: flex; flex-wrap: wrap; gap: .6rem; }
.rp_acciones .rc_boton { min-height: 3rem; padding: 0 1.4rem; }
.rp_agrega.is-dentro { background: transparent; color: var(--pure); border-color: var(--soft); }

/* la frase, la descripción y la ficha (en tableta, el texto junto a la ficha) */
.rp_detalle { grid-area: detalle; align-self: start; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; column-gap: clamp(2rem, 5vw, 4rem); margin-top: 1.4rem; }
.rp_texto, .rp_lado { min-width: 0; }
.rp_frase { margin: 0; color: var(--pure); font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; }
.rp_desc { margin: .9rem 0 0; max-width: 62ch; color: color-mix(in srgb, var(--white) 76%, transparent); font-size: 1.1rem; line-height: 1.55; text-wrap: pretty; }
/* la ficha: etiqueta sobre valor, en filas con una línea fina entre ellas */
.rp_ficha { margin: .4rem 0 0; border-bottom: 1px solid var(--line); }
.rp_ficha > div { display: grid; gap: .3rem; padding: .85rem 0; border-top: 1px solid var(--line); }
.rp_ficha dt { color: var(--soft); font: 400 .78rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.rp_ficha dd { margin: 0; color: var(--white); font-size: 1.02rem; line-height: 1.45; overflow-wrap: anywhere; }
.rp_medida { display: inline-flex; gap: .4rem; margin-top: 1.7rem; color: var(--pure); font-weight: 500; }
.rp_medida:hover { text-decoration: underline; text-underline-offset: 3px; }
.rp_servicio { margin: .7rem 0 0; font-size: .98rem; }
.rp_servicio a { color: var(--soft); text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
.rp_servicio a:hover { color: var(--pure); }

.rp_mas { margin-top: clamp(4rem, 7vw, 6rem); }
.rp_mas-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; }
.rp_mas-cab .rp_mas-tit { margin-bottom: 0; }
.rp_mas-todas { flex: none; display: inline-flex; gap: .4rem; color: var(--pure); font-weight: 500; }
.rp_mas-todas i { font-style: normal; transition: transform .35s var(--ease-out); }
.rp_mas-todas:hover i { transform: translateX(4px); }
.rp_mas-tit { margin: 0 0 1.4rem; color: var(--pure); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 600; letter-spacing: -.045em; }
.rp_mas-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.rp_mini { display: grid; align-content: start; gap: .25rem; color: var(--pure); }
.rp_mini-media { aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: .55rem; border-radius: 12px; background: #0c0c0c; box-shadow: 0 0 0 1px var(--line); }
.rp_mini-media video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.rp_mini:hover video { transform: scale(1.04); }
.rp_mini b { font-size: 1rem; font-weight: 600; letter-spacing: -.025em; }
.rp_mini span:last-child { color: var(--soft); font-size: .85rem; line-height: 1.35; }

/* escritorio: una sola pantalla, la escena a la izquierda y la información en su columna */
@media (min-width: 1100px) {
  .rp_grid {
    grid-template-columns: minmax(0, 1fr) clamp(20rem, 29%, 30rem); grid-template-areas: "vivo info"; grid-template-rows: minmax(0, 1fr);
    column-gap: clamp(1.4rem, 2.4vw, 2.6rem); height: calc(100svh - 6.2rem); min-height: 34rem; align-items: stretch;
  }
  .rp_info {
    grid-area: info; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: stretch; overflow-y: auto;
    padding: 0 .5rem 1.4rem clamp(1.2rem, 2vw, 2rem); border-left: 1px solid var(--line);
    scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  }
  .rp_info > * { flex: none; }
  .rp_migas { margin-bottom: 1.8rem; padding-top: .1rem; }
  .rp_cab { max-width: none; }
  .rp_nombre { font-size: clamp(2.2rem, 2.6vw, 3rem); }
  .rp_acciones { display: grid; gap: .55rem; margin-top: 1.6rem; }
  .rp_acciones .rc_boton { min-height: 2.9rem; }
  .rp_acciones .rp_descarga { min-height: 3.5rem; font-size: 1rem; }
  .rp_detalle { display: block; margin-top: 2rem; }
  .rp_frase { font-size: 1.5rem; }
  .rp_ficha { margin-top: 1.5rem; }
}
@media (max-width: 991px) {
  .rp_mas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  /* teléfono: el título y los botones, y en seguida la escena (con el celular por defecto), que cabe en la
     primera pantalla por encima del idioma y el tema (fijos abajo a la derecha, hasta unos 4 rem del borde) */
  .rp { padding-top: calc(var(--pad) + 2.9rem); padding-bottom: 5rem; }
  .rp_grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "migas" "cab" "acc" "vivo" "detalle"; grid-template-rows: auto auto auto auto 1fr; row-gap: .75rem; align-items: start; }
  .rp_migas { padding-top: .2rem; }
  .rp_cat { margin-bottom: .45rem; }
  .rp_nombre { font-size: 2.3rem; }
  .rp_acciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .rp_acciones .rc_boton { min-height: 2.75rem; padding: 0 .6rem; }
  .rp_detalle { grid-template-columns: minmax(0, 1fr); row-gap: 1.8rem; margin-top: 1.4rem; }
  .rp_frase { font-size: 1.5rem; }
  .rp_desc { font-size: 1rem; }
  .rp_ficha > div { padding: .8rem 0; }
  .rp_medida { margin-top: 1.5rem; }
  .rp_mas { margin-top: 4rem; }
}

/* ── 09l · Los cuadros de «Descargar» y de pantalla completa ─────────
   Los escribe productos/empaqueta.py (dialogos) y los llenan carrito.js y
   vivo.js. «Descargar» pide el cupón y, ahí mismo, enseña el que regalamos
   con su botón «Copiar» y las redes; el de «Pantalla completa» (solo en la
   página de cada recurso) pone la escena de 09m a toda la ventana. */
.cd_dialogo {
  width: min(32rem, calc(100% - 1rem)); max-height: calc(100svh - 1rem); padding: 1.6rem 1.5rem 1.5rem; overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: 22px; background: var(--bg); color: var(--white);
}
.cd_dialogo::backdrop, .vv_dialogo::backdrop { background: rgba(0, 0, 0, .75); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cd_dialogo > form:first-of-type, .vv_cab > form { display: contents; }
.cd_tit { margin: 0; padding-right: 2.6rem; color: var(--pure); font-size: 1.6rem; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.cd_para { margin: .4rem 0 0; color: var(--soft); font-size: .95rem; line-height: 1.4; }
.cd_para:empty { display: none; }
.cd_aviso { margin: .9rem 0 0; padding: .8rem 1rem; border-radius: 12px; background: color-mix(in srgb, var(--pure) 7%, transparent); font-size: .88rem; line-height: 1.5; }
.cd_aviso[hidden] { display: none; }
.cd_form { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; margin-top: 1.2rem; }
.cd_form label { color: var(--white); font-size: .95rem; }
.cd_fila { display: flex; gap: .5rem; }
.cd_fila input {
  /* ancho 0 y que crezca: si no, su ancho propio empuja el botón fuera de la pantalla en 375 px */
  flex: 1 1 0; width: 0; min-width: 0; height: 46px; padding: 0 1.1rem; border-radius: 99px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--pure) 5%, transparent); color: var(--pure); font: inherit; letter-spacing: .06em; text-transform: uppercase;
}
.cd_fila input::placeholder { text-transform: none; letter-spacing: 0; color: var(--soft); }
.cd_fila input:focus { outline: none; border-color: var(--pure); }
.cd_fila .rc_boton { flex: none; min-height: 46px; }
.cd_msg { min-height: 1.2em; margin: 0; color: var(--soft); font-size: .88rem; line-height: 1.4; }
.cd_msg:empty { display: none; }
.cd_form.is-ok .cd_msg { color: #3ccf6e; }
.cd_form.is-mal .cd_msg { color: #ff5a4e; }
:root[data-theme="light"] .cd_form.is-ok .cd_msg { color: #1f9d4c; }
:root[data-theme="light"] .cd_form.is-mal .cd_msg { color: #d93a2f; }
/* el aviso del cupón de a una cuando hay varias: calmado, con lo que sí se puede hacer */
.cd_nota { padding: 1rem 1.05rem 1.05rem; border-radius: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--pure) 6%, transparent); }
.cd_nota[hidden] { display: none; }
.cd_nota p { margin: .5rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--white); }
.cd_nota .cd_nota-tit { margin: 0; color: var(--pure); font-size: 1rem; font-weight: 600; }
.cd_nota .rc_boton { margin-top: .85rem; }
.cd_parcial { justify-self: start; }
.cd_parcial[hidden] { display: none; }
/* el cupón regalado, a la vista */
.cd_regalo { display: grid; gap: .85rem; margin-top: 1.4rem; padding: 1.1rem 1.1rem 1.15rem; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--pure) 38%, transparent); background: color-mix(in srgb, var(--pure) 4%, transparent); }
.cd_regalo-tit { margin: 0; color: var(--white); font-size: .95rem; line-height: 1.5; text-wrap: pretty; }
.cd_cupon { display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .3rem .3rem .3rem 1.1rem; border-radius: 99px; border: 1px solid var(--line); background: var(--bg); }
.cd_cupon-texto { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: var(--pure); font: 600 1.1rem/1.2 var(--mono); letter-spacing: .06em; user-select: all; }
.cd_copiar { flex: none; min-height: 2.5rem; }
.cd_copiar.is-hecho { background: var(--pure); color: var(--bg); border-color: var(--pure); }
.cd_red { gap: .55rem; }
.cd_red svg { width: 1.1rem; height: 1.1rem; }
.cd_comunidad { display: grid; gap: .8rem; justify-items: start; margin-top: 1.2rem; padding: 0 .1rem; }
.cd_comunidad p { margin: 0; color: var(--soft); font-size: .9rem; line-height: 1.5; text-wrap: pretty; }
.cd_comunidad b { color: var(--pure); font-weight: 600; }

/* «Pantalla completa»: casi toda la ventana, con la misma escena de 09m */
.vv_dialogo {
  width: min(96vw, 1680px); max-width: none; height: min(94svh, 1000px); max-height: none; padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 22px; background: var(--bg); color: var(--white);
}
.vv_dialogo[open] { display: flex; flex-direction: column; }
/* tres columnas (título | selector | cerrar), las de los lados iguales: el selector queda en el centro exacto del cuadro */
.vv_cab { position: relative; flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .6rem 1rem; padding: .85rem 1.4rem; border-bottom: 1px solid var(--line); }
.vv_cab .vv_tit { grid-column: 1; grid-row: 1; justify-self: start; }
.vv_tit { margin: 0; display: flex; align-items: baseline; gap: .6rem; min-width: 0; color: var(--soft); font-size: .95rem; font-weight: 500; }
.vv_tit b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pure); font-size: 1.25rem; font-weight: 600; letter-spacing: -.03em; }
.vv_cab .rc_cerrar { position: static; grid-column: 3; grid-row: 1; justify-self: end; flex: none; }
.vv_escena {
  flex: 1 1 auto; min-height: 0; container-type: size; padding: 1.6rem 2rem 2rem;
  background: radial-gradient(90% 70% at 50% 100%, color-mix(in srgb, var(--pure) 8%, transparent), transparent 70%);
}
.vv_escena .eq_zona { width: 100%; height: 100%; --um: min(100cqw / 1547, 100cqh / 1011, 1px); --uc: min(100cqw / 430, 100cqh / 880, 1px); }
.vv_tabs { grid-column: 2; grid-row: 1; margin: 0; justify-self: center; }
@media (max-width: 991px) {
  .vv_dialogo { width: calc(100% - 1rem); height: calc(100svh - 1rem); border-radius: 18px; }
  /* en pantalla estrecha: el título y el cierre arriba, y el selector centrado en su propia fila */
  .vv_cab { grid-template-columns: minmax(0, 1fr) auto; padding: .7rem 1rem; }
  .vv_cab .rc_cerrar { grid-column: 2; grid-row: 1; }
  .vv_tabs { grid-column: 1 / -1; grid-row: 2; }
  .vv_escena { padding: 1rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .cd_dialogo[open], .vv_dialogo[open] { animation: cdEntra .4s var(--ease-out); }
  @keyframes cdEntra { from { opacity: 0; transform: translateY(14px) scale(.985); } }
}
@media (prefers-reduced-motion: reduce) {
  .carrito_boton { animation: none; }
}

/* ── 09m · La escena de «Probar en vivo» ─────────────────────────────
   Un laptop o un celular con la demo del recurso corriendo dentro: dos iframe
   (1280 × 805 y 390 × 844, los tamaños de pantalla de un MacBook Pro y de un
   iPhone) escalados detrás de los marcos de los equipos reales, que son
   imágenes con la pantalla transparente (assets/img/equipos/). Los pone
   productos/empaqueta.py (dispositivos), los carga al acercarse y los escala
   vivo.js (--k). Se ve un equipo a la vez, en el mismo sitio, sin sombras ni
   adornos: el selector de dos íconos (un laptop y un celular, con su píldora
   que se desliza) cambia de uno a otro con una animación —el que sale se
   achica, se inclina y se desvanece con un leve desenfoque; el que entra llega
   con un resorte desde el lado contrario— y, con movimiento reducido, con un
   fundido. En escritorio la escena llena el alto que deja el menú de arriba
   (el selector y «Pantalla completa» van en sus esquinas); en tableta y
   teléfono va a todo el ancho, con su barrita de herramientas encima.
   Las medidas: --um es lo que mide en pantalla cada px de la página que se
   enseña en el laptop y --uc, en el celular.
   Marcos: macbook-*.webp 2200 × 1437 (pantalla en 238, 34 de 2279 × 1476
   sobre 2755 × 1800; la muesca se come los primeros 42 px, que van de «barra de
   menús» negra, y la demo empieza debajo) e iphone.webp 870 × 1781 (pantalla en
   41, 35 de 789 × 1711). La plata se ve sobre fondo oscuro y el negro sobre claro. */
:root {
  --eq-mac: url("../img/equipos/macbook-plata.webp");
  --eq-cel: url("../img/equipos/iphone.webp");
  --eq-resorte: cubic-bezier(.34, 1.35, .64, 1);
}
:root[data-theme="light"] {
  --eq-mac: url("../img/equipos/macbook-negro.webp");
}
.eq_zona {
  --um: min(100cqw / 1547, .9px);
  --uc: min(100cqw / 430, max(.5px, (100svh - 9rem) / 880), .9px);
  isolation: isolate; perspective: 1900px;
  /* los dos equipos en la misma celda, del alto del escenario (aunque uno sea más alto, se centra y se sale) */
  display: grid; grid-template-rows: 100%; place-items: center;
}
.eq_pieza { position: relative; grid-area: 1 / 1; transform-origin: 50% 62%; will-change: transform, opacity;
  /* entra: con un resorte, un instante después de que el otro empieza a salir */
  transition: transform .65s var(--eq-resorte) .07s, opacity .4s ease .07s, filter .5s ease .07s, visibility 0s;
}
.eq_pieza.is-mac { --u: var(--um); width: calc(1547 * var(--u)); }
.eq_pieza.is-cel { --u: var(--uc); width: calc(430 * var(--u)); }
/* el que no se ve: apartado hacia su lado, achicado, inclinado y desenfocado */
.eq_zona[data-vista="celular"] .is-mac,
.eq_zona:not([data-vista="celular"]) .is-cel {
  visibility: hidden; opacity: 0; pointer-events: none; filter: blur(8px);
  transition: transform .5s cubic-bezier(.6, 0, .85, .45), opacity .36s ease, filter .42s ease, visibility 0s linear .5s;
}
.eq_zona[data-vista="celular"] .is-mac { transform: translate3d(-7%, 0, 0) rotateY(18deg) scale(.8); }
.eq_zona:not([data-vista="celular"]) .is-cel { transform: translate3d(7%, 0, 0) rotateY(-18deg) scale(.8); }
.eq_equipo { position: relative; width: 100%; }
.eq_mac { aspect-ratio: 2200 / 1437; }
.eq_cel { aspect-ratio: 870 / 1781; }
/* el hueco de la pantalla de cada marco, en porcentajes del marco */
/* el negro se pasa un poco por debajo del bisel, para que no quede una rendija clara en el borde */
.eq_pantalla { position: absolute; overflow: hidden; background: #000; box-shadow: 0 0 0 calc(6 * var(--u)) #000; }
/* con las esquinas de cada pantalla (28 px arriba en el laptop, 120 px en el celular), que si no el negro de debajo asoma por fuera del marco */
.eq_mac .eq_pantalla { left: 8.6388%; top: 1.8889%; width: 82.7223%; height: 82%; border-radius: 1.23% 1.23% 0 0 / 1.9% 1.9% 0 0; }
.eq_cel .eq_pantalla { left: 4.7126%; top: 1.9652%; width: 90.6897%; height: 96.0696%; border-radius: 15.2% / 7%; }
/* la demo, a su medida natural y escalada con --k (lo fija vivo.js a partir del ancho de la pantalla);
   la pantalla se enciende cuando ya cargó (así no hay un destello blanco en el tema oscuro) */
.eq_iframe { position: absolute; left: 0; top: 0; display: block; border: 0; background: #fff; transform-origin: 0 0; transform: scale(var(--k, .5)); opacity: 0; transition: opacity .45s ease .1s; }
.eq_iframe.is-listo { opacity: 1; }
/* el celular se usa con el dedo (vivo.js): una capa recoge el ratón y lo manda a la demo como toques;
   el cursor es un círculo del tamaño de una yema, que se achica al apretar */
.eq_tactil { position: absolute; inset: 0; z-index: 2; cursor: none; touch-action: none; }
.eq_dedo {
  position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, .28); border: 1.5px solid rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 4px 14px rgba(0, 0, 0, .25);
  opacity: 0; transition: opacity .2s, width .15s, height .15s, margin .15s, background-color .15s;
}
.eq_tactil.is-dentro .eq_dedo { opacity: 1; }
.eq_tactil.is-apretado .eq_dedo { width: 26px; height: 26px; margin: -13px 0 0 -13px; background: rgba(255, 255, 255, .5); }
html.mx-sobre-tactil .mx-cursor { opacity: 0 !important; }
.eq_mac .eq_iframe { top: 2.8455%; width: 1280px; height: 805px; }
.eq_cel .eq_iframe { width: 390px; height: 844px; }
.eq_marco { position: absolute; inset: 0; background: center / 100% 100% no-repeat; pointer-events: none; }
.eq_mac .eq_marco { background-image: var(--eq-mac); }
.eq_cel .eq_marco { background-image: var(--eq-cel); }

/* el selector «Escritorio | Móvil»: una píldora pequeña con dos íconos y una pastilla que se desliza de uno a otro */
.eq_selector {
  position: relative; isolation: isolate; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: .22rem; border: 1px solid var(--line); border-radius: 99px;
  background: color-mix(in srgb, var(--bg) 70%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.eq_pildora {
  position: absolute; z-index: -1; top: .22rem; bottom: .22rem; left: .22rem; width: calc((100% - .44rem) / 2);
  border-radius: 99px; background: var(--pure); transition: transform .55s var(--eq-resorte);
}
.eq_selector[data-vista="celular"] .eq_pildora { transform: translateX(100%); }
.eq_selector button {
  display: grid; place-items: center; width: 2.7rem; height: 2.15rem; padding: 0; border: 0; border-radius: 99px; cursor: pointer;
  background: none; color: var(--soft); transition: color .3s;
}
.eq_selector button svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.eq_selector button:hover { color: var(--pure); }
.eq_selector button[aria-selected="true"], .eq_selector button[aria-pressed="true"] { color: var(--bg); }
.eq_selector button:focus-visible { outline: 2px solid var(--pure); outline-offset: 2px; }

/* la escena dentro de la página del recurso */
.eq_escena { grid-area: vivo; position: relative; min-width: 0; scroll-margin-top: 4.5rem; outline: none; overflow-x: clip; container-type: inline-size; }
.eq_cab { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; min-height: 2.6rem; margin-bottom: .6rem; }
/* el título de la sección queda solo para los lectores de pantalla */
.eq_tit { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.eq_pleno { display: inline-flex; align-items: center; gap: .45rem; height: 2.15rem; padding: 0 .9rem 0 .75rem; border-radius: 99px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--soft); font: inherit; font-size: .82rem; font-weight: 500; white-space: nowrap; cursor: pointer; transition: color .25s, border-color .25s; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.eq_pleno:hover { color: var(--pure); border-color: var(--soft); }
.eq_pleno:focus-visible { outline: 2px solid var(--pure); outline-offset: 2px; }
.eq_pleno svg { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* tableta y teléfono: a todo el ancho, y el escenario con el alto del equipo que se ve */
.eq_escena .eq_zona { transition: height .6s var(--ease-out); }
.eq_escena .eq_zona[data-vista="celular"] { height: calc(880.2 * var(--uc)); }
.eq_escena .eq_zona:not([data-vista="celular"]) { height: calc(1010.5 * var(--um)); }
/* en el teléfono la escena va justo bajo el título y los botones (09k): el selector va al centro y el celular se
   achica lo justo para caber entero en la primera pantalla */
@media (max-width: 767px) {
  .eq_zona { --uc: min(100cqw / 430, max(.5px, (100svh - 21.5rem) / 880), .9px); }
  .eq_cab { justify-content: center; min-height: 0; margin-bottom: .4rem; }
  .eq_pleno { display: none; }
}
/* escritorio: la escena llena el alto de la pantalla, con el equipo lo más grande que quepa; «Pantalla completa» y,
   debajo, el selector van en la esquina de arriba a la derecha, sobre la escena */
@media (min-width: 1100px) {
  .eq_escena { height: 100%; container-type: size; overflow: clip; }
  .eq_cab { position: absolute; z-index: 3; top: 0; left: auto; right: 0; margin: 0; min-height: 0; pointer-events: none;
            display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; }
  .eq_cab > * { pointer-events: auto; }
  /* «Pantalla completa» arriba y debajo el selector, los dos a la derecha: el puntero no cruza la pantalla de uno a otro */
  .eq_pleno { order: 1; }
  .eq_selector { order: 2; }
  /* abajo se deja libre una franja para el carrito flotante (abajo a la izquierda): no tapa el equipo */
  .eq_escena .eq_zona, .eq_escena .eq_zona[data-vista] { position: absolute; inset: 0 0 4rem 0; height: auto; transition: none;
    --um: min(100cqw / 1547, (100cqh - 4rem) * .96 / 1011, 1px); --uc: min(100cqw / 430, (100cqh - 4rem) * .96 / 880, 1px); }
}

/* con movimiento reducido: sin inclinar, achicar ni desenfocar, solo un fundido */
@media (prefers-reduced-motion: reduce) {
  /* la regla general de movimiento reducido (sección 10) deja todo en 1 ms: aquí el fundido sí dura */
  .eq_pieza { transition: opacity .25s linear .08s, visibility .25s; transition-duration: .25s !important; transform: none; filter: none; will-change: auto; }
  .eq_zona[data-vista="celular"] .is-mac, .eq_zona:not([data-vista="celular"]) .is-cel {
    transition: opacity .25s linear, visibility .25s linear; transition-duration: .25s !important; transform: none; filter: none;
  }
  .eq_pildora, .eq_escena .eq_zona, .eq_iframe { transition: none; }
}

/* ── 09f2 · Plantillas ──────────────────────────────────────────────
   La segunda pestaña de Recursos: la misma vitrina (filtros, grilla), con
   tarjetas que llevan el tipo, el crédito al autor y «La quiero para mi
   negocio». */

/* las dos pestañas, grandes: son la primera decisión de la página */
.rc_pestanas {
  display: inline-flex; gap: .3rem; margin-top: 2.6rem; padding: .3rem;
  border: 1px solid var(--line); border-radius: 500rem;
}
.rc_pestanas button {
  display: inline-flex; align-items: baseline; gap: .45rem; height: 2.9rem; padding: 0 1.4rem;
  border: 0; border-radius: 500rem; cursor: pointer; background: none; color: var(--soft);
  font: inherit; font-size: 1.05rem; font-weight: 500; letter-spacing: -.01em; line-height: 2.9rem;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out);
}
.rc_pestanas button i { font-style: normal; font-size: .8rem; opacity: .6; font-variant-numeric: tabular-nums; }
.rc_pestanas button:hover { color: var(--pure); }
.rc_pestanas button.is-on { background: var(--pure); color: var(--bg); }
.rc_pestanas button:focus-visible { outline: 2px solid var(--pure); outline-offset: 2px; }
.rc_panel[hidden] { display: none; }
.pl_lede { margin: 2.2rem 0 0; max-width: 46rem; color: var(--white); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.45; }
.pl_pasos { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 60rem; counter-reset: paso; }
.pl_pasos li { counter-increment: paso; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; gap: .3rem; }
.pl_pasos li::before { content: "0" counter(paso); font: 400 .72rem/1 var(--mono); color: var(--soft); }
.pl_pasos b { color: var(--pure); font-weight: 500; font-size: 1.05rem; }
.pl_pasos span { color: var(--soft); font-size: .92rem; line-height: 1.4; }
.pl_grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pl_tarjeta { min-width: 0; display: flex; flex-direction: column; }
.pl_tarjeta[hidden] { display: none; }
/* los rubros largos se parten en dos líneas en vez de empujar la tarjeta */
.pl_tarjeta .rc_cat { flex: 0 1 auto; min-width: 0; text-align: right; line-height: 1.35; }
.pl_vista { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 14px; background: var(--main-black); box-shadow: 0 0 0 1px var(--line); }
.pl_vista .rc_video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pl_tipo { position: absolute; left: .7rem; top: .7rem; padding: .3rem .6rem; border-radius: 99px; background: rgba(10, 10, 10, .72); color: #fff;
  font-size: .7rem; font-weight: 500; letter-spacing: .06em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pl_credito { margin: .45rem 0 0; color: var(--soft); font-size: .78rem; }
.pl_quiero { margin-top: .8rem; width: fit-content; color: var(--pure); font-size: .92rem; font-weight: 500; }
.pl_quiero span { display: inline-block; transition: transform .35s var(--ease-out); }
.pl_quiero:hover span { transform: translateX(5px); }
.pl_nota { margin: 4rem 0 0; max-width: 46rem; color: var(--soft); font-size: .88rem; line-height: 1.5; }
@media (max-width: 991px) { .pl_grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .pl_pasos { grid-template-columns: minmax(0, 1fr); }
  .pl_grilla { grid-template-columns: minmax(0, 1fr); }
  /* en el teléfono las pestañas ocupan el ancho, mitad y mitad */
  .rc_pestanas { display: flex; margin-top: 2rem; }
  .rc_pestanas button { flex: 1; justify-content: center; padding: 0 .8rem; font-size: 1rem; }
}

/* ── 09f3 · La tienda: buscador y categorías a un lado, la cuadrícula al lado ──
   El patrón de Collect UI para la pestaña «Animaciones»: a la izquierda una
   barra fija con el buscador y las categorías (un ícono de línea cada una,
   sin conteos); a la derecha el título y la cuadrícula de tarjetas suaves, con
   la vista previa, la categoría y «Gratis». Al hacer clic se abre el visor
   grande (.rc_dialogo) con el reel y los datos, y flechas para seguir con el
   que sigue. En el teléfono la barra pasa a una fila de chips que se desliza. */
.section_recursos {
  --rc-tarjeta: color-mix(in srgb, var(--pure) 5%, var(--bg));
  --rc-tarjeta-sobre: color-mix(in srgb, var(--pure) 8%, var(--bg));
  --rc-anillo: color-mix(in srgb, var(--pure) 9%, transparent);
  --rc-anillo-sobre: color-mix(in srgb, var(--pure) 20%, transparent);
}
:root[data-theme="light"] .section_recursos {
  --rc-tarjeta: #f8f8f8; --rc-tarjeta-sobre: #fdfdfd;
  --rc-anillo: rgba(0, 0, 0, .07); --rc-anillo-sobre: rgba(0, 0, 0, .2);
}
.rc_sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
/* el ícono de una categoría: 18 px, trazo de 1,6 */
.rc_ico { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.rc_tienda { margin-top: 2.2rem; }
.rc_lateral { min-width: 0; }
.rc_principal { min-width: 0; margin-top: 1.8rem; }

/* las categorías: en el teléfono, chips en una fila que se desliza */
.rc_cats { position: relative; display: flex; gap: .4rem; margin: .9rem calc(var(--pad) * -1) 0; padding: .15rem var(--pad) .3rem; overflow-x: auto; scrollbar-width: none; }
.rc_cats::-webkit-scrollbar { display: none; }
.rc_cats button {
  flex: none; display: inline-flex; align-items: center; gap: .55rem; height: 2.6rem; padding: 0 1rem 0 .85rem;
  border: 1px solid var(--line); border-radius: 99px; background: none; color: var(--soft);
  font-size: .95rem; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s;
}
.rc_cats button:hover { color: var(--pure); border-color: var(--soft); }
.rc_cats button.is-on { background: var(--pure); border-color: var(--pure); color: var(--bg); }
.rc_cats button:focus-visible { outline: 2px solid var(--pure); outline-offset: 2px; }
/* mientras se busca, la búsqueda manda sobre las categorías: ninguna se ve elegida */
.rc_cats.is-buscando button.is-on { background: none; border-color: var(--line); color: var(--soft); }

.rc_sec-tit { margin: 0 0 1.3rem; color: var(--pure); font-size: clamp(1.6rem, 2.1vw, 2.2rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.1; text-wrap: balance; }
.rc_sec-tit [hidden] { display: none; }

.rc_tienda .rc_grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
@media (max-width: 419px) { .rc_tienda .rc_grilla { grid-template-columns: minmax(0, 1fr); } }

/* la tarjeta: fondo suave, la vista previa, el nombre y, abajo, la categoría y «Gratis» */
.rc_tienda .rc_tarjeta {
  position: relative; display: flex; flex-direction: column; padding: .75rem .75rem .9rem; border-radius: 16px;
  background: var(--rc-tarjeta); box-shadow: inset 0 0 0 1px var(--rc-anillo);
  transition: background-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.rc_tienda .rc_tarjeta[hidden] { display: none; }
.rc_tienda .rc_tarjeta:hover { background: var(--rc-tarjeta-sobre); box-shadow: inset 0 0 0 1px var(--rc-anillo-sobre); }
/* toda la tarjeta es el botón que abre el visor */
.rc_vista { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 11px; text-align: left; }
.rc_vista::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.rc_vista:focus-visible { outline: none; }
.rc_vista:focus-visible::after { outline: 2px solid var(--pure); outline-offset: 2px; }
.rc_marco {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 11px; background: #000;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 10px 26px -14px rgba(0, 0, 0, .55);
}
.rc_marco > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
/* la imagen fija va debajo; el vídeo aparece sobre ella cuando ya corre */
.rc_marco .rc_video { opacity: 0; transition: transform .8s var(--ease-out), opacity .35s; }
.rc_marco .rc_video.is-listo { opacity: 1; }
.rc_tienda .rc_tarjeta:hover .rc_marco > * { transform: scale(1.035); }
.rc_tienda .rc_nombre { margin: .95rem .25rem 0; font-size: 1.12rem; line-height: 1.2; letter-spacing: -.03em; text-wrap: balance; }
.rc_pie { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: .75rem .25rem 0; }
/* la etiqueta de categoría: un ícono y el nombre, en una cajita */
.rc_tienda .rc_cat, .rc_d-info .rc_cat {
  display: inline-flex; align-items: center; gap: .5rem; flex: 0 1 auto; min-width: 0; height: 1.9rem; padding: 0 .65rem 0 .55rem;
  border: 1px solid var(--line); border-radius: 8px; color: var(--soft);
  font-size: .68rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; line-height: 1;
}
.rc_tienda .rc_cat span, .rc_d-info .rc_cat span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc_tienda .rc_tarjeta .rc_gratis { margin: 0; flex: none; }

@media (min-width: 1000px) {
  .rc_tienda { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 0 2.8rem; align-items: start; margin-top: 2.8rem; }
  /* la barra se queda a la vista mientras se recorre la cuadrícula (y se desliza sola si la ventana es baja) */
  .rc_lateral {
    position: sticky; top: calc(var(--pad) + 3.7rem); max-height: calc(100svh - var(--pad) - 3.7rem - 1rem);
    margin: 0 -.6rem; padding: .25rem .6rem .5rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  }
  /* con el botón flotante del carrito abajo a la izquierda, la barra le deja su sitio (y se desliza por dentro) */
  body:has(.carrito_boton:not([hidden])) .rc_lateral { max-height: calc(100svh - var(--pad) - 3.7rem - 5rem); }
  .rc_principal { margin-top: 0; }
  .rc_cats { flex-direction: column; gap: 1px; margin: 1rem 0 0; padding: 0; overflow: visible; }
  .rc_cats button {
    width: 100%; height: auto; min-height: 2.1rem; padding: .3rem .8rem; gap: .85rem; border: 0; border-radius: 9px;
    font-size: 1rem; letter-spacing: -.015em; text-align: left; white-space: normal;
  }
  .rc_cats button:hover { background: color-mix(in srgb, var(--pure) 6%, transparent); color: var(--pure); border-color: transparent; }
  .rc_cats button.is-on { background: color-mix(in srgb, var(--pure) 10%, transparent); color: var(--pure); border-color: transparent; }
  .rc_cats.is-buscando button.is-on { background: none; color: var(--soft); }
  .rc_cats.is-buscando button.is-on:hover { background: color-mix(in srgb, var(--pure) 6%, transparent); color: var(--pure); }
  .rc_tienda .rc_grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
}
@media (min-width: 1700px) { .rc_tienda .rc_grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── el visor ──────────────────────────────────────────────────────────
   Casi a pantalla completa: a la izquierda el escenario con el reel vertical
   (y las flechas «Anterior» y «Siguiente»); a la derecha, los datos y los
   botones. En el teléfono, una sola columna: el reel, el título con «Gratis»
   y los botones caben en la pantalla sin hacer scroll; sin descripción. */
.rc_dialogo {
  --rc-escena: color-mix(in srgb, var(--pure) 5%, var(--bg));
  width: min(160rem, calc(100% - 2rem)); max-width: none; height: calc(100svh - 2rem); max-height: none; padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 22px; background: var(--bg); color: var(--white);
  touch-action: pan-y pinch-zoom;
}
.rc_dialogo[open] { display: grid; grid-template-columns: minmax(0, 1fr) clamp(21rem, 31vw, 37rem); grid-template-rows: minmax(0, 1fr); animation: rc-abre .45s var(--ease-out); }
.rc_dialogo[open]::backdrop { animation: rc-fondo .4s ease-out; }
@keyframes rc-abre { from { opacity: 0; transform: translateY(16px) scale(.985); } }
@keyframes rc-fondo { from { opacity: 0; } }
.rc_dialogo > form { display: contents; }
.rc_d-escena {
  position: relative; container-type: size; display: grid; place-items: center; min-height: 0; padding: 1.8rem;
  background: var(--rc-escena); border-right: 1px solid var(--line);
}
.rc_d-reel {
  position: relative; display: block; padding: 0; border: 0; cursor: pointer; overflow: hidden; background: #000; border-radius: 18px;
  height: 100%; aspect-ratio: 9 / 16; max-width: 100%;
  box-shadow: 0 0 0 1px var(--line), 0 40px 90px -40px rgba(0, 0, 0, .7);
}
@supports (height: 1cqh) { .rc_d-reel { height: min(100cqh, calc(100cqw * 16 / 9)); } }
.rc_d-reel:focus-visible { outline: 2px solid var(--pure); outline-offset: 3px; }
/* si un recurso no tuviera reel, va su vídeo apaisado */
.rc_d-reel.es-ancho { aspect-ratio: 16 / 10; height: auto; width: min(100%, 60rem); }
.rc_d-video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; opacity: 0; visibility: hidden; }
.rc_d-video.is-actual { opacity: 1; visibility: visible; }
.rc_flecha {
  position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 3.1rem; height: 3.1rem; margin-top: -1.55rem; padding: 0;
  border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--pure); cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s, transform .35s var(--ease-out);
}
.rc_flecha.es-ant { left: 1.3rem; }
.rc_flecha.es-sig { right: 1.3rem; }
.rc_flecha[hidden] { display: none; }
.rc_flecha svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rc_flecha:hover { background: var(--pure); color: var(--bg); border-color: var(--pure); }
.rc_flecha.es-ant:hover { transform: translateX(-3px); }
.rc_flecha.es-sig:hover { transform: translateX(3px); }
.rc_flecha:focus-visible { outline: 2px solid var(--pure); outline-offset: 3px; }
.rc_d-cuerpo { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2.3rem 2.2rem 2.2rem; }
.rc_d-info { display: flex; flex-direction: column; align-items: flex-start; }
.rc_d-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.1rem; }
.rc_d-nombre { margin: 0; color: var(--pure); font-size: clamp(2rem, 3.2vw, 3.2rem); font-weight: 600; letter-spacing: -.05em; line-height: 1; text-wrap: balance; }
.rc_d-acciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; width: 100%; margin-top: 1.5rem; }
.rc_d-acciones .es-lleno { grid-column: 1 / -1; }
.rc_d-acciones .rc_boton { min-height: 2.9rem; }
.rc_d-frase { margin: 1.9rem 0 0; color: var(--pure); font-size: 1.3rem; line-height: 1.3; letter-spacing: -.025em; text-wrap: balance; }
.rc_d-desc { margin: .9rem 0 0; line-height: 1.55; opacity: .82; text-wrap: pretty; }
.rc_d-ficha { display: grid; gap: .95rem; width: 100%; margin: 1.8rem 0 0; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.rc_d-ficha dt { margin: 0 0 .3rem; color: var(--soft); font: 400 .68rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.rc_d-ficha dd { margin: 0; color: var(--white); font-size: .95rem; line-height: 1.45; overflow-wrap: anywhere; }
.rc_d-medida { margin-top: 1.4rem; padding-left: 0; }

/* teléfono (y pantallas bajas): una sola columna, todo a la vista */
@media (max-width: 719px), (max-height: 519px) {
  .rc_dialogo { width: calc(100% - 1rem); height: auto; max-height: calc(100svh - 1rem); overflow: auto; overscroll-behavior: contain; border-radius: 20px; }
  .rc_dialogo[open] { display: block; }
  .rc_d-escena { height: max(14rem, calc(100svh - 1rem - 3px - 11.5rem)); padding: .7rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .rc_d-reel { border-radius: 14px; }
  .rc_flecha { width: 2.6rem; height: 2.6rem; margin-top: -1.3rem; background: color-mix(in srgb, var(--bg) 62%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .rc_flecha.es-ant { left: .6rem; }
  .rc_flecha.es-sig { right: .6rem; }
  .rc_flecha svg { width: 1.15rem; height: 1.15rem; }
  .rc_d-cuerpo { overflow: visible; padding: .85rem 1rem 1rem; }
  .rc_d-info .rc_cat, .rc_d-frase, .rc_d-desc, .rc_d-ficha, .rc_d-medida { display: none; }
  .rc_d-titulo { margin-top: .1rem; gap: .4rem .8rem; }
  .rc_d-nombre { font-size: 1.7rem; }
  .rc_d-acciones { margin-top: .8rem; }
  .rc_d-acciones .rc_boton { min-height: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rc_dialogo[open], .rc_dialogo[open]::backdrop { animation: none; }
  .rc_marco > *, .rc_flecha { transition: none; }
  .rc_tienda .rc_tarjeta:hover .rc_marco > *, .rc_flecha.es-ant:hover, .rc_flecha.es-sig:hover { transform: none; }
}

/* ── 09h · Vitrina B: el tambor ──────────────────────────────────────
   El título, la frase y la ficha del recurso a la izquierda; a la derecha,
   ventanas con su vídeo, montadas en un cilindro que gira con el scroll
   (vitrinas.js). La del centro, de frente; las demás, de canto. */
.section_vitrina-b { position: relative; background: var(--bg); }
/* el tambor a la izquierda y el texto a la derecha, juntos y al centro:
   se leen como una sola pieza y no como dos cosas sueltas en los bordes */
.vb_caja { height: 100svh; display: grid; grid-template-columns: auto minmax(0, 30rem); justify-content: center; column-gap: clamp(3rem, 7vw, 7.5rem); align-items: center; padding: 0 var(--pad); overflow: hidden; }
.vb_texto { max-width: 30rem; }
.vb_kicker { margin: 0 0 1rem; font: 400 .8rem/1 var(--mono); color: var(--soft); letter-spacing: .06em; }
.vb_titulo { margin: 0; color: var(--pure); font-weight: 700; font-size: clamp(3rem, 6.4vw, 6.6rem); line-height: .9; letter-spacing: -.055em; }
/* la frase que va diciendo para qué sirve lo que está de frente */
.vb_lema { margin: 1.4rem 0 0; min-height: 1.3em; color: var(--white); font-size: clamp(1.2rem, 1.9vw, 1.7rem); font-weight: 500; line-height: 1.2; letter-spacing: -.025em; }
.vb_ficha { margin-top: 1.6rem; min-height: 5.5rem; }
.vb_ficha.is-entra { animation: vbEntra .6s var(--ease-out); }
@keyframes vbEntra { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }
/* en el teléfono, sin desenfoque: sube y aparece */
@keyframes vbEntraSimple { from { opacity: 0; transform: translateY(10px); } }
@media (pointer: coarse) { .vb_ficha.is-entra { animation-name: vbEntraSimple; } }
.vb_nombre { margin: 0; color: var(--pure); font-size: 1.5rem; font-weight: 500; letter-spacing: -.02em; }
.vb_frase { margin: .4rem 0 0; color: var(--soft); line-height: 1.45; max-width: 28rem; }
.vb_todo { display: inline-flex; gap: .4rem; margin-top: 1.6rem; padding: .8rem 1.3rem; border: 1px solid var(--line); border-radius: 99px; color: var(--pure); font-weight: 500; }
.vb_todo:hover { border-color: var(--soft); }
.vb_todo span { transition: transform .35s var(--ease-out); }
.vb_todo:hover span { transform: translateX(5px); }
.vb_tambor { position: relative; order: -1; width: min(40vw, 60svh); height: 100%; display: grid; place-items: center; perspective: 2200px; }
/* Un prisma de seis caras: la del frente y, a 60°, la de arriba y la de
   abajo, con un respiro entre ellas; siempre se ven tres. Cada cara es una
   lámina rectangular, en la proporción de las animaciones: un paspartú (un
   trozo ampliado de la misma animación) con la pantalla enmarcada al
   centro, la categoría arriba y el nombre abajo. */
.vb_eje { position: relative; width: 100%; aspect-ratio: 16 / 11; transform-style: preserve-3d; }
.vb_carta {
  position: absolute; inset: 0; display: block; overflow: hidden; border-radius: 22px;
  background: #151515; box-shadow: 0 0 0 1px var(--line), 0 40px 70px -40px rgba(0, 0, 0, .8);
  backface-visibility: hidden; will-change: transform;
}
.vb_mate {                        /* un trozo ampliado de la misma animación, como foto de fondo */
  position: absolute; inset: 0; background-size: 260%; background-position: 50% 45%;
  filter: blur(11px) grayscale(1) brightness(.98) contrast(1.25);
}
.vb_mate::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(0, 0, 0, .55)); }
.vb_carta::after {                 /* un brillo arriba, como luz sobre el paspartú */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), transparent 38%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.vb_marco {
  position: absolute; left: 10%; right: 10%; top: 13%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px;
  background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 28px 50px -18px rgba(0, 0, 0, .8);
}
.vb_marco video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vb_cat { position: absolute; left: 1.2rem; top: 1rem; z-index: 1; color: rgba(255, 255, 255, .62); font: 400 .66rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.vb_rotulo { position: absolute; left: 1.2rem; bottom: .8rem; z-index: 1; color: #fff; font-size: .92rem; font-weight: 500; letter-spacing: -.01em; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.vb_sombra { position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; pointer-events: none; will-change: opacity; }
/* los puntos de avance, junto al tambor */
.vb_puntos { position: absolute; left: clamp(-2.6rem, -2.4vw, -1.2rem); top: 50%; display: flex; flex-direction: column; gap: .55rem; transform: translateY(-50%); }
.vb_puntos i { width: 5px; height: 5px; border-radius: 50%; background: var(--pure); opacity: .25; transition: opacity .3s, transform .4s var(--ease-out); }
.vb_puntos i.is-on { opacity: 1; transform: scale(1.5); }
.vb_puntos i.es-corte { margin-top: .6rem; }
[data-theme="light"] .vb_carta { background: #d9d9d9; }
[data-theme="light"] .vb_mate { filter: blur(11px) grayscale(1) brightness(1.12) contrast(1.05); }
[data-theme="light"] .vb_mate::after { background: radial-gradient(120% 90% at 50% 40%, transparent 35%, rgba(0, 0, 0, .3)); }

@media (max-width: 767px) {
  .vb_caja { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); padding-top: calc(var(--pad) + 4.4rem); align-items: start; }
  .vb_texto { padding-left: 0; }
  .vb_titulo { font-size: clamp(2.6rem, 13vw, 3.6rem); }
  .vb_lema { margin-top: .7rem; font-size: 1.1rem; }
  .vb_ficha { margin-top: .7rem; min-height: 4.2rem; }
  .vb_nombre { font-size: 1.2rem; }
  .vb_frase { font-size: .9rem; }
  .vb_todo { margin-top: .8rem; padding: .6rem 1.1rem; font-size: .9rem; }
  .vb_texto { position: relative; z-index: 2; }
  .vb_tambor { order: 0; width: min(80vw, 34svh * 16 / 11); }
  .vb_carta { border-radius: 16px; }
  .vb_cat { left: .8rem; top: .6rem; font-size: .5rem; }
  .vb_rotulo { left: .8rem; bottom: .45rem; font-size: .78rem; }
  /* el tambor, centrado en la columna */
  .vb_tambor { justify-self: center; }
}
/* sin los puntitos al lado del tambor: solo el tambor (14-10) */
.vb_puntos { display: none; }

/* ── 10 · Footer ───────────────────────────────────────────────────── */
.footer_wrapper { padding-top: 6rem; }
.footer_top-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding-bottom: 6rem; }
/* Sin la columna de redes —Instagram va con el contacto— la nota se
   queda en la cuarta, alineada con la de los atajos del hero. */
.footer_top-column.is-nota { grid-column: 4; }
/* Instagram con su ícono, del cuerpo del texto y en su mismo color */
.con-ico, .hero_type-atajos .con-ico { display: inline-flex; align-items: center; gap: .42em; }
.ico-ig { flex: none; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7; }
/* En el pie y en los atajos va solo el ícono (el nombre está en su
   aria-label): un poco más grande, para que se lea y se pueda pulsar. */
.con-ico .ico-ig { width: 1.35em; height: 1.35em; }
/* Contacto: Instagram, WhatsApp, Telegram y correo, en una fila de íconos */
.contacto_iconos { display: flex; align-items: center; gap: .95rem; margin-top: .45rem; }
.contacto_iconos a { display: inline-grid; place-items: center; color: var(--white); opacity: .85; transition: opacity .2s, transform .2s; }
.contacto_iconos a:hover, .contacto_iconos a:focus-visible { opacity: 1; transform: translateY(-1px); }
.contacto_iconos svg { width: 1.35em; height: 1.35em; }
.ico-tg, .ico-mail { flex: none; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.hero_type-atajos .contacto_iconos a { width: auto; min-height: 0; }
.ico-ig .lleno { fill: currentColor; stroke: none; }
.ico-wa { flex: none; width: 1em; height: 1em; }
.ico-wa .borde { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.ico-wa .lleno { fill: currentColor; }
.hero_rapido { display: none; }
.footer_link-title { margin-bottom: 1rem; }
.footer_link-title .h3 { font-size: 1.125rem; font-weight: 500; color: var(--soft); }
.footer_link-list { display: flex; flex-direction: column; gap: .3rem; }
.footer_link-list-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.footer_link-wrap { font-size: 1.125rem; letter-spacing: -.02em; color: var(--white); width: fit-content; position: relative; }
.footer_link-wrap::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease-out); }
.footer_link-wrap:hover::after { transform: scaleX(1); }
/* el wordmark llena el ancho; se recorta por si la palabra excede */
.footer_bottom-wrapper { position: relative; overflow: hidden; }
html.has-marca .footer_big-text { visibility: hidden; }
.footer_big-text {
  font-size: 24.6vw; font-weight: 500; letter-spacing: -.05em;
  line-height: 80%; color: var(--white); text-align: left;
}
.footer_bottom-left-side { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; padding: 1.5rem 0; }
.footer_bottom-img-wrapper { width: 10rem; aspect-ratio: 3/4; overflow: hidden; }
/* Fuera de la portada no baja ninguna marca volando a ocupar el remate, y
   se veía «Moxen» en la letra del texto. Aquí el remate se escribe él
   mismo con la del logotipo y a lo ancho de la columna, que es como queda
   la portada al aterrizar: «MOXEN» en Adoria mide 4,19 veces su cuerpo. */
.footer_logo-text-wrapper.es-marca { container-type: inline-size; }
.es-marca .footer_big-text {
  font-family: "Adoria", "General Sans", system-ui, sans-serif;
  text-transform: uppercase; font-weight: 400; letter-spacing: 0; line-height: 1;
  font-size: 22vw; font-size: 23.8cqw;
}
.footer_bottom-img-wrapper img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.footer_bottom-terms-wrapper { display: flex; gap: 1.25rem; justify-self: end; }
/* Sin la foto que tenía al lado, la columna de los términos quedaba sola en
   la mitad izquierda de la rejilla y la fila salía al medio: va a lo ancho
   y apoyada a la derecha (en tableta y teléfono sigue a la izquierda). */
@media (min-width: 992px) {
  .footer_bottom-left-col:only-child { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
}

/* ── 10b · Reveals genéricos (estado inicial sin JS visible) ───────── */
html.js [data-anim="in"] { opacity: 0; }
html.js [data-anim="lines"] { visibility: hidden; }

/* ── 10c · Loader M ✕ N (heredado del sitio anterior) ──────────────── */
@font-face {
  font-family: "Adoria";
  src: url("../fonts/Adoria.otf") format("opentype"),
       url("../fonts/Adoria.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: block;
}
#mx-loader {
  position: fixed; inset: 0; z-index: 99999;
  background: var(--loader-bg);
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .6s var(--ease-out), visibility 0s linear .6s;
}
html:not(.is-preloading) #mx-loader {
  opacity: 0; visibility: hidden; pointer-events: none; transition-delay: 0s, .6s;
}

/* ── 10d · Responsive ──────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .slide_body { grid-template-columns: 6rem 1fr 1fr; }
  .slide_shot { grid-column: 1 / -1; max-width: 22rem; }
}
@media (max-width: 991px) {
  :root { --nav-h: 7rem; }
  .nav_contain { grid-template-columns: 1fr auto; align-items: center; }
  .nav_col, .nav_cta { display: none; }
  .nav_burger { display: block; font-size: .8125rem; }
  .nav_mobile {
    position: fixed; inset: 0; z-index: 60; background: var(--bg);
    display: flex; flex-direction: column; justify-content: center; gap: 1rem;
    padding: var(--pad); opacity: 0; visibility: hidden;
  }
  .nav_mobile.is-open { opacity: 1; visibility: visible; }
  .nav_mobile a { font-size: 2rem; font-weight: 500; letter-spacing: -.03em; color: var(--pure); }
  .nav_mobile .close { position: absolute; top: var(--pad); right: var(--pad); font-size: .8125rem; }
  /* debajo de las secciones, los datos para escribir */
  .nav_mobile-contacto { display: flex; flex-direction: column; gap: .15rem; margin-top: 1.8rem; }
  .nav_mobile .nav_mobile-contacto a {
    display: inline-flex; align-items: center; gap: .55em; width: fit-content;
    font-size: 1.05rem; font-weight: 400; letter-spacing: -.01em; color: var(--white);
  }
  .nav_mobile-contacto .ico-wa, .nav_mobile-contacto .ico-ig, .nav_mobile-contacto .ico-tg, .nav_mobile-contacto .ico-mail { width: 1.1em; height: 1.1em; }

  .hero_top { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero_title-wrap { justify-content: flex-start; padding-top: 2rem; }
  .hero_title-wrap .h1 { text-align: left; }
  .hero_bottom { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero_cta-wrap { justify-self: start; text-align: left; align-items: flex-start; }

  .approach_grid { grid-template-columns: 1fr; }
  .approach_media { aspect-ratio: 4 / 3; }

  /* trabajos: la imagen pasa arriba y la lista debajo, sin anclaje */
  .section_works { height: auto; padding: 4rem 0 5rem; }
  .spotlight-images {
    position: relative; top: auto; left: auto; transform: none;
    width: calc(100% - var(--pad) * 2); margin: 0 var(--pad) 2rem;
    clip-path: none;
  }
  .spotlight-img { position: absolute; }
  .spotlight-img.is-on { opacity: 1; }
  .spotlight-titles-container { position: relative; inset: auto; height: auto; }
  .spotlight-titles { left: auto; width: auto; padding: 0 var(--pad); gap: .35rem; }
  .h2_works { font-size: 2.25rem; opacity: 1; white-space: normal; }

  .section_disciplines { min-height: 70svh; }
  .disciplines_mark { width: 150vw; top: 42%; }
  .disciplines_grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .section_long-title .container-global { height: auto; padding: 5rem 0; }
  .long-title { white-space: normal; font-size: clamp(2.6rem, 12vw, 6rem); }

  .service_slide { height: auto; }
  .content-wrapper { perspective: none; height: auto; }
  .slide-content { position: relative; inset: auto; min-height: 70svh;
                   border-radius: .8rem; margin: 0 1rem; }
  .slide_canto { display: none; }
  .slide_body { grid-template-columns: 1fr; gap: 1rem; }
  .slide_shot { max-width: none; }

  .section_team { height: auto; margin-top: 6rem; }
  .team_sticky { position: relative; height: auto; }
  .team-sticky_top-wrapper, .team-sticky-top_desc { grid-template-columns: 1fr; }
  .team-sticky_bottom-wrapper { position: relative; left: auto; right: auto; bottom: auto; grid-template-columns: 1fr; margin-top: 2rem; }
  .team-sticky_h2-wrap .h2 { text-align: left; }
  .team_cards { gap: 3rem; padding-top: 3rem; }
  .team-cards_row { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .team-card_wrapper { width: 100%; min-width: 0; }
  .team-cards_column.is-2, .team-cards_column.is-mid { justify-self: stretch; }
  .team-cards_column:empty { display: none; }

  .reviews_grid { grid-template-columns: 1fr; }
  .reviews_aside { position: relative; top: auto; }
  .review_row { grid-template-columns: 2.5rem 1fr; }
  .review_row .txt { grid-column: 1 / -1; }

  .section_form { margin-top: 5rem; }

  .footer_top-wrapper { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .footer_top-column.is-nota { grid-column: 1 / -1; }
  .footer_bottom-left-side { grid-template-columns: 1fr; }
  .footer_bottom-terms-wrapper { justify-self: start; }
}
/* tipografía móvil, con los mismos valores que la referencia */
@media (max-width: 767px) {
  .p, .label { font-size: 1rem; }
  .h1 { font-size: 3rem; line-height: 100%; }
  .h1.is-hero { font-size: 3rem; max-width: 100%; }
  .about-text { font-size: 2rem; line-height: 115%; }
  .h2_works { font-size: 13vw; }
  .h2 { font-size: 3rem; letter-spacing: -.02em; }
  .h2.is-team, .team-sticky_top .h2, .team-sticky_h2-wrap .h2 { font-size: 4rem; }
  .slide_head .h2 { font-size: 4.7rem; max-width: none; }
  .footer_big-text { font-size: 31vw; }   /* «Moxen» = 5 letras; la referencia usa 38vw para 6 */
  .slide_num { font-size: 3rem; }
  .nav_logo .wordmark { width: 11rem; }
  .team_bg-text { font-size: 28vw; }
  .review_row .idx, .review_row .who, .review_row .txt,
  .slide_body p, .slide_body .tag, .slide_foot,
  .approach_note p, .approach_note .tag, .footer_link-wrap,
  .nav_link, .nav_cta, .cta-link, .team_card-info .role { font-size: 1rem; }
}
@media (max-width: 600px) {
  @keyframes mxSpreadL { to { transform: translateX(calc(-50vw + 62px)); } }
  @keyframes mxSpreadR { to { transform: translateX(calc(50vw - 62px)); } }
}
@media (max-width: 479px) {
  .about-text { font-size: 3.5vh; }
  .slide_head .h2 { font-size: 3rem; }
  .h2.is-team, .team-sticky_top .h2, .team-sticky_h2-wrap .h2 { font-size: 3.1rem; }
}

/* ── 10e · Sin animación ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #mx-loader { display: none; }
  html.js [data-anim="in"] { opacity: 1; }
  html.js [data-anim="lines"] { visibility: visible; }
  .section_works { height: auto; }
  .spotlight-titles { position: relative; left: auto; }
  .spotlight-images { clip-path: none; }
  .h2_works { opacity: 1; }
  .section_team { height: auto; }
  .team_sticky { position: relative; height: auto; }
  .pin-height { height: auto; }
  .container-global.is-about { position: relative; height: auto; padding: 5rem 0; }
  .service_slide { height: auto; }
  .slide-content { position: relative; inset: auto; }
  .content-wrapper { perspective: none; height: auto; }
  * { animation-duration: .001s !important; transition-duration: .001s !important; }
}

/* ── 11 · Hero tipográfico ─────────────────────────────────────────
   La marca en Adoria ocupa el hero. Cada letra tiene dos capas que se
   funden entre sí: al cambiar de tipografía una se disuelve mientras la
   otra toma forma, en vez de reemplazarse de golpe.
   ------------------------------------------------------------------ */
.hero_type {
  min-height: 100svh;
  display: flex; align-items: center;
  padding: var(--pad);
  position: relative;
}
/* Clavada al viewport: el centrado y el encogido con el scroll se hacen
   con transform, así que no debe irse con la página. El JS la cuelga del
   body para que no quede encerrada en el apilamiento de la portada: al
   final del encogido tiene que verse por encima de la píldora. */
.hero_type-inner {
  position: fixed; top: 0; left: var(--pad); right: var(--pad);
  z-index: 30; will-change: transform; pointer-events: none;
}
.hero_type-inner .hero_word { pointer-events: auto; }
/* la bajada sale del flujo para que lo que quede centrado en la pantalla
   sea la palabra, no el bloque entero */
/* Todo el pie del hero cuelga por debajo de la palabra, fuera del flujo,
   para que lo que quede centrado en pantalla sea la marca y no el bloque
   entero. Va junto —bajada y navegación— porque se va junto con el scroll. */
/* Con la navegación arriba a la izquierda, la bajada se va al otro lado:
   así el hero queda equilibrado y ninguna de las dos pisa a la marca. */
.hero_type-inner .hero_type-foot {
  position: absolute; top: 100%; right: 0; margin-top: clamp(1rem, 3vh, 2rem);
  text-align: right; will-change: opacity, transform;
}
.hero_type-inner .hero_type-sub { max-width: none; }

.hero_word {
  margin: 0 0 clamp(1.5rem, 5vh, 3rem);
  /* flex-end y no baseline: la línea base la calcula cada tipografía y
     bastaría con que una cambie para desplazar la fila entera */
  display: flex; flex-wrap: nowrap; align-items: flex-end;
  /* ciñe la caja a la palabra: así la barra de barrido la cubre justa */
  width: fit-content;
  font-family: "Adoria", "General Sans", system-ui, sans-serif;
  font-size: clamp(4.5rem, 19vw, 20rem);
  font-weight: 400; line-height: 1; letter-spacing: 0;
  color: var(--pure);
  user-select: none;
}
@keyframes mxFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-1.3%) rotate(.5deg); }
  50%      { transform: translateY(.7%)   rotate(0deg); }
  75%      { transform: translateY(-.7%)  rotate(-.5deg); }
}
/* arranca al terminar la entrada, para no pelearse con la apertura */
/* toda la palabra se mueve junta, como un solo objeto */
.hero_word.is-float { animation: mxFloat 7.5s ease-in-out infinite; }
/* en el remate del pie la marca manda: se mueve más que en la portada */
@keyframes mxFloatAmplio {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-2.6%) rotate(1deg); }
  50%      { transform: translateY(1%)    rotate(0deg); }
  75%      { transform: translateY(2.6%)  rotate(-1deg); }
}
.hero_word.is-float.is-amplio { animation: mxFloatAmplio 6s ease-in-out infinite; }
/* Al ocupar el sitio de la barra la palabra se vuelve el logotipo: es la
   misma, y pasa a pintarse en negativo como el resto de la barra, así se
   lee sobre cualquier fondo por el que cruce. El modo de mezcla va en la
   caja y no en la palabra: si lo llevara ella, su propia capa la aislaría
   del fondo de la página y no se mezclaría con nada. */
.hero_type-inner.is-marca { mix-blend-mode: difference; }
.hero_type-inner.is-marca .hero_word { color: #fff; }

.hw {
  /* flex: none es imprescindible: sin él flexbox encoge las letras cuando
     la suma roza el ancho del contenedor, y al cambiar de tipografía
     reparte distinto y la palabra entera se mueve. */
  flex: 0 0 auto;
  position: relative; height: 1em;
}
@media (hover: hover) { .hw { cursor: pointer; } }

/* las dos capas ocupan el mismo hueco; el JS alinea sus líneas base */
.hw-l {
  position: absolute; left: 0; right: 0; top: 0;
  text-align: center; line-height: 1;
  transition: opacity .38s var(--ease-out), filter .38s var(--ease-out);
  will-change: opacity, filter;
}
/* En el teléfono las letras no cambian de tipografía al pasar el dedo, así
   que el filtro sobra; la opacidad no, que con el scroll se funden las
   fotos de la X y sin capa propia repintaría la palabra entera. */
@media (pointer: coarse) { .hw-l { will-change: opacity; } }
.hw-l.is-out { opacity: 0; }
.hw-l[data-fill].is-out { opacity: 0; }
/* el cruce entre rellenos es un poco más largo que el de las caras */
.hw--x .hw-l { transition: opacity .13s var(--ease-out); }

/* ── caras ── */
.hw-l[data-face="sans"]   { font-family: "General Sans", system-ui, sans-serif; font-weight: 600; }
.hw-l[data-face="serif"]  { font-family: "Zodiak", Georgia, serif; font-weight: 700; }
.hw-l[data-face="italic"] { font-family: "Zodiak", Georgia, serif; font-weight: 700; font-style: italic; }
.hw-l[data-face="mono"]   { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; }
.hw-l[data-face="type"]   { font-family: "Courier New", Courier, monospace; font-weight: 700; }
.hw-l[data-face="pixel"]  { font-family: "Silkscreen", ui-monospace, monospace; font-weight: 700; }
.hw-l[data-face="slab"]   { font-family: Georgia, "Times New Roman", serif; font-weight: 700; }
.hw-l[data-face="black"]  { font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif; font-weight: 900; }
.hw-l[data-face="cond"]   { font-family: Impact, Haettenschweiler, "Arial Narrow", sans-serif; font-weight: 400; }
/* la de periódico: la letra se rellena con la foto en blanco y negro */
.hw-l[data-face="news"] {
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.30) 0 1px, transparent 1px 3px),
    url("https://images.unsplash.com/photo-1566378246598-5b11a0d486cc?auto=format&fit=crop&w=900&q=70");
  background-size: auto, cover; background-position: center;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: saturate(1.2) contrast(1.5) brightness(1.15);
}
.hw-l[data-face="news"].is-out { filter: grayscale(1) contrast(1.5) blur(.06em); }

/* el mockup del inicio, dentro de la X */
/* alto y posición los fija el JS: deben coincidir con la altura de
   mayúscula de las letras y apoyarse en su misma línea base */
.hw-sprite {
  position: absolute; left: 50%;
  transform: translateX(-50%);
  overflow: hidden; opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease-out);
}
.hw-sprite.is-on { opacity: 1; }
.hw-sprite i { display: block; width: 100%; height: 100%; overflow: hidden; position: relative; }
.hw-sprite i::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 900%;
  background: url("../img/loader/strip.jpg") 0 0 / 100% 100% no-repeat;
  animation: mxFlip 1.6s steps(9) infinite;
  animation-play-state: paused;
}
.hw-sprite.is-on i::before { animation-play-state: running; }
@keyframes mxFlip { to { transform: translateY(-100%); } }

/* ── rellenos de la X: la letra se convierte en una ventana ────────
   A todo color; la trama de líneas les deja grano de imprenta sin
   apagarlos. */
[data-fill] {
  background-repeat: no-repeat;
  background-size: auto, cover;
  background-position: center;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: saturate(1.2) contrast(1.45) brightness(1.1);
}

/* Diario · Rishabh Sharma */
[data-fill="diario"] {
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    url("https://images.unsplash.com/photo-1566378246598-5b11a0d486cc?auto=format&fit=crop&w=900&q=70");
  filter: saturate(1.2) contrast(1.45) brightness(1.1);
}
/* Libros · Ed Robertson */
[data-fill="libros"] {
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    url("https://images.unsplash.com/photo-1550399105-c4db5fb85c18?auto=format&fit=crop&w=900&q=70");
  filter: saturate(1.2) contrast(1.4) brightness(1.2);
}
/* Antiguo · Martin Grincevschi */
[data-fill="antiguo"] {
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    url("https://images.unsplash.com/photo-1512396015886-b3a9b75818d1?auto=format&fit=crop&w=900&q=70");
  filter: saturate(1.2) contrast(1.35) brightness(1.15);
}
/* Laptop · charlesdeluvio */
[data-fill="laptop"] {
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 4px),
    url("https://images.unsplash.com/photo-1511376777868-611b54f68947?auto=format&fit=crop&w=900&q=70");
  filter: saturate(1.2) contrast(1.55) brightness(1.3);
}
/* Celular · Jonas Leupe */
[data-fill="celular"] {
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 4px),
    url("https://images.unsplash.com/photo-1592890288564-76628a30a657?auto=format&fit=crop&w=900&q=70");
  filter: saturate(1.2) contrast(1.5) brightness(1.25);
}
/* Tablet · Roberto Nickson */
[data-fill="tablet"] {
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 4px),
    url("https://images.unsplash.com/photo-1561154464-82e9adf32764?auto=format&fit=crop&w=900&q=70");
  filter: saturate(1.2) contrast(1.6) brightness(1.35);
}
/* Industria · Ant Rozetsky */
[data-fill="industria"] {
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    url("https://images.unsplash.com/photo-1496247749665-49cf5b1022e9?auto=format&fit=crop&w=900&q=70");
  filter: saturate(1.2) contrast(1.45) brightness(1.2);
}
/* Camion · Bhargav Panchal */
[data-fill="camion"] {
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    url("https://images.unsplash.com/photo-1766785368863-f2188a8c8b32?auto=format&fit=crop&w=900&q=70");
  filter: saturate(1.2) contrast(1.4) brightness(1.15);
}
/* Impresora · Mahrous Houses */
[data-fill="impresora"] {
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 4px),
    url("https://images.unsplash.com/photo-1612815154858-60aa4c59eaa6?auto=format&fit=crop&w=900&q=70");
  filter: saturate(1.2) contrast(1.55) brightness(1.25);
}
/* Mueble · Eugene Chystiakov */
[data-fill="mueble"] {
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    url("https://images.unsplash.com/photo-1581539250439-c96689b516dd?auto=format&fit=crop&w=900&q=70");
  filter: saturate(1.2) contrast(1.45) brightness(1.2);
}
/* Auto · Serge Kutuzov */
[data-fill="auto"] {
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    url("https://images.unsplash.com/photo-1493031534415-e40b830b1099?auto=format&fit=crop&w=900&q=70");
  filter: saturate(1.2) contrast(1.5) brightness(1.25);
}

/* PRUEBA (07-10-2026): fotos propias en la X del hero y del cursor. Son
   personas, así que el filtro es más suave que en los rellenos de objetos:
   con el contraste de esos, las caras se quemaban. */
[data-fill^="f"] { filter: saturate(1.08) contrast(1.12) brightness(1.04); }
[data-fill="f01"] { background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.1) 0 1px, transparent 1px 3px), url("../img/x/x01.jpg"); }
[data-fill="f02"] { background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.1) 0 1px, transparent 1px 3px), url("../img/x/x02.jpg"); }
[data-fill="f03"] { background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.1) 0 1px, transparent 1px 3px), url("../img/x/x03.jpg"); }
[data-fill="f04"] { background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.1) 0 1px, transparent 1px 3px), url("../img/x/x04.jpg"); }
[data-fill="f05"] { background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.1) 0 1px, transparent 1px 3px), url("../img/x/x05.jpg"); }
[data-fill="f06"] { background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.1) 0 1px, transparent 1px 3px), url("../img/x/x06.jpg"); }
[data-fill="f07"] { background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.1) 0 1px, transparent 1px 3px), url("../img/x/x07.jpg"); }
[data-fill="f08"] { background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.1) 0 1px, transparent 1px 3px), url("../img/x/x08.jpg"); }
[data-fill="f09"] { background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.1) 0 1px, transparent 1px 3px), url("../img/x/x09.jpg"); }
[data-fill="f10"] { background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.1) 0 1px, transparent 1px 3px), url("../img/x/x10.jpg"); }
[data-fill="f11"] { background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.1) 0 1px, transparent 1px 3px), url("../img/x/x11.jpg"); }
[data-fill="f12"] { background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.1) 0 1px, transparent 1px 3px), url("../img/x/x12.jpg"); }

/* ── encendido de tubo: la letra entra con interferencia ──────────
   El destello va en el contenedor y el resto en la letra: si el filtro
   viviera en la misma capa pisaría el gris de los rellenos. */
@keyframes mxTvGlow {
  0%   { filter: brightness(6) blur(3px); }
  8%   { filter: brightness(2.4) blur(0); }
  16%  { filter: none; }
  68%  { filter: brightness(1.7); }
  100% { filter: none; }
}
@keyframes mxTvOn {
  0%   { opacity: 0; transform: scaleY(.03) scaleX(1.25); }
  8%   { opacity: 1; transform: scaleY(1.12) scaleX(.99); }
  14%  { transform: scaleY(.94) scaleX(1.01); }
  20%  { transform: none; }
  28%  { clip-path: inset(10% 0 48% 0); transform: translateX(-.05em);
         text-shadow: .035em 0 rgba(255,255,255,.5), -.035em 0 rgba(130,130,130,.65); }
  34%  { clip-path: inset(56% 0 6% 0);  transform: translateX(.045em); }
  40%  { clip-path: inset(26% 0 36% 0); transform: translateX(-.03em); }
  46%  { clip-path: inset(0 0 0 0); transform: none; text-shadow: none; }
  54%  { clip-path: inset(72% 0 2% 0); transform: translateX(.035em); opacity: .82;
         text-shadow: .02em 0 rgba(255,255,255,.4), -.02em 0 rgba(130,130,130,.55); }
  60%  { clip-path: inset(0 0 0 0); transform: none; opacity: 1; text-shadow: none; }
  100% { clip-path: inset(0 0 0 0); transform: none; opacity: 1; }
}
/* Aparición suave: surge difuminada y se va definiendo. */
@keyframes mxSoftIn {
  0%   { opacity: 0; filter: blur(.18em); transform: scale(1.05); }
  60%  { opacity: 1; }
  100% { opacity: 1; filter: blur(0); transform: none; }
}
.hw.is-soft .hw-l { animation: mxSoftIn .95s cubic-bezier(.22, 1, .36, 1) both; }

.hw.is-tv { animation: mxTvGlow .78s steps(40, end); }
.hw.is-tv .hw-l { animation: mxTvOn .78s steps(60, end); transform-origin: 50% 62%; }
/* con relleno de imagen el texto es transparente: las sombras estorbarían */
.hw-l[data-fill] { text-shadow: none !important; }

/* Sin capa de rayas: se pintaba sobre una caja y en oscuro dejaba un
   rectángulo gris alrededor de la letra. El corte de la señal ya lo dan
   los recortes y el destello del propio encendido. */
.hw.is-off .hw-l, .hw.is-off .hw-sprite { opacity: 0; }

/* Barra de barrido: el mismo gesto que revela los títulos de «Áreas de
   trabajo». Cubre la palabra entera de una pasada —no letra a letra— y al
   retirarse la deja puesta o quitada. */
.hw-bar {
  position: absolute; left: -.04em; top: 0;
  width: calc(100% + .08em); height: 100%;
  background: rgb(var(--reveal-block));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .34s cubic-bezier(.76, 0, .24, 1);
  pointer-events: none; z-index: 3;
}
.hw-bar.is-in  { transform: scaleX(1); transform-origin: 0 50%; }
.hw-bar.is-out { transform: scaleX(0); transform-origin: 100% 50%; }
/* la palabra cambia de cuerpo entre la entrada pequeña y el hero: crece
   tapada por la barra, que al ser hija suya crece con ella */
.hero_word { position: relative; transition: none; }
.hero_word.is-morph { transition: font-size .5s cubic-bezier(.76, 0, .24, 1); }
.hero_word.is-morph .hw { transition: width .5s cubic-bezier(.76, 0, .24, 1); }
.hero_type-inner.is-morph { transition: transform .5s cubic-bezier(.76, 0, .24, 1); }

/* entrada: M y N pegadas a la X, y O y E aún sin aparecer */
.hero_word.is-intro .hw-l { transition: none; }
.hero_word .hw { transition: transform 1.15s cubic-bezier(.76, 0, .24, 1); }
.hero_word .hw-l { }
.hw--o, .hw--e { transition: opacity .7s var(--ease-out); }

/* la bajada entra al final, cuando la palabra grande ya está escrita */
.hero_type-sub { opacity: 0; transition: opacity .9s var(--ease-out); }
html.is-ready .hero_type-sub { opacity: 1; }
/* cada letra esquiva el cursor por su cuenta */
.hero_type-sub i {
  display: inline-block; font-style: inherit;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
/* Navegación del hero: mismas columnas que el pie, pero arriba a la
   derecha, bajo el interruptor. Clavada al viewport, y se va con el
   scroll a la vez que la bajada. */
/* Las mismas cuatro columnas del pie y con sus mismas medidas: rejilla de
   cuatro, título de 1.125rem sobre los enlaces del mismo cuerpo, sin más
   adorno. Aquí van clavadas arriba, ocupando el ancho de la página. */
.hero_type-atajos {
  position: fixed; top: calc(var(--pad) + 2.6rem);
  left: var(--pad); right: auto; width: min(76%, calc(100% - var(--pad) * 2));
  z-index: 29; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
  align-items: start;
  opacity: 0; transition: opacity .9s var(--ease-out);
  will-change: opacity, transform;
}
html.is-ready .hero_type-atajos { opacity: 1; }
.hero_type-atajos .col { display: flex; flex-direction: column; gap: .3rem; }
.hero_type-atajos .tit {
  font-size: 1.125rem; font-weight: 500; color: var(--soft); margin-bottom: .7rem;
}
.hero_type-atajos a {
  font-size: 1.125rem; letter-spacing: -.02em; color: var(--white);
  width: fit-content;
}
.hero_type-atajos .is-nota p {
  margin: 0; font-size: 1.125rem; line-height: 1.35;
  letter-spacing: -.02em; color: var(--white);
}
/* tres columnas en la rejilla de cuatro: la nota, en la última, como en el pie */
.hero_type-atajos .is-nota { grid-column: 4; }
.hero_type-atajos a:hover,
.hero_type-atajos a:focus-visible { color: var(--pure); }

/* Es el <h1> de la página —dice qué hace Moxen, que es lo que leen los
   buscadores—, pero se ve como la bajada que siempre fue. */
.hero_type-sub {
  margin: 0; max-width: 40ch; font-weight: 400;
  font-size: clamp(1.05rem, 1.5vw, 1.5rem);
  line-height: 1.35; letter-spacing: -.03em; color: var(--white);
}


@media (max-width: 700px) {
  .hero_word { font-size: clamp(3.5rem, 22vw, 8rem); }
}
/* en pantalla estrecha solo cabe lo imprescindible */
@media (max-width: 1100px) {
  .hero_type-atajos { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  /* sin la columna de redes, la nota ya cabe en la tercera */
  .hero_type-atajos .is-nota { grid-column: 3; }
  .hero_type-atajos .tit, .hero_type-atajos a, .hero_type-atajos .is-nota p { font-size: 1rem; }
}
@media (max-width: 820px) {
  .hero_type-atajos { grid-template-columns: 1fr 1fr; }
  .hero_type-atajos .is-nota { grid-column: 1 / -1; }
}

/* ── 12 · Navegación en píldora ────────────────────────────────────
   En el hero no hay barra: manda la marca en grande. Al bajar aparece
   la píldora. Va en `difference`, así que se ve siempre en negativo de
   lo que tenga detrás: sobre blanco se vuelve negra y al revés.
   ------------------------------------------------------------------ */
.nav_wrapper.is-pill {
  position: fixed; inset: var(--pad) 0 auto 0;
  min-height: 0; padding-top: 0;
  pointer-events: none;
  mix-blend-mode: difference;
  transition: transform .55s var(--ease-out), opacity .45s var(--ease-out);
}
.nav_wrapper.is-pill .padding-global,
.nav_wrapper.is-pill .container-global { padding: 0; max-width: none; }

/* Sin caja ni fondo: la marca y los dos controles, y nada más. Las
   columnas 1fr · auto · 1fr clavan la marca en el centro exacto pase lo
   que pase a los lados, que es de donde no se puede mover. */
.nav_wrapper.is-pill .nav_contain {
  pointer-events: none;
  width: min(72rem, calc(100% - var(--pad) * 2));
  margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 1.15rem;
  background: none; border-radius: 0; padding: 0;
}
.nav_wrapper.is-pill .nav_contain a,
.nav_wrapper.is-pill .nav_contain button { pointer-events: auto; }
/* al ir en `difference`, lo que se pinta blanco sale en negativo del fondo */
.nav_wrapper.is-pill .nav_contain * { color: #fff; }

/* orden: menú y enlaces · marca · acción */
.nav_wrapper.is-pill .nav_izq     { grid-area: 1 / 1; justify-self: end; }
.nav_wrapper.is-pill .nav_logo    { grid-area: 1 / 2; justify-self: center; width: auto; max-width: none; }
.nav_wrapper.is-pill .nav_actions { grid-area: 1 / 3; justify-self: start; }

/* El bloque de la izquierda: el botón y, al abrirse, los enlaces. Crecen
   hacia la izquierda, así que la marca no se entera. */
.nav_wrapper.is-pill .nav_izq {
  display: flex; align-items: center; gap: 0;
  justify-content: flex-end; min-width: 0;
}
/* `.nav_col` es una columna en la barra normal: aquí va en fila y se
   coloca delante del botón —`order: -1`—, así los enlaces se abren hacia
   la izquierda y ni el botón ni la marca se mueven de su sitio. */
.nav_wrapper.is-pill .nav_izq .nav_col {
  order: -1;
  display: flex; flex-direction: row; align-items: center; gap: 1.15rem;
  max-width: 0; margin-right: 0; overflow: hidden; opacity: 0; pointer-events: none;
  transition: max-width .55s var(--ease-out), margin-right .55s var(--ease-out),
              opacity .35s var(--ease-out);
}
.nav_wrapper.is-pill.is-abierto .nav_izq .nav_col {
  max-width: 24rem; margin-right: 1.15rem; opacity: 1; pointer-events: auto;
}
.nav_wrapper.is-pill .nav_izq .nav_link { font-size: .82rem; white-space: nowrap; }
/* brightness(0) deja el wordmark negro venga del tema que venga: al ir
   la barra en `difference`, el negro es lo que se invierte al pasar
   sobre fondos claros. */
.nav_wrapper.is-pill .nav_logo .wordmark { width: 5.6rem; filter: brightness(0); }
/* con marca tipográfica en la portada, el dibujo del logotipo se calla:
   solo deja su hueco para que la palabra sepa dónde aterrizar */
html.has-marca .nav_wrapper.is-pill .nav_logo .wordmark { opacity: 0; }
/* En las páginas interiores no hay marca que aterrice: el logotipo se ve, y
   blanco, que es lo que `difference` vuelve negativo del fondo. */
html:not(.has-marca) .nav_wrapper.is-pill .nav_logo .wordmark { filter: brightness(0) invert(1); }


/* el interruptor vive en la esquina de la pantalla, no en la barra */
.nav_wrapper.is-pill .theme-switch {
  display: inline-grid; margin: 0;
  position: fixed; top: var(--pad); right: var(--pad); pointer-events: auto;
}
/* La barra va en `difference`: el botón no lleva fondo y se dibuja en
   blanco, que es lo que sale en negativo de lo que tenga detrás (oscuro
   sobre claro, claro sobre oscuro), como el resto de la barra. */
.nav_wrapper.is-pill .theme-switch {
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  border-color: rgba(255, 255, 255, .3); color: #fff;
}
.nav_wrapper.is-pill .theme-switch:hover { border-color: rgba(255, 255, 255, .6); }


.nav_wrapper.is-pill .nav_burger {
  display: inline-flex; align-items: center; gap: .55rem;
  background: none; border: 0; padding: 0 .25rem;
  font-size: .82rem; letter-spacing: .02em; text-transform: uppercase;
  justify-self: start;
}
.nav_wrapper.is-pill .nav_burger::before {
  content: ""; width: 1.05rem; height: .62rem; flex: none;
  border-top: 2px solid currentColor; border-bottom: 2px solid currentColor;
}

/* «Conversemos» va como los demás, sin caja: lo que lo distingue es una
   flecha que late despacio y, al posarse el cursor, avanza arrastrando la
   palabra un par de píxeles. */
.nav_wrapper.is-pill .nav_cta {
  background: none; border: 0; padding: 0;
  font-size: .82rem; letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: transform .35s var(--ease-out);
}
.nav_wrapper.is-pill .nav_cta::after {
  content: "\2192"; display: inline-block;
  animation: ctaLate 3s ease-in-out infinite;
  transition: transform .35s var(--ease-out);
}
@keyframes ctaLate {
  0%, 80%, 100% { transform: translateX(0); }
  87%           { transform: translateX(2px); }
  93%           { transform: translateX(0); }
}
.nav_wrapper.is-pill .nav_cta:hover,
.nav_wrapper.is-pill .nav_cta:focus-visible { transform: translateX(2px); }
.nav_wrapper.is-pill .nav_cta:hover::after,
.nav_wrapper.is-pill .nav_cta:focus-visible::after {
  animation: none; transform: translateX(5px);
}
@media (prefers-reduced-motion: reduce) {
  .nav_wrapper.is-pill .nav_cta::after { animation: none; }
}

/* Para medir el hueco del logotipo hace falta ver la barra un instante,
   y sin esta pausa las transiciones dejarían un parpadeo. */
.nav_wrapper.sin-transicion,
.nav_wrapper.sin-transicion * { transition: none !important; }


/* Mientras manda la marca grande la barra se retira, pero el interruptor
   de tema se queda: es el único control a mano en el hero. */
.nav_wrapper.is-pill.is-away { transform: none; opacity: 1; }
/* El motor de revelados escribe opacidad en línea: hay que pisarla. Y no
   basta con `pointer-events` en el padre, porque los enlaces se lo
   devuelven a sí mismos: con `visibility` no hay quien los pulse. */
.nav_wrapper.is-pill .nav_contain > * {
  transition: opacity .45s var(--ease-out), visibility 0s linear 0s;
}
.nav_wrapper.is-pill.is-away .nav_contain > *:not(.theme-switch) {
  opacity: 0 !important; visibility: hidden; pointer-events: none;
  transition: opacity .45s var(--ease-out), visibility 0s linear .45s;
}
.nav_wrapper.is-pill.is-away .theme-switch {
  opacity: 1 !important; visibility: visible; pointer-events: auto;
}
/* La portada trae la barra ya en píldora desde el HTML: si nacía completa y
   el JS la plegaba después, toda la página saltaba a los 0,4 s (el mayor
   desplazamiento de diseño que medía Google). Sin JS no hay marca que la
   reemplace, así que se muestra entera. */
html:not(.js) .nav_wrapper.is-pill.is-away .nav_contain > * { opacity: 1 !important; visibility: visible; pointer-events: auto; }
.nav_wrapper.is-pill .nav_contain > *,
.nav_wrapper.is-pill .nav_actions > * { transition: opacity .45s var(--ease-out); }

/* ── En móvil la barra se queda en iconos ──────────────────────────
   Con el ancho de un teléfono, «MENÚ» y «Conversemos» se montan encima de
   la marca. Se quedan sus dos signos —el trazo del menú y la flecha del
   contacto—, que es lo que se entiende sin leer. */
@media (max-width: 700px) {
  .nav_wrapper.is-pill .nav_contain { padding-left: 0; gap: .8rem; }
  .nav_wrapper.is-pill .nav_burger span,
  .nav_wrapper.is-pill .nav_burger { font-size: 0; gap: 0; padding: 0; }
  .nav_wrapper.is-pill .nav_burger::before { width: 1.3rem; height: .7rem; }
  .nav_wrapper.is-pill .nav_logo .wordmark { width: 6rem; }

  /* el contacto pasa a ser un círculo con la flecha dentro */
  .nav_wrapper.is-pill .nav_cta {
    width: 2.2rem; height: 2.2rem; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0; gap: 0;
    background: none; border: 1px solid currentColor; border-radius: 50%;
  }
  .nav_wrapper.is-pill .nav_contain .nav_cta { color: #fff; }
  .nav_wrapper.is-pill .nav_cta::after { font-size: 1rem; }
  /* la flecha ya no arrastra texto: el círculo entero se mueve */
  .nav_wrapper.is-pill .nav_cta:hover::after,
  .nav_wrapper.is-pill .nav_cta:focus-visible::after { transform: none; }

  /* El interruptor baja a su esquina: arriba se le echaban encima el
     contacto y la marca. */
  .nav_wrapper.is-pill .theme-switch {
    top: auto; bottom: var(--pad); right: var(--pad);
  }
}


/* ── 15 · El cursor es la X del logotipo ───────────────────────────
   Va en negativo como la barra, así se lee sobre cualquier fondo. Sobre
   algo que se puede pulsar se pone a girar, despacio pero a la vista.
   Solo con ratón: en pantalla táctil no hay puntero que sustituir. */
@media (hover: hover) and (pointer: fine) {
  html.mx-cursor-on, html.mx-cursor-on * { cursor: none !important; }
  .mx-cursor {
    position: fixed; top: 0; left: 0; z-index: 9998;
    width: 1.7rem; height: 1.7rem;
    display: grid; place-items: center;
    pointer-events: none; mix-blend-mode: difference;
    font-family: "Adoria", "General Sans", system-ui, sans-serif;
    font-size: 1.7rem; line-height: 1; color: #fff;
    will-change: transform;
  }
  /* Sobre algo que se puede pulsar deja de ir en negativo: se llena de
     imágenes, como la X del hero, y el relleno ya se lee por sí solo. */
  .mx-cursor.is-activo { mix-blend-mode: normal; }
  .mx-cursor-l {
    grid-area: 1 / 1; display: block;
    background-position: center; background-size: auto, cover;
    transition: opacity .12s var(--ease-out);
  }
  .mx-cursor-l.is-out { opacity: 0; }
}


/* ── 16 · La nota del estudio se desmorona ─────────────────────────
   Cada carácter es un cuerpo rígido: en cuanto el cursor pasa, o al
   tocarla, se suelta y cae sobre la marca, que le hace de suelo. La
   simulación la lleva Matter.js; aquí solo va lo que el motor necesita
   para pintar. */
.hero_type-atajos .is-nota p { position: relative; }
.nf {
  display: inline-block; cursor: pointer;
  /* va en <i> por comodidad, pero de cursiva no tiene nada */
  font-style: normal;
  transition: color .2s var(--ease-out);
}
/* las letras de una palabra no se separan de línea (ver site.js, bloque 16) */
.nf-pal { white-space: nowrap; }
/* la nota del pie, en letras: se oculta mientras las de la portada vienen
   a armarla, y cada una aparece cuando llega la suya */
.nf-c { display: inline-block; font-style: normal; transition: opacity .3s var(--ease-out); }
.is-esperando .nf-c { opacity: 0; }
/* Ya suelta sale del flujo: el motor le da posición y giro en cada cuadro. */
.nf.is-suelta {
  position: fixed; left: 0; top: 0; margin: 0;
  z-index: 28; pointer-events: none; will-change: transform;
  animation: none;
}
/* al volver a su sitio, con calma */
.nf.is-vuelve { transition: transform .7s cubic-bezier(.22, 1, .36, 1); }

/* ── 10f · Móvil: que lo animado se vea, y no se amontone ──────────
   Todo lo de teléfono, en un sitio. Va al final del archivo a
   propósito: las cotas viejas —1100, 820, 700 y 600— siguen sirviendo
   a la tablet y no se tocan; desde aquí se las pisa por orden de
   cascada, que es lo que evita reescribirlas y arriesgar la franja de
   768 a 991, donde la raíz sigue en vw y nada de esto debe llegar.

   Se unifica en 767, la única frontera que la raíz ya trata como «esto
   es un teléfono» (site.css:92). Solo se abren dos cotas más: 479 para
   lo que depende del ancho de la caja y no del aparato, y una cola de
   `prefers-reduced-motion`, porque al ir este bloque después del 10e
   hay que devolverle lo que le quitaría.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {

  /* ── portada ────────────────────────────────────────────────────
     La bajada se apoya a la derecha en escritorio porque allí hay dos
     bloques que equilibrar. Aquí no hay nada enfrente: se alinea con
     el resto y deja de leerse como un resto suelto. */
  .hero_type-inner .hero_type-foot {
    left: 0; right: auto; text-align: left;
    margin-top: 1rem;
  }
  /* El aire bajo la palabra está pensado en vh para una pantalla ancha;
     en un teléfono alto separa tanto la bajada que parecen dos cosas
     distintas. Se fija en rem, que no depende del alto y por tanto no
     se mueve cuando la barra de direcciones entra y sale. */
  .hero_word { margin-bottom: 1.25rem; }

  /* los atajos van a lo ancho; su rejilla la fija el bloque de abajo */
  .hero_type-atajos { width: calc(100% - var(--pad) * 2); }

  /* ── lo que se puede pulsar ─────────────────────────────────────
     El alto de la píldora lo fija el círculo de contacto y `calibra()`
     lo lee para saber dónde aterriza la marca: si se engorda la caja
     del botón, la palabra deja de encajar en el hueco del logotipo.
     Por eso la zona de toque va en un pseudoelemento absoluto, que no
     ocupa flujo y no cambia ni un píxel de la barra. */
  .nav_wrapper.is-pill .nav_burger,
  .nav_wrapper.is-pill .nav_cta { position: relative; }
  .nav_wrapper.is-pill .nav_burger::after,
  .nav_wrapper.is-pill .nav_cta::before {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  .hero_type-atajos a { min-height: 44px; display: flex; align-items: center; }
  /* con `padding` se queda en 43 px: el mínimo se pide, no se deduce */
  .nav_mobile a { min-height: 44px; display: flex; align-items: center; }
  /* En el pie son once enlaces: agrandar la caja engordaría el bloque
     entero, así que la zona de toque se estira por fuera. No llega a 44,
     llega a 33: es lo que cabe sin deformar la maqueta. */
  .footer_link-list { gap: .75rem; }
  .footer_link-wrap::before { content: ""; position: absolute; inset: -6px -8px; }

  /* Los cuatro anclajes aterrizaban con la sección medio metida debajo
     de la píldora. */
  html { scroll-padding-top: 4.5rem; }

  /* ── el párrafo que se compacta ─────────────────────────────────
     La misma animación que en escritorio (site.js, bloque 04), con una
     pista algo más corta: el párrafo entra palabra a palabra y luego se
     queda quieto y legible un rato antes de soltarse. */
  .pin-height { height: 260svh; }
  /* Estaba en vh: el cuerpo de letra dependía del ALTO del teléfono
     —19,9 px en un SE y 32,6 px en un Max— con la misma columna. Pasa a
     depender del ancho, que es lo que manda en el largo de línea. Se
     satura en 2rem, así que de 480 a 767 no cambia nada. */
  .about-text { font-size: clamp(1.5rem, 7.4vw, 2rem); line-height: 116%; }
  /* Las palabras llevan su capa mientras entran (sin ella el párrafo
     entero se repintaba en cada fotograma); site.js se la quita al
     terminar, para no dejar 52 capas puestas para siempre. */

  /* ── trabajos ───────────────────────────────────────────────────
     Los siete títulos salían a la vez, todos del mismo peso y opacidad:
     un bloque de texto plano. Vuelven al gris de escritorio y se separan
     lo bastante como para que el que cruza la línea de lectura se
     distinga de los demás. */
  /* El padding de abajo es corto a propósito: mientras sobre sección por
     debajo de la lista, la foto sigue pegada y el último título le pasa
     POR DETRÁS —medido: 380 px de scroll con el título en negrita tapado
     justo por la imagen—. Terminando la sección poco después de la lista,
     la foto se despega y sube con ella, y eso no llega a pasar. */
  .section_works { overflow: visible; padding: 4rem 0 1rem; }
  .spotlight-titles-container { overflow: visible; }
  /* La imagen se queda pegada arriba mientras desfilan los títulos: es
     lo que devuelve el vínculo entre uno y otra sin necesitar anclaje.
     `overflow: visible` en la sección es obligatorio —si no, la sección
     es contenedor de scroll y el sticky no engancha—, y sale gratis
     porque el clip del body sigue conteniendo lo que se salga. */
  /* El margen de abajo es el aire que queda entre la ventana y el último
     título cuando la sección termina y se van juntos: con 2,5 rem el
     título salía pegado a la foto. La lista recupera su distancia de
     siempre con un margen negativo. */
  .spotlight-images {
    position: sticky; top: 7rem; z-index: 3;
    background: var(--bg); margin: 0 var(--pad) 6rem;
  }
  .spotlight-titles-container { margin-top: -3.5rem; }
  /* Los títulos pasan por detrás de la ventana, pero al salir por arriba
     volvían a asomar sobre ella. Mientras está pegada, una franja del
     color del fondo tapa todo lo que queda por encima (site.js la
     enciende con `is-pegada`). */
  .spotlight-images::before {
    content: ""; position: absolute; left: calc(var(--pad) * -1); right: calc(var(--pad) * -1);
    bottom: 100%; height: 9rem; background: var(--bg); opacity: 0; pointer-events: none;
  }
  .spotlight-images.is-pegada::before { opacity: 1; }
  /* El recorte de escritorio con que se abre la ventana (`.active`, que
     gana por especificidad al `clip-path: none` de tableta) cortaba la
     franja, que vive fuera de la caja. Aquí la ventana no se abre así. */
  .spotlight-images.active { clip-path: none; }
  /* Asimétrica a propósito: la que entra sube deprisa y la que sale se
     va despacio y con retardo. Si las dos cruzaran a la vez, a mitad de
     camino la suma de opacidades no llega a 1 y se ve el fondo entre
     las dos fotos. */
  .spotlight-img { transition: opacity .5s var(--ease-out) .12s; }
  .spotlight-img.is-on { transition: opacity .28s var(--ease-out); }
  .spotlight-titles { gap: 3.25rem; }
  .spotlight-focus-label { margin-bottom: .75rem; }
  .h2_works {
    opacity: .3;
    transition: opacity .3s var(--ease-out), font-weight .25s var(--ease-out);
  }
  .h2_works.is-active { opacity: 1; font-weight: 700; }

  /* ── servicios ──────────────────────────────────────────────────
     La tarjeta es flex con `space-between`, pero su contenido siempre
     supera el `min-height`, así que no queda holgura que repartir: el
     hueco entre el titular y «Enfoque» hay que darlo con caja propia.
     Con interlineado al 85 % los descendentes se metían dentro. */
  /* Y el de arriba, porque el titular empezaba a 10 px del borde de la
     tarjeta, justo debajo de la píldora y de la marca, que van en
     `difference` sobre papel blanco: los dos textos se anulaban. */
  .slide_head { padding-top: 3.5rem; padding-bottom: 1rem; }
  .slide_head .h2 { line-height: 92%; }
  /* Sin perspectiva no hay 3D que preservar ni transform que anticipar:
     tres cajas de 710 px promovidas a capa para nada, y `preserve-3d`
     además emborrona el texto en WebKit. */
  .slide-content { transform-style: flat; will-change: auto; }
  /* Sobre gris y sobre gris oscuro, .55 no llega al contraste mínimo. */
  .slide_body .tag { opacity: .8; }

  /* ── cómo trabajamos ────────────────────────────────────────────
     La palabra grande se quedaba congelada en «Escuchar.» —las otras
     cinco no se pintaban nunca— y en un gris de 1,6:1 sobre el fondo,
     que parece un fallo de render. Ahora se queda pegada arriba
     mientras desfilan las frases y el JS la va cambiando.
     `overflow: visible` es obligatorio: el `hidden` de la sección la
     convierte en contenedor de scroll y anula el sticky. */
  .section_values { overflow: visible; padding: 4rem 0 2rem; }
  .values_pinned {
    position: sticky; top: 0; z-index: 3;
    background: var(--bg); padding-top: 4.75rem; padding-bottom: 2rem;
    margin-bottom: 0;
  }
  /* `top: 0` y no `top: 4.75rem`: si se pega más abajo, las frases asoman
     por encima del bloque y se ven medias líneas cortadas. El aire de
     abajo es el que separa la palabra grande del punto donde las frases
     se cortan al pasar por detrás: con 1rem el corte queda pegado al
     glifo y parece un fallo de pintado. */
  /* `line-height: 1` y no el .8 heredado: con .8 el glifo desborda su
     caja y la primera frase se le monta encima aunque el bloque tenga
     fondo. Y el gris de 1,6:1 pasa a 7,3:1. */
  .values_title { color: var(--pure); font-size: 3.25rem; line-height: 1; }
  /* el texto se podía ver pero no seleccionar */
  .values_pinned, .values_list-container { pointer-events: auto; }
  /* Las frases estaban todas igual de blancas, así que la palabra grande
     cambiaba sin apuntar a ninguna. La separación tampoco llegaba a una
     línea: seis frases de dos y tres renglones formaban una mancha. */
  .value-item { opacity: .34 !important; margin-bottom: 1.75rem; }
  .value-item.is-on { opacity: 1 !important; }
  .value-item:last-child { margin-bottom: 0; }
  html:not(.js) .value-item { opacity: 1 !important; }

  /* ── contacto ───────────────────────────────────────────────────
     La sección gastaba pantalla y media para una tarjeta de 476 px. */
  .section_form { min-height: 0; margin-top: 3rem; padding: 4rem 0; }
  /* La marca crece hacia el remate del pie durante los últimos 0,8 de
     pantalla, y como aquí la tarjeta pasa a ancho completo (site.css:840)
     el vuelo la cruza por el medio: en `difference` sobre papel blanco
     «MOXEN» se tatúa encima del titular. Acortar el recorrido no llega
     —solo quedan 30 px de margen hasta el tope de la página—, así que se
     resuelve por apilamiento: el papel pasa por delante de la capa de la
     marca (z 30) y el vuelo cruza por detrás, sobre la foto, que es
     donde se lee bien. */
  .section_form .form_content-wrapper { z-index: 31; }
  /* En el pie, en cambio, la marca baja POR ENCIMA de las columnas hasta
     posarse en su sitio (pedido del usuario: tapada por ellas parecía
     perderse). Los enlaces siguen pulsables porque durante el vuelo la
     marca no recoge toques (site.js, `alScroll`). */
  /* La píldora, por delante de las dos, para no perderla en ese tramo.
     Se puede porque no tiene fondo (site.css:1274) y porque su wordmark
     va invisible mientras manda la marca (site.css:1312): si algún día
     se le pone fondo, tapará la marca al aterrizar. */
  .nav_wrapper.is-pill { z-index: 32; }

  /* ── pie ────────────────────────────────────────────────────────
     `1fr 1fr` sin minmax deja que el contenido empuje: a 337 px las dos
     columnas salían desiguales. */
  .footer_top-wrapper { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* El interruptor de tema vive en la esquina inferior derecha desde la
     cota de 700 y ahí se comía el final de «Términos». */
  .footer_bottom-terms-wrapper { flex-wrap: wrap; row-gap: .5rem; padding-right: 4.5rem; }
  /* Las tres no caben en una línea y «Términos» quedaba sola debajo del
     ©: mejor el © en su línea y los dos enlaces juntos en la siguiente. */
  .footer_bottom-terms-wrapper > .p { flex-basis: 100%; }
}

@media (max-width: 479px) {
  /* El número competía de tú a tú con el titular —48 px los dos— y a
     320 px se salía de pantalla: el track `1fr` no puede encoger por
     debajo del min-content de «aplicaciones» y empujaba el número
     fuera. Las dos cosas se arreglan devolviéndole su papel secundario.
     Va en 479 y no en 767 a propósito: a 480 px el titular vale 75 px y
     `break-word` partiría «aplicaciones» por la mitad. */
  .slide_num { font-size: 1.5rem; opacity: .45; }
  .slide_head .h2 { min-width: 0; overflow-wrap: break-word; }
}

@media (min-width: 480px) and (max-width: 767px) {
  /* Con el titular a 75 px, 1rem de aire debajo sigue leyéndose pegado. */
  .slide_head { padding-bottom: 1.5rem; }
}

/* Cola obligada: este bloque va después del 10e, así que sin ella le
   quitaría a `prefers-reduced-motion` justo lo que allí se le concede.
   Y de paso apaga lo que aquí depende de un JS que en ese modo no corre:
   una palabra pegada que no cambia y unas frases al 34 % serían peor que
   no haber tocado nada. */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .pin-height { height: auto; }
  .h2_works { opacity: 1; }
  .values_pinned { position: relative; padding-top: 0; }
  .value-item { opacity: 1 !important; }
}


/* ── 06b · Pase lateral ────────────────────────────────────────────
   El scroll se tumba: la página deja de bajar y las piezas cruzan de
   derecha a izquierda, creciendo al pasar por el centro. La caja va
   anclada y el recorrido lo reparte el JS; aquí solo está el escenario.
   Nada de 3D: es `translate` + `scale`, como en la referencia. */
.section_pase { position: relative; background: var(--bg); }
/* el alto reserva el recorrido; lo fija el JS */
.pase_alto { position: relative; }
.pase_caja { position: relative; width: 100%; height: 100svh; overflow: hidden; }

/* La frase cruza de derecha a izquierda con el mismo scroll: anuncia el tramo. */
.pase_frase {
  position: absolute; left: 50%; top: 50%; margin: 0;
  white-space: nowrap;
  font-family: "General Sans", system-ui, sans-serif;
  font-size: clamp(5rem, 24vw, 28rem);
  font-weight: 600; line-height: 1; letter-spacing: -.05em;
  color: var(--pure);
  will-change: transform; pointer-events: none; user-select: none;
  z-index: 2;
}
.pase_caja { visibility: hidden; }
.pase_caja.is-activa { visibility: visible; }

@media (max-width: 767px) { .pase_frase { font-size: 5rem; } }

/* ══ 03c · Obras — la fila de piezas ══════════════════════════════════
   Las piezas de muestra en una fila que el scroll hace pasar de derecha
   a izquierda (la sección se ancla). Cada una se detiene un momento en el
   centro: ahí toma su color y corre su video; las de los lados van en gris
   y algo más pequeñas, y pierden el color cuanto más lejos están. Debajo,
   la ficha de la del centro. Lo mueve assets/js/obras.js; la lista y sus
   textos salen de muestras/obras_html.py. Un clic en la del centro abre la
   pieza; en una de los lados, la trae al centro.

   Medidas en px y no en rem: el rem de este sitio es fluido (0,93 vw bajo
   1440 px y 0,83 vw bajo 1920), y a 768 px de ancho valdría 7 px. */
.section_obras { position: relative; background: var(--bg); }
.obras_alto { position: relative; }
.obras_caja {
  position: relative; width: 100%; height: 100svh; overflow: hidden;
  visibility: hidden;
  --lat: clamp(20px, 3.6vw, 56px);           /* margen de los lados */
  --abajo: 30px;                             /* el borde de abajo, para la letra pequeña */
  /* la fila: la hoja pone el ancho de la pieza (--cw) y su centro (--cy) */
  --cw: min(50vw, 900px); --cy: 44%;
}
.obras_caja.is-activa { visibility: visible; }

.obras_fila { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.obras_fila li { display: contents; }
.obra {
  position: absolute; left: 0; top: var(--cy); display: block; overflow: hidden;
  width: var(--cw); aspect-ratio: 16 / 10; border-radius: 14px; background: #0d0d0d;
  transform: translate3d(-200vw, -50%, 0); will-change: transform; transform-origin: 50% 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -40px rgba(0, 0, 0, .7);
  -webkit-user-drag: none; user-select: none; cursor: pointer;
}
.obra img, .obra video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.obra_gris { filter: grayscale(1) brightness(.72) contrast(1.06); }
.obra_color { opacity: 0; will-change: opacity; }
.obra video { opacity: 0; transition: opacity .7s var(--ease-out); }
.obra video.is-on { opacity: 1; }
.obra:focus-visible { outline: 2px solid var(--pure); outline-offset: 6px; }

/* el nombre de la pieza del centro, bajo la fila */
.obras_ficha {
  position: absolute; z-index: 3; left: 50%; top: var(--fy, 64%); transform: translateX(-50%);
  width: min(100% - 2 * var(--lat), 720px); display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--pure);
  pointer-events: none;
}
.obras_titulo {
  margin: 0; font-family: "General Sans", system-ui, sans-serif; font-weight: 600;
  font-size: clamp(34px, min(5vw, 8svh), 76px); line-height: .96; letter-spacing: -.055em; color: var(--pure); text-wrap: balance;
}
.obras_titulo .pal { display: inline-block; }

/* El HUD en las esquinas de abajo: letra pequeña en mayúsculas */
.obras_hud {
  position: absolute; left: 0; right: 0; bottom: var(--abajo); z-index: 3; height: 24px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--lat); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
  color: var(--pure); pointer-events: none;
}
.obras_hud p { margin: 0; display: flex; align-items: baseline; gap: .45em; }
.obras_hud span { opacity: .5; }
.obras_hud b { font-weight: 500; font-variant-numeric: tabular-nums; }
.obras_ayuda { margin-right: 1.6em; }
.obras_todos { pointer-events: auto; display: inline-flex; align-items: baseline; gap: .5em; color: inherit; text-decoration: none; }
.obras_todos i { font-style: normal; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.obras_todos .obras_todos-t { opacity: 1; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s ease; }
.obras_todos:hover i, .obras_todos:focus-visible i { transform: translateX(4px); }
.obras_todos:hover .obras_todos-t, .obras_todos:focus-visible .obras_todos-t { background-size: 100% 1px; }

/* en el tema claro, la sombra más suave y el borde oscuro */
:root[data-theme="light"] .obra { box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 40px 80px -40px rgba(0, 0, 0, .35); }

/* sin JS: la lista de piezas, en flujo y a color */
html:not(.js) .obras_caja { visibility: visible; height: auto; padding: 96px var(--lat) 40px; }
html:not(.js) .obras_fila { position: relative; inset: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
html:not(.js) .obra { position: relative; width: auto; transform: none; }
html:not(.js) .obra_color { opacity: 1; }
html:not(.js) .obras_ficha, html:not(.js) .obras_hud { display: none; }

@media (max-width: 767px) {
  .obras_caja { --lat: 16px; --abajo: 22px; --cw: 82vw; --cy: 38%; }
  .obra { border-radius: 10px; }
  .obras_titulo { font-size: clamp(32px, 10.5vw, 48px); }
  /* en el teléfono, abajo van el idioma y el tema: el enlace a la galería va arriba a la izquierda, bajo el menú,
     y entra y sale con la fila (su opacidad la lleva obras.js) */
  .obras_hud { top: 84px; bottom: auto; justify-content: flex-start; }
  .obras_hud .obras_hud-de { display: none; }
  .obras_todos { white-space: nowrap; }
}

/* ══════════════════════════════════════════════════════════════════════
   MÓVIL · Fase 1 — Portada y párrafo
   La portada dejaba 261 px muertos entre el contacto y la marca, y otros
   269 px por debajo del subtítulo; además solo se veía la columna de
   contacto. Aquí la portada se reparte de verdad: marca y subtítulo en el
   tercio superior, y todos los atajos abajo, en dos columnas.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Portada ───────────────────────────────────────────────────── */
  .section_hero { min-height: 100svh; }

  /* La altura de la marca la fija el JS (yReposo); aquí solo el ancho. */
  .hero_type-inner {
    position: fixed;
    left: var(--pad); right: var(--pad);
    width: auto;
  }
  .hero_word { margin-bottom: 1rem; }
  .hero_type-inner .hero_type-foot { margin-top: .2rem; }
  .hero_type-sub { font-size: 1rem; line-height: 132%; max-width: 30ch; }

  /* Los atajos van arriba y enteros, como en escritorio: contacto y
     navegación lado a lado y la nota debajo. La marca queda sola en el
     centro de la pantalla, y la nota, al desarmarse, cae sobre ella. */
  .hero_type-atajos {
    position: fixed;
    left: var(--pad); right: var(--pad);
    top: calc(var(--pad) + .4rem); bottom: auto;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1.4rem 1.1rem;
    align-items: start;
  }
  .hero_type-atajos .col:nth-child(1),
  .hero_type-atajos .col:nth-child(2),
  .hero_type-atajos .col:nth-child(3) {
    display: flex; flex-direction: column; gap: .18rem;
    flex-wrap: nowrap;
    align-items: flex-start; text-align: left;
  }
  /* Arriba solo la nota —la que se derrumba al tocarla— y, a su derecha,
     WhatsApp y el menú. El contacto y la navegación completos viven en el
     menú; aquí eran demasiadas líneas para la primera pantalla. */
  .hero_type-atajos { grid-template-columns: minmax(0, 1fr) auto; }
  .hero_type-atajos .col:not(.is-nota) { display: none !important; }
  .hero_type-atajos .is-nota { grid-column: 1; grid-row: 1; }
  .hero_type-atajos .is-nota p { font-size: .95rem; line-height: 1.4; max-width: 25ch; }
  /* los botones de WhatsApp y menú: bloque «Botones rápidos», más abajo */
  .hero_type-atajos .tit {
    flex: none; width: 100%;
    font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); margin-bottom: .3rem;
  }
  .hero_type-atajos a {
    min-height: 0; display: block; width: auto;
    text-align: left;
    font-size: .95rem; line-height: 1.55; letter-spacing: -.01em;
  }
}


/* ── Botones rápidos de la portada ─────────────────────────────────────
   WhatsApp y menú, arriba a la derecha: en el teléfono en vertical y en
   horizontal (bloque 18). Fuera de ahí no se muestran (`.hero_rapido`). */
@media (max-width: 767px), (orientation: landscape) and (max-height: 500px) and (min-width: 768px) and (max-width: 991px) {
  .hero_rapido { display: flex; gap: .55rem; grid-column: 2; grid-row: 1; }
  /* con la clase del contenedor: `.hero_type-atajos a` los pasaba a bloque */
  .hero_type-atajos .hero_rapido-btn {
    width: 44px; height: 44px; min-height: 0; border-radius: 50%; display: grid; place-items: center;
    color: var(--pure); border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
    background: color-mix(in srgb, var(--bg) 70%, transparent);
  }
  .hero_rapido-btn .ico-wa { width: 20px; height: 20px; }
  .ico-menu { display: block; width: 17px; height: 7px; border-top: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; }
}

/* ── 17 · Solapes entre tramos (escritorio) ────────────────────────────
   Cada tramo anclado deja, al empezar y al terminar, una pantalla en la que
   su caja entra o sale vacía: medido, había seis paradas seguidas en negro
   entre las áreas, la frase y las obras. Se montan unos sobre otros —como
   hace la referencia con `margin: -60vh 0`— para que lo siguiente ya esté
   entrando cuando lo anterior se va. Solo desde 992 px, que es donde las
   áreas van ancladas; por debajo el orden es el del flujo normal. */
@media (min-width: 992px) {
  /* La portada ya no tiene nada dentro —la marca y su navegación cuelgan
     del body—: su caja solo reserva sitio y no debe tapar a la siguiente.
     Su z-index venía del arco giratorio que hubo antes. */
  .section_hero { z-index: auto; }
  .section_about { margin-top: -40svh; }   /* el párrafo llega mientras la marca sube */
  .section_works { margin-top: -30svh; }   /* las áreas asoman mientras el párrafo se va */
  /* La frase se ancla en el mismo scroll en que «Áreas» suelta el suyo.
     Mientras sube por encima de las áreas no se ve —sin fondo y con la caja
     oculta hasta anclarse—, y no recoge el ratón de lo que tapa. */
  /* Sin «Áreas de trabajo» (14-10) la frase viene justo después del párrafo: sin solaparse con él,
     o la frase anclada cruzaba sobre sus últimas líneas. */
  .section_pase  { margin-top: -30svh; background: transparent; pointer-events: none; }
  /* La primera obra, en cuanto sale la frase. También sin fondo: sube por
     encima del pase mientras la frase cruza y, opaca, se la comía de abajo
     arriba. Su caja sigue oculta hasta anclarse. */
  /* 15svh más: la cinta empieza a entrar mientras la frase aún sale */
  .section_obras { margin-top: -115svh; background: transparent; }
  /* Contacto: la foto entra en cuanto «Cómo trabajamos» se suelta, sin los
     160 px de fondo liso de antes. Y la tarjeta va arriba y no centrada:
     el pie mide menos que una pantalla, y centrada le asomaba el borde
     inferior («Siguiente paso») bajo el menú al llegar al final. */
  .section_form { margin-top: 0; align-items: flex-start; padding-top: 16svh; }
}

/* ══ Relevos sin pantallas vacías, por debajo del escritorio ══════════
   Las mismas reglas que en escritorio (ver arriba), con otras medidas.
   Obras empieza donde termina el anclaje de la frase: sin esto, la caja
   del pase ya oculta subía una pantalla entera en negro antes de la
   primera obra. Y sin fondo, para no taparle la frase al subir. */
@media (max-width: 991px) {
  .section_obras { margin-top: -115svh; background: transparent; }
}
/* En teléfono las áreas no se anclan: la frase se ancla justo cuando
   Agroindustria sube hacia el borde, en vez de esperar a que la sección
   entera haya salido y subir antes un telón negro. */
@media (max-width: 991px) {
  .section_pase { margin-top: -25svh; background: transparent; pointer-events: none; }
}
/* Tableta: el título de las tarjetas de servicios medía 13vh —153 px en un
   iPad vertical— y su palabra más larga ensanchaba la columna hasta sacar
   el número 4 px de la pantalla, que se podía arrastrar de lado. */
@media (min-width: 768px) and (max-width: 991px) {
  .slide_head .h2 { font-size: min(13vh, 9.5vw); min-width: 0; overflow-wrap: break-word; }
}

/* Sin animación no hay anclajes que encadenar: los solapes de arriba
   dejarían unas secciones encima de otras, quietas. Cada una vuelve a su
   sitio y la frase se ve, porque su caja solo se mostraba al anclarse. */
@media (prefers-reduced-motion: reduce) {
  .section_about, .section_works, .section_pase, .section_obras { margin-top: 0; }
  .section_pase, .section_obras { background: var(--bg); }
  /* La lista de áreas va en flujo: su contenedor era absoluto y, sin la
     altura fija de la sección, la dejaba en 0 px. */
  .spotlight-titles-container { position: relative; inset: auto; height: auto; padding: 8rem var(--pad); }
  /* La frase quieta no puede ser una sola línea de tres pantallas de ancho. */
  .pase_caja { visibility: visible; height: auto; padding: 8rem 0; }
  .pase_frase { position: static; white-space: normal; text-align: center;
                font-size: clamp(3rem, 9vw, 9rem); transform: none !important; }
}

/* ══ 07b · Servicios con contenido ══════════════════════════════════════
   Las tarjetas decían poco: un título enorme, párrafos y una foto de
   banco. Ahora siguen la forma de los sitios de producto actuales
   (linear.app): título y una frase clara arriba, y abajo una interfaz que
   ENSEÑA lo que se construye —un panel de operación, un sitio con su app,
   una IA leyendo una factura— junto a cuatro entregables concretos.
   Las interfaces toman los tonos del texto de su tarjeta (currentColor),
   así sirven en las tres tarjetas y en los dos temas. */
.slide-content { --card-bg: var(--pure); }
.slide-content.is-black { --card-bg: var(--grey-2); }
.slide-content.is-grey { --card-bg: var(--grey-1); }

.slide-content .slide_head {
  grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); align-items: end; gap: 3rem;
}
.srv_tit { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.srv_kicker {
  font-family: var(--mono);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; opacity: .55;
}
.srv_kicker b { font-weight: 500; }
.slide-content .slide_head .h2 { font-size: min(11vh, 7.2vw); max-width: none; }
.srv_lede { margin: 0; font-size: 1.25rem; line-height: 1.3; letter-spacing: -.02em; opacity: .8; }

.slide-content .srv_body {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3rem;
  align-items: stretch; flex: 1; min-height: 0; margin: 2.2rem 0 1.6rem;
}
.srv_fig { margin: 0; position: relative; display: flex; flex-direction: column; min-height: 0; }
.srv_fig figcaption {
  margin-top: .7rem; font-family: var(--mono);
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; opacity: .45;
}
/* Los entregables llenan la columna: cada uno se reparte el alto, con su
   número, como las listas de funciones de linear.app. Arrimados abajo
   dejaban media tarjeta vacía bajo la frase. */
.srv_lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; counter-reset: srv; }
.srv_lista li {
  flex: 1; counter-increment: srv;
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-content: start; row-gap: .35rem;
  padding: 1rem 0 .6rem; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.srv_lista li::before {
  content: counter(srv, decimal-leading-zero); grid-row: 1 / 3;
  font-family: var(--mono); font-size: .72rem; opacity: .45; padding-top: .3rem;
}
.srv_lista b { font-weight: 500; font-size: 1.3rem; letter-spacing: -.03em; line-height: 1.1; }
.srv_lista span { font-size: 1rem; line-height: 1.35; letter-spacing: -.01em; opacity: .65; }
/* cada entregable lleva a la página del servicio: toda la fila es el enlace */
.srv_lista li { position: relative; }
.srv_lista li a { color: inherit; }
.srv_lista li a::after { content: ""; position: absolute; inset: 0; }
.srv_lista li::after {
  content: "→"; position: absolute; right: 0; top: 1rem; opacity: 0; transform: translateX(-8px);
  transition: opacity .3s, transform .4s var(--ease-out);
}
.srv_lista li:hover::after, .srv_lista li:focus-within::after { opacity: .7; transform: none; }
.srv_lista li b { transition: transform .4s var(--ease-out); }
.srv_lista li:hover b { transform: translateX(4px); }
.srv_enlace { color: inherit; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .5s var(--ease-out); }
.srv_enlace:hover, .srv_enlace:focus-visible { background-size: 100% 2px; }

/* ── Los dispositivos ──────────────────────────────────────────────────
   Nada dibujado: las tarjetas enseñan material real. Una ventana de
   navegador con Moxen Sistema en uso, los sitios hechos por Moxen en el
   computador y en el teléfono, y el asistente del sistema con sus
   respuestas de verdad. Las pestañas cambian de pantalla o de proyecto y
   llevan una barra con lo que falta para el cambio siguiente. */
.dv { --dv-borde: rgba(0, 0, 0, .14); position: relative; min-width: 0; }
.slide-content.is-grey .dv { --dv-borde: rgba(255, 255, 255, .16); }
/* En el tema oscuro las tres tarjetas son de grafito, con el filo de luz de
   arriba, como las piezas de Trabajos que vienen justo antes: una tarjeta
   blanca a pantalla completa saltaba de golpe después de la fila en gris.
   El color va en background-color (los cantos lo heredan) y el degradado
   encima; el tono sube un poco de una tarjeta a la siguiente. */
:root:not([data-theme="light"]) .slide-content {
  --card-bg: #161616; background-color: #161616; color: var(--white);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 38%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .07);
}
:root:not([data-theme="light"]) .slide-content.is-black { --card-bg: #1c1c1c; background-color: #1c1c1c; }
:root:not([data-theme="light"]) .slide-content.is-grey { --card-bg: #232323; background-color: #232323; }
:root:not([data-theme="light"]) .slide-content .dv { --dv-borde: rgba(255, 255, 255, .14); }

/* Las pantallas de las tarjetas, del mismo material que las piezas de
   Trabajos: sin la barra del navegador (los tres puntos y la dirección),
   esquinas redondeadas y un filo de 1 px. Y como allá, la de la tarjeta que
   está al frente va a color y las que quedan detrás, en gris: la clase
   .is-frente la pone site.js (07b) según el scroll. El filtro es una matriz
   de color, barata, y solo se anima al cambiar de tarjeta. */
.section_services .dv_barra { display: none; }
.section_services .dv-sistema .dv_ventana, .section_services .dv-web .dv_ventana {
  border-radius: 14px; border: 0; background: #0d0d0d;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 80px -40px rgba(0, 0, 0, .7);
}
.section_services .dv-ia .dv_ventana { border-radius: 14px; }
:root[data-theme="light"] .section_services .dv-sistema .dv_ventana,
:root[data-theme="light"] .section_services .dv-web .dv_ventana { box-shadow: 0 0 0 1px rgba(0, 0, 0, .08), 0 40px 80px -40px rgba(0, 0, 0, .35); }
.section_services .srv_fig > .dv_ventana, .section_services .srv_fig > .dv_pantallas {
  filter: grayscale(1) brightness(.78); transition: filter .9s var(--ease-out);
}
.section_services .slide-content.is-frente .srv_fig > .dv_ventana,
.section_services .slide-content.is-frente .srv_fig > .dv_pantallas { filter: none; }
.dv_ventana {
  position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 12px; background: #fff; border: 1px solid var(--dv-borde);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 24px 60px -24px rgba(0, 0, 0, .38);
  transform-origin: 50% 60%; will-change: transform;
}
.dv_barra {
  flex: none; position: relative; height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 13px;
  background: #f4f4f5; border-bottom: 1px solid #e4e4e7;
}
.dv_barra > i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.dv_barra > i:nth-child(2) { background: #febc2e; }
.dv_barra > i:nth-child(3) { background: #28c840; }
.dv_barra > span {
  position: absolute; left: 50%; transform: translateX(-50%); padding: 3px 16px; border-radius: 6px;
  background: #fff; border: 1px solid #e4e4e7; color: #52525b;
  font: 500 .7rem/1.3 "Geist", system-ui, sans-serif; white-space: nowrap;
}
.dv_barra .marca { font-size: .95em; margin-right: .3em; }
.dv_video { flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: top left; background: #fafafa; display: block; }

.dv_tabs { flex: none; display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.dv_tabs button {
  position: relative; overflow: hidden; padding: 7px 13px 8px; border-radius: 8px; cursor: pointer;
  font: 500 .82rem/1 "General Sans", system-ui, sans-serif; letter-spacing: -.01em; color: inherit;
  background: color-mix(in srgb, currentColor 6%, transparent); border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  opacity: .62; transition: opacity .25s, background-color .25s;
}
.dv_tabs button:hover { opacity: .9; }
.dv_tabs button.is-on { opacity: 1; background: color-mix(in srgb, currentColor 11%, transparent); }
.dv_tabs button i {           /* lo que falta para pasar a la siguiente */
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: currentColor;
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%; opacity: 0;
}
.dv_tabs button.is-on i { opacity: .7; }
.srv_fig figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; opacity: 1; }

/* web: el teléfono delante de la ventana, anclado a ella */
.dv_pantallas { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dv-web .dv_ventana { margin-right: 13%; }
/* El teléfono es una foto real de un iPhone (de un mockup en PSD), con la
   pantalla recortada: el contenido vivo va debajo, en el hueco, y el bisel y
   la isla del marco lo tapan como en el aparato. Medidas del hueco en
   fracciones de la foto (600 × 1234). */
.dv_telefono {
  position: absolute; right: 0; bottom: -10px; height: 94%; aspect-ratio: 600 / 1234;
  transform-origin: 50% 70%; will-change: transform;
}
/* La sombra va en una capa propia con la forma del aparato y no como
   drop-shadow del conjunto: con el vídeo dentro, el filtro se recalculaba en
   cada fotograma y en el teléfono se notaba. */
.dv_telefono::before {
  content: ""; position: absolute; inset: .4% 1.2%; z-index: -1; border-radius: 16% / 7.8%;
  box-shadow: 0 24px 26px rgba(0, 0, 0, .32), 0 4px 6px rgba(0, 0, 0, .18);
}
.dv_pantalla {
  position: absolute; left: 2.996%; top: 1.457%; width: 92.978%; height: 97.132%;
  border-radius: 15.13% / 7.04%; overflow: hidden; background: #000;
}
.dv_marco { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.dv_telefono .dv_video { width: 100%; height: 100%; background: #000; }
/* la barra de estado del teléfono, como la pinta Safari sobre un sitio oscuro;
   la página empieza debajo. Medidas en fracciones de la pantalla (390 × 844). */
.dv-web .dv_pantalla { container-type: size; display: flex; flex-direction: column; }
.dv_estado {
  flex: none; height: 6.4cqh; display: flex; align-items: center; justify-content: space-between;
  padding: 1.2cqh 8cqw 0 10.5cqw; background: #000; color: #fff; font: 600 4.3cqw/1 -apple-system, "SF Pro Text", system-ui, sans-serif;
}
.dv_estado span { display: flex; align-items: center; gap: 1.5cqw; }
.dv_estado i { display: block; background: currentColor; }
.e_senal { width: 4.6cqw; height: 2.8cqw; clip-path: polygon(0 75%, 22% 75%, 22% 50%, 48% 50%, 48% 25%, 74% 25%, 74% 0, 100% 0, 100% 100%, 0 100%); }
.e_wifi { width: 4.1cqw; height: 2.8cqw; clip-path: polygon(50% 100%, 0 30%, 15% 12%, 50% 0, 85% 12%, 100% 30%); }
.e_bat { width: 6.4cqw; height: 3cqw; border-radius: .8cqw; background: transparent !important; border: .35cqw solid rgba(255,255,255,.45); position: relative; }
.e_bat::after { content: ""; position: absolute; inset: .35cqw; right: 1cqw; border-radius: .4cqw; background: #fff; }
.dv-web .dv_pantalla .dv_video { flex: 1; min-height: 0; height: auto; object-fit: cover; object-position: top center; }
.dv_video.is-fundiendo { opacity: .15; transition: opacity .2s; }
.dv_video { transition: opacity .35s; }

/* ia: el asistente, con el aspecto que tiene en el sistema */
.chat {
  flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; color: #18181b;
  font: 400 .78rem/1.45 "Geist", system-ui, sans-serif;
}
.chat_cab { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 8px; }
.chat_cab b { font-weight: 600; font-size: 1rem; letter-spacing: -.02em; }
.chat_estado { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; background: #f4f4f5; font-size: .68rem; }
.chat_estado i { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; }
.chat_lista { flex: 1; min-height: 0; overflow: hidden; padding: 4px 16px 6px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.chat_msg { max-width: 86%; padding: 8px 11px; border-radius: 12px; animation: chatEntra .35s cubic-bezier(.2, .8, .2, 1); }
.chat_msg.es-tuyo { align-self: flex-end; background: #18181b; color: #fff; border-bottom-right-radius: 4px; }
.chat_msg.es-suyo { align-self: flex-start; background: #f4f4f5; border-bottom-left-radius: 4px; }
.chat_msg b { font-weight: 600; }
.chat_pensando { display: inline-flex; gap: 4px; padding: 4px 2px; }
.chat_pensando span { width: 6px; height: 6px; border-radius: 50%; background: #a1a1aa; animation: chatPunto 1s infinite; }
.chat_pensando span:nth-child(2) { animation-delay: .15s; }
.chat_pensando span:nth-child(3) { animation-delay: .3s; }
@keyframes chatEntra { from { opacity: 0; transform: translateY(8px); } }
@keyframes chatPunto { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.chat_sugerencias { flex: none; display: flex; gap: 6px; padding: 6px 16px; overflow-x: auto; scrollbar-width: none; }
.chat_sugerencias button {
  flex: none; padding: 5px 10px; border-radius: 99px; border: 1px solid #e4e4e7; background: #fff; cursor: pointer;
  font: 500 .7rem/1.2 "Geist", system-ui, sans-serif; color: #3f3f46; transition: background-color .2s, border-color .2s;
}
.chat_sugerencias button:hover { background: #f4f4f5; border-color: #d4d4d8; }
.chat_sugerencias button:disabled { opacity: .5; cursor: default; }
.chat_entrada {
  flex: none; display: flex; align-items: center; gap: 8px; margin: 4px 16px 14px; padding: 8px 8px 8px 12px;
  border: 1px solid #e4e4e7; border-radius: 10px; color: #a1a1aa;
}
.chat_entrada.is-escribiendo { color: #18181b; }
.chat_texto { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat_entrada b { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: #18181b; color: #fff; font-weight: 500; }

/* ia: el mismo asistente por Telegram, en un iPhone. La pantalla se dibuja
   a tamaño real (390 × 844) y se escala para caber: así los tamaños de letra
   y los márgenes son los de la aplicación de verdad. */
/* El teléfono a la izquierda y el panel a su lado, casi juntos: primero
   se ve el gesto (la foto por Telegram) y después dónde queda registrado. */
.dv-ia .dv_pantallas { flex-direction: row; gap: 14px; }
.dv-ia .dv_telefono { position: relative; right: auto; bottom: auto; order: -1; flex: none; height: 100%; }
.dv-ia .dv_ventana { flex: 1; min-width: 0; }
.tg {
  position: absolute; left: 0; top: 0; width: 390px; height: 844px;
  transform: scale(var(--k, .4)); transform-origin: 0 0; overflow: hidden;
  display: flex; flex-direction: column; color: #000;
  font: 400 16px/1.32 -apple-system, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; letter-spacing: -.01em;
  background:
    radial-gradient(120% 60% at 20% 15%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(90% 50% at 85% 80%, rgba(255,255,210,.4), transparent 60%),
    linear-gradient(160deg, #cfe3b7 0%, #a9cfb4 45%, #c7dba0 100%);
}
.tg_estado {
  flex: none; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 6px 32px 0 40px;
  background: rgba(247, 247, 247, .96); font-size: 17px;
}
.tg_estado b { font-weight: 600; }
.tg_iconos { display: flex; align-items: center; gap: 6px; }
.tg_senal { width: 18px; height: 11px; background: linear-gradient(90deg, #000 0 3px, transparent 3px 5px, #000 5px 8px, transparent 8px 10px, #000 10px 13px, transparent 13px 15px, #000 15px); clip-path: polygon(0 75%, 22% 75%, 22% 50%, 48% 50%, 48% 25%, 74% 25%, 74% 0, 100% 0, 100% 100%, 0 100%); }
.tg_wifi { width: 16px; height: 11px; background: #000; clip-path: polygon(50% 100%, 0 30%, 15% 12%, 50% 0, 85% 12%, 100% 30%); }
.tg_bat { width: 25px; height: 12px; border: 1.5px solid rgba(0,0,0,.4); border-radius: 4px; position: relative; }
.tg_bat::after { content: ""; position: absolute; inset: 1.5px; right: 4px; border-radius: 1.5px; background: #000; }
.tg_cab {
  flex: none; height: 52px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 12px 2px;
  background: rgba(247, 247, 247, .96); border-bottom: .5px solid rgba(0,0,0,.18);
}
.tg_atras { color: #007aff; font-size: 17px; }
.tg_quien { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.tg_quien b { font-weight: 600; font-size: 16.5px; }
.tg_sub { font-size: 13px; color: #8e8e93; }
.tg_sub.is-escribe { color: #007aff; }
.tg_avatar { justify-self: end; width: 36px; height: 36px; border-radius: 50%; background: #111; padding: 7px; }
.tg_lista { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 8px 10px 10px; }
.tg_fecha { align-self: center; margin-bottom: 4px; padding: 3px 10px; border-radius: 12px; background: rgba(46, 82, 52, .28); color: #fff; font-size: 13.5px; font-weight: 500; }
.tg_msg {
  position: relative; max-width: 80%; padding: 7px 11px 8px; border-radius: 18px;
  font-size: 16px; line-height: 1.32; animation: tgEntra .3s cubic-bezier(.2, .8, .2, 1); word-wrap: break-word;
}
.tg_msg.es-tuyo { align-self: flex-end; background: #e1fec6; border-bottom-right-radius: 6px; }
.tg_msg.es-suyo { align-self: flex-start; background: #fff; border-bottom-left-radius: 6px; }
.tg_msg b { font-weight: 600; }
.tg_hora { float: right; margin: 7px 0 -4px 10px; font-size: 11.5px; color: #a1aab3; display: inline-flex; gap: 2px; align-items: center; }
.tg_msg.es-tuyo .tg_hora { color: #5bae59; }
.tg_foto { padding: 3px; border-radius: 18px; border-bottom-right-radius: 6px; }
.tg_foto img { display: block; width: 236px; height: auto; border-radius: 15px; border-bottom-right-radius: 4px; }
.tg_foto .tg_hora { position: absolute; right: 10px; bottom: 9px; margin: 0; padding: 2px 7px; border-radius: 10px; background: rgba(0,0,0,.4); color: #fff; }
.tg_subida { position: absolute; inset: 3px; border-radius: 15px; background: rgba(0,0,0,.35); display: grid; place-items: center; transition: opacity .3s; }
.tg_subida svg { width: 46px; height: 46px; }
.tg_subida circle { fill: none; stroke: #fff; stroke-width: 3; stroke-dasharray: 126; stroke-dashoffset: 126; transform: rotate(-90deg); transform-origin: 50% 50%; }
.tg_botones { align-self: flex-start; width: 80%; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: -2px; animation: tgEntra .3s cubic-bezier(.2, .8, .2, 1); }
.tg_botones span {
  padding: 10px 6px; border-radius: 10px; text-align: center; color: #fff; font-size: 15px; font-weight: 500;
  background: rgba(46, 82, 52, .38); transition: background-color .2s, transform .2s;
}
.tg_botones span.is-toca { background: rgba(46, 82, 52, .62); transform: scale(.96); }
.tg_pensando { display: inline-flex; gap: 4px; padding: 6px 2px; }
.tg_pensando i { width: 8px; height: 8px; border-radius: 50%; background: #b5bcc4; animation: chatPunto 1s infinite; }
.tg_pensando i:nth-child(2) { animation-delay: .15s; }
.tg_pensando i:nth-child(3) { animation-delay: .3s; }
@keyframes tgEntra { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.tg_barra {
  flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 12px 34px;
  background: rgba(247, 247, 247, .96); border-top: .5px solid rgba(0,0,0,.18); color: #8e8e93;
}
.tg_clip, .tg_mic { width: 27px; height: 27px; flex: none; }
.tg_campo { flex: 1; min-width: 0; height: 36px; display: flex; align-items: center; padding: 0 14px; border-radius: 18px; background: #fff; border: .5px solid rgba(0,0,0,.18); }
.tg_texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #8e8e93; }
.tg_campo.is-escribe .tg_texto { color: #000; }

/* el aviso que aparece en el sistema cuando el gasto entra por Telegram */
.sis_aviso {
  position: absolute; z-index: 3; top: 46px; right: 12px; max-width: 78%;
  display: flex; align-items: center; gap: 10px; padding: 10px 13px 10px 10px;
  background: #fff; color: #18181b; border: 1px solid #e4e4e7; border-radius: 12px;
  box-shadow: 0 14px 34px -12px rgba(0,0,0,.28);
  font: 400 .72rem/1.35 "Geist", system-ui, sans-serif;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .35s, transform .45s cubic-bezier(.2, .8, .2, 1);
}
.sis_aviso.is-on { opacity: 1; transform: none; }
.sis_aviso b { display: block; font-weight: 600; font-size: .78rem; }
.sis_aviso-ico { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #2aabee; display: grid; place-items: center; }
.sis_aviso-ico svg { width: 17px; height: 17px; fill: #fff; }

/* ── Escritorio: el dispositivo a todo el alto ──────────────────────────
   Con el título enorme arriba y la interfaz debajo, a la ventana solo le
   quedaba el alto que sobraba; al ir en su proporción (16:10) salía chica
   y dejaba un hueco de media tarjeta hasta los entregables. Ahora la
   tarjeta va en dos columnas: a la izquierda el número, el título, la
   frase y los entregables; a la derecha el dispositivo, con todo el alto
   de la tarjeta. Las cajas de cabecera y cuerpo se disuelven
   (`display: contents`) para que sus piezas caigan en la rejilla. */
@media (min-width: 992px) {
  .section_services .slide-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "tit fig" "lede fig" "lista fig" "pie pie";
    column-gap: clamp(2rem, 4.5vw, 5rem);
  }
  .section_services .slide-content .slide_head,
  .section_services .slide-content .srv_body { display: contents; }
  .section_services .srv_tit { grid-area: tit; }
  .section_services .srv_lede { grid-area: lede; margin-top: 1.3rem; max-width: 34rem; }
  .section_services .srv_lista { grid-area: lista; margin: 1.6rem 0 1.4rem; min-height: 0; }
  .section_services .srv_fig { grid-area: fig; justify-content: center; margin-bottom: 1.4rem; }
  .section_services .slide_foot { grid-area: pie; }
  .slide-content .slide_head .h2 { font-size: min(9.5vh, 5.4vw); }
}

/* Pantallas bajas: se quita lo que no cabe antes de apretar lo demás */
@media (min-width: 992px) and (max-height: 780px) {
  .srv_lista li { padding: .7rem 0; }
  .slide-content .srv_body { margin: 1.4rem 0 1.1rem; }
}

/* Tableta y teléfono: la tarjeta va en el flujo, todo en una columna */
@media (max-width: 991px) {
  .slide-content .slide_head { grid-template-columns: 1fr; gap: 1.2rem; align-items: start; }
  .slide-content .slide_head .h2 { font-size: clamp(2.6rem, 11vw, 4.7rem); }
  .srv_lede { font-size: 1.05rem; }
  .slide-content .srv_body { grid-template-columns: minmax(0, 1fr); gap: 2rem; margin: 1.8rem 0 1.4rem; }
  .srv_lista li { grid-template-columns: 1fr; gap: .25rem; padding: .8rem 0; }
  /* lo grabado, en su proporción (16:10): la ventana mide lo que su vídeo */
  .dv-sistema .dv_ventana, .dv-web .dv_ventana { flex: none; }
  .dv-sistema .dv_video, .dv-web .dv_ventana .dv_video { flex: none; height: auto; aspect-ratio: 16 / 10; }
  .dv_pantallas { flex: none; margin-bottom: 14px; }
  .dv-ia .dv_ventana { flex: none; height: 27rem; }
  .dv-ia .dv_pantallas { flex: none; }
  /* El apilado (site.js, bloque 07): cada tarjeta se pega arriba —la
     altura exacta la pone el JS— y la que viene después en el documento le
     pasa por encima. El respiro es el tramo en que la tarjeta se ve entera
     y quieta antes de que asome la siguiente. */
  .service_slide { position: sticky; top: 74px; }
  .srv_respiro { display: block; height: 22svh; }
  /* el velo con que la tarjeta que se retira se oscurece (lo pone y lo anima
     site.js); la tarjeta va en su propia capa, así encoger y apagarse no
     obliga a repintarla */
  .srv_velo {
    position: absolute; inset: 0; z-index: 5; pointer-events: none;
    border-radius: inherit; background: #000; opacity: 0;
  }
  .service_slide .slide-content { will-change: transform, opacity; }
  .section_values { z-index: 1; }
}
@media (max-width: 767px) {
  .dv_barra > span { display: none; }
  .dv-web .dv_ventana { margin-right: 22%; }
  .dv_telefono { height: 98%; bottom: -14px; }
  /* en el teléfono, el iPhone va debajo de la ventana y no encima */
  .dv-ia .dv_ventana { margin-right: 0; }
  .dv-ia .dv_telefono { position: relative; right: auto; bottom: auto; height: 31rem; margin: 18px auto 0; }
  /* las sugerencias se desplazan de lado y la segunda quedaba cortada en
     seco contra el borde: se desvanece, que es como se lee «hay más» */
  .chat_sugerencias { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }

  /* ── Tarjetas compactas ──────────────────────────────────────────
     Cada tarjeta cabe en la pantalla, y así puede anclarse y retirarse
     hacia atrás como en escritorio (site.js, bloque 07). Medían cerca de
     1.800 px. Para que quepan, el título sube a la esquina de arriba,
     frente a su número, y deja de abrir la tarjeta con una franja vacía.
     Los entregables quedan solo con su nombre y el pie de figura solo con
     sus enlaces. */
  .slide-content { min-height: 0; padding: 1.1rem 1.15rem 1rem; }
  .slide-content .slide_head {
    padding: 0; grid-template-columns: auto minmax(0, 1fr); gap: .8rem 1rem; align-items: start;
  }
  .slide-content .srv_tit { display: contents; }
  .slide-content .srv_kicker { max-width: 8.6rem; padding-top: .3rem; line-height: 1.5; }
  /* En 600 «y aplicaciones» ya no cabía junto al número y la «y» quedaba
     sola en su línea (en 360–375 px pasaba ya antes): un punto menos. */
  .slide-content .slide_head .h2 {
    justify-self: end; text-align: right;
    font-size: clamp(1.5rem, 7.6vw, 2.4rem); line-height: .92;
  }
  .slide-content .srv_lede { grid-column: 1 / -1; font-size: .95rem; line-height: 1.35; }
  .slide-content .srv_body { gap: .9rem; margin: .9rem 0 .7rem; }
  .srv_lista li > span { display: none; }
  .srv_lista li {
    flex: none; grid-template-columns: 2rem minmax(0, 1fr); align-items: baseline; padding: .5rem 0;
  }
  .srv_lista li::before { grid-row: auto; padding-top: 0; }
  .srv_lista b { font-size: 1.02rem; }
  .srv_fig figcaption { margin-top: .5rem; }
  .srv_fig figcaption .cap_txt { display: none; }
  .dv_tabs { margin-top: 8px; }
  .dv_barra { height: 26px; padding: 0 10px; gap: 5px; }
  .dv_barra > i { width: 8px; height: 8px; }
  .dv_pantallas { margin-bottom: 10px; }
  a.slide_foot { font-size: 1rem; padding-top: .6rem; }
  /* IA: el teléfono con Telegram al lado de los entregables. El panel
     enseña lo mismo que el teléfono y doblaba el alto de la tarjeta. */
  .slide-content .srv_body:has(> .dv-ia) {
    grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; align-items: center;
  }
  .dv-ia .dv_ventana, .dv-ia figcaption { display: none; }
  .dv-ia .dv_pantallas { margin: 0; }
  .dv-ia .dv_telefono { height: 19rem; margin: 0; }
}

/* ── Áreas: por qué servimos a cada una ───────────────────────────────────
   Una frase bajo la ventana de la imagen, que cambia con la palabra que
   pasa por el centro. En tableta y teléfono la imagen va arriba y fija, y la
   frase va como pie sobre ella. */
.spotlight-cap { display: none; }
.spotlight-desc {
  position: absolute; left: 27vw; top: 50%; z-index: 2; pointer-events: none;
  width: clamp(220px, 29vw, 500px);
  transform: translate(-50%, calc(clamp(220px, 29vw, 500px) * 153 / 270 / 2 + 1.2rem));
}
.spotlight-desc p {
  position: absolute; left: 0; top: 0; margin: 0;
  font-size: .98rem; line-height: 1.42; letter-spacing: -.01em; color: var(--soft);
  opacity: 0; transform: translateY(10px); filter: blur(4px);
  transition: opacity .4s var(--ease-out), transform .6s var(--ease-out), filter .4s var(--ease-out);
}
.spotlight-desc p.is-on { opacity: 1; transform: none; filter: none; transition-delay: .12s; }
@media (max-width: 991px) {
  .spotlight-desc { display: none; }
  .spotlight-cap {
    display: block; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    padding: 2.6rem 1rem .9rem; font-size: .9rem; line-height: 1.35; letter-spacing: -.01em; color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
  }
}



/* En los teléfonos chicos (360 px) «Banco» caía sola a una segunda fila de pestañas. */
@media (max-width: 479px) {
  .dv_tabs { gap: 5px; }
  .dv_tabs button { padding: 7px 9px 8px; font-size: .76rem; }
}

/* Teléfonos bajos en vertical (o con las barras de Safari a la vista): la
   tarjeta de servicios aprieta su texto para caber entera bajo la píldora
   sin que su dispositivo tenga que encoger tanto (site.js, encaja). */
@media (max-width: 767px) and (max-height: 760px) {
  .slide-content { padding: .9rem 1.05rem .85rem; }
  .slide-content .slide_head .h2 { font-size: clamp(1.5rem, 7.2vw, 2.1rem); }
  .slide-content .srv_lede { font-size: .86rem; line-height: 1.3; }
  .slide-content .srv_body { gap: .7rem; margin: .7rem 0 .55rem; }
  .srv_lista li { padding: .36rem 0; }
  .srv_lista b { font-size: .95rem; }
  .dv_tabs button { padding: 6px 9px 7px; font-size: .74rem; }
  a.slide_foot { font-size: .92rem; padding-top: .5rem; }
}

/* ── 18 · Teléfono en horizontal ───────────────────────────────────────
   Girado, el teléfono mide 844 × 390 (o 932 × 430): ancho de tableta y
   casi nada de alto. Caía en el diseño de tableta, pensado para pantallas
   altas: la marca se comía media pantalla, la imagen de las áreas la tapaba
   entera y las tarjetas de servicios medían más que ella. Aquí se conserva
   la idea del teléfono en vertical, acomodada a lo ancho. La misma consulta
   está en site.js (HORIZONTAL). */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 768px) and (max-width: 991px) {
  /* ── portada: arriba la nota y los botones, la marca al centro —su
     cuerpo lo limita el alto (site.js, medida)— y la bajada debajo */
  .hero_type-atajos {
    position: fixed; left: var(--pad); right: var(--pad); top: calc(var(--pad) * .8); bottom: auto;
    width: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 1rem; align-items: start;
  }
  .hero_type-atajos .col:not(.is-nota) { display: none !important; }
  .hero_type-atajos .is-nota { display: flex; flex-direction: column; grid-column: 1; grid-row: 1; }
  .hero_type-atajos .is-nota .tit {
    font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem;
  }
  .hero_type-atajos .is-nota p { font-size: .88rem; line-height: 1.35; max-width: 46ch; }
  .hero_type-inner .hero_type-foot { left: 0; right: 0; text-align: center; margin-top: .7rem; }
  .hero_type-sub { font-size: .95rem; line-height: 1.35; }
  /* el interruptor de tema, a su esquina de abajo, como en vertical: arriba
     chocaba con los botones */
  .nav_wrapper.is-pill .theme-switch { top: auto; bottom: var(--pad); right: var(--pad); }

  /* el menú desplegable entra entero en el alto */
  .nav_mobile { gap: .35rem; }
  .nav_mobile a { font-size: 1.5rem; }
  .nav_mobile-contacto { margin-top: .9rem; }

  /* la frase del pase, a la medida del alto */
  .pase_frase { font-size: 6rem; }

  /* ── áreas: la imagen a la izquierda, pegada al centro de la pantalla,
     y la lista a la derecha pasando a su lado (en vertical va debajo) */
  .section_works {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.5rem;
    align-items: start; padding: 2rem var(--pad) 3rem; height: auto; overflow: visible;
  }
  .spotlight-images, .spotlight-images.active {
    grid-column: 1; grid-row: 1; position: sticky; top: max(4.5rem, calc(50svh - 13.5vw));
    width: 100%; margin: 0; clip-path: none; transform: none; left: auto;
  }
  .spotlight-images::before { display: none; }
  .spotlight-titles-container {
    grid-column: 2; grid-row: 1; position: relative; inset: auto; height: auto;
    overflow: visible; margin: 0; padding: 30svh 0 34svh;
  }
  .spotlight-titles { padding: 0; gap: 1.4rem; }
  .h2_works { font-size: 2rem; }

  /* ── servicios: cada tarjeta mide la pantalla bajo la barra y va en dos
     columnas, como en escritorio pero apretada: texto y entregables a la
     izquierda, el dispositivo a la derecha a todo el alto. */
  .section_services .slide-content {
    height: calc(100svh - 88px); min-height: 0; margin: 0 var(--pad); border-radius: .8rem;
    padding: .9rem 1.1rem .8rem;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "tit fig" "lede fig" "lista fig" "pie pie";
    column-gap: 1.6rem;
  }
  .section_services .slide-content .slide_head,
  .section_services .slide-content .srv_body { display: contents; }
  .section_services .srv_tit { grid-area: tit; gap: .45rem; }
  .section_services .srv_kicker { font-size: .6rem; }
  .slide-content .slide_head .h2 { font-size: 1.75rem; line-height: .92; }
  .section_services .srv_lede { grid-area: lede; margin-top: .5rem; font-size: .8rem; line-height: 1.3; }
  .section_services .srv_lista { grid-area: lista; margin: .55rem 0 .35rem; min-height: 0; }
  .srv_lista li {
    flex: none; grid-template-columns: 1.7rem minmax(0, 1fr); align-items: baseline; row-gap: 0; padding: .28rem 0;
  }
  .srv_lista li > span { display: none; }
  .srv_lista li::before { grid-row: auto; padding-top: 0; font-size: .6rem; }
  .srv_lista b { font-size: .92rem; }
  .section_services .srv_fig { grid-area: fig; justify-content: center; min-height: 0; }
  .section_services .slide_foot { grid-area: pie; font-size: .9rem; padding-top: .45rem; }
  .srv_fig figcaption { margin-top: .35rem; font-size: .56rem; }
  .srv_fig figcaption .cap_txt { display: none; }
  .dv_tabs { margin-top: 6px; gap: 5px; }
  .dv_tabs button { padding: 5px 9px 6px; font-size: .7rem; }
  .dv_barra { height: 22px; padding: 0 9px; gap: 5px; }
  .dv_barra > span { display: none; }
  .dv_barra > i { width: 7px; height: 7px; }
  /* el ancho de lo grabado lo pone site.js (proporciona) según el alto */
  .dv_pantallas, .dv-ia .dv_pantallas { flex: 1; min-height: 0; margin-bottom: 0; }
  .dv-sistema .dv_ventana, .dv-web .dv_ventana, .dv-ia .dv_ventana { flex: 1; min-height: 0; height: auto; }
  .dv-sistema .dv_video, .dv-web .dv_ventana .dv_video { flex: 1; min-height: 0; aspect-ratio: auto; }
  .dv-ia .dv_telefono { height: 100%; }
}

/* ── 09j · Áreas: el chip ──────────────────────────────────────────
   Cuatro áreas generales contadas como partes de una sola cosa: un chip
   que se abre en láminas de vidrio. Lo arma assets/js/areas.js sobre la
   sección #trabajos; sin GSAP la sección conserva sus clases de siempre
   (.section_works) y estas reglas no la tocan.
   Solo se anima transform y opacity; el resto se pinta una vez.
   Tipografía: la del sitio, General Sans; títulos en 600 con interletra
   negativa, como los de servicios, proceso y vitrina. La marca de la tapa
   es el logotipo del sitio (Adoria), nunca texto. */
.ar {
  --ar-curva: cubic-bezier(.22, 1, .36, 1);
  --ar-salto: cubic-bezier(.34, 1.56, .64, 1);
  --ar-ok: #3ccf6e;                          /* solo para el ✓ */
  --ar-linea: rgba(255, 255, 255, .26);      /* rótulos y conectores */
  --ar-camino: rgba(255, 255, 255, .16);     /* el camino sin recorrer */
  --ar-tenue: rgba(255, 255, 255, .08);
  --ar-halo: rgba(150, 150, 162, .13);       /* el resplandor detrás de la pieza */
  --ar-sombra: 0, 0, 0;
  --ar-destello: rgba(255, 255, 255, .22);
  --ar-rx: 56deg; --ar-rz: -42deg;            /* la vista isométrica */
  /* el chip: sustrato, silicio, metal; filos de luz de 1 px */
  --ch-filo: rgba(255, 255, 255, .1); --ch-filo-luz: rgba(255, 255, 255, .3);
  --ch-sustrato-1: #18191b; --ch-sustrato-2: #0e0f10;
  --ch-pista: rgba(255, 255, 255, .1); --ch-pad: rgba(255, 255, 255, .26); --ch-smd: rgba(255, 255, 255, .12);
  --ch-silicio-brillo: rgba(205, 210, 225, .09);
  --ch-metal-1: #4b4c51; --ch-metal-2: #232428; --ch-metal-3: #3a3b40; --ch-cepillado: rgba(255, 255, 255, .025);
  --ch-aniso: rgba(255, 255, 255, .16);
  /* las láminas: vidrio ahumado, filo de luz, reflejo que sigue al cursor */
  --ar-vidrio-1: rgba(84, 84, 90, .3); --ar-vidrio-2: rgba(22, 22, 25, .58);
  --ar-vidrio-borde: rgba(255, 255, 255, .14); --ar-vidrio-luz: rgba(255, 255, 255, .42);
  --ar-canto-1: rgba(255, 255, 255, .34); --ar-canto-2: rgba(255, 255, 255, .06); --ar-canto-luz: rgba(255, 255, 255, .5);
  --ar-reflejo: rgba(255, 255, 255, .07); --ar-reflejo-2: rgba(255, 255, 255, .07);
  --ar-plano: rgba(255, 255, 255, .12); --ar-luz-borde: rgba(255, 255, 255, .6); --ar-aura: rgba(255, 255, 255, .09);
  --ar-riel: rgba(255, 255, 255, .28); --ar-grano: .05;
  /* el dibujo de cada componente */
  --bl-linea: rgba(255, 255, 255, .22); --bl-linea-on: rgba(255, 255, 255, .92);
  --bl-relleno: rgba(255, 255, 255, .015); --bl-relleno-on: rgba(255, 255, 255, .06);
  --bl-brillo: rgba(255, 255, 255, .35); --bl-ola: rgba(255, 255, 255, .55);
  --ch-grabado: rgba(0, 0, 0, .55); --ch-grabado-luz: rgba(255, 255, 255, .16);
  --ch-bola: #8d8e93; --ch-bola-luz: #e6e6ea;
  position: relative; width: 100%; height: 100svh; overflow: hidden;
  /* El fondo es exactamente el de la página (sin grano ni gris encima) y,
     por si el teléfono esconde sus barras y la ventana crece más que el
     escenario anclado, se alarga hacia abajo con una sombra lisa del mismo
     color: no hay borde que ver en ningún tema. */
  background: var(--bg); box-shadow: 0 40svh 0 0 var(--bg);
  color: var(--pure);
}
:root[data-theme="light"] .ar {
  --ar-linea: rgba(0, 0, 0, .24);
  --ar-camino: rgba(0, 0, 0, .16);
  --ar-tenue: rgba(0, 0, 0, .07);
  --ar-halo: rgba(255, 255, 255, .85);
  --ar-sombra: 46, 40, 32;
  --ar-destello: rgba(255, 255, 255, .9);
  --ch-filo: rgba(0, 0, 0, .1); --ch-filo-luz: rgba(255, 255, 255, .95);
  --ch-sustrato-1: #ececee; --ch-sustrato-2: #dadadd;
  --ch-pista: rgba(0, 0, 0, .1); --ch-pad: rgba(0, 0, 0, .28); --ch-smd: rgba(0, 0, 0, .12);
  --ch-silicio-brillo: rgba(255, 255, 255, .45);
  --ch-metal-1: #fdfdfd; --ch-metal-2: #d5d6d9; --ch-metal-3: #ececee; --ch-cepillado: rgba(0, 0, 0, .025);
  --ch-aniso: rgba(255, 255, 255, .8);
  /* vidrio esmerilado claro */
  --ar-vidrio-1: rgba(255, 255, 255, .74); --ar-vidrio-2: rgba(230, 230, 235, .46);
  --ar-vidrio-borde: rgba(0, 0, 0, .08); --ar-vidrio-luz: rgba(255, 255, 255, 1);
  --ar-canto-1: rgba(255, 255, 255, .95); --ar-canto-2: rgba(200, 200, 208, .6); --ar-canto-luz: rgba(255, 255, 255, .9);
  --ar-reflejo: rgba(255, 255, 255, .5); --ar-reflejo-2: rgba(255, 255, 255, .38);
  --ar-plano: rgba(0, 0, 0, .12); --ar-luz-borde: rgba(0, 0, 0, .42); --ar-aura: rgba(0, 0, 0, .06);
  --ar-riel: rgba(0, 0, 0, .22);
  --bl-linea: rgba(0, 0, 0, .22); --bl-linea-on: rgba(0, 0, 0, .85);
  --bl-relleno: rgba(0, 0, 0, .015); --bl-relleno-on: rgba(255, 255, 255, .4);
  --bl-brillo: rgba(0, 0, 0, .1); --bl-ola: rgba(0, 0, 0, .3);
  --ch-grabado: rgba(0, 0, 0, .22); --ch-grabado-luz: rgba(255, 255, 255, .95);
  --ch-bola: #a6a7ab; --ch-bola-luz: #ffffff;
}
/* sin especificidad: que cualquier margen propio de abajo le gane */
:where(.ar) :where(p, h2) { margin: 0; }
.ar-escena { position: absolute; inset: 0; will-change: opacity, transform; }
.ar-ceja { color: var(--soft); font-size: 1rem; font-weight: 500; letter-spacing: -.02em; }
.ar-nombre {
  color: var(--pure); font-size: 4.6rem; font-weight: 600; line-height: .95; letter-spacing: -.05em;
}
.ar-texto { color: var(--soft); font-size: 1.2rem; line-height: 1.42; letter-spacing: -.01em; max-width: 31rem; }
.ar-ok { width: 1em; height: 1em; fill: none; stroke: var(--ar-ok); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* El pase («¿Quieres ver algo?») se ancla en el mismo scroll en que el
   prototipo se suelta, ya borrado, como hace la sección de siempre en
   escritorio. Aquí también en tableta y teléfono, porque el prototipo va
   anclado en todos los anchos. La clase va en <html> (la pone el JS): la
   sección anclada vive dentro de un .pin-spacer y no es hermana del pase. */
@media (prefers-reduced-motion: no-preference) {
}

/* ══ Los bloques dibujados (.bl) ══════════════════════════════════════
   El dibujo de cada componente, en línea luminosa: núcleos con su caché,
   columnas de la GPU, el enclave con sus anillos y su cerrojo, la matriz
   del motor neuronal. Va sobre el vidrio de estratos y en las tarjetas de
   recorrido. Dos capas iguales: la base, tenue, y la encendida, que
   aparece con opacidad y es la única que se mueve (en pausa, --bl-juego,
   salvo en el área activa). Todo en cqw: escala con su caja. */
.bl {
  --bl-juego: paused; --l: var(--bl-linea); --f: var(--bl-relleno);
  position: absolute; inset: 0; container-type: size; overflow: hidden;
}
.bl-capa { position: absolute; inset: 0; }
.bl-capa i, .bl-capa b { position: absolute; display: block; }
.bl-luz { --l: var(--bl-linea-on); --f: var(--bl-relleno-on); opacity: 0; transition: opacity .5s var(--ar-curva); }
/* el resplandor de la línea encendida: pintado una vez, en las cajas quietas */
.bl-luz .bl-nucleo, .bl-luz .bl-efi, .bl-luz .bl-cache, .bl-luz .bl-carril, .bl-luz .bl-guarda, .bl-luz .bl-laberinto, .bl-luz .bl-matriz-borde {
  filter: none; box-shadow: inset 0 0 0 1px var(--l), 0 0 6px var(--bl-brillo);
}
.bl-num {
  position: absolute; right: 2%; bottom: 0; font-style: normal; font-size: 7cqw; font-weight: 600;
  letter-spacing: -.02em; color: var(--bl-linea); font-variant-numeric: tabular-nums;
}
/* núcleos: cuatro grandes con su lógica y su caché, cuatro de eficiencia y la caché compartida */
.bl-nucleo { width: 45%; height: 25%; border-radius: 1.6cqw; box-shadow: inset 0 0 0 1px var(--l); background: var(--f); }
.bl-nucleo::before { content: ""; position: absolute; left: 7%; top: 16%; width: 34%; height: 50%; border-radius: 1cqw; box-shadow: inset 0 0 0 1px var(--l); }
.bl-nucleo::after { content: ""; position: absolute; right: 7%; top: 16%; bottom: 16%; width: 42%; background: repeating-linear-gradient(0deg, var(--l) 0 1px, transparent 1px 2.4cqh); }
.bl-nucleo b { left: 7%; width: 34%; bottom: 12%; height: 12%; background: repeating-linear-gradient(90deg, var(--l) 0 1px, transparent 1px 2cqw); }
.bl-efi { top: 63%; width: 9%; height: 14%; border-radius: 1cqw; box-shadow: inset 0 0 0 1px var(--l); background: var(--f); }
.bl-efi b { inset: 28%; box-shadow: inset 0 0 0 1px var(--l); }
.bl-cache {
  left: 4%; top: 63%; width: 46%; height: 30%; border-radius: 1.2cqw; box-shadow: inset 0 0 0 1px var(--l);
  background: repeating-linear-gradient(0deg, var(--l) 0 1px, transparent 1px 2.2cqh), var(--f);
}
.bl-luz .bl-nucleo, .bl-luz .bl-efi { animation: bl-trabaja 2.4s ease-in-out infinite; animation-play-state: var(--bl-juego); }
.bl-luz .bl-nucleo:nth-child(2) { animation-delay: -.6s; }
.bl-luz .bl-nucleo:nth-child(3) { animation-delay: -1.2s; }
.bl-luz .bl-nucleo:nth-child(4) { animation-delay: -1.8s; }
.bl-luz .bl-efi:nth-child(odd) { animation-delay: -.9s; animation-duration: 1.6s; }
@keyframes bl-trabaja { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* vías paralelas: ocho bloques de columnas finas, y una ola que los cruza */
.bl-carril {
  width: 21%; height: 42%; padding: 6% 7%; border-radius: 1.4cqw; box-shadow: inset 0 0 0 1px var(--l);
  background: repeating-linear-gradient(90deg, var(--l) 0 1px, transparent 1px 2.7cqw) content-box, var(--f);
}
.bl-base .bl-ola { display: none; }
.bl-ola {
  top: 0; bottom: 0; left: -45%; width: 45%;
  background: linear-gradient(90deg, transparent, var(--bl-ola) 50%, transparent);
  animation: bl-ola 2.2s linear infinite; animation-play-state: var(--bl-juego);
}
@keyframes bl-ola { to { transform: translateX(330%); } }
/* enclave seguro: anillo de guarda doble, un patrón cerrado y su cerrojo */
.bl-guarda { inset: 7%; border-radius: 3cqw; box-shadow: inset 0 0 0 1px var(--l), inset 0 0 0 2.6cqw var(--f), inset 0 0 0 calc(2.6cqw + 1px) var(--l); }
.bl-luz .bl-guarda { box-shadow: inset 0 0 0 1px var(--l), inset 0 0 0 2.6cqw var(--f), inset 0 0 0 calc(2.6cqw + 1px) var(--l), 0 0 6px var(--bl-brillo); }
.bl-laberinto { inset: 22%; border-radius: 1.6cqw; box-shadow: inset 0 0 0 1px var(--l); }
.bl-laberinto::before, .bl-laberinto::after { content: ""; position: absolute; border-radius: 1.2cqw; box-shadow: inset 0 0 0 1px var(--l); }
.bl-laberinto::before { inset: 14%; }
.bl-laberinto::after { inset: 30%; }
.bl-giro { position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; margin: -23% 0 0 -23%; overflow: visible; }
.bl-giro circle { fill: none; stroke: var(--l); stroke-width: 1.4px; vector-effect: non-scaling-stroke; stroke-dasharray: 18 82; stroke-linecap: round; }
.bl-base .bl-giro { display: none; }
.bl-luz .bl-giro { animation: bl-gira 3.2s linear infinite; animation-play-state: var(--bl-juego); }
@keyframes bl-gira { to { transform: rotate(360deg); } }
.bl-llave { left: 50%; top: 53%; width: 9cqw; height: 7cqw; margin: -3.5cqw 0 0 -4.5cqw; border-radius: 1cqw; background: var(--l); }
.bl-llave::before { content: ""; position: absolute; left: 22%; right: 22%; bottom: 90%; height: 5cqw; border-radius: 3cqw 3cqw 0 0; box-shadow: inset 0 0 0 1px var(--l); }
.bl-luz .bl-guarda { animation: bl-trabaja 2.8s ease-in-out infinite; animation-play-state: var(--bl-juego); }
/* motor neuronal: una matriz de celdas pequeñas; una onda la recorre */
.bl-matriz, .bl-matriz-borde { left: 7%; top: 9%; right: 7%; bottom: 9%; }
.bl-matriz {
  overflow: hidden; background: var(--l);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 5.4cqw, transparent 5.4cqw 7cqw), repeating-linear-gradient(0deg, #000 0 5.4cqw, transparent 5.4cqw 7cqw);
  -webkit-mask-composite: source-in;
  mask: repeating-linear-gradient(90deg, #000 0 5.4cqw, transparent 5.4cqw 7cqw), repeating-linear-gradient(0deg, #000 0 5.4cqw, transparent 5.4cqw 7cqw);
  mask-composite: intersect;
}
.bl-base .bl-matriz { opacity: .45; }
.bl-luz .bl-matriz { background: color-mix(in srgb, var(--l) 30%, transparent); }
.bl-matriz-borde { border-radius: 1cqw; box-shadow: 0 0 0 1cqw var(--f), 0 0 0 calc(1cqw + 1px) var(--l); }
.bl-luz .bl-matriz-borde { box-shadow: 0 0 0 1cqw var(--f), 0 0 0 calc(1cqw + 1px) var(--l), 0 0 8px var(--bl-brillo); }
.bl-base .bl-onda { display: none; }
.bl-onda {
  top: -40%; bottom: -40%; left: -50%; width: 50%;
  background: linear-gradient(90deg, transparent, var(--bl-linea-on) 50%, transparent);
  transform: rotate(18deg);
  animation: bl-onda 2.6s ease-in-out infinite; animation-play-state: var(--bl-juego);
}
@keyframes bl-onda { from { transform: translateX(0) rotate(18deg); } to { transform: translateX(320%) rotate(18deg); } }

/* ══ A · Estratos: un chip que se abre en láminas de vidrio ═══════════ */
.ar--estratos { --s: clamp(210px, min(24vw, 40svh), 380px); }
/* un resplandor detrás de la pieza que se apaga mucho antes de los bordes
   del escenario (el fondo base es el de la página) */
.ar-es-fondo {
  position: absolute; left: 34%; top: 51%; width: min(88vmin, 820px); aspect-ratio: 1; pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--ar-halo), color-mix(in srgb, var(--ar-halo) 40%, transparent) 55%, transparent);
}
.ar.is-apuntando { cursor: pointer; }
/* La pieza cuelga de un punto: el centro del chip. */
.ar-es-pieza { position: absolute; left: 34%; top: 51%; width: 0; height: 0; perspective: 2600px; }
.ar-es-giro, .ar-es-iso { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.ar-es-iso { transform: rotateX(var(--ar-rx)) rotateZ(var(--ar-rz)); }
/* cada capa, centrada, con su lado, su grosor (canto) y lo que alarga su
   rótulo para que todos queden en columna (--lider) */
.ar-chip {
  position: absolute; left: calc(var(--w) / -2); top: calc(var(--w) / -2); width: var(--w); height: var(--w);
  transform-style: preserve-3d; will-change: transform;
}
.ar-chip--bga { --w: calc(var(--s) * .9); --t: 0px; --lider: calc(var(--s) * .071); }
.ar-chip--sustrato { --w: var(--s); --t: calc(var(--s) * .028); --lider: 0px; --canto-1: var(--ch-sustrato-1); --canto-2: var(--ch-sustrato-2); }
.ar-chip--mem { --w: calc(var(--s) * .8); --t: calc(var(--s) * .006); --lider: calc(var(--s) * .141); --canto-1: var(--ar-canto-1); --canto-2: var(--ar-canto-2); }
.ar-chip--comp { --w: calc(var(--s) * .8); --t: calc(var(--s) * .011); --lider: calc(var(--s) * .141); --canto-1: var(--ar-canto-1); --canto-2: var(--ar-canto-2); }
.ar-chip--tapa { --w: calc(var(--s) * .86); --t: calc(var(--s) * .045); --lider: calc(var(--s) * .099); --canto-1: var(--ch-metal-1); --canto-2: var(--ch-metal-2); }
.ar-chip-cara { position: absolute; inset: 0; }
/* los dos cantos que se ven; su brillo sigue a la luz (el JS le da opacidad) */
.ar-es-lado { position: absolute; display: block; overflow: hidden; }
.ar-es-lado--x {
  left: 0; top: 0; width: var(--t); height: 100%; transform-origin: 0 50%; transform: rotateY(90deg);
  background: linear-gradient(90deg, var(--canto-1), var(--canto-2)); box-shadow: inset 1px 0 0 var(--ch-filo-luz);
}
.ar-es-lado--y {
  left: 0; top: 100%; width: 100%; height: var(--t); transform-origin: 50% 0; transform: rotateX(-90deg);
  background: linear-gradient(180deg, var(--canto-1), var(--canto-2)); box-shadow: inset 0 1px 0 var(--ch-filo-luz);
}
.ar-es-lado > i { position: absolute; inset: 0; background: var(--ar-canto-luz); opacity: 0; will-change: opacity; }
.ar-chip--bga .ar-es-lado { display: none; }
/* el reflejo de cada cara: una franja y una mancha de luz que siguen al cursor */
.ar-es-reflejo {
  position: absolute; inset: -40%; pointer-events: none; will-change: transform;
  background: linear-gradient(115deg, transparent 40%, var(--ar-reflejo) 49%, transparent 58%),
              radial-gradient(28% 28% at 32% 30%, var(--ar-reflejo-2), transparent 70%);
}
/* contactos: la malla de bolitas de soldadura y, aparte, sus puntos de brillo */
.ar-bga {
  border-radius: 2%; overflow: hidden;
  background: radial-gradient(circle at 50% 50%, var(--ch-bola) 0 32%, color-mix(in srgb, var(--ch-bola) 60%, transparent) 40%, transparent 46%) 0 0 / calc(100% / 18) calc(100% / 18);
}
.ar-bga-brillo {
  position: absolute; inset: 0; will-change: transform;
  background: radial-gradient(circle at 38% 34%, var(--ch-bola-luz) 0 8%, transparent 15%) 0 0 / calc(100% / 18) calc(100% / 18);
}
/* sustrato: la placa con sus pistas, los pads y unos condensadores */
.ar-sustrato {
  border-radius: 2%; overflow: hidden;
  background: radial-gradient(120% 90% at 18% 10%, var(--ch-silicio-brillo), transparent 60%), linear-gradient(150deg, var(--ch-sustrato-1), var(--ch-sustrato-2));
  box-shadow: inset 0 0 0 1px var(--ch-filo), inset 1px 0 0 var(--ch-filo-luz), inset 0 -1px 0 var(--ch-filo-luz);
}
.ar-pistas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ar-pistas path { fill: none; stroke: var(--ch-pista); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.ar-pads { position: absolute; inset: 14%; border-radius: 1.5%; border: 1px dashed var(--ch-pad); }
.ar-smd {
  position: absolute; width: 3.2%; height: 1.7%;
  background: linear-gradient(90deg, var(--ch-pad) 0 26%, var(--ch-smd) 26% 74%, var(--ch-pad) 74%);
}
.ar-smd--v { width: 1.7%; height: 3.2%; background: linear-gradient(var(--ch-pad) 0 26%, var(--ch-smd) 26% 74%, var(--ch-pad) 74%); }
.ar-pin1 { position: absolute; left: 3%; top: 3%; width: 0; height: 0; border-top: calc(var(--s) * .035) solid var(--ch-pad); border-right: calc(var(--s) * .035) solid transparent; }
/* las láminas de vidrio: translúcidas, con filo de luz, grano fino y un
   contorno discontinuo de programa de diseño */
.ar-vidrio {
  border-radius: 3%; overflow: hidden;
  background: linear-gradient(150deg, var(--ar-vidrio-1), var(--ar-vidrio-2) 72%);
  box-shadow: inset 0 0 0 1px var(--ar-vidrio-borde), inset 1px 0 0 var(--ar-vidrio-luz), inset 0 -1px 0 var(--ar-vidrio-luz);
}
.ar-vidrio::before {
  content: ""; position: absolute; inset: 0; opacity: var(--ar-grano); pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='2.4 0 0 0 -.7 2.4 0 0 0 -.7 2.4 0 0 0 -.7 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.ar-vidrio::after { content: ""; position: absolute; inset: 4%; border-radius: 2%; border: 1px dashed var(--ar-plano); pointer-events: none; }
.ar-vidrio .bl { inset: 10%; opacity: .7; transition: opacity .5s var(--ar-curva); }
.ar-chip.is-on .bl, .ar-chip.is-toque .bl { opacity: 1; }
.ar-chip.is-on .bl-luz { opacity: 1; }
.ar-chip.is-toque:not(.is-on) .bl-luz { opacity: .6; }
.ar.is-en-vista .ar-chip.is-on .bl { --bl-juego: running; }
/* encendida: el filo brilla entero */
.ar-vidrio > .ar-es-borde { display: none; }
.ar-chip--comp .ar-vidrio { transition: box-shadow .5s var(--ar-curva); }
.ar-chip--comp.is-on .ar-vidrio {
  box-shadow: inset 0 0 0 1px var(--ar-luz-borde), inset 1px 0 0 var(--ar-vidrio-luz), inset 0 -1px 0 var(--ar-vidrio-luz), 0 0 calc(var(--s) * .05) var(--ar-aura);
}
/* el destello que recorre la lámina una vez al encenderse */
.ar-es-destello {
  position: absolute; top: -30%; bottom: -30%; left: -60%; right: -60%; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 43%, var(--ar-destello) 50%, transparent 57%);
  transform: translateX(-60%);
}
.ar-chip.is-on .ar-es-destello { opacity: 1; transform: translateX(60%); transition: transform 1.4s var(--ar-curva) .15s, opacity .2s; }
/* la memoria unificada: la franja central y los buses hacia los cuatro componentes */
.ar-memo {
  position: absolute; left: 44%; width: 12%; top: 10%; bottom: 10%; border-radius: 1.5cqw;
  background: repeating-linear-gradient(0deg, var(--bl-linea) 0 1px, transparent 1px calc(var(--s) * .018));
  box-shadow: inset 0 0 0 1px var(--bl-linea);
}
.ar-memo-bus { position: absolute; height: 12%; width: 24%; background: repeating-linear-gradient(0deg, var(--bl-linea) 0 1px, transparent 1px 25%); }
.ar-memo-bus--1 { left: 18%; top: 22%; } .ar-memo-bus--2 { left: 58%; top: 22%; }
.ar-memo-bus--3 { left: 18%; top: 66%; } .ar-memo-bus--4 { left: 58%; top: 66%; }
.ar-memo-bus::before { content: ""; position: absolute; top: -40%; bottom: -40%; width: 1px; background: var(--bl-linea); }
.ar-memo-bus--1::before, .ar-memo-bus--3::before { left: 0; }
.ar-memo-bus--2::before, .ar-memo-bus--4::before { right: 0; }
/* el bus del área activa se enciende */
.ar[data-activa="1"] .ar-memo-bus--1, .ar[data-activa="2"] .ar-memo-bus--2,
.ar[data-activa="3"] .ar-memo-bus--3, .ar[data-activa="4"] .ar-memo-bus--4 {
  background: repeating-linear-gradient(0deg, var(--bl-linea-on) 0 1px, transparent 1px 25%);
}
/* los rieles de datos: de pie en la vista, de la memoria a la lámina de
   arriba; un pulso sube por ellos (lo mueve el JS) */
.ar-es-riel {
  position: absolute; left: calc(var(--s) * .37); top: calc(var(--s) * .37); width: 2px; height: 100px; margin-left: -1px;
  transform-origin: 50% 0; opacity: 0; overflow: hidden; pointer-events: none; background: var(--ar-riel);
  will-change: transform, opacity;
}
.ar-es-riel--b { left: calc(var(--s) * -.37); }
.ar-es-riel b { position: absolute; left: 0; right: 0; top: 0; height: 18%; background: linear-gradient(transparent, var(--pure), transparent); }
/* la tapa: metal cepillado con la marca grabada (el logotipo, en Adoria),
   una franja de luz perpendicular al cepillado y un reflejo, que siguen al cursor */
.ar-tapa {
  border-radius: 2.6%; overflow: hidden; isolation: isolate;
  background:
    repeating-linear-gradient(90deg, var(--ch-cepillado) 0 1px, transparent 1px 3px),
    linear-gradient(125deg, var(--ch-metal-1), var(--ch-metal-2) 40%, var(--ch-metal-3) 62%, var(--ch-metal-2));
  box-shadow: inset 0 0 0 1px var(--ch-filo), inset 1.5px 0 0 var(--ch-filo-luz), inset 0 -1.5px 0 var(--ch-filo-luz);
}
.ar-tapa-aniso {
  position: absolute; top: 0; bottom: 0; left: 30%; width: 40%; z-index: 0; pointer-events: none; will-change: transform;
  background: linear-gradient(90deg, transparent, var(--ch-aniso) 50%, transparent);
}
.ar-tapa-luz {
  position: absolute; inset: -20%; z-index: 0; pointer-events: none; will-change: transform;
  background: radial-gradient(30% 30% at 50% 50%, var(--ch-aniso), transparent 70%);
}
.ar-tapa-marca {
  position: absolute; left: 20%; right: 20%; top: 45%; height: 11%; background: var(--ch-grabado); z-index: 2;
  -webkit-mask: url("../img/moxen-wordmark.svg") center / contain no-repeat; mask: url("../img/moxen-wordmark.svg") center / contain no-repeat;
}
.ar-tapa-marca--luz { background: var(--ch-grabado-luz); transform: translate(1px, 1px); z-index: 1; }
.ar-tapa-cod {
  position: absolute; left: 7%; bottom: 6.5%; z-index: 2; font-style: normal; font-size: calc(var(--s) * .028); font-weight: 600;
  letter-spacing: .08em; color: var(--ch-grabado);
}
.ar-tapa-pin { position: absolute; left: 6.5%; top: 6.5%; z-index: 2; width: 2.6%; height: 2.6%; border-radius: 50%; background: var(--ch-grabado); box-shadow: 1px 1px 0 var(--ch-grabado-luz); }
/* la sombra que cada capa deja sobre la de abajo (borrosa ya de origen:
   el JS solo la acerca, la agranda y la apaga) */
.ar-es-sombra {
  position: absolute; inset: 6%; border-radius: 6px; opacity: 0; pointer-events: none;
  background: rgba(var(--ar-sombra), .45);
  box-shadow: 0 0 calc(var(--s) * .06) calc(var(--s) * .03) rgba(var(--ar-sombra), .45);
  will-change: transform, opacity;
}
/* el suelo: retícula técnica, sombra ambiente y sombra de contacto */
.ar-es-suelo {
  position: absolute; left: calc(var(--s) * -1.4); top: calc(var(--s) * -1.4);
  width: calc(var(--s) * 2.8); height: calc(var(--s) * 2.8); will-change: transform;
}
.ar-es-suelo i { position: absolute; display: block; pointer-events: none; }
.ar-es-rejilla {
  inset: 0;
  background: linear-gradient(var(--ar-tenue) 1px, transparent 1px) 0 0 / calc(var(--s) / 8) calc(var(--s) / 8),
              linear-gradient(90deg, var(--ar-tenue) 1px, transparent 1px) 0 0 / calc(var(--s) / 8) calc(var(--s) / 8);
  -webkit-mask: radial-gradient(closest-side, #000 35%, transparent); mask: radial-gradient(closest-side, #000 35%, transparent);
}
.ar-es-ambiente {
  left: 14%; top: 14%; width: 80%; height: 80%;
  background: radial-gradient(closest-side, rgba(var(--ar-sombra), .34), rgba(var(--ar-sombra), .12) 55%, transparent);
}
.ar-es-contacto {
  left: calc(50% - var(--s) * .45); top: calc(50% - var(--s) * .45); width: calc(var(--s) * .9); height: calc(var(--s) * .9); border-radius: 4px;
  background: rgba(var(--ar-sombra), .4); box-shadow: 0 0 12px 4px rgba(var(--ar-sombra), .35);
}
/* Rótulos: anclados al vértice izquierdo de cada capa y girados de vuelta
   hacia quien mira; las líneas se alargan para que los nombres queden en
   columna aunque las capas midan distinto (--lider). */
.ar-es-rotulo {
  position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none;
  transform-origin: 0 0; transform: rotateZ(calc(var(--ar-rz) * -1)) rotateX(calc(var(--ar-rx) * -1));
  will-change: opacity;
}
.ar-es-rotulo > i { position: absolute; right: 0; top: 0; width: calc(3.2rem + var(--lider)); height: 1px; background: var(--ar-linea); transition: background-color .3s; }
.ar-es-rotulo > i::after { content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--soft); }
.ar-es-rotulo b {
  position: absolute; right: calc(3.9rem + var(--lider)); top: 0; transform: translateY(-50%);
  white-space: nowrap; font-size: .95rem; font-weight: 500; letter-spacing: -.02em; color: var(--soft);
  transition: color .3s var(--ar-curva);
}
.ar-es-rotulo em { font-style: normal; font-variant-numeric: tabular-nums; margin-right: .45em; opacity: .6; }
.ar-chip.is-on .ar-es-rotulo b, .ar-chip.is-toque .ar-es-rotulo b { color: var(--pure); font-weight: 600; }
.ar-chip--comp.is-on .ar-es-rotulo > i, .ar-chip.is-toque .ar-es-rotulo > i { background: var(--pure); }
/* en el teléfono, sin rótulos: el nombre de la capa tocada junto al chip */
.ar-es-etiqueta {
  position: absolute; left: 0; top: 0; z-index: 5; display: none; align-items: baseline; gap: .4rem;
  padding: .35rem .75rem; border-radius: 99px; pointer-events: none; opacity: 0; will-change: transform, opacity;
  background: color-mix(in srgb, var(--bg) 84%, transparent); box-shadow: inset 0 0 0 1px var(--line);
  font-size: .8rem; font-weight: 600; letter-spacing: -.01em; color: var(--pure); white-space: nowrap;
  transition: opacity .3s var(--ar-curva);
}
.ar-es-etiqueta em { font-style: normal; color: var(--soft); font-variant-numeric: tabular-nums; }
.ar-es-etiqueta.is-on { opacity: 1; }

/* La ficha a un lado: una por estado, superpuestas en la misma celda;
   la que toca sube a su sitio y la anterior sigue subiendo al irse. */
.ar-es-panel { position: absolute; left: 61%; right: 5vw; top: 50%; transform: translateY(-50%); }
.ar-es-panel .ar-ceja { margin-bottom: 2.4rem; }
.ar-es-fichas { display: grid; }
.ar-es-ficha {
  grid-area: 1 / 1; align-self: center; opacity: 0; pointer-events: none;
  transform: translate3d(0, 1.6rem, 0);
  transition: opacity .22s var(--ar-curva), transform .8s var(--ar-curva);
}
.ar-es-ficha.is-antes { transform: translate3d(0, -1.6rem, 0); }
/* la que llega espera a que la otra se haya apagado: nunca dos títulos a la vez */
.ar-es-ficha.is-on { opacity: 1; transform: none; pointer-events: auto; transition: opacity .45s .2s var(--ar-curva), transform .8s .12s var(--ar-curva); }
.ar-es-ficha .ar-texto { margin-top: 1.5rem; }
.ar--estratos .ar-nombre { font-size: 4.2rem; max-width: 9.5em; }
.ar-es-num {
  display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem;
  color: var(--soft); font-size: .95rem; font-variant-numeric: tabular-nums;
}
.ar-es-num::before { content: ""; width: 2.6rem; height: 1px; background: var(--ar-linea); }
.ar-es-num b { color: var(--pure); font-weight: 600; }
.ar-es-titulo { font-size: 4.6rem; font-weight: 600; line-height: .98; letter-spacing: -.05em; color: var(--pure); }
.ar-es-bajada { margin-top: 1.7rem; color: var(--soft); font-size: 1.35rem; letter-spacing: -.02em; }
.ar-es-pista { display: flex; align-items: center; gap: .6rem; margin-top: 2.6rem; color: var(--soft); font-size: .95rem; }
.ar-es-flecha { display: block; width: 1.1rem; height: 1.1rem; animation: ar-baja 1.8s var(--ar-curva) infinite; }
.ar-es-flecha svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes ar-baja { 0% { transform: translateY(-3px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(5px); opacity: 0; } }
.ar-es-ficha--cierre .ar-es-titulo { font-size: 3.6rem; max-width: 9em; }
.ar-ok-caja { display: inline-block; width: .8em; height: .8em; margin-left: .2em; vertical-align: -.02em; }
.ar-ok-caja .ar-ok { width: 100%; height: 100%; }

/* teléfono: el chip arriba, la ficha abajo; sin rótulos (no caben) */
@media (max-width: 767px) {
  .ar--estratos { --s: min(60vw, 26svh); }
  .ar-es-fondo { left: 50%; top: 35%; width: 92vw; }
  .ar-es-pieza { left: 50%; top: 35%; }
  .ar-es-rotulo { display: none; }
  .ar-es-etiqueta { display: flex; }
  .ar-es-panel { left: var(--pad); right: var(--pad); top: auto; bottom: 5.4rem; transform: none; }
  .ar-es-panel .ar-ceja { margin-bottom: .9rem; font-size: .85rem; }
  .ar-es-num { margin-bottom: .55rem; font-size: .82rem; }
  .ar-es-num::before { width: 1.6rem; }
  .ar--estratos .ar-nombre { font-size: 2.4rem; }
  .ar-es-ficha .ar-texto { margin-top: .75rem; font-size: .98rem; line-height: 1.38; }
  .ar-es-titulo { font-size: 2.55rem; }
  .ar-es-bajada { margin-top: .6rem; font-size: 1.05rem; }
  .ar-es-pista { margin-top: 1.1rem; font-size: .85rem; }
  .ar-es-ficha--cierre .ar-es-titulo { font-size: 2.2rem; }
}
/* teléfono girado: chip a la izquierda, ficha a la derecha */
@media (orientation: landscape) and (max-height: 500px) {
  .ar--estratos { --s: min(24vw, 36svh); }
  .ar-es-fondo { left: 30%; top: 54%; width: 70vmin; }
  .ar-es-pieza { left: 30%; top: 54%; }
  .ar-es-rotulo { display: none; }
  .ar-es-etiqueta { display: flex; }
  .ar-es-panel { left: 56%; right: var(--pad); top: 50%; bottom: auto; transform: translateY(-50%); }
}

/* ══ Sin animación: versiones quietas que se entienden ════════════════ */
@media (prefers-reduced-motion: reduce) {
  .ar { height: auto; overflow: visible; }
  .ar-escena { position: relative; inset: auto; }
  .ar *, .ar *::before, .ar *::after { animation: none !important; transition: none !important; }
  /* estratos: el chip abierto con sus rótulos y, al lado, las cuatro fichas */
  .ar--estratos .ar-escena {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
    gap: 3rem 4rem; padding: 7rem var(--pad);
  }
  .ar-es-fondo { display: none; }
  /* el chip se queda a la vista mientras se leen las fichas (sticky no
     es movimiento: va con el scroll) */
  .ar-es-pieza { position: sticky; top: calc(50svh - var(--s) * 1.2); align-self: start; left: auto; width: auto; height: calc(var(--s) * 2.4); }
  .ar-es-giro { left: 58%; top: 50%; }
  .ar-es-rotulo { opacity: 1 !important; }
  .ar-es-riel, .ar-es-etiqueta { display: none; }
  .ar-es-panel { position: static; transform: none; }
  .ar-es-fichas { gap: 2.4rem; }
  .ar-es-ficha { grid-area: auto; opacity: 1; transform: none; }
  .ar-es-ficha--cierre, .ar-es-pista { display: none; }
  .ar-es-ficha .ar-nombre { font-size: 2.6rem; }
  .ar-es-ficha .ar-texto { margin-top: .7rem; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  .ar--estratos .ar-escena { grid-template-columns: minmax(0, 1fr); padding: 5rem var(--pad); }
  .ar-es-pieza { position: relative; top: auto; height: calc(var(--s) * 2.3); }
  .ar-es-giro { left: 50%; }
}
/* ── fin 09j ── */

/* ── 19 · Revisión de octubre de 2026: páginas interiores ──────────────
   Lo que comparten la tienda, cada recurso, los servicios y las legales
   (llevan `es-interior` en el <body>). La portada no se toca aquí. */

/* Con la raíz en 0,93vw, entre 768 y 1100 px el texto bajaba a 7–10 px
   (una tableta, un teléfono girado): ilegible. En las interiores la raíz
   tiene un piso; desde ~1400 px manda otra vez el ancho. */
@media (min-width: 768px) {
  html:has(> body.es-interior) { font-size: max(.93vw, 13px); }
}
@media (min-width: 1441px) {
  html:has(> body.es-interior) { font-size: max(.83vw, 13px); }
}

/* La barra va en `difference`, sin fondo: en la portada pasa sobre
   secciones a pantalla completa, pero en las interiores el texto corría por
   debajo y se montaba con «MOXEN». Un velo del color del fondo, solo
   arriba, deja la barra sobre algo liso. */
body.es-interior::before {
  content: ""; position: fixed; inset: 0 0 auto; z-index: 19; pointer-events: none;
  height: calc(var(--pad) + 4.4rem);
  background: linear-gradient(var(--bg) calc(var(--pad) + 2.5rem), transparent);
}

/* Servicio con cuatro rubros: en escritorio, una fila de cuatro (con tres
   columnas quedaba uno solo abajo). */
@media (min-width: 992px) {
  .sv_rubros-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* La marca en Adoria lleva aire a la derecha para que su N no se pegue a la
   palabra siguiente; ante una coma o un punto, ese aire sobraba
   («MOXEN ,»). site.js marca esos casos. */
.marca.es-pegada { margin-right: .02em; }

/* Kickers y rótulos: sin una palabra sola en la segunda línea */
.sv_kicker, .rp_cat { text-wrap: balance; }
.sv_cierre-texto, .rp_desc, .legal p { text-wrap: pretty; }

/* ── Teléfono: el idioma y el tema no tapan lo que se lee ──
   Van fijos abajo a la derecha y se montaban sobre botones, precios y
   preguntas. Al bajar se apartan; al subir, arriba del todo o al final de
   la página vuelven (site.js pone `is-bajando`). */
@media (max-width: 700px), (orientation: landscape) and (max-height: 500px) {
  .nav_wrapper.is-pill .nav_contain .theme-switch {
    transition: opacity .35s var(--ease-out), translate .45s var(--ease-out),
                border-color .35s var(--ease-out), background .35s var(--ease-out);
  }
  .idioma-switch { transition: border-color .35s var(--ease-out), opacity .35s var(--ease-out), translate .45s var(--ease-out); }
  html.is-bajando .nav_wrapper.is-pill .nav_contain .theme-switch,
  html.is-bajando .idioma-switch {
    translate: 0 calc(100% + var(--pad) + 1rem); opacity: 0 !important; pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.is-bajando .nav_wrapper.is-pill .nav_contain .theme-switch,
  html.is-bajando .idioma-switch { translate: none; }
}
@media (max-width: 370px) {
  .slide-content .slide_head .h2 { font-size: clamp(1.5rem, 7.2vw, 2.1rem); }
}
/* ── fin 19 ── */

/* ── 20 · Galería de trabajos (muestras.html) ──────────────────────────
   Las tarjetas y los filtros los escribe muestras/galeria_html.py; el
   comportamiento (filtrar por categoría y correr el video) está en
   assets/js/galeria.js. En px: el rem del sitio es fluido. */
.section_galeria { padding: calc(var(--pad) + 3.6rem) 0 120px; }
.section_galeria .sv_migas { margin-bottom: 2.4rem; }
.gl_cabeza .rc_titulo { max-width: 860px; }
.gl_bajada { max-width: 560px; margin: 22px 0 0; color: var(--soft); font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.gl_barra {
  position: sticky; top: 0; z-index: 6;
  margin: -24px 0 28px; padding: 84px 0 12px;
  background: var(--bg);
  /* el fondo llega a los bordes de la ventana y hasta arriba, bajo el menú: sin rendija por donde asomen las fotos */
  box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax);
}
.gl_barra::after {                     /* un velo bajo la barra, para que las fotos no corten en seco */
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; pointer-events: none;
  background: linear-gradient(var(--bg), transparent);
}
.gl_rejilla {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 24px;
}
.gl_item[hidden] { display: none; }
.gl_carta { display: block; color: inherit; text-decoration: none; outline: none; }
.gl_marco {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 14px; background: var(--line);
  transform: translateZ(0);            /* Safari: que el radio recorte también el video */
}
.gl_marco img, .gl_marco video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.gl_marco img { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.gl_marco video { opacity: 0; transition: opacity .4s ease; }
.gl_carta.is-vivo video { opacity: 1; }
.gl_carta:hover .gl_marco img { transform: scale(1.015); }
.gl_carta:focus-visible .gl_marco { outline: 2px solid var(--pure); outline-offset: 4px; }
.gl_pie { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; }
.gl_pie b { font-weight: 500; font-size: 16px; letter-spacing: -.01em; color: var(--pure); }
.gl_pie em {
  font: 400 11px/1.4 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase;
  color: var(--soft); text-align: right;
}
@media (max-width: 991px) {
  .gl_rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px; }
  .gl_barra { margin-top: -28px; padding-top: 76px; }
}
@media (max-width: 600px) {
  .gl_rejilla { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .gl_bajada { font-size: 15px; }
  .gl_pie b { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .gl_marco img, .gl_marco video { transition: none; }
}
/* ── fin 20 ── */

/* ── 21 · Servicios, versión mínima (13-10) ─────────────────────────────
   Los entregables van sin bajada, sin líneas y sin enlace (todos llevaban a
   la misma página): solo el número y el nombre. Al llegar la tarjeta, cada
   número sube a su sitio y su nombre entra detrás, uno tras otro (--i lo
   pone el HTML). La pantalla de la tarjeta es el enlace: la presentación del
   sistema o la galería de muestras; el rótulo solo asoma al pasar el cursor
   (en táctil, siempre). */
.section_services .srv_lista { justify-content: center; }
.section_services .srv_lista li { flex: 0 0 auto; border-top: 0; background: none; align-content: center; padding: 14px 0; }
.section_services .srv_lista li::after { content: none; }
.section_services .srv_lista li:hover b { transform: none; }
.section_services .srv_lista li::before {
  display: inline-block; opacity: 0; transform: translateY(70%); padding-top: .55rem;
  transition: opacity .6s ease calc(.3s + var(--i, 0) * .12s), transform .8s cubic-bezier(.2, .7, .2, 1) calc(.3s + var(--i, 0) * .12s);
}
.section_services .is-viva .srv_lista li::before { opacity: .45; transform: none; }
.section_services .srv_lista b { font-size: 1.6rem; }
.section_services .slide_foot { border-top: 0; }
@media (max-width: 991px) {
  .section_services .srv_lista li { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .section_services .srv_lista li::before { grid-row: auto; padding-top: .35rem; }
  .section_services .srv_lista b { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .section_services .srv_lista li::before { transition: none; }
}

.dv_ventana:has(> .dv_abre) { position: relative; }
.dv_abre {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 14px; color: #fff; text-decoration: none; cursor: pointer; border-radius: inherit;
}
.dv_abre span {
  display: inline-flex; align-items: center; gap: .45em; padding: 9px 15px; border-radius: 99px;
  background: rgba(10, 10, 10, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 500 13px/1 "General Sans", system-ui, sans-serif; letter-spacing: -.01em;
  opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
}
.dv_abre em { font-style: normal; }
.dv_abre i { font-style: normal; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.dv_abre:hover span, .dv_abre:focus-visible span { opacity: 1; transform: none; }
.dv_abre:hover i { transform: translate(2px, -2px); }
.dv_abre:focus-visible { outline: 2px solid var(--pure); outline-offset: -2px; }
@media (hover: none) { .dv_abre span { opacity: 1; transform: none; } }
/* ── fin 21 ── */

/* ── 22 · Servicios de la portada: tarjetas de vidrio que se apilan ──
   La forma del recurso Apilado (productos/apilado) con los colores de Moxen:
   tarjetas de vidrio grafito (translúcidas, con el fondo desenfocado detrás)
   sobre unas luces grises muy suaves que se mueven despacio con el scroll;
   texto blanco (negro en el tema claro) y un filo de luz arriba.
   apilado-servicios.js escribe por tarjeta --a (su llegada, 0→1), --c (cuánto
   la cubre la siguiente, 0→1) y --d (lo oscura que está), y la encoge y la
   gira; y en la sección --as-p (cuánto se ha recorrido la pila, 0→1) y
   --as-luz (cuánto se ven las luces). Aquí se leen con calc().
   Todo en px: el rem del sitio es fluido y las tarjetas cambiarían de
   tamaño con la pantalla. */
.as_seccion {
  --as-top: 76px;                    /* donde se pega la primera tarjeta */
  --as-paso: 18px;                   /* cuánto asoma cada tarjeta ya cubierta */
  --as-gap: 28px;                    /* el hueco entre tarjetas al bajar */
  --as-vh: 100vh;
  --as-alto: calc(var(--as-vh) - var(--as-top) - 2 * var(--as-paso) - 26px);
  /* el ancho de «Cómo trabajamos» (la sección que sigue): sus textos van de 8vw a 8vw */
  --as-ancho: min(calc(100% + 2 * var(--pad) - 16vw), 1760px);
  --as-tinta: 255 255 255;           /* ternas «r g b» para mezclar con transparencia */
  --as-f1: 22 22 22; --as-f2: 28 28 28; --as-f3: 35 35 35;   /* el grafito de cada tarjeta, más claro hacia delante */
  --as-alfa: .64;                    /* cuánto tapa el vidrio */
  --as-desenfoque: 26px;
  --as-brillo: 255 255 255;
  --as-esp: .14;                     /* el brillo especular de la esquina */
  --as-anillo: linear-gradient(180deg, rgb(255 255 255 / .5), rgb(255 255 255 / .13) 16%, rgb(255 255 255 / .05) 55%, rgb(255 255 255 / .11));
  --as-luz-borde: rgba(255, 255, 255, .07);
  --as-velo: 0 0 0; --as-velo-a: 1;          /* con lo que se oscurece una tarjeta al ser cubierta */
  --as-sombra-1: rgba(0, 0, 0, .5); --as-sombra-2: rgba(0, 0, 0, .7);
  --as-curva: cubic-bezier(.22, 1, .36, 1);
  position: relative; overflow-x: clip; padding: 120px 0 120px;
}
@supports (height: 100svh) { .as_seccion { --as-vh: 100svh; } }
:root[data-theme="light"] .as_seccion {
  --as-tinta: 10 10 10;
  --as-f1: 255 255 255; --as-f2: 255 255 255; --as-f3: 251 251 251;
  --as-alfa: .6;
  --as-esp: .95;
  --as-anillo: linear-gradient(180deg, rgb(255 255 255 / 1), rgb(255 255 255 / .7) 16%, rgb(0 0 0 / .05) 55%, rgb(0 0 0 / .1));
  --as-luz-borde: rgba(255, 255, 255, .9);
  --as-velo-a: .5;
  --as-sombra-1: rgba(30, 40, 60, .16); --as-sombra-2: rgba(30, 40, 60, .3);
}
/* el encabezado, a la vista (la portada no carga servicios.js, que revela los de las páginas de servicio) */
/* se apaga mientras el contador entra (--as-vis lo pone el script), para que no se pisen arriba a la izquierda */
.as_cab { position: relative; width: var(--as-ancho); margin: 0 auto 96px; opacity: calc(1 - var(--as-vis, 0)); transform: none; }

/* las luces de detrás del vidrio: tres manchas grandes y desenfocadas, grises y frías.
   La capa se queda pegada a la pantalla mientras dura la sección y las manchas
   se desplazan con --as-p, cada una a su paso. No ocupa sitio en la página. */
.as_luces {
  --as-lA: 170 182 205; --as-lAa: .3; --as-lB: 255 255 255; --as-lBa: .15; --as-lC: 104 120 156; --as-lCa: .38;
  position: sticky; top: 0; z-index: 0; width: 100vw; height: var(--as-vh); margin: 0 0 calc(-1 * var(--as-vh)) calc(50% - 50vw);
  pointer-events: none; opacity: var(--as-luz, 1);
  /* los extremos de la capa se difuminan: donde acaba la sección no queda un corte recto, ni con las manchas desplazadas */
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 74%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 74%, transparent);
}
:root[data-theme="light"] .as_luces { --as-lAa: .62; --as-lBa: .95; --as-lCa: .5; --as-lA: 142 160 194; --as-lC: 112 130 170; }
.as_luces i {
  --x: 0; --y: 0; position: absolute; border-radius: 50%; aspect-ratio: 1; will-change: transform;
  transform: translate3d(calc((var(--as-p, .5) - .5) * var(--x) * 1px), calc((var(--as-p, .5) - .5) * var(--y) * 1px), 0);
}
.as_luces i:nth-child(1) { width: clamp(440px, 54vw, 900px); left: -10vw; top: -4%; --x: 340; --y: 180; background: radial-gradient(closest-side, rgb(var(--as-lA) / var(--as-lAa)), rgb(var(--as-lA) / calc(var(--as-lAa) * .38)) 55%, transparent); }
.as_luces i:nth-child(2) { width: clamp(380px, 46vw, 780px); right: -8vw; top: 18%; --x: -300; --y: -260; background: radial-gradient(closest-side, rgb(var(--as-lB) / var(--as-lBa)), rgb(var(--as-lB) / calc(var(--as-lBa) * .38)) 55%, transparent); }
.as_luces i:nth-child(3) { width: clamp(420px, 50vw, 840px); left: 22vw; top: 36%; --x: -220; --y: 160; background: radial-gradient(closest-side, rgb(var(--as-lC) / var(--as-lCa)), rgb(var(--as-lC) / calc(var(--as-lCa) * .38)) 55%, transparent); }

/* el recorrido: las tarjetas son «sticky» y apilado-servicios.js las encoge, las oscurece y las gira al ser cubiertas */
.as_pila { width: var(--as-ancho); margin: 0 auto; display: flex; flex-direction: column; gap: var(--as-gap); }
/* el remate: el último trecho de scroll con la pila ya completa (dentro del bloque, para que las tarjetas sigan pegadas) */
.as_pila::after { content: ""; flex: none; height: 50vh; margin-top: -10px; }
@supports (height: 100svh) { .as_pila::after { height: 50svh; } }
.as_carta {
  --a: 1; --c: 0; --d: 0; --i: 0;
  position: sticky; top: calc(var(--as-top) + var(--i) * var(--as-paso)); flex: none; height: var(--as-alto);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(8px, 2vw, 28px);
  padding: clamp(28px, 6vh, 56px) clamp(30px, 4.6vw, 66px);
  border-radius: clamp(26px, 3.4vw, 40px); overflow: hidden; transform-origin: 50% 0; will-change: transform;
  color: var(--pure);
  /* el vidrio, de arriba abajo: el destello que cruza al ser cubierta, el brillo especular de la esquina, un velo de luz
     que se apaga hacia abajo y el grafito translúcido. El destello avanza con --c. */
  background:
    linear-gradient(100deg, transparent 44%, rgb(var(--as-brillo) / .1) 50%, transparent 56%) calc((1 - var(--c)) * 100%) 0 / 300% 100% no-repeat,
    radial-gradient(70% 55% at 3% 0%, rgb(var(--as-brillo) / var(--as-esp)), transparent 64%),
    linear-gradient(165deg, rgb(var(--as-brillo) / .06), rgb(var(--as-brillo) / 0) 42%),
    rgb(var(--as-fondo) / var(--as-alfa));
  -webkit-backdrop-filter: blur(var(--as-desenfoque)) saturate(160%); backdrop-filter: blur(var(--as-desenfoque)) saturate(160%);
  box-shadow: inset 0 1px 0 var(--as-luz-borde), 0 24px 48px -24px var(--as-sombra-1), 0 64px 120px -40px var(--as-sombra-2);
}
.as_carta:nth-child(1) { --as-fondo: var(--as-f1); }
.as_carta:nth-child(2) { --as-fondo: var(--as-f2); --i: 1; }
.as_carta:nth-child(3) { --as-fondo: var(--as-f3); --i: 2; }
/* el filo luminoso: un anillo de 1px que brilla arriba y se apaga hacia los lados y abajo */
.as_carta::before {
  content: ""; position: absolute; inset: 0; z-index: 3; padding: 1px; border-radius: inherit; pointer-events: none; background: var(--as-anillo);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* la sombra de la tarjeta de encima: se oscurece al ser cubierta (también el texto) */
.as_carta::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; background: rgb(var(--as-velo)); opacity: calc(var(--d) * var(--as-velo-a)); }
/* la última no la cubre nadie: su --c es solo el remate, así que su texto y su número no se apagan */
.as_carta:last-child .as_texto, .as_carta:last-child .as_cifra { opacity: 1; }
/* sin backdrop-filter el vidrio no tendría detrás nada desenfocado: la tarjeta pasa a ser casi opaca */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .as_seccion { --as-alfa: .94; } }
@media (prefers-reduced-transparency: reduce) {
  .as_seccion { --as-alfa: .97; }
  .as_carta { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ── el texto: entra escalonado, atado a la llegada de la tarjeta ── */
.as_texto { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(12px, 2.4vh, 22px); min-width: 0; opacity: clamp(0, calc(1 - var(--c) * 2.2), 1); }   /* al ser cubierta, su texto se apaga: no se transparenta por el vidrio de la de encima */
.as_texto > * { --r: clamp(0, calc((var(--a) - .22 - var(--dl)) * 4.5), 1); margin: 0; opacity: var(--r); transform: translateY(calc((1 - var(--r)) * 34px)); }
.as_num {
  --dl: 0; display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 99px;
  font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--soft);
  background: rgb(var(--as-tinta) / .06); box-shadow: inset 0 0 0 1px var(--line);
}
.as_num span { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 99px; background: var(--pure); color: var(--bg); font-size: 13px; }
.as_num i { font-style: normal; }
/* el nombre, con la letra de «Cómo trabajamos» (.values_title): peso 700 y −.055em, en un tamaño que cabe en la tarjeta */
.as_nombre {
  --dl: .06; max-width: 9em; color: var(--pure); font-size: clamp(38px, min(5.6vw, 9.4vh), 82px); font-weight: 700;
  line-height: .92; letter-spacing: -.055em; text-wrap: balance;
}
.as_bajada { --dl: .13; max-width: 27em; color: var(--soft); font-size: clamp(16px, 2.5vh, 20px); line-height: 1.45; font-weight: 500; letter-spacing: -.01em; }
.as_pildoras { --dl: .2; display: flex; flex-wrap: wrap; gap: 8px; max-width: 460px; }
.as_pildoras li { padding: 7px 14px; border-radius: 99px; color: var(--pure); font-size: 14px; font-weight: 600; line-height: 1.15; letter-spacing: 0; box-shadow: inset 0 0 0 1px rgb(var(--as-tinta) / .26); }
.as_ver {
  --dl: .27; display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 22px 0 24px; border-radius: 99px; margin-top: 4px;
  background: var(--pure); color: var(--black); font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: -.005em;
  box-shadow: 0 16px 30px -14px var(--as-sombra-2); transition: box-shadow .35s var(--as-curva);
}
.as_ver span { display: inline-block; font-size: 18px; transition: translate .4s var(--as-curva); }
.as_ver:focus-visible { outline: 2px solid var(--pure); outline-offset: 3px; }
@media (hover: hover) { .as_ver:hover span { translate: 4px 0; } .as_ver:hover { box-shadow: 0 20px 36px -14px var(--as-sombra-2); } }
.as_ver:active { scale: .97; }

/* ── el número grande: en hueco, se arma con la llegada (--a) y se desplaza al ser cubierta (--c) ──
   Cada dígito sube y se dibuja de abajo arriba, uno tras otro. */
.as_cifra {
  position: relative; z-index: 1; justify-self: center; align-self: center; display: flex; user-select: none; pointer-events: none;
  font-size: clamp(190px, min(26vw, 52vh), 400px); font-weight: 600; line-height: .8; letter-spacing: -.06em; font-variant-numeric: tabular-nums;
  color: transparent;
  transform: translate3d(calc(var(--c) * -22px), calc(var(--c) * -34px), 0) scale(calc(1 - var(--c) * .05));
  opacity: calc(1 - var(--c) * .55);
}
.as_cifra span {
  --k: 0; --r: clamp(0, calc((var(--a) - .1 - var(--k) * .13) * 2.6), 1);
  display: block; padding: .06em .02em; -webkit-text-stroke: 1.5px rgb(var(--as-tinta) / calc(.08 + var(--r) * .2));
  opacity: clamp(0, calc(var(--r) * 6), 1);
  transform: translateY(calc((1 - var(--r)) * 90px));
  clip-path: inset(calc((1 - var(--r)) * 110%) -10% -10% -10%);
}
.as_cifra span + span { --k: 1; }

/* ── el contador y el indicador lateral: fijos, solo con la pila en escena (--as-vis lo pone el script) ── */
.as_cuenta, .as_lateral { position: fixed; z-index: 20; opacity: var(--as-vis, 0); visibility: hidden; pointer-events: none; }
.as_cuenta.is-on, .as_lateral.is-on { visibility: visible; }
.as_cuenta {
  top: 26px; left: max(8vw, calc((100vw - 1760px) / 2)); display: flex; align-items: center; gap: 11px;
  font-size: 14px; font-weight: 500; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--soft);
}
.as_cuenta i { width: 9px; height: 9px; border-radius: 3px; background: var(--pure); transform: rotate(45deg); box-shadow: 0 0 0 4px rgb(var(--as-tinta) / .14); }
.as_cuenta b { font-weight: 600; color: var(--pure); }
.as_lateral { right: clamp(10px, 2.4vw, 40px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; }
.as_lateral.is-on { pointer-events: auto; }
.as_lateral button { position: relative; width: 26px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.as_lateral i { display: block; width: 8px; height: 8px; border-radius: 99px; background: rgb(var(--as-tinta) / .3); transition: height .45s var(--as-curva), background-color .3s; }
.as_lateral button[aria-current="step"] i { height: 22px; background: var(--pure); }
.as_lateral span {
  position: absolute; right: 30px; top: 50%; transform: translate(6px, -50%); padding: 5px 10px; border-radius: 8px; white-space: nowrap;
  font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: 0; opacity: 0; pointer-events: none;
  background: var(--pure); color: var(--bg); transition: opacity .2s, transform .35s var(--as-curva);
}
@media (hover: hover) { .as_lateral button:hover span { opacity: 1; transform: translate(0, -50%); } .as_lateral button:hover i { background: var(--pure); } }
.as_lateral button:focus-visible { outline: 2px solid var(--pure); outline-offset: -2px; border-radius: 10px; }
.as_lateral button:focus-visible span { opacity: 1; transform: translate(0, -50%); }

/* ── pantallas pequeñas: el texto arriba y el número grande debajo, más chico ── */
@media (max-width: 860px) {
  .as_seccion { --as-top: 72px; --as-paso: 12px; --as-gap: 20px; --as-ancho: 100%; --as-desenfoque: 20px; padding: 80px 0 80px; }
  .as_cab { margin-bottom: 72px; }
  .as_carta { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: start; gap: 6px; padding: 26px 22px 18px; border-radius: 28px; }
  .as_nombre { font-size: clamp(34px, 9.6vw, 54px); }
  .as_bajada { font-size: 16px; }
  .as_pildoras { gap: 6px; }
  .as_pildoras li { padding: 6px 12px; font-size: 13px; }
  .as_ver { height: 46px; font-size: 15px; }
  .as_cifra { align-self: end; justify-self: end; margin: 0 -4px -6px 0; font-size: min(58vw, 250px); }
  .as_luces i:nth-child(n) { width: 120vw; }
  .as_cuenta, .as_lateral { display: none; }
}
/* teléfono: sin el número grande, la tarjeta se queda del alto de su texto (más pequeña y compacta);
   el hueco de arriba lo deja el final de «Trabajos» (su pieza fijada deja la pantalla vacía bajo el nombre), así que aquí casi no hay relleno */
@media (max-width: 767px) {
  .as_seccion { padding: 16px 0 72px; }
  .as_cab { margin-bottom: 40px; }
  .as_carta { height: auto; min-height: var(--as-hm, 0px); grid-template-rows: auto; padding: 22px 20px 24px; }   /* --as-hm: la más alta de las tres, la mide el script */
  .as_pila::after { height: 18vh; }
  @supports (height: 100svh) { .as_pila::after { height: 18svh; } }
  .as_texto > * { --r: clamp(0, calc((var(--a) - .06 - var(--dl)) * 5), 1); }
  .as_cifra { display: none; }
}
@media (max-height: 560px) { .as_cifra { display: none; } .as_carta { grid-template-columns: minmax(0, 1fr); } }
/* ── movimiento reducido: las tarjetas quedan quietas, en columna y con todo visible ── */
@media (prefers-reduced-motion: reduce) {
  .as_carta { position: static; height: auto; padding-block: 36px; transform: none !important; will-change: auto; }
  .as_carta::after, .as_pila::after { display: none; }
  .as_luces { position: absolute; inset: 0; width: auto; height: auto; margin: 0; overflow: clip; -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 78%, transparent); }
  .as_luces i { transform: none; will-change: auto; }
  .as_cuenta, .as_lateral { display: none; }
  .as_ver span, .as_ver, .as_lateral i { transition: none; }
}
/* ── fin 22 ── */

/* Teléfono: Servicios sube sobre el final de Muestras. La caja anclada de Muestras mide una pantalla
   y bajo el nombre de la última pieza quedaban ~290 px vacíos antes de «Servicios». */
@media (max-width: 767px) {
  .as_seccion { margin-top: -200px; position: relative; z-index: 2; }
}