/* onda — el sistema del sitio nuevo de Escalable (8-nov-2026), con la direccion visual
   calcada de hyperflow.co (1-nov-2026). Orden: tokens, base, cabecera, piezas compartidas
   (pildora, circulo, marco, linea fina), inicio, paginas interiores, portafolio, legales y
   las media queries al final. El diagnostico tiene lo suyo en diagnostico.css.
   Las medidas y los colores del inicio calcan la referencia a proposito: antes de mover
   uno, compara contra hyperflow.co al mismo ancho. La excepcion son las alturas: desde el
   10-nov-2026 las secciones del inicio miden su contenido, por pedido de Sebastian (ver «El
   inicio con menos aire»). No se vuelven a una pantalla por seccion para calzar con la
   referencia. */

:root {
  color-scheme: dark;
  --fondo: #09070e;
  --texto: #f4f1f6;
  --tenue: #a8a2b2;
  --durazno: #f4bda6;
  --lila: #c7a2ed;
  --linea: #ffffff18;
  /* El fondo de los paneles (marcos, pildoras, chips) y uno mas hondo para lo que va dentro o
     debajo de un panel (pantallas, celdas, el relleno de los bordes en degradado) */
  --panel: #100c18;
  --panel-hondo: #0d0a14;
  /* Dos tonos de texto entre --texto y --tenue: el de filas y listas, y el de los rotulos en mono */
  --claro: #ddd5e5;
  --apagado: #8e86a0;
  /* La mono del sistema: no se descarga otra fuente */
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  line-height: 1.6;
}
button, input, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 2px solid var(--durazno);
  outline-offset: 5px;
}
/* figure trae margen de fabrica (1em 40px): cada grafico y cada pieza lo reseteaba por su cuenta */
h1, h2, h3, p, figure { margin: 0; }

/* Fondo: el canvas de la onda y una vineta fija encima */
#onda { position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; }
.vineta {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 35%, transparent 10%, #09070e30 65%, #09070e70);
}

