/* =========================================================
   GONNAX — Estilos de todas las páginas
   Para cambiar colores, editá solo las variables de abajo.
   ========================================================= */
:root {
  --azul-oscuro: #0c1f3f;   /* portada, botones, títulos */
  --azul-texto: #1e4fa3;    /* números y detalles azules */
  --celeste: #e3edfb;       /* etiquetas y fondo de avisos */
  --celeste-borde: #c4d7f5;
  --fondo: #f8f8f6;         /* fondo general de la página */
  --blanco: #ffffff;
  --texto: #1a1f2b;
  --texto-suave: #5b6372;
  --borde: #e3e5e8;
  --alerta-fondo: #fff6e5;  /* recuadro de aviso de riesgo */
  --alerta-borde: #f0c879;
  --radio: 16px;            /* qué tan redondeadas son las esquinas */
  --ancho: 1080px;          /* ancho máximo del contenido */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.6;
  font-size: 17px;
}
a { color: var(--azul-texto); }
img { max-width: 100%; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }

/* ---------- Encabezado ---------- */
.encabezado { background: var(--blanco); border-bottom: 1px solid var(--borde); position: sticky; top: 0; z-index: 10; }
.encabezado .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.25rem; color: var(--azul-oscuro); text-decoration: none; }
.logo svg { width: 30px; height: 30px; }
.menu { display: flex; gap: 22px; flex-wrap: wrap; }
.menu a { color: var(--texto); text-decoration: none; font-size: 0.95rem; }
.menu a:hover { color: var(--azul-texto); }

