/* ============================================================
   MazPortal Tech — landing.css (identidad sketch 004)
   Tema claro: paleta Ntiva (grafito #1B1D28 + azul #005DE5)
   Tema oscuro: paleta Electric (negro + cian #00CCFF)
   Fuente: Plus Jakarta Sans
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ===== Tokens: tema claro (Ntiva) ===== */
:root, [data-theme="light"] {
  --nav: #1B1D28;
  --nav-texto: #C4CDDE;
  --nav-hover: #6FB4FF;
  --bg: #FFFFFF;
  --texto: #1A2440;
  --gris: #5A5F73;
  --primario: #005DE5;
  --secundario: #3D8BFF;
  --terciario: #6FB4FF;
  --card: #FFFFFF;
  --card-sombra: rgba(27,29,40,.16);
  --card-borde: #D7E6FA;
  --suave: #E8F1FE;
  --hero-1: #1B1D28;
  --hero-2: #232A3E;
  --hero-texto: #C4CDDE;
  --glow: rgba(61,139,255,.22);
  --cta-texto: #FFFFFF;
  --btn-cta-bg: #FFFFFF;
  --btn-cta-texto: #005DE5;
  --footer-texto: #C4CDDE;
  --toggle-bg: #3A4256;
  --link: #005DE5;
  --link-visitado: #5B21B6;
}
/* ===== Tokens: tema oscuro (Electric) ===== */
[data-theme="dark"] {
  --nav: #000000;
  --nav-texto: #9BA0A8;
  --nav-hover: #99EBFF;
  --bg: #000000;
  --texto: #F0F2F5;
  --gris: #9BA0A8;
  --primario: #00CCFF;
  --secundario: #66E0FF;
  --terciario: #99EBFF;
  --card: #111111;
  --card-sombra: rgba(0,0,0,.6);
  --card-borde: #2A2A2A;
  --suave: #111111;
  --hero-1: #000000;
  --hero-2: #0D0D0D;
  --hero-texto: #9BA0A8;
  --glow: rgba(0,204,255,.20);
  --cta-texto: #000000;
  --btn-cta-bg: #000000;
  --btn-cta-texto: #00CCFF;
  --footer-texto: #9BA0A8;
  --toggle-bg: #1F1F1F;
  --link: #00CCFF;
  --link-visitado: #A78BFA;
}

html { scroll-behavior: smooth; }
body { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--bg); color: var(--texto); line-height: 1.6; transition: background .3s, color .3s; }

