/* Entrada de la portada (Rodhan, 1-oct): primero sólo la oficina de fondo; luego la cabecera baja desde el borde
   superior; el titular se revela; los paneles y los cuadros de asistencia entran desde los costados hacia el centro,
   como al entrar a una oficina. Una sola vez, sin brillos, colores de la guía de identidad
   (zymbiotek-brain/CURRENT/IDENTIDAD-VISUAL-ZYMBIOTEK.md). .con-entrada la pone/quita entrada.js. */
:root { --zb-cian: #00C3E3; --zb-verde: #68C090; --zb-naranja: #F3A832; }

/* ── Cuadros de asistencia ───────────────────────────────────────────── */
.hero-asistencia {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
  margin-top: 28px; position: relative;
}
.ha-card {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.ha-top { display: flex; align-items: center; gap: 10px; }
.ha-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font: 600 0.78rem/1 inherit; }
.ha-cian { background: color-mix(in srgb, var(--zb-cian) 16%, transparent); color: var(--zb-cian); }
.ha-verde { background: color-mix(in srgb, var(--zb-verde) 18%, transparent); color: var(--zb-verde); }
.ha-naranja { background: color-mix(in srgb, var(--zb-naranja) 18%, transparent); color: var(--zb-naranja); }
.ha-tit { font-weight: 600; font-size: 0.92rem; color: var(--text); }
.ha-vivo { margin-left: auto; font-size: 0.72rem; color: var(--zb-verde); }
.ha-vivo::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--zb-verde); margin-right: 5px; vertical-align: 1px; }
.ha-num { font-size: 1.6rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.ha-num small { font-size: 0.8rem; font-weight: 500; color: var(--dim); }
.ha-sub { font-size: 0.8rem; color: var(--dim); line-height: 1.4; }
.ha-verde-t { color: var(--zb-verde); font-weight: 600; }
.ha-barra { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.ha-barra i { display: block; height: 100%; background: var(--zb-cian); border-radius: inherit; }
.ha-barra-n i { background: var(--zb-naranja); }
.ha-columnas { display: flex; align-items: flex-end; gap: 6px; height: 34px; }
.ha-columnas i { flex: 1; background: var(--zb-cian); border-radius: 4px 4px 2px 2px; opacity: 0.85; }
.ha-burbujas { display: flex; flex-direction: column; gap: 5px; }
.ha-burbujas span { height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--text) 12%, transparent); }
.ha-burbujas span:nth-child(1) { width: 70%; } .ha-burbujas span:nth-child(2) { width: 45%; margin-left: auto; background: color-mix(in srgb, var(--zb-cian) 35%, transparent); } .ha-burbujas span:nth-child(3) { width: 58%; }
.ha-nota { grid-column: 1 / -1; text-align: right; font-size: 0.72rem; color: var(--dim); margin: 0; }
@media (max-width: 1000px) { .hero-asistencia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .hero-asistencia { grid-template-columns: 1fr; } }