/* ---------- Portada ---------- */
.portada { padding: 24px 0 0; }
.portada-caja {
  background: var(--azul-oscuro); color: var(--blanco);
  border-radius: 24px; padding: 64px 28px; text-align: center;
}
.portada h1 { font-size: clamp(1.8rem, 4.5vw, 2.8rem); line-height: 1.2; margin: 0 0 18px; }
.portada .subtitulo { color: #c9d6ee; font-size: 1.1rem; max-width: 680px; margin: 0 auto 30px; }
.portada .nota-boton { display: block; color: #9fb3d6; font-size: 0.85rem; margin-top: 12px; }
.etiquetas { display: flex; justify-content: center; gap: 12px 28px; flex-wrap: wrap; margin-top: 30px; color: #c9d6ee; font-size: 0.92rem; }
.etiquetas span::before { content: "✓ "; color: #8fb4ff; }
.riesgo-corto { text-align: center; color: var(--texto-suave); font-size: 0.85rem; margin: 14px auto 0; max-width: 760px; }

/* ---------- Botones ---------- */
.boton {
  display: inline-block; text-decoration: none; font-weight: 600;
  border-radius: 12px; padding: 14px 30px; font-size: 1rem; text-align: center;
}
.boton-claro { background: var(--blanco); color: var(--azul-oscuro); }
.boton-claro:hover { background: #e9eef8; }
.boton-oscuro { background: var(--azul-oscuro); color: var(--blanco); width: 100%; }
.boton-oscuro:hover { background: #17325f; }

/* ---------- Secciones ---------- */
.seccion { padding: 64px 0 0; }
.seccion h2 { font-size: 1.7rem; color: var(--azul-oscuro); margin: 0 0 8px; }
.seccion .intro { color: var(--texto-suave); margin: 0 0 28px; }

/* Cómo funciona */
.pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: paso; }
.pasos li { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px; counter-increment: paso; }
.pasos li::before {
  content: counter(paso); display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--celeste); color: var(--azul-texto);
  font-weight: 700; margin-bottom: 12px;
}
.pasos strong { display: block; color: var(--azul-oscuro); }
.pasos span { color: var(--texto-suave); font-size: 0.95rem; }

/* Tarjetas de bots */
.bots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.tarjeta { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 28px; display: flex; flex-direction: column; }
.tarjeta-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.tarjeta h3 { margin: 0; font-size: 1.4rem; color: var(--azul-oscuro); }
.insignia { background: var(--celeste); color: var(--azul-texto); border-radius: 8px; padding: 4px 12px; font-size: 0.85rem; }
.tarjeta .descripcion { color: var(--texto-suave); margin: 10px 0 18px; }
.pendiente {
  border: 1px dashed var(--celeste-borde); background: #f5f8fd; color: var(--azul-texto);
  border-radius: 10px; padding: 14px; font-size: 0.9rem; text-align: center; margin-bottom: 18px;
}
.precio { font-size: 2.2rem; font-weight: 700; color: var(--azul-oscuro); margin: auto 0 16px; }
.precio small { font-size: 1rem; font-weight: 400; color: var(--texto-suave); }
.nota-precios { color: var(--texto-suave); font-size: 0.85rem; margin-top: 14px; }

/* Requisitos */
.requisitos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.requisito { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px; }
.requisito strong { display: block; color: var(--azul-oscuro); margin-bottom: 4px; }
.requisito span { color: var(--texto-suave); font-size: 0.95rem; }
.aviso-info { background: var(--celeste); border: 1px solid var(--celeste-borde); color: #17407f; border-radius: var(--radio); padding: 18px 22px; margin-top: 18px; }

/* Preguntas frecuentes */
.faq details { background: var(--blanco); border: 1px solid var(--borde); border-radius: 12px; padding: 16px 20px; margin-bottom: 10px; }
.faq summary { font-weight: 600; cursor: pointer; color: var(--azul-oscuro); }
.faq details p { margin: 10px 0 0; color: var(--texto-suave); }

/* Quiénes somos */
.quienes { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 26px; }
.quienes p { margin: 0; }

/* Aviso de riesgo */
.aviso-riesgo { background: var(--alerta-fondo); border: 1px solid var(--alerta-borde); border-radius: var(--radio); padding: 24px 26px; }
.aviso-riesgo h2 { font-size: 1.3rem; margin-bottom: 8px; }
.aviso-riesgo p { margin: 0; }

/* ---------- Pie de página ---------- */
.pie { margin-top: 72px; background: var(--azul-oscuro); color: #c9d6ee; padding: 40px 0 30px; font-size: 0.9rem; }
.pie a { color: var(--blanco); }
.pie-arriba { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
.pie-enlaces { display: flex; gap: 10px 20px; flex-wrap: wrap; }
.pie .legal { border-top: 1px solid #23395f; padding-top: 18px; color: #9fb3d6; font-size: 0.82rem; }

/* ---------- Páginas legales ---------- */
.legal-pagina { max-width: 800px; margin: 0 auto; padding: 40px 20px 0; }
.legal-pagina h1 { color: var(--azul-oscuro); font-size: 2rem; margin: 18px 0 6px; }
.legal-pagina h2 { color: var(--azul-oscuro); font-size: 1.2rem; margin-top: 32px; }
.legal-pagina .fecha { color: var(--texto-suave); font-size: 0.9rem; }
.borrador { background: #fdecec; border: 1px solid #f2b8b8; color: #8a1f1f; border-radius: 10px; padding: 12px 16px; font-weight: 600; }

/* ---------- Celular ---------- */
@media (max-width: 860px) {
  .pasos { grid-template-columns: repeat(2, 1fr); }
  .requisitos { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .menu { display: none; } /* en celular se oculta el menú para que quede limpio */
  .portada-caja { padding: 44px 20px; border-radius: 18px; }
  .pasos, .bots { grid-template-columns: 1fr; }
  .seccion { padding-top: 48px; }
}

/* ---------- Página de prueba gratis ---------- */
.prueba { max-width: var(--ancho); margin: 0 auto; padding: 40px 20px 0; }
.prueba h1 { color: var(--azul-oscuro); font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.2; margin: 0 0 10px; }
.prueba .intro { color: var(--texto-suave); font-size: 1.1rem; margin: 0 0 32px; max-width: 640px; }
.prueba-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.prueba-pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.prueba-pasos li { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px 22px; }
.prueba-pasos strong { display: block; color: var(--azul-oscuro); margin-bottom: 2px; }
.prueba-pasos span { color: var(--texto-suave); font-size: 0.95rem; }
.formulario { background: var(--azul-oscuro); color: var(--blanco); border-radius: 20px; padding: 32px 28px; }
.formulario h2 { margin: 0 0 6px; font-size: 1.5rem; }
.formulario .sub { color: #c9d6ee; margin: 0 0 22px; font-size: 0.95rem; }
.formulario label { display: block; font-weight: 600; font-size: 0.95rem; margin-bottom: 6px; }
.formulario input[type="text"], .formulario input[type="email"] {
  width: 100%; padding: 13px 14px; border-radius: 10px; border: 1px solid #2c4472;
  background: var(--blanco); color: var(--texto); font-size: 1rem; margin-bottom: 18px; font-family: inherit;
}
.formulario input:focus { outline: 3px solid #8fb4ff; outline-offset: 1px; }
.formulario button { width: 100%; border: 0; cursor: pointer; font-family: inherit; }
.formulario .bot-elegido { background: #17325f; border-radius: 8px; padding: 8px 12px; font-size: 0.9rem; margin-bottom: 18px; }
.formulario .chico { color: #9fb3d6; font-size: 0.82rem; margin: 14px 0 0; }
.formulario .chico a { color: var(--blanco); }
.oculto { display: none; }
.gracias { max-width: 640px; margin: 0 auto; padding: 72px 20px 0; text-align: center; }
.gracias h1 { color: var(--azul-oscuro); }
@media (max-width: 760px) { .prueba-grilla { grid-template-columns: 1fr; } }

/* ---------- Planes de precio (lanzamiento HEROE) ---------- */
.planes { display: grid; gap: 10px; margin: 6px 0 16px; }
.plan { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; }
.plan-destacado { border-color: var(--celeste-borde); background: #f5f8fd; }
.plan-nombre { font-weight: 600; color: var(--azul-oscuro); }
.plan-precio { font-size: 1.25rem; font-weight: 700; color: var(--azul-oscuro); }
.plan-precio small { font-size: 0.85rem; font-weight: 400; color: var(--texto-suave); }
.plan-ahorro { display: block; font-size: 0.82rem; color: var(--azul-texto); }
.plan .boton { padding: 10px 18px; font-size: 0.95rem; }
.boton-borde { background: var(--blanco); color: var(--azul-oscuro); border: 1px solid var(--azul-oscuro); width: 100%; }
.boton-borde:hover { background: #e9eef8; }
.proximamente { background: var(--celeste); color: var(--azul-texto); border-radius: 10px; padding: 14px; text-align: center; font-weight: 600; margin-top: auto; }
.boton-inactivo { background: #e9edf3; color: var(--texto-suave); cursor: default; padding: 10px 18px; font-size: 0.95rem; }
.nota-resultados { display: block; font-size: 0.8rem; color: var(--texto-suave); margin-top: 4px; }

/* ---------- Fondo sutil de velas japonesas ---------- */
body {
  background-color: var(--fondo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='240' viewBox='0 0 480 240'%3E%3Cg fill='none' stroke='%230c1f3f' stroke-opacity='0.03' stroke-width='1.5'%3E%3Cpath d='M20 120v70M60 95v60M100 110v55M140 70v70M180 60v55M220 85v60M260 50v60M300 40v55M340 65v55M380 30v60M420 45v55M460 20v60'/%3E%3C/g%3E%3Cg fill='%230c1f3f' fill-opacity='0.028'%3E%3Crect x='13' y='135' width='14' height='40' rx='2'/%3E%3Crect x='93' y='120' width='14' height='30' rx='2'/%3E%3Crect x='173' y='70' width='14' height='32' rx='2'/%3E%3Crect x='253' y='60' width='14' height='36' rx='2'/%3E%3Crect x='333' y='75' width='14' height='30' rx='2'/%3E%3Crect x='413' y='55' width='14' height='34' rx='2'/%3E%3C/g%3E%3Cg fill='none' stroke='%230c1f3f' stroke-opacity='0.035' stroke-width='1.5'%3E%3Crect x='53' y='105' width='14' height='36' rx='2'/%3E%3Crect x='133' y='80' width='14' height='45' rx='2'/%3E%3Crect x='213' y='95' width='14' height='36' rx='2'/%3E%3Crect x='293' y='48' width='14' height='38' rx='2'/%3E%3Crect x='373' y='40' width='14' height='40' rx='2'/%3E%3Crect x='453' y='28' width='14' height='42' rx='2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-attachment: fixed;
}