/* ============================================================
   GLOBAL.CSS
   Reset, variables, tipografía y componentes que se repiten
   en más de una página (botones, formularios, grillas, etc).
   Los estilos propios de una sola página van en su propio
   archivo dentro de /css.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#04070a;
  --bg-soft:#070c11;
  --panel:#0a1118;
  --panel-border:rgba(120,220,190,.18);
  --teal:#4fb8c9;
  --green:#7fe0a8;
  --grad: linear-gradient(135deg, var(--teal), var(--green));
  --ink:#eaf6f2;
  --ink-dim:#9fb4b0;
  --line: rgba(127,224,168,.35);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  min-height:100vh;
  display:flex; flex-direction:column;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(79,184,201,.10), transparent 60%),
    radial-gradient(ellipse 50% 30% at 80% 100%, rgba(127,224,168,.08), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
}
main{flex:1;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{font-family:'Chakra Petch',sans-serif; letter-spacing:.02em;}

/* Fondo tipo circuito, detrás de todo el contenido */
.circuit-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.35;
  background-image:
    linear-gradient(var(--panel-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--panel-border) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, black, transparent 70%);
}

/* ===== Encabezado de páginas internas (todas menos index) ===== */
.page-header{
  position:relative; z-index:1; padding:64px 5vw 40px; text-align:center;
  border-bottom:1px solid var(--panel-border);
}
.page-header .section-tag{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--teal); margin-bottom:10px;}
.page-header h1{font-size:clamp(1.7rem,3.4vw,2.6rem); margin-bottom:14px;}
.page-header p{color:var(--ink-dim); max-width:560px; margin:0 auto; font-size:.98rem;}

/* ===== Secciones de contenido genéricas ===== */
.section{position:relative; z-index:1; padding:70px 5vw; max-width:1080px; margin:0 auto;}
.section-tag{font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--teal); margin-bottom:10px;}
.section h2{font-size:clamp(1.4rem,2.8vw,2rem); margin-bottom:16px;}
.section > p.lead{color:var(--ink-dim); max-width:620px; margin-bottom:40px; font-size:.98rem;}

/* ===== Grillas utilitarias ===== */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.grid-2{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;}

/* ===== Botones ===== */
.btn{
  display:inline-flex; align-items:center; gap:8px; background:var(--grad); color:#04211a; font-weight:600;
  font-size:.85rem; padding:11px 22px; border-radius:999px; border:none; cursor:pointer; margin-top:18px; transition:filter .2s;
}
.btn:hover{filter:brightness(1.08);}
.btn.ghost{background:none; border:1px solid var(--line); color:var(--green);}

/* ===== Formularios ===== */
.form{background:var(--panel); border:1px solid var(--panel-border); border-radius:16px; padding:26px;}
.form label{display:block; font-size:.78rem; color:var(--ink-dim); margin-bottom:6px; margin-top:14px;}
.form label:first-child{margin-top:0;}
.form input, .form textarea, .form select{
  width:100%; background:var(--bg-soft); border:1px solid var(--panel-border); color:var(--ink);
  border-radius:8px; padding:10px 12px; font-family:inherit; font-size:.88rem;
}
.form textarea{min-height:110px; resize:vertical;}
.form-msg{margin-top:14px; padding:12px 14px; border-radius:10px; font-size:.85rem;}
.form-msg.ok{background:rgba(127,224,168,.1); border:1px solid var(--line); color:var(--green);}
.form-msg.error{background:rgba(220,90,90,.1); border:1px solid rgba(220,90,90,.4); color:#ff9a9a;}

/* ============================================================
   RESPONSIVE — global.css
   ============================================================ */
@media (max-width:760px){
  .grid-3{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .section{padding:50px 6vw;}
  .page-header{padding:48px 6vw 32px;}
}