/* =========================================================
   estilos.css · Web de Gutia
   Estilo: negro tipo Linear + espacio y titulares tipo Apple
   + animaciones tipo Framer.
   1) Variables  2) Base  3) Componentes  4) Secciones
   5) Animaciones  6) Móvil
   ========================================================= */

/* Tipografía Geist servida desde nuestra propia web (no se envían datos a Google) */
@font-face {
  font-family: "Geist";
  src: url("../fuentes/geist-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. VARIABLES: cambia aquí los colores de toda la web ---------- */
:root {
  --fondo: #08090a;                     /* negro profundo */
  --fondo-2: #0f1012;                   /* tarjetas */
  --borde: rgba(255, 255, 255, 0.08);   /* líneas finas */
  --borde-fuerte: rgba(255, 255, 255, 0.16);
  --texto: #f7f8f8;                     /* blanco */
  --texto-suave: #b4b9c2;               /* gris claro: se lee mejor que el anterior */
  --plata: linear-gradient(180deg, #ffffff 0%, #d6d9e0 45%, #8b919c 100%); /* títulos metálicos */
  --boton-plata: linear-gradient(180deg, #ffffff 0%, #e4e7ec 50%, #b7bcc6 100%); /* botones metálicos */
  --brillo: 94, 106, 210;               /* color del brillo (índigo suave, en RGB) */
  --brillo-2: 56, 189, 248;             /* segundo brillo (azul cielo) */
  --pendiente: #f5a524;                 /* marca los huecos [PENDIENTE] */

  --letra: "Geist", system-ui, -apple-system, sans-serif;
  --radio: 16px;
  --ancho: 1180px;
  --suave: cubic-bezier(0.16, 1, 0.3, 1); /* curva de animación "tipo Apple" */
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; overflow-x: clip; } /* nada puede ensanchar la página */

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--letra);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-weight: 600; line-height: 1.05; letter-spacing: -0.035em; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; position: relative; }
.contenedor--estrecho { max-width: 820px; }

/* Brillo que sigue al ratón por toda la página */
.luz-raton {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(600px circle at var(--rx, 50%) var(--ry, -20%), rgba(var(--brillo), 0.07), transparent 60%);
}
main, .pie, .menu { position: relative; z-index: 1; }

/* ---------- 3. COMPONENTES ---------- */
.logo { font-weight: 700; font-size: 1.3rem; letter-spacing: 0.04em; }

.etiqueta {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--texto-suave);
  margin-bottom: 16px;
}

.insignia {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--texto-suave);
  background: rgba(255, 255, 255, 0.03);
  margin-bottom: 28px;
}
.insignia__punto {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  animation: latido 2s infinite;
}

.boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--boton-plata);
  color: #0b0c0e;
  font-weight: 600;
  font-size: 1rem;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  /* brillo arriba y sombra abajo: da sensación de pieza de metal */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 4px rgba(0, 0, 0, 0.18), 0 6px 20px -8px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  transition: transform 0.3s var(--suave), box-shadow 0.3s var(--suave), background 0.3s;
}
.boton:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 4px rgba(0, 0, 0, 0.18), 0 12px 36px -10px rgba(214, 217, 224, 0.55);
}
.boton__flecha { transition: transform 0.3s var(--suave); }
.boton:hover .boton__flecha { transform: translateX(4px); }

