/* ---------------------------------------------------------------------------
   Sitio público de Clutch (sitio/).
   Va encima de style.css, del que hereda los colores, los botones y el cambio
   de tema. Acá solo está lo que el sistema por dentro no necesita: portada,
   secciones anchas y tarjetas de rubro.

   No confundir con catalogo.css, que es la página pública de cada CLIENTE.
   --------------------------------------------------------------------------- */

body.sitio {
  /* El fondo degradado de html/body ya sirve; solo se asegura que nada del
     layout del sistema (menú lateral) aplique acá. */
  display: block;
}

.sitio-ancho {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- Barra superior ---------- */

.sitio-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.sitio-nav-fila {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 64px;
}
.sitio-marca { display: flex; align-items: center; flex-shrink: 0; }
.sitio-logo { height: 30px; width: auto; }

.sitio-menu {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-right: auto;
  overflow-x: auto;              /* en móvil el menú se desliza en vez de romper la fila */
  scrollbar-width: none;
}
.sitio-menu::-webkit-scrollbar { display: none; }
.sitio-menu a {
  color: var(--text);
  font-size: .92rem;
  padding: .45rem .7rem;
  border-radius: 8px;
  white-space: nowrap;
}
.sitio-menu a:hover { background: var(--bg); }
.sitio-menu a.activo { background: var(--bg); font-weight: 600; }

.sitio-acciones { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

/* ---------- Bloques ---------- */

.sitio-seccion { padding: 4.5rem 0; }
.sitio-seccion-alt { background: var(--surface); border-block: 1px solid var(--border); }

.sitio-titulo {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  line-height: 1.2;
  margin-bottom: .6rem;
  letter-spacing: -.02em;
}
.sitio-bajada {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 46rem;
  margin-bottom: 2.5rem;
}
.sitio-centrado { text-align: center; }
.sitio-centrado .sitio-bajada { margin-inline: auto; }

/* ---------- Portada ---------- */

.sitio-hero { padding: clamp(3rem, 9vw, 6rem) 0 4rem; text-align: center; }
.sitio-hero h1 {
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin-bottom: 1.1rem;
}
.sitio-hero h1 .destacado {
  background: linear-gradient(120deg, var(--accent), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sitio-hero p {
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.2rem);
  max-width: 42rem;
  margin: 0 auto 2rem;
}
.sitio-hero-botones {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.sitio-hero-nota { color: var(--muted); font-size: .88rem; }

/* ---------- Tarjetas de rubro ---------- */

.sitio-rubros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.sitio-rubro {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  transition: transform .16s, box-shadow .16s, border-color .16s;
  color: var(--text);
}
.sitio-seccion-alt .sitio-rubro { background: var(--bg); }
.sitio-rubro:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .09);
}
.sitio-rubro-icono { font-size: 2.1rem; line-height: 1; margin-bottom: .75rem; }
.sitio-rubro h3 { font-size: 1.12rem; margin-bottom: .4rem; }
.sitio-rubro p { color: var(--muted); font-size: .92rem; margin-bottom: .9rem; flex: 1; }
.sitio-rubro-ejemplos {
  font-size: .8rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: .75rem;
  margin-bottom: .75rem;
}
.sitio-rubro-cta { font-size: .9rem; font-weight: 600; color: var(--accent); }

/* ---------- Listas de características ---------- */

.sitio-puntos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.75rem 2rem;
}
.sitio-punto-icono { font-size: 1.5rem; line-height: 1; margin-bottom: .5rem; }
.sitio-punto h3 { font-size: 1rem; margin-bottom: .3rem; }
.sitio-punto p { color: var(--muted); font-size: .92rem; }

/* ---------- Pasos ---------- */

.sitio-pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  counter-reset: paso;
}
.sitio-paso { counter-increment: paso; }
.sitio-paso::before {
  content: counter(paso);
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font-weight: 700;
  margin-bottom: .75rem;
}
.sitio-paso h3 { font-size: 1.02rem; margin-bottom: .3rem; }
.sitio-paso p { color: var(--muted); font-size: .92rem; }

/* ---------- Precios ---------- */

