/* La tipografía se carga con un <link> en app/templates/base.html y no con
   un @import acá: un @import dentro de un CSS se descubre recién cuando el
   navegador ya terminó de bajar y parsear ESTE archivo, así que la hoja de
   Google Fonts --y después cada archivo de fuente-- se pide en cadena, una
   después de la otra. Un <link> en el <head> se descubre de entrada y se
   baja en paralelo con este mismo archivo. */

/* Los colores (--bg, --surface, --cyan, etc.) NO están acá: los sirve
   /tema.css, generado por el servidor a partir de lo que guardó el
   administrador en el panel (ver app/tema.py). Este archivo sólo tiene lo
   que no es un color -- tipografías y toda la estructura-- y /tema.css se
   carga después, en el mismo <head>, para que sus variables manden. */
:root {
  --font-display: 'Syne', sans-serif;
  --font-mono: 'DM Mono', monospace;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-display);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 2px; }

/* ─── NOISE OVERLAY ─── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 180px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.35;
}

/* ─── NAV ─── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.25rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: rgba(3, 6, 9, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.nav-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-logo span {
  color: var(--cyan);
}

/* El alto fijo y el `flex-shrink: 0` evitan que la marca se deforme cuando la
   barra se aprieta en un ancho intermedio, que es donde se rompia el grid. */
.logo-marca {
  height: 1.9rem;
  width: auto;
  flex-shrink: 0;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

.nav-links a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: none;
  letter-spacing: 0.06em;
  transition: color 0.2s;
}

.nav-links a:hover { color: var(--cyan); }

.nav-cta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  padding: 0.55rem 1.2rem;
  border: 1px solid var(--border-bright);
  background: var(--cyan-dim);
  color: var(--cyan);
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s;
}

.nav-cta:hover {
  background: rgba(0, 200, 255, 0.25);
  box-shadow: 0 0 20px var(--cyan-glow);
}

/* ─── HERO ─── */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8rem 2rem 4rem;
  position: relative;
  text-align: center;
  overflow: hidden;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,200,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%);
  pointer-events: none;
}

.hero-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,200,255,0.08) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--cyan);
  border: 1px solid var(--border-bright);
  padding: 0.4rem 1rem;
  border-radius: 100px;
  background: var(--cyan-dim);
  margin-bottom: 2rem;
  animation: fadeUp 0.6s ease both;
}

.hero-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.hero h1 {
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 800;
  /* Por debajo de 1 los renglones se pisan: con 0.95 la caja de línea queda
     más baja que la letra y a 1280px el título se superponía 13 píxeles
     --menos en el teléfono, pero mal en todos los anchos--. Heredado del
     landing original en Next.js. */
  line-height: 1.1;
  letter-spacing: -0.04em;
  margin-bottom: 1.5rem;
  animation: fadeUp 0.6s 0.1s ease both;
  position: relative;
  z-index: 1;
}

.hero h1 .accent {
  color: transparent;
  -webkit-text-stroke: 1px rgba(0,200,255,0.5);
  display: block;
}

.hero h1 .glow-text {
  background: linear-gradient(135deg, #fff 30%, var(--cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-family: var(--font-mono);
  font-size: clamp(0.85rem, 2vw, 1rem);
  color: var(--text-muted);
  max-width: 520px;
  line-height: 1.8;
  margin-bottom: 2.5rem;
  animation: fadeUp 0.6s 0.2s ease both;
  position: relative;
  z-index: 1;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  animation: fadeUp 0.6s 0.3s ease both;
  position: relative;
  z-index: 1;
}

.btn-primary {
  padding: 0.85rem 2rem;
  background: var(--cyan);
  color: #000;
  border: none;
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow 0.2s, transform 0.2s;
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
}

.btn-primary:hover {
  box-shadow: 0 0 40px var(--cyan-glow), 0 0 80px rgba(0,200,255,0.2);
  transform: translateY(-1px);
}

.btn-ghost {
  padding: 0.85rem 2rem;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

.btn-ghost:hover {
  border-color: var(--border-bright);
  color: var(--text);
}

.hero-stats {
  display: flex;
  gap: 3rem;
  margin-top: 5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border);
  animation: fadeUp 0.6s 0.4s ease both;
  position: relative;
  z-index: 1;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text);
  display: block;
}

