/* ============================================================
   FiberNet — estilos compartidos (accesibles, WCAG 2.1 AA)
   Todos los colores de texto verificados para contraste >= 4.5:1
   (texto normal) o >= 3:1 (texto grande) sobre fondo #03060E.
   ============================================================ */
:root{
  --cyan:#00F2FF;      /* sobre fondo oscuro: alto contraste */
  --orange:#FF8A00;    /* botones: SIEMPRE con texto oscuro --ink */
  --magenta:#FF2E97;
  --ink:#03060E;       /* fondo base */
  --ink2:#070B16;
  --card:#0A0F1C;
  --line:rgba(255,255,255,.10);
  --txt:#EAF0F8;       /* texto principal  ~14:1 */
  --txt-2:#C3CDDC;     /* texto secundario ~9:1  */
  --txt-3:#9FB0C6;     /* texto terciario  ~5.5:1 (solo >=14px) */
  --focus:#00F2FF;
  --radius:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--ink)}
body{
  color:var(--txt);
  font-family:Inter,system-ui,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  margin:0;
  overflow-wrap:break-word;
}
/* Correos y enlaces largos sin espacios pueden partirse (evita scroll a 320px) */
a,address,li,p{overflow-wrap:anywhere}
::selection{background:var(--cyan);color:#000}

h1,h2,h3,h4{font-family:"Chakra Petch",system-ui,sans-serif;line-height:1.15}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}

/* --- Enlaces legibles: no dependen solo del color (WCAG 1.4.1) --- */
a{color:var(--cyan);text-decoration:underline;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
/* Elementos que NO son texto corrido: sin subrayado */
.btn,.a11y-btn,[role="tab"],.skip-link,#mobile-menu a,nav a[aria-current]{text-decoration:none}
.btn:hover,.a11y-btn:hover{text-decoration:none}

/* ============ FOCO VISIBLE PARA TECLADO (WCAG 2.4.7) ============ */
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:8px;
}
/* No quitar el foco a quien navega con teclado */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
}

/* ============ SALTAR AL CONTENIDO (WCAG 2.4.1) ============ */
.skip-link{
  position:absolute;left:8px;top:-60px;z-index:300;
  background:var(--cyan);color:#000;font-weight:700;
  padding:12px 18px;border-radius:10px;transition:top .2s ease;
  text-decoration:none;
}
.skip-link:focus{top:8px}

/* ============ Solo lectores de pantalla ============ */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ============ Utilidades de marca (neón) ============ */
.glow-cyan{text-shadow:0 0 14px rgba(0,242,255,.55)}
.glow-orange{text-shadow:0 0 14px rgba(255,138,0,.45)}
.box-cyan{box-shadow:0 0 22px rgba(0,242,255,.25),inset 0 0 22px rgba(0,242,255,.05)}
.box-orange{box-shadow:0 0 22px rgba(255,138,0,.25)}
.grad-text{background:linear-gradient(90deg,var(--cyan),#7fd4ff,var(--orange));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.grad-text-hot{background:linear-gradient(90deg,var(--magenta),var(--orange),var(--cyan));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.glass{background:rgba(10,15,28,.6);backdrop-filter:blur(16px);border:1px solid var(--line)}

.text-2{color:var(--txt-2)}
.text-3{color:var(--txt-3)}

/* ============ Botones ============ */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;
  border-radius:16px;padding:.9rem 1.6rem;text-decoration:none;cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease;border:1px solid transparent}
.btn:hover{transform:translateY(-2px)}
.btn-cyan{background:var(--cyan);color:var(--ink)}          /* texto oscuro: AA ok */
.btn-orange{background:var(--orange);color:var(--ink)}       /* texto oscuro: AA ok */
.btn-ghost{background:transparent;color:var(--txt);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* brillo al pasar el mouse (decorativo, respeta reduce-motion) */
.btn-boost{position:relative;overflow:hidden;isolation:isolate}
.btn-boost::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .6s cubic-bezier(.2,.9,.2,1)}
.btn-boost:hover::before{transform:translateX(120%)}

/* ============ Borde animado ============ */
.frame{position:relative;border-radius:26px;overflow:hidden;padding:2px}
.frame::before{content:"";position:absolute;top:-60%;left:-60%;width:220%;height:220%;
  background:conic-gradient(from 0deg,transparent 0 55%,var(--cyan) 68%,var(--orange) 82%,transparent 92%);
  animation:spin 5s linear infinite}
.frame::after{content:"";position:absolute;inset:2px;border-radius:24px;background:var(--card);z-index:1}
.frame>*{position:relative;z-index:2}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ Marquesina ============ */
.marquee-wrap{overflow:hidden;position:relative}
.marquee{display:flex;width:max-content;animation:scrollx 24s linear infinite}
@keyframes scrollx{to{transform:translateX(-50%)}}
.marquee-item{font-family:"Chakra Petch";font-weight:700;letter-spacing:.05em;
  font-size:clamp(18px,3.2vw,34px);padding:0 24px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:24px;color:var(--txt-2)}

/* ============ Barras / medidor ============ */
.bar{height:9px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden}
.bar>span{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--cyan),var(--orange));
  box-shadow:0 0 12px rgba(0,242,255,.5);transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.gauge-needle{transform-origin:100px 100px;transition:transform 1.6s cubic-bezier(.2,.9,.2,1)}