.sitio-ciclo {
  display: inline-flex;
  gap: .25rem;
  padding: .25rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  margin-bottom: 2rem;
}
.sitio-seccion-alt .sitio-ciclo { background: var(--surface); }
.sitio-ciclo button {
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .9rem;
  padding: .45rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
}
.sitio-ciclo button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-contraste);
  font-weight: 600;
}

.sitio-planes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  align-items: start;
  text-align: left;
}
.sitio-plan {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.75rem 1.5rem;
  position: relative;
}
.sitio-seccion-alt .sitio-plan { background: var(--bg); }
.sitio-plan-destacado { border-color: var(--accent); box-shadow: 0 8px 26px rgba(var(--accent-rgb), .13); }
.sitio-plan-cinta {
  position: absolute;
  top: -.7rem;
  left: 1.5rem;
  z-index: 1;                 /* por encima del resplandor */
  background: var(--accent);
  color: var(--accent-contraste);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .2rem .6rem;
  border-radius: 999px;
}
.sitio-plan h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.sitio-plan-desc { color: var(--muted); font-size: .88rem; min-height: 2.6rem; margin-bottom: 1rem; }
.sitio-plan-precio { display: flex; align-items: baseline; gap: .35rem; margin-bottom: .2rem; }
.sitio-plan-monto { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; }
.sitio-plan-periodo { color: var(--muted); font-size: .88rem; }
.sitio-plan-ahorro { color: var(--success); font-size: .82rem; min-height: 1.2rem; margin-bottom: 1.1rem; }
.sitio-plan ul { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.sitio-plan li {
  font-size: .9rem;
  padding: .3rem 0 .3rem 1.4rem;
  position: relative;
  color: var(--muted);
}
.sitio-plan li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.sitio-plan .btn { width: 100%; justify-content: center; }
.sitio-precios-nota { color: var(--muted); font-size: .86rem; margin-top: 1.5rem; }

/* ---------- Landing de rubro ---------- */

.sitio-rubro-hero { padding: clamp(2.5rem, 7vw, 4.5rem) 0 3rem; }
.sitio-rubro-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .35rem .9rem;
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: 1.1rem;
}
.sitio-rubro-hero h1 {
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  margin-bottom: .9rem;
  max-width: 22ch;
}
.sitio-rubro-hero .sitio-bajada { font-size: 1.1rem; }

.sitio-dolor {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 46rem;
}
.sitio-dolor h2 { font-size: 1.05rem; margin-bottom: .5rem; }
.sitio-dolor p { color: var(--muted); }

.sitio-modulos { display: flex; flex-wrap: wrap; gap: .45rem; }
.sitio-modulo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .35rem .85rem;
  font-size: .87rem;
}
.sitio-seccion-alt .sitio-modulo { background: var(--bg); }

.sitio-cierre {
  text-align: center;
  padding: 4rem 0;
}
.sitio-cierre h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); margin-bottom: .75rem; }
.sitio-cierre p { color: var(--muted); max-width: 40rem; margin: 0 auto 1.75rem; }

/* ---------- Pie ---------- */

.sitio-pie {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-top: 3rem;
}
.sitio-pie-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 2.5rem;
}
.sitio-logo-pie { height: 26px; margin-bottom: .75rem; }
.sitio-pie-nota { color: var(--muted); font-size: .9rem; max-width: 24rem; }
.sitio-pie h3 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: .7rem;
}
.sitio-pie a { display: block; color: var(--text); font-size: .92rem; padding: .22rem 0; }
.sitio-pie a:hover { color: var(--accent); }
.sitio-pie-legal {
  border-top: 1px solid var(--border);
  padding-block: 1.25rem;
  color: var(--muted);
  font-size: .85rem;
}

@media (max-width: 760px) {
  .sitio-seccion { padding: 3rem 0; }
  .sitio-pie-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  /* El menú de rubros no cabe junto a los botones: pasa a su propia fila. */
  .sitio-nav-fila { flex-wrap: wrap; padding-block: .6rem; }
  .sitio-menu { order: 3; width: 100%; margin-right: 0; }
  .sitio-acciones { margin-left: auto; }
}