/* Cabecera */
.cabecera {
  position: fixed; top: 0; left: 0; z-index: 10;
  width: 100%;
  padding: 27px 5.5%;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(var(--fondo), #09070e00);
}
/* Al bajar, el fondo con desenfoque se desvanece hacia abajo en vez de cortar con una linea
   (10-nov-2026, pedido de Sebastian). Va en ::before para poder enmascararlo: baja 40 px bajo
   la barra y la mascara lo lleva a transparente. Si un navegador no enmascara el desenfoque,
   queda la barra de antes, sin la linea. */
.cabecera::before {
  content: ''; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none;
  background: #09070ed9;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(#000 calc(100% - 64px), #0000);
  mask-image: linear-gradient(#000 calc(100% - 64px), #0000);
  opacity: 0;
  transition: opacity .3s;
}
.cabecera.con-fondo { background: none; }
.cabecera.con-fondo::before { opacity: 1; }
.marca img { width: 118px; height: auto; display: block; }
.cabecera__derecha { display: flex; gap: 32px; align-items: center; }
.menu { display: flex; gap: 32px; align-items: center; font-size: 12px; font-weight: 400; }
.menu a { color: #bdb7c8; }
.menu a:hover, .cabecera__derecha > .boton:hover { color: var(--durazno); }
.menu a[aria-current="page"] { color: var(--durazno); }

/* Menu del telefono: el boton y el panel solo existen bajo 700 px (ver la media query).
   El boton tambien es .boton, que va mas abajo: por eso el selector lleva .cabecera. */
.cabecera .menu-boton, .panel-menu { display: none; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 30px;
  border: 1px solid #e6d1cf80;
  padding: 12px 24px;
  border-radius: 40px;
  background: transparent;
  color: var(--texto);
  font-size: 13px; font-weight: 400;
  transition: background .25s, transform .25s;
}
.boton:hover { background: #f4bda615; transform: translateY(-2px); }
.boton--chico { padding: 9px 18px; font-size: 12px; }

/* ---------- Piezas compartidas ----------
   Cada una se define aca una vez; el inicio, el portafolio y el diagnostico solo las usan. */

/* Pildora: los filtros del portafolio y de las mejoras del diagnostico */
.pildora {
  border: 1px solid #ffffff25; border-radius: 40px;
  background: var(--panel); color: var(--tenue);
  padding: 9px 18px; font-size: 12px;
  transition: border-color .25s, color .25s;
}
.pildora span { color: var(--apagado); margin-left: 6px; font-variant-numeric: tabular-nums; }
.pildora:hover { border-color: var(--durazno); color: var(--texto); }
.pildora[aria-pressed="true"] { border-color: #e6d1cf80; color: var(--texto); background: #f4bda612; }

/* Circulo: flechas del carrusel y del visor, cerrar el aviso de limite. --tam fija el lado
   (34 px si no se dice); .circulo--texto lo estira a una pildora corta (pausar, cerrar). */
.circulo {
  width: var(--tam, 34px); height: var(--tam, 34px);
  border: 1px solid #ffffff25; border-radius: 50%;
  background: var(--panel); color: var(--texto);
}
.circulo:hover { border-color: var(--durazno); }
.circulo--texto { width: auto; border-radius: 20px; }

/* Marco: borde fino y fondo violeta de las capturas, los videos y las piezas */
.marco { background: var(--panel); border: 1px solid #ffffff18; border-radius: 10px; overflow: hidden; }

/* Linea fina arriba: el separador de todo el sistema (el diagnostico agrega los suyos) */
.equipo article, .proceso, .columnas > article, .datos li { border-top: 1px solid var(--linea); }

/* Escenas: cada una deja la onda en otra posicion, segun cuanto se ha bajado */
.escena {
  min-height: 96svh;
  position: relative;
  display: flex; align-items: center;
  padding: 100px 11%;
  isolation: isolate;
}
/* Portadas (inicio y diagnostico): el contenido parte arriba en vez de centrado. Sebastian las
   pidio un 30% mas arriba (9-nov-2026): con estos valores el contenido queda al 70% de la
   altura a la que quedaba centrado, medido a 1440x900, 1024x768 y 375x812. En el diagnostico la
   seccion sigue midiendo 100svh; en el inicio mide su contenido (10-nov-2026, ver «El inicio
   con menos aire»). */
.portada { min-height: 100svh; align-items: flex-start; padding-top: max(130px, 22svh); }
.hero-diagnostico .portada { padding-top: max(130px, 19svh); }
.centro { text-align: center; }
.escena.centro { justify-content: center; }
/* Centrado siempre (10-nov-2026): sin el margen automatico, una escena con el texto a la
   izquierda quedaba pegada al relleno izquierdo en pantallas anchas («Salimos a vender» a
   1920 px: 288 px a la izquierda y 452 a la derecha). */
.contenido { width: 100%; max-width: 1080px; margin-inline: auto; }

/* Tipografia */
h1, h2 { font-weight: 300; letter-spacing: -.055em; line-height: 1.13; }
h1 { font-size: clamp(48px, 5.2vw, 82px); }
h2 { font-size: clamp(42px, 4.8vw, 72px); }
em {
  font-weight: 300;
  font-style: italic;
  background: linear-gradient(105deg, var(--durazno), var(--lila));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h3 { font-size: clamp(22px, 2vw, 30px); font-weight: 300; letter-spacing: -.03em; line-height: 1.3; margin-top: 20px; }
.antetitulo {
  font-size: 10px; font-weight: 500;
  letter-spacing: .23em; line-height: 1.6;
  text-transform: uppercase;
  color: var(--tenue);
  margin-bottom: 25px;
}
.durazno { color: var(--durazno); }
.lila { color: var(--lila); }
.bajada { margin-top: 23px; color: #c4bece; font-size: 16px; }
.cuerpo { color: #bcb5c7; font-size: 16px; line-height: 1.9; max-width: 495px; margin-top: 22px; }
.centro .cuerpo { margin-left: auto; margin-right: auto; max-width: 580px; }

/* Campo del hero y del cierre */
.campo {
  display: flex; align-items: center; gap: 15px;
  max-width: 650px;
  margin: 35px auto 0;
  padding: 13px 15px 13px 22px;
  border: 1px solid #ffffff18;
  background: linear-gradient(120deg, #15121d, #0d0c13);
  border-radius: 40px;
  box-shadow: 0 0 40px #0003;
  transition: border-color .3s, box-shadow .3s;
}
.campo:focus-within { border-color: #c7a2ed90; box-shadow: 0 0 30px #c7a2ed12; }
.campo__onda {
  flex-shrink: 0;
  font-size: 38px; line-height: 1; font-weight: 500;
  background: linear-gradient(90deg, var(--durazno), var(--lila));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* La referencia usa un textarea de una fila; este input mide lo mismo y abre el teclado de URL */
.campo input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: none;
  color: var(--texto);
  padding: 7px 0;
  font-size: 14px; line-height: 1.5;
}
.campo input::placeholder { color: #9f99ac; }
.enviar {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%; border: none;
  background: #f4f0f9; color: #0a0810;
  font-size: 23px;
  box-shadow: 0 0 20px #f1e6ff22;
  transition: transform .2s;
}
.enviar:hover { transform: translateY(-2px); background: var(--durazno); }
.nota { font-size: 12px; color: var(--tenue); margin-top: 24px; }
.nota a { border-bottom: 1px solid #b6a3c65c; }
.bajar {
  position: absolute; bottom: 46px; left: 50%;
  transform: translateX(-50%);
  font-size: 11px; color: var(--tenue);
  white-space: nowrap;
}
.bajar span { display: block; margin-top: 10px; font-size: 18px; }

/* Los tres frentes */
.ancla { padding-top: 70px; }
.frente { min-height: 90svh; }
.frente.centro .contenido { max-width: 850px; }
.logro { color: var(--claro); font-size: 14px; margin-top: 27px; padding-top: 21px; position: relative; }
.logro::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 35px; height: 1px;
  background: linear-gradient(90deg, var(--durazno), var(--lila));
}
.centro .logro::before { left: calc(50% - 17px); }
.detalle { display: flex; gap: 15px; flex-wrap: wrap; color: #91899f; font-size: 11px; margin-top: 24px; }
.detalle span + span::before { content: '·'; margin-right: 15px; color: var(--lila); }
.centro .detalle { justify-content: center; }
.enlace {
  display: inline-block;
  font-size: 12px; font-weight: 400;
  border: 0; border-bottom: 1px solid #b6a3c65c;
  background: none;
  padding: 0 0 5px;
  margin-top: 33px;
  color: #ddd3e7;
}
.enlace span { margin-left: 20px; }
.enlace:hover { color: var(--durazno); }

/* El inicio con menos aire (10-nov-2026). Sebastian pidio menos vacio entre secciones: en el
   inicio cada seccion mide su contenido mas --aire arriba y abajo, en vez de una pantalla cada
   una como en la referencia. La portada si mide una pantalla: «Salimos a vender» no se ve al
   cargar, y aparece apenas se baja (lo pidio asi el mismo dia, en la segunda vuelta). Las demas
   paginas siguen con su ritmo: el <main> lleva data-pagina (lo pone generar.py) y esto solo toca
   el del inicio. */
[data-pagina="index"] { --aire: 80px; }
[data-pagina="index"] .portada { padding-bottom: 40px; }
[data-pagina="index"] .frente,
[data-pagina="index"] .bloque,
[data-pagina="index"] .cierre { min-height: 0; padding-top: var(--aire); padding-bottom: var(--aire); }
/* «Tres frentes, una operacion» es el titulo de los frentes: va pegado al primero */
[data-pagina="index"] .ancla { padding-top: 0; }
[data-pagina="index"] .ancla + .frente { padding-top: 32px; }

/* Dos columnas con tope de ancho y centradas: texto y una muestra o un grafico. La usan los
   frentes con muestra del inicio, los pilares de servicios y las secciones con grafico de
   servicios y nosotros (10-nov-2026). Con el tope, el texto no deja una franja vacia a su
   derecha. --invertido pone el grafico a la izquierda; bajo 960 px va una columna, con el texto
   primero. */
.dividido {
  display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 560px); justify-content: center;
  gap: 72px; align-items: center; max-width: 1180px; margin-inline: auto;
}
.dividido--invertido { grid-template-columns: minmax(0, 560px) minmax(0, 500px); }
.dividido--invertido > :last-child { order: -1; }
/* En la columna de texto de 500 px, un titular de seccion a 56 px caia en tres lineas («Nuestra
   forma de trabajar…»): ahi va a 44 px como maximo, dos lineas */
.dividido .titulo-seccion h2 { font-size: clamp(34px, 3.1vw, 44px); }

/* Las muestras: el tablero de prospeccion (9-nov-2026, se quedó el 10-nov-2026; js/prospeccion.js)
   y la semana de redes (10-nov-2026; js/redes.js) del inicio, y el embudo de servicios
   (js/embudo.js). Un .marco con la paleta, una fila de pildoras arriba para elegir la escena,
   filas con un sello de estado y una barra abajo que dice lo que esta pasando. Cada una mide
   siempre lo mismo, asi que no cambia de alto mientras se llena. */
.muestra { font-size: 13px; }
.muestra__opciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 13px 18px; border-bottom: 1px solid var(--linea); }
.muestra__opciones > div { display: flex; flex-wrap: wrap; gap: 6px; }
.muestra__etiqueta, .muestra__pie > span:first-child { font-size: 9.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--tenue); }
.pildora--chica { padding: 6px 12px; font-size: 11px; }
.muestra__fuente { list-style: none; margin: 0; padding: 0; }
/* Sin JS se ve la primera escena tal cual; con JS las listas son solo la fuente */
.muestra__fuente + .muestra__fuente, .js .muestra__fuente { display: none; }
.muestra__fuente li, .fila {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  height: var(--alto-fila); padding: 0 18px;
  border-bottom: 1px solid #ffffff0a;
}
.muestra__fuente li > *, .fila__quien { min-width: 0; }
.muestra__fuente b, .muestra__fuente small, .fila b, .fila small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.muestra__fuente b, .fila b { font-weight: 400; color: var(--claro); }
.muestra__fuente small, .fila small { font-size: 11px; color: #837a91; margin-top: 2px; }
.fila {
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s ease, transform .5s cubic-bezier(.23, 1, .32, 1), background-color .4s ease;
}
.fila--visible { opacity: 1; transform: none; }
.fila--lead { background-color: #f4bda60a; }
.fila--lead::before {
  content: '';
  position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 2px;
  background: linear-gradient(var(--durazno), var(--lila));
}
.sello {
  flex-shrink: 0;
  padding: 5px 10px;
  border: 1px solid #ffffff1f; border-radius: 20px;
  font: 400 10px/1 var(--mono);
  letter-spacing: .06em; text-transform: uppercase;
  color: #6f6880;
  transition: color .3s ease, border-color .3s ease;
}
.sello[data-estado="enviada"], .sello[data-estado="mensaje"], .sello[data-estado="calificado"],
.sello[data-estado="prueba"], .sello[data-estado="respondido"] { color: var(--lila); border-color: #c7a2ed66; }
.sello[data-estado="seguimiento"], .sello[data-estado="pendiente"] { color: var(--apagado); }
.sello[data-estado="respondio"], .sello[data-estado="lead"], .sello[data-estado="agendada"],
.sello[data-estado="activa"], .sello[data-estado="aprobado"] { color: var(--durazno); border-color: #f4bda680; }
/* La hora de llegada, en la bandeja de redes: el mismo lugar que el sello, sin borde */
.sello[data-estado="hora"] { border-color: transparent; padding-right: 0; color: var(--apagado); }
.muestra__pie { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--linea); }
.muestra__paso { font: 400 10.5px/1.4 var(--mono); color: var(--apagado); text-align: right; }

/* El tablero de prospeccion (inicio) y el embudo (servicios): seis filas por escena */
.prospeccion, .embudo { --alto-fila: 58px; }
.muestra__cuerpo { height: calc(6 * var(--alto-fila) + 16px); padding: 8px 0; overflow: hidden; }
.muestra__lista { list-style: none; margin: 0; padding: 0; }

/* La semana de redes: cinco dias arriba (el dia de hoy avanza y cada publicacion sale en su
   dia) y la bandeja abajo, con cinco filas a la vista. Se ajusta al ancho de la muestra y no al
   de la ventana (container queries): entre 961 y 1100 px la muestra es angosta aunque la
   ventana no lo sea. Sin JS se ve solo la gente del primer canal. */
.redes { --alto-fila: 52px; container-type: inline-size; }
.redes__calendario, .redes__bandeja { display: none; }
.js .redes__calendario {
  --relleno: 18px; --hueco-dia: 8px;
  display: block; position: relative;
  padding: 14px var(--relleno) 16px;
  border-bottom: 1px solid var(--linea);
}
.js .redes__bandeja { display: block; height: calc(5 * var(--alto-fila) + 16px); padding: 8px 0; overflow: hidden; }
.redes__semana { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--hueco-dia); list-style: none; margin: 0; padding: 0; }
.redes__semana > li { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.redes__dia {
  padding: 2px 9px 0;
  font: 400 9.5px/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--apagado);
  transition: color .3s ease;
}
.redes__semana > li[data-hoy] .redes__dia { color: var(--texto); }
/* El dia de hoy se marca como una pestaña activa: fondo apenas mas claro y una linea
   arriba. Se desliza de un dia al siguiente (--hoy lo pone redes.js). */
.redes__hoy {
  position: absolute; top: 8px; bottom: 10px; left: var(--relleno);
  width: calc((100% - 2 * var(--relleno) - 4 * var(--hueco-dia)) / 5);
  border-radius: 8px;
  background: #ffffff07;
  opacity: 0;
  transform: translateX(calc(var(--hoy, 0) * (100% + var(--hueco-dia))));
  transition: transform .45s cubic-bezier(.23, 1, .32, 1), opacity .3s ease;
}
.redes__hoy::before {
  content: '';
  position: absolute; left: 10px; right: 10px; top: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--durazno), var(--lila));
}
.redes__hoy--visible { opacity: 1; }
.redes__pieza, .redes__libre { height: 60px; border-radius: 8px; }
.redes__libre { border: 1px solid #ffffff0a; }
.redes__pieza {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 9px 9px 8px;
  border: 1px solid #ffffff1f;
  background: #ffffff05;
  font-size: 12px; line-height: 1.25; color: var(--claro);
  opacity: 0; transform: translateY(4px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.23, 1, .32, 1), border-color .3s ease;
}
.redes__pieza > span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.redes__pieza small {
  font: 400 8.5px/1 var(--mono);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--apagado);
  transition: color .3s ease;
}
.redes__pieza--visible { opacity: 1; transform: none; }
.redes__pieza[data-estado="publicado"] { border-color: #f4bda666; }
.redes__pieza[data-estado="publicado"] small { color: var(--durazno); }
.redes__lista { list-style: none; margin: 0; padding: 0; transition: transform .5s cubic-bezier(.23, 1, .32, 1); }
/* Antes de la primera publicacion la bandeja esta vacia: lo dice, en vez de ser un hueco */
.redes__lista:empty::before {
  content: 'Esperando la primera publicación';
  display: flex; align-items: center; justify-content: center;
  height: calc(5 * var(--alto-fila));
  font: 400 10.5px/1.4 var(--mono);
  color: var(--apagado);
}
/* Muestra angosta: sin el «Programado / Publicado» (no cabe); lo publicado lo dice el borde y un
   punto. Mas angosta aun (telefonos de 360 y 320 px), menos relleno y letra mas chica. */
@container (max-width: 470px) {
  .redes__pieza { height: 46px; padding: 6px 6px 5px; font-size: 11px; }
  .redes__pieza small { display: none; }
  .redes__pieza[data-estado="publicado"]::after {
    content: '';
    position: absolute; right: 5px; bottom: 5px;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--durazno);
  }
  .redes__libre { height: 46px; }
  .redes__dia { padding-inline: 6px; letter-spacing: .1em; }
}
@container (max-width: 340px) {
  .js .redes__calendario { --relleno: 10px; --hueco-dia: 5px; }
  .redes__pieza { padding-inline: 4px; font-size: 10px; }
  .redes__dia { padding-inline: 4px; }
}
@container (max-width: 300px) {
  .redes__pieza { font-size: 9px; }
}

/* En pausa o al cambiar de escena en pausa: el estado final aparece sin transiciones */
.muestra--quieto .fila, .muestra--quieto .sello, .muestra--quieto .redes__pieza,
.muestra--quieto .redes__pieza small, .muestra--quieto .redes__hoy, .muestra--quieto .redes__dia,
.muestra--quieto .redes__lista { transition: none; }

/* Bloques con padding fijo: equipo, trabajo y preguntas */
.bloque { padding: 120px 11%; }
.equipo { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; margin: 75px auto 45px; max-width: 1050px; }
.equipo article { display: flex; gap: 26px; padding-top: 28px; }
.inicial { font-size: 65px; line-height: 1.1; font-weight: 300; color: #c7a2ed77; }
.equipo h3 { margin-top: 0; font-size: 26px; }
.equipo .antetitulo { font-size: 9px; margin: 9px 0 15px; }
.equipo p:not(.antetitulo) { font-size: 13px; color: var(--tenue); line-height: 1.9; }
.discreto { font-size: 13px; color: var(--tenue); }
.equipo--tres { grid-template-columns: repeat(3, 1fr); gap: 50px; max-width: 1180px; }

.carrusel { margin: 55px 0 0; }
.carrusel__escenario { aspect-ratio: 1072 / 581; display: flex; justify-content: center; align-items: center; }
/* Las capturas del portafolio son 4:3: cover arriba llena el escenario y corta por abajo */
.carrusel__escenario img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; }
.carrusel__escenario { position: relative; }
/* fundido() de onda.js: dos capas en el mismo marco. La que llega aparece encima desde un leve
   desenfoque y un poco mas grande, y se asienta despacio; la otra se apaga cuando ya quedo
   tapada. Dura lo que pide cada uno (--fundido), con una curva seno que arranca y termina sin
   golpe (11-nov-2026: Sebastian lo encontro «muy golpeado» al lado de la onda, que va lenta).
   Lleva .obra__marco img.fundido porque la regla del zoom con el mouse (.obra__marco img, mas
   abajo) le pisaba la transicion: en la franja la foto cambiaba de golpe. */
.fundido, .obra__marco img.fundido {
  position: absolute; inset: 0; opacity: 0; filter: blur(8px); transform: scale(1.04);
  will-change: opacity, filter, transform;
  transition:
    opacity var(--fundido, .8s) cubic-bezier(.37, 0, .63, 1),
    filter var(--fundido, .8s) cubic-bezier(.37, 0, .63, 1),
    transform calc(var(--fundido, .8s) * 1.6) cubic-bezier(.37, 0, .63, 1);
}
.fundido.visible, .obra__marco img.fundido.visible { opacity: 1; filter: none; transform: none; }
/* cambiarTexto() de onda.js: el pie se apaga, cambia y vuelve */
.js .carrusel__nombre, .js .carrusel__contexto { transition: opacity .3s cubic-bezier(.37, 0, .63, 1); }
.cambiando { opacity: 0; }
.fundido.arriba { z-index: 1; }
.carrusel figcaption {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  font-size: 11px; color: var(--tenue);
  padding: 16px 0;
}
.carrusel__nombre { font-size: 15px; color: var(--texto); }
.carrusel__contexto { display: block; font-size: 10px; color: #837a91; margin-top: 4px; }
.carrusel__controles { display: flex; align-items: center; gap: 14px; }
.carrusel__pausa { font-size: 10px; padding: 0 13px; color: var(--tenue); }
.carrusel__cuenta { font-size: 10px; font-variant-numeric: tabular-nums; }

.proceso { margin: 70px 0 0; padding-top: 30px; }
.proceso > div { display: flex; justify-content: space-between; gap: 25px; }
.proceso p:not(.antetitulo) { font-size: 14px; }
.proceso b { font-weight: 300; color: var(--lila); margin-right: 15px; }

/* Dos columnas (10-nov-2026), cada una un <div> que se abre por su cuenta: abrir una pregunta
   empuja solo las de su columna. Bajo 960 px quedan en una: a 768 px cada columna media 268 px y
   casi todas las preguntas se partian en dos lineas. */
.preguntas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; align-items: start; max-width: 1080px; margin: 48px auto 0; }
details { border-bottom: 1px solid var(--linea); padding: 22px 0; }
summary { font-size: 16px; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary span { font-size: 20px; color: var(--lila); font-weight: 300; }
details[open] summary span { transform: rotate(45deg); }
details p { font-size: 14px; color: var(--tenue); max-width: 690px; line-height: 1.9; padding: 20px 35px 2px 0; }
details a { border-bottom: 1px solid #b6a3c65c; }
details a:hover { color: var(--durazno); }

.cierre { min-height: 90svh; }
.cierre .boton { margin-top: 15px; }
.aviso { font-size: 10px; margin-top: 28px; color: #776e85; }

/* Pie */
.pie {
  margin: 0 6%;
  padding: 35px 0 45px;
  border-top: 1px solid var(--linea);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--tenue);
}
.pie img { height: auto; display: block; }
.pie p { font-size: 10px; margin-top: 10px; }
.pie p a { border-bottom: 1px solid #b6a3c65c; }
.pie > div:last-child { display: flex; gap: 24px; align-items: center; }
.pie button { border: 0; background: none; color: inherit; font-size: 11px; }
.pie__legales { display: flex; gap: 18px; }
/* Area tactil de 24 px como minimo (WCAG 2.5.8): el texto mide 18 */
.pie__legales a, .pie > div:last-child > a, .pie button { display: inline-block; padding: 7px 0; }
.pie a:hover { color: var(--durazno); }
.pie__legales a[aria-current="page"] { color: var(--texto); }

/* ---------- Paginas interiores ----------
   Mismas piezas que el inicio (linea fina arriba, antetitulo, cursiva con degradado,
   pills): no hay tarjetas, sombras ni iconos nuevos. */
/* 147 = 210 menos un 30% (9-nov-2026, ver .portada) */
.cabeza { padding: 147px 11% 60px; text-align: center; }
.cabeza h1 { font-size: clamp(44px, 5vw, 78px); }
.cabeza .bajada { max-width: 640px; margin: 26px auto 0; line-height: 1.8; }
.cabeza .detalle { justify-content: center; margin-top: 30px; }
/* El boton de la 404 (11-nov-2026), la unica cabeza que lleva uno */
.cabeza__boton { margin-top: 34px; }

.titulo-seccion { max-width: 760px; }
.titulo-seccion.centro { margin: 0 auto; }
.titulo-seccion h2 { font-size: clamp(36px, 3.8vw, 56px); }

.columnas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; margin: 70px auto 0; max-width: 1180px; }
.columnas--dos { grid-template-columns: 1fr 1fr; gap: 56px 70px; max-width: 1050px; }
.columnas--cuatro { grid-template-columns: repeat(4, 1fr); gap: 34px; }
.columnas > article { padding-top: 28px; }
.columnas .antetitulo { margin-bottom: 16px; }
.columnas h3 { margin-top: 0; font-size: 24px; }
.columnas p:not(.antetitulo) { font-size: 14px; color: var(--tenue); line-height: 1.85; margin-top: 14px; }
.columnas .antetitulo + p:not(.antetitulo) { margin-top: 0; }
.columnas p a { color: var(--claro); border-bottom: 1px solid #b6a3c65c; }
.columnas p a:hover { color: var(--durazno); }

.lista { list-style: none; margin: 20px 0 0; padding: 0; }
.lista li { position: relative; padding: 9px 0 9px 26px; font-size: 13px; color: var(--claro); border-bottom: 1px solid #ffffff0d; }
.lista li::before {
  content: '';
  position: absolute; left: 0; top: 19px;
  width: 12px; height: 1px;
  background: linear-gradient(90deg, var(--durazno), var(--lila));
}
.columnas .lista { margin-top: 18px; }

/* ---------- Graficos de seccion (10-nov-2026) ----------
   Sebastian pidio un elemento grafico en las secciones de texto de servicios, el diagnostico y
   nosotros. Se dibujan en codigo con el sistema de las muestras (marco, mono, sellos, la linea
   en degradado): calzan exacto con la pagina, pesan casi nada y se leen en cualquier pantalla.
   Lo unico que no es dibujo son las piezas del portafolio, que son trabajo real. El contenido es
   de ejemplo y lo dice cada grafico; ninguno lleva cifras. Las fotos de equipo de ../images
   (nosotros-hero, equipo-*) son generadas y muestran gente que no es el equipo: no se usan. */

/* Servicios, «Marketing digital, diseño y manejo de redes»: cada columna abre con su panel */
.columnas--panel > article { border-top: 0; padding-top: 0; }
.panel { margin: 0 0 26px; height: 200px; display: flex; flex-direction: column; }
.panel__cabeza {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--linea);
  font: 400 9.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--apagado);
}
.panel__cabeza span:first-child { color: var(--claro); }
.panel__filas { list-style: none; margin: 0; padding: 4px 0; }
.panel__filas li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 50px; padding: 0 16px; border-bottom: 1px solid #ffffff0a;
  font-size: 12.5px; color: var(--claro);
}
.panel__filas li:last-child { border-bottom: 0; }
.panel__filas li > span:first-child { min-width: 0; }
.panel__filas small { display: block; margin-top: 2px; font-size: 10.5px; color: #837a91; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel__piezas { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px 12px 0; }
.panel__piezas img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.panel__pie { padding: 10px 16px 12px; font: 400 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--apagado); }

/* Servicios, «Agentes de IA y automatizaciones»: un flujo de ejemplo, del formulario a tu equipo.
   El agente no tiene una tarea concreta (decision de Sebastian del 9-nov-2026): aplica las reglas
   que se definen con el cliente. Se llena una vez al aparecer, paso por paso; sin JS o con
   movimiento reducido aparece lleno. En servicios lo unico que se mueve en ciclo es el embudo. */
.flujo__pasos { list-style: none; margin: 0; padding: 16px 20px 8px; }
.flujo__pasos li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 72px; padding-left: 30px; }
.flujo__pasos li:nth-child(1) { --espera: 600ms; }
.flujo__pasos li:nth-child(2) { --espera: 1050ms; }
.flujo__pasos li:nth-child(3) { --espera: 1500ms; }
.flujo__pasos li:nth-child(4) { --espera: 1950ms; }
.flujo__nodo { position: absolute; left: 0; top: calc(50% - 6px); width: 12px; height: 12px; border: 1px solid #c7a2ed99; border-radius: 50%; }
.flujo__nodo::after {
  content: ''; position: absolute; inset: 2px; border-radius: 50%;
  background: linear-gradient(135deg, var(--durazno), var(--lila));
  transition: opacity .4s ease var(--espera), transform .45s cubic-bezier(.23, 1, .32, 1) var(--espera);
}
/* La cañeria hasta el paso siguiente */
.flujo__pasos li:not(:last-child)::after {
  content: ''; position: absolute; left: 5.5px; top: calc(50% + 8px); width: 1px; height: calc(100% - 16px);
  background: linear-gradient(#c7a2ed99, #f4bda666); transform-origin: top;
  transition: transform .4s ease calc(var(--espera) + 200ms);
}
.flujo__texto { min-width: 0; font-size: 13px; line-height: 1.45; color: var(--claro); }
.flujo__donde { display: block; margin-bottom: 5px; font: 400 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lila); }
.flujo .sello { transition-delay: calc(var(--espera) + 120ms); }
/* Antes de aparecer: nodos vacios, cañerias sin dibujar y sellos apagados */
.js .flujo:not(.visible) .flujo__nodo::after { opacity: 0; transform: scale(.4); }
.js .flujo:not(.visible) .flujo__pasos li::after { transform: scaleY(0); }
.js .flujo:not(.visible) .sello { color: #6f6880; border-color: #ffffff1f; }

/* Servicios, «Primeras semanas»: el plan como carta Gantt. Las barras salen de lo que dicen las
   cuatro columnas de abajo; crecen una vez al aparecer. */
.gantt__filas { list-style: none; margin: 0; padding: 14px 18px 10px; }
.gantt__filas li { display: grid; grid-template-columns: 136px minmax(0, 1fr); align-items: center; gap: 12px; height: 40px; font-size: 12.5px; color: var(--claro); }
.gantt__filas li.gantt__semanas { height: 24px; }
.gantt__pista {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; height: 100%;
  background: linear-gradient(90deg, #ffffff14 1px, transparent 1px) 0 0 / 25% 100%;
}
.gantt__semanas b { padding-left: 8px; font: 400 9.5px/1 var(--mono); letter-spacing: .12em; color: var(--apagado); }
.gantt__pista i {
  height: 8px; margin: 0 6px; border-radius: 4px;
  background: linear-gradient(90deg, var(--durazno), var(--lila));
  transform-origin: left; transition: transform .7s cubic-bezier(.23, 1, .32, 1) var(--espera, 0ms);
}
.gantt__pista .gantt__sigue { margin-right: 0; border-radius: 4px 0 0 4px; background: linear-gradient(90deg, var(--durazno), var(--lila) 65%, #c7a2ed00); }
.desde-1 { grid-column-start: 1; } .desde-2 { grid-column-start: 2; } .desde-3 { grid-column-start: 3; }
.hasta-1 { grid-column-end: 2; } .hasta-2 { grid-column-end: 3; } .hasta-3 { grid-column-end: 4; } .hasta-4 { grid-column-end: 5; }
.gantt__filas li:nth-child(2) { --espera: 500ms; } .gantt__filas li:nth-child(3) { --espera: 650ms; }
.gantt__filas li:nth-child(4) { --espera: 800ms; } .gantt__filas li:nth-child(5) { --espera: 950ms; }
.gantt__filas li:nth-child(6) { --espera: 1100ms; } .gantt__filas li:nth-child(7) { --espera: 1250ms; }
.js .gantt:not(.visible) .gantt__pista i { transform: scaleX(0); }

/* Servicios, «Cómo decidimos el trabajo»: un registro de decisiones con su metrica. Filas fijas
   (.fila, como las muestras), sin movimiento. */
.registro { --alto-fila: 58px; font-size: 13px; }
.registro__filas { list-style: none; margin: 0; padding: 4px 0; }

/* Diagnostico, «Lo que Google ve»: un sitio en computador y en celular, un barrido que lo recorre
   y cuatro hallazgos numerados. Es lo unico que se mueve en ciclo en el diagnostico; en pausa o
   con movimiento reducido queda quieto, con los cuatro hallazgos a la vista. */
.escaner { max-width: 980px; margin: 56px auto 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.escaner > .muestra__pie { grid-column: 1 / -1; }
.escaner__vista { position: relative; padding: 24px 22px 28px; border-right: 1px solid var(--linea); }
.escaner__pantalla { position: relative; overflow: hidden; border: 1px solid #ffffff1f; border-radius: 8px; background: var(--panel-hondo); margin-right: 44px; }
.escaner__url { position: relative; margin: 0; padding: 8px 12px; border-bottom: 1px solid #ffffff14; font: 400 10px/1 var(--mono); color: var(--apagado); }
.escaner__sitio { display: grid; gap: 10px; padding: 16px 16px 20px; }
.escaner__sitio i, .escaner__celular i { position: relative; display: block; border-radius: 4px; background: #ffffff10; }
.escaner .e-menu { height: 8px; background: linear-gradient(90deg, #ffffff1f 0 16%, transparent 16% 62%, #ffffff14 62%); }
.escaner .e-titulo { height: 16px; width: 70%; background: #ffffff1f; }
.escaner .e-linea { height: 7px; width: 88%; }
.escaner .e-linea--corta { width: 54%; }
.escaner .e-boton { height: 18px; width: 30%; border: 1px solid #c7a2ed66; background: transparent; border-radius: 9px; }
.escaner .e-imagen { height: 74px; }
/* Las marcas numeradas, iguales a las de la lista de hallazgos */
.escaner__marca, .escaner__hallazgos b {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 50%;
  font: 400 9.5px/1 var(--mono); color: #09070e; background: var(--durazno);
}
.escaner__marca { position: absolute; right: -6px; top: -7px; }
.escaner__marca--lila, .escaner__hallazgos li:nth-child(n+3) b { background: var(--lila); }
.escaner__url .escaner__marca { right: 8px; top: 3px; }
/* La de la imagen va a la izquierda: a la derecha la tapa el celular */
.escaner .e-imagen .escaner__marca { right: auto; left: -7px; }
.escaner__celular {
  position: absolute; right: 18px; bottom: 16px; width: 82px; height: 150px;
  display: grid; align-content: start; gap: 6px; padding: 18px 8px 8px;
  border: 1px solid #ffffff2b; border-radius: 13px; background: var(--panel-hondo);
}
.escaner__celular .e-titulo { height: 9px; width: 80%; }
.escaner__celular .e-linea { height: 5px; }
.escaner__celular .e-boton { height: 11px; width: 55%; }
.escaner__celular .e-imagen { height: 40px; }
.escaner__barrido {
  position: absolute; left: 0; right: 0; top: 0; height: 46px;
  background: linear-gradient(#f4bda600, #f4bda61a); border-bottom: 1px solid #f4bda6b3;
  opacity: 0; pointer-events: none;
  animation: barrido 5s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes barrido {
  0% { transform: translateY(-46px); opacity: 0; }
  8% { opacity: 1; }
  70% { transform: translateY(260px); opacity: 1; }
  78%, 100% { transform: translateY(260px); opacity: 0; }
}
.escaner__hallazgos { list-style: none; margin: 0; padding: 22px 24px; display: grid; align-content: center; gap: 18px; }
.escaner__hallazgos li { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--claro); animation: hallazgo 5s ease infinite; }
.escaner__hallazgos li > span > span { display: block; margin-bottom: 3px; font: 400 9.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.escaner__hallazgos li:nth-child(1) { animation-name: hallazgo1; }
.escaner__hallazgos li:nth-child(2) { animation-name: hallazgo2; }
.escaner__hallazgos li:nth-child(3) { animation-name: hallazgo3; }
.escaner__hallazgos li:nth-child(4) { animation-name: hallazgo4; }
@keyframes hallazgo1 { 0%, 16% { opacity: .3; } 22%, 92% { opacity: 1; } 100% { opacity: .3; } }
@keyframes hallazgo2 { 0%, 30% { opacity: .3; } 36%, 92% { opacity: 1; } 100% { opacity: .3; } }
@keyframes hallazgo3 { 0%, 44% { opacity: .3; } 50%, 92% { opacity: 1; } 100% { opacity: .3; } }
@keyframes hallazgo4 { 0%, 58% { opacity: .3; } 64%, 92% { opacity: 1; } 100% { opacity: .3; } }

/* Nosotros, «Nuestra forma de trabajar»: el tablero del proyecto. Una tarjeta viaja de
   «Acordado» a «Hecho» en ciclo (lo unico que se mueve en nosotros); en pausa o con movimiento
   reducido queda en «Hecho». */
.tablero { container-type: inline-size; }
.tablero__columnas {
  --hueco: 10px; --relleno: 16px; --alto-tarjeta: 62px;
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--hueco); padding: var(--relleno);
}
/* Titulo (16) + hueco (10) + tarjeta + hueco (10) + el lugar de la que viaja */
.tablero__columna { display: flex; flex-direction: column; gap: 10px; min-height: calc(36px + 2 * var(--alto-tarjeta)); }
.tablero__titulo { height: 16px; margin: 0; font: 400 9.5px/16px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--apagado); }
.tablero__tarjeta {
  display: block; height: var(--alto-tarjeta); padding: 10px 12px; overflow: hidden;
  border: 1px solid #ffffff1f; border-radius: 8px; background: #ffffff05;
  font-size: 12.5px; line-height: 1.35; color: var(--claro);
}
.tablero__tarjeta small { display: block; margin-top: 6px; font: 400 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--apagado); }
.tablero__tarjeta--hecha, .tablero__viajera { border-color: #f4bda666; }
.tablero__viajera {
  position: absolute; left: var(--relleno); top: calc(var(--relleno) + 36px + var(--alto-tarjeta));
  width: calc((100% - 2 * var(--relleno) - 2 * var(--hueco)) / 3);
  background: #15101e;
  transform: translateX(calc(2 * (100% + var(--hueco))));
  animation: viaje 8s cubic-bezier(.23, 1, .32, 1) infinite;
}
@keyframes viaje {
  0% { transform: translateX(0); opacity: 0; border-color: #ffffff1f; }
  8%, 26% { transform: translateX(0); opacity: 1; border-color: #ffffff1f; }
  38%, 56% { transform: translateX(calc(100% + var(--hueco))); opacity: 1; border-color: #c7a2ed80; }
  68%, 90% { transform: translateX(calc(2 * (100% + var(--hueco)))); opacity: 1; border-color: #f4bda680; }
  100% { transform: translateX(calc(2 * (100% + var(--hueco)))); opacity: 0; border-color: #f4bda680; }
}

/* Tablero angosto (teléfono, y entre 961 y 1100 px): tarjetas mas altas, de dos o tres lineas */
@container (max-width: 470px) {
  .tablero__columnas { --hueco: 6px; --relleno: 12px; --alto-tarjeta: 86px; }
  .tablero__tarjeta { padding: 9px; font-size: 11.5px; }
}
@container (max-width: 300px) {
  .tablero__tarjeta { padding: 8px 7px; }
  .tablero__tarjeta small { font-size: 8px; letter-spacing: .06em; }
}


/* Lo que se mueve en ciclo se detiene con «Pausar movimiento»: queda el estado final */
[data-movimiento="pausado"] .escaner__barrido, [data-movimiento="pausado"] .escaner__hallazgos li,
[data-movimiento="pausado"] .tablero__viajera { animation: none; }
[data-movimiento="pausado"] .escaner__barrido { opacity: 0; }

/* Los cierres del diagnostico como llamado (10-nov-2026): un panel con borde fino en degradado.
   El campo del diagnostico es el llamado principal (mas grande, con su propio borde); la agenda
   va como boton secundario, despues de una linea. Van en el inicio, en nosotros y en el bloque
   {{cierre}} (contacto, portafolio y servicios). Los cierres de {{agendar}} (el diagnostico y los
   legales) siguen sin panel. */
.cierre--panel .contenido {
  max-width: 920px;
  padding: 64px clamp(22px, 6vw, 72px) 52px;
  border: 1px solid transparent; border-radius: 18px;
  background:
    linear-gradient(var(--panel-hondo), var(--panel-hondo)) padding-box,
    linear-gradient(125deg, #f4bda673, #c7a2ed40 40%, #ffffff12 65%, #f4bda659) border-box;
}
.cierre--panel h2 { font-size: clamp(44px, 5.4vw, 80px); }
.cierre--panel .campo { max-width: 700px; margin-top: 40px; padding: 15px 16px 15px 24px; border-color: #c7a2ed59; background: #09070e; }
.cierre--panel .campo input { font-size: 15px; }
.cierre--panel .enviar { width: 46px; height: 46px; }
.cierre__o { display: flex; align-items: center; gap: 18px; max-width: 420px; margin: 34px auto 0; font-size: 12px; color: var(--tenue); }
.cierre__o::before, .cierre__o::after { content: ''; flex: 1; height: 1px; background: var(--linea); }


/* La palabra que cambia (inicio, 10-nov-2026, pedido de Sebastian): «Aca unimos marketing…» en
   el titular y «Creamos sistemas…» en «Salimos a vender». js/rotativo.js muestra una palabra a la
   vez y anima el ancho de su caja, para que el resto de la linea se corra suave y no a saltos. Sin
   JS, en pausa o con movimiento reducido queda la primera. El texto completo va en un .sr: lo leen
   los lectores de pantalla y Google, y lo visible queda aria-hidden. Al doble de rapido desde el
   mismo 10-nov (cambia cada 1,3 s): los tiempos de aca van a la par con CADA de rotativo.js.
   Las palabras ruedan como una tira (pedido del mismo dia: «mas smooth»): la que sale sube, la que
   entra llega desde abajo, a la vez y con la misma curva que el ancho. Antes se cruzaban en el
   mismo lugar y la que salia quedaba encima de la que entraba (visto cuadro a cuadro). El recorte
   las esconde fuera de su linea; sin el, la que entra pasaria por encima de «con tus futuros
   clientes». Va abierto a la derecha, donde no hay texto (la palabra cierra su linea), para no
   cortar la cursiva. */
.rotativo { display: inline-grid; white-space: nowrap; }
.rotativo > * { grid-area: 1 / 1; justify-self: start; }
.rotativo > :not(:first-child) { opacity: 0; }
.js .rotativo {
  clip-path: inset(-.04em -3em -.08em -.12em);
  transition: width .6s cubic-bezier(.65, 0, .35, 1);
}
.js .rotativo > * {
  opacity: 0; transform: translateY(100%);
  transition: transform .6s cubic-bezier(.65, 0, .35, 1), opacity .45s ease-out;
}
/* La primera se ve aunque rotativo.js todavia no haya llegado (data-rotando lo pone el script):
   sin esto, al cargar en frio la palabra alcanzaba a bajar y volver */
.js .rotativo > .activa,
.js .rotativo:not([data-rotando]) > :first-child { opacity: 1; transform: none; transition-delay: 0s, .15s; }
.js .rotativo > .sale { transform: translateY(-100%); transition-timing-function: cubic-bezier(.65, 0, .35, 1), linear; }

/* La brecha (nosotros, «Nacimos para cerrar la brecha», 10-nov-2026, segunda version: la primera,
   una linea que se cerraba, a Sebastian le parecio fome y simple). Marketing a la izquierda,
   tecnologia a la derecha y los clientes B2B atrapados en el medio. Al aparecer, los lados se
   acercan, se trazan las lineas hasta Escalable, los clientes bajan conectados y llega el sello
   de los agentes de IA. Despues, mientras se ve, corren pulsos por las lineas: .brecha--fluye lo
   ponen y lo sacan js/brecha.js y vigilar(). Las lineas las dibuja ese mismo script segun donde
   quedan las etiquetas (pathLength 100, para que el trazo y el pulso valgan en cualquier largo). */
.brecha { max-width: 980px; margin: 64px auto 0; container: brecha / inline-size; }
.brecha + .columnas { margin-top: 56px; }
.brecha__lienzo {
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(40px, 8vw, 120px); padding: 6px 0;
}
.brecha__lineas { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.brecha__lado { display: flex; flex-direction: column; gap: 10px; }
.brecha__lado--a { align-items: flex-end; }
.brecha__lado--b { align-items: flex-start; }
.brecha__rotulo { margin-bottom: 4px; font: 400 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.brecha__lado--a .brecha__rotulo { color: var(--durazno); }
.brecha__lado--b .brecha__rotulo { color: var(--lila); }
.brecha__chip {
  position: relative; padding: 7px 14px; border: 1px solid #ffffff1f; border-radius: 40px;
  background: var(--panel); font-size: 12.5px; color: var(--claro); white-space: nowrap;
}
.brecha__centro { position: relative; display: flex; flex-direction: column; align-items: center; gap: 44px; }
.brecha__nodo {
  position: relative; padding: 12px 24px; border: 1px solid transparent; border-radius: 40px;
  background: linear-gradient(var(--panel-hondo), var(--panel-hondo)) padding-box, linear-gradient(125deg, var(--durazno), var(--lila)) border-box;
  font-size: 15px; color: var(--texto);
}
.brecha__clientes {
  position: relative; padding: 8px 16px; border: 1px solid #c7a2ed59; border-radius: 40px;
  background: var(--panel); font-size: 13px; color: var(--texto);
}
.brecha__linea, .brecha__pulso { fill: none; stroke-linecap: round; }
.brecha__linea { stroke-width: 1; stroke-dasharray: 100; stroke-dashoffset: 0; }
.brecha__linea--a { stroke: #f4bda673; }
.brecha__linea--b { stroke: #c7a2ed73; }
.brecha__linea--c { stroke: #ffffff4d; }
.brecha__pulso { stroke-width: 2; stroke-dasharray: 7 200; stroke-dashoffset: 7; opacity: 0; }
.brecha__pulso--a { stroke: var(--durazno); }
.brecha__pulso--b { stroke: var(--lila); }
.brecha__pulso--c { stroke: var(--texto); }
@keyframes pulso { from { stroke-dashoffset: 7; } to { stroke-dashoffset: -100; } }
.brecha--fluye.visible .brecha__pulso {
  opacity: 1; animation: pulso 2.6s cubic-bezier(.45, 0, .55, 1) infinite;
  animation-delay: calc(2.8s + var(--i) * .29s);
}
/* Antes de aparecer: los lados separados y apagados, sin lineas ni Escalable, y los clientes solos
   en el medio */
.js .brecha:not(.visible) .brecha__lado--a { transform: translateX(-28px); opacity: .4; }
.js .brecha:not(.visible) .brecha__lado--b { transform: translateX(28px); opacity: .4; }
.js .brecha:not(.visible) .brecha__nodo { opacity: 0; transform: scale(.94); }
.js .brecha:not(.visible) .brecha__ia { opacity: 0; transform: translateY(6px); }
.js .brecha:not(.visible) .brecha__clientes { transform: translateY(-80px); color: var(--tenue); }
.js .brecha:not(.visible) .brecha__linea { stroke-dashoffset: 100; }
/* Las transiciones van solo bajo .visible. Si estuvieran en el estado base, al cargar en frio la
   clase .js llega despues de la primera pintura, el estado de partida se aplica con transicion, y
   quien baja a la seccion en menos de ~3 s ve el final sin la animacion (medido a 1440 px el
   10-nov-2026). Asi el estado de partida entra de golpe y solo la llegada se anima. */
.brecha.visible .brecha__lado { transition: transform .9s cubic-bezier(.23, 1, .32, 1) .5s, opacity .6s ease .5s; }
.brecha.visible .brecha__linea { transition: stroke-dashoffset .9s ease calc(1.1s + var(--i) * 60ms); }
.brecha.visible .brecha__linea--c { transition-delay: 2.4s; }
.brecha.visible .brecha__nodo { transition: opacity .45s ease 1.75s, transform .5s cubic-bezier(.23, 1, .32, 1) 1.75s; }
.brecha.visible .brecha__clientes { transition: transform .6s cubic-bezier(.23, 1, .32, 1) 1.95s, color .4s ease 1.95s; }
.brecha.visible .brecha__ia { transition: opacity .45s ease 2.7s, transform .45s cubic-bezier(.23, 1, .32, 1) 2.7s; }
/* En el telefono: tres etiquetas por lado (Ventas y Automatizaciones no caben) y todo mas chico */
@container brecha (max-width: 560px) {
  .brecha__lienzo { gap: 14px; }
  .brecha__chip { padding: 6px 9px; font-size: 11px; }
  .brecha__chip:nth-of-type(4) { display: none; }
  .brecha__rotulo { font-size: 9.5px; letter-spacing: .1em; }
  .brecha__centro { gap: 30px; }
  .brecha__nodo { padding: 9px 13px; font-size: 13px; }
  .brecha__clientes { padding: 6px 10px; font-size: 11.5px; }
  .brecha__ia { padding: 4px 7px; font-size: 9px; }
  .js .brecha:not(.visible) .brecha__clientes { transform: translateY(-62px); }
}

/* El dashboard (nosotros, «Nuestro enfoque», 10-nov-2026): cada empresa sigue su operacion en un
   dashboard que se actualiza todos los dias. Reemplazo a los diez cupos de clientes activos: ya no
   se dice que se eligen pocos clientes, y los cupos casi no se movian. js/dashboard.js pasa la
   semana de a un dia con escenas() de onda.js. Contenido de ejemplo y sin cifras. Va al doble de
   rapido desde el mismo 10-nov: estas transiciones van a la par con los tiempos de dashboard.js. */
.dashboard { max-width: 880px; margin: 48px auto 0; container-type: inline-size; }
.dashboard__hora { font-variant-numeric: tabular-nums; }
.dashboard__cuerpo { display: grid; grid-template-columns: 1.1fr 1fr; }
.dashboard__frentes { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linea); border-right: 1px solid var(--linea); }
.dashboard__frente { padding: 16px 18px 14px; background: var(--panel); }
.dashboard__frente p { margin-bottom: 14px; font: 400 10px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--apagado); }
.dashboard__barras { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; height: 48px; padding: 0 4px; border-bottom: 1px solid var(--linea); }
.dashboard__barras i {
  flex: 1; max-width: 16px; height: calc(var(--alto) * 100%); border-radius: 3px 3px 0 0;
  background: linear-gradient(#c7a2edcc, #c7a2ed26); transform-origin: bottom;
  transition: transform .3s cubic-bezier(.23, 1, .32, 1), opacity .15s ease;
}
.dashboard__barras i.hoy { background: linear-gradient(var(--durazno), #f4bda626); }
/* Los dias que faltan quedan como barras cortas y apagadas: la semana se ve entera desde el lunes */
.dashboard__barras i.futura { transform: scaleY(.16); opacity: .35; background: #ffffff33; }
.dashboard__hoy { list-style: none; margin: 0; padding: 4px 0; }
.dashboard__hoy li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--linea); font-size: 12.5px; color: var(--claro);
  transition: opacity .2s ease, transform .25s cubic-bezier(.23, 1, .32, 1);
}
.dashboard__hoy li:last-child { border-bottom: 0; }
.dashboard__hoy li.oculta { display: none; }
.dashboard__hoy li.entra { opacity: 0; transform: translateY(-8px); }
.dashboard__dias b { margin-left: 8px; font-weight: 400; color: #6f6880; }
.dashboard__dias b.hoy { color: var(--durazno); }
.dashboard + .equipo { margin-top: 56px; }
@container (max-width: 600px) {
  .dashboard__cuerpo { grid-template-columns: 1fr; }
  .dashboard__frentes { border-right: 0; border-bottom: 1px solid var(--linea); }
  .dashboard__frente { padding: 14px 14px 12px; }
  .dashboard__barras { height: 40px; }
  .dashboard__hoy li { padding: 11px 14px; font-size: 12px; }
}

/* Marcas (nosotros, 10-nov-2026, segunda vuelta): una grilla de celdas con linea fina, como un
   muro de logos pero con los nombres en texto (no hay logos en el repo). 17 marcas y una celda
   final al portafolio: 18 celdas, que cierran parejo en 6, 3 y 2 columnas. Antes hubo una tabla
   con «VIDEO» en cada fila y una frase corrida con filtro; a Sebastian no le gusto ninguna. La
   lista usa display: contents para que sus li sean celdas de la grilla junto al enlace final
   (por eso lleva role="list": algunos navegadores le quitan la semantica de lista). */
.marcas {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px;
  max-width: 1180px; margin: 64px auto 0;
  border: 1px solid #1f1c26; border-radius: 14px; overflow: hidden;
  /* La linea fina sobre el fondo, opaca: transparente, por el hueco de 1 px se asomaba la onda */
  background: #1f1c26;
}
.marcas__lista { display: contents; }
.marcas__lista li, .marcas__mas {
  display: grid; place-items: center; min-height: 132px; padding: 22px 16px;
  background: var(--panel-hondo); text-align: center;
}
.marcas__lista li { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.3; letter-spacing: -.02em; color: #ddd6e6; }
.marcas__mas { gap: 10px; grid-auto-flow: column; font-size: 13px; color: var(--durazno); transition: background-color .25s; }
.marcas__mas:focus-visible { outline: 1px solid var(--durazno); outline-offset: -6px; }
@media (hover: hover) and (pointer: fine) {
  .marcas__mas:hover { background: #f4bda60f; }
}

.boton--claro { background: #f4f0f9; color: #0a0810; border-color: transparent; font-weight: 500; }
.boton--claro:hover { background: var(--durazno); }

/* Contacto: datos a la izquierda, formulario a la derecha */
.contacto { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 80px; max-width: 1080px; margin: 0 auto; align-items: start; }
.datos { list-style: none; margin: 0; padding: 0; }
.datos li { padding: 18px 0; }
.datos .antetitulo { margin-bottom: 6px; }
.datos p:not(.antetitulo) { font-size: 15px; }
.datos a { display: inline-block; padding: 3px 0; border-bottom: 1px solid #b6a3c65c; }
.datos + .boton { margin-top: 26px; }

.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 20px; }
.formulario .ancho { grid-column: 1 / -1; }
.formulario label { display: block; font-size: 11px; font-weight: 400; color: var(--tenue); margin-bottom: 9px; }
.formulario input, .formulario textarea {
  width: 100%;
  color: var(--texto);
  background: linear-gradient(120deg, #15121d, #0d0c13);
  border: 1px solid #ffffff18;
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 14px;
  outline: none;
  transition: border-color .3s, box-shadow .3s;
}
.formulario textarea { min-height: 150px; resize: vertical; border-radius: 18px; line-height: 1.6; }
.formulario input:focus, .formulario textarea:focus { border-color: #c7a2ed90; box-shadow: 0 0 30px #c7a2ed12; }
.formulario ::placeholder { color: #6f6880; }
.formulario .boton { justify-self: start; padding: 14px 28px; }
.formulario .nota { margin-top: 0; align-self: center; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* El envio sin salir de la pagina (js/contacto.js, 10-nov-2026): enviando, el aviso si falla y el
   panel que reemplaza al formulario cuando Netlify lo recibe */
.formulario .boton:disabled { opacity: .6; cursor: progress; }
.formulario__aviso {
  grid-column: 1 / -1; margin: 0; padding: 14px 18px;
  border: 1px solid #f4bda659; border-radius: 14px; background: #f4bda60d;
  font-size: 13px; line-height: 1.6; color: var(--texto);
}
.formulario__aviso a { color: var(--durazno); text-decoration: underline; text-underline-offset: 3px; }
.formulario-listo { padding: 44px clamp(24px, 4vw, 44px); }
.formulario-listo h3 { margin: 16px 0 12px; font-size: clamp(30px, 3vw, 40px); letter-spacing: -.03em; }
.formulario-listo p:last-child { color: var(--tenue); }
.formulario-listo:focus { outline: none; }

/* ---------- Portafolio ----------
   Los marcos repiten el escenario del carrusel del inicio: borde fino, radio 10, fondo
   --panel y la imagen pegada arriba (las capturas cortan por abajo, nunca por los lados). */
.filtros {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  padding: 0 7%; margin-top: 10px;
}

.obras { padding-top: 90px; padding-bottom: 60px; }
.obras__cabeza { margin-bottom: 44px; }
.obras__subtitulo { margin: 60px 0 24px; }

.obra { display: block; }
.obra__marco { position: relative; display: block; }
.obra__marco img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.obra:hover .obra__marco img, .obra__marco:hover img { transform: scale(1.025); }
.obra__pie { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 14px 2px 0; }
.obra__nombre { display: block; font-size: 15px; color: var(--texto); }
.obra__contexto { display: block; font-size: 11px; color: #837a91; margin-top: 4px; }
.obra__ir { font-size: 14px; color: var(--tenue); transition: color .25s, transform .25s; }
.obra:hover .obra__ir { color: var(--durazno); transform: translate(2px, -2px); }

.obras__sitios { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 34px; }
.obra--sitio .obra__marco { aspect-ratio: 1072 / 581; }
/* Bajo cada sitio, lo que es y su stack, en mono (11-nov-2026) */
.obra__stack { display: block; margin-top: 7px; font: 400 10.5px/1.4 var(--mono); letter-spacing: .03em; color: var(--apagado); }
/* Los sitios con varias capturas las pasan de a una con un fundido (js/sitios.js): la primera va en
   el flujo y las demas encima, transparentes. Sin JS se ve la primera. */
.obra__marco[data-fotos] img + img { position: absolute; inset: 0; opacity: 0; }
.obra__marco[data-fotos] img + img.actual { opacity: 1; }
.js .obra__marco[data-fotos] img { transition: opacity .8s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }

.obras__videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 28px; }
.obra--video .obra__marco { aspect-ratio: 16 / 9; }
.obra--destacada { grid-column: 1 / -1; }
/* Formato vertical: el mismo ancho que las otras grillas y el doble de columnas que la de
   videos horizontales (6, 4 y 2), asi una tarjeta 4:5 mide de alto casi lo mismo que una 16:9
   (205 y 200 px a 1440) y cada dos verticales calzan con un video de arriba. Es flex y no
   grid para que una ultima fila incompleta quede centrada. */
.obras__verticales { --columnas: 6; --hueco: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 40px var(--hueco); }
.obras__verticales > .obra { width: calc((100% - (var(--columnas) - 1) * var(--hueco)) / var(--columnas)); }
.obra--vertical .obra__marco { aspect-ratio: 4 / 5; }
.obra--vertical .obra__nombre { font-size: 13px; }
/* Boton de play: un circulo como el .enviar del campo, con el triangulo dibujado en CSS */
.obra__play {
  position: absolute; left: 50%; top: 50%;
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: #f4f0f9e6;
  box-shadow: 0 0 20px #f1e6ff22;
  transition: transform .25s, background .25s;
}
.obra__play::after {
  content: '';
  position: absolute; left: 22px; top: 18px;
  border-style: solid; border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #0a0810;
}
.obra--destacada .obra__play { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
.obra--destacada .obra__play::after { left: 30px; top: 25px; border-width: 13px 0 13px 21px; }
.obra__marco:hover .obra__play { transform: scale(1.06); background: var(--durazno); }

/* Piezas: columnas de alto libre, cada pieza en su proporcion real (no se recortan) */
.obras__piezas { columns: 4 220px; column-gap: 18px; }
.obra--pieza { break-inside: avoid; margin-bottom: 18px; }
.obra--pieza img { display: block; width: 100%; height: auto; transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .3s; }
.obra--pieza:hover img { transform: scale(1.025); }

/* Visor: dialog nativo a pantalla completa; el fondo cierra al hacer clic */
.visor-abierto { overflow: hidden; }
.visor {
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--texto);
}
.visor[open] { display: flex; align-items: center; justify-content: center; }
.visor::backdrop { background: #09070ef0; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.visor__caja { width: min(1100px, 92vw); max-height: 94vh; display: flex; flex-direction: column; align-items: center; }
.visor__escenario { width: 100%; display: flex; justify-content: center; }
.visor__escenario img { display: block; width: auto; height: auto; max-height: 78vh; max-width: 100%; border-radius: 10px; border: 1px solid #ffffff18; }
.visor__video { width: 100%; max-height: 78vh; background: #000; margin: 0 auto; }
.visor__video iframe, .visor__video video { display: block; width: 100%; height: 100%; border: 0; }
.visor__pie { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 18px; }
.visor__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.visor__titulo { font-size: 14px; }
.visor__externo { font-size: 11px; color: var(--tenue); border-bottom: 1px solid #b6a3c65c; }
.visor__externo:hover { color: var(--durazno); }
.visor__controles { --tam: 36px; display: flex; align-items: center; gap: 14px; margin-left: auto; }
.visor__cerrar { padding: 0 16px; font-size: 12px; }
.visor__cuenta { font-size: 11px; color: var(--tenue); font-variant-numeric: tabular-nums; }

/* Legales: una columna de lectura */
.legal { max-width: 760px; margin: 0 auto; }
.legal h2 { font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.03em; margin-top: 56px; }
.legal h3 { font-size: 18px; margin-top: 30px; }
.legal p { color: #bcb5c7; font-size: 15px; line-height: 1.9; margin-top: 16px; }
.legal a { border-bottom: 1px solid #b6a3c65c; }
.legal .lista li { font-size: 14px; }
.legal .fecha { font-size: 12px; color: var(--tenue); margin-top: 0; }

/* La franja de la portada del inicio (10-nov-2026, pedido de Sebastian: la portada se veia vacia).
   Trabajo real del portafolio bajo el campo: un sitio, una pieza B2B, un video y una campaña, con
   lo que es en una etiqueta y el cliente al pie. Mezcla tipos a proposito (solo con videos parecia
   una productora). Las elige "portada" en datos/portafolio.json. Una fila de alto parejo: cada
   pieza ocupa un ancho proporcional a su forma (--r, ancho/alto, lo pone portafolio.py). Llena el
   vacio sin otra animacion, y en pantallas bajas queda cortada por el borde de abajo, lo que invita
   a bajar. Bajo 960 px van tres y bajo 560 dos: es una muestra. */
.vitrina { list-style: none; margin: 72px 0 0; padding: 0; display: flex; gap: 18px; text-align: left; }
.vitrina > li { flex: var(--r) 1 0%; min-width: 0; }
.vitrina .obra__marco { aspect-ratio: var(--r); position: relative; }
/* El tinte (11-nov-2026, pedido de Sebastián): un velo del lila de la onda sobre las cuatro
   fotos, para que se lean como una franja y no como cuatro piezas sueltas. Multiplica: los
   claros toman el lila y los oscuros quedan oscuros. Con el mouse encima o el foco se va y la
   foto se ve con sus colores. Al 80 %: Sebastián lo pidió dos veces «más opaco» (55 y 70 %, el mismo día). */
.vitrina .obra__marco::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--lila); mix-blend-mode: multiply; opacity: .8; transition: opacity .3s ease;
}
.vitrina .obra__marco:focus-visible::after { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .vitrina .obra__marco:hover::after { opacity: 0; }
}
.vitrina .obra__play { z-index: 3; }
.vitrina .obra__pie { padding-top: 11px; }
.vitrina__tipo { display: block; font: 400 9.5px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--apagado); }
.vitrina .obra__play { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
.vitrina .obra__play::after { left: 16px; top: 13px; border-width: 7px 0 7px 11px; }
@media (max-width: 960px) {
  .vitrina > :nth-child(n+4) { display: none; }
}
@media (max-width: 560px) {
  .vitrina { gap: 12px; margin-top: 48px; }
  .vitrina > :nth-child(n+3) { display: none; }
}

/* Aparicion de bloques al entrar en pantalla */
.revelar { opacity: 1; transform: none; }
.js .revelar {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 1s ease, transform 1s cubic-bezier(.2, .7, .2, 1);
}
.js .revelar.visible { opacity: 1; transform: none; }
/* Las secciones divididas aparecen por columna, el texto y despues su grafico (10-nov-2026, por
   los frentes del inicio): corre en el inicio, en servicios y en nosotros */
.js .dividido > .revelar + .revelar { transition-delay: .15s; }
/* El primer bloque de cada pagina (el que trae el <h1>) entra solo, con CSS (11-nov-2026). Con
   .revelar quedaba invisible hasta que corria onda.js, al final de la pagina: el <h1>, que es el
   LCP, tardaba 3,7 s en verse en el telefono del inicio (Lighthouse). Es el mismo fundido, pero
   parte en 10 %: desde 0, Chrome no cuenta el LCP hasta que el fundido termina (medido: servicios
   paso de 2,2 a 2,9 s), porque un elemento con opacidad 0 no es candidato. */
.entrada { animation: entrada 1s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes entrada { from { opacity: .1; transform: translateY(25px); } }

.sr, .saltar:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.saltar:focus { position: fixed; top: 10px; left: 10px; z-index: 100; background: var(--fondo); padding: 10px; }

@media (min-width: 1500px) {
  .escena, .bloque { padding-left: 15%; padding-right: 15%; }
}

@media (max-width: 700px) {
  .marcas { grid-template-columns: 1fr 1fr; margin-top: 44px; }
  .marcas__lista li, .marcas__mas { min-height: 96px; padding: 18px 12px; }
  .marcas__lista li { font-size: 16px; }
  .cabecera { padding: 22px 6%; }
  .cabecera__derecha { gap: 10px; }
  .menu { display: none; }
  .cabecera .menu-boton { display: inline-flex; min-width: 76px; }
  .marca img { width: 100px; }

  /* El panel se esconde con visibility para que no quede enfocable; al cerrar,
     visibility espera a que termine el fundido (si no, desaparece de golpe). */
  .panel-menu {
    display: flex; flex-direction: column; justify-content: center; gap: 44px;
    position: fixed; inset: 0; z-index: 9;
    padding: 110px 7% 60px;
    background: #09070ef2;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    opacity: 0; visibility: hidden;
    transition: opacity .32s ease, visibility 0s linear .32s;
  }
  .panel-menu.abierto { opacity: 1; visibility: visible; transition: opacity .32s ease, visibility 0s; }
  .panel-menu nav { display: flex; flex-direction: column; gap: 4px; }
  .panel-menu nav a { font-size: 38px; line-height: 1.3; letter-spacing: -.05em; color: #d9d2e2; }
  .panel-menu nav a[aria-current="page"] {
    font-style: italic;
    background: linear-gradient(105deg, var(--durazno), var(--lila));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .panel-menu .boton { align-self: flex-start; }
  .menu-abierto { overflow: hidden; }
  .menu-abierto .cabecera { background: none; }
  .menu-abierto .cabecera::before { opacity: 0; }
  .pie__legales { gap: 14px; }
  .escena { padding: 100px 7%; min-height: 86svh; }
  .portada { min-height: 100svh; padding-top: max(110px, 21svh); }
  .hero-diagnostico .portada { padding-top: max(110px, 17.7svh); }
  h1 { font-size: 46px; }
  h2 { font-size: 43px; }
  .bajada { font-size: 14px; }
  .campo { padding: 9px 10px 9px 14px; gap: 9px; margin-top: 30px; }
  .campo input { font-size: 12px; }
  .enviar { width: 34px; height: 34px; }
  .campo__onda { font-size: 30px; }
  .cuerpo { font-size: 14px; max-width: 370px; }
  .antetitulo { font-size: 9px; }
  .detalle { font-size: 10px; gap: 8px; }
  .detalle span + span::before { margin-right: 8px; }
  .bloque { padding: 85px 7%; }
  .equipo { grid-template-columns: 1fr; gap: 30px; margin-top: 45px; }
  .proceso > div { flex-direction: column; gap: 15px; }
  .carrusel { margin-top: 35px; }
  .carrusel__escenario { aspect-ratio: 1.35; }
  .carrusel figcaption { font-size: 9px; align-items: flex-start; flex-direction: column; }
  .carrusel__controles { width: 100%; justify-content: space-between; }
  .preguntas { margin-top: 30px; }
  summary { font-size: 14px; }
  .pie { align-items: flex-start; gap: 20px; }
  .pie > div:last-child { flex-direction: column; gap: 12px; align-items: flex-end; }

  .equipo--tres { grid-template-columns: 1fr; }
  .cabeza { padding: 105px 7% 40px; }
  .cabeza h1 { font-size: 42px; }
  .titulo-seccion h2 { font-size: 36px; }
  .columnas, .columnas--dos, .columnas--cuatro { grid-template-columns: 1fr; gap: 34px; margin-top: 45px; }
  .columnas h3 { font-size: 22px; }
  .contacto { grid-template-columns: 1fr; gap: 50px; }
  .formulario { grid-template-columns: 1fr; }
  .legal h2 { margin-top: 44px; }
  .legal p { font-size: 14px; }

  .filtros { gap: 8px; }
  .filtros .pildora { padding: 8px 14px; font-size: 11px; }
  .obras { padding-top: 70px; }
  .obras__sitios, .obras__videos { grid-template-columns: 1fr; gap: 34px; }
  .obras__verticales { --columnas: 2; --hueco: 16px; row-gap: 30px; }
  .cierre--panel .contenido { padding: 44px 20px 36px; border-radius: 14px; }
  .cierre--panel h2 { font-size: 44px; }
  .cierre--panel .campo { padding: 10px 10px 10px 16px; }
  .cierre--panel .campo input { font-size: 13px; }
  .cierre--panel .enviar { width: 38px; height: 38px; }
  .flujo__pasos { padding: 12px 14px 4px; }
  .flujo__pasos li { height: 78px; padding-left: 26px; }
  .gantt__filas { padding: 12px 12px 8px; }
  .gantt__filas li { grid-template-columns: 96px minmax(0, 1fr); gap: 8px; font-size: 11px; line-height: 1.25; }
  .gantt__pista i { margin: 0 3px; }
  .registro { --alto-fila: 56px; }
  .escaner { grid-template-columns: 1fr; margin-top: 40px; }
  .escaner__vista { border-right: 0; border-bottom: 1px solid var(--linea); padding: 18px 14px 22px; }
  .escaner__pantalla { margin-right: 34px; }
  .escaner__celular { right: 10px; width: 70px; height: 128px; }
  .escaner__hallazgos { padding: 18px 16px; gap: 14px; }
  [data-pagina="index"] { --aire: 56px; }
  .muestra { font-size: 12.5px; }
  .prospeccion, .embudo { --alto-fila: 54px; }
  .redes { --alto-fila: 50px; }
  .muestra__opciones { padding: 11px 12px; }
  .muestra__fuente li, .fila { padding: 0 12px; gap: 10px; }
  .muestra__fuente small, .fila small { font-size: 10.5px; }
  .sello { padding: 4px 8px; font-size: 9px; }
  .muestra__pie { flex-direction: column; align-items: flex-start; gap: 4px; padding: 9px 12px; }
  .muestra__paso { font-size: 9.5px; text-align: left; }
  .obras__piezas { columns: 2; column-gap: 12px; }
  .obra--pieza { margin-bottom: 12px; }
  .obra__play { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .obra__play::after { left: 19px; top: 15px; border-width: 9px 0 9px 14px; }
  .visor__caja { width: 94vw; }
  .visor__pie { flex-direction: column; align-items: flex-start; gap: 12px; }
  .visor__controles { margin-left: 0; width: 100%; }
  .visor__controles .visor__cerrar { margin-left: auto; }
}

@media (max-width: 960px) {
  .dividido, .dividido--invertido { grid-template-columns: 1fr; gap: 48px; }
  .dividido--invertido > :last-child { order: 0; }
  .preguntas { grid-template-columns: 1fr; max-width: 800px; }
}

/* Telefonos de 320 px: las pildoras de las muestras caben en una fila */
@media (max-width: 360px) {
  .muestra__opciones .pildora--chica { padding: 6px 8px; font-size: 10.5px; }
}

/* Telefonos de hasta 420 px (10-nov-2026). Con «Hablemos hoy» la cabecera no cabia: el boton se
   partia en dos lineas y «Menu» se salia de la pantalla hasta 390 px. Bajo 380 px el boton va
   sin flecha y el logo a 88 px (medido de 320 a 430 px: cabe en una fila con 16 px de aire).
   El titulo de los cierres con panel corre sin su salto de linea, que a este ancho lo partia
   en tres o cuatro lineas; en el HTML va un espacio antes del <br> para que no se peguen. */
@media (max-width: 420px) {
  .cabecera__derecha > .boton { white-space: nowrap; }
  .cabecera__derecha > .boton:not(.menu-boton) { gap: 10px; padding: 9px 13px; }
  .cabecera .menu-boton { min-width: 0; padding: 9px 14px; }
  .cierre--panel h2 { font-size: clamp(32px, 10vw, 42px); }
  .cierre--panel h2 br { display: none; }
  .cierre--panel .contenido { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 380px) {
  .marca img { width: 88px; }
  .cabecera__derecha > .boton:not(.menu-boton) > span { display: none; }
}

@media (min-width: 701px) and (max-width: 1100px) {
  /* Con Home el menu tiene seis items: a este ancho no caben con 32 px entre cada uno */
  .menu, .cabecera__derecha { gap: 20px; }
  /* Las muestras del inicio son angostas a este ancho: la barra de abajo va en dos lineas */
  .muestra__pie { flex-direction: column; align-items: flex-start; gap: 4px; }
  .muestra__paso { text-align: left; }
  .obras__verticales { --columnas: 4; }
  .marcas { grid-template-columns: repeat(3, 1fr); }
  .marcas__lista li { font-size: 18px; }
  .marcas__lista li, .marcas__mas { min-height: 112px; }
  .columnas { grid-template-columns: 1fr 1fr; }
  .columnas--cuatro { grid-template-columns: 1fr 1fr; }
  .equipo--tres { grid-template-columns: 1fr; max-width: 640px; gap: 36px; }
  .contacto { grid-template-columns: 1fr; gap: 60px; }
  .obras__videos { grid-template-columns: 1fr 1fr; }
  .obras__piezas { columns: 3; }
}

/* Va despues del bloque de 701-1100 px para ganarle el gap. Bajo 860 px los seis items y
   «Hablemos» chocaban con el logo (medido a 701 px, 9-nov-2026). El corte de 700 px no se
   mueve: onda.js tambien lo usa para cerrar el menu del telefono. */
@media (min-width: 701px) and (max-width: 860px) {
  .cabecera { padding-left: 4%; padding-right: 4%; }
  .menu, .cabecera__derecha { gap: 14px; }
  .menu { font-size: 11.5px; }
  .cabecera__derecha > .boton { gap: 14px; padding: 9px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .revelar { opacity: 1; transform: none; transition: none; }
  .entrada { animation: none; }
  /* Con los pseudoelementos: * solo no los alcanza, y los rellenos de los graficos y la cañeria
     del flujo seguian animandose con movimiento reducido (medido el 10-nov-2026) */
  *, *::before, *::after { transition: none !important; }
  /* Los ciclos de los graficos (escaner, tablero) quedan en su estado final */
  .escaner__barrido, .escaner__hallazgos li, .tablero__viajera { animation: none !important; }
  .brecha__pulso { animation: none !important; opacity: 0 !important; }
  .escaner__barrido { opacity: 0; }
}