/* TDP — hoja de estilo compartida.
   Fuente de verdad de la paleta y las fuentes del blueprint.
   La usan el landing base (index.html) y el landing de pymes (pymes/index.html).
   Los @font-face viven aparte en fonts.css. */

  :root{
    --blue:#0073f7;        /* Mega Man Blue  */
    --cyan:#00ffff;        /* Electric Cyan  */
    --yellow:#ffea00;      /* Arcade Yellow  */
    --navy:#1a1a3a;        /* Dark Navy      */
    --magenta:#FF0090;     /* Neon Magenta   */
    --offwhite:#F8F8F8;
    --pale:#A8FFFF;        /* Pale Terminal Cyan */
    --green:#39FF14;       /* Terminal Green */
    --indigo:#4B0082;      /* Sega Genesis Purple */
    --violet:#8A2BE2;      /* Neon Tube Purple */
    --ink:#0d0d22;
    --pixel:'Pixelify Sans', system-ui, sans-serif;
    --term:'VT323', ui-monospace, monospace;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--ink); color:var(--offwhite);
    font-family:var(--pixel); font-size:17px; line-height:1.6;
    background-image:
      radial-gradient(900px 500px at 12% -5%, rgba(255,0,144,.22), transparent 60%),
      radial-gradient(800px 500px at 92% 8%, rgba(0,115,247,.20), transparent 60%),
      linear-gradient(180deg,#0d0d22 0%, #12122e 55%, #0d0d22 100%);
  }
  a{color:var(--cyan); text-decoration:none}
  .wrap{max-width:1080px; margin:0 auto; padding:0 22px}
  .scan{position:fixed; inset:0; pointer-events:none; z-index:99; opacity:.06;
    background:repeating-linear-gradient(180deg,#fff 0 1px, transparent 1px 3px)}

  /* ── header ─────────────────────────────────────── */
  header{position:sticky; top:0; z-index:50; backdrop-filter:blur(8px);
    background:rgba(13,13,34,.72); border-bottom:2px solid rgba(0,255,255,.25)}
  .bar{display:flex; align-items:center; gap:18px; padding:12px 0}
  .logo{font-family:var(--term); font-size:30px; letter-spacing:1px; color:var(--cyan);
    text-shadow:0 0 10px rgba(0,255,255,.55)}
  .logo b{color:var(--magenta); text-shadow:0 0 10px rgba(255,0,144,.6)}
  nav{margin-left:auto; display:flex; gap:16px; flex-wrap:wrap}
  nav a{font-size:15px; color:var(--pale)}
  nav a:hover{color:var(--yellow)}
  .lang{display:flex; border:2px solid var(--violet); border-radius:6px; overflow:hidden}
  .lang button{background:transparent; color:var(--pale); border:0; cursor:pointer;
    font-family:var(--pixel); font-size:14px; padding:5px 11px}
  .lang button.on{background:var(--violet); color:#fff}

  /* ── blocks ─────────────────────────────────────── */
  section{padding:74px 0; border-bottom:1px dashed rgba(168,255,255,.16)}
  h1,h2,h3{font-family:var(--pixel); line-height:1.2; margin:0 0 14px}
  h1{font-size:clamp(34px,5.4vw,58px)}
  h2{font-size:clamp(26px,3.4vw,38px)}
  .kicker{font-family:var(--term); font-size:22px; color:var(--magenta); margin:0 0 8px}
  .lead{font-size:19px; color:var(--pale); max-width:70ch}
  .tag{display:inline-block; font-family:var(--term); font-size:18px; padding:2px 10px;
    border:1px solid var(--cyan); color:var(--cyan); border-radius:4px; margin-bottom:18px}
  .hero-banner{display:block; width:100%; height:auto; margin:0 0 28px;
    border:2px solid rgba(0,255,255,.22); border-radius:10px;
    box-shadow:0 0 26px rgba(255,0,144,.22)}
  .cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:26px}
  .btn{font-family:var(--pixel); font-size:17px; padding:13px 22px; border-radius:8px;
    border:2px solid var(--cyan); color:var(--ink); background:var(--cyan);
    box-shadow:0 0 18px rgba(0,255,255,.35); cursor:pointer}
  .btn.ghost{background:transparent; color:var(--cyan); box-shadow:none}
  .btn:hover{background:var(--green); border-color:var(--green); color:var(--ink)}

  .grid{display:grid; gap:20px}
  .g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
  .g3{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
  .card{background:rgba(26,26,58,.72); border:2px solid rgba(0,255,255,.22);
    border-radius:10px; padding:22px}
  .card h3{color:var(--yellow); font-size:21px; min-height:2.4em}
  .card .price{font-family:var(--term); font-size:30px; color:var(--green); margin:6px 0 12px}
  .card ul{margin:0; padding-left:20px; color:var(--pale)}
  .card li{margin:5px 0}
  h1{text-shadow:0 0 26px rgba(255,0,144,.38)}
  h2{text-shadow:0 0 18px rgba(0,255,255,.28)}
  .slot{color:var(--yellow); background:rgba(255,234,0,.07);
    border-bottom:1px dotted var(--yellow); padding:0 3px}
  .note{font-family:var(--term); font-size:19px; color:var(--pale); opacity:.85}

  /* ── form ───────────────────────────────────────── */
  form{display:grid; gap:12px; max-width:560px}
  label{font-size:15px; color:var(--pale)}
  input,textarea,select{width:100%; padding:11px; border-radius:6px; font-family:var(--term);
    font-size:18px; background:#0a0a1c; color:var(--offwhite); border:2px solid rgba(0,255,255,.3)}
  input:focus,textarea:focus{outline:none; border-color:var(--magenta)}
  footer{padding:40px 0; font-family:var(--term); font-size:18px; color:var(--pale); text-align:center}
  [hidden]{display:none !important}

  /* ── puentes entre los dos landings ─────────────── */
  .backlink{font-family:var(--term); font-size:18px; color:var(--pale);
    border-bottom:1px dotted var(--cyan); white-space:nowrap}
  .backlink:hover{color:var(--yellow); border-bottom-color:var(--yellow)}
  .flag{display:inline-block; font-family:var(--term); font-size:18px; padding:2px 10px;
    border:1px solid var(--magenta); color:var(--magenta); border-radius:4px; margin-bottom:14px}
  .jump{margin-top:24px}
  @media (max-width:700px){
    .bar{flex-wrap:wrap; row-gap:8px}
    nav{margin-left:0; gap:12px}
    section{padding:52px 0}
  }