/* ==========================================================================
   NV Studio — studio.css
   La página de NV Studio (studio.php), con el sistema del nuevo Nanohaus y de
   Venvo: azul Apple #0071E3 para la acción, neutros Onyx / Bone / off-white,
   tarjetas blancas, vidrio, medidas y letra de apple.com. Momentos oscuros como
   diapositivas de Keynote (ondas de aluminio en la portada y azules en el
   contacto, el ícono que flota, títulos plateados) y el bloque del
   video adentro de las letras, como el de apple.com. Nada de degradados de
   color en los fondos claros, ni rojo de realce, ni emojis.

   Esta hoja va SOLA: la página no carga otra (las de NV Group, base, layout y
   componentes, quedaron en nvgroup-web el 29-10-2026). Por eso trae también
   lo que necesita el formulario de js/formulario.js (.campo, .form__aviso,
   .enviado…) y la trampa para robots, que tiene que quedar escondida.

   Sin JavaScript se lee entera: lo que se anima arranca escondido solo cuando
   el <html> tiene la clase .js.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Paleta Venvo */
  --onyx: #0d0e10;
  --bone: #f3f2ee;
  --grafito: #6b6e73;
  --aluminio: #c7cbcf;

  /* Superficies y texto (apple.com) */
  --blanco: #ffffff;
  --fondo: #f5f5f7;
  --linea: #d2d2d7;
  --linea-suave: #e8e8ed;
  --texto: #1d1d1f;
  --texto-2: #6e6e73;
  --texto-3: #86868b;

  /* Realce: azul Apple */
  --azul: #0071e3;
  --azul-hover: #0077ed;
  --azul-texto: #0066cc;
  --azul-oscuro: #2997ff;

  --letra: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
  --curva-apple: cubic-bezier(0.4, 0, 0.6, 1);

  --alto-barra: 44px;
  --ancho: 1120px;
  /* Lo que queda a cada lado del contenedor: la galería de proyectos arranca
     alineada con los títulos y se va por el borde derecho. */
  --margen: max(22px, calc((100% - var(--ancho)) / 2));
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--alto-barra);
}

body {
  margin: 0;
  background: var(--blanco);
  color: var(--texto);
  font-family: var(--letra);
  font-size: 17px;
  line-height: 1.47059;
  font-weight: 400;
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body.st-sin-scroll { overflow: hidden; }

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--azul-texto); text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 4px; }

.st-saltar {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 980px;
  background: var(--azul);
  color: #fff;
}
.st-saltar:focus { top: 8px; }

/* Escondido a la vista, pero lo leen los lectores de pantalla */
.st-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.st-ic { width: 20px; height: 20px; flex: none; }
.st-ic--izq { transform: rotate(180deg); }

/* --- Estructura ----------------------------------------------------------- */
.st-contenedor { width: min(var(--ancho), 100% - 44px); margin-inline: auto; }

.st-seccion {
  position: relative;
  padding-block: clamp(84px, 11vw, 150px);
}
.st-seccion--gris { background: var(--fondo); }
.st-oscura {
  background: var(--onyx);
  color: #f5f5f7;
  color-scheme: dark;
}

.st-cabecera { max-width: 780px; margin-bottom: clamp(40px, 5vw, 64px); }
.st-cabecera--centro { margin-inline: auto; text-align: center; }

.st-etiqueta {
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--texto-3);
}
.st-titulo {
  margin-top: 6px;
  font-size: clamp(38px, 5.4vw, 64px);
  font-weight: 600;
  line-height: 1.0625;
  letter-spacing: -0.038em;
}
.st-bajada {
  margin-top: 20px;
  max-width: 34em;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.38;
  letter-spacing: -0.016em;
  color: var(--texto-2);
}
.st-cabecera--centro .st-bajada { margin-inline: auto; }
.st-oscura .st-etiqueta { color: rgba(255, 255, 255, 0.56); }
.st-oscura .st-bajada { color: rgba(255, 255, 255, 0.66); }

.st-nota { font-size: 14px; line-height: 1.45; color: var(--texto-2); letter-spacing: -0.01em; }

/* Plateado, como las ondas de la portada: blanco arriba que se apaga apenas abajo */
.st-plata {
  background: linear-gradient(180deg, #fff 0%, #fff 38%, rgba(214, 222, 235, 0.86) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- Enlaces y botones ---------------------------------------------------- */
.st-enlace {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 17px;
  color: var(--azul-texto);
}
.st-enlace .st-ic { width: 16px; height: 16px; transition: transform 0.25s var(--curva); }
.st-enlace:hover .st-ic { transform: translateX(3px); }
.st-enlace--claro { color: var(--azul-oscuro); }

.st-pastilla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 24px;
  border-radius: 980px;
  background: var(--azul);
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
  transition: background 0.2s, transform 0.15s var(--curva);
}
.st-pastilla:hover { background: var(--azul-hover); }
.st-pastilla:active { transform: scale(0.97); }
.st-pastilla[disabled] { opacity: 0.6; cursor: default; }
.st-pastilla--ancha { width: 100%; }
/* La de segundo nivel, con borde: como «Comprar» al lado de «Más información» en apple.com */
.st-pastilla--borde { background: transparent; color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.st-pastilla--borde:hover { background: var(--azul); color: #fff; }
/* La chica, la de las hojas (pedido de Nico, 30-10: «Quiero esto» era muy grande) */
.st-pastilla--chica { gap: 6px; min-height: 36px; padding: 7px 18px; font-size: 15px; }

.st-redondo {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(210, 210, 215, 0.64);
  color: rgba(0, 0, 0, 0.56);
  transition: background 0.2s, color 0.2s, opacity 0.2s, transform 0.15s;
}
.st-redondo:hover { background: rgba(223, 223, 227, 0.8); color: rgba(0, 0, 0, 0.72); }
.st-redondo:active { transform: scale(0.94); }
.st-redondo:disabled { opacity: 0.38; cursor: default; }
.st-redondo .st-ic { width: 18px; height: 18px; }

/* Botón de vidrio sobre fondo oscuro (WhatsApp y el de enviar del formulario) */
.st-vidrio-boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 980px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  transition: background 0.2s, transform 0.15s var(--curva);
}
.st-vidrio-boton:hover { background: rgba(255, 255, 255, 0.17); }
.st-vidrio-boton:active { transform: scale(0.97); }
.st-vidrio-boton[disabled] { opacity: 0.6; cursor: default; transform: none; }
.st-vidrio-boton .st-ic { width: 19px; height: 19px; }
.st-vidrio-boton--ancho { width: 100%; min-height: 50px; justify-content: center; }

/* --- Entradas y apariciones ----------------------------------------------- */
/* La portada entra de abajo, de a una pieza, como un keynote */
.st-entra { animation: st-entrar 1.1s calc(0.1s + var(--i, 0) * 0.12s) var(--curva) both; }

@keyframes st-entrar {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* El resto aparece al llegar con el scroll (js/studio.js pone .visible) */
.js [data-revelar] {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition:
    opacity 0.9s var(--curva),
    transform 0.9s var(--curva),
    filter 0.9s var(--curva);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-revelar].visible { opacity: 1; transform: none; filter: none; }

/* --- Barra (como la de apple.com) ----------------------------------------- */
.nb {
  position: fixed;
  inset: 0 0 auto;
  z-index: 120;
  height: var(--alto-barra);
  color: var(--texto);
}
.nb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(250, 250, 252, 0.8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  transition: background 0.35s var(--curva-apple), box-shadow 0.35s;
}
.nb[data-tema="oscuro"] { color: #f5f5f7; }
.nb[data-tema="oscuro"]::before {
  background: rgba(22, 22, 23, 0.72);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.nb__fila {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
  width: min(1024px, 100% - 44px);
  margin-inline: auto;
}
.nb__marca {
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  font-size: 15px;
  font-weight: 600;
  /* Con el espaciado normal de SF Pro: hasta el 02-11-2026 era -0.03em y
     Nico pidió «un poquito más espaciadas las letras» (igual en la imagen
     para compartir y en el panel) */
  letter-spacing: 0;
  white-space: nowrap;
}
.nb__marca img { width: 24px; height: 24px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); }
.nb__links { height: 100%; margin-inline: auto; }
.nb__lista { display: flex; align-items: center; gap: clamp(18px, 3vw, 34px); height: 100%; }
.nb__item { position: relative; display: flex; align-items: center; height: 100%; }
.nb__link {
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 12px;
  white-space: nowrap;
  letter-spacing: -0.01em;
  color: inherit;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.nb__link:hover,
.nb__item--abierto .nb__link { opacity: 1; }
/* La flechita que abre el submenú con el teclado: como en apple.com, solo
   aparece cuando le llega el foco */
.nb__abrir {
  position: absolute;
  top: 50%;
  left: 100%;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 1px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.nb__abrir:focus-visible { opacity: 0.85; pointer-events: auto; outline-offset: 0; }
.nb__abrir .st-ic { width: 12px; height: 12px; transition: transform 0.3s var(--curva); }
.nb__item--abierto .nb__abrir .st-ic { transform: rotate(180deg); }
.nb__cta {
  padding: 4px 12px;
  border-radius: 980px;
  background: var(--azul);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.2s;
}
.nb__cta:hover { background: var(--azul-hover); }

/* El menú del celular: la hamburguesa de dos rayas se vuelve una X */
.nb__boton {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -12px;
}
.nb__boton span {
  position: absolute;
  left: 15px;
  width: 16px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.35s var(--curva);
}
.nb__boton span:first-child { top: 18px; }
.nb__boton span:last-child { top: 25px; }
.nb--abierta .nb__boton span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nb--abierta .nb__boton span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* El submenú de la compu, como el de apple.com: la barra se estira hacia abajo
   con el color del tema, los enlaces bajan de a uno y la página de atrás se
   desenfoca. La altura (--alto-hoja) la mide js/studio.js. */
.nb__desplegable {
  position: absolute;
  top: var(--alto-barra);
  left: 0;
  right: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: height 0.4s var(--curva-apple), visibility 0s 0.4s;
}
.nb__desplegable::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(250, 250, 252, 0.97);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.nb[data-tema="oscuro"] .nb__desplegable::before { background: rgba(22, 22, 23, 0.97); }
.nb--desplegada .nb__desplegable { height: var(--alto-hoja, 0px); visibility: visible; transition: height 0.4s var(--curva-apple); }
/* Abierta, la barra deja de ser transparente: forma una sola pieza con el submenú */
.nb--desplegada::before { background: rgba(250, 250, 252, 0.97); box-shadow: none; }
.nb--desplegada[data-tema="oscuro"]::before { background: rgba(22, 22, 23, 0.97); }
.nb__hoja {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 38px 0 66px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.18s, visibility 0s 0.18s;
}
.nb__hoja--activa { visibility: visible; opacity: 1; transition: opacity 0.24s 0.05s; }
.nb__columnas { display: flex; gap: clamp(40px, 6vw, 88px); width: min(1024px, 100% - 44px); margin-inline: auto; }
.nb__col--grande { min-width: 250px; }
.nb__rotulo { margin-bottom: 12px; font-size: 12px; line-height: 1.33; letter-spacing: -0.01em; color: var(--texto-2); }
.nb[data-tema="oscuro"] .nb__rotulo { color: #86868b; }
.nb__col a {
  display: block;
  padding: 5px 0;
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.33;
  letter-spacing: -0.01em;
  opacity: 0.86;
  transition: opacity 0.2s;
}
.nb__col--grande a { padding: 4px 0; font-size: 24px; line-height: 1.17; letter-spacing: -0.016em; }
.nb__col a:hover { opacity: 1; }
.nb__hoja li { opacity: 0; transform: translateY(-6px); }
.nb__hoja--activa li {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.34s var(--curva) calc(0.06s + var(--n, 0) * 0.018s),
    transform 0.34s var(--curva) calc(0.06s + var(--n, 0) * 0.018s);
}

/* La página de atrás, desenfocada mientras el submenú está abierto */
.nb-velo {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(232, 232, 237, 0.4);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--curva-apple), visibility 0s 0.4s;
}
.nb-velo--oscuro { background: rgba(0, 0, 0, 0.42); }
.nb-velo--visible { opacity: 1; visibility: visible; transition: opacity 0.4s var(--curva-apple); }

/* El menú del celular: la lista principal y, al tocar una sección, la suya
   entra desde la derecha (con «‹ Menú» para volver), como en apple.com */
.nb__menu {
  position: fixed;
  inset: var(--alto-barra) 0 0;
  overflow: hidden;
  background: rgba(250, 250, 252, 0.97);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--curva-apple), visibility 0s 0.3s;
}
.nb[data-tema="oscuro"] .nb__menu { background: rgba(22, 22, 23, 0.97); }
.nb--abierta .nb__menu { opacity: 1; visibility: visible; transition: opacity 0.3s var(--curva-apple); }
.nb__panel {
  position: absolute;
  inset: 0;
  padding: 26px 34px 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.45s var(--curva), opacity 0.3s, visibility 0s 0.45s;
}
.nb__panel--activo { opacity: 1; transform: none; transition: transform 0.45s var(--curva), opacity 0.3s; }
/* Visible solo con el menú abierto: si no, la lista invisible taparía la página y se quedaría con los clics */
.nb--abierta .nb__panel--activo { visibility: visible; }
.nb__panel--atras { transform: translateX(-28%); }
.nb__principal { display: grid; gap: 4px; }
.nb__principal > a,
.nb__principal > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 0;
  color: inherit;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-align: left;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.4s var(--curva), transform 0.4s var(--curva);
}
.nb__principal .st-ic { width: 22px; height: 22px; opacity: 0.4; }
.nb--abierta .nb__principal > * { opacity: 1; transform: none; }
.nb--abierta .nb__principal > :nth-child(2) { transition-delay: 0.03s; }
.nb--abierta .nb__principal > :nth-child(3) { transition-delay: 0.06s; }
.nb--abierta .nb__principal > :nth-child(4) { transition-delay: 0.09s; }
.nb--abierta .nb__principal > :nth-child(5) { transition-delay: 0.12s; }
.nb__volver {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: -6px 0 16px -8px;
  padding: 6px;
  color: var(--texto-2);
  font-size: 17px;
}
.nb[data-tema="oscuro"] .nb__volver { color: #86868b; }
.nb__volver .st-ic { width: 18px; height: 18px; }
.nb__panel .nb__columnas { display: grid; gap: 30px; width: auto; margin: 0; }
.nb__panel .nb__col a { padding: 8px 0; font-size: 17px; }
.nb__panel .nb__col--grande a { padding: 6px 0; font-size: 28px; letter-spacing: -0.03em; }

/* --- Ondas tipo Keynote --------------------------------------------------- */
/* Debajo del lienzo, los mismos colores quietos: es lo que se ve si el equipo
   no tiene WebGL y mientras el primer cuadro se dibuja. */
.st-hero {
  background:
    radial-gradient(70% 45% at 70% 72%, rgba(199, 203, 207, 0.16), transparent 70%),
    radial-gradient(60% 40% at 25% 85%, rgba(160, 166, 173, 0.12), transparent 70%),
    linear-gradient(180deg, #131417 0%, #08090a 100%);
}
.st-contacto {
  background:
    radial-gradient(70% 45% at 70% 72%, rgba(0, 113, 227, 0.45), transparent 70%),
    radial-gradient(60% 40% at 25% 85%, rgba(41, 151, 255, 0.28), transparent 70%),
    linear-gradient(180deg, #0d0e10 0%, #04081a 100%);
}
.st-ondas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.4s var(--curva);
}
.st-ondas.lista { opacity: 1; }

/* --- Portada -------------------------------------------------------------- */
.st-hero {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--alto-barra);
  overflow: hidden;
  color: #fff;
  color-scheme: dark;
}
.st-hero__centro {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  padding: 48px 22px 36px;
  text-align: center;
}
.st-hero__icono { margin-bottom: 34px; }
.st-hero__icono .st-alu { --tam: 148px; }
/* Sobre el aluminio de la portada, el halo del ícono es blanco y no azul */
.st-hero .st-alu__pieza { filter: drop-shadow(0 0 22px rgba(225, 230, 238, 0.2)); }
.st-hero__etiqueta {
  margin-bottom: 14px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.6);
}
.st-hero__titulo {
  font-size: clamp(44px, 7.4vw, 96px);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.042em;
}
.st-hero__titulo span { display: block; }
.st-hero__bajada {
  max-width: 33em;
  margin-top: 24px;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: rgba(255, 255, 255, 0.66);
}
.st-hero__accion {
  display: grid;
  justify-items: center;
  gap: 18px;
  width: min(380px, 100%);
  margin-top: 42px;
}

/* --- El ícono que flota --------------------------------------------------- */
/* Flota, se inclina despacio en 3D y la luz le recorre el cepillado; abajo, su
   sombra se achica cuando sube. En la portada además sigue al mouse (--rx, --ry
   los pone js/studio.js). Mismo lenguaje que el de Nanohaus en la entrada al
   panel y en «Muy pronto». */
.st-alu {
  --tam: 120px;
  position: relative;
  width: var(--tam);
  height: var(--tam);
  perspective: 600px;
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.8s var(--curva);
}
.st-alu__flota { width: 100%; height: 100%; animation: st-flotar 6s ease-in-out infinite; }
.st-alu__pieza {
  position: relative;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 21px rgba(41, 151, 255, 0.28));
  animation: st-inclinar 11s ease-in-out infinite;
}
.st-alu img { display: block; width: 100%; height: 100%; }
.st-alu__luz {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask: url(../img/studio/charco-icono.webp) center / contain no-repeat;
  mask: url(../img/studio/charco-icono.webp) center / contain no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
}
.st-alu__reflejo {
  position: absolute;
  inset: -30%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 255, 255, 0.34) 30deg,
    rgba(200, 225, 255, 0.12) 56deg,
    transparent 84deg,
    transparent 180deg,
    rgba(255, 255, 255, 0.26) 210deg,
    rgba(200, 225, 255, 0.1) 236deg,
    transparent 264deg
  );
  animation: st-girar 9s linear infinite;
}
.st-alu__brillo {
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
  transform: translateX(-70%);
  animation: st-destello 7s ease-in-out infinite;
}
.st-alu__sombra {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: calc(var(--tam) * -0.15);
  height: calc(var(--tam) * 0.1);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent);
  animation: st-sombra 6s ease-in-out infinite;
}

