/* ─────────────────────────────────────────────────────────────
   ALLMAXX CAMPO — Estilos compartidos de páginas de contenido
   Misma paleta, tipografía, nav y footer que index.html
   ───────────────────────────────────────────────────────────── */

:root {
  --azul-fondo:   #0D1B2A;
  --azul-card:    #142130;
  --azul-borde:   #1E3347;
  --azul-hover:   #1A2E42;
  --verde:        #22C55E;
  --verde-oscuro: #16A34A;
  --verde-glow:   rgba(34,197,94,0.15);
  --verde-bg:     rgba(34,197,94,0.08);
  --texto:        #F0F6FF;
  --texto-med:    #94A3B8;
  --texto-suave:  #4A6080;
  --accent:       #38BDF8;
  --radius:       12px;
  --radius-lg:    18px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--azul-fondo);
  color: var(--texto);
  overflow-x: hidden;
}

/* ─── NAV (idéntico a index) ─── */
nav {
  position: fixed; top:0; width:100%; z-index:100;
  background: rgba(13,27,42,0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--azul-borde);
  height: 64px;
  display: flex; align-items: center;
  padding: 0 5%;
  gap: 40px;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; flex-shrink: 0;
}
.nav-logo-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px; font-weight: 800;
  color: var(--texto);
  letter-spacing: -0.3px;
}
.nav-logo-text span { color: var(--verde); }

.nav-tabs {
  display: flex; gap: 4px; flex:1;
  list-style: none;
}
.nav-tabs a {
  text-decoration: none;
  color: var(--texto-med);
  font-size: 14px; font-weight: 500;
  padding: 6px 14px;
  border-radius: 7px;
  transition: all .2s;
  white-space: nowrap;
}
.nav-tabs a:hover { color: var(--texto); background: var(--azul-hover); }
.nav-tabs a.active { color: var(--verde); background: var(--verde-bg); }

.nav-btns { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav-login {
  text-decoration:none; font-size:14px; font-weight:500;
  color:var(--texto-med); padding:8px 16px; border-radius:8px;
  border:1px solid var(--azul-borde); transition:all .2s;
}
.nav-login:hover { border-color:var(--verde); color:var(--verde); }
.nav-cta {
  text-decoration:none; font-size:14px; font-weight:600;
  color:#0D1B2A; background:var(--verde); padding:8px 18px;
  border-radius:8px; transition:background .2s;
}
.nav-cta:hover { background:#4ADE80; }

/* ─── CABECERA DE PÁGINA ─── */
.page-hero {
  padding: 128px 5% 56px;
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--azul-borde);
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 85% 20%, rgba(20,90,60,0.28) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(22,197,94,0.06) 0%, transparent 45%),
    linear-gradient(135deg, #0D1B2A 0%, #0D2137 50%, #0B1F2E 100%);
  z-index: 0;
}
.page-hero-inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.section-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  color: var(--verde);
  text-transform: uppercase; letter-spacing: 1.5px;
  margin-bottom: 14px;
}
.page-hero h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800; line-height: 1.06;
  letter-spacing: -1px; color: var(--texto);
  margin-bottom: 16px;
}
.page-hero h1 .verde { color: var(--verde); }
.page-hero .lead {
  font-size: 18px; color: var(--texto-med);
  line-height: 1.65; font-weight: 300; max-width: 620px;
}

/* ─── CONTENEDOR DE ARTÍCULO / CONTENIDO ─── */
.container { max-width: 820px; margin: 0 auto; padding: 56px 5% 96px; }

article p, .prose p {
  font-size: 16px; color: var(--texto-med);
  line-height: 1.8; margin-bottom: 18px; font-weight: 300;
}
article p strong, .prose p strong { color: var(--texto); font-weight: 500; }

article h2, .prose h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 26px; font-weight: 700; color: var(--texto);
  line-height: 1.2; letter-spacing: -0.4px;
  margin: 44px 0 14px;
}
article h3, .prose h3 {
  font-size: 18px; font-weight: 600; color: var(--texto);
  margin: 30px 0 10px;
}
article ul, article ol, .prose ul, .prose ol {
  margin: 6px 0 22px 0; padding-left: 0; list-style: none;
}
article li, .prose li {
  font-size: 16px; color: var(--texto-med);
  line-height: 1.75; font-weight: 300;
  padding: 5px 0 5px 22px; position: relative;
}
article ul li::before, .prose ul li::before {
  content: '·'; color: var(--verde); font-weight: 700;
  position: absolute; left: 4px; font-size: 20px; line-height: 1;
}
article ol { counter-reset: item; }
article ol li::before {
  counter-increment: item; content: counter(item);
  position: absolute; left: 0; top: 6px;
  color: var(--verde); font-weight: 700; font-size: 13px;
}
article a, .prose a { color: var(--verde); text-decoration: none; }
article a:hover, .prose a:hover { text-decoration: underline; }

