/* resiter/css/30-entrada.css — Pantalla de entrada (círculo de los sistemas).
   Forma parte del CSS único de index.html (orden R2): se carga en el orden de los <link>; al editar este archivo,
   subir su ?v= en index.html. */
/* ══════════════════════════════════════════════════
   ENTRY SCREEN — colores reales de marca Resiter
   (azul solido #0083CB del logo real, sin degradados,
   sobre fondo claro — antes era un tema oscuro tipo
   "dashboard tech" que no correspondia a la marca)
══════════════════════════════════════════════════ */
#entry-screen{
  position:fixed;inset:0;z-index:9999;
  background:#f4f7fb;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1);
}
#entry-screen.exit{opacity:0 !important;transform:scale(1.04) !important;pointer-events:none !important}
.entry-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(0,131,203,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,131,203,.07) 1px,transparent 1px);
  background-size:48px 48px;animation:grid-drift 20s linear infinite;
}
@keyframes grid-drift{to{background-position:48px 48px}}
.entry-orb{position:absolute;border-radius:50%;filter:blur(80px);animation:orb-drift 8s ease-in-out infinite;pointer-events:none}
.orb1{width:500px;height:400px;background:rgba(0,131,203,.14);top:-100px;left:-80px;animation-duration:9s}
.orb2{width:400px;height:350px;background:rgba(0,131,203,.10);bottom:-80px;right:-60px;animation-delay:3s;animation-duration:11s}
.orb3{width:300px;height:300px;background:rgba(7,55,99,.08);top:40%;right:20%;animation-delay:1.5s;animation-duration:7s}
@keyframes orb-drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-20px) scale(1.05)}66%{transform:translate(-20px,15px) scale(.97)}}
.entry-glass-cards{position:absolute;inset:0;pointer-events:none}
.eg-card{position:absolute;background:rgba(7,55,99,.03);border:1px solid rgba(7,55,99,.08);border-radius:16px;backdrop-filter:blur(12px);padding:18px 22px;animation:float-glass 6s ease-in-out infinite}
.eg-card:nth-child(1){top:14%;left:6%;animation-duration:7s}
.eg-card:nth-child(2){top:20%;right:7%;animation-delay:2s;animation-duration:8s}
.eg-card:nth-child(3){bottom:18%;left:12%;animation-delay:1s;animation-duration:6.5s}
.eg-card:nth-child(4){bottom:22%;right:9%;animation-delay:3s;animation-duration:9s}
@keyframes float-glass{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.eg-num{font-size:28px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.eg-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.1em;opacity:.6;margin-top:4px;color:#073763}
.eg-bar{height:2px;border-radius:2px;margin-top:14px;opacity:.5;animation:bar-pulse 3s ease-in-out infinite}
@keyframes bar-pulse{0%,100%{opacity:.3}50%{opacity:.7}}
.eg-badge{display:inline-flex;align-items:center;gap:5px;margin-top:10px;padding:3px 10px;border-radius:20px;font-size:9px;font-weight:700;background:rgba(0,131,203,.12);color:#0083CB;border:1px solid rgba(0,131,203,.25)}
/* max-height+overflow-y: red de seguridad — al 100% de zoom en una pantalla ancha pero
   baja (laptop 16:9), el logo+título+círculo (ver .entry-sys-circle más abajo) podían medir
   más que el alto real de la ventana; como #entry-screen tiene overflow:hidden, las tarjetas
   de abajo (Mantenimiento/Economía Circular) quedaban tapadas sin ningún aviso ni forma de
   llegar a ellas. El fix de .entry-sys-circle ya evita que esto pase en la mayoría de casos,
   pero en pantallas reales igual queda apenas más alto que 96vh — esto es el respaldo para
   esos casos. La barra de scroll se oculta a propósito (scrollbar-width/::-webkit-scrollbar):
   sin ocultarla, el navegador la dibuja pegada al borde DE ESTE BLOQUE (más angosto que la
   pantalla, porque .entry-center mide lo que mide su contenido) — se ve como una línea suelta
   flotando en medio de la pantalla, no como una barra de scroll normal. El scroll con rueda/
   touch/teclado sigue funcionando igual, solo que sin dibujar la barra. */
.entry-center{position:relative;z-index:10000;text-align:center;animation:entry-in .9s cubic-bezier(.22,1,.36,1) both;max-height:96vh;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
.entry-center::-webkit-scrollbar{display:none}
@keyframes entry-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.entry-logo-wrap{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:20px;background:#0083CB;box-shadow:0 8px 32px rgba(0,131,203,.35);margin:0 auto 24px;font-size:32px;font-weight:900;color:#fff;letter-spacing:-2px}
.entry-company{font-size:13px;font-weight:800;letter-spacing:.2em;color:rgba(7,55,99,.65);text-transform:uppercase;margin-bottom:10px}
.entry-title{font-size:clamp(32px,4.5vw,52px);font-weight:900;letter-spacing:-.04em;line-height:1.05;color:#073763;margin-bottom:14px}
.entry-tagline{font-size:14px;color:rgba(7,55,99,.5);letter-spacing:-.01em;margin-bottom:40px;line-height:1.6}
.entry-tagline span{color:#0083CB;font-weight:700}
.entry-btn{display:inline-flex;align-items:center;gap:10px;position:relative;z-index:10000;padding:16px 40px;background:#0083CB;color:#fff;font-size:15px;font-weight:700;letter-spacing:-.01em;border:none;border-radius:14px;cursor:pointer;box-shadow:0 4px 20px rgba(0,131,203,.4);transition:transform .2s,box-shadow .2s,background .2s;font-family:inherit}
.entry-btn:hover{transform:translateY(-2px);background:#046ba8;box-shadow:0 8px 32px rgba(0,131,203,.5)}
.entry-btn svg{animation:arrow-move 1.5s ease-in-out infinite}
/* Ancho Y alto fijos — no solo el ancho — para que las 5 tarjetas (las 4
   del círculo + Centro de Control) midan exactamente lo mismo sin importar
   cuánto texto tenga cada una; el contenido se centra con flex en vez de
   dejar que el título/descripción empujen la altura (eso era lo que hacía
   que se vieran de tamaños distintos: "Abastecimiento" con 2 líneas de
   texto quedaba más baja que "Economía Circular" con 4). */
.entry-sys-card{position:absolute;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:clamp(96px,19.4vw,136px);height:clamp(110px,21.7vw,152px);padding:12px 10px 10px;border-radius:16px;background:#fff;border:1px solid rgba(7,55,99,.1);box-shadow:0 4px 16px rgba(7,55,99,.05);transition:transform .2s,box-shadow .2s,border-color .2s;text-align:center;z-index:1;box-sizing:border-box}
.entry-sys-card:hover{box-shadow:0 12px 32px rgba(0,131,203,.25);border-color:rgba(0,131,203,.4)}
.entry-sys-card::after{content:'';position:absolute;top:0;left:-150%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(0,131,203,.15),transparent);transform:skewX(-20deg);transition:left .65s ease}
.entry-sys-card:hover::after{left:150%}
.entry-sys-icon{width:clamp(30px,5.5vw,40px);height:clamp(30px,5.5vw,40px);margin:0 auto 8px;flex-shrink:0;border-radius:14px;background:#0083CB;display:flex;align-items:center;justify-content:center;font-size:clamp(14px,2.4vw,20px);box-shadow:0 4px 16px rgba(0,131,203,.35);animation:icon-glow 2.6s ease-in-out infinite}
@keyframes icon-glow{0%,100%{box-shadow:0 4px 16px rgba(0,131,203,.35)}50%{box-shadow:0 4px 28px rgba(0,131,203,.55),0 0 0 7px rgba(0,131,203,.12)}}
/* Estructura fija igual en las 5+1 tarjetas: ícono siempre a la misma altura,
   bloque de nombre con alto reservado para 3 líneas (el nombre más largo es
   "Control de Gestión e Indicadores") y bloque de descripción reservado para
   2 líneas — así el contenido no salta de altura según cuánto texto tenga. */
.entry-sys-name{display:flex;align-items:center;justify-content:center;min-height:3.6em;font-size:clamp(10px,1.85vw,13px);line-height:1.2;font-weight:800;color:#073763;margin-bottom:3px;text-align:center}
.entry-sys-desc{font-size:10.5px;color:rgba(7,55,99,.55);line-height:1.3;height:2.6em;overflow:hidden}
@media (max-width:700px){.entry-sys-desc{display:none}}
/* Círculo hub-and-spoke — los 4 sistemas operativos alrededor, Centro de
   Control al medio. Tamaño con clamp() para que se achique solo en celular,
   sin media query aparte para el contenedor; la descripción sí se oculta
   por debajo de cierto ancho porque a ese tamaño de tarjeta no entra sin
   amontonarse (ver media query más abajo). Las tarjetas se hicieron más
   chicas que el .entry-sys-card por defecto (18vw/158px en vez de
   26vw/190px) a propósito: con las tarjetas grandes de antes, al radio
   necesario para que no se amontonen contra Centro de Control, se salían
   del contenedor — confirmado midiendo en pantalla, no a ojo. */
/* FIX (2026-09-22): el tamaño se calculaba solo con el ancho de ventana (94vw), nunca con
   el alto — en una pantalla ancha pero baja (laptop 16:9 al 100% de zoom, no al 80%, que
   "ve" más píxeles CSS y por eso el mismo cálculo daba un círculo más chico), el círculo más
   el logo/título de arriba superaban el alto real disponible y, como el contenedor no tenía
   scroll, las tarjetas de abajo (Mantenimiento/Economía Circular) quedaban tapadas por la
   barra de tareas sin ninguna forma de llegar a ellas. Se agrega el alto de ventana (78vh) al
   cálculo — el círculo ahora topa contra lo que sea más chico entre ancho y alto. */
.entry-sys-circle{position:relative;width:clamp(280px,min(94vw,78vh),660px);height:clamp(280px,min(94vw,78vh),660px);margin:24px auto 0}
.entry-sys-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
/* Guiones más largos/gruesos que la versión anterior (se veían como alambre
   fino) + animación de stroke-dashoffset para un efecto sutil de flujo hacia
   Centro de Control — la resta es un múltiplo exacto del período del guión
   (3+2.5=5.5) para que el loop no salte al reiniciar. El color (degradado)
   se define como atributo `stroke` en el propio <line>, no acá — una regla
   de color en CSS pisaría ese degradado. */
.entry-sys-lines line{stroke-width:1;stroke-dasharray:3 2.5;animation:entry-flow 3.5s linear infinite}
@keyframes entry-flow{to{stroke-dashoffset:-5.5}}
@media (prefers-reduced-motion: reduce){
  .entry-sys-lines line,.entry-sys-ring{animation:none}
}
/* Anillo visible — sin esto, 4 puntos igualmente espaciados alrededor de un
   centro son geométricamente los vértices de un cuadrado (360°/4=90°), y sin
   una curva de referencia el ojo los lee como grid, no como círculo. Queda
   detrás de las tarjetas (z-index de .entry-sys-lines es 0, tarjetas en 1),
   así que se ve como 4 arcos visibles entre tarjeta y tarjeta — como una
   rueda con las tarjetas ancladas al borde — en vez de un círculo completo
   tapado por ellas. Color en el atributo `stroke` del <circle> (mismo
   degradado que las líneas), no en esta regla, por la misma razón de arriba.
   El resplandor (glow) es una segunda animación en paralelo a la del flujo,
   con el mismo patrón que `icon-glow` de las tarjetas para que se sienta
   parte del mismo lenguaje visual. */
.entry-sys-ring{fill:none;stroke-width:1.2;stroke-dasharray:4.5 2.5;animation:entry-flow-ring 3.5s linear infinite,entry-ring-glow 2.6s ease-in-out infinite}
@keyframes entry-flow-ring{to{stroke-dashoffset:-7}}
@keyframes entry-ring-glow{0%,100%{filter:drop-shadow(0 0 1.5px rgba(0,131,203,.35))}50%{filter:drop-shadow(0 0 4px rgba(0,131,203,.6))}}
/* Posiciones calculadas por trigonometría real (ángulo × radio, no bordes
   planos): radio 44 sobre el viewBox 0-100 del SVG, a 45°/135°/225°/315°,
   así los 4 quedan repartidos sobre la curva de un círculo alrededor del
   centro en vez de amontonados en cruz sobre los ejes N/E/S/O. Círculo más
   grande que antes (radio 44, no 40) para que las flechas tengan más
   espacio visible antes de llegar a Centro de Control. */
/* Con el 5to sistema (Control de Gestión e Indicadores) el círculo pasó a
   pentágono: radio 37, vértices a -90°/-18°/54°/126°/198° (arriba, y luego de
   a 72° en sentido horario). Los nombres tl/tr/br/bl se conservan por no
   tocar el HTML de las otras 4 tarjetas, pero ya no son esquinas literales:
   tl = izquierda-arriba, tr = derecha-arriba, br = abajo-derecha,
   bl = abajo-izquierda, top = arriba al centro. */
.entry-sys-pos-top{top:13%;left:50%;transform:translate(-50%,-50%)}
.entry-sys-pos-tr{top:38.57%;left:85.19%;transform:translate(-50%,-50%)}
.entry-sys-pos-br{top:79.93%;left:71.75%;transform:translate(-50%,-50%)}
.entry-sys-pos-bl{top:79.93%;left:28.25%;transform:translate(-50%,-50%)}
.entry-sys-pos-tl{top:38.57%;left:14.81%;transform:translate(-50%,-50%)}
/* Centro de Control mide lo mismo que las otras 4 — se distingue solo por
   el borde y la sombra azul, no por ser más chico (eso último se probó y
   se veía como tamaños inconsistentes, ver nota arriba). */
.entry-sys-pos-center{top:50%;left:50%;transform:translate(-50%,-50%);border:2px solid #0083CB;box-shadow:0 8px 28px rgba(0,131,203,.2)}
/* Tarjeta central para quien no es MASTER — solo el logo, sin texto ni clic
   (no lleva a ningún sistema). Se le quita el borde azul "de hub" que sí
   tiene Centro de Control (ese borde marcaba que es el que supervisa a los
   demás; acá no aplica, es puramente decorativo) y el hover/brillo de
   tarjeta clickeable, ya que no hace nada al tocarla. */
.entry-sys-card-logo{cursor:default;border:1px solid rgba(7,55,99,.1);box-shadow:0 4px 16px rgba(7,55,99,.05);display:flex;align-items:center;justify-content:center;padding:clamp(6px,1.2vw,10px)}
.entry-sys-card-logo::after{display:none}
.entry-sys-card-logo:hover{box-shadow:0 4px 16px rgba(7,55,99,.05);border-color:rgba(7,55,99,.1)}
.entry-sys-logo-central{width:96%;max-width:170px;height:auto;border-radius:10px;filter:drop-shadow(0 4px 16px rgba(0,131,203,.35));animation:entry-logo-glow 2.6s ease-in-out infinite}
@keyframes entry-logo-glow{0%,100%{filter:drop-shadow(0 4px 16px rgba(0,131,203,.35))}50%{filter:drop-shadow(0 4px 26px rgba(0,131,203,.6))}}
@media (max-width:520px){
  .entry-sys-desc{display:none}
  /* Con la descripción oculta alcanza con icono + título, así que la altura
     fija baja bastante; se define una sola vez en .entry-sys-card (misma
     regla para las 5 tarjetas, ninguna por separado). */
  .entry-sys-card{width:92px;height:92px;padding:8px 4px}
  .entry-sys-name{font-size:11px;line-height:1.2;margin-bottom:0}
  /* Icono más chico en celular para que entre el título de 3 líneas de
     "Control de Gestión e Indicadores" en la tarjeta de 92px sin recortarse. */
  .entry-sys-icon{width:28px;height:28px;margin-bottom:6px;font-size:14px}
}
@keyframes arrow-move{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.entry-dots{display:flex;justify-content:center;gap:20px;margin-top:40px}
.entry-dot-item{display:flex;align-items:center;gap:7px}
.entry-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.entry-dot-lbl{font-size:11px;color:rgba(7,55,99,.45);font-weight:500}
.entry-ver{margin-top:32px;font-size:11px;color:rgba(7,55,99,.35);letter-spacing:.06em}