/* Acceso en tono escena: el estilo común de entrada de todos los productos de Iberika (manual de marca, 02/11/2026).
 * Parte del de IberCall.IA (ibercallia/web/public/assets/acceso.css): fondo carbón con la portada del vídeo
 * (turquesa entra por la izquierda, naranja por la derecha), halos que respiran y tarjeta de cristal con borde
 * luminoso. Encima, la torre de nodos y el nombre del producto con «.IA» en naranja.
 * Se carga después de estilos.css y solo afecta a body.acceso-pagina. prefers-reduced-motion apaga el movimiento. */

.acceso-pagina {
  color-scheme: dark;
  --noche: #101418;
  --fondo: #101418;
  --superficie: rgb(22 27 32 / .62);
  --superficie-2: rgb(255 255 255 / .06);
  --texto: #f2f5f7;
  --texto-suave: #c9d3da;
  --texto-tenue: #93a1aa;
  --borde: rgb(255 255 255 / .12);
  --borde-fuerte: rgb(255 255 255 / .22);
  --teal: #5fdcea;
  --teal-osc: #3fc3c9;
  --aqua: #5fdcea;
  --anillo-foco: 0 0 0 3px rgb(95 220 234 / .35);
  --entra: #3fc3c9;
  --sale: #f08a5d;
  min-height: 100dvh;
  background: var(--noche);
  color: var(--texto);
  overflow-x: hidden;
  display: block;
}

/* ---- fondo ---- */
.acceso-fondo { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--noche); }
.acceso-fondo picture, .acceso-fondo img { display: block; width: 100%; height: 100%; max-width: none; }
.acceso-fondo img {
  object-fit: cover;
  animation: acceso-aparece 1.6s cubic-bezier(.22, 1, .36, 1) both, acceso-acerca 38s ease-in-out 1.6s infinite alternate;
}
.acceso-fondo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 46% 58% at 50% 50%, rgb(16 20 24 / .62) 0%, rgb(16 20 24 / .3) 55%, rgb(16 20 24 / 0) 100%),
    linear-gradient(180deg, rgb(16 20 24 / .25) 0%, rgb(16 20 24 / 0) 30%, rgb(16 20 24 / 0) 70%, rgb(16 20 24 / .45) 100%);
}
.acceso-fondo::after {
  content: ""; position: absolute; inset: -10%; z-index: 2; mix-blend-mode: screen;
  background:
    radial-gradient(closest-side at 24% 50%, rgb(25 200 220 / .16), rgb(25 200 220 / 0) 70%),
    radial-gradient(closest-side at 76% 50%, rgb(242 140 30 / .14), rgb(242 140 30 / 0) 70%);
  animation: acceso-respira 9s ease-in-out infinite alternate;
}
@media (max-aspect-ratio: 1/1) {
  .acceso-fondo::before {
    background:
      radial-gradient(ellipse 72% 40% at 50% 52%, rgb(16 20 24 / .64) 0%, rgb(16 20 24 / .3) 60%, rgb(16 20 24 / 0) 100%),
      linear-gradient(180deg, rgb(16 20 24 / .2) 0%, rgb(16 20 24 / 0) 25%, rgb(16 20 24 / 0) 75%, rgb(16 20 24 / .4) 100%);
  }
}

