/* —— Colores y tipografía base de Zentranet —— */
:root{
  --zn-blue:#1062ff;
  --zn-bg:#1f1f1f;          /* fondo principal (oscuro)   */
  --zn-bg-alt:#262626;      /* gris más claro p/ tarjetas*/
  --zn-text:#e9ecef;        /* textos principales         */
  --zn-muted:#9ca3af;       /* textos secundarios         */
  --zn-green:#25d366;       /* botón WhatsApp             */
  --radius:.5rem;
  --spacing:clamp(.8rem,2vw,1.5rem);
  --font-main:'Inter',system-ui,sans-serif;
}

/* —— Reset breve —— */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;display:block;height:auto}
a{
    text-decoration: none;
}
body{
  font-family:var(--font-main);
  color:var(--zn-text);
  background:var(--zn-bg);
  line-height:1.5;
}

/* —— Header —— */
.zn-header{
  background:#181818;
 width: 100%;
 
 
}
.zn-logo img{ width: 40%; height: auto; object-fit: contain; }

.zn-nav{display: flex; align-items: center; width: 100%;}



/* —— Layout ——— */
main{display:grid;gap:3rem;max-width:1280px;margin-inline:auto;padding:var(--spacing)}

/* —— Hero —— */
.hero{
  display:grid;
  gap:2.5rem;
  grid-template-columns:1fr;
  min-height:60vh;
  align-items:center;
}
.hero__content{display:flex;flex-direction:column;gap:1.25rem}
.hero__content h1{
  font-size:clamp(2.2rem,6vw,3rem);
  color:#fff;
}
.hero__content h1 span{white-space:nowrap}
.lead{color:var(--zn-muted);font-size:1.1rem}

.btn-primary,
.btn-whatsapp{
  display:inline-block;
  padding:.85rem 1.8rem;
  border-radius:var(--radius);
  font-weight:600;
  text-align:center;
  transition:transform .12s ease;
}
.btn-primary{
  background:var(--zn-blue);
  color:#fff;
}
.btn-whatsapp{
  background:var(--zn-green);
  color:#fff;
  margin-top:.5rem;
}
.btn-primary:hover,
.btn-whatsapp:hover{transform:translateY(-2px)}

.hero__img{justify-self:center;max-width:420px}
/* ───── Modal flotante centrado ───── */
dialog#email-modal {
  position: fixed;                 /* saca el <dialog> del flujo normal            */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);/* lo centra en ambos ejes                      */
  width: clamp(300px, 90vw, 420px);
  padding: 2rem 1.5rem;
  border: none;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
  color: #1a1a1a;
  z-index: 9999;                   /* por encima de todo                           */
}

dialog#email-modal form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

dialog#email-modal h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1.4rem;
  font-weight: 700;
}

/* input + botones */
dialog#email-modal input[type="email"] {
  padding: 0.6rem 0.8rem;
  font-size: 1rem;
  border: 1px solid #c6c6c6;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s;
}

dialog#email-modal input[type="email"]:focus {
  border-color: #0d6efd;           /* azul Zentranet                              */
}

dialog#email-modal .btn-primary {
  background: #0d6efd;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s;
}

dialog#email-modal .btn-primary:hover {
  background: #0251d1;
}

dialog#email-modal button[type="reset"] {
  background: transparent;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 0.9rem;
  align-self: flex-end;
  margin-top: -0.5rem;
}

/* ───── Sombreado del fondo ───── */
dialog#email-modal::backdrop {
  background: rgba(0, 0, 0, 0.65); /* oscurece el sitio detrás                     */
}
/* Spinner */
.spinner{
  width:32px;height:32px;
  border:4px solid #ccc;
  border-top-color:#0d6efd;
  border-radius:50%;
  animation:spin 1s linear infinite;
  margin:0 auto 1rem;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Centrar cualquier vista interna */
#email-modal form,
#email-modal > div{
  text-align:center;
}

@media (min-width:768px){
  .hero{grid-template-columns:repeat(2,1fr)}
}

/* —— Benefits —— */
.benefits{
  background:var(--zn-bg-alt);
  padding:var(--spacing);
  border-radius:var(--radius);
}
.benefits h2{font-size:1.5rem;margin-bottom:.8rem}
.benefits__list{display:grid;gap:.6rem;list-style:none}
.benefits__list li{position:relative;padding-left:1.4rem}
.benefits__list li::before{
  content:"✔";
  color:var(--zn-blue);
  position:absolute;left:0;top:0;
}

/* —— How-to —— */
.howto h2{font-size:1.5rem;margin-bottom:.8rem}
.howto ol{margin-left:1.5rem;display:grid;gap:.6rem;color:var(--zn-muted)}

/* —— Footer —— */
.zn-footer{
  text-align:center;
  font-size:.85rem;
  color:var(--zn-muted);
  padding:var(--spacing) 0;
}
.zn-footer a{color:inherit;text-decoration:underline}

/* —— Accesibilidad —— */
a:focus-visible,button:focus-visible{
  outline:3px solid var(--zn-blue);
  outline-offset:2px;
}
@media (min-width: 1024px) {
    .zn-logo img{ width: 20%; }
}