.stat-value span { color: var(--cyan); }

.stat-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  margin-top: 0.25rem;
}

/* ─── SECTION COMMON ─── */
section {
  padding: 7rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.section-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  color: var(--cyan);
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.section-tag::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--cyan);
}

.section-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 1rem;
}

.section-subtitle {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text-muted);
  max-width: 480px;
  line-height: 1.8;
}

/* ─── FEATURES ─── */
.features-header {
  margin-bottom: 4rem;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.feature-card {
  background: var(--surface);
  padding: 2.5rem;
  position: relative;
  transition: background 0.3s;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.feature-card:hover {
  background: var(--surface2);
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-icon {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-bright);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  background: var(--cyan-dim);
  position: relative;
  z-index: 1;
}

.feature-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.feature-card p {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.8;
}

.feature-number {
  position: absolute;
  bottom: 1.5rem;
  right: 2rem;
  font-family: var(--font-mono);
  font-size: 3rem;
  font-weight: 800;
  color: var(--border);
  line-height: 1;
  pointer-events: none;
}

/* ─── TESTIMONIALS ─── */
.testimonials {
  background: linear-gradient(180deg, transparent, var(--surface) 20%, var(--surface) 80%, transparent);
  max-width: 100%;
  padding: 7rem 2rem;
}

.testimonials-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 4rem;
}

.testimonial-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  background: var(--bg);
  position: relative;
  transition: border-color 0.3s, transform 0.3s;
}

.testimonial-card:hover {
  border-color: var(--border-bright);
  transform: translateY(-4px);
}

.testimonial-card::before {
  content: '"';
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-size: 4rem;
  color: var(--cyan-dim);
  font-family: Georgia, serif;
  line-height: 1;
}

.testimonial-text {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.9;
  margin-bottom: 1.5rem;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.author-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--green));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  color: #000;
  flex-shrink: 0;
}

.author-name {
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: -0.01em;
}

.author-role {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
}

/* ─── PRICING ─── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  margin-top: 4rem;
}

.pricing-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2.1rem 1.5rem 1.8rem;
  background: var(--surface);
  position: relative;
  transition: transform 0.3s;
}

.pricing-card:hover {
  transform: translateY(-4px);
}

.pricing-card.featured {
  border-color: var(--border-bright);
  background: var(--surface2);
}

.pricing-card.featured::before {
  content: 'POPULAR';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cyan);
  color: #000;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  padding: 0.3rem 1rem;
  border-radius: 0 0 6px 6px;
}

.plan-name {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 1.1rem;
  overflow-wrap: normal;
  word-break: normal;
}

.plan-price {
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.15rem;
  overflow-wrap: normal;
  word-break: normal;
  white-space: normal;
}

.plan-price span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0;
}

.plan-period {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-bottom: 1.4rem;
  overflow-wrap: normal;
  word-break: normal;
}

.plan-divider {
  height: 1px;
  background: var(--border);
  margin-bottom: 1.5rem;
}

.plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 2rem;
}

.plan-features li {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.plan-features li::before {
  content: '→';
  color: var(--cyan);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.btn-plan {
  width: 100%;
  padding: 0.85rem;
  border-radius: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: all 0.2s;
}

.btn-plan-outline {
  background: transparent;
  border: 1px solid var(--border-bright);
  color: var(--text);
}

.btn-plan-outline:hover {
  background: var(--cyan-dim);
  border-color: var(--cyan);
}

.btn-plan-solid {
  background: var(--cyan);
  border: none;
  color: #000;
}

.btn-plan-solid:hover {
  box-shadow: 0 0 30px var(--cyan-glow);
}

/* ─── CONTACT ─── */
.contact-section {
  max-width: 100%;
  padding: 7rem 2rem;
  background: var(--bg);
}