/* ── Secuencia de entrada ─────────────────────────────────────────────── */
.con-entrada, .con-entrada body { overflow-x: hidden; } /* los costados entran desde fuera de pantalla */
.con-entrada .hero-oficina-bg { opacity: 0; transform: scale(1.06); animation: ent-fondo 1.1s ease-out forwards; }
.con-entrada #site-nav { transform: translateY(-110%); animation: ent-bajar 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.65s forwards; }
.con-entrada .nav-links > li, .con-entrada .nav-cta > * {
  opacity: 0; animation: ent-aparecer 0.4s ease forwards; animation-delay: calc(1.05s + var(--i, 0) * 0.06s);
}
.con-entrada .hero-content h1, .con-entrada .hero-content > p, .con-entrada .hero-botones {
  clip-path: inset(0 0 100% 0); transform: translateY(14px);
  animation: ent-texto 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay: calc(1.15s + var(--i, 0) * 0.12s);
}
.con-entrada .hero-duo > *, .con-entrada .ha-card {
  opacity: 0; animation: ent-lado 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(1.5s + var(--i, 0) * 0.12s);
}
/* izquierda entra desde la izquierda; derecha desde la derecha (lo decide entrada.js con data-lado) */
.con-entrada [data-lado="izq"] { transform: translateX(-38vw); }
.con-entrada [data-lado="der"] { transform: translateX(38vw); }
.con-entrada .ha-nota { opacity: 0; animation: ent-aparecer 0.4s ease 2.5s forwards; }
@keyframes ent-fondo    { to { opacity: 1; transform: none; } }
@keyframes ent-bajar    { to { transform: none; } }
@keyframes ent-aparecer { to { opacity: 1; } }
@keyframes ent-texto    { to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes ent-lado     { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .con-entrada * { animation: none !important; opacity: 1 !important; clip-path: none !important; transform: none !important; }
}
.con-entrada .skip-link:not(:focus) { opacity: 0; } /* asomaba mientras la cabecera aún no había bajado */

/* ── Botones del hero y sección «Demos por rubro» (1-oct) ─────────────── */
.hero-botones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.demos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .demos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .demos-grid { grid-template-columns: 1fr; } }
.demo-tarjeta {
  display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 16px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.demo-tarjeta:hover, .demo-tarjeta:focus-visible { transform: translateY(-3px); border-color: var(--zb-cian); }
.demo-tarjeta h3 { margin: 0; font-size: 1.02rem; }
.demo-tarjeta p { margin: 0; font-size: 0.88rem; color: var(--dim); line-height: 1.45; }
.demo-etq { align-self: flex-start; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--zb-verde); background: color-mix(in srgb, var(--zb-verde) 14%, transparent); padding: 3px 8px; border-radius: 99px; }
.demo-ir { margin-top: auto; font-size: 0.85rem; font-weight: 600; color: var(--zb-cian); }
@media (prefers-reduced-motion: reduce) { .demo-tarjeta { transition: none; } }

/* ── Buscador (lupa / Ctrl+K) ─────────────────────────────────────────── */
.buscar-wrap { position: relative; }
#buscarPanel {
  position: absolute; top: calc(100% + 10px); right: 0; width: min(420px, calc(100vw - 32px)); z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25); transform-origin: top right;
  animation: buscar-desplegar 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes buscar-desplegar { from { opacity: 0; transform: translateY(-8px) scale(0.96); clip-path: inset(0 0 60% 30% round 14px); } to { opacity: 1; transform: none; clip-path: inset(0 round 14px); } }
#buscarPanel input {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font: inherit;
}
#buscarPanel ul { list-style: none; margin: 8px 0 0; padding: 0; max-height: 320px; overflow: auto; }
#buscarPanel li a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 0.92rem; }
#buscarPanel li a:hover, #buscarPanel li a:focus-visible { background: color-mix(in srgb, var(--zb-cian) 14%, transparent); }
.buscar-vacio { padding: 8px 10px; color: var(--dim); font-size: 0.88rem; }
.buscar-atajo { font-size: 0.7rem; color: var(--dim); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; margin-left: 4px; }
@media (max-width: 880px) { .buscar-atajo { display: none; } }
@media (prefers-reduced-motion: reduce) { #buscarPanel { animation: none; } }

/* ── Titular en un cuadro que baja desde arriba (Rodhan, 2-oct), como los demás cuadros ── */
.hero-content {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: 20px; padding: 28px 32px 30px;
}
@media (max-width: 560px) { .hero-content { padding: 22px 18px; } }
.con-entrada .hero-content { opacity: 0; transform: translateY(-70px); animation: ent-caja 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.95s forwards; }
@keyframes ent-caja { to { opacity: 1; transform: none; } }

/* Niveles de página web (DEC-656) */
.niveles-web { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .niveles-web { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .niveles-web { grid-template-columns: 1fr; } }
.nivel-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.nivel-card--dest { border-color: color-mix(in srgb, var(--zb-verde) 60%, var(--border)); background: color-mix(in srgb, var(--zb-verde) 7%, var(--surface)); }
.nivel-n { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--zb-cian); }
.nivel-card h3 { margin: 0; font-size: 1.05rem; }
.nivel-precio { font-size: 1.6rem; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.nivel-per { font-size: .8rem; color: var(--dim); }
.nivel-card ul { margin: 8px 0 0; padding-left: 1.1rem; color: var(--dim); font-size: .88rem; line-height: 1.5; }
.nivel-card li::marker { color: var(--zb-verde); }