/* Destello que cruza el botón cada pocos segundos */
.boton--brillo::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  transform: skewX(-20deg);
  animation: destello 4s ease-in-out infinite;
}
.boton--pequeno { padding: 8px 18px; font-size: 0.92rem; }
.boton--borde {
  background: rgba(255, 255, 255, 0.04);
  color: #e4e7ec;
  border-color: rgba(214, 217, 224, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.boton--borde:hover { background: rgba(255, 255, 255, 0.09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }

.seccion { padding: 130px 0; }
.seccion__titulo {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  max-width: 15ch;
  margin-bottom: 56px;
  /* Texto en plata metálica */
  background: var(--plata);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.08em;
}

.pendiente { color: var(--pendiente); font-weight: 500; }

/* Tarjetas con foco de luz que sigue al ratón (efecto Linear) */
.foco { position: relative; overflow: hidden; }
.foco::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(350px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.07), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.foco:hover::before { opacity: 1; }

/* ---------- 4. SECCIONES ---------- */

/* 1. Menú */
.menu {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background 0.3s, border-color 0.3s;
}
.menu--scroll {
  background: rgba(8, 9, 10, 0.72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--borde);
}
.menu__fila { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.menu__enlaces { display: flex; align-items: center; gap: 30px; font-size: 0.93rem; }
.menu__enlaces a:not(.boton) { color: var(--texto-suave); transition: color 0.2s; }
.menu__enlaces a:not(.boton):hover { color: var(--texto); }
.menu__hamburguesa { display: none; }

/* 2. Portada */
.portada {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 96px 0 64px;
  overflow: hidden;
}
.portada__brillo {
  position: absolute;
  top: -30%; left: 50%;
  width: 1100px; height: 800px;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side, rgba(var(--brillo), 0.35), transparent),
    radial-gradient(closest-side at 70% 60%, rgba(var(--brillo-2), 0.18), transparent);
  filter: blur(40px);
  animation: flotar 12s ease-in-out infinite alternate;
  pointer-events: none;
}
.portada__rejilla {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
  pointer-events: none;
}
.portada__fila { display: grid; grid-template-columns: 1.25fr 0.9fr; gap: 56px; align-items: center; }
.portada__titulo {
  font-size: clamp(2.9rem, 6.2vw, 4.9rem);
  font-weight: 650;
  letter-spacing: -0.045em;
  margin-bottom: 26px;
}
/* Cada palabra del título (la crea main.js) */
.palabra {
  display: inline-block;
  white-space: pre;
  background: var(--plata);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.1em;  /* para que no se corte la parte baja de letras como la "q" */
  margin-bottom: -0.1em;  /* ...sin separar más las líneas */
}
.portada__subtitulo { font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--texto-suave); max-width: 540px; margin-bottom: 38px; }
.portada__nota { margin-top: 14px; font-size: 0.88rem; color: var(--texto-suave); }

/* Chat de ejemplo */
.chat {
  background: rgba(20, 21, 24, 0.75);
  border: 1px solid var(--borde-fuerte);
  border-radius: 24px;
  padding: 18px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}
.chat__cabecera { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--borde); }
.chat__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.8rem; font-weight: 600;
  background: linear-gradient(135deg, rgba(var(--brillo), 0.9), rgba(var(--brillo-2), 0.9));
}
.chat__nombre { font-weight: 600; font-size: 0.95rem; line-height: 1.2; }
.chat__estado { font-size: 0.78rem; color: #4ade80; }
.chat__cuerpo { display: flex; flex-direction: column; gap: 10px; padding: 18px 0 8px; min-height: 290px; }
.msg {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.9rem;
  line-height: 1.45;
}
.msg--cliente { align-self: flex-end; background: #1f6f54; border-bottom-right-radius: 4px; }
.msg--bot { align-self: flex-start; background: #1c1d21; border: 1px solid var(--borde); border-bottom-left-radius: 4px; }
.msg--escribiendo { align-self: flex-start; display: none; gap: 4px; background: #1c1d21; padding: 12px 14px; }
.msg--escribiendo span { width: 6px; height: 6px; border-radius: 50%; background: var(--texto-suave); animation: puntos 1.2s infinite; }
.msg--escribiendo span:nth-child(2) { animation-delay: 0.15s; }
.msg--escribiendo span:nth-child(3) { animation-delay: 0.3s; }
.chat__pie { font-size: 0.75rem; color: var(--texto-suave); text-align: center; padding-top: 8px; border-top: 1px solid var(--borde); }

/* 3. Franja de herramientas en movimiento */
.herramientas { padding: 40px 0; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); text-align: center; }
.herramientas__texto { color: var(--texto-suave); font-size: 0.9rem; margin-bottom: 22px; }
/* Cinta curvada 3D. Sin JavaScript se ve como una fila de iconos normal;
   con JavaScript (clase cinta3d--activa) cada icono se coloca sobre una curva y se puede arrastrar */
.cinta3d {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px 40px;
  padding: 10px 24px;
}
.cinta3d--activa {
  position: relative;
  display: block;
  height: 190px;
  padding: 0;
  perspective: 800px;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;               /* en el móvil, el dedo sigue pudiendo hacer scroll vertical */
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.cinta3d--activa:active { cursor: grabbing; }
.herr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.cinta3d--activa .herr {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  will-change: transform, opacity;
}
.herr__icono {
  width: 44px;
  height: 44px;
  background: #f7f8f8;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
  transition: background-color 0.4s ease, transform 0.4s var(--suave);
}
.herr__nombre { font-size: 0.82rem; color: var(--texto-suave); white-space: nowrap; transition: color 0.4s ease; }
/* "+400 integraciones más": un número grande en lugar de logo */
.herr__numero {
  height: 44px;
  line-height: 44px;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #f7f8f8;
  transition: transform 0.4s var(--suave);
}
.herr--mas.herr--color .herr__numero { transform: scale(1.12); }

/* Las 3 herramientas más cercanas al centro se pintan con su color de marca */
.herr--color .herr__icono { background: var(--c); transform: scale(1.12); }
.herr--color .herr__nombre { color: var(--texto); }

/* 4. Servicios */
.tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tarjeta {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 30px 28px 34px;
  transition: border-color 0.4s, transform 0.5s var(--suave);
}
.tarjeta:hover { border-color: var(--borde-fuerte); transform: translateY(-6px); }
.tarjeta__numero, .paso__numero {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--texto-suave);
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 40px;
  font-variant-numeric: tabular-nums;
}
.tarjeta h3, .paso h3 { font-size: 1.35rem; letter-spacing: -0.025em; margin-bottom: 10px; }
.tarjeta p, .paso p { color: var(--texto-suave); font-size: 0.98rem; }

/* 5. Caso clínica dental */
.caso { border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); background: radial-gradient(ellipse 60% 70% at 80% 50%, rgba(var(--brillo), 0.10), transparent 70%); }
.caso__fila { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: center; }
.caso__texto > p { color: var(--texto-suave); margin-bottom: 14px; }
.lista-check li { position: relative; padding: 13px 0 13px 34px; border-bottom: 1px solid var(--borde); }
.lista-check li::before {
  content: "";
  position: absolute;
  left: 3px; top: 20px;
  width: 13px; height: 7px;
  border-left: 2px solid var(--texto);
  border-bottom: 2px solid var(--texto);
  transform: rotate(-45deg);
}
.moviles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.movil {
  aspect-ratio: 9 / 19;
  border: 1px solid var(--borde-fuerte);
  border-radius: 30px;
  padding: 7px;
  background: #0d0e10;
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.9);
}
.movil:nth-child(2) { margin-top: -40px; }
.movil { position: relative; margin-bottom: 34px; }
.movil figcaption { position: absolute; left: 0; right: 0; bottom: -30px; text-align: center; font-size: 0.8rem; color: var(--texto-suave); }
.moviles__nota { text-align: center; font-size: 0.78rem; color: var(--texto-suave); margin-top: 18px; opacity: 0.7; }

/* Pantalla de WhatsApp (modo oscuro) dibujada con código */
.wa {
  height: 100%;
  border-radius: 23px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #0b141a;
  font-size: 0.68rem;
  line-height: 1.4;
}
.wa__barra {
  display: flex; align-items: center; gap: 7px;
  padding: 22px 10px 9px;
  background: #1f2c34;
}
.wa__barra b { display: block; font-size: 0.68rem; font-weight: 600; white-space: nowrap; }
.wa__barra small { display: block; font-size: 0.58rem; color: #8696a0; }
.wa__foto {
  flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.5rem; font-weight: 700;
  background: linear-gradient(135deg, rgba(var(--brillo), 0.9), rgba(var(--brillo-2), 0.9));
}
.wa__chat { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 10px 8px; }
.wa__msg {
  align-self: flex-start;
  max-width: 88%;
  background: #202c33;
  padding: 6px 8px;
  border-radius: 8px;
  border-top-left-radius: 2px;
}
.wa__msg--yo { align-self: flex-end; background: #005c4b; border-radius: 8px; border-top-right-radius: 2px; }
.wa__botones { display: flex; flex-direction: column; gap: 3px; max-width: 88%; }
.wa__botones span {
  background: #202c33;
  color: #53bdeb;
  text-align: center;
  padding: 6px;
  border-radius: 8px;
  font-weight: 500;
}
.wa__lista { background: #202c33; border-radius: 8px; padding: 6px 8px; max-width: 92%; }
.wa__lista-titulo { font-weight: 600; color: #e9edef; padding-bottom: 5px; margin-bottom: 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.wa__lista span {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.wa__lista span::after {
  content: "";
  width: 9px; height: 9px;
  border: 1.5px solid #8696a0;
  border-radius: 50%;
}

/* 6. Sectores */
.sectores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sector {
  display: flex; align-items: center; gap: 14px;
  padding: 20px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  font-weight: 500;
  font-size: 0.97rem;
  background: rgba(255, 255, 255, 0.015);
  transition: border-color 0.3s, transform 0.4s var(--suave);
}
.sector:hover { border-color: var(--borde-fuerte); transform: translateY(-3px); }
.sector svg { flex-shrink: 0; width: 24px; height: 24px; fill: none; stroke: var(--texto); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.sectores__frase { margin-top: 56px; font-size: clamp(1.2rem, 2.4vw, 1.7rem); letter-spacing: -0.02em; color: var(--texto-suave); max-width: 780px; line-height: 1.4; }
.sectores__frase strong { color: var(--texto); font-weight: 500; }

/* 7. Cómo trabajamos: línea que conecta los pasos */
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; position: relative; }
.pasos::before {
  content: "";
  position: absolute;
  top: 14px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--borde-fuerte), rgba(var(--brillo), 0.6), var(--borde-fuerte));
  transform-origin: left;
  transform: scaleX(var(--linea, 0));
  transition: transform 1.4s var(--suave);
}
.paso { position: relative; }
.paso__numero { background: var(--fondo); position: relative; }

/* 8. Antes / después */
.comparar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.comparar__col { border-radius: 20px; padding: 36px 32px; border: 1px solid var(--borde); }
.comparar__col h3 { font-size: 1.4rem; margin-bottom: 18px; }
.comparar__col li { padding: 14px 0 14px 32px; position: relative; border-top: 1px solid var(--borde); }
.comparar__col--sin { color: var(--texto-suave); }
.comparar__col--sin li { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, 0.2); }
.comparar__col--sin li::before { content: "✕"; position: absolute; left: 2px; opacity: 0.5; text-decoration: none; }
.comparar__col--con {
  border-color: rgba(var(--brillo), 0.5);
  background: radial-gradient(ellipse 90% 80% at 50% 0%, rgba(var(--brillo), 0.18), rgba(255, 255, 255, 0.02));
  box-shadow: 0 0 60px -20px rgba(var(--brillo), 0.5);
}
.comparar__col--con li::before { content: "✓"; position: absolute; left: 2px; font-weight: 700; color: #4ade80; }

/* 9. Preguntas (desplegables con animación) */
.preguntas { border-top: 1px solid var(--borde); }
.pregunta { border-bottom: 1px solid var(--borde); }
.pregunta summary {
  list-style: none;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 24px 0;
  font-weight: 500;
  font-size: 1.12rem;
  letter-spacing: -0.015em;
  transition: color 0.2s;
}
.pregunta summary:hover { color: #fff; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
  content: "+";
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--borde-fuerte);
  border-radius: 50%;
  font-size: 1.1rem;
  color: var(--texto-suave);
  transition: transform 0.4s var(--suave);
}
.pregunta[open] summary::after { transform: rotate(45deg); }
.pregunta__respuesta { overflow: hidden; }
.pregunta__respuesta p { padding: 0 50px 24px 0; color: var(--texto-suave); }

/* 10. Llamada final */
.final { padding: 30px 0 120px; }
.final__caja {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 110px 40px;
  border-radius: 32px;
  border: 1px solid var(--borde-fuerte);
  background: #0c0d0f;
}
.final__brillo {
  position: absolute;
  bottom: -60%; left: 50%;
  width: 900px; height: 600px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(var(--brillo), 0.45), rgba(var(--brillo-2), 0.12) 60%, transparent);
  filter: blur(30px);
  animation: flotar 10s ease-in-out infinite alternate;
  pointer-events: none;
}
.final__caja > *:not(.final__brillo) { position: relative; }
.final__caja h2 {
  font-size: clamp(3rem, 8vw, 6rem);
  margin-bottom: 16px;
  background: var(--plata);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.final__caja p { font-size: 1.15rem; color: var(--texto-suave); max-width: 480px; margin: 0 auto 36px; }
.final__botones { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* 11. Pie */
.pie { border-top: 1px solid var(--borde); padding: 30px 0; color: var(--texto-suave); font-size: 0.9rem; }
.pie__fila { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.pie .logo { font-size: 1.15rem; color: var(--texto); }

.pie__enlace { transition: color 0.2s; }
.pie__enlace:hover { color: var(--texto); }

/* Página de política de privacidad */
.legal { padding: 140px 0 100px; position: relative; z-index: 1; }
.legal h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); margin-bottom: 12px; }
.legal__fecha { color: var(--texto-suave); font-size: 0.9rem; margin-bottom: 48px; }
.legal h2 { font-size: 1.3rem; letter-spacing: -0.02em; margin: 44px 0 14px; }
.legal p, .legal li { color: var(--texto-suave); margin-bottom: 12px; }
.legal b { color: var(--texto); font-weight: 500; }
.legal ul { padding-left: 4px; }
.legal li { position: relative; padding-left: 18px; }
.legal li::before { content: "·"; position: absolute; left: 4px; color: var(--texto); }
.legal a { color: var(--texto); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--borde-fuerte); }

