:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --muted2:#64748b;
  --border:#e2e8f0;
  --surface:#ffffff;
  --surface2:#f8fafc;
  --shadow: 0 1px 2px rgba(2,6,23,.06);

  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 28px;
  --max: 1120px;

  /* Degradado tipo AI Compass (calmado) */
  --grad-start:#6d28d9;
  --grad-mid:#2563eb;
  --grad-end:#ec4899;

  --gradient-main: linear-gradient(
    135deg,
    var(--grad-start) 0%,
    var(--grad-mid) 55%,
    var(--grad-end) 100%
  );

  --focus: 0 0 0 4px rgba(59,130,246,.18);
}

/* Base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}
a{ color:inherit; text-decoration:none; }
p{ margin:0; }
h1,h2,h3{ margin:0; letter-spacing:-0.01em; }
ul{ margin:0; padding:0; list-style:none; }
.container{ max-width:var(--max); margin:0 auto; padding:0 16px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Top notice */
.topnote{
  background: var(--surface2);
  border-bottom:1px solid var(--border);
}
.topnote__inner{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding: 8px 0;
  font-size:14px;
  color: var(--muted);
  flex-wrap:wrap;
}
.topnote__link{
  text-decoration: underline;
  text-decoration-color:#cbd5e1;
}
.topnote__link:hover{ text-decoration-color: var(--muted); }