.dash{stroke-dasharray:14 220;animation:flow 2.4s linear infinite}
@keyframes flow{to{stroke-dashoffset:-234}}

/* ============ Reveal al hacer scroll ============ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ============ Formularios accesibles ============ */
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.field label{font-weight:600;color:var(--txt)}
.field .req{color:var(--orange)}
.field input,.field textarea,.field select{
  background:#0c1220;border:1px solid var(--line);border-radius:12px;
  color:var(--txt);padding:.85rem 1rem;font-size:1rem;font-family:inherit;width:100%}
.field input::placeholder,.field textarea::placeholder{color:var(--txt-3)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--cyan)}
.field .hint{color:var(--txt-3);font-size:.85rem}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:#ff5c7a}
.field .error{color:#ffb3c0;font-size:.85rem;min-height:1em}
.consent{display:flex;gap:.7rem;align-items:flex-start;color:var(--txt-2)}
.consent input{width:auto;margin-top:.25rem;transform:scale(1.25)}

/* ============ Banner de cookies / consentimiento ============ */
#consent-banner{position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:rgba(7,11,22,.97);border-top:1px solid var(--cyan);
  padding:1rem 1.2rem;display:flex;gap:1rem;flex-wrap:wrap;
  align-items:center;justify-content:center}
#consent-banner p{margin:0;max-width:60ch;color:var(--txt-2)}

/* ============ Barra de accesibilidad ============ */
#a11y-bar{display:flex;gap:.4rem;align-items:center}
.a11y-btn{background:#0c1220;border:1px solid var(--line);color:var(--txt);
  border-radius:10px;padding:.45rem .7rem;font-weight:600;cursor:pointer;font-size:.9rem}
.a11y-btn[aria-pressed="true"]{background:var(--cyan);color:var(--ink);border-color:transparent}

/* Escalado de texto por el usuario (soporte a 200%) */
body.font-lg{font-size:1.25rem}

/* ============ Pausa de movimiento (usuario o SO) ============ */
body.motion-paused .marquee,
body.motion-paused .frame::before,
body.motion-paused .dash,
body.motion-paused .float-slow{animation-play-state:paused!important}
body.motion-paused #speed-canvas{opacity:.18}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  #speed-canvas{opacity:.2}
}

/* Fondo decorativo (nunca captura clics ni foco) */
#speed-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.5;pointer-events:none}
/* El contenido siempre por encima del fondo */
header,main,footer{position:relative;z-index:2}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%,transparent 40%,rgba(3,6,14,.55) 78%,var(--ink) 100%)}

.float-slow{animation:floaty 6s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-10px)}}

/* Reflow / 320px sin scroll horizontal */
img{max-width:100%;height:auto}
.container{width:100%;max-width:1200px;margin-inline:auto;padding-inline:1.25rem}

/* Visibilidad responsive propia (evita que .btn anule a .hidden) */
.only-desktop{display:none!important}
.only-mobile{display:inline-flex!important}
@media (min-width:768px){
  .only-desktop{display:inline-flex!important}
  .only-desktop.as-flex{display:flex!important}
  .only-mobile{display:none!important}
  #mobile-menu{display:none!important}
}
/* En móvil, los botones de accesibilidad muestran solo el icono (nombre accesible por aria-label) */
.a11y-btn .label{display:none}
@media (min-width:768px){ .a11y-btn .label{display:inline} }
/* Paneles ocultos siempre ocultos */
[hidden]{display:none!important}

/* ============ Acordeón accesible ============ */
.acc-item{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:rgba(10,15,28,.6);backdrop-filter:blur(16px);margin-bottom:1rem}
.acc-header{margin:0}
.acc-trigger{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:transparent;border:0;color:#fff;cursor:pointer;padding:1.6rem 1.8rem;
  font-family:"Chakra Petch",sans-serif;font-size:1.3rem;font-weight:700;text-align:left}
.acc-trigger .chev{flex-shrink:0;width:2.4rem;height:2.4rem;border-radius:999px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;transition:transform .4s ease,background .3s ease}
.acc-trigger[aria-expanded="true"] .chev{transform:rotate(180deg);background:rgba(0,242,255,.15)}
.acc-panel{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.8,.2,1)}
.acc-panel-inner{padding:0 1.8rem 1.8rem}
body.motion-paused .acc-panel{transition:none}
@media (prefers-reduced-motion:reduce){.acc-panel{transition:none}}