/* ---------- 5. ANIMACIONES ---------- */

/* Aparecer al hacer scroll: sube, se aclara y se enfoca (efecto Framer) */
.js .aparecer {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
  transition: opacity 0.9s var(--suave), transform 0.9s var(--suave), filter 0.9s var(--suave);
}
.js .aparecer.visible { opacity: 1; transform: none; filter: none; }

/* Palabras del título: entran una a una */
.js .palabra { opacity: 0; transform: translateY(40%); filter: blur(10px); transition: opacity 0.8s var(--suave), transform 0.8s var(--suave), filter 0.8s var(--suave); }
.js .palabra.visible { opacity: 1; transform: none; filter: none; }

/* Mensajes del chat */
.js [data-chat] { opacity: 0; transform: translateY(10px) scale(0.97); transition: opacity 0.5s var(--suave), transform 0.5s var(--suave); }
.js [data-chat].visible { opacity: 1; transform: none; }

@keyframes flotar { from { transform: translateX(-50%) translateY(0) scale(1); } to { transform: translateX(-46%) translateY(40px) scale(1.08); } }
@keyframes destello { 0%, 60% { left: -60%; } 100% { left: 130%; } }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }
@keyframes puntos { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Si la persona tiene desactivadas las animaciones, se lo respetamos */
@media (prefers-reduced-motion: reduce) {
  /* html.forzar-animar = modo prueba (?animar en la dirección): ignora esta regla */
  html:not(.forzar-animar) { scroll-behavior: auto; }
  html:not(.forzar-animar) *, html:not(.forzar-animar) *::before, html:not(.forzar-animar) *::after { animation: none !important; transition: none !important; }
  html:not(.forzar-animar).js .aparecer, html:not(.forzar-animar).js .palabra, html:not(.forzar-animar).js [data-chat] { opacity: 1; transform: none; filter: none; }
}

/* ---------- 6. TABLET Y MÓVIL ---------- */
@media (max-width: 960px) {
  .portada__fila { grid-template-columns: 1fr; gap: 48px; }
  .chat { max-width: 440px; }
  .tarjetas { grid-template-columns: 1fr 1fr; }
  .sectores { grid-template-columns: 1fr 1fr; }
  .caso__fila { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .caso__fila > * { min-width: 0; }
  .luz-raton { display: none; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .contenedor { padding: 0 20px; }
  .seccion { padding: 90px 0; }
  .seccion__titulo { margin-bottom: 40px; }
  .portada { padding-top: 110px; }
  .insignia { font-size: 0.78rem; }

  .menu__hamburguesa {
    display: flex; flex-direction: column; justify-content: center; gap: 7px;
    width: 42px; height: 42px;
    background: none;
    border: 1px solid var(--borde-fuerte);
    border-radius: 50%;
    cursor: pointer;
    padding: 0 12px;
  }
  .menu__hamburguesa span { display: block; height: 1.5px; background: var(--texto); transition: transform 0.3s var(--suave); }
  .menu--abierto .menu__hamburguesa span:first-child { transform: translateY(4.25px) rotate(45deg); }
  .menu--abierto .menu__hamburguesa span:last-child { transform: translateY(-4.25px) rotate(-45deg); }

  .menu__enlaces {
    position: fixed;
    inset: 68px 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 8px 20px 28px;
    background: rgba(8, 9, 10, 0.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--borde);
    transform: translateY(-10px);
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s, transform 0.4s var(--suave), visibility 0.3s;
  }
  .menu--abierto { background: rgba(8, 9, 10, 0.97); }
  .menu--abierto .menu__enlaces { opacity: 1; transform: none; visibility: visible; }
  .menu__enlaces a:not(.boton) { width: 100%; padding: 15px 0; font-size: 1.15rem; color: var(--texto); border-bottom: 1px solid var(--borde); }
  .menu__enlaces .boton { margin-top: 20px; }

  .tarjetas, .pasos, .sectores, .comparar { grid-template-columns: 1fr; }
  .pasos { gap: 36px; }
  .pasos::before { display: none; }
  .tarjeta__numero, .paso__numero { margin-bottom: 22px; }
  /* En el móvil, las pantallas se deslizan de lado para que se lean bien */
  .moviles-zona { margin: 0 -20px; }
  .moviles {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 20px 8px;
    scrollbar-width: none;
  }
  .moviles::-webkit-scrollbar { display: none; }
  .movil { flex: 0 0 68%; scroll-snap-align: center; }
  .movil:nth-child(2) { margin-top: 0; }
  .wa { font-size: 0.78rem; }
  .moviles__nota::before { content: "Desliza para ver más · "; }
  .final__caja { padding: 72px 22px; border-radius: 24px; }
  .final__botones .boton { width: 100%; justify-content: center; }
  .pie__fila { flex-direction: column; align-items: flex-start; }
}

/* Enlaces legales del pie (aviso legal, privacidad, cookies) */
.pie__legal { display: flex; gap: 20px; flex-wrap: wrap; }

/* Títulos pequeños (tarjetas, pasos, antes/después) también en plata */
.tarjeta h3, .paso h3, .comparar__col--con h3 {
  background: var(--plata);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Logo 3D pequeño arriba de la portada (js/logo3d.js) */
.logo3d {
  width: 150px;
  height: 132px;
  margin: -6px 0 10px -20px;   /* el lienzo tiene aire alrededor; así el logo queda alineado con el texto */
  opacity: 0;
  transition: opacity 1.2s var(--suave);
}
.logo3d--listo { opacity: 1; }
.logo3d canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: pan-y;                  /* en el móvil se sigue pudiendo bajar con el dedo */
}
.logo3d--activo canvas { cursor: grabbing; }
@media (max-width: 760px) {
  .logo3d { width: 130px; height: 115px; margin: -6px 0 12px -16px; }
}

/* Botón flotante de WhatsApp, abajo a la derecha */
.wa-flotante {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 10px;
  animation: wa-entrar 0.6s var(--suave) 1.2s both;   /* aparece un poco después de cargar */
}
.wa-flotante__icono {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 10px 30px -8px rgba(37, 211, 102, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  position: relative;
  transition: transform 0.3s var(--suave), box-shadow 0.3s var(--suave);
}
.wa-flotante__icono::before {             /* el logo de WhatsApp en blanco */
  content: "";
  position: absolute;
  inset: 14px;
  background: #fff;
  -webkit-mask: url("/img/iconos/whatsapp.svg") center / contain no-repeat;
  mask: url("/img/iconos/whatsapp.svg") center / contain no-repeat;
}
.wa-flotante__texto {                     /* etiqueta que aparece al pasar el ratón */
  background: #f7f8f8;
  color: #0b0c0e;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.3s var(--suave);
}
.wa-flotante:hover .wa-flotante__icono,
.wa-flotante:focus-visible .wa-flotante__icono { transform: scale(1.08); box-shadow: 0 14px 36px -8px rgba(37, 211, 102, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.wa-flotante:hover .wa-flotante__texto,
.wa-flotante:focus-visible .wa-flotante__texto { opacity: 1; transform: none; }
.wa-flotante:focus-visible { outline: none; }
.wa-flotante:focus-visible .wa-flotante__icono { outline: 2px solid #fff; outline-offset: 3px; }
@keyframes wa-entrar { from { opacity: 0; transform: translateY(20px) scale(0.8); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .wa-flotante__icono { width: 54px; height: 54px; }
  .wa-flotante__icono::before { inset: 13px; }
  .wa-flotante__texto { display: none; }  /* en el móvil no hay "pasar el ratón" */
}

/* =========================================================
   5b. TU EQUIPO DE AGENTES (oficina en perspectiva, js/oficina.js)
   ========================================================= */
.oficina { border-bottom: 1px solid var(--borde); }
.oficina .seccion__titulo { margin-bottom: 22px; }
.oficina__intro { color: var(--texto-suave); max-width: 560px; margin-bottom: 48px; font-size: 1.08rem; }

/* Escritorio: arriba los botones, debajo el dibujo (izquierda) y la ficha (derecha) */
.oficina__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-areas: "sectores sectores" "agentes agentes" "escena panel" "leyenda leyenda";
  gap: 24px 40px;
  align-items: center;
}
.oficina__agentes { grid-area: agentes; display: flex; flex-wrap: wrap; gap: 8px; }
.oficina__escena { grid-area: escena; position: relative; }
.oficina__panel { grid-area: panel; }

/* Botones de los agentes: el elegido se ve en plata */
.oficina__boton {
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--texto-suave);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  transition: color 0.2s, background 0.3s, border-color 0.3s;
}
.oficina__boton:hover { color: var(--texto); border-color: rgba(255, 255, 255, 0.3); }
.oficina__boton[aria-pressed="true"] {
  background: var(--boton-plata);
  color: #0b0c0e;
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.oficina__boton:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Selector de sector: pestañas de texto con una línea debajo (distintas de los botones de agente) */
.oficina__sectores-zona { grid-area: sectores; border-bottom: 1px solid var(--borde); }
.oficina__sectores { display: flex; flex-wrap: wrap; gap: 2px 22px; }
.oficina__sector {
  font: inherit;
  font-size: 0.92rem;
  color: var(--texto-suave);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 0 12px;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.3s;
}
.oficina__sector:hover { color: var(--texto); }
.oficina__sector[aria-pressed="true"] { color: var(--texto); border-bottom-color: #e4e7ec; }
.oficina__sector:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* El "+ Otro sector" se ve un poco distinto */
.oficina__sector--mas { color: #c7cdff; }

/* Leyenda debajo del dibujo: qué es cada cosa */
.oficina__leyenda {
  grid-area: leyenda;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  counter-reset: paso;
}
.oficina__leyenda li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px;
  border: 1px solid var(--borde);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.015);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--texto-suave);
}
.oficina__leyenda b { color: var(--texto); font-weight: 600; }
.leyenda__icono { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; }
.leyenda__icono--mensaje { background: radial-gradient(circle, #e6e9ff 0 4px, rgba(var(--brillo), 0.45) 5px 10px, transparent 11px); }
.leyenda__icono--robot { border-radius: 5px; width: 18px; height: 18px; margin: 3px 2px 0; background: linear-gradient(135deg, #f4f5f7, #8b919c); box-shadow: inset 0 0 0 4px transparent; position: relative; }
.leyenda__icono--robot::after { content: ""; position: absolute; inset: 5px 3px 6px; border-radius: 2px; background: #0d0f14; }
.leyenda__icono--hecho { background: #4ade80; }
.leyenda__icono--hecho::after { content: ""; width: 8px; height: 4px; margin-top: -3px; border-left: 2px solid #062b14; border-bottom: 2px solid #062b14; transform: rotate(-45deg); }
.leyenda__icono--tu { background: #5e6ad2; color: #fff; font-weight: 700; font-size: 0.8rem; }

/* Menú en tablet: con 6 enlaces hay que juntarlos un poco para que quepan en una línea */
@media (min-width: 761px) and (max-width: 1100px) {
  .menu__enlaces { gap: 16px; font-size: 0.86rem; }
  .menu__enlaces a { white-space: nowrap; }
}

/* Demo real por WhatsApp (debajo de la oficina) */
.demo {
  margin-top: 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 30px;
  border: 1px solid rgba(var(--brillo), 0.45);
  border-radius: 20px;
  background: radial-gradient(ellipse 70% 120% at 0% 0%, rgba(var(--brillo), 0.16), rgba(255, 255, 255, 0.015));
}
.demo__titulo {
  font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 6px;
  background: var(--plata); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.demo__texto { color: var(--texto-suave); font-size: 0.95rem; max-width: 560px; }
.demo .pendiente { font-size: 0.85rem; margin-top: 6px; }
.demo .boton { flex-shrink: 0; }

/* Tu panel: todo en un solo sitio */
.panelg .seccion__titulo { margin-bottom: 22px; }
.panelg__intro { color: var(--texto-suave); max-width: 600px; margin-bottom: 52px; font-size: 1.08rem; }
.panelg__fila { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0; align-items: center; }

/* Las apps de "antes": cada una con una línea por la que viaja un punto hasta el panel */
.panelg__apps { display: grid; gap: 14px; }
.panelg__apps li {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  font-size: 0.9rem; color: var(--texto-suave);
  padding: 10px 14px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  margin-right: 46px;
}
.panelg__apps li::before {               /* la línea hasta el panel */
  content: "";
  position: absolute;
  left: 100%; top: 50%;
  width: 46px; height: 1px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0 3px, transparent 3px 7px);
}
.panelg__apps li::after {                /* el punto que viaja */
  content: "";
  position: absolute;
  left: 100%; top: calc(50% - 3px);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 8px var(--c);
  animation: viajar 2.5s var(--r) ease-in infinite;
}
@keyframes viajar { 0% { transform: translateX(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateX(44px); opacity: 0; } }
.panelg__icono { width: 18px; height: 18px; background: var(--c); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }

/* Maqueta del panel */
.maqueta {
  border: 1px solid var(--borde-fuerte);
  border-radius: 18px;
  background: #0c0d10;
  overflow: hidden;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9), 0 0 80px -30px rgba(var(--brillo), 0.5);
  font-size: 0.8rem;
}
.maqueta__barra { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--borde); background: #111216; }
.maqueta__barra span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.maqueta__barra p { margin-left: 12px; padding: 3px 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); color: #7d828c; font-size: 0.72rem; }
.maqueta__cuerpo { display: grid; grid-template-columns: 140px minmax(0, 1fr); min-height: 330px; }
.maqueta__menu { border-right: 1px solid var(--borde); padding: 16px 10px; display: grid; align-content: start; gap: 4px; }
.maqueta__menu p { padding: 7px 10px; border-radius: 8px; color: var(--texto-suave); }
.maqueta__menu .activo { background: rgba(255, 255, 255, 0.07); color: var(--texto); }
.maqueta__logo { font-weight: 700; letter-spacing: 0.04em; color: var(--texto) !important; margin-bottom: 10px; }
.maqueta__main { padding: 18px 20px; display: grid; gap: 14px; align-content: start; }
.maqueta__hola { font-size: 1.1rem; font-weight: 600; color: var(--texto); }
.maqueta__sub { color: #7d828c; margin-top: -12px; }
.maqueta__tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.maqueta__tarjetas div { border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; display: grid; background: rgba(255, 255, 255, 0.02); }
.maqueta__tarjetas b { font-size: 1.3rem; color: var(--texto); }
.maqueta__tarjetas span { color: #7d828c; font-size: 0.72rem; }
.maqueta__columnas { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; }
.maqueta__caja { border: 1px solid var(--borde); border-radius: 10px; padding: 10px; display: grid; gap: 6px; align-content: start; }
.maqueta__titulo { font-weight: 600; color: var(--texto); margin-bottom: 2px; }
.conv { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 8px; }
.conv i { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 0.6rem; font-weight: 700; background: linear-gradient(135deg, rgba(var(--brillo), 0.9), rgba(var(--brillo-2), 0.9)); }
.conv span { flex: 1; min-width: 0; display: grid; }
.conv b { color: var(--texto); font-weight: 500; }
.conv small { color: #7d828c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.7rem; }
.conv em, .cita em { font-style: normal; font-size: 0.65rem; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--borde-fuerte); color: #d6d9e0; white-space: nowrap; }
.conv em.tu { border-color: rgba(134, 239, 172, 0.5); color: #86efac; }
/* La conversación nueva se ilumina de vez en cuando, como si acabara de llegar */
.conv--nueva { animation: nueva 3.5s ease-in-out infinite; }
@keyframes nueva { 0%, 100% { background: transparent; } 15%, 40% { background: rgba(var(--brillo), 0.16); } }
.cita { display: flex; align-items: center; gap: 8px; padding: 6px; border-left: 2px solid #d6d9e0; background: rgba(255, 255, 255, 0.025); border-radius: 4px; }
.cita time { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.cita span { flex: 1; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.panelg__puntos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; }
.panelg__puntos li { padding-top: 16px; border-top: 1px solid var(--borde-fuerte); color: var(--texto-suave); font-size: 0.95rem; }
.panelg__puntos b { color: var(--texto); font-weight: 600; }

/* Calculadora */
.calculadora { border-top: 1px solid var(--borde); }
.calculadora .seccion__titulo { margin-bottom: 22px; max-width: 18ch; }
.calculadora__intro { color: var(--texto-suave); max-width: 560px; margin-bottom: 44px; font-size: 1.08rem; }
.calculadora__caja {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  border: 1px solid var(--borde-fuerte);
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.015);
}
.calculadora__datos { padding: 36px; display: grid; gap: 30px; }
.barra { display: grid; gap: 12px; cursor: pointer; }
.barra__fila { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 0.95rem; color: var(--texto-suave); }
.barra output { color: var(--texto); font-weight: 600; font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* La barra: gris, con la parte rellena en plata */
.barra input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, #d6d9e0 var(--relleno, 50%), rgba(255, 255, 255, 0.1) var(--relleno, 50%));
  outline: none; cursor: pointer;
}
.barra input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--boton-plata);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.barra input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: #e4e7ec; border: 1px solid rgba(255, 255, 255, 0.7);
}
.barra input[type="range"]:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.calculadora__resultado {
  padding: 36px;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  border-left: 1px solid var(--borde);
  background: radial-gradient(ellipse 90% 80% at 100% 0%, rgba(var(--brillo), 0.2), transparent 70%);
}
.calculadora__etiqueta { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #7d828c; margin-bottom: 10px; }
.calculadora__cifra {
  font-size: clamp(2.6rem, 5vw, 3.8rem); font-weight: 650; letter-spacing: -0.04em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
  background: var(--plata); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: 0.08em;
}
.calculadora__cifra small { font-size: 1.1rem; font-weight: 500; letter-spacing: -0.01em; }
.calculadora__ano { color: var(--texto-suave); margin: 8px 0 28px; }
.calculadora__ano span { color: var(--texto); font-weight: 600; }
.calculadora__nota { font-size: 0.78rem; color: var(--texto-suave); opacity: 0.75; margin-top: 14px; }

/* Sección "Sectores": 10 tarjetas que llevan a la oficina */
.sectores__intro { color: var(--texto-suave); max-width: 560px; margin: -32px 0 40px; font-size: 1.08rem; }
.sectores--diez { grid-template-columns: repeat(5, 1fr); }
a.sector { cursor: pointer; }
/* Tarjeta "+": ocupa toda la fila y lleva borde discontinuo */
.sector--mas { grid-column: 1 / -1; border-style: dashed; border-color: var(--borde-fuerte); color: var(--texto-suave); font-weight: 400; }
.sector--mas b { color: var(--texto); font-weight: 600; }
.sector__mas { flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--borde-fuerte); font-size: 1.2rem; color: var(--texto); line-height: 1; }
a.sector:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Brillo índigo detrás del dibujo */
.oficina__escena::before {
  content: "";
  position: absolute;
  inset: 5% 5% 0;
  background: radial-gradient(closest-side, rgba(var(--brillo), 0.22), transparent);
  filter: blur(30px);
  pointer-events: none;
}
.oficina__dibujo { position: relative; display: block; width: 100%; height: auto; overflow: visible; }

/* Reloj de noche arriba a la izquierda del dibujo (la hora la mueve js/oficina.js) */
.oficina__hora {
  position: absolute;
  top: 0; left: 0;
  z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.82rem;
  color: var(--texto-suave);
  padding: 6px 12px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  background: rgba(15, 16, 19, 0.8);
  font-variant-numeric: tabular-nums;
}
.oficina__hora svg { width: 14px; height: 14px; fill: #c7cdff; }
.oficina__hora span { color: var(--texto); font-weight: 600; }

/* Suelo */
.suelo { fill: #0e0f12; stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; }
.suelo__der { fill: #07080a; }
.suelo__izq { fill: #0b0c0e; }
.suelo__linea { stroke: rgba(255, 255, 255, 0.035); stroke-width: 1; }

/* Caminos por el pasillo: línea discontinua que "corre" + mensajes (puntitos de luz) que viajan */
.flujo { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 1.5; stroke-dasharray: 3 7; animation: correr 1s linear infinite; transition: stroke 0.4s; }
.flujo.flujo--activo { stroke: rgba(var(--brillo), 0.75); }
@keyframes correr { to { stroke-dashoffset: -10; } }
.mensaje__punto { fill: #e6e9ff; }
.mensaje__halo { fill: rgba(var(--brillo), 0.35); }
.mensaje.flujo--activo .mensaje__halo { fill: rgba(var(--brillo), 0.7); }

/* Despacho de cada agente */
.puesto { cursor: pointer; }
.zona { fill: rgba(255, 255, 255, 0.025); stroke: rgba(255, 255, 255, 0.09); stroke-width: 1; transition: fill 0.4s, stroke 0.4s; }
.puesto:hover .zona { stroke: rgba(255, 255, 255, 0.22); }
.puesto--activo .zona { fill: rgba(var(--brillo), 0.16); stroke: rgba(var(--brillo), 0.85); }

/* Mesa y ordenador (gris oscuro) */
.mesa .cara-arriba { fill: #2b2e35; }
.mesa .cara-izq { fill: #1d1f24; }
.mesa .cara-der { fill: #141519; }
.monitor .cara-arriba { fill: #3a3e46; }
.monitor .cara-izq { fill: #24262c; }
.monitor .cara-der { fill: #191b1f; }
.mesa polygon, .monitor polygon { stroke: rgba(255, 255, 255, 0.06); stroke-width: 0.6; stroke-linejoin: round; }
.pantalla { fill: #12142a; transition: fill 0.4s; }
.pantalla__linea { fill: rgba(190, 198, 255, 0.35); animation: escribir 1.8s steps(2) infinite; }
.pantalla__linea--2 { animation-delay: -0.6s; }
.pantalla__linea--3 { animation-delay: -1.2s; }
.puesto--activo .pantalla { fill: #262c63; }
.puesto--activo .pantalla__linea { fill: rgba(220, 225, 255, 0.85); }
@keyframes escribir { 50% { opacity: 0.25; } }

/* Robot plateado */
.robot .cara-arriba { fill: #f4f5f7; }
.robot .cara-izq { fill: #c9cdd4; }
.robot .cara-der { fill: #8b919c; }
.robot polygon { stroke: rgba(255, 255, 255, 0.35); stroke-width: 0.6; stroke-linejoin: round; }
.robot__cara { fill: #0d0f14; }
.robot__ojo { fill: #9aa3ff; transition: fill 0.4s; }
.puesto--activo .robot__ojo { fill: #fff; }
.robot__antena { stroke: #8b919c; stroke-width: 1.5; }
/* La luz de la antena parpadea: el robot está trabajando */
.robot__luz { fill: #c7cdff; animation: antena 1.4s ease-in-out infinite; }
.puesto--activo .robot__luz { filter: drop-shadow(0 0 4px rgba(var(--brillo), 1)); }
@keyframes antena { 50% { fill: #4b5060; } }
/* Saltitos de trabajo (más rápidos que un simple flotar) y la sombra se encoge al subir */
.robot__cuerpo { animation: saltito 1.6s var(--suave) infinite; }
@keyframes saltito { 0%, 55%, 100% { transform: translateY(0); } 25% { transform: translateY(-9px); } }
.sombra { fill: rgba(0, 0, 0, 0.55); animation: sombra 1.6s var(--suave) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sombra { 0%, 55%, 100% { transform: scale(1); } 25% { transform: scale(0.75); } }
/* Los ojos parpadean de vez en cuando */
.robot__ojos { animation: parpadeo 4s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes parpadeo { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }

/* Globo "tarea hecha": aparece, se queda un momento y se va */
.globo, .globo-movil { opacity: 0; animation: globo 6.4s var(--suave) infinite; transform-box: fill-box; transform-origin: center bottom; }
@keyframes globo {
  0% { opacity: 0; transform: translateY(6px) scale(0.7); }
  6%, 34% { opacity: 1; transform: none; }
  42%, 100% { opacity: 0; transform: translateY(-10px); }
}
.globo rect { fill: rgba(15, 16, 19, 0.95); stroke: rgba(134, 239, 172, 0.45); stroke-width: 1; }
.globo text { fill: var(--texto); font-family: var(--letra); font-size: 12.5px; font-weight: 500; }
.globo__circulo { fill: #4ade80; }
.globo__check { fill: none; stroke: #062b14; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.globo-movil { display: none; }

/* "Tú": cama, manta que respira, "Z" que suben */
.cama .cara-arriba { fill: #3a3e46; }
.cama .cara-izq { fill: #24262c; }
.cama .cara-der { fill: #191b1f; }
.almohada .cara-arriba { fill: #f4f5f7; }
.almohada .cara-izq { fill: #c9cdd4; }
.almohada .cara-der { fill: #8b919c; }
.manta__caja .cara-arriba { fill: #5e6ad2; }
.manta__caja .cara-izq { fill: #4a54b0; }
.manta__caja .cara-der { fill: #363e85; }
.mesita .cara-arriba { fill: #2b2e35; }
.mesita .cara-izq { fill: #1d1f24; }
.mesita .cara-der { fill: #141519; }
.movil .cara-arriba { fill: #0d0f14; }
.cama polygon, .almohada polygon, .manta__caja polygon, .mesita polygon { stroke: rgba(255, 255, 255, 0.08); stroke-width: 0.6; stroke-linejoin: round; }
.cabeza { fill: #d6d9e0; }
.manta { animation: respirar 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center bottom; }
@keyframes respirar { 50% { transform: scaleY(1.07); } }
.zzz { fill: #c7cdff; font-family: var(--letra); font-weight: 700; opacity: 0; animation: zzz 2.7s ease-out infinite; }
@keyframes zzz {
  0% { opacity: 0; transform: translate(0, 0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(14px, -30px); }
}
.puesto--tu.puesto--activo .zona { fill: rgba(var(--brillo), 0.1); }

/* Sin animaciones (o "reducir movimiento"): todo se ve quieto pero completo */
@media (prefers-reduced-motion: reduce) {
  html:not(.forzar-animar) .globo, html:not(.forzar-animar) .zzz { opacity: 1; }
}

/* Nombre encima de cada agente */
.oficina__etiqueta rect { fill: rgba(15, 16, 19, 0.92); stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; transition: fill 0.4s, stroke 0.4s; }
.oficina__etiqueta text { fill: var(--texto-suave); font-family: var(--letra); font-size: 13px; font-weight: 500; transition: fill 0.4s; }
.puesto--activo .oficina__etiqueta rect { fill: #f4f5f7; stroke: #fff; }
.puesto--activo .oficina__etiqueta text { fill: #0b0c0e; }

/* Ficha del agente elegido */
.oficina__panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--borde-fuerte);
  border-radius: 20px;
  padding: 30px 28px;
  min-height: 360px;
}
.oficina__panel--cambio .oficina__panel-dentro { animation: ficha 0.5s var(--suave); }
@keyframes ficha { from { opacity: 0; transform: translateY(8px); } }
.oficina__estado { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; color: #86efac; margin-bottom: 18px; }
.oficina__punto { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; animation: latido 2s infinite; }
/* Ficha de "Tú": estado en índigo y sin latido (estás durmiendo) */
.oficina__panel--tu .oficina__estado { color: #c7cdff; }
.oficina__panel--tu .oficina__punto { background: #8a94ff; animation: none; }
.oficina__panel h3 {
  font-size: 1.8rem;
  margin-bottom: 12px;
  background: var(--plata);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.oficina__que { color: var(--texto-suave); margin-bottom: 26px; }
.oficina__subtitulo { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #7d828c; margin-bottom: 10px; }
.oficina__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.oficina__chips li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.85rem;
  padding: 5px 12px;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
}
.oficina__icono { width: 14px; height: 14px; background: #f7f8f8; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.oficina__msg {
  font-size: 0.92rem;
  line-height: 1.45;
  padding: 11px 14px;
  border-radius: 14px;
  border-top-left-radius: 4px;
  background: #1c1d21;
  border: 1px solid var(--borde);
}
.oficina__nota { text-align: center; font-size: 0.78rem; color: var(--texto-suave); margin-top: 28px; opacity: 0.7; }

/* Cuando la sección no se ve, se paran todas sus animaciones (lo activa js/oficina.js) */
.oficina--pausa .oficina__escena *, .oficina--pausa .oficina__punto { animation-play-state: paused !important; }

/* Sin JavaScript no hay dibujo ni botones: solo se ve la ficha */
html:not(.js) .oficina__escena, html:not(.js) .oficina__agentes { display: none; }

@media (max-width: 960px) {
  .oficina__cuerpo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sectores" "agentes" "escena" "leyenda" "panel"; }
  .oficina__leyenda { grid-template-columns: 1fr 1fr; }
  .sectores--diez { grid-template-columns: repeat(3, 1fr); }
  .oficina__panel { min-height: 0; }
}
@media (max-width: 760px) {
  .oficina__intro { margin-bottom: 32px; }
  .oficina__boton { padding: 7px 14px; font-size: 0.88rem; }
  .oficina__etiqueta { display: none; }   /* en el móvil serían diminutas: los nombres ya están en los botones */
  /* En el móvil, los 10 sectores van en una fila que se desliza de lado */
  .oficina__sectores-zona { margin: 0 -20px; }
  .oficina__sectores { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 20px; gap: 18px; }
  .oficina__sectores::-webkit-scrollbar { display: none; }
  .sectores--diez { grid-template-columns: 1fr 1fr; }
  .sectores--diez .sector { padding: 16px; font-size: 0.92rem; gap: 10px; }
  .sectores__intro { margin-top: -20px; }
  .oficina__leyenda { grid-template-columns: 1fr; gap: 8px; }
  .demo { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
  .demo .boton { width: 100%; justify-content: center; }
  /* Panel en el móvil: las apps en una fila arriba, y la maqueta sin menú lateral */
  .panelg__fila { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .panelg__apps { display: flex; flex-wrap: wrap; gap: 8px; }
  .panelg__apps li { margin-right: 0; padding: 7px 11px; font-size: 0.82rem; }
  .panelg__apps li::before, .panelg__apps li::after { display: none; }
  .maqueta__cuerpo { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .maqueta__menu { display: flex; gap: 2px; border-right: 0; border-bottom: 1px solid var(--borde); padding: 8px; overflow: hidden; }
  .maqueta__logo { display: none; }
  .maqueta__main { padding: 14px; }
  .maqueta__columnas { grid-template-columns: minmax(0, 1fr); }
  .panelg__puntos { grid-template-columns: 1fr; }
  .calculadora__caja { grid-template-columns: minmax(0, 1fr); }
  .calculadora__datos, .calculadora__resultado { padding: 24px 20px; }
  .calculadora__resultado { border-left: 0; border-top: 1px solid var(--borde); }
  .calculadora__resultado .boton { width: 100%; justify-content: center; }
  .barra__fila { font-size: 0.9rem; }
  .oficina__leyenda li { padding: 12px 14px; }
  .globo { display: none; }               /* en el móvil, solo el check verde (el texto no se leería) */
  .globo-movil { display: inline; }
  .oficina__hora { position: relative; margin-bottom: 8px; font-size: 0.78rem; }
  .oficina__escena { margin: 0 -8px; }
  .oficina__panel { padding: 24px 20px; }
  .oficina__panel h3 { font-size: 1.5rem; }
}