@keyframes st-girar { to { transform: rotate(360deg); } }
@keyframes st-flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes st-inclinar {
  0%, 100% { transform: rotateX(7deg) rotateY(-9deg); }
  25%      { transform: rotateX(-5deg) rotateY(7deg); }
  50%      { transform: rotateX(-8deg) rotateY(-4deg); }
  75%      { transform: rotateX(5deg) rotateY(9deg); }
}
@keyframes st-destello {
  0%, 55%   { transform: translateX(-70%); }
  85%, 100% { transform: translateX(70%); }
}
@keyframes st-sombra {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.84); }
}

/* --- «Deslizá» (el de iOS) ------------------------------------------------ */
/* Sin JavaScript: un enlace en pastilla */
.st-desl-enlace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 30px;
  border-radius: 980px;
  font-size: 17px;
  font-weight: 600;
}
.st-desl-enlace--oscuro { background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.st-desl-enlace--claro { background: var(--azul); color: #fff; }

.st-desl { width: 100%; }
.st-desl__pista {
  position: relative;
  height: 64px;
  border-radius: 32px;
  overflow: hidden;
  isolation: isolate;
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 18px 40px rgba(0, 0, 0, 0.3);
  color: #fff;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.st-desl--claro .st-desl__pista {
  background-color: var(--fondo);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  color: var(--texto);
}
.st-desl__relleno {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  width: 64px;
  border-radius: 32px;
  background: var(--azul);
  opacity: 0;
  transition: opacity 0.2s;
}
.st-desl__texto {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 52px 0 64px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  pointer-events: none;
}
/* El brillo que barre el texto, como el «deslizar para desbloquear» del iPhone */
.st-desl__brillo {
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.62) 40%, #fff 50%, rgba(255, 255, 255, 0.62) 60%, rgba(255, 255, 255, 0.62) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: st-barrer 2.6s linear infinite;
}
.st-desl--claro .st-desl__brillo {
  background-image: linear-gradient(100deg, rgba(29, 29, 31, 0.5) 0%, rgba(29, 29, 31, 0.5) 40%, #1d1d1f 50%, rgba(29, 29, 31, 0.5) 60%, rgba(29, 29, 31, 0.5) 100%);
}
/* Al llegar, el texto queda blanco sobre el azul */
.st-desl[data-estado="listo"] .st-desl__texto,
.st-desl[data-estado="enviando"] .st-desl__texto { padding: 0 76px 0 24px; }
.st-desl[data-estado="listo"] .st-desl__brillo,
.st-desl[data-estado="enviando"] .st-desl__brillo {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
  animation: none;
}
.st-desl__flechas {
  position: absolute;
  top: 0;
  right: 20px;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.st-desl__flecha { margin-left: -7px; opacity: 0.22; animation: st-encender 1.6s ease-in-out infinite; }
.st-desl__flecha:nth-child(2) { animation-delay: 0.18s; }
.st-desl__flecha:nth-child(3) { animation-delay: 0.36s; }
.st-desl__flecha.encendida { opacity: 1; animation: none; }

.st-desl__perilla {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  color: var(--onyx);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.06);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.st-desl--claro .st-desl__perilla { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16), 0 0 0 0.5px rgba(0, 0, 0, 0.06); }
.st-desl__perilla:active { cursor: grabbing; }
.st-desl__perilla:focus-visible { outline: 3px solid var(--azul-oscuro); outline-offset: 3px; border-radius: 50%; }

/* Mientras se arrastra, la perilla sigue al dedo sin demora; al soltar vuelve con rebote */
.st-desl[data-estado="volviendo"] .st-desl__perilla,
.st-desl[data-estado="reposo"] .st-desl__perilla { transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
.st-desl[data-estado="volviendo"] .st-desl__relleno,
.st-desl[data-estado="reposo"] .st-desl__relleno { transition: width 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s; }
.st-desl[data-estado="listo"] .st-desl__perilla,
.st-desl[data-estado="enviando"] .st-desl__perilla { color: var(--azul); cursor: default; transition: transform 0.3s var(--curva); }
.st-desl[data-estado="listo"] .st-desl__relleno,
.st-desl[data-estado="enviando"] .st-desl__relleno { transition: width 0.3s var(--curva); }

/* Mientras manda: un aro que gira adentro de la perilla */
.st-desl__giro {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid rgba(0, 113, 227, 0.22);
  border-top-color: var(--azul);
  animation: st-girar 0.8s linear infinite;
}
/* Si falta un dato, la pista dice que no con la cabeza */
.st-desl--sacudir .st-desl__pista { animation: st-sacudir 0.42s var(--curva); }

@keyframes st-barrer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
@keyframes st-encender { 0%, 100% { opacity: 0.22; } 50% { opacity: 0.9; } }
@keyframes st-sacudir {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

/* --- Proyectos: la galería que se desliza -------------------------------- */
.st-galeria { position: relative; }
.st-galeria__pista {
  display: flex;
  gap: 20px;
  padding: 8px var(--margen) 44px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margen);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.st-galeria__pista::-webkit-scrollbar { display: none; }
.st-galeria__pista.arrastrando { scroll-snap-type: none; cursor: grabbing; }
.st-galeria__pista.arrastrando * { pointer-events: none; }
.st-galeria__item { flex: 0 0 min(560px, 84vw); scroll-snap-align: start; }
.st-galeria__controles { display: flex; justify-content: flex-end; gap: 14px; }

/* Al bajar, la escena queda quieta en el medio de la pantalla y los proyectos
   pasan de costado (pedido de Nico, 02-11). js/studio.js pone
   .st-galeria--fija y mide lo alta que es la escena (--alto-escena), cuánto
   se corre (--recorrido), dónde queda pegada (--arriba) y cuánto va
   (--avance). La galería mide lo que se corre de más: eso es lo que se baja
   mientras la escena está pegada. */
.st-galeria--fija { height: calc(var(--alto-escena) + var(--recorrido)); }
.st-galeria--fija .st-galeria__escena {
  position: sticky;
  top: var(--arriba);
  overflow-x: hidden;
  overflow-x: clip;
}
.st-galeria--fija .st-galeria__pista {
  position: relative;
  overflow: visible;
  scroll-snap-type: none;
  transform: translate3d(calc(var(--avance, 0) * -1px), 0, 0);
  will-change: transform;
}
/* Las tarjetas, del tamaño que entre en la pantalla con las flechas */
.st-galeria--fija .st-galeria__item {
  flex-basis: clamp(260px, (100vh - 440px) * 1.6, min(560px, 84vw));
  flex-basis: clamp(260px, (100svh - 440px) * 1.6, min(560px, 84vw));
}

.st-caso {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 28px;
  background: var(--blanco);
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.4s var(--curva), box-shadow 0.4s var(--curva);
}
.st-caso:hover { transform: scale(1.012); box-shadow: 2px 4px 18px rgba(0, 0, 0, 0.16); }
.st-caso__foto { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--fondo); }
.st-caso__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--curva); }
.st-caso:hover .st-caso__foto img { transform: scale(1.035); }
.st-chip {
  position: absolute;
  left: 16px;
  bottom: 16px;
  max-width: calc(100% - 32px);
  padding: 7px 13px;
  border-radius: 980px;
  background: rgba(29, 29, 31, 0.76);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
/* «En vivo»: el cartel del proyecto que se prueba acá mismo (la demostración del portal) lleva el punto verde
   que late, para que se note que se puede tocar (pedido de Nico, 28-10) */
.st-chip--vivo { display: inline-flex; align-items: center; gap: 8px; padding-left: 12px; transition: background-color 0.2s, transform 0.2s var(--curva); }
.st-chip--vivo:hover { background: rgba(29, 29, 31, 0.92); }
.st-chip--vivo:active { transform: scale(0.97); }
.st-vivo { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #30d158; box-shadow: 0 0 8px rgba(48, 209, 88, 0.75); }
.st-vivo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #30d158; animation: st-latir 1.8s cubic-bezier(0, 0, 0.2, 1) infinite; }
@keyframes st-latir {
  0%       { transform: scale(1); opacity: 0.8; }
  70%, 100% { transform: scale(2.8); opacity: 0; }
}
.st-caso__cuerpo { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 26px 30px 30px; }
.st-caso__tipo { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--texto-3); }
.st-caso__titulo { font-size: 28px; font-weight: 600; line-height: 1.14; letter-spacing: -0.028em; }
.st-caso__texto { color: var(--texto-2); }
.st-caso .st-enlace { margin-top: auto; padding-top: 10px; }

/* --- Antes y después (en la ficha de Soluciones de negocio) -------------- */
.st-ad {
  --corte: 50%;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 28px;
  background: #e7e7ea;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), 0 30px 70px rgba(0, 0, 0, 0.12);
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.st-ad__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.st-ad__despues { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--corte)); }
.st-ad__linea {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--corte);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 0 20px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}
.st-ad__manija {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24), inset 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  color: var(--texto);
  transition: transform 0.25s var(--curva);
}
.st-ad__manija .st-ic { width: 16px; height: 16px; margin: 0 -2px; }
.st-ad--tocando .st-ad__manija { transform: scale(1.1); }
.st-ad:has(.st-ad__rango:focus-visible) .st-ad__manija { outline: 3px solid var(--azul); outline-offset: 3px; }
.st-ad__rotulo {
  position: absolute;
  top: 18px;
  padding: 7px 14px;
  border-radius: 980px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  transition: opacity 0.3s;
  pointer-events: none;
}
.st-ad__rotulo--antes { left: 18px; background: rgba(29, 29, 31, 0.72); }
.st-ad__rotulo--despues { right: 18px; background: rgba(0, 113, 227, 0.9); }
.st-ad--antes .st-ad__rotulo--despues,
.st-ad--despues .st-ad__rotulo--antes { opacity: 0; }
/* El control de verdad, para el teclado y los lectores de pantalla */
.st-ad__rango {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* --- Servicios ------------------------------------------------------------ */
/* Cuatro tarjetas (02-11-2026): en la compu, las cuatro en fila; en la
   tableta, de a dos; en el celular, un carrusel que se pasa con el dedo (en
   «Pantallas más chicas»). La sección es blanca y las tarjetas, grises, como
   las de apple.com sobre blanco (30-10): con la sección gris se pegaba con
   Proyectos y con Dos orillas, que también lo son, y no se veía dónde
   terminaba cada bloque. */
.st-servicios {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.st-servicio { display: flex; }
.js .st-servicio { cursor: pointer; }
/* La cara es la que se levanta con el mouse; el artículo, el que aparece al
   llegar (data-revelar, con su propia transición y su demora) */
.st-servicio__cara {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 10px 0 80px;
  border-radius: 28px;
  background: var(--fondo);
  transition: transform 0.45s var(--curva), box-shadow 0.45s var(--curva), background 0.45s;
}
@media (hover: hover) {
  .st-servicio:hover .st-servicio__cara { transform: translateY(-6px); background: #f0f0f3; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.09); }
}
.st-servicio__cuerpo { display: grid; gap: 8px; padding: 4px 26px 0; }
/* balance: los renglones parejos (y «e-commerce» no se corta en el guion) */
.st-servicio__titulo { font-size: 22px; font-weight: 600; line-height: 1.18; letter-spacing: -0.022em; text-wrap: balance; }
.st-servicio__texto { font-size: 16px; line-height: 1.47; color: var(--texto-2); text-wrap: balance; }
/* Las cuatro en fila: un poco más chicas, para que los nombres entren en un renglón */
@media (min-width: 1069px) {
  .st-servicio__cuerpo { padding-inline: 24px; }
  .st-servicio__titulo { font-size: 21px; }
}
.st-servicios__nota { margin-top: 28px; text-align: center; }
.st-servicio__precio {
  padding-top: 4px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

/* El ícono tipo Ajustes del iPhone: dibujo blanco relleno sobre su color */
.st-ajuste {
  --tam: 56px;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--tam);
  height: var(--tam);
  border-radius: 23%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 60%),
    var(--color, var(--azul));
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 6px 16px -6px var(--color, var(--azul));
}
.st-ajuste svg { width: 58%; height: 58%; }
/* El de grafito grabado con láser: la placa ya viene dibujada (con su forma); acá solo su sombra */
.st-ajuste--grafito { background: none; box-shadow: none; }
.st-ajuste--grafito img { width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.22)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2)); }
.st-ajuste--chico { --tam: 34px; border-radius: 24%; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08); }
.st-ajuste--grande { --tam: 72px; }