.contact-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.contact-wrap {
  display: grid;
  /* `minmax(0, 1fr)` y no `1fr` a secas: una columna `1fr` tiene un mínimo
     implícito de `auto`, que no deja encogerla más allá del ancho mínimo de
     su contenido --el formulario, con sus inputs-- y en una tablet (entre
     el breakpoint de 768px y un monitor de escritorio) esa columna termina
     más ancha que lo que la grilla le dio, empujando toda la página a un
     scroll horizontal. Con `minmax(0, ...)` sí se puede encoger. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
  margin-top: 4rem;
}

.contact-info h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 1.5rem;
}

.contact-info p {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.9;
  margin-bottom: 2.5rem;
}

.contact-detail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-detail a {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-dim);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: color 0.2s;
}

.contact-detail a:hover { color: var(--cyan); }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-enviado {
  text-align: center;
  padding: 5rem 0;
}

.contact-enviado-marca {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-mono);
  color: var(--cyan);
}

.contact-enviado p {
  font-family: var(--font-mono);
  color: var(--text-muted);
  margin-top: 1rem;
}

.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-field label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-transform: uppercase;
}

.form-field {
  min-width: 0;
}

.form-field input,
.form-field textarea {
  /* `width: 100%` + `min-width: 0`: sin esto, un `<input>` no se encoge por
     debajo de su ancho intrínseco por defecto, y aunque la grilla que lo
     contiene ya tenga el ancho correcto (ver `.contact-wrap` más arriba),
     el input de adentro podía seguir siendo el que desbordaba. */
  width: 100%;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.8rem 1rem;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--border-bright);
  box-shadow: 0 0 0 3px var(--cyan-dim);
}

.form-field textarea { min-height: 120px; }

.aviso {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 0.8rem 1.1rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
}

.aviso-error {
  background: rgba(255, 90, 90, 0.1);
  border: 1px solid rgba(255, 90, 90, 0.35);
  color: #ff8a8a;
}

.aviso-ok {
  background: var(--cyan-dim);
  border: 1px solid var(--border-bright);
  color: var(--cyan);
}

.form-btn {
  border: none;
  width: 100%;
  padding: 1rem;
}

/* El honeypot antispam: tiene que existir en el DOM para que un bot lo
   complete, pero invisible para una persona --`display:none` no alcanza,
   algunos bots lo detectan y lo evitan--. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ─── FOOTER ─── */
footer {
  border-top: 1px solid var(--border);
  padding: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
}

.footer-logo {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.02em;
}

.footer-logo span { color: var(--cyan); }

.footer-copy {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.05em;
}

.footer-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.footer-links a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  text-decoration: none;
  letter-spacing: 0.06em;
  transition: color 0.2s;
}

.footer-links a:hover { color: var(--cyan); }

/* ─── ANIMATIONS ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── PANEL DE ADMINISTRACIÓN ───
   Deliberadamente más simple que el resto del sitio: el panel es una
   herramienta de trabajo para el administrador, no una pieza de marketing,
   así que no comparte la estética "consultora tech" de la página pública
   más allá de los colores del tema. */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Sin `wrap` y sin `gap`, en un telefono la marca se encima con las
     acciones y el boton de salir queda cortado contra el borde. */
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  padding: 1.25rem 2rem;
  border-bottom: 1px solid var(--border);
}

.panel-header a {
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
}

.panel-header a span { color: var(--cyan); }

.panel-main {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem;
  font-family: var(--font-mono);
}

.login-caja {
  max-width: 320px;
  margin: 6rem auto;
  font-family: var(--font-mono);
}

.login-caja h1 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
}

