/* ═══════════════════════════════════════════════════════════════
   MexMail — lo propio del sitio, encima de styles.css
   styles.css es el sistema de diseño de MexCloud, copiado tal cual:
   mismos tokens, componentes y temas. Aquí solo va lo que MexMail
   necesita y MexCloud no tiene (logotipo, maquetas de correo,
   capacidades de los planes y glosario).
   Todo sale de los tokens de :root / [data-theme="dark"].
   ═══════════════════════════════════════════════════════════════ */

/* ─── Logotipo: el wordmark de MexMail mide 333 de ancho, no 418 ─── */
.logo-word { aspect-ratio: 333 / 68.5; }
.lw-mail { fill: var(--logo-mail); }

/* ─── Encabezado: cinco enlaces + dos botones no caben antes del menú
       de hamburguesa; en la franja media se aprieta y se suelta
       «Iniciar sesión» (sigue en el menú y en el pie). ─── */
@media (max-width: 1120px) and (min-width: 861px) {
  .nav-links a { padding: 0.5rem 0.5rem; font-size: 0.88rem; }
  .nav-actions > .btn-ghost { display: none; }
}

/* ─── Hero ─── */
.hero-title .azul { color: var(--hero-accent); }
.hero-title { max-width: 16ch; }
.hero-maqueta { min-width: 0; }
/* La leyenda del sobre: una franja al pie de la bandeja */
.app-leyenda {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--hero-line);
  background: var(--hero-card-2);
  font-size: 0.8rem;
}
.app-leyenda svg { width: 15px; height: 15px; flex: none; color: var(--hero-lock); }
.hero .app-leyenda { color: var(--hero-text-2); }
.app-leyenda b { color: var(--hero-text); font-weight: 700; }

/* Estados en la bandeja de ejemplo */
.app-row .ic.is-ok  { background: var(--ok-bg);  color: var(--ok); }
.app-row .ic.is-bad { background: var(--bad-bg); color: var(--bad); }
.app-row .end.is-ok  { color: var(--ok); }
.app-row .end.is-bad { color: var(--bad); }
.app-row > div { min-width: 0; }
.app-row small { overflow-wrap: anywhere; }
.app-nota {
  margin-top: 0.6rem;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  background: var(--hero-chip);
  font-size: 0.72rem;
  color: var(--hero-text-2);
}

/* La notificación de WhatsApp (en la bandeja y en su spotlight) */
.wa-msg {
  max-width: 94%;
  margin: 0 0 0.7rem;
  padding: 0.6rem 0.8rem 0.6rem;
  border-radius: 4px 12px 12px 12px;
  background: #DCF8C6;
  color: #10301A;
  font-size: 0.8rem;
  line-height: 1.45;
  box-shadow: var(--sh-sm);
}
[data-theme="dark"] .wa-msg, .spotlight:not(.is-light) .wa-msg { background: #054D40; color: #E6F7EF; }
.wa-msg b { display: block; color: inherit; font-weight: 700; }
.wa-msg small { display: block; margin-top: 0.35rem; font-family: var(--font-mono); font-size: 0.68rem; opacity: 0.85; }
.wa-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 700;
  color: #0F6B33;
}
[data-theme="dark"] .wa-head, .spotlight:not(.is-light) .wa-head { color: #7FE3B0; }
.wa-dot { display: grid; place-items: center; width: 16px; height: 16px; }
.wa-dot svg { width: 15px; height: 15px; }
.wa-msg.is-grande { font-size: 0.9rem; margin-bottom: 1rem; }
.wa-msg.is-grande small { font-size: 0.72rem; }

/* ─── Por qué: lo que no hacemos (la columna «vs» de MexCloud) ─── */
.no-hacemos li b { color: var(--text); }
.no-hacemos .si {
  position: relative;
  margin: 1.2rem 0 0;
  padding: 0.95rem 0 0 1.6rem;
  border-top: 1px solid var(--border);
  font-weight: 700;
  color: var(--ok);
}
.no-hacemos .si::before {
  content: "";
  position: absolute;
  left: 0; top: calc(0.95rem + 0.32em);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ok-bg);
}
.no-hacemos .si::after {
  content: "";
  position: absolute;
  left: 4px; top: calc(0.95rem + 0.32em + 3px);
  width: 4px; height: 7px;
  border-right: 2px solid var(--ok);
  border-bottom: 2px solid var(--ok);
  transform: rotate(42deg);
}