/* El dibujo animado de cada servicio (st_escena, en studio.php): un SVG de
   320 × 240 con el ícono de grafito en el centro. La caja tiene siempre esa
   proporción, así el ícono (que va encima, en HTML) cae justo en su lugar.
   Se arma al llegar (ss-entra) y se mueve solo mientras se ve: afuera de la
   pantalla queda quieto (js/studio.js pone .st-servicio--viva). Con el mouse,
   el ícono se inclina, la luz lo sigue y el dibujo se corre al revés (--mx y
   --my, de -1 a 1). Sin animaciones, cada dibujo se ve armado. */
.st-servicio__escena {
  position: relative;
  width: min(100%, 400px);
  aspect-ratio: 4 / 3;
  margin-inline: auto;
}
/* El resplandor del color del servicio, detrás de todo */
.st-servicio__escena::before {
  content: "";
  position: absolute;
  inset: 8% 16%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--acento) 24%, transparent), transparent);
  animation: ss-respira 7s ease-in-out infinite;
}
.st-escena__dibujo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translate(calc(var(--mx, 0) * -7px), calc(var(--my, 0) * -5px));
  transition: transform 0.7s var(--curva);
}
.st-escena__dibujo text { font-family: inherit; }
.st-servicio__escena .st-escena__placa {
  position: absolute;
  left: 35%;
  top: 30%;
  width: 30%;
  height: auto;
  aspect-ratio: 1;
  transform: perspective(520px) rotateX(calc(var(--my, 0) * -16deg)) rotateY(calc(var(--mx, 0) * 18deg));
  transition: transform 0.6s var(--curva);
  animation: ss-flota 6.5s ease-in-out infinite;
}
.st-servicio__escena .st-escena__placa img { filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.2)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.16)); }
.st-servicio__escena .st-escena__placa svg { width: 58%; height: 58%; }
/* El brillo, recortado con la forma del ícono: una luz que sigue al mouse y
   un reflejo que lo cruza cada tanto, como el de las tarjetas de Wallet */
.st-escena__brillo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background:
    radial-gradient(circle at calc(32% + var(--mx, 0) * 36%) calc(24% + var(--my, 0) * 36%), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%),
    linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.26) 50%, rgba(255, 255, 255, 0) 58%) 85% 0 / 300% 100% no-repeat;
  animation: ss-reflejo 7s ease-in-out 1.5s infinite;
}