/* ===========================================================================
   Capa gráfica
   ===========================================================================
   Todo lo de acá abajo es decoración: movimiento, profundidad y el video de
   la portada. Está separado a propósito —y se apaga entero con una sola regla
   de `prefers-reduced-motion`— porque la página tiene que funcionar igual sin
   nada de esto.
   =========================================================================== */

/* ---------- Los iconos dibujados ---------- */

.sitio-icono { width: 1.4em; height: 1.4em; flex-shrink: 0; }
.sitio-icono-menu { width: 1.05em; height: 1.05em; vertical-align: -.18em; }
.sitio-menu a { display: inline-flex; align-items: center; gap: .4rem; }

.sitio-rubro-icono .sitio-icono,
.sitio-punto-icono .sitio-icono { width: 2rem; height: 2rem; color: var(--accent-2); }

.sitio-rubro-icono, .sitio-punto-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.4rem; height: 3.4rem; margin-bottom: .9rem;
  border-radius: 14px;
  background: rgba(var(--accent-rgb), .09);
  border: 1px solid rgba(var(--accent-rgb), .16);
  transition: transform .35s cubic-bezier(.2,.9,.3,1.4), background .25s ease;
}
.sitio-rubro:hover .sitio-rubro-icono {
  transform: translateY(-3px) rotate(-6deg) scale(1.06);
  background: rgba(var(--accent-rgb), .16);
}

/* ---------- Portada con video ---------- */

.sitio-hero {
  position: relative;
  isolation: isolate;              /* que el velo no se escape a otras secciones */
  overflow: hidden;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(4rem, 8vw, 7rem);
  text-align: left;
}

.sitio-hero-fondo { position: absolute; inset: 0; z-index: -2; background: var(--marca-azul); }
.sitio-hero-video {
  width: 100%; height: 100%; object-fit: cover;
  /* La escena tiene a la persona a la izquierda, que es justo donde va el
     texto. Se corre el encuadre a la derecha para que el título caiga sobre
     una zona más tranquila del cuadro. */
  object-position: 68% center;
  display: block;
}

/* El velo.
   Dos capas: una que carga la tinta del lado del texto y otra que oscurece de
   arriba y de abajo. Con una sola no alcanza: o el video queda negro, o el
   título no se lee sobre las zonas claras de la escena. */
.sitio-hero-velo {
  position: absolute; inset: 0;
  /* Índice POSITIVO, y esto importa: con -1 se pintaba por debajo del video.
     Dentro de una capa, los índices negativos van antes que el contenido en
     flujo —y el video es contenido en flujo—, así que el velo quedaba tapado
     justo por lo que tenía que oscurecer. No daba error: simplemente no se
     veía, y el texto encima quedaba en 2,2 de contraste. */
  z-index: 1;
  background:
    /* 1. La tinta del lado del texto, que es donde tiene que leerse. Se apaga
          hacia la derecha para que la escena siga viéndose. */
    linear-gradient(100deg,
      rgba(4, 20, 42, .88) 0%,
      rgba(4, 20, 42, .78) 40%,
      rgba(4, 20, 42, .34) 72%,
      rgba(4, 20, 42, .16) 100%),
    /* 2. Arriba y abajo, para despegar la barra de menú y el borde inferior. */
    linear-gradient(180deg,
      rgba(4, 20, 42, .42) 0%,
      rgba(4, 20, 42, .12) 45%,
      rgba(4, 20, 42, .62) 100%),
    /* 3. Un velo parejo por debajo de los dos. Los degradados solos dejan pasar
          los puntos más claros de la escena —el ambulatorio es blanco— y es
          justo ahí donde el texto pierde contraste. */
    rgba(4, 20, 42, .10);
}