/* ─── Etiquetas técnicas (protocolos, lo que cubre cada capa) ─── */
.tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.95rem; }
.tags span {
  padding: 0.16rem 0.5rem;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.tags span.ok { background: var(--ok-bg); color: var(--ok); }

/* La ruta de un correo: cinco pasos y, en el sexto lugar, el enlace al detalle */
.steps.ruta { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.steps.ruta .step { display: flex; flex-direction: column; }
.steps.ruta .tags { margin-top: auto; padding-top: 0.95rem; }
.step-mas { background: transparent; border-style: dashed; border-color: var(--border-2); justify-content: center; }
.step-mas .btn { align-self: flex-start; margin-top: 1.1rem; }

/* ─── Características: las cuatro que también vienen ─── */
.tambien { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tambien h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.tambien p { font-size: 0.9rem; }

/* ─── Maquetas de los spotlights ─── */
.mock-row > div { min-width: 0; }
.mock-row.sync { justify-content: flex-start; }
.mock-row.sync > div { flex: 1; }
.sync-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: rgba(91, 155, 255, 0.14);
  color: var(--azul-vivo);
}
.sync-ico svg { width: 18px; height: 18px; }
.mock .mock-row .badge { flex: none; }

/* La aplicación web en un navegador (spotlight claro) */
.navegador { padding: 0; overflow: hidden; }
.web-bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.8rem;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}
.web-bar .app-dots { display: flex; gap: 0.3rem; }
.web-bar .app-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-2); }
.web-url {
  flex: 1;
  min-width: 0;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--card);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.web-pwa {
  padding: 0.25rem 0.55rem;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.web-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  padding: 0.45rem 0.8rem 0;
  border-bottom: 1px solid var(--border);
}
.web-tabs span {
  padding: 0.4rem 0.6rem;
  border-bottom: 2px solid transparent;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-3);
}
.web-tabs .on { color: var(--accent); border-bottom-color: var(--accent); }
.web-cuerpo {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 0.9rem;
  padding: 0.6rem 1rem 1rem;
}
.web-nube {
  align-self: start;
  margin-top: 0.5rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-alt);
}
.web-nube h4 { margin: 0 0 0.45rem; font-size: 0.76rem; color: var(--text-3); }
.web-archivo {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0;
  font-size: 0.8rem;
  color: var(--text);
}
.web-archivo svg { width: 15px; height: 15px; flex: none; color: var(--accent); }
.web-nube .badge { margin-top: 0.55rem; }

