/* ===========================================================================
   ASTRA TELECOM — Capa de interacción premium (Nivel 2)
   Custom cursor · View Transitions · Ripple · Labels · Nav indicator
   Text scramble · Hero tracking · Smooth reveals · Sin dependencias
   =========================================================================== */

/* ── View Transitions (MPA nativa — Chrome 126+) ── */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: vt-salida 200ms ease-out both;
}
::view-transition-new(root) {
  animation: vt-entrada 320ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes vt-salida  { to   { opacity:0; transform:translateY(-6px) scale(.99); filter:blur(2px); } }
@keyframes vt-entrada { from { opacity:0; transform:translateY(10px)  scale(.99); filter:blur(3px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ── Custom cursor ── */
@media (hover: hover) and (pointer: fine) {
  html { cursor: none; }
  a, button, [role="button"], input, textarea, select, label,
  .btn, .chip-opt, .faq__q, .burger { cursor: none; }
}
.cc {
  position: fixed; top: 0; left: 0; z-index: 10000;
  pointer-events: none; will-change: transform;
}
.cc__dot {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%,-50%);
  transition: width .12s, height .12s, opacity .2s, background .2s;
}
.cc__ring {
  position: absolute; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid rgba(43,83,127,.55);
  transform: translate(-50%,-50%);
  transition:
    width   .38s cubic-bezier(.22,.61,.36,1),
    height  .38s cubic-bezier(.22,.61,.36,1),
    border-color .28s,
    border-radius .28s,
    opacity .28s;
}
/* estados */
body.cc-link  .cc__ring { width:52px; height:52px; border-color:rgba(43,83,127,.8); }
body.cc-btn   .cc__ring { width:48px; height:48px; border-color:var(--accent); background:rgba(43,83,127,.08); }
body.cc-text  .cc__ring { width:3px;  height:26px; border-radius:3px; }
body.cc-click .cc__dot  { width:10px; height:10px; }
body.cc-hidden .cc__ring,
body.cc-hidden .cc__dot  { opacity:0; }
@media (hover:none),(pointer:coarse) { .cc { display:none; } }

/* ── Ripple en botones ── */
.btn { overflow:hidden; }
.rpl {
  position: absolute; border-radius: 50%;
  transform: scale(0) translate(-50%,-50%);
  transform-origin: 0 0;
  animation: rplAnim .55s ease-out forwards;
  background: rgba(255,255,255,.28); pointer-events:none;
}
@keyframes rplAnim { to { transform: scale(3.5) translate(-50%,-50%); opacity:0; } }

/* ── Floating labels (formulario editorial) ── */
.form--editorial .field {
  position: relative;
}
.form--editorial .field label {
  display: block;
  transition: color .22s, letter-spacing .22s, transform .22s cubic-bezier(.22,.61,.36,1);
  transform-origin: left top;
  will-change: transform, color;
}
.form--editorial .field.ff-active label {
  color: var(--accent);
  letter-spacing: .12em;
}
.form--editorial .field.ff-filled label {
  color: var(--faint);
}
.form--editorial .field.ff-invalid label {
  color: #b3261e;
}

/* ── Nav sliding indicator ── */
.header__nav {
  position: relative;
}
.nav-pill {
  position: absolute; bottom: -4px; height: 2px;
  background: var(--accent); border-radius: 2px;
  pointer-events: none;
  transition:
    left   .32s cubic-bezier(.22,.61,.36,1),
    width  .32s cubic-bezier(.22,.61,.36,1),
    opacity .2s;
  opacity: 0;
}
.header__nav:hover .nav-pill { opacity: 1; }

/* ── Text scramble: estado inicial oculto ── */
.eyebrow[data-scramble="pending"] { opacity:0; }
.eyebrow[data-scramble="done"]    { opacity:1; }

/* ── Hero gradient tracking ── */
.hero__scrim {
  transition: opacity .6s ease;
  will-change: background-position;
}

/* ── Entrada de página (fade in body) ── */
@keyframes pageIn { from { opacity:0; } to { opacity:1; } }
body { animation: pageIn 280ms ease-out both; }
@media (prefers-reduced-motion:reduce) { body { animation:none; } }

/* ── Hover en chips de servicio del formulario ── */
.chip-opt {
  position: relative; overflow: hidden;
}

/* ── Efecto glow en botón primario al hover ── */
.btn-primary::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(43,83,127,.5);
  transition: box-shadow .4s ease;
  pointer-events: none;
}
.btn-primary:hover::after {
  box-shadow: 0 0 18px 3px rgba(43,83,127,.35);
}

/* ── Línea decorativa bajo h1 en page-hero ── */
.page-hero h1::after {
  content: '';
  display: block; margin-top: 1rem;
  width: 2.8rem; height: 2px;
  background: var(--accent); border-radius: 2px;
  opacity: .7;
}