/* Las piezas del dibujo giran y crecen desde su propio centro */
.ss-entra, .ss-flota, .ss-late, .ss-toque, .ss-orbita, .ss-chispa, .ss-onda,
.ss-ancla, .ss-elige, .ss-flecha, .ss-aviso, .ss-led { transform-box: fill-box; transform-origin: center; }
.ss-acento { fill: var(--acento); }
.ss-acento-suave { fill: var(--acento); fill-opacity: 0.14; }
.ss-texto { font-size: 11.5px; font-weight: 600; letter-spacing: -0.01em; fill: #1d1d1f; }

/* Lo que entra al llegar (con un rebote) y lo que flota, cada uno a su ritmo */
.ss-entra { animation: ss-entra 0.9s cubic-bezier(0.34, 1.45, 0.64, 1) calc(0.2s + var(--d, 0s)) both; }
.ss-flota { animation: ss-flota var(--f, 6s) ease-in-out var(--fd, 0s) infinite; }
/* El aviso que aparece solo, se queda un rato y se va */
.ss-aviso { animation: ss-aviso 7s var(--curva) var(--e, 1.5s) infinite both; }
/* Lo que titila, como el cursor de un texto */
.ss-titila { animation: ss-titila 1.1s steps(1, end) infinite; }
/* El botón que late y la onda de cuando se toca */
.ss-late { animation: ss-late 2.6s ease-in-out infinite; }
.ss-toque { fill: none; stroke: var(--acento); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0; animation: ss-toque 2.6s ease-out infinite; }

/* Productos digitales: la órbita, las líneas que se escriben y el código */
.ss-orbita { fill: none; stroke: var(--acento); stroke-opacity: 0.3; stroke-width: 1.3; stroke-dasharray: 1.5 7; stroke-linecap: round; animation: ss-gira 80s linear infinite; }
.ss-escribe { transform-box: fill-box; transform-origin: left center; animation: ss-escribe 5.5s var(--curva) calc(0.9s + var(--e, 0s)) infinite both; }
.ss-codigo { font: 600 15px/1 ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; fill: #fff; }

/* Marca y experiencia: las guías y la curva se dibujan, las anclas aparecen,
   la flecha toca el botón y el anillo pasa por los colores */
.ss-guia { fill: none; stroke: var(--acento); stroke-opacity: 0.32; stroke-width: 1.1; stroke-dasharray: 1; animation: ss-traza 9s ease-in-out calc(0.3s + var(--e, 0s)) infinite both; }
.ss-curva { fill: none; stroke: var(--acento); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; animation: ss-traza 9s ease-in-out 0.9s infinite both; }
.ss-asa { fill: none; stroke: #b9b9c0; stroke-width: 1; }
.ss-perilla { fill: #fff; stroke: #b9b9c0; stroke-width: 1; }
.ss-ancla { fill: #fff; stroke: var(--acento); stroke-width: 1.6; animation: ss-ancla 9s var(--curva) calc(1.1s + var(--e, 0s)) infinite both; }
.ss-aa { font-size: 40px; font-weight: 600; letter-spacing: -0.02em; fill: #1d1d1f; }
.ss-flecha { animation: ss-flecha 6s var(--curva) 1.2s infinite both; }
.ss-toque--clic { animation: ss-clic 6s ease-out 1.2s infinite both; }
.ss-elige { fill: none; stroke: var(--acento); stroke-width: 2; animation: ss-elige 7.5s var(--curva) 1.5s infinite; }

/* Soluciones de negocio: los datos corren por los cables, las barras suben
   y bajan y la chispa de la IA brilla */
.ss-cable-base { fill: none; stroke: var(--acento); stroke-opacity: 0.18; stroke-width: 2; }
.ss-cable { fill: none; stroke: var(--acento); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 7; animation: ss-fluye 1.1s linear var(--e, 0s) infinite; }
.ss-barra { transform-box: fill-box; transform-origin: center bottom; animation: ss-barra var(--b, 3s) ease-in-out infinite alternate; }
.ss-chispa { animation: ss-chispa 3.4s ease-in-out var(--e, 0s) infinite; }

/* Productos conectados: las ondas salen del ícono y cada equipo titila
   cuando le llega una */
.ss-enlace { fill: none; stroke: var(--acento); stroke-opacity: 0.5; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 2 6; animation: ss-fluye 1.4s linear var(--e, 0s) infinite; }
.ss-onda { fill: none; stroke: var(--acento); stroke-width: 1.6; vector-effect: non-scaling-stroke; scale: var(--s, 1); opacity: var(--o, 0.45); animation: ss-onda 3.6s cubic-bezier(0.2, 0.6, 0.35, 1) var(--e, 0s) infinite; }
.ss-equipo { fill: none; stroke: #1d1d1f; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ss-led { fill: var(--acento); stroke: #fff; stroke-width: 1.5; animation: ss-led 3.6s ease-in-out var(--e, 1.5s) infinite; }

/* Afuera de la pantalla, quieto (también lo que todavía no entró) */
.js .st-servicio:not(.st-servicio--viva) .st-servicio__escena *,
.js .st-servicio:not(.st-servicio--viva) .st-servicio__escena::before { animation-play-state: paused; }

@keyframes ss-respira { 50% { opacity: 0.6; scale: 0.92; } }
@keyframes ss-reflejo { 0%, 72% { background-position: 0 0, 85% 0; } 100% { background-position: 0 0, 15% 0; } }
@keyframes ss-entra { from { opacity: 0; scale: 0.55; translate: 0 12px; } }
@keyframes ss-flota { 50% { translate: 0 -5px; } }
@keyframes ss-aviso {
  0% { opacity: 0; translate: 0 -8px; scale: 0.92; }
  7%, 80% { opacity: 1; translate: 0 0; scale: 1; }
  90%, 100% { opacity: 0; translate: 0 -4px; scale: 0.97; }
}
@keyframes ss-titila { 50% { opacity: 0; } }
@keyframes ss-late { 45% { scale: 1.07; } }
@keyframes ss-toque { 0%, 30% { opacity: 0; scale: 1; } 40% { opacity: 0.55; } 100% { opacity: 0; scale: 2.6; } }
@keyframes ss-gira { to { rotate: 360deg; } }
@keyframes ss-escribe { 0% { scale: 0 1; } 16%, 84% { scale: 1 1; } 96%, 100% { scale: 0 1; } }
@keyframes ss-traza { 0% { stroke-dashoffset: 1; opacity: 1; } 22%, 86% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ss-ancla { 0%, 12% { scale: 0; } 20%, 88% { scale: 1; opacity: 1; } 100% { scale: 1; opacity: 0; } }
@keyframes ss-flecha {
  0% { translate: 34px 26px; opacity: 0; }
  12% { opacity: 1; }
  32% { translate: 0 0; scale: 1; }
  37% { scale: 0.86; }
  42%, 70% { translate: 0 0; scale: 1; opacity: 1; }
  85%, 100% { translate: 30px 22px; opacity: 0; }
}
@keyframes ss-clic { 0%, 36% { opacity: 0; scale: 1; } 38% { opacity: 0.6; } 60%, 100% { opacity: 0; scale: 2.6; } }
@keyframes ss-elige { 0%, 28% { translate: 0 0; } 34%, 61% { translate: 27px 0; } 67%, 94% { translate: 54px 0; } 100% { translate: 0 0; } }
@keyframes ss-fluye { to { stroke-dashoffset: -9; } }
@keyframes ss-barra { from { scale: 1 var(--h, 0.5); } }
@keyframes ss-chispa { 0%, 100% { scale: 0.75; rotate: 0deg; opacity: 0.7; } 50% { scale: 1.15; rotate: 90deg; opacity: 1; } }
@keyframes ss-onda { from { scale: 1; opacity: 0.7; } to { scale: 2.3; opacity: 0; } }
@keyframes ss-led { 0%, 100% { opacity: 0.3; scale: 1; } 8% { opacity: 1; scale: 1.25; } 30% { opacity: 0.3; scale: 1; } }

/* El + que abre la ficha */
.st-mas {
  position: absolute;
  right: 22px;
  bottom: 22px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--texto);
  color: #fff;
  transition: transform 0.25s var(--curva), background 0.2s;
}
.st-mas svg { width: 17px; height: 17px; }
.st-servicio:hover .st-mas { transform: scale(1.08); background: #000; }
html:not(.js) .st-mas,
.sin-dialogo .st-mas { display: none; }

/* La ficha: sin JavaScript, adentro de la tarjeta; con JavaScript, en la hoja */
.js .st-servicio__ficha { display: none; }
.sin-dialogo .st-servicio__ficha { display: block; }
.st-servicio__ficha { margin-top: 8px; padding-inline: 26px; }
.st-servicio__ficha .st-ficha__foto { display: none; }
/* height:auto: sin él manda el height="1000" del HTML y la foto se estira */
.st-ficha__foto { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; background: var(--fondo); }
.st-ficha__rotulo { margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--texto-2); }
.st-ficha__incluye { display: grid; gap: 9px; margin-bottom: 18px; }
.st-ficha__incluye li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 16px; }
.st-ficha__incluye .st-ic { width: 18px; height: 18px; margin-top: 2px; color: var(--azul); }
.st-ficha__dato {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-top: 1px solid var(--linea-suave);
  font-size: 15px;
}
.st-ficha__dato span { color: var(--texto-2); }
.st-ficha__dato b, .st-ficha__dato a { font-weight: 600; text-align: right; }

/* El plazo: una barra de progreso como las de iOS (pedido de Nico, 30-10).
   Lo azul llega al plazo corto y lo celeste, al largo; las rayitas son los
   meses (de a 4 semanas). Todos los servicios van en la misma escala (la
   pone studio.php), así se ve cuál tarda más. Al abrir la hoja se llena de a
   poco, con un brillo al final, y los números cuentan (js/studio.js). */
.st-plazo { padding: 15px 0 13px; border-top: 1px solid var(--linea-suave); }
.st-plazo__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 11px; font-size: 15px; }
.st-plazo__cabeza > span { color: var(--texto-2); }
.st-plazo__cabeza b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-plazo__barra { position: relative; height: 10px; overflow: hidden; border-radius: 99px; background: var(--linea-suave); }
.st-plazo__hasta,
.st-plazo__desde { position: absolute; top: 0; bottom: 0; left: 0; overflow: hidden; border-radius: inherit; }
.st-plazo__hasta { width: calc(var(--hasta, 0) * 100%); background: rgba(0, 113, 227, 0.26); }
.st-plazo__desde { width: calc(var(--desde, 0) * 100%); background: var(--azul); }
.st-plazo__desde::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0));
  transform: translateX(-100%);
}
.st-plazo__barra i { position: absolute; top: 2px; bottom: 2px; left: calc(var(--en) * 100%); width: 1.5px; margin-left: -0.75px; border-radius: 1px; background: rgba(255, 255, 255, 0.9); }
.st-plazo__escala { display: flex; justify-content: space-between; margin-top: 7px; font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; }

/* La hoja (un <dialog> nativo): en la compu, una tarjeta al centro con dos
   columnas; en el celular, una hoja que sube desde abajo, como en iOS. Todo
   entra sin bajar: si no alcanza el alto, js/studio.js la ajusta (encajar):
   primero .st-hoja--justa (todo más apretado), después achica la foto
   (--foto-alto), después .st-hoja--mini (compacta: el ícono al lado del
   título y lo que incluye en dos columnas) y por último la saca
   (.st-hoja--sin-foto). Bajar queda como último recurso, en pantallas
   bajísimas. */
.st-hoja {
  width: min(980px, 100% - 48px);
  max-height: min(92vh, 860px);
  max-height: min(92svh, 860px);
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: var(--blanco);
  color: var(--texto);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.32);
  overflow: hidden;
}
.st-hoja::backdrop {
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.st-hoja[open] { animation: st-hoja-entra 0.45s var(--curva); }
.st-hoja[open]::backdrop { animation: st-velo 0.35s ease both; }
.st-hoja__caja { max-height: inherit; overflow-y: auto; overscroll-behavior: contain; }
/* Mientras entra, sin barra para bajar: lo que sube desde abajo la haría
   aparecer un instante */
.st-hoja--entrando .st-hoja__caja { overflow-y: hidden; }
/* Los botones de la hoja tienen display propio: sin esto, hidden no los esconde */
.st-hoja [hidden] { display: none !important; }
.st-hoja__cerrar,
.st-hoja__volver {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: var(--texto-2);
  transition: background 0.2s;
}
.st-hoja__cerrar:hover,
.st-hoja__volver:hover { background: rgba(0, 0, 0, 0.1); }
.st-hoja__cerrar svg { width: 16px; height: 16px; }
/* La flecha que vuelve de la segunda pantalla, a la izquierda, como en iOS */
.st-hoja__volver { right: auto; left: 16px; }
.st-hoja__volver .st-ic { width: 18px; height: 18px; margin-left: -2px; }

/* La ficha: a la izquierda, sobre gris, la foto y lo que incluye; a la
   derecha, qué es, el precio, el plazo, el ejemplo y los botones */
.st-hoja__ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.st-hoja__lado { display: flex; flex-direction: column; justify-content: center; padding: 40px 36px; background: var(--fondo); }
.st-hoja__lado .st-ficha__foto {
  align-self: center;
  width: min(100%, calc(var(--foto-alto, 9999px) * 1.6));
  margin-bottom: 26px;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 14px 32px rgba(0, 0, 0, 0.1);
}
.st-hoja__lado .st-ficha__incluye { margin-bottom: 0; }
.st-hoja__info { display: flex; flex-direction: column; min-width: 0; padding: 44px 44px 32px 40px; }
.st-hoja__cabeza { display: grid; gap: 8px; margin-bottom: 20px; }
.st-hoja__titulo { margin-top: 8px; font-size: clamp(28px, 3.2vw, 34px); font-weight: 600; line-height: 1.12; letter-spacing: -0.03em; }
.st-hoja__texto { font-size: 17px; line-height: 1.47; color: var(--texto-2); }
.st-hoja__precio { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.st-hoja__precio:empty { display: none; }
.st-hoja__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; padding-top: 20px; }
/* En la hoja, el ejemplo real de Soluciones de negocio va abajo del comparador */
.st-hoja .st-ficha__dato--sin-hoja { display: none; }
.st-hoja--sin-foto .st-hoja__lado .st-ficha__foto { display: none; }

/* Más apretada, cuando la pantalla es baja */
.st-hoja--justa .st-hoja__lado { padding: 28px 28px; }
.st-hoja--justa .st-hoja__lado .st-ficha__foto { margin-bottom: 18px; }
.st-hoja--justa .st-hoja__info { padding: 34px 36px 24px 32px; }
.st-hoja--justa .st-hoja__cabeza { gap: 5px; margin-bottom: 14px; }
.st-hoja--justa .st-ajuste--grande { --tam: 52px; }
.st-hoja--justa .st-hoja__titulo { margin-top: 4px; font-size: 27px; }
.st-hoja--justa .st-hoja__texto { font-size: 15.5px; line-height: 1.42; }
.st-hoja--justa .st-hoja__precio { font-size: 17px; }
.st-hoja--justa .st-ficha__rotulo { margin-bottom: 7px; }
.st-hoja--justa .st-ficha__incluye { gap: 6px; }
.st-hoja--justa .st-ficha__incluye li { font-size: 15px; }
.st-hoja--justa .st-plazo { padding: 11px 0 9px; }
.st-hoja--justa .st-plazo__cabeza { margin-bottom: 8px; }
.st-hoja--justa .st-ficha__dato { padding: 10px 0; }
.st-hoja--justa .st-hoja__pie { padding-top: 14px; }
/* Compacta: el ícono chico al lado del título (lejos de la ×), lo que
   incluye en dos columnas y la barra del plazo sin la escala de abajo */
.st-hoja--mini .st-hoja__ficha .st-hoja__cabeza { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; }
.st-hoja--mini .st-hoja__ficha .st-hoja__cabeza > * { grid-column: 1 / -1; }
.st-hoja--mini .st-hoja__ficha .st-hoja__cabeza > [data-hoja-icono] { grid-column: 1; }
.st-hoja--mini .st-hoja__ficha .st-hoja__titulo { grid-column: 2; margin-top: 0; padding-right: 40px; }
.st-hoja--mini .st-ajuste--grande { --tam: 40px; }
.st-hoja--mini .st-hoja__texto { font-size: 14.5px; line-height: 1.4; }
.st-hoja--mini .st-ficha__incluye { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 14px; }
.st-hoja--mini .st-ficha__incluye li { grid-template-columns: 16px minmax(0, 1fr); gap: 6px; font-size: 14px; line-height: 1.3; }
.st-hoja--mini .st-ficha__incluye .st-ic { width: 15px; height: 15px; margin-top: 1px; }
.st-hoja--mini .st-plazo__escala { display: none; }
.st-hoja--mini .st-hoja__ejemplo .st-hoja__cabeza { margin-bottom: 10px; }

/* La segunda pantalla: el ejemplo de Soluciones de negocio. El comparador se
   achica si no entra a lo alto (encajar, en js/studio.js). */
.st-hoja__ejemplo { padding: 60px 46px 28px; }
.st-hoja__ejemplo .st-hoja__cabeza { margin-bottom: 22px; }
.st-hoja__ejemplo .st-hoja__titulo { margin-top: 0; }
.st-hoja--justa .st-hoja__ejemplo { padding: 54px 36px 22px; }
.st-hoja--justa .st-hoja__ejemplo .st-hoja__cabeza { margin-bottom: 14px; }
.st-hoja__etiqueta { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--texto-3); }
.st-hoja .st-ad { margin-inline: auto; border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
.st-hoja__pie--ejemplo { justify-content: space-between; margin-top: 0; padding-top: 18px; }
.st-hoja__vivo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 15px; }
.st-hoja__vivo span { color: var(--texto-2); }
.st-hoja__vivo a,
.st-hoja__vivo b { font-weight: 600; }

/* La entrada, como una diapositiva de Keynote con «Aparecer» por partes: la
   foto se asienta, después el título, el texto y el precio, las tildes se
   dibujan de a una y la barra del plazo se llena. Vuelve a pasar cada vez que
   se abre una ficha (js/studio.js pone y saca .st-hoja--anima). */
.st-hoja--anima .st-hoja__lado .st-ficha__foto { animation: st-foto-entra 0.8s var(--curva) 0.04s both; }
.st-hoja--anima [data-hoja-icono] { animation: st-aparece 0.6s var(--curva) 0.08s both; }
.st-hoja--anima .st-hoja__ficha .st-hoja__titulo { animation: st-aparece 0.6s var(--curva) 0.13s both; }
.st-hoja--anima .st-hoja__ficha .st-hoja__texto { animation: st-aparece 0.6s var(--curva) 0.18s both; }
.st-hoja--anima .st-hoja__ficha .st-hoja__precio { animation: st-aparece 0.6s var(--curva) 0.23s both; }
.st-hoja--anima .st-hoja__lado .st-ficha__rotulo { animation: st-aparece 0.6s var(--curva) 0.24s both; }
.st-hoja--anima .st-hoja__lado .st-ficha__incluye li { animation: st-aparece 0.55s var(--curva) both; animation-delay: calc(0.3s + var(--n, 0) * 0.07s); }
.st-hoja--anima .st-hoja__lado .st-ficha__incluye .st-ic path { stroke-dasharray: 21; animation: st-tilde 0.5s var(--curva) both; animation-delay: calc(0.44s + var(--n, 0) * 0.07s); }
.st-hoja--anima .st-hoja__cuerpo > * { animation: st-aparece 0.6s var(--curva) 0.3s both; }
.st-hoja--anima .st-hoja__cuerpo > * + * { animation-delay: 0.37s; }
.st-hoja--anima .st-plazo__hasta { animation: st-llena 1.4s var(--curva) 0.5s both; }
.st-hoja--anima .st-plazo__desde { animation: st-llena 1.1s var(--curva) 0.45s both; }
.st-hoja--anima .st-plazo__desde::after { animation: st-brillo 1.1s ease-in-out 1.45s both; }
.st-hoja--anima .st-hoja__ficha .st-hoja__pie { animation: st-aparece 0.6s var(--curva) 0.42s both; }

@keyframes st-hoja-entra { from { opacity: 0; transform: translateY(26px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes st-velo { from { opacity: 0; } to { opacity: 1; } }
@keyframes st-aparece { from { opacity: 0; transform: translateY(14px); } }
@keyframes st-foto-entra { from { opacity: 0; transform: scale(0.95); } }
@keyframes st-tilde { from { stroke-dashoffset: 21; } to { stroke-dashoffset: 0; } }
@keyframes st-llena { from { width: 0; } }
@keyframes st-brillo { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* --- Un solo estudio: el video adentro de las letras ---------------------- */
/* Sin JavaScript (o con «reducir movimiento») es un título con degradé sobre
   negro. Con JavaScript, la sección se estira (.st-mv--viva) y la escena queda
   pegada a la pantalla mientras se baja: js/studio.js pone las variables de
   cada momento (--escala, --tapa, --cruce, --resto, --sube, --sube-px). */
.st-mv { position: relative; background: #000; color: #f5f5f7; color-scheme: dark; }
.st-mv__escena { position: relative; overflow: hidden; isolation: isolate; padding: clamp(110px, 15vw, 190px) 22px; }
.st-mv__video,
.st-mv__tapa { display: none; }
.st-mv__bloque { width: min(1060px, 100%); margin-inline: auto; text-align: center; }
.st-mv__etiqueta { margin-bottom: 12px; font-size: clamp(19px, 2vw, 24px); font-weight: 600; letter-spacing: -0.015em; color: #f5f5f7; }
.st-mv__titulo { font-size: clamp(44px, 7.4vw, 104px); font-weight: 700; line-height: 1.04; letter-spacing: -0.045em; text-wrap: balance; }
.st-mv__linea { display: block; width: fit-content; margin-inline: auto; }
.st-mv__final .st-mv__linea {
  background: linear-gradient(100deg, #c4f1ff 0%, #6cc4ff 30%, #2997ff 56%, #7d7bff 80%, #c08cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.st-mv__texto {
  max-width: 30em;
  margin: 40px auto 0;
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 600;
  line-height: 1.33;
  letter-spacing: -0.016em;
  color: #86868b;
}
.st-mv__texto b { font-weight: 600; color: #f5f5f7; }

.st-mv--viva { height: 420vh; height: 420svh; }
.st-mv--viva .st-mv__escena { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0; background: #000; }
.st-mv--viva .st-mv__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: calc(1 - var(--cruce, 0)); }
.st-mv__archivo { object-fit: cover; background: #000; }
.st-mv--viva .st-mv__video[hidden] { display: none; }
/* La tapa: negra con las palabras en blanco, multiplicada con el video. Donde
   es negra tapa; donde hay letra, deja ver el video. */
.st-mv--viva .st-mv__tapa { position: absolute; inset: 0; display: block; background: #000; mix-blend-mode: multiply; opacity: var(--tapa, 0); }
.st-mv--viva .st-mv__final { position: absolute; inset: 0; }
.st-mv--viva .st-mv__bloque { position: absolute; top: 50%; left: 50%; width: min(1060px, 100% - 44px); transform: translate(-50%, calc(-50% + var(--sube-px, 0px))); }
.st-mv--viva .st-mv__texto { position: absolute; top: 100%; left: 0; right: 0; }
/* En la tapa solo se ven las palabras; lo demás ocupa su lugar sin verse, así
   todo calza justo con la capa de abajo */
.st-mv__tapa .st-mv__etiqueta,
.st-mv__tapa .st-mv__linea--2,
.st-mv__tapa .st-mv__texto { visibility: hidden; }
.st-mv__tapa .st-mv__linea--1 { color: #fff; transform: scale(var(--escala, 1)); transform-origin: var(--origen, 50% 50%); }
.st-mv--viva .st-mv__final .st-mv__linea--1 { opacity: var(--cruce, 0); }
.st-mv--viva .st-mv__final .st-mv__etiqueta,
.st-mv--viva .st-mv__final .st-mv__linea--2 { opacity: var(--resto, 0); transform: translateY(calc((1 - var(--resto, 0)) * 14px)); }
.st-mv--viva .st-mv__final .st-mv__texto { opacity: var(--sube, 0); transform: translateY(calc((1 - var(--sube, 0)) * 26px)); }

/* --- Compromisos: tres tarjetas con su escena ----------------------------- */
/* Cada escena se arma cuando la tarjeta llega a la pantalla (.animar) y otra
   vez al pasar el mouse o tocarla. La escena se inclina siguiendo al mouse
   (--rx, --ry). Sin JavaScript se ven armadas. */
.st-promesas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.st-promesa {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 34px;
  border-radius: 28px;
  background: var(--fondo);
}
.js .st-promesa { cursor: pointer; }
.st-promesa__escena {
  position: relative;
  display: grid;
  place-items: center;
  height: 268px;
  margin-bottom: 16px;
  border-radius: 20px;
  background: var(--blanco);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  perspective: 900px;
}
.st-promesa__escena > * {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.7s var(--curva);
}
.st-promesa__titulo { padding: 0 14px; font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; line-height: 1.14; letter-spacing: -0.024em; }
.st-promesa__texto { padding: 0 14px; font-size: 17px; line-height: 1.47; color: var(--texto-2); }

/* La propuesta que se firma */
.st-doc {
  position: relative;
  width: min(272px, 86%);
  padding: 16px 18px 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 16px 36px rgba(0, 0, 0, 0.11);
}
.st-doc__cabeza { display: flex; align-items: center; gap: 10px; padding-bottom: 11px; border-bottom: 1px solid var(--linea-suave); }
.st-doc__cabeza img { width: 32px; height: 32px; }
.st-doc__cabeza b { display: block; font-size: 15px; letter-spacing: -0.01em; }
.st-doc__cabeza small { display: block; font-size: 11.5px; color: var(--texto-3); }
.st-doc__filas li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--linea-suave);
  font-size: 12.5px;
}
.st-doc__filas span { color: var(--texto-2); }
.st-doc__filas b { font-weight: 600; }
.st-doc__ok { width: 16px; height: 16px; color: #34c759; stroke-width: 2.8; }
.st-doc__firma { display: grid; justify-items: start; margin-top: 8px; }
.st-doc__firma svg { width: 132px; height: 40px; color: #1d1d1f; }
.st-doc__firma span { width: 150px; padding-top: 3px; border-top: 1px solid var(--linea); font-size: 10.5px; color: var(--texto-3); }
.st-doc__trazo { stroke-dasharray: 1; stroke-dashoffset: 0; }
.st-doc__sello {
  position: absolute;
  right: 18px;
  bottom: 26px;
  padding: 4px 9px;
  border: 2px solid var(--azul);
  border-radius: 8px;
  color: var(--azul);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-10deg);
}
.js .st-doc__filas li { opacity: 0; transform: translateX(-8px); }
.js .st-doc__ok { transform: scale(0); }
.js .st-doc__trazo { stroke-dashoffset: 1; }
.js .st-doc__sello { opacity: 0; transform: rotate(-10deg) scale(1.8); }
.js .animar .st-doc__filas li {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s var(--curva) calc(0.25s + var(--n) * 0.28s), transform 0.45s var(--curva) calc(0.25s + var(--n) * 0.28s);
}
.js .animar .st-doc__ok { transform: scale(1); transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.5s + var(--n) * 0.28s); }
.js .animar .st-doc__trazo { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s ease-in-out 1.25s; }
.js .animar .st-doc__sello {
  opacity: 1;
  transform: rotate(-10deg) scale(1);
  transition: opacity 0.2s 2.35s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 2.35s;
}

/* Las cuentas, a nombre de tu empresa */
.st-titular {
  width: min(322px, 92%);
  padding: 14px 16px 6px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 16px 36px rgba(0, 0, 0, 0.11);
}
.st-titular__cabeza {
  display: flex;
  justify-content: space-between;
  padding: 0 2px 8px;
  border-bottom: 1px solid var(--linea-suave);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.st-titular li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 2px;
  border-bottom: 1px solid var(--linea-suave);
  font-size: 13px;
}
.st-titular li:last-child { border-bottom: 0; }
.st-titular__ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--fondo); color: var(--texto); }
.st-titular__ico .st-ic,
.st-titular__ico .st-logo { width: 15px; height: 15px; }
.st-titular__ico--apple { background: #000; color: #fff; }
.st-titular__cuenta { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.st-titular__duenio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 980px;
  background: rgba(0, 113, 227, 0.1);
  color: var(--azul-texto);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.st-titular__duenio .st-ic { width: 12px; height: 12px; stroke-width: 3; }
/* Antes de armarse, el titular es un renglón gris que titila */
.js .st-titular__duenio {
  background: linear-gradient(90deg, #ececf0 0%, #f6f6f8 50%, #ececf0 100%) 0 0 / 200% 100%;
  color: transparent;
  animation: st-esqueleto 1.3s linear infinite;
}
.js .st-titular__duenio .st-ic { opacity: 0; }
.js .animar .st-titular__duenio {
  background: rgba(0, 113, 227, 0.1);
  color: var(--azul-texto);
  animation: st-titular 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.35s + var(--n) * 0.38s) both;
}
.js .animar .st-titular__duenio .st-ic { opacity: 1; transition: opacity 0.3s calc(0.55s + var(--n) * 0.38s); }

/* La charla de seis meses después */
.st-chat { display: grid; gap: 8px; width: min(300px, 90%); }
.st-chat__dia { justify-self: center; font-size: 11px; font-weight: 600; color: var(--texto-3); }
.st-chat__burbuja { max-width: 84%; padding: 9px 13px; border-radius: 18px; font-size: 14px; line-height: 1.3; }
.st-chat__burbuja--cliente { justify-self: start; border-bottom-left-radius: 6px; background: #e9e9eb; color: var(--texto); transform-origin: left bottom; }
.st-chat__burbuja--nv { justify-self: end; border-bottom-right-radius: 6px; background: var(--azul); color: #fff; transform-origin: right bottom; }
.st-chat__escribiendo { display: inline-flex; justify-self: start; gap: 4px; padding: 12px 14px; overflow: hidden; border-radius: 18px; background: #e9e9eb; }
.st-chat__escribiendo span { width: 7px; height: 7px; border-radius: 50%; background: #8e8e93; animation: st-punto 1.2s ease-in-out infinite; }
.st-chat__escribiendo span:nth-child(2) { animation-delay: 0.15s; }
.st-chat__escribiendo span:nth-child(3) { animation-delay: 0.3s; }
.st-chat__estado { justify-self: end; margin-top: -4px; font-size: 11px; color: var(--texto-3); }
html:not(.js) .st-chat__escribiendo { display: none; }
.js .st-chat > * { opacity: 0; }
.js .animar .st-chat__dia { animation: st-aparece 0.5s var(--curva) 0.1s both; }
.js .animar .st-chat__burbuja--cliente { animation: st-burbuja 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s both; }
.js .animar .st-chat__escribiendo { animation: st-escribe 1.7s var(--curva) 1.05s both; }
.js .animar .st-chat__burbuja--nv { animation: st-burbuja 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 2.75s both; }
.js .animar .st-chat__estado { animation: st-aparece 0.4s var(--curva) 3.25s both; }
/* Con «reducir movimiento» las escenas se ven armadas desde el principio */
.st-promesa.quieta * { animation-duration: 0s !important; animation-delay: 0s !important; transition: none !important; }

@keyframes st-esqueleto { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes st-titular { from { transform: scale(0.7); } to { transform: none; } }
@keyframes st-punto { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes st-aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes st-burbuja { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes st-escribe {
  0%       { opacity: 0; max-height: 0; padding-block: 0; margin-block: -4px; }
  12%, 85% { opacity: 1; max-height: 40px; padding-block: 12px; margin-block: 0; }
  100%     { opacity: 0; max-height: 0; padding-block: 0; margin-block: -4px; }
}

/* --- Las insignias de las tiendas (App Store, Google Play) ----------------- */
.st-tiendas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 14px; }
.st-tienda {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 48px;
  padding: 0 18px 0 13px;
  border-radius: 12px;
  background: #000;
  box-shadow: inset 0 0 0 1px #a6a6a6;
  color: #fff;
  transition: background 0.2s, transform 0.15s var(--curva);
}
a.st-tienda:hover { background: #1d1d1f; }
a.st-tienda:active { transform: scale(0.97); }
.st-tienda__logo { flex: none; width: 24px; height: 24px; }
.st-tienda__texto { display: grid; font-size: 19px; font-weight: 600; line-height: 1.02; letter-spacing: -0.022em; white-space: nowrap; }
.st-tienda__texto small { margin-bottom: 1px; font-size: 10.5px; font-weight: 500; letter-spacing: 0; }
.st-tienda__pronto {
  position: absolute;
  top: -15px;
  right: -10px;
  padding: 2px 8px;
  border-radius: 980px;
  background: var(--azul);
  box-shadow: 0 4px 12px rgba(0, 113, 227, 0.35);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* --- Dos orillas: Buenos Aires y Montevideo -------------------------------- */
.st-orillas__grilla {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
html:not(.js) .st-orillas__grilla { grid-template-columns: minmax(0, 1fr); }

/* El mapa (lo dibuja js/studio.js en el lienzo; los carteles de las sedes son
   HTML y siguen a su punto: --x, --y) */
.st-mapa { position: relative; min-height: 360px; aspect-ratio: 1 / 0.88; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
html:not(.js) .st-mapa { display: none; }
.st-mapa__lienzo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: pointer; }
.st-mapa__pin {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  gap: 1px;
  padding: 7px 12px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1), inset 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  transform: translate(var(--x, 0px), var(--y, 0px)) translate(-50%, calc(-100% - 46px));
  transition: background 0.4s, color 0.4s, box-shadow 0.4s, opacity 0.6s;
  pointer-events: none;
}
.st-mapa--listo .st-mapa__pin { opacity: 1; }
/* Buenos Aires con su cartel hacia el oeste y Montevideo hacia el este: así no se pisan */
.st-mapa__pin[data-pin="ar"] { transform: translate(var(--x, 0px), var(--y, 0px)) translate(calc(-100% + 20px), calc(-100% - 46px)); }
.st-mapa__pin[data-pin="uy"] { transform: translate(var(--x, 0px), var(--y, 0px)) translate(-20px, calc(-100% - 46px)); }
.st-mapa__pin b { font-weight: 600; letter-spacing: -0.01em; }
.st-mapa__pin span { font-size: 11.5px; color: var(--texto-2); transition: color 0.4s; }
.st-mapa__pin--activo { background: var(--azul); box-shadow: 0 8px 22px rgba(0, 113, 227, 0.35); color: #fff; }
.st-mapa__pin--activo span { color: rgba(255, 255, 255, 0.82); }
.st-mapa__hora {
  position: absolute;
  bottom: 6px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 980px;
  background: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08), inset 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translateX(-50%);
}
.st-mapa__hora .st-ic { width: 16px; height: 16px; color: var(--azul); }

/* Las pestañas: el control segmentado de iOS */
.st-segmento {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 18px;
  padding: 3px;
  border-radius: 12px;
  background: rgba(118, 118, 128, 0.12);
}
html:not(.js) .st-segmento { display: none; }
.st-segmento__opcion { position: relative; z-index: 1; padding: 9px 12px; border-radius: 9px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.st-segmento__marca {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
  transition: transform 0.45s var(--curva);
}
.st-orillas[data-pais="uy"] .st-segmento__marca { transform: translateX(100%); }

.st-pais { overflow: hidden; border-radius: 28px; background: var(--blanco); box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08); }
html:not(.js) .st-orillas__info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.js .st-pais:not(.st-pais--activo) { display: none; }
.js .st-pais--activo { animation: st-pais 0.55s var(--curva) both; }
.st-pais__foto { position: relative; aspect-ratio: 16 / 8.6; overflow: hidden; background: var(--fondo); }
.st-pais__foto img { width: 100%; height: 100%; object-fit: cover; }
.st-pais__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0.55)); }
.st-pais__ciudad { position: absolute; bottom: 16px; left: 22px; z-index: 1; display: grid; color: #fff; }
.st-pais__ciudad b { font-size: 26px; font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; }
.st-pais__ciudad small { font-size: 12.5px; font-variant-numeric: tabular-nums; opacity: 0.82; }
.st-pais__cuerpo { display: grid; gap: 14px; padding: 22px 24px 26px; }
.st-pais__sociedad { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.st-pais__domicilio { margin-top: -11px; font-size: 14px; color: var(--texto-2); }
.st-pais__dato { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; padding-top: 14px; border-top: 1px solid var(--linea-suave); }
.st-pais__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(0, 113, 227, 0.1); color: var(--azul); }
.st-pais__ico .st-ic { width: 20px; height: 20px; }
.st-pais__dato small { display: block; margin-bottom: 2px; font-size: 12.5px; font-weight: 600; color: var(--texto-3); }
.st-pais__dato p { font-size: 16px; line-height: 1.42; }
/* Integraciones: las fichas de los logos, todas iguales (2 × 1). Al 85 % del tamaño original (Nico, 28-10):
   el ancho, la ficha mínima y el espacio se achican juntos, así entra la misma cantidad por fila */
.st-pais__integraciones { padding-top: 14px; border-top: 1px solid var(--linea-suave); }
.st-pais__integraciones > small { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 12.5px; font-weight: 600; color: var(--texto-3); }
.st-pais__integraciones > small .st-ic { width: 16px; height: 16px; color: var(--azul); }
.st-logos { display: grid; width: 85%; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 7px; }
.st-logos__ficha {
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07);
  transition: transform 0.25s var(--curva), box-shadow 0.25s;
}
.st-logos__ficha:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.07), 0 8px 18px rgba(0, 0, 0, 0.1); }
.st-logos__ficha img { width: 100%; height: 100%; object-fit: contain; }
.st-logos__ficha--nombre span { padding: 0 7px; font-size: 12px; font-weight: 700; letter-spacing: -0.02em; text-align: center; color: var(--texto); }

@keyframes st-pais { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }

/* Un proyecto elegido desde el menú se marca un momento */
.st-caso--destacado { animation: st-destacar 1.8s var(--curva); }
@keyframes st-destacar {
  0%, 100% { box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08); }
  25%      { box-shadow: 0 0 0 3px var(--azul), 0 18px 40px rgba(0, 113, 227, 0.22); }
}

/* --- Todo junto ----------------------------------------------------------- */
.st-junto { overflow: hidden; }
.st-junto__grilla {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(44px, 7vw, 100px);
  align-items: center;
}
.st-junto__precio { margin-top: 24px; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: #fff; }
.st-junto__deslizar { width: min(380px, 100%); margin-top: 32px; }

/* La línea se llena al bajar (--avance, de 0 a 1, lo pone js/studio.js) y cada
   paso se prende cuando la luz le llega */
.st-tuberia { --avance: 0; position: relative; display: grid; gap: 14px; }
.st-tuberia::before,
.st-tuberia::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 28px;
  width: 2px;
  border-radius: 1px;
}
.st-tuberia::before { bottom: 28px; background: rgba(255, 255, 255, 0.12); }
.st-tuberia::after {
  height: calc((100% - 56px) * var(--avance));
  background: linear-gradient(var(--azul-oscuro), var(--azul));
  box-shadow: 0 0 14px rgba(41, 151, 255, 0.65);
}
.st-tuberia__paso {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 10px 0;
  opacity: 0.42;
  transition: opacity 0.5s var(--curva);
}
.st-tuberia__paso.encendido { opacity: 1; }
.st-tuberia__icono {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #1b1c20;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.72);
  transition: background 0.5s, box-shadow 0.5s, color 0.5s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.st-tuberia__icono .st-ic { width: 24px; height: 24px; }
.st-tuberia__paso.encendido .st-tuberia__icono {
  background: var(--azul);
  box-shadow: 0 0 0 6px rgba(0, 113, 227, 0.18), 0 10px 30px rgba(0, 113, 227, 0.45);
  color: #fff;
  transform: scale(1.04);
}
.st-tuberia__paso b { display: block; font-size: 21px; font-weight: 600; letter-spacing: -0.022em; color: #fff; }
.st-tuberia__paso small { display: block; margin-top: 2px; font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, 0.6); }
html:not(.js) .st-tuberia__paso { opacity: 1; }

/* --- Cómo trabajamos ------------------------------------------------------ */
.st-proceso {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}
/* La línea que une los pasos se dibuja sola cuando aparece */
.st-proceso::before,
.st-proceso::after {
  content: "";
  position: absolute;
  top: 21px;
  left: 22px;
  right: calc(20% - 4px);
  height: 2px;
  border-radius: 1px;
}
.st-proceso::before { background: var(--linea); }
.st-proceso::after {
  background: var(--azul);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.8s var(--curva) 0.3s;
}
.st-proceso.visible::after,
html:not(.js) .st-proceso::after { transform: scaleX(1); }
.st-paso { position: relative; }
.st-paso__n {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blanco);
  box-shadow: inset 0 0 0 2px var(--linea);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background 0.4s, color 0.4s, box-shadow 0.4s;
  transition-delay: calc(0.3s + var(--i, 0) * 0.34s);
}
.st-proceso.visible .st-paso__n,
html:not(.js) .st-paso__n { background: var(--azul); color: #fff; box-shadow: 0 6px 16px rgba(0, 113, 227, 0.3); }
.st-paso h3 { margin-top: 20px; font-size: 19px; font-weight: 600; letter-spacing: -0.018em; line-height: 1.2; }
.st-paso p { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--texto-2); }

/* --- Quiénes somos: vidrio sobre luces ----------------------------------- */
/* Una diapositiva oscura: cuatro luces grandes y desenfocadas (los colores de
   la marca) que se mueven despacio, y adelante tarjetas de vidrio que las
   dejan ver borrosas. El borde de cada tarjeta es una línea de luz que se
   apaga hacia el medio; js/studio.js la inclina hacia el mouse (--rx, --ry) y
   mueve un brillo que lo sigue (--mx, --my). */
.st-nos { overflow: hidden; background: #07080a; isolation: isolate; }
.st-nos__luces { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.st-nos__luces i {
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  animation: st-luz 26s ease-in-out infinite alternate;
}
.st-nos__luces i:nth-child(1) { left: -12%; top: 18%; background: #0071e3; }
.st-nos__luces i:nth-child(2) { right: -14%; top: -10%; background: #5856d6; animation-duration: 31s; animation-delay: -8s; }
.st-nos__luces i:nth-child(3) { left: 38%; bottom: -26%; background: #30b0c7; opacity: 0.4; animation-duration: 23s; animation-delay: -4s; }
.st-nos__luces i:nth-child(4) { left: 18%; top: -24%; width: 30vmax; height: 30vmax; background: #c7cbcf; opacity: 0.16; animation-duration: 34s; animation-delay: -12s; }
@keyframes st-luz {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(6vw, -4vh) scale(1.12); }
  100% { transform: translate(-5vw, 5vh) scale(0.94); }
}

.st-nos__grilla {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
.st-nos__col { display: flex; }

.st-vidrio {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  border-radius: 30px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04) 60%);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  backdrop-filter: blur(30px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 30px 70px rgba(0, 0, 0, 0.35);
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.7s var(--curva), box-shadow 0.4s;
}
/* La línea de luz del borde: más fuerte arriba a la izquierda, como el vidrio de iOS */
.st-vidrio::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.06) 38%, rgba(255, 255, 255, 0.04) 64%, rgba(255, 255, 255, 0.28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.st-vidrio__brillo {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(380px circle at var(--mx, 30%) var(--my, 0%), rgba(255, 255, 255, 0.16), transparent 45%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.st-vidrio:hover .st-vidrio__brillo { opacity: 1; }

.st-nos__relato { display: flex; flex-direction: column; justify-content: space-between; gap: 34px; width: 100%; padding: clamp(28px, 3.4vw, 44px); }
.st-nos__prosa { display: grid; gap: 16px; font-size: 19px; line-height: 1.55; letter-spacing: -0.016em; color: rgba(255, 255, 255, 0.74); }
.st-nos__prosa p:first-child { font-size: clamp(21px, 2vw, 24px); line-height: 1.42; letter-spacing: -0.02em; color: #fff; }
.st-nos__firma { display: flex; align-items: center; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.st-nos__sello { flex: none; }
.st-nos__sello .st-alu { --tam: 52px; }
.st-nos__sello .st-alu__sombra { display: none; }
/* La foto de quien firma: redonda, con un anillo fino de aluminio (como las ondas de la portada) separado por un filete oscuro.
   La de Nico va recortada sobre un fondo de estudio grafito (nv-studio/fotos, 28-10) */
.st-nos__retrato {
  flex: none;
  width: 60px;
  height: 60px;
  padding: 2px;
  border: 1.5px solid transparent;
  border-radius: 50%;
  object-fit: cover;
  background:
    linear-gradient(#0d1016, #0d1016) padding-box,
    linear-gradient(150deg, #f7f8fa 0%, #a3a9b2 38%, #eef0f3 62%, #7b828c 100%) border-box;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.st-nos__firma b { display: block; font-size: 17px; font-weight: 600; color: #fff; }
.st-nos__firma span { display: block; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.7); }

.st-nos__cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.st-nos__cifras li { display: flex; }
.st-nos__cifra { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; min-height: 190px; padding: 26px; }
.st-nos__numero {
  display: block;
  font-size: clamp(46px, 5vw, 66px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
.st-nos__rotulo { display: block; margin-top: 12px; font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, 0.66); }

/* --- Preguntas frecuentes ------------------------------------------------- */
.st-preguntas { max-width: 900px; }
.st-faq { border-top: 1px solid var(--linea); }
.st-faq__item { border-bottom: 1px solid var(--linea); }
.st-faq__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
  transition: color 0.2s;
}
.st-faq__pregunta::-webkit-details-marker { display: none; }
.st-faq__pregunta:hover { color: var(--azul-texto); }
/* El + que gira y queda como ×: el mismo gesto que el + de las fichas */
.st-faq__mas { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, 0.05); }
.st-faq__mas::before,
.st-faq__mas::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 1px;
  background: var(--texto);
  transition: transform 0.4s var(--curva);
}
.st-faq__mas::after { transform: rotate(90deg); }
.st-faq__item[open] .st-faq__mas::before { transform: rotate(45deg); }
.st-faq__item[open] .st-faq__mas::after { transform: rotate(135deg); }
.st-faq__respuesta { padding: 0 54px 26px 0; font-size: 17px; line-height: 1.6; color: var(--texto-2); }
.st-faq__respuesta p + p { margin-top: 10px; }

/* Donde el navegador ya sabe animar la altura de un <details>, se abre suave */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  .st-faq { interpolate-size: allow-keywords; }
  .st-faq__item::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.45s var(--curva), content-visibility 0.45s allow-discrete;
  }
  .st-faq__item[open]::details-content { height: auto; }
}

/* --- Contacto ------------------------------------------------------------- */
.st-contacto { overflow: hidden; color-scheme: dark; }
.st-contacto__grilla {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(44px, 6vw, 84px);
  align-items: center;
}
.st-contacto__icono { margin-bottom: 30px; }
.st-contacto__icono .st-alu { --tam: 84px; }
.st-contacto__otros { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.st-contacto__caja {
  position: relative;
  padding: clamp(24px, 4vw, 40px);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 30px 70px rgba(0, 0, 0, 0.38);
}

/* El formulario (lo maneja js/formulario.js, igual que en el resto del sitio) */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: rgba(255, 255, 255, 0.72); }
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: inherit;
  font-size: 17px;
  letter-spacing: -0.015em;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}
.campo textarea { min-height: 128px; resize: vertical; line-height: 1.45; }
.campo select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  cursor: pointer;
}
.campo select option { color: #1d1d1f; background: #fff; }
.campo input::placeholder,
.campo textarea::placeholder { color: rgba(255, 255, 255, 0.36); }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--azul-oscuro);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 4px rgba(41, 151, 255, 0.24);
}
.campo--error input,
.campo--error select,
.campo--error textarea { border-color: #ff8a80; }
.campo__error { font-size: 13px; color: #ffb4ab; }
.campo__error:empty { display: none; }
/* La trampa para robots: un campo que una persona nunca ve */
.campo--trampa {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form__aviso { display: none; grid-column: 1 / -1; padding: 12px 15px; border-radius: 13px; font-size: 15px; }
.form__aviso.visible { display: block; }
.form__aviso--ok { background: rgba(48, 209, 88, 0.16); color: #c3f5cf; }
.form__aviso--mal { background: rgba(255, 105, 97, 0.16); color: #ffcdc8; }
.form__pie { grid-column: 1 / -1; margin-top: 6px; }

/* «¿Qué necesitás?»: cerrado parece un campo más, con lo elegido en
   pastillitas; abierto, las opciones con su ícono, como una lista de iOS en
   oscuro, y se tildan varias. Sin JavaScript las opciones se ven siempre y el
   botón de arriba no aparece. */
.elegir__rotulo { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: rgba(255, 255, 255, 0.72); }
.elegir__boton {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 50px;
  padding: 8px 46px 8px 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.06);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.elegir__boton:hover { background: rgba(255, 255, 255, 0.09); }
.elegir--abierto .elegir__boton { border-color: var(--azul-oscuro); background: rgba(255, 255, 255, 0.1); }
.elegir__boton:focus-visible { outline: none; border-color: var(--azul-oscuro); box-shadow: 0 0 0 4px rgba(41, 151, 255, 0.24); }
.campo--error .elegir__boton { border-color: #ff8a80; }
.elegir__resumen { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.elegir__vacio { padding-left: 6px; font-size: 17px; letter-spacing: -0.015em; color: rgba(255, 255, 255, 0.36); }
.elegir__pastilla {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 12px 4px 9px;
  border-radius: 980px;
  background: rgba(41, 151, 255, 0.22);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.elegir__pastilla .st-ic { flex: none; width: 15px; height: 15px; }
.elegir__flecha {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  color: rgba(255, 255, 255, 0.7);
  transition: transform 0.35s var(--curva);
}
.elegir--abierto .elegir__flecha { transform: rotate(180deg); }
html:not(.js) .elegir__boton,
html:not(.js) .elegir__listo { display: none; }

/* Se abre empujando lo de abajo, de a poco */
.js .elegir__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 0.45s var(--curva), opacity 0.25s, visibility 0s 0.45s;
}
.js .elegir--abierto .elegir__panel {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows 0.45s var(--curva), opacity 0.3s 0.05s, visibility 0s;
}
.elegir__adentro { min-height: 0; overflow: hidden; }
.elegir__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
  padding: 6px 3px 3px;
}
.elegir .elegir__opcion {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.012em;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s var(--curva);
}
.elegir .elegir__opcion:hover { background: rgba(255, 255, 255, 0.08); }
.elegir .elegir__opcion:active { transform: scale(0.98); }
/* La casilla de verdad: invisible, pero es la que se tilda, se manda y se recorre con el teclado */
.elegir .elegir__opcion input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.elegir__icono {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.2s;
}
.elegir__icono .st-ic { width: 19px; height: 19px; }
.elegir__tilde {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3);
  color: transparent;
  transition: background 0.2s, box-shadow 0.2s, color 0.2s;
}
.elegir__tilde .st-ic { width: 14px; height: 14px; stroke-width: 2.6; }
/* Elegida: teñida de azul, como lo seleccionado en iOS */
.elegir .elegir__opcion:has(input:checked) { background: rgba(41, 151, 255, 0.16); box-shadow: inset 0 0 0 1.5px var(--azul-oscuro); }
.elegir__opcion:has(input:checked) .elegir__icono,
.elegir__opcion:has(input:checked) .elegir__tilde { background: var(--azul); box-shadow: none; color: #fff; }
.elegir .elegir__opcion:has(input:focus-visible) { box-shadow: inset 0 0 0 2px var(--azul-oscuro), 0 0 0 4px rgba(41, 151, 255, 0.24); }
.elegir__pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 3px 4px; }
.elegir__cuenta { font-size: 13px; color: rgba(255, 255, 255, 0.56); }
.elegir__listo {
  min-height: 34px;
  padding: 6px 18px;
  border-radius: 980px;
  background: var(--azul);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
  transition: background 0.2s, transform 0.15s var(--curva);
}
.elegir__listo:hover { background: var(--azul-hover); }
.elegir__listo:active { transform: scale(0.96); }

/* Gracias */
.enviado { display: none; padding: 36px 10px; text-align: center; }
.contacto__caja.enviado-ok .form { display: none; }
.contacto__caja.enviado-ok .enviado { display: grid; justify-items: center; gap: 10px; animation: st-entrar 0.9s var(--curva) both; }
.enviado__circulo {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--azul);
  color: #fff;
  box-shadow: 0 0 0 10px rgba(0, 113, 227, 0.2), 0 18px 40px rgba(0, 113, 227, 0.45);
}
.enviado__circulo svg { width: 36px; height: 36px; }
.enviado__circulo path { stroke-dasharray: 30; stroke-dashoffset: 30; }
.enviado-ok .enviado__circulo path { animation: st-tilde 0.6s 0.35s var(--curva) forwards; }
.enviado__titulo { font-size: 28px; font-weight: 600; letter-spacing: -0.025em; color: #fff; }
.enviado__texto { color: rgba(255, 255, 255, 0.66); }

@keyframes st-tilde { to { stroke-dashoffset: 0; } }

/* --- Pie (como el de apple.com) ------------------------------------------- */
.st-pie { padding: 22px 0 30px; background: var(--fondo); color: var(--texto-2); font-size: 12px; line-height: 1.4; letter-spacing: -0.01em; }
.st-pie__nota { padding-bottom: 14px; border-bottom: 1px solid var(--linea); }
.st-pie__fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 14px; }
.st-pie__enlaces { display: flex; flex-wrap: wrap; }
.st-pie__enlaces a { padding: 0 10px; border-right: 1px solid var(--linea); color: #424245; }
.st-pie__enlaces a:first-child { padding-left: 0; }
.st-pie__enlaces a:last-child { border-right: 0; }
.st-pie__enlaces a:hover { color: var(--texto); }

/* --- WhatsApp flotante ---------------------------------------------------- */
/* Por debajo de la barra (120) y de su menú. Se esconde cuando el contacto,
   que tiene su propio botón, está en pantalla. */
.st-wa {
  position: fixed;
  right: clamp(14px, 2.5vw, 28px);
  bottom: clamp(14px, 2.5vw, 28px);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--texto);
  transition: opacity 0.35s, transform 0.35s var(--curva), visibility 0s;
}
.st-wa--oculto { opacity: 0; transform: translateY(14px); visibility: hidden; transition: opacity 0.35s, transform 0.35s var(--curva), visibility 0s 0.35s; }
.st-wa__rotulo {
  padding: 9px 15px;
  border-radius: 980px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: opacity 0.3s, transform 0.3s var(--curva);
}
/* En la portada queda solo el botón redondo: el cartel tapaba los compromisos */
.st-wa--compacto .st-wa__rotulo { opacity: 0; transform: translateX(10px); pointer-events: none; }
.st-wa__boton {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.38);
  transition: transform 0.25s var(--curva);
}
.st-wa__boton .st-ic { width: 28px; height: 28px; }
.st-wa:hover .st-wa__boton { transform: scale(1.07); }

/* --- En la vista previa del editor ---------------------------------------- */
/* Se recarga seguido (fotos, orden, listas): lo que entra animado ya está en
   su lugar, así no parpadea cada vez. Lo que se mueve siempre (ondas, video,
   mapa) sigue moviéndose. */
.st-vista [data-revelar] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
.st-vista .st-entra,
.st-vista .ss-entra { animation: none !important; }
html.st-vista { scroll-behavior: auto; }

/* --- Pantallas más chicas ------------------------------------------------- */
@media (max-width: 1068px) {
  .st-servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-proceso { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .st-proceso::before,
  .st-proceso::after { top: 22px; bottom: 22px; left: 21px; right: auto; width: 2px; height: auto; }
  .st-proceso::after { transform: scaleY(0); transform-origin: top; }
  .st-proceso.visible::after,
  html:not(.js) .st-proceso::after { transform: scaleY(1); }
  .st-paso { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; }
  .st-paso__n { grid-row: span 2; }
  .st-paso h3 { margin-top: 10px; }
  .st-promesa__escena { height: 248px; }
  .st-orillas__grilla { grid-template-columns: minmax(0, 1fr); }
  .st-mapa { width: min(720px, 100%); margin-inline: auto; }
  .st-orillas__info { width: min(560px, 100%); margin-inline: auto; }
  html:not(.js) .st-orillas__info { width: 100%; }
}

@media (max-width: 960px) {
  /* Las tres tarjetas, una abajo de la otra: la escena a la izquierda */
  .st-promesas { grid-template-columns: minmax(0, 1fr); width: min(620px, 100%); margin-inline: auto; }
}

@media (min-width: 835px) {
  .nb__menu { display: none; }
}

@media (max-width: 834px) {
  :root { --alto-barra: 48px; }
  .nb__links,
  .nb__desplegable,
  .nb-velo { display: none; }
  .nb__fila { justify-content: space-between; }
  .nb__cta { margin-left: auto; }
  .nb__boton { display: block; }
  .st-junto__grilla,
  .st-nos__grilla,
  .st-contacto__grilla { grid-template-columns: minmax(0, 1fr); }
  .st-hero__icono .st-alu { --tam: 116px; }
}

@media (max-width: 640px) {
  /* Los servicios, en un carrusel que se pasa con el dedo, como en
     apple.com: asoma la que sigue, para que se note que hay más. Llega hasta
     los bordes de la pantalla (los 22px del contenedor). Las tarjetas
     aparecen sin subir: dentro del carrusel, subir haría lugar para bajar. */
  .st-servicios {
    display: flex;
    gap: 12px;
    margin: -8px -22px -16px;
    padding: 8px 22px 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 22px;
    scrollbar-width: none;
  }
  .st-servicios::-webkit-scrollbar { display: none; }
  .st-servicio { flex: 0 0 calc(100% - 40px); scroll-snap-align: start; }
  .js .st-servicio[data-revelar] { transform: none; }
  /* En la portada del celular el botón de WhatsApp tapaba el «Deslizá» */
  .st-wa--compacto { opacity: 0; transform: translateY(14px); visibility: hidden; transition: opacity 0.35s, transform 0.35s var(--curva), visibility 0s 0.35s; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .st-ad { aspect-ratio: 4 / 3.4; border-radius: 22px; }
  .st-caso__cuerpo { padding: 22px 24px 26px; }
  .st-caso__titulo { font-size: 24px; }
  .st-tienda { height: 44px; padding: 0 14px 0 11px; }
  .st-tienda__texto { font-size: 17px; }
  /* La hoja del celular: una columna, con la foto abajo del título. Las dos
     columnas de la compu se deshacen (display: contents) y cada pieza va en
     su lugar con order. */
  /* Casi todo el alto (lo que dejan ver las barras de Safari): arriba queda
     una franja del velo, como en las hojas de iOS */
  .st-hoja { width: 100%; max-width: 100%; max-height: calc(100vh - 28px); max-height: calc(100svh - 28px); margin: auto 0 0; border-radius: 28px 28px 0 0; }
  .st-hoja[open] { animation: st-hoja-sube 0.5s var(--curva); }
  .st-hoja__ficha { display: flex; flex-direction: column; padding: 30px 22px 22px; }
  .st-hoja__lado,
  .st-hoja__info { display: contents; }
  .st-hoja__cabeza { order: 1; gap: 6px; margin-bottom: 18px; }
  .st-hoja__lado .st-ficha__foto { order: 2; margin-bottom: 18px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
  .st-hoja__lado .st-ficha__rotulo { order: 3; }
  .st-hoja__lado .st-ficha__incluye { order: 4; margin-bottom: 14px; }
  .st-hoja__cuerpo { order: 5; }
  .st-hoja__ficha .st-hoja__pie { order: 6; padding-top: 14px; }
  .st-hoja .st-ajuste--grande { --tam: 56px; }
  .st-hoja__titulo { margin-top: 4px; font-size: 28px; }
  .st-hoja__texto { font-size: 16px; line-height: 1.45; }
  .st-hoja__precio { font-size: 18px; }
  .st-hoja .st-pastilla--chica { min-height: 40px; }
  .st-hoja--justa .st-hoja__ficha { padding: 24px 20px 18px; }
  .st-hoja--justa .st-hoja__cabeza { margin-bottom: 12px; }
  .st-hoja--justa .st-hoja__lado .st-ficha__foto { margin-bottom: 12px; }
  .st-hoja--justa .st-ajuste--grande { --tam: 46px; }
  .st-hoja--justa .st-hoja__titulo { font-size: 25px; }
  .st-hoja__ejemplo { padding: 60px 22px 20px; }
  .st-hoja--justa .st-hoja__ejemplo { padding: 56px 20px 16px; }
  /* Compacta: para los celulares chicos, con las barras de Safari a la vista */
  .st-hoja--mini .st-hoja__ficha { padding: 18px 18px 14px; }
  .st-hoja--mini .st-hoja__cabeza { margin-bottom: 10px; }
  .st-hoja--mini .st-ajuste--grande { --tam: 38px; }
  .st-hoja--mini .st-hoja__titulo { font-size: 23px; }
  .st-hoja--mini .st-hoja__precio { font-size: 16.5px; }
  .st-hoja--mini .st-hoja__lado .st-ficha__foto { margin-bottom: 10px; }
  .st-hoja--mini .st-hoja__lado .st-ficha__incluye { margin-bottom: 8px; }
  .st-hoja--mini .st-plazo { padding: 9px 0 7px; }
  .st-hoja--mini .st-ficha__dato { padding: 8px 0; }
  .st-hoja--mini .st-hoja__ficha .st-hoja__pie { padding-top: 10px; }
  .st-hoja--mini .st-hoja__ejemplo { padding: 52px 18px 14px; }
  .st-wa__rotulo { display: none; }
  .st-wa__boton { width: 52px; height: 52px; }
  .st-desl__texto { padding-left: 62px; padding-right: 14px; font-size: 15px; }
  .st-desl__flechas { display: none; }
  .st-nos__cifras { gap: 12px; }
  .st-nos__cifra { min-height: 150px; padding: 20px; border-radius: 24px; }
  .st-nos__prosa { font-size: 17px; }
  .st-mv__texto { margin-top: 30px; }
  .st-promesa { padding: 12px 12px 28px; }
  .st-promesa__escena { height: 236px; margin-bottom: 12px; }
  .st-promesa__titulo,
  .st-promesa__texto { padding: 0 10px; }
  .st-mapa { min-height: 0; aspect-ratio: 1 / 1.02; }
  .st-mapa__pin { padding: 6px 10px 7px; font-size: 12px; }
  .st-mapa__pin span { font-size: 10.5px; }
  html:not(.js) .st-orillas__info { grid-template-columns: minmax(0, 1fr); }
  .st-pais__cuerpo { padding: 20px 20px 22px; }
}

@keyframes st-hoja-sube { from { transform: translateY(100%); } to { transform: none; } }

/* --- Con «reducir movimiento»: todo quieto -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .st-servicio__escena *,
  .st-servicio__escena::before { animation: none !important; }
  .st-escena__dibujo,
  .st-servicio__escena .st-escena__placa { transition: none !important; }
  .st-entra,
  .st-alu__flota,
  .st-alu__pieza,
  .st-alu__reflejo,
  .st-alu__brillo,
  .st-alu__sombra,
  .st-desl__brillo,
  .st-desl__flecha,
  .st-hoja[open],
  .st-nos__luces i,
  .st-pais--activo,
  .st-caso--destacado,
  .st-vivo::after,
  .contacto__caja.enviado-ok .enviado { animation: none; }
  .js [data-revelar] { opacity: 1; transform: none; filter: none; transition: none; }
  .st-hoja--anima *,
  .st-hoja--anima .st-plazo__desde::after { animation: none !important; }
  .st-desl .st-desl__perilla,
  .st-desl .st-desl__relleno { transition: none !important; }
  .st-alu,
  .st-vidrio,
  .st-promesa__escena > *,
  .nb__desplegable,
  .nb__hoja,
  .nb__hoja li,
  .nb__panel,
  .nb-velo,
  .st-segmento__marca,
  .js .elegir__panel,
  .elegir__flecha { transition: none !important; }
  .enviado__circulo path { stroke-dashoffset: 0; }
}

/* --- Con «reducir transparencia»: superficies sólidas --------------------- */
@media (prefers-reduced-transparency: reduce) {
  .nb::before { background: #fafafc; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nb[data-tema="oscuro"]::before { background: #161617; }
  .nb__desplegable::before { background: #fafafc; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nb[data-tema="oscuro"] .nb__desplegable::before { background: #161617; }
  .nb-velo { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 0, 0, 0.3); }
  .st-vidrio-boton,
  .st-desl__pista,
  .st-contacto__caja { background-color: #26272b; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .st-desl--claro .st-desl__pista { background-color: var(--fondo); }
  .st-mapa__pin,
  .st-mapa__hora { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .st-mapa__pin--activo { background: var(--azul); }
  .st-vidrio { background: #1c1d21; -webkit-backdrop-filter: none; backdrop-filter: none; }
}