.formulario, .formulario-linea {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.formulario-linea {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 1.5rem;
}

.panel-main label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.panel-main input,
.panel-main input[type="color"],
.panel-main select,
.panel-main button {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
}

.panel-main input[type="color"] {
  padding: 0.2rem;
  height: 2.4rem;
  width: 4rem;
  cursor: pointer;
}

.panel-main button {
  background: var(--cyan);
  color: #000;
  font-weight: 700;
  border: none;
  cursor: pointer;
}

.panel-main button:hover { box-shadow: 0 0 20px var(--cyan-glow); }

.panel-section {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.panel-section h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.tabla-contenedor {
  /* Una tabla de varias columnas con contenido real --un correo, un
     mensaje largo-- no entra en el ancho de un celular por más que el
     resto de la página sí se adapte. En vez de achicar el texto hasta
     hacerlo ilegible, se deja scrollear horizontalmente sólo la tabla. */
  overflow-x: auto;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.tabla th, .tabla td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.tabla th {
  color: var(--text-dim);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

.texto-chico { font-size: 0.78rem; color: var(--text-dim); }

/* ─── PANEL: CIFRAS, MENSAJES Y APARIENCIA ─── */

.panel-marca {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.panel-acciones {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.panel-enlace {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: none;
  letter-spacing: 0.05em;
}

.panel-enlace:hover { color: var(--cyan); }

.panel-main .boton-secundario {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-bright);
  font-weight: 400;
}

.panel-header .boton-secundario:hover { color: var(--cyan); }

.panel-cifras {
  display: grid;
  /* `minmax(0, 1fr)`: una columna `1fr` tiene un minimo implicito de `auto`
     que no la deja encoger, y con un numero grande adentro eso provoca
     scroll horizontal en anchos intermedios. Misma leccion que el grid de
     contacto de la pagina publica. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.cifra {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.cifra-numero {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

.cifra-rotulo {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.panel-vacio {
  font-size: 0.85rem;
  color: var(--text-dim);
  border: 1px dashed var(--border-bright);
  border-radius: 6px;
  padding: 1.5rem;
  margin: 0;
}

.lista-leads {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lead {
  border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  background: var(--surface);
}

.lead-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

.lead-nombre {
  font-weight: 700;
  font-size: 0.95rem;
}

.lead-fecha {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.lead-datos {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.lead-datos a { color: var(--cyan); }
.lead-empresa { color: var(--text-muted); }

.lead-mensaje {
  margin: 0.75rem 0 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-muted);
  white-space: pre-wrap;
}

.tabla-visitas .columna-barra { width: 55%; }
.tabla-visitas .celda-dia,
.tabla-visitas .celda-cantidad {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tabla-visitas .celda-cantidad { text-align: right; }

.barra {
  display: block;
  width: 100%;
  height: 0.5rem;
}

.barra rect { fill: var(--cyan); }

.formulario-tema {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.grupo-tema {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 1.1rem 1.1rem;
}

.grupo-tema legend {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  padding: 0 0.4rem;
}

.campos-tema {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
}

.panel-main .campo-color {
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
}

.panel-main .campo-fuente { min-width: 12rem; }

.acciones-tema { display: flex; }

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
  nav { padding: 1rem 1.25rem; }
  .nav-links { display: none; }
  .hero { padding: 6rem 1.25rem 3rem; }
  .hero-stats { gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
  section { padding: 5rem 1.25rem; }
  .features-grid { grid-template-columns: 1fr; }
  .contact-wrap { grid-template-columns: 1fr; gap: 3rem; }
  .form-row { grid-template-columns: 1fr; }
  footer { flex-direction: column; gap: 1.5rem; text-align: center; }
  .footer-links { justify-content: center; }
  .panel-main { padding: 1.25rem; }
  .panel-acciones { gap: 0.6rem; }
  .tabla-visitas .columna-barra { width: 45%; }
  .panel-header { padding: 1rem 1.25rem; }
  .panel-marca { font-size: 0.95rem; }
  .panel-cifras { gap: 0.75rem; }
  .cifra { padding: 0.9rem 1rem; }
  .cifra-numero { font-size: 1.6rem; }
}