/* ─── Planes: capacidad de correo y de nube por cuenta ─── */
.planes { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.plan-precio small { display: block; margin: 0.35rem 0 0; font-size: 0.4em; }
.plan-capacidad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.plan-capacidad div {
  padding: 0.55rem 0.7rem;
  border-radius: var(--r-md);
  background: var(--bg-alt);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-3);
}
.plan-capacidad b {
  display: block;
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.plan li.no { color: var(--text-3); }
.plan li.no::before { top: 0.72em; height: 2px; border-radius: 1px; background: var(--text-3); }
.solo-incluye { margin-bottom: clamp(1.2rem, 2.4vw, 1.6rem); }
@media (min-width: 981px) {
  .solo-incluye .check-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ─── Formulario: Turnstile ─── */
.cf-turnstile { margin: 0.2rem 0 0.4rem; }

/* ─── Terminología: glosario con índice (la guía de MexCloud) ─── */
.terminos { display: grid; gap: 1rem; }
.termino {
  padding: clamp(1.2rem, 2.2vw, 1.6rem);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}
.termino h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 1.2rem;
}
.termino h2 code {
  padding: 0.12rem 0.5rem;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
}
.termino h2 small { font-family: var(--font); font-size: 0.86rem; font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.termino p { font-size: 0.94rem; }
.termino .uso {
  margin-top: 0.9rem;
  padding: 0.75rem 0.95rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--accent-soft);
  font-size: 0.9rem;
  color: var(--text-2);
}
@media (max-width: 899px) {
  .glosario-indice { position: static; }
  .glosario-indice ol { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; padding: 0; list-style: none; }
}

/* ─── Aviso de privacidad: los títulos del texto legal son <h2> ─── */
.prosa h2 { margin-top: 2.2rem; font-size: clamp(1.15rem, 2vw, 1.35rem); }

/* ─── Responsivo ─── */
@media (max-width: 620px) {
  .web-cuerpo { grid-template-columns: 1fr; }
  .web-pwa { display: none; }
  .app-foot .app-tab { padding: 0.42rem 0.45rem; font-size: 0.72rem; }
  .plan-precio small { font-size: 0.45em; }
}

@media print {
  .cf-turnstile { display: none !important; }
}

/* ─── Ajustes de legibilidad ─── */
/* Un enlace de texto sobre tinta no puede ser el azul del logotipo: no se lee. */
.spotlight:not(.is-light) p a:not(.btn), .cta-band p a:not(.btn), .hero-mod p a:not(.btn) { color: var(--azul-vivo); }
/* Chips y kickers sobre fondo suave, un paso más oscuros en el tema claro (≥ 4.5:1) */
:root:not([data-theme="dark"]) .tags span,
:root:not([data-theme="dark"]) .web-pwa,
:root:not([data-theme="dark"]) .termino h2 code { color: var(--azul-hover); }
:root:not([data-theme="dark"]) .tags span.ok,
:root:not([data-theme="dark"]) .spotlight.is-light .badge-ok { color: #0F6A31; }
:root:not([data-theme="dark"]) .section-alt .kicker,
:root:not([data-theme="dark"]) .section-contact .kicker,
:root:not([data-theme="dark"]) .spotlight.is-light .kicker,
:root:not([data-theme="dark"]) .section-alt .disclaimer a,
:root:not([data-theme="dark"]) .section-contact .contact-meta a { color: var(--azul-hover); }

/* ─── Seguridad: las seis capas ─── */
.capas { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.capa h3 { font-size: 1.08rem; margin-bottom: 0.45rem; }
.capa p { font-size: 0.92rem; }
.capa .tags { margin-top: auto; padding-top: 0.95rem; }

/* ─── Pantallas muy angostas (≤ 360 px): que nada empuje el ancho ─── */
.contact-grid > *, .spot-grid > *, .split > *, .hero-inner > * { min-width: 0; }
.field select { max-width: 100%; text-overflow: ellipsis; }
@media (max-width: 380px) {
  .app-foot { flex-wrap: wrap; justify-content: center; gap: 0.15rem; }
}

/* «MexMail - MexCloud» en el encabezado (Jore, 2026-10-08): el apellido de la
   familia, con el mismo peso que el wordmark y «Cloud» en el azul de «Mail». */
.logo-producto {
  font-family: var(--font-head); font-weight: 800; font-size: 1.6rem;
  letter-spacing: -.03em; line-height: 1; color: var(--logo-text, var(--text));
  margin-left: -.1rem;
}
.logo-producto .nube { color: var(--logo-mail, var(--accent)); }
@media (max-width: 420px) {
  .logo-producto { font-size: 1.3rem; }
}
/* El wordmark no se encoge: en pantallas angostas cede el apellido, no «MexMail». */
.logo .logo-word, .logo .logo-mark { flex: none; }
@media (max-width: 380px) {
  .logo { gap: 0.4rem; }
  .logo .logo-mark { width: 28px; height: 30px; }
  .logo .logo-word { height: 17px; }
  .logo-producto { font-size: 1.05rem; }
}
@media (max-width: 340px) {
  .logo .logo-word { height: 15px; }
  .logo-producto { font-size: .92rem; }
}