.sitio-hero-grilla {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* Sobre el video mandan los colores del logo en su versión oscura, sin importar
   si el visitante tiene el sitio en modo día: el fondo es el mismo siempre. */
.sitio-hero-texto { color: #fff; }
.sitio-hero h1 { color: #fff; }
.sitio-hero h1 .destacado {
  background: none;
  color: var(--marca-verde);
  -webkit-text-fill-color: var(--marca-verde);
}
.sitio-hero p { color: rgba(255,255,255,.86); margin-left: 0; margin-right: 0; }
.sitio-hero-nota { color: rgba(255,255,255,.66); }
.sitio-hero-botones { justify-content: flex-start; }

.sitio-hero-pin {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .38rem .85rem .38rem .55rem;
  margin-bottom: 1.1rem;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(6px);
  color: #fff; font-size: .84rem;
}
.sitio-hero-pin .sitio-icono { width: 1.1rem; height: 1.1rem; color: var(--marca-verde); }

/* Un botón de vidrio en vez del de contorno: sobre el video, un borde gris
   claro prácticamente no se ve. */
.btn-vidrio {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.30);
  backdrop-filter: blur(6px);
}
.btn-vidrio:hover { background: rgba(255,255,255,.20); color: #fff; }

/* ---------- El teléfono que se inclina ---------- */

.sitio-telefono {
  position: relative;
  perspective: 1000px;             /* sin esto el giro se ve plano, sin volumen */
  display: flex; justify-content: center;
}

.sitio-telefono-cuerpo {
  position: relative;
  width: min(268px, 76vw);
  border-radius: 30px;
  overflow: hidden;
  border: 6px solid #0c1a2e;
  box-shadow: 0 30px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
  transform-style: preserve-3d;
  transition: transform .35s ease;
  will-change: transform;
}
.sitio-telefono-cuerpo img { width: 100%; height: auto; display: block; }

/* El reflejo que barre la pantalla al mover el mouse. Su posición la escriben
   dos variables que actualiza el JavaScript. */
.sitio-telefono-brillo {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--bx, 50%) var(--by, 0%),
              rgba(255,255,255,.30), rgba(255,255,255,0) 55%);
  opacity: 0; transition: opacity .3s ease;
}
.sitio-telefono:hover .sitio-telefono-brillo { opacity: 1; }

/* Las fichas que flotan alrededor */
.sitio-flota {
  position: absolute;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .8rem;
  border-radius: 12px;
  background: rgba(255,255,255,.94);
  color: var(--marca-azul);
  font-size: .8rem;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  white-space: nowrap;
  transition: transform .35s ease;
  will-change: transform;
}
.sitio-flota b { font-family: var(--fuente-titulos); font-weight: 600; }
.sitio-flota .sitio-icono { width: 1.15rem; height: 1.15rem; color: var(--marca-verde); }

/* Apoyadas en el borde del teléfono, no encima. Montadas sobre la pantalla
   tapan justo lo que vinimos a mostrar. */
.sitio-flota-1 { top: 6%;    left: -13%;  animation: sitio-boya 6s   ease-in-out infinite; }
.sitio-flota-2 { top: 44%;   right: -13%; animation: sitio-boya 7.5s ease-in-out infinite .8s; }
.sitio-flota-3 { bottom: 7%; left: -10%;  animation: sitio-boya 6.8s ease-in-out infinite .4s; }

@keyframes sitio-boya {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -9px; }
}

/* En pantallas chicas las fichas se salen del cuadro y tapan el teléfono. */
@media (max-width: 880px) {
  /* En el celular el texto va centrado y ocupa casi todo el ancho, así que un
     degradado lateral ya no lo cubre: la parte clara de la escena queda justo
     detrás de las letras. Acá la penumbra se reparte pareja de arriba abajo. */
  .sitio-hero-velo {
    background:
      linear-gradient(180deg,
        rgba(4, 20, 42, .84) 0%,
        rgba(4, 20, 42, .76) 45%,
        rgba(4, 20, 42, .90) 100%),
      rgba(4, 20, 42, .24);
  }

  .sitio-hero { text-align: center; }
  .sitio-hero-grilla { grid-template-columns: 1fr; }
  .sitio-hero-botones { justify-content: center; }
  .sitio-hero p { margin-inline: auto; }
  .sitio-flota { display: none; }
  .sitio-telefono { margin-top: 2.5rem; }
}