.callout {
  background: var(--azul-card);
  border: 1px solid var(--azul-borde);
  border-left: 3px solid var(--verde);
  border-radius: 0 10px 10px 0;
  padding: 18px 22px; margin: 24px 0;
}
.callout p { margin: 0; color: var(--texto-med); font-size: 15px; }
.callout strong { color: var(--verde); }

.ejemplo {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--azul-borde);
  border-radius: var(--radius);
  padding: 22px 24px; margin: 24px 0;
}
.ejemplo .ejemplo-title {
  font-size: 12px; font-weight: 600; color: var(--verde);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px;
}
.ejemplo p { font-size: 15px; margin-bottom: 10px; }
.ejemplo .calc { font-family: 'Space Grotesk', sans-serif; color: var(--texto); }

.nota-meta {
  font-size: 13px; color: var(--texto-suave);
  margin-bottom: 8px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.nota-meta .pill {
  background: var(--verde-bg); color: var(--verde);
  border: 1px solid rgba(34,197,94,0.2);
  padding: 2px 10px; border-radius: 100px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px;
}

.cierre-cta {
  margin-top: 40px; padding: 26px 28px;
  background: var(--verde-bg);
  border: 1px solid rgba(34,197,94,0.2);
  border-radius: var(--radius-lg);
}
.cierre-cta p { font-size: 15px; color: var(--texto-med); margin: 0 0 14px; }
.btn-verde {
  display: inline-block; background: var(--verde); color: #0D1B2A;
  font-size: 14px; font-weight: 700; padding: 11px 24px;
  border-radius: 9px; text-decoration: none; transition: all .2s;
}
.btn-verde:hover { background: #4ADE80; transform: translateY(-1px); text-decoration: none; }

.volver-notas {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--texto-med); text-decoration: none;
  margin-bottom: 8px; transition: color .2s;
}
.volver-notas:hover { color: var(--verde); }

/* ─── GRILLA DE NOTAS (índice del blog) ─── */
.notas-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}
.nota-card {
  background: var(--azul-card);
  border: 1px solid var(--azul-borde);
  border-radius: var(--radius-lg);
  padding: 26px 26px 28px;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: all .25s;
}
.nota-card:hover {
  border-color: rgba(34,197,94,0.3);
  background: var(--azul-hover);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.2);
}
.nota-card .cat {
  font-size: 11px; font-weight: 600; color: var(--verde);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;
}
.nota-card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 19px; font-weight: 700; color: var(--texto);
  line-height: 1.25; letter-spacing: -0.3px; margin-bottom: 10px;
}
.nota-card p {
  font-size: 14px; color: var(--texto-med);
  line-height: 1.6; font-weight: 300; margin-bottom: 18px; flex: 1;
}
.nota-card .fecha { font-size: 12px; color: var(--texto-suave); }
.nota-card .leer {
  font-size: 13px; font-weight: 600; color: var(--verde);
  margin-top: 12px; display: inline-flex; align-items: center; gap: 6px;
}

/* ─── FORMULARIO (contacto) ─── */
.form-grid {
  background: var(--azul-card);
  border: 1px solid var(--azul-borde);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.form-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px; font-weight: 700; color: var(--texto);
  margin-bottom: 20px;
}
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block; font-size: 12px; font-weight: 500;
  color: var(--texto-med); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.form-group input, .form-group textarea {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--azul-borde);
  border-radius: 8px; color: var(--texto);
  font-size: 14px; font-family: 'Inter', sans-serif;
  padding: 11px 14px; outline: none; resize: vertical;
  transition: border-color .2s, background .2s;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--texto-suave); }
.form-group input:focus, .form-group textarea:focus {
  border-color: var(--verde); background: rgba(34,197,94,0.04);
}
.btn-registro {
  width: 100%; background: var(--verde); color: #0D1B2A;
  font-size: 15px; font-weight: 700; font-family: 'Inter', sans-serif;
  padding: 13px; border: none; border-radius: 9px; cursor: pointer;
  transition: all .2s; margin-top: 4px; letter-spacing: 0.2px;
}
.btn-registro:hover {
  background: #4ADE80; transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(34,197,94,0.25);
}

