/* TECNIA · estilos compartidos de la web */
:root {
  --noche: #0b1530;
  --noche-2: #111d40;
  --celeste: #2de1f0;
  --azul: #2f7bf6;
  --indigo: #3b4ce8;
  --texto: #0b1530;
  --suave: #55617a;
  --fondo: #f4f7fb;
  --tarjeta: #ffffff;
  --borde: #e2e8f0;
  --degradado: linear-gradient(135deg, var(--celeste), var(--azul) 55%, var(--indigo));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--texto);
  background: var(--fondo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--azul); }
.contenedor { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* Cabecera */
.cabecera { position: sticky; top: 0; z-index: 10; background: rgba(11, 21, 48, 0.86); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.cabecera img { height: 46px; width: auto; }
.menu { display: flex; align-items: center; gap: 26px; }
.menu a { color: #cbd5e1; text-decoration: none; font-size: 15px; }
.menu a:hover { color: #fff; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-weight: 600; text-decoration: none; font-size: 15px; transition: transform 0.15s, box-shadow 0.15s; }
.boton:hover { transform: translateY(-1px); }
.boton-principal { background: var(--degradado); color: #fff; box-shadow: 0 10px 30px -10px rgba(47, 123, 246, 0.7); }
.boton-claro { background: rgba(255, 255, 255, 0.08); color: #fff; border: 1px solid rgba(255, 255, 255, 0.18); }
.menu .boton { padding: 9px 18px; color: #fff; }
@media (max-width: 760px) { .menu a:not(.boton) { display: none; } }

/* Portada */
.portada { position: relative; overflow: hidden; background: var(--noche); color: #fff; padding: 96px 0 104px; }
.portada::before { content: ""; position: absolute; width: 720px; height: 720px; right: -220px; top: -260px; background: radial-gradient(circle, rgba(47, 123, 246, 0.45), transparent 62%); }
.portada::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, #000, transparent 85%); }
.portada .contenedor { position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr 0.75fr; align-items: center; gap: 48px; }
.etiqueta { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--celeste); font-weight: 600; }
.etiqueta::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--celeste); }
.portada h1 { font-size: clamp(36px, 6vw, 62px); line-height: 1.05; margin: 18px 0 20px; letter-spacing: -0.02em; }
.portada h1 span { background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
.portada p { font-size: 19px; color: #b8c3d9; max-width: 560px; margin: 0 0 34px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.portada .marca { justify-self: center; width: min(320px, 70vw); height: auto; filter: drop-shadow(0 30px 60px rgba(47, 123, 246, 0.35)); animation: flotar 6s ease-in-out infinite; }
@keyframes flotar { 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .portada .marca { animation: none; } }
@media (max-width: 860px) {
  .portada { padding: 64px 0 72px; }
  .portada .contenedor { grid-template-columns: 1fr; }
  .portada .marca { order: -1; width: 110px; justify-self: start; }
  .portada .contenedor { gap: 28px; }
}

/* Secciones */
section { padding: 88px 0; }
.titulo { max-width: 640px; margin-bottom: 44px; }
.titulo h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.15; margin: 10px 0 12px; letter-spacing: -0.01em; }
.titulo p { color: var(--suave); margin: 0; font-size: 17px; }
.titulo .etiqueta { color: var(--azul); }
.titulo .etiqueta::before { background: var(--azul); }

.rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .rejilla { grid-template-columns: 1fr; } }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 20px; padding: 28px; transition: border-color 0.2s, box-shadow 0.2s; }
.tarjeta:hover { border-color: #c7d6f5; box-shadow: 0 20px 40px -24px rgba(11, 21, 48, 0.25); }
.tarjeta h3 { margin: 18px 0 8px; font-size: 20px; }
.tarjeta p { margin: 0; color: var(--suave); font-size: 15.5px; }
.icono { width: 48px; height: 48px; border-radius: 14px; background: var(--noche); display: grid; place-items: center; }
.icono svg { width: 26px; height: 26px; stroke: var(--celeste); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Producto */
.producto { background: var(--noche); color: #fff; border-radius: 28px; padding: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; position: relative; overflow: hidden; }
.producto::before { content: ""; position: absolute; width: 520px; height: 520px; left: -200px; bottom: -300px; background: radial-gradient(circle, rgba(45, 225, 240, 0.25), transparent 65%); }
.producto > * { position: relative; }
.producto h3 { font-size: 34px; margin: 10px 0 12px; line-height: 1.15; }
.producto p { color: #b8c3d9; margin: 0 0 24px; }
.lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lista li { display: flex; gap: 12px; align-items: flex-start; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); padding: 14px 16px; border-radius: 14px; color: #dbe4f3; }
.lista li::before { content: ""; flex: none; margin-top: 7px; width: 9px; height: 9px; border-radius: 2px; background: var(--degradado); }
@media (max-width: 860px) { .producto { grid-template-columns: 1fr; padding: 32px 22px; } }

/* Pasos */
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: paso; }
.paso { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 20px; padding: 28px; }
.paso::before { counter-increment: paso; content: "0" counter(paso); font-weight: 700; font-size: 15px; color: #fff; background: var(--degradado); width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; }
.paso h3 { margin: 16px 0 6px; }
.paso p { margin: 0; color: var(--suave); font-size: 15.5px; }
@media (max-width: 760px) { .pasos { grid-template-columns: 1fr; } }

/* Contacto */
.contacto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.contacto .tarjeta a { color: var(--texto); font-weight: 600; text-decoration: none; word-break: break-word; }
.contacto .tarjeta a:hover { color: var(--azul); }
@media (max-width: 760px) { .contacto { grid-template-columns: 1fr; } }
.llamado { margin-top: 32px; text-align: center; }

/* Pie */
.pie { background: var(--noche); color: #93a0ba; padding: 48px 0 36px; font-size: 14px; }
.pie .contenedor { display: grid; gap: 22px; }
.pie img { height: 40px; width: auto; }
.pie nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pie a { color: #cbd5e1; text-decoration: none; }
.pie a:hover { color: #fff; }
.pie .legal { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 20px; }

/* Páginas legales */
.documento { max-width: 760px; margin: 0 auto; padding: 56px 16px 80px; }
.documento h1 { font-size: clamp(30px, 5vw, 42px); line-height: 1.15; margin: 10px 0 6px; }
.documento .fecha { color: var(--suave); margin: 0 0 32px; }
.documento h2 { font-size: 21px; margin: 36px 0 10px; }
.documento p, .documento li { color: #2b3650; font-size: 16px; }
.documento ul { padding-left: 22px; }
.documento li { margin: 6px 0; }
.caja { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px; padding: 18px 22px; margin: 16px 0; }