/* ---------- Aparecer al hacer scroll ----------
   El estado inicial lo enciende el JavaScript agregando `.js-revelar` al <html>.
   Si el JavaScript no corre —falla, lo bloquean, es un buscador—, esta regla
   nunca se aplica y el contenido se ve igual. Al revés, ocultando desde el CSS
   y mostrando desde el JS, cualquier error dejaría la página en blanco. */
.js-revelar [data-revelar] {
  opacity: 0;
  translate: 0 18px;
  transition: opacity .6s ease, translate .6s cubic-bezier(.2,.7,.3,1);
}
.js-revelar [data-revelar].visible { opacity: 1; translate: 0 0; }

/* ---------- Precios: reaccionan al mouse ---------- */

.sitio-plan {
  position: relative;
  transition: transform .3s cubic-bezier(.2,.8,.3,1.1), box-shadow .3s ease, border-color .3s ease;
}
/* Un resplandor que sigue al cursor dentro de la tarjeta. Las coordenadas las
   escribe el JavaScript; sin él la variable no existe y no se dibuja nada.
   El recorte lo hace el propio redondeo de esta capa y no un `overflow: hidden`
   en la tarjeta: eso último le cortaba la cabeza a la cinta de "El más
   elegido", que asoma por arriba del borde a propósito. */
.sitio-plan::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(280px circle at var(--mx) var(--my),
              rgba(var(--accent-rgb), .13), transparent 70%);
  opacity: 0; transition: opacity .3s ease;
  pointer-events: none;
}
.sitio-plan:hover::before { opacity: 1; }
.sitio-plan:hover {
  transform: translateY(-6px);
  border-color: var(--accent-2);
  box-shadow: 0 18px 40px rgba(var(--accent-rgb), .18);
}
.sitio-plan-monto { display: inline-block; transition: transform .3s cubic-bezier(.2,.8,.3,1.4); }
.sitio-plan:hover .sitio-plan-monto { transform: scale(1.08); }

/* Las tarjetas de rubro, con el mismo criterio */
.sitio-rubro, .sitio-punto {
  transition: transform .3s cubic-bezier(.2,.8,.3,1.1), box-shadow .3s ease, border-color .3s ease;
}
.sitio-rubro:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(var(--accent-rgb), .16); }

/* ---------- El cursor ----------
   Un círculo que acompaña al mouse y se agranda sobre lo que se puede tocar.
   Solo donde hay un mouse de verdad: `pointer: fine` deja afuera al celular,
   donde no hay cursor que dibujar.

   El cursor del sistema NO se oculta. Uno dibujado por JavaScript siempre va un
   cuadro por detrás del real, y esconder el verdadero para reemplazarlo por uno
   que se arrastra hace que todo el sitio se sienta lento. Este acompaña. */
.sitio-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border: 1.5px solid rgba(var(--accent-rgb), .55);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: width .22s ease, height .22s ease, margin .22s ease,
              background .22s ease, border-color .22s ease, opacity .25s ease;
}
.sitio-cursor.visible { opacity: 1; }
.sitio-cursor.activo {
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  background: rgba(var(--accent-rgb), .12);
  border-color: var(--accent-2);
}
/* Sobre el video el acento azul se pierde; ahí el cursor se pinta claro. */
.sitio-cursor.claro { border-color: rgba(255,255,255,.75); }
.sitio-cursor.claro.activo { background: rgba(52,177,147,.22); border-color: var(--marca-verde); }

@media (hover: none), (pointer: coarse) {
  .sitio-cursor { display: none; }
}

/* ---------- Sin movimiento ----------
   Quien pidió menos animación en su sistema operativo lo pidió por algo: a
   algunas personas el movimiento en pantalla les produce mareo.

   Se apaga lo que reacciona a lo que hace la persona —la inclinación del
   teléfono, el aro del cursor, la aparición al bajar—, que es donde el
   movimiento sorprende. El fondo de la portada queda: el video con su botón de
   pausa y las partículas, que van muy despacio y no responden a nada. */
@media (prefers-reduced-motion: reduce) {
  /* Lo único que se apaga es la aparición al bajar: el contenido se desplaza
     solo, mientras la persona hace otra cosa, y es lo que de verdad puede
     marear. Todo lo demás —la inclinación, el aro del cursor, el brillo de los
     botones— responde al mouse y se detiene al retirarlo. */
  .js-revelar [data-revelar] { opacity: 1; translate: none; transition: none; }
}