/* Bloques de datos de contacto */
.contacto-cols { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.dato-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; text-decoration: none; }
.dato-icon {
  width: 40px; height: 40px; background: var(--verde-bg);
  border: 1px solid rgba(34,197,94,0.2); border-radius: 9px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dato-label {
  font-size: 12px; color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px;
}
.dato-value { font-size: 14px; color: var(--texto); }
.dato-value.verde { color: var(--verde); }

/* Tabla (privacidad) */
table { width: 100%; border-collapse: collapse; margin: 20px 0 28px; }
th {
  background: var(--azul-borde); color: var(--texto);
  font-size: 13px; font-weight: 600; text-align: left; padding: 12px 16px;
}
td {
  border-bottom: 1px solid var(--azul-borde);
  font-size: 14px; color: var(--texto-med); padding: 12px 16px; vertical-align: top;
}
td:first-child { color: var(--texto); font-weight: 500; width: 34%; }
tr:last-child td { border-bottom: none; }

/* ─── FOOTER (idéntico a index) ─── */
footer {
  background: #080F17;
  border-top: 1px solid var(--azul-borde);
  padding: 32px 5%;
  display: flex; align-items: center; justify-content: space-between;
}
.footer-logo { display: flex; align-items: center; gap: 8px; }
.footer-logo-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px; font-weight: 800; color: var(--texto);
}
.footer-logo-text span { color: var(--verde); }
footer p { font-size: 13px; color: var(--texto-suave); }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a {
  color: var(--texto-suave); text-decoration: none;
  font-size: 13px; transition: color .2s;
}
.footer-links a:hover { color: var(--verde); }

/* ─── RESPONSIVE ─── */
@media (max-width: 920px) {
  .nav-tabs { display: none; }
  .notas-grid { grid-template-columns: 1fr; }
  .contacto-cols { grid-template-columns: 1fr; gap: 40px; }
  footer { flex-direction: column; gap: 16px; text-align: center; }
  .footer-links { justify-content: center; }
  .page-hero { padding: 104px 5% 44px; }
}
/* ─── MÓVIL: header compacto para que "Iniciar sesión" no se corte ─── */
@media (max-width: 520px) {
  nav { padding: 0 12px; gap: 8px; justify-content: space-between; }
  nav .nav-logo img { height: 30px; }
  .nav-logo-text { font-size: 14px; }
  .nav-btns { gap: 8px; }
  .nav-login, .nav-cta { font-size: 12.5px; padding: 7px 11px; white-space: nowrap; }
}

/* --- MENU MOVIL (hamburguesa + drawer) --- */
.nav-burger{ display:none; background:none; border:none; color:var(--texto); font-size:26px; line-height:1; cursor:pointer; padding:2px 8px; border-radius:8px; }
.nav-burger:hover{ background:var(--azul-hover); }
.drawer-overlay{ position:fixed; inset:0; background:rgba(5,12,20,0.6); opacity:0; visibility:hidden; transition:opacity .25s ease; z-index:998; }
.drawer-overlay.open{ opacity:1; visibility:visible; }
.drawer{ position:fixed; top:0; right:0; height:100%; width:280px; max-width:80%; background:var(--azul-card); border-left:1px solid var(--azul-borde); transform:translateX(100%); transition:transform .28s ease; z-index:999; display:flex; flex-direction:column; box-shadow:-8px 0 30px rgba(0,0,0,0.35); }
.drawer.open{ transform:translateX(0); }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--azul-borde); }
.drawer-title{ font-weight:700; font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--texto-med); }
.drawer-close{ background:none; border:none; color:var(--texto-med); font-size:26px; line-height:1; cursor:pointer; padding:0 4px; }
.drawer-close:hover{ color:var(--texto); }
.drawer-links{ display:flex; flex-direction:column; padding:12px; gap:2px; }
.drawer-links a{ color:var(--texto-med); text-decoration:none; font-size:15px; font-weight:500; padding:13px 14px; border-radius:10px; transition:background .18s, color .18s; }
.drawer-links a:hover{ color:var(--texto); background:var(--azul-hover); }
.drawer-links a.drawer-cta{ background:var(--verde); color:#0D1B2A; font-weight:600; margin-top:10px; text-align:center; }
.drawer-links a.drawer-cta:hover{ background:#4ADE80; }
@media (max-width: 920px){ .nav-burger{ display:flex; align-items:center; } }