/* Allen Group C.A. - página "en construcción"
   Tema oscuro industrial, acento único: dorado del logo.
   Sitio estático (cPanel). Sin dependencias de JS. */

:root{
  --bg:#0f1011;            /* grafito casi negro */
  --surface:#16181a;
  --surface-2:#1c1f22;
  --line:#2b2f33;
  --text:#ecebe6;
  --muted:#a6a59e;          /* AA sobre --bg y --surface */
  --gold:#d4a32f;           /* dorado del logo */
  --gold-hi:#e3b84a;
  --ink-on-gold:#16130a;
  --danger:#ff8a7a;
  --ok:#8fd19e;

  --radius:6px;             /* un solo radio para controles y botones */
  --font-display:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:'Barlow', 'Segoe UI', Arial, sans-serif;
  --font-mono:'IBM Plex Mono', 'Consolas', monospace;

  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ---------- Layout: horizontal = formulario izquierda, diseño derecha ---------- */
.layout{
  display:grid;
  grid-template-columns:minmax(380px, 5fr) 7fr;
  grid-template-areas:"panel visual";
  min-height:100dvh;
}
.visual{ grid-area:visual; }
.panel{ grid-area:panel; }

/* ---------- Visual ---------- */
.visual{
  position:sticky; top:0; height:100dvh;
  display:flex; flex-direction:column; align-items:center;
  padding:40px 48px 32px;
  background-color:var(--surface);
  /* retícula tipo plano de ingeniería */
  background-image:
    linear-gradient(rgba(236,235,230,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236,235,230,.035) 1px, transparent 1px);
  background-size:32px 32px;
  border-left:1px solid var(--line);
  overflow:hidden;
}
.visual-logo{ width:min(340px, 62%); height:auto; margin-bottom:12px; }
.sld{ flex:1; min-height:0; width:100%; max-width:620px; }
.visual .visual-cta{ display:none; }

/* Diagrama unifilar */
.sld .wire, .sld .bus, .sld .sym{
  fill:none; stroke:#7d8287; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.sld .sym{ fill:var(--surface); }           /* tapa el pulso: "pasa por dentro" */
.sld .bus{ stroke:#9a9fa4; stroke-width:5; }
.sld .wire.thin{ stroke-width:1.5; stroke:#5e6368; }
.sld .zone-sep{ stroke:var(--line); stroke-width:1; stroke-dasharray:4 6; }
.sld text{ font-family:var(--font-mono); font-weight:500; }
.sld .zone-label{ fill:var(--gold); font-size:13px; letter-spacing:.14em; }
.sld .tag{ fill:#c9c8c2; font-size:13px; }
.sld .tag.dim{ fill:var(--muted); font-size:12px; }
.sld .tag.strong{ fill:var(--text); }
.sld .tag.center, .sld .load{ text-anchor:middle; }
.sld .load{ fill:#c9c8c2; font-size:15px; }
.sld .pulse{
  fill:none; stroke:var(--gold-hi); stroke-width:4; stroke-linecap:round;
  stroke-dasharray:0 1; opacity:0;
}

/* ---------- Panel ---------- */
.panel{
  display:flex; flex-direction:column; justify-content:space-between;
  padding:36px clamp(28px, 4vw, 64px) 20px;
  min-height:100dvh;
}
.panel-inner{ max-width:560px; width:100%; }

.status{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 14px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold);
}
.status-bar{
  position:relative; width:38px; height:3px; border-radius:2px; overflow:hidden;
  background:rgba(212,163,47,.25);
}
.status-bar::after{
  content:""; position:absolute; inset:0; width:40%; background:var(--gold); border-radius:2px;
  transform:translateX(-100%);
}

h1{
  margin:0 0 14px;
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(32px, 3vw, 46px); line-height:1.02; letter-spacing:.005em;
  text-wrap:balance;
}
h1 span{ color:var(--gold); }
.lede{ margin:0 0 20px; color:var(--muted); font-size:16.5px; line-height:1.5; max-width:46ch; }

/* ---------- Formulario ---------- */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; }
.field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.field.full{ grid-column:1 / -1; }
label{ font-size:13.5px; font-weight:600; color:#d6d5cf; }
input, select{
  width:100%; height:44px; padding:0 14px;
  font:inherit; font-size:15.5px; color:var(--text);
  background:var(--surface-2); border:1px solid #3a3f44; border-radius:var(--radius);
  transition:border-color .15s ease, box-shadow .15s ease;
}
input::placeholder{ color:#8d8c86; }
select{
  appearance:none; padding-right:40px; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size:6px 6px; background-repeat:no-repeat;
}
select:invalid{ color:#8d8c86; }
select option{ color:var(--text); background:var(--surface-2); }
input:focus-visible, select:focus-visible{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,163,47,.28);
}
.field.has-error input, .field.has-error select{ border-color:var(--danger); }
.error{ margin:0; font-size:12.5px; color:var(--danger); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-actions{ grid-column:1 / -1; display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 24px; border-radius:var(--radius);
  font-family:var(--font-body); font-size:15.5px; font-weight:600; text-decoration:none; white-space:nowrap;
  border:1px solid transparent; cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, transform .12s var(--ease-out);
}
.btn:active{ transform:scale(0.98); }
.btn-gold{ background:var(--gold); color:var(--ink-on-gold); }
.btn-ghost{ background:transparent; color:var(--text); border-color:#4a5056; }
.btn-ghost .ph{ font-size:20px; color:var(--gold); }
@media (hover:hover) and (pointer:fine){
  .btn-gold:hover{ background:var(--gold-hi); }
  .btn-ghost:hover{ border-color:var(--gold); }
}
.btn:focus-visible{ outline:2px solid var(--gold-hi); outline-offset:3px; }
.btn[disabled]{ opacity:.7; cursor:progress; }

.form-status{ grid-column:1 / -1; margin:0; min-height:1.2em; font-size:14.5px; }
.form-status.ok{ color:var(--ok); }
.form-status.err{ color:var(--danger); }

/* ---------- Contacto y legal ---------- */
.contact{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); display:grid; gap:8px; }
.contact p{ margin:0; display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--muted); line-height:1.5; }
.contact .ph{ font-size:19px; color:var(--gold); flex-shrink:0; margin-top:1px; }
.contact a{ color:var(--text); text-decoration:none; font-weight:500; }
.contact a:hover{ color:var(--gold-hi); }

.legal{
  margin-top:18px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 18px;
  font-size:12.5px; color:#8d8c86;
}
.legal p{ margin:0; }
.legal a{ color:#bdbcb5; }

/* ---------- Vertical / móvil: primero el diseño, luego el formulario ---------- */
@media (max-width: 900px){
  .layout{ grid-template-columns:1fr; grid-template-areas:"visual" "panel"; }
  .visual{
    position:relative; height:auto; min-height:0;
    padding:28px 18px 24px; border-left:0; border-bottom:1px solid var(--line);
  }
  .visual-logo{ width:min(300px, 78%); margin-bottom:6px; }
  .sld{ flex:none; height:auto; max-height:64svh; }
  .visual .visual-cta{ display:inline-flex; margin-top:14px; }
  /* etiquetas legibles cuando el diagrama se reduce */
  .sld .tag{ font-size:17px; }
  .sld .tag.dim{ font-size:15px; }
  .sld .zone-label{ font-size:16px; }
  .sld .load{ font-size:18px; }
  .panel{ min-height:0; padding:36px 18px 24px; }
  .panel-inner{ max-width:none; }
}
@media (max-width: 520px){
  .form{ grid-template-columns:1fr; }
  .form-actions .btn{ flex:1 1 100%; }
  .legal{ flex-direction:column; }
}

/* ---------- Animación (solo si el usuario no pidió reducir movimiento) ---------- */
@media (prefers-reduced-motion: no-preference){
  /* 1) El diagrama se dibuja de arriba hacia abajo, por zonas */
  .js .sld .wire, .js .sld .bus, .js .sld .sym{
    stroke-dasharray:1; stroke-dashoffset:1;
    animation:draw .9s var(--ease-out) forwards;
  }
  .js .sld .s1 > *{ animation-delay:.15s; }
  .js .sld .s2 .wire:first-child{ animation-delay:.55s; }
  .js .sld .s2 .bus{ animation-delay:.7s; }
  .js .sld .s2 g > *{ animation-delay:.95s; }
  .js .sld .s3 > *{ animation-delay:1.35s; }
  .js .sld text, .js .sld .zone-sep{ opacity:0; animation:fade .6s var(--ease-out) forwards; }
  .js .sld .s1 text, .js .sld .z1{ animation-delay:.6s; }
  .js .sld .s2 text, .js .sld .z2{ animation-delay:1.2s; }
  .js .sld .s3 text, .js .sld .z3, .js .sld .zone-sep{ animation-delay:1.8s; }

  /* 2) Energía: pulsos dorados que recorren la red en bucle (velocidad constante) */
  .js .sld .pulse{
    stroke-dasharray:0.11 1; stroke-dashoffset:0.11;
    filter:drop-shadow(0 0 6px rgba(227,184,74,.9));
    animation:flow 2.4s linear infinite, show .3s ease forwards;
    animation-delay:2.3s, 2.3s;
  }
  .js .sld .p-bus-l, .js .sld .p-bus-r{ animation-duration:1.2s, .3s; animation-delay:2.9s, 2.9s; }
  .js .sld .p-f1{ animation-delay:3.1s, 3.1s; }
  .js .sld .p-f2{ animation-delay:2.7s, 2.7s; }
  .js .sld .p-f3{ animation-delay:3.3s, 3.3s; }

  /* Indicador "en construcción": barra que avanza */
  .status-bar::after{ animation:progress 1.8s cubic-bezier(0.77, 0, 0.175, 1) infinite; }

  /* Entrada del panel */
  .js .panel-inner > *{ opacity:0; transform:translateY(12px); animation:rise .6s var(--ease-out) forwards; }
  .js .panel-inner > :nth-child(2){ animation-delay:.06s; }
  .js .panel-inner > :nth-child(3){ animation-delay:.12s; }
  .js .panel-inner > :nth-child(4){ animation-delay:.18s; }
  .js .panel-inner > :nth-child(5){ animation-delay:.24s; }
}
@media (prefers-reduced-motion: reduce){
  /* Diagrama completo y estático; la energía se indica con el trazo dorado, sin movimiento */
  .sld .pulse{ opacity:1; stroke-dasharray:none; stroke-width:7; stroke:rgba(212,163,47,.4); }
  .status-bar::after{ transform:none; width:60%; }
}

@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fade{ to{ opacity:1; } }
@keyframes show{ to{ opacity:1; } }
@keyframes flow{ to{ stroke-dashoffset:-1; } }
@keyframes rise{ to{ opacity:1; transform:none; } }
@keyframes progress{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(250%); } }