/* ===== Navbar ===== */
nav { background: var(--nav); padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 10; transition: background .3s; }
.logo { color: #fff; font-weight: 800; font-size: 1.15rem; white-space: nowrap; }
.logo span { color: var(--secundario); transition: color .3s; }
.nav-links { display: flex; align-items: center; }
nav a { color: var(--nav-texto); text-decoration: none; margin-left: 1.5rem; font-size: .92rem; font-weight: 500; transition: color .3s; }
nav a:hover { color: var(--nav-hover); }
.nav-right { display: flex; align-items: center; gap: .75rem; margin-left: 1.5rem; }
.nav-toggle { display: none; background: none; border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 1.3rem; line-height: 1; border-radius: 8px; padding: .2rem .55rem; cursor: pointer; }

/* ===== Botón de tema ===== */
.theme-toggle { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none; }
.theme-toggle .track { width: 46px; height: 24px; border-radius: 50rem; background: var(--toggle-bg); border: 2px solid var(--secundario); position: relative; transition: border-color .2s, background .3s; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.theme-toggle .thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: .6rem; transition: transform .25s ease; }
[data-theme="dark"] .theme-toggle .thumb { transform: translateX(22px); }
.theme-toggle .label { color: var(--nav-texto); font-size: .8rem; font-weight: 600; }

.btn { background: var(--primario); color: #fff; font-weight: 700; padding: .7rem 1.5rem; border-radius: 50rem; text-decoration: none; display: inline-block; transition: background .15s, transform .15s; border: none; cursor: pointer; }
.btn:hover { background: var(--secundario); transform: translateY(-2px); }

/* ===== Hero ===== */
.hero { background: linear-gradient(120deg, var(--hero-1) 0%, var(--hero-2) 55%, var(--hero-1) 100%); color: #fff; padding: 5rem 2rem 4.5rem; text-align: center; position: relative; overflow: hidden; transition: background .3s; }
.hero::after { content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 60%); top: -200px; left: -150px; pointer-events: none; }
.hero .kicker { color: var(--terciario); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: .78rem; position: relative; }
.hero h1 { font-size: 2.6rem; font-weight: 800; line-height: 1.12; max-width: 780px; margin: .9rem auto 0; position: relative; }
.hero h1 .gradiente { background: linear-gradient(90deg, var(--primario), var(--secundario)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { max-width: 620px; margin: 1.2rem auto 2.2rem; color: var(--hero-texto); font-size: 1.08rem; position: relative; }

/* ===== Pilares ===== */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.3rem; max-width: 1050px; margin: -2.2rem auto 0; padding: 0 2rem; position: relative; z-index: 2; }
.pillar { background: var(--card); border-radius: 14px; padding: 1.8rem; box-shadow: 0 14px 40px var(--card-sombra); border-top: 4px solid var(--primario); transition: transform .2s, background .3s; }
.pillar:nth-child(2) { border-top-color: var(--secundario); }
.pillar:nth-child(3) { border-top-color: var(--terciario); }
.pillar:hover { transform: translateY(-4px); }
.pillar .icono { font-size: 1.8rem; margin-bottom: .6rem; }
.pillar h3 { font-size: 1.12rem; font-weight: 800; margin-bottom: .4rem; }
.pillar p { color: var(--gris); font-size: .92rem; }
.pillar--vacio { text-align: center; color: var(--gris); }

/* ===== Secciones ===== */
.section { max-width: 1050px; margin: 4rem auto; padding: 0 2rem; }
.section h2 { font-size: 1.85rem; font-weight: 800; }
.section .lead { color: var(--gris); margin: .5rem 0 2rem; }
.section .kicker { color: var(--primario); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: .78rem; }
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.2rem; }
.service { background: var(--suave); border-radius: 14px; padding: 1.5rem; border: 1px solid var(--card-borde); transition: border-color .15s, background .3s; }
.service:hover { border-color: var(--primario); }
.service h4 { font-weight: 800; margin-bottom: .4rem; }
.service p { color: var(--gris); font-size: .9rem; }
.service .icono { font-size: 1.5rem; color: var(--primario); margin-bottom: .5rem; }

/* ===== Beneficios (grid simple) ===== */
.beneficios { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; }
.beneficio { background: var(--card); border: 1px solid var(--card-borde); border-radius: 14px; padding: 1.5rem; }
.beneficio h4 { font-weight: 800; margin-bottom: .3rem; }
.beneficio p { color: var(--gris); font-size: .9rem; }
.beneficio .icono { font-size: 1.4rem; color: var(--primario); margin-bottom: .4rem; }

/* ===== Sección de contenido (nosotros/dinámicas) ===== */
.bloque-contenido { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.bloque-contenido h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: .6rem; }
.bloque-contenido p { color: var(--gris); }

/* ===== CTA ===== */
.cta { background: linear-gradient(120deg, var(--primario), var(--secundario)); border-radius: 16px; max-width: 1050px; margin: 3.5rem auto; padding: 2.6rem 2rem; text-align: center; color: var(--cta-texto); transition: background .3s; }
.cta h3 { font-size: 1.5rem; font-weight: 800; }
.cta p { margin: .4rem 0 1.4rem; opacity: .9; }
.cta .btn { background: var(--btn-cta-bg); color: var(--btn-cta-texto); }

/* ===== Enlaces de contenido (contraste garantizado en ambos temas) ===== */
.section a,
.bloque-contenido a,
.service a,
.beneficio a,
.modal-contacto a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color .2s;
}
.section a:hover,
.bloque-contenido a:hover,
.service a:hover,
.beneficio a:hover,
.modal-contacto a:hover { color: var(--secundario); }
.section a:visited,
.bloque-contenido a:visited,
.service a:visited,
.beneficio a:visited,
.modal-contacto a:visited { color: var(--link-visitado); }
.section a:visited:hover,
.bloque-contenido a:visited:hover,
.service a:visited:hover,
.beneficio a:visited:hover,
.modal-contacto a:visited:hover { color: var(--secundario); }

/* ===== Footer ===== */
footer { background: var(--nav); color: var(--footer-texto); text-align: center; padding: 2.2rem; font-size: .85rem; transition: background .3s; }
footer .marca { color: #fff; font-weight: 800; }
footer .marca span { color: var(--secundario); }
footer .redes { margin: .8rem auto 0; display: flex; gap: .8rem; justify-content: center; }
footer .redes a { color: var(--footer-texto); font-size: 1.2rem; transition: color .2s; }
footer .redes a:hover { color: var(--primario); }

/* ===== Navbar responsive ===== */
@media (max-width: 720px) {
  nav { flex-wrap: wrap; }
  .nav-toggle { display: inline-block; }
  .nav-links {
    display: none; flex-direction: column; width: 100%;
    background: var(--nav); border-radius: 0 0 12px 12px;
    padding: .4rem 0 .8rem; gap: .15rem;
  }
  .nav-links.open { display: flex; }
  .nav-links a { margin: 0; padding: .55rem 2rem; font-size: 1rem; }
  .hero h1 { font-size: 2rem; }
}

/* ===== Modal de contacto ===== */
.modal-contacto { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }
.modal-contacto.abierto { display: flex; }
.modal-contacto__caja { background: var(--card); color: var(--texto); border: 1px solid var(--card-borde); border-radius: 16px; width: min(500px, 100%); padding: 2rem; position: relative; max-height: 90vh; overflow-y: auto; }
.modal-contacto__caja h3 { font-size: 1.4rem; font-weight: 800; margin-bottom: .3rem; }
.modal-contacto__sub { color: var(--gris); margin-bottom: 1.2rem; font-size: .95rem; }
.modal-contacto__cerrar { position: absolute; top: .7rem; right: 1rem; background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--gris); }
.modal-contacto__cerrar:hover { color: var(--primario); }
.modal-contacto .campo { margin-bottom: .9rem; }
.modal-contacto label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: .3rem; }
.modal-contacto input, .modal-contacto textarea { width: 100%; padding: .6rem .8rem; border: 1px solid var(--card-borde); border-radius: 8px; background: var(--bg); color: var(--texto); font-family: inherit; }
.modal-contacto input:focus, .modal-contacto textarea:focus { outline: 2px solid var(--primario); border-color: transparent; }
.btn--ancho { width: 100%; margin-top: .3rem; }
.modal-contacto__res { margin-top: .9rem; font-size: .92rem; white-space: pre-line; }
.modal-contacto__res.ok { color: #16a34a; }
.modal-contacto__res.err { color: #dc2626; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }