:root{
  --bg: #ffffff;
  --ink: #0f172a;           /* gris muy oscuro */
  --ink-2: #1f2937;         /* títulos */
  --muted: #64748b;         /* texto secundario */
  --line: #eef2f7;          /* bordes suaves */
  --brand: #2563eb;         /* azul */
  --brand-2:#1d4ed8;
  --brand-ink:#0b2ea8;
  --soft: #eef5fd;          /* azul clarito para secciones */
}

*{ box-sizing:border-box; }

html, body{
  height:100%;
}

body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }

h1,h2,h3{
  color:var(--ink-2);
  margin:0 0 .4em;
  line-height:1.2;
}
h1{ font-size: clamp(28px, 3.2vw, 40px); font-weight:800; }
h2{ font-size: clamp(22px, 2.5vw, 28px); font-weight:800; text-align:center; }
h3{ font-size: 18px; font-weight:800; }

/* ---------- Layout utilidades ---------- */
.container{ max-width:1100px; margin:0 auto; padding:0 16px; }
.center{ text-align:center; }
.muted{ color:var(--muted); }
.section{ padding:56px 0; }
.card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; }
.accent{ color:var(--brand); }

/* Grid helpers */
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns: 1fr 1fr; }
.cards-4{ grid-template-columns: repeat(4, 1fr); }

/* ---------- Botones ---------- */
.btn{
  display:inline-block;
  padding:10px 16px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  border:1px solid transparent;
  transition: all .18s ease;
  cursor:pointer;
}
.btn-primary{
  background:var(--brand);
  color:#fff;
  border-color: transparent;
}
.btn-primary:hover{ background:var(--brand-2); text-decoration:none; }
.btn-light{
  background:#fff;
  color:var(--brand);
  border:1px solid #d0defa;
}
.w-100{ width:100%; }

/* ---------- NAV ---------- */
.nav{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0; z-index:30;
}
.nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0;
}
.brand{ display:flex; align-items:center; gap:8px; color:inherit; text-decoration:none; }
.logo{ height:28px; width:auto; display:inline-block; vertical-align:middle; }
.logo-text{ font-weight:700; }

.menu a{
  margin:0 10px; color:#475569; text-decoration:none; font-weight:600;
}
.menu a.active{ color:#111827; text-decoration:none; }
.menu a:hover{ color:#111827; }

/* ---------- HERO (común) ---------- */
.hero{
  background: var(--soft);
  padding:56px 0 24px;
}
.hero .grid-2{ align-items:center; gap:32px; }
.hero h1{ margin:0 0 12px; }
.actions{ display:flex; gap:12px; margin-top:16px; }

/* Contenedor multimedia (video/imagen) */
.media-card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 12px 24px rgba(10,30,60,.08);
  padding:12px;
}
.media-16x9{
  position:relative; width:100%; aspect-ratio:16/9;
  overflow:hidden; border-radius:12px;
}
.media-16x9 video,
.media-16x9 img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.hint{ display:block; margin-top:8px; color:#667085; font-size:.85rem; }

/* ---------- Features (tarjetas de 4) ---------- */
.feature{ text-align:center; }
.feature img{
  width:88px; height:88px; object-fit:contain; margin:0 auto 8px;
}
.cta-card{
  margin:36px auto 0; padding:24px; text-align:center;
  background:#f7fbff; border:1px solid #e6f0fb; border-radius:16px;
}

/* ---------- Plans ---------- */
.pricing-grid{
  display:grid; gap:20px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.plan-card{
  background:#fff;
  border:1px solid #e7eef6;
  border-radius:16px;
  padding:18px;
  box-shadow:0 2px 10px rgba(16,24,40,.04);
  position:relative;
  display:flex; flex-direction:column;
}
.plan-card:hover{
  box-shadow:0 8px 22px rgba(16,24,40,.08);
  transform:translateY(-2px);
}
.plan-icon{
  width:72px; height:72px; object-fit:contain;
  margin:4px auto 8px; display:block;
  background:#f7fbff; border-radius:14px; padding:10px;
  box-shadow: inset 0 0 0 1px #e6eefc;
}
.plan-card h3{ text-align:center; margin:6px 0 4px; }
.plan-card .muted{ text-align:center; margin:0 0 8px; }
.price{
  text-align:center; font-weight:800; font-size:28px;
  margin:8px 0 10px;
}
.price span{ font-size:.7em; vertical-align:top; opacity:.8; margin-right:2px; }
.price small{ font-size:.6em; opacity:.7; margin-left:4px; }
.bullets{ margin:8px 0 14px; padding-left:18px; line-height:1.55; color:#2b3441; }
.bullets li{ margin:4px 0; }
.plan-featured{ border-color:#c7d8ff; box-shadow:0 8px 28px rgba(32,70,255,.09); }
.badge{
  position:absolute; right:12px; top:12px;
  background:#e7eeff; color:#2a4bff; border:1px solid #c7d8ff;
  padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700;
}
.fine-print{ font-size:13px; color:#6a7380; text-align:center; margin-top:14px; }

/* ---------- FAQ ---------- */
.faq-list{ max-width:900px; }
.faq{
  background:#fff; border:1px solid #e9eef5; border-radius:12px;
  padding:12px 16px; margin:10px 0;
  box-shadow:0 2px 10px rgba(16,24,40,.03);
}
.faq summary{ cursor:pointer; font-weight:700; }
.faq p{ margin:8px 0 0; color:#475569; }

/* ---------- Contacto ---------- */
.contact-grid .form label{ display:block; font-weight:600; margin:8px 0; }
.contact-grid input, .contact-grid textarea{
  width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; font:inherit;
}
.contact-grid .info h3{ margin-top:4px; }
.contact-grid .info ul{ margin:8px 0 0 18px; }

/* ---------- Thanks ---------- */
.notice{
  max-width:560px; margin:24px auto; padding:28px;
  background:#fff; border:1px solid #e7eef6; border-radius:16px;
  box-shadow:0 8px 22px rgba(16,24,40,.06); text-align:center;
}
.notice img{ display:block; margin:0 auto 8px; }

/* ---------- Footer ---------- */
.footer{
  border-top:1px solid var(--line);
  padding:24px 0; margin-top:12px; color:#4b5563;
}
.footer a{ color:#334155; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .pricing-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px){
  .grid-2{ grid-template-columns: 1fr; }
  .cards-4{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .pricing-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .cards-4{ grid-template-columns: 1fr; }
}

@media (max-width: 640px){
  .menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
    padding: 10px;
  }
  .menu a {
    display: block;
    padding: 8px 0;
  }
}