/* ---------- Partículas ----------
   Puntos que viajan por caminos invisibles. El truco está en el trazo: una
   línea con guiones de 0,01 px y punta redonda no dibuja una línea, dibuja un
   punto por guion; moviendo el desfase, ese punto recorre el camino.

   Se sirven como un archivo SVG usado de fondo y no pegadas en el HTML: así el
   navegador las guarda en caché, y las dos capas de la página no chocan por
   tener los mismos identificadores adentro.

   La animación vive dentro del SVG, incluida la regla que la apaga cuando
   alguien pidió menos movimiento: desde afuera no se puede detener lo que pasa
   dentro de otro archivo. */

.sitio-particulas {
  position: absolute;
  inset: 0;
  background: url('../sitio/particulas.svg') center / cover no-repeat;
  pointer-events: none;   /* que no se coman ningún clic */
}

/* Sobre el video van más marcadas: ahí compiten con una escena con mucho
   detalle y por debajo de esto no se notarían. */
.sitio-particulas-hero { z-index: 2; opacity: .5; mix-blend-mode: screen; }

/* ---------- La capa que cubre toda la portada ----------
   Fija y no absoluta: al bajar, las partículas se quedan quietas mientras el
   contenido pasa por delante. Eso da la sensación de que la página se mueve
   sobre un fondo, en vez de arrastrarlo.

   Va detrás de todo (z-index 0) y funciona porque las secciones de abajo son
   apenas transparentes. Ponerla por delante del texto sería más fácil, pero
   nada que dificulte leer justifica una decoración. */
body.sitio::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: url('../sitio/particulas.svg') center / cover no-repeat;
  pointer-events: none;

  /* Cómo se mezclan con el fondo depende del tema, y no es un capricho: un
     punto verde oscuro sobre fondo oscuro desaparece, y uno blanco sobre fondo
     claro también. `multiply` los hace oscurecer de día y `screen` los hace
     iluminar de noche, así en los dos casos se ven igual de presentes. */
  opacity: .42;
  mix-blend-mode: multiply;
}
:root[data-theme="oscuro"] body.sitio::before {
  opacity: .55;
  mix-blend-mode: screen;
}

/* El contenido, por delante de las partículas. */
body.sitio > header,
body.sitio > section,
body.sitio > footer { position: relative; z-index: 1; }

/* Las secciones con fondo propio se aclaran lo justo para que las partículas
   se adivinen debajo. Sin esto la capa de arriba quedaría tapada en media
   página y el efecto se vería solamente en la portada. */
.sitio-seccion-alt { background: color-mix(in srgb, var(--surface) 72%, transparent); }
.sitio-seccion-alt .sitio-rubro,
.sitio-seccion-alt .sitio-plan { background: color-mix(in srgb, var(--bg) 86%, transparent); }
.sitio-plan { background: color-mix(in srgb, var(--surface) 86%, transparent); }
.sitio-rubro { background: color-mix(in srgb, var(--surface) 86%, transparent); }

/* La portada tiene su propio fondo opaco y su propia capa de partículas: la
   fija de atrás no se vería y solo gastaría trabajo del navegador. */
.sitio-hero { z-index: 1; }

/* Las partículas se mueven siempre, en cualquier equipo y sin que nadie tenga
   que tocar nada en su sistema. Antes se congelaban cuando el sistema pedía
   menos movimiento —y en iPhone esa opción viene activada más seguido de lo que
   uno cree, así que en medio celular se veían quietas—. Son puntos diminutos
   que tardan doce segundos en cruzar la pantalla y no reaccionan a nada de lo
   que hace la persona: no es el tipo de movimiento que esa preferencia busca
   evitar. */

/* ---------- El control del video ----------
   Discreto y en una esquina: no compite con el título, pero existe. Un video
   que arranca solo tiene que poder pararse. */