/* Header */
.header{
  position: sticky;
  top:0;
  z-index:50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.header__inner{
  padding: 14px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand__badge{
  width:40px; height:40px;
  border-radius: 14px;
  background: var(--text);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:800;
}
.brand__title{ font-weight:800; }
.brand__sub{ font-size:12px; color: var(--muted2); margin-top:2px; }

.nav{ display:none; align-items:center; gap:22px; font-size:14px; }
.nav__link{ color: var(--muted); }
.nav__link:hover{ color: var(--text); }

.header__actions{
  display:flex; align-items:center; gap:10px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 14px;
  border:1px solid var(--border);
  background:#fff;
  font-size:14px;
  font-weight:700;
  transition: filter .15s ease, background .15s ease, transform .02s ease;
  user-select:none;
}
.btn:active{ transform: translateY(1px); }

.btn--ghost:hover{ background: var(--surface2); }

.btn--primary{
  background: var(--gradient-main);
  border: none;
  color:#fff;
}
.btn--primary:hover{ filter: brightness(1.05); }

.btn--lg{ padding: 12px 18px; border-radius: 18px; font-size:15px; }

.btn--desktopOnly{ display:none; }
.btn--menu{ display:inline-flex; }

@media (min-width: 640px){
  .btn--desktopOnly{ display:inline-flex; }
}
@media (min-width: 1024px){
  .nav{ display:flex; }
  .btn--menu{ display:none; }
}

/* Mobile menu */
.mobileMenu{
  display:none;
  border-top:1px solid var(--border);
  background:#fff;
}
.mobileMenu.is-open{ display:block; }
.mobileMenu__inner{
  padding: 10px 0 14px;
  display:grid;
  gap:2px;
}
.mobileMenu__link{
  padding: 10px 0;
  color: var(--muted);
}
.mobileMenu__link:hover{ color: var(--text); }

/* Hero */
.hero{
  background:
    radial-gradient(1200px 520px at 10% -10%, rgba(109,40,217,0.12), transparent 60%),
    radial-gradient(1100px 520px at 90% -10%, rgba(37,99,235,0.12), transparent 60%),
    linear-gradient(to bottom, var(--surface2), #fff);
}
.hero__grid{
  padding: 56px 0 64px;
  display:grid;
  gap:32px;
}
@media (min-width: 768px){
  .hero__grid{
    padding: 72px 0 84px;
    grid-template-columns: 1.2fr 0.8fr;
    gap:40px;
    align-items:center;
  }
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--muted);
  background:#fff;
  border:1px solid var(--border);
  padding: 6px 10px;
  border-radius: 999px;
}
.pill__dot{
  width:6px; height:6px; border-radius:999px; background:#94a3b8;
}

.hero__h1{
  margin-top: 14px;
  font-size: 38px;
  line-height: 1.12;
  font-weight: 900;
}
.hero__h1 span{ color: var(--muted); }
@media (min-width: 768px){
  .hero__h1{ font-size: 50px; }
}

.hero__lead{
  margin-top: 14px;
  font-size: 18px;
  color: var(--muted);
  max-width: 60ch;
}
.hero__actions{ margin-top: 18px; display:flex; flex-wrap:wrap; gap:10px; }

.hero__miniGrid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
}
.miniCard{
  border:1px solid var(--border);
  border-radius: var(--radius-2xl);
  background:#fff;
  padding: 12px;
}
.miniCard__title{ font-weight:800; }
.miniCard__desc{ margin-top:4px; font-size:14px; color: var(--muted); }

.hero__warn{
  margin-top: 16px;
  font-size: 12px;
  color: var(--muted2);
}

/* Panel */
.panel{
  border:1px solid var(--border);
  border-radius: var(--radius-3xl);
  background:#fff;
  padding: 18px;
  box-shadow: var(--shadow);
}
.panel__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.panel__title{ font-size: 18px; font-weight: 900; }
.panel__subtitle{ margin-top:6px; font-size:14px; color: var(--muted); }

.badge{
  font-size:12px;
  font-weight:900;
  padding: 6px 10px;
  border-radius:999px;
  background: linear-gradient(135deg, rgba(109,40,217,.14), rgba(37,99,235,.14));
  color: #1e40af;
  border: 1px solid #dbeafe;
}

.steps{ margin-top: 16px; display:grid; gap:12px; padding:0; }
.steps__item{ display:flex; gap:12px; }
.steps__num{
  width:28px; height:28px;
  border-radius: 14px;
  background: var(--gradient-main);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size: 13px;
  flex:0 0 auto;
}
.steps__link{ font-weight:900; }
.steps__link:hover{ text-decoration:underline; text-decoration-color:#cbd5e1; }
.steps__desc{ margin-top:2px; font-size:14px; color: var(--muted); }

.panel__actions{
  margin-top: 16px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.hero__note{
  margin-top:12px;
  font-size:12px;
  color: var(--muted2);
}

/* Sections */
.section{ padding: 56px 0; }
.section--alt{
  background: var(--surface2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.section--tightTop{ padding-top: 0; }

.section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.section__title{ font-size: 26px; font-weight: 950; }
@media (min-width: 768px){
  .section__title{ font-size: 32px; }
}
.section__subtitle{ margin-top: 8px; color: var(--muted); }
.section__link{
  font-size:14px;
  font-weight:900;
  color: var(--muted);
  text-decoration:underline;
  text-decoration-color:#cbd5e1;
}
.section__link:hover{ color: var(--text); text-decoration-color: var(--muted); }

/* Cards grid */
.cardsGrid{
  margin-top: 22px;
  display:grid;
  gap:16px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px){
  .cardsGrid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px){
  .cardsGrid{ grid-template-columns: repeat(3, 1fr); }
}

.card{
  border:1px solid var(--border);
  border-radius: var(--radius-3xl);
  background:#fff;
  padding: 18px;
  transition: background .15s ease, transform .02s ease;
}
.card:hover{ background: var(--surface2); }
.card__icon{
  width:40px; height:40px;
  border-radius: 16px;
  background: var(--gradient-main);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:950;
}
.card__title{ margin-top: 12px; font-size: 18px; font-weight: 950; }
.card__desc{ margin-top: 8px; font-size: 14px; color: var(--muted); }

/* Latest: chips + articles */
.chips{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 900;
  border:1px solid var(--border);
  background:#fff;
}
.chip:hover{ background:#f1f5f9; }
.chip--primary{
  background: var(--gradient-main);
  border:none;
  color:#fff;
}
.chip--primary:hover{ filter: brightness(1.05); }

.articlesGrid{
  margin-top: 22px;
  display:grid;
  gap:16px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px){
  .articlesGrid{ grid-template-columns: repeat(3, 1fr); }
}
.article{
  border:1px solid var(--border);
  border-radius: var(--radius-3xl);
  background:#fff;
  padding: 18px;
}
.article__kicker{
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
  color: var(--muted2);
}
.article__title{ margin-top: 10px; font-size: 18px; font-weight: 950; }
.article__desc{ margin-top: 8px; font-size: 14px; color: var(--muted); }
.article__link{
  display:inline-flex;
  margin-top: 12px;
  font-size:14px;
  font-weight:950;
  color: #1e40af;
  text-decoration:underline;
  text-decoration-color:#cbd5e1;
}
.article__link:hover{ text-decoration-color:#1e40af; }

/* CTA Newsletter */
.cta{
  border:1px solid var(--border);
  border-radius: var(--radius-3xl);
  background:#fff;
  padding: 24px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
@media (min-width: 768px){
  .cta{
    padding: 34px;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:22px;
  }
}
.cta__title{ font-size: 24px; font-weight: 950; }
.cta__desc{ margin-top: 8px; color: var(--muted); }

.cta__form{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
}
@media (min-width: 640px){
  .cta__form{ flex-direction:row; width:auto; }
}
.input{
  width:100%;
  padding: 12px 14px;
  border-radius: 18px;
  border:1px solid var(--border);
  outline:none;
  font-size: 14px;
}
.input:focus{
  border-color:#bfdbfe;
  box-shadow: var(--focus);
}

/* FAQ */
.faq__title{ font-size: 32px; font-weight: 950; }
.faqGrid{
  margin-top: 18px;
  display:grid;
  gap:16px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px){
  .faqGrid{ grid-template-columns: repeat(2, 1fr); }
}
.faq{
  border:1px solid var(--border);
  border-radius: var(--radius-3xl);
  background:#fff;
  padding: 18px;
}
.faq__q{
  cursor:pointer;
  font-weight: 950;
  list-style:none;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__a{ margin-top: 10px; font-size: 14px; color: var(--muted); }

/* Footer */
.footer{
  border-top:1px solid var(--border);
  background: var(--surface2);
}
.footer__grid{
  padding: 40px 0 24px;
  display:grid;
  gap:18px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px){
  .footer__grid{
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap:22px;
  }
}
.footer__brand{ font-weight: 950; }
.footer__muted{ margin-top:8px; color: var(--muted); }
.footer__title{ font-weight: 950; }
.footer__list{ margin-top: 8px; display:grid; gap:6px; color: var(--muted); }
.footer__list a:hover{
  text-decoration:underline;
  text-decoration-color:#cbd5e1;
}
.footer__bottom{
  padding: 0 0 24px;
  font-size: 12px;
  color: var(--muted2);
}

/* ====== VERSION C (ULTRA SUAVE): degradado calmado ====== */

/* Logo: degradado MUY desaturado */
.brand__badge{
  background: linear-gradient(
    135deg,
    rgba(109,40,217,.85),
    rgba(37,99,235,.85)
  );
}

/* H1: color con leve transición (no clipping duro) */
.hero__h1 span{
  background: linear-gradient(
    135deg,
    rgba(109,40,217,.9),
    rgba(37,99,235,.9)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Ajuste fino para evitar que destaque demasiado en pantallas grandes */
@media (min-width: 1024px){
  .hero__h1 span{
    filter: saturate(0.9);
  }
}

/* Links clave: apenas perceptible */
.section__link:hover,
.article__link{
  color: #1e40af;
}
/* ===== WCAG CONTRAST SAFETY ===== */

/* Fallback sólido accesible para textos con degradado */
.hero__h1 span{
  color:#1e40af;
}

/* Mejora contraste del texto en botones degradados */
.btn--primary{
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}

.cta__actions{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.cta__note{
  margin-top:10px;
  font-size:12px;
  color:var(--muted2);
}

/* Botón WhatsApp: icono + accesibilidad */
.btn--wa{
  gap:10px;
  white-space:nowrap;
}

.btn__icon{
  width:18px;
  height:18px;
  display:block;
  fill: currentColor; /* hereda el blanco del botón */
}

/* Foco visible (WCAG) */
.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(59,130,246,.25);
}