/* ---- composición ---- */
.acceso { position: relative; z-index: 1; min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px; }
.acceso-columna { width: min(420px, 100%); display: flex; flex-direction: column; align-items: center; gap: 20px; }
.acceso-cabecera {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: #fff; text-decoration: none;
  animation: acceso-sube .9s cubic-bezier(.22, 1, .36, 1) .15s both;
}
.acceso-cabecera:hover { text-decoration: none; }
.acceso-simbolo {
  width: auto; height: 76px;
  filter: drop-shadow(0 0 14px rgb(25 200 220 / .28)) drop-shadow(0 0 16px rgb(242 140 30 / .2));
}
.acceso-nombre { font: 700 2.1rem/1 "Montserrat", var(--sans); letter-spacing: -.03em; color: #fff; }
.acceso-nombre b { font-weight: 700; color: var(--sale); }
.acceso-lema { margin: 0; color: var(--texto-suave); font-size: 1.05rem; font-weight: 600; text-shadow: 0 1px 12px rgb(0 0 0 / .6); }

/* ---- tarjeta de cristal ---- */
.acceso-cristal {
  position: relative; width: 100%; max-width: none; padding: 28px 28px 24px; border-radius: 16px;
  background: linear-gradient(180deg, rgb(30 36 42 / .66) 0%, rgb(16 20 24 / .72) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
  border: 1px solid rgb(255 255 255 / .1);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 12px 32px -8px rgb(0 0 0 / .55), 0 40px 90px -20px rgb(0 0 0 / .7);
  animation: acceso-sube .9s cubic-bezier(.22, 1, .36, 1) .3s both;
}
/* Borde fino luminoso: turquesa arriba a la izquierda, cobre abajo a la derecha, como las dos mitades de la torre. */
.acceso-cristal::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgb(25 200 220 / .55), rgb(255 255 255 / .06) 38%, rgb(255 255 255 / .04) 62%, rgb(242 140 30 / .5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .acceso-cristal { background: #1a2026; }
}

/* ---- lo de dentro de la tarjeta (componentes de estilos.css en oscuro) ---- */
.acceso-cristal h1 { font: 700 1.5rem/1.2 var(--sans); color: #fff; margin-bottom: .7em; letter-spacing: -.01em; }
.acceso-cristal p { color: var(--texto-suave); }
.acceso-cristal a { color: var(--teal); }
.acceso-cristal label { color: var(--texto-suave); }
.acceso-cristal .campo input[type="text"], .acceso-cristal .campo input[type="email"], .acceso-cristal .campo input[type="password"],
.acceso-cristal .campo input[type="url"], .acceso-cristal .campo input[type="tel"], .acceso-cristal .campo select, .acceso-cristal .campo textarea {
  background: rgb(0 0 0 / .32); border-color: rgb(255 255 255 / .16); color: #fff;
}
.acceso-cristal .campo input::placeholder { color: var(--texto-tenue); }
.acceso-cristal input[type="checkbox"] { accent-color: var(--sale); }
/* Un solo botón principal: píldora naranja con brillo, como en IberCall.IA. */
.acceso-cristal .btn--primario {
  border: 0; border-radius: 999px; min-height: 46px; color: #fff; font-weight: 700;
  background: linear-gradient(180deg, #f0753c, #d9622b);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), 0 10px 30px -10px rgb(240 117 60 / .7);
}
.acceso-cristal .btn--primario:hover { background: linear-gradient(180deg, #f3834e, #e06a31); }
.acceso-cristal .btn--secundario { background: transparent; color: #fff; border-color: rgb(255 255 255 / .28); }
.acceso-cristal .btn-google { background: #fff; color: #1f1f1f; border-color: #fff; }
.acceso-cristal .separador { color: var(--texto-tenue); }
.acceso-cristal .separador::before, .acceso-cristal .separador::after { background: rgb(255 255 255 / .14); }
.acceso-cristal .aviso { background: rgb(150 38 28 / .42); border-color: rgb(255 138 122 / .4); color: #ffd9d3; }
.acceso-columna .flash, .acceso-columna .aviso { width: 100%; }

.acceso-pie { margin: 0; font-size: .85rem; color: var(--texto-tenue); text-align: center; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; }
.acceso-pie a { color: var(--texto-suave); }

/* ---- movimiento ---- */
@keyframes acceso-aparece { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
@keyframes acceso-acerca { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes acceso-respira { from { opacity: .55; } to { opacity: 1; } }
@keyframes acceso-sube { from { transform: translateY(14px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .acceso-fondo img, .acceso-fondo::after, .acceso-cabecera, .acceso-cristal { animation: none; }
}