.sitio-video-boton {
  position: absolute;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 2;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(9, 38, 77, .45);
  backdrop-filter: blur(6px);
  color: rgba(255,255,255,.85);
  cursor: pointer;
  opacity: .45;
  transition: opacity .2s ease, background .2s ease, transform .2s ease;
}
.sitio-video-boton:hover { opacity: 1; background: rgba(9, 38, 77, .7); transform: scale(1.06); }
.sitio-video-boton:focus-visible { opacity: 1; outline: 2px solid var(--marca-verde); outline-offset: 3px; }
.sitio-video-boton svg { width: 17px; height: 17px; }

/* Se muestra el símbolo contrario a lo que va a pasar al tocarlo: si está
   reproduciendo, el botón ofrece pausa. */
.sitio-video-boton .icono-pausa { display: none; }
.sitio-video-boton.reproduciendo .icono-pausa { display: block; }
.sitio-video-boton.reproduciendo .icono-play { display: none; }

/* ---------- Los botones reaccionan ----------
   Solo en el sitio: adentro del sistema, alguien carga cien ventas por día y un
   botón que hace fiesta cada vez cansa. Acá se entra una vez y hay que invitar
   a tocar.

   El brillo va en una capa con índice NEGATIVO dentro del propio botón. Ahí se
   pinta después del fondo pero antes del texto, que es justo lo que hace falta:
   el destello pasa por encima del color y por debajo de las letras. Para que
   ese índice quede contenido dentro del botón y no se escape hacia atrás, el
   botón se declara `isolation: isolate`. */

body.sitio .btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .2s cubic-bezier(.2,.8,.3,1.3),
              box-shadow .2s ease, background .2s ease, color .2s ease;
}

body.sitio .btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg,
    transparent 25%, rgba(255,255,255,.38) 50%, transparent 75%);
  transform: translateX(-130%);
  transition: transform .6s cubic-bezier(.25,.7,.3,1);
}
body.sitio .btn:hover::after,
body.sitio .btn:focus-visible::after { transform: translateX(130%); }

body.sitio .btn:hover { transform: translateY(-2px) scale(1.025); }
body.sitio .btn:active { transform: translateY(0) scale(.985); transition-duration: .06s; }

body.sitio .btn-accent:hover {
  box-shadow: 0 10px 26px rgba(52, 177, 147, .42);
}
/* El de vidrio se llena un poco más y afirma su borde: sobre el video no puede
   apoyarse en una sombra, que ahí no se ve. */
body.sitio .btn-vidrio:hover {
  background: rgba(255,255,255,.24);
  border-color: rgba(255,255,255,.55);
}
body.sitio .btn-outline:hover {
  border-color: var(--accent-2);
  color: var(--accent);
  box-shadow: 0 8px 20px rgba(var(--accent-rgb), .16);
}

/* La flecha de las tarjetas de rubro se adelanta. Es el detalle que dice
   "esto lleva a algún lado" sin escribirlo. */
.sitio-rubro-cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: gap .25s ease, color .2s ease;
}
.sitio-rubro:hover .sitio-rubro-cta { gap: .7rem; color: var(--accent-2); }

/* El conmutador mensual/anual, con el mismo criterio. */
.sitio-ciclo button { transition: background .2s ease, color .2s ease, transform .15s ease; }
.sitio-ciclo button:hover:not([aria-pressed="true"]) {
  background: rgba(var(--accent-rgb), .10);
  transform: translateY(-1px);
}

/* Nada de esto se apaga con "menos movimiento": no ocurre hasta que alguien
   apunta con el mouse, y se detiene al retirarlo. Lo que sí se apaga con esa
   preferencia es la aparición al hacer scroll, que sucede sola. */

/* En el celular la inclinación la marca el scroll y se recalcula en cada
   cuadro: una transición larga la volvería pastosa, porque el elemento estaría
   siempre persiguiendo un valor que ya cambió. */
@media (max-width: 880px) {
  .sitio-telefono-cuerpo { transition: transform .12s linear; }
  /* Y el video se encuadra al centro: el corrimiento a la derecha existe para
     dejarle sitio al texto, que en pantalla chica va centrado y no al lado. */
  .sitio-hero-video { object-position: center; }
}