/* =========================================================
   1. TOKENS
   ========================================================= */
:root,
[data-bs-theme="light"]{
  --navy:#0d2233;          /* titulares y fondos oscuros */
  --ink:#0d2233;
  --body:#5d7183;          /* texto corrido */
  --muted:#6d8193;
  --paper:#ffffff;
  --alt:#f2f7fa;           /* secciones alternas */
  --panel:#ffffff;
  --line:#e2eaf1;
  --blue:#0b72b5;
  --blue-strong:#0b72b5;
  --blue-soft:#e6f1fb;
  --orange:#ef7a1a;        /* acentos decorativos */
  --cta-from:#e0670d;      /* botón: contraste AA con texto blanco grande */
  --cta-to:#cf5c08;
  --cta-glow:rgba(224,103,13,.32);
  --code-bg:#0d2233;
  --code-line:transparent;
  --shadow-sm:0 10px 26px rgba(13,34,51,.06);
  --shadow-md:0 18px 44px rgba(13,34,51,.10);
  --dark-ink:#ffffff;
  --dark-body:#b9cbd8;
  --dark-panel:rgba(255,255,255,.06);
  --dark-line:rgba(255,255,255,.14);
  --focus:#0b72b5;
}

[data-bs-theme="dark"]{
  --navy:#0a141d;
  --ink:#eaf2f8;
  --body:#a7bdcc;
  --muted:#93aabb;
  --paper:#0b1721;
  --alt:#101e2a;
  --panel:#142534;
  --line:#23394a;
  --blue:#63b5ec;
  --blue-strong:#63b5ec;
  --blue-soft:#14314a;
  --orange:#f79340;
  --cta-from:#e0670d;
  --cta-to:#c85807;
  --cta-glow:rgba(224,103,13,.35);
  --code-bg:#07111a;
  --code-line:#23394a;
  --shadow-sm:0 10px 26px rgba(0,0,0,.35);
  --shadow-md:0 18px 44px rgba(0,0,0,.45);
  --dark-ink:#eaf2f8;
  --dark-body:#a7bdcc;
  --dark-panel:rgba(255,255,255,.05);
  --dark-line:rgba(255,255,255,.10);
  --focus:#63b5ec;
}

/* =========================================================
   2. BASE
   ========================================================= */
html{scroll-behavior:smooth}
[id]{scroll-margin-top:5.5rem}
body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
a{color:var(--blue)}
img{max-width:100%}
strong{color:var(--ink)}

h1,h2,h3,.display-face{
  font-family:Archivo, "Archivo Black", Inter, system-ui, sans-serif;
  color:var(--ink);
  letter-spacing:-.03em;
  overflow-wrap:break-word;
}
h1{font-size:clamp(2.35rem, 5.6vw, 4.6rem); font-weight:800; line-height:1.03}
h2{font-size:clamp(1.85rem, 3.6vw, 3rem); font-weight:800; line-height:1.1}
h3{font-size:1.2rem; font-weight:700; letter-spacing:-.02em; line-height:1.3}
.hl{color:var(--blue)}

:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:.4rem}
.skip-link{
  position:fixed; top:.75rem; left:.75rem; z-index:2000;
  background:var(--navy); color:#fff;
  padding:.65rem 1rem; border-radius:.65rem; font-weight:700; text-decoration:none;
}

/* =========================================================
   3. NAVBAR
   ========================================================= */
.navbar{
  background:color-mix(in srgb, var(--paper) 88%, transparent)!important;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding-top:.6rem; padding-bottom:.6rem;
}
.navbar-brand{
  font-family:Archivo, Inter, sans-serif;
  font-weight:800; font-size:1.1rem; letter-spacing:-.025em; flex-shrink:0;
  color:var(--ink); display:flex; align-items:center; gap:.5rem;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.navbar-brand:hover,.navbar-brand:focus{color:var(--ink)}
.brand-dot{width:.65rem;height:.65rem;border-radius:50%;background:var(--orange);flex-shrink:0}
.navbar .nav-link{
  color:var(--body); font-weight:600; font-size:.95rem;
  position:relative; padding-left:0; padding-right:0; margin:0 .6rem;
  white-space:nowrap;
}
.navbar .nav-link::after{
  content:""; position:absolute; left:0; right:100%; bottom:.35rem;
  height:2px; background:var(--blue);
  transition:right .22s ease;
}
.navbar .nav-link:hover::after,
.navbar .nav-link:focus-visible::after,
.navbar .nav-link.active::after{right:0}
.navbar .nav-link:hover,
.navbar .nav-link.active{color:var(--ink)}

.navbar.nav-open{background:var(--paper)!important}  /* menú abierto: fondo sólido */
.nav-controls{gap:.5rem}
.icon-btn{
  width:2.75rem; height:2.75rem;
  display:inline-grid; place-items:center; padding:0;
  border:1px solid var(--line); border-radius:.85rem;
  background:transparent; color:var(--ink);
}
.icon-btn:hover{background:var(--blue-soft)}
.navbar-toggler:focus{box-shadow:none}
.icon-btn svg{width:1.2rem;height:1.2rem}
.theme-toggle .icon-sun{display:none}
[data-bs-theme="dark"] .theme-toggle .icon-sun{display:block}
[data-bs-theme="dark"] .theme-toggle .icon-moon{display:none}

/* =========================================================
   4. BOTONES
   ========================================================= */
.btn-cta,
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:Inter, sans-serif;
  font-size:1.1875rem;            /* 19px: cumple AA de texto grande sobre naranja */
  font-weight:700; line-height:1.2;
  min-height:3.25rem; padding:.85rem 1.6rem;
  border-radius:.85rem; text-decoration:none; border:2px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.btn-cta{
  background:linear-gradient(135deg, var(--cta-from), var(--cta-to));
  color:#fff;
  box-shadow:0 12px 26px var(--cta-glow);
}
.btn-cta:hover{color:#fff; transform:translateY(-2px); box-shadow:0 16px 32px var(--cta-glow)}
.btn-ghost{
  background:transparent; color:var(--ink); border-color:var(--line);
}
.btn-ghost:hover{background:var(--blue-soft); border-color:var(--blue-soft); color:var(--ink)}
.btn-sm-nav{
  font-size:.95rem; min-height:2.75rem; padding:.55rem 1.1rem; border-radius:.75rem;
  white-space:nowrap;
}
.btn-cta svg,.btn-ghost svg{width:1.15rem;height:1.15rem;flex-shrink:0}
.section-dark .btn-ghost{color:#fff; border-color:var(--dark-line)}
.section-dark .btn-ghost:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); color:#fff}

/* =========================================================
   5. ESTRUCTURA DE SECCIONES
   ========================================================= */
.section{padding:6rem 0}
.section-alt{background:var(--alt)}
.section-dark{background:var(--navy); color:var(--dark-body)}
.section-dark h2,.section-dark h3,.section-dark strong{color:var(--dark-ink)}
[data-bs-theme="dark"] .section-dark{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.section-dark .lead{color:var(--dark-body)}

.kicker{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); margin:0 0 1rem;
}
.kicker::before,.kicker::after{
  content:""; width:1.6rem; height:2px; background:currentColor; flex-shrink:0;
}
.section-dark .kicker{color:var(--orange)}

.section-head{max-width:52rem; margin:0 auto 3rem; text-align:center}
.section-head .lead{margin:1rem auto 0}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--body); max-width:62ch}
.prose{max-width:66ch}
.text-center .prose,.section-head .prose{margin-inline:auto}

/* =========================================================
   6. HERO
   ========================================================= */
.hero{
  position:relative; overflow:hidden;
  padding:9rem 0 5.5rem;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
	radial-gradient(38rem 28rem at 88% 8%, var(--blue-soft), transparent 70%),
	radial-gradient(26rem 22rem at 4% 92%, color-mix(in srgb, var(--orange) 14%, transparent), transparent 72%);
  z-index:0; pointer-events:none;
}
.hero > .container{position:relative; z-index:1}

.badge-pill{
  display:inline-flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  background:var(--blue-soft); color:var(--blue);
  border-radius:999px; padding:.45rem .95rem;
  font-size:.88rem; font-weight:700;
}
.badge-pill .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--orange);flex-shrink:0}
.badge-pill .sep{color:var(--orange); font-weight:700}

.hero-sub{font-size:clamp(1.05rem,1.5vw,1.25rem); max-width:56ch}
.hero-sub strong{font-weight:700}

.bar-note{
  border-left:4px solid var(--orange);
  padding:.35rem 0 .35rem 1.1rem;
  color:var(--ink); font-weight:600;
  max-width:56ch;
}
.hero-actions{display:flex; flex-wrap:wrap; gap:.85rem 1rem; margin-top:2.25rem}

.agenda{
  background:var(--panel); border:1px solid var(--line);
  border-radius:1.25rem; padding:1.75rem; box-shadow:var(--shadow-md);
}
.agenda h2{font-size:1.15rem; margin:0 0 1rem}
.agenda ol{counter-reset:agenda; list-style:none; margin:0; padding:0}
.agenda li{
  counter-increment:agenda;
  display:flex; gap:.75rem; align-items:baseline;
  padding:.5rem 0; border-bottom:1px solid var(--line);
  color:var(--ink); font-weight:500;
}
.agenda li:last-child{border-bottom:0}
.agenda li::before{
  content:counter(agenda,decimal-leading-zero);
  color:var(--blue); font-weight:700; font-size:.85rem; letter-spacing:.04em;
}

/* =========================================================
   7. TARJETAS Y LISTAS
   ========================================================= */
.card-x{
  height:100%;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:1.1rem;
  padding:1.6rem;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card-x:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.card-x p:last-child{margin-bottom:0}
.card-accent{border-left:4px solid var(--orange)}
.card-accent-blue{border-left:4px solid var(--blue)}
.section-dark .card-x{
  background:var(--dark-panel); border-color:var(--dark-line); box-shadow:none;
  color:var(--dark-body);
}

.tag{
  display:inline-block; padding:.3rem .7rem; border-radius:999px;
  background:var(--blue-soft); color:var(--blue);
  font-size:.8rem; font-weight:700; letter-spacing:.02em;
}
.num{
  width:2.5rem;height:2.5rem;border-radius:.8rem;
  display:inline-grid;place-items:center;flex-shrink:0;
  background:var(--blue); color:#fff;
  font-family:Archivo, sans-serif; font-weight:800; font-size:1.05rem;
  letter-spacing:0;
}
.num-orange{background:linear-gradient(135deg, var(--cta-from), var(--cta-to))}
.step-row{display:flex; align-items:center; gap:.9rem}

.check{list-style:none; padding:0; margin:0}
.check li{
  position:relative; padding:.65rem 0 .65rem 2.4rem;
  border-bottom:1px solid var(--line);
  color:var(--ink);
}
.check li:last-child{border-bottom:0}
.check li::before{
  content:""; position:absolute; left:0; top:.95rem;
  width:1.5rem;height:1.5rem;border-radius:50%;
  background:var(--blue-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b72b5' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:.85rem; background-repeat:no-repeat; background-position:center;
}
[data-bs-theme="dark"] .check li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363b5ec' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.section-dark .check li{color:var(--dark-ink); border-color:var(--dark-line)}
.check-2col{column-gap:2.5rem}
@media (min-width: 992px){
  .check-2col{columns:2}
  .check-2col li{break-inside:avoid}
}

.quote-bar{
  border-left:4px solid var(--orange);
  padding:.6rem 0 .6rem 1.25rem;
  font-size:1.15rem; font-weight:700; color:var(--ink);
  max-width:60ch;
}
.section-dark .quote-bar{color:var(--dark-ink)}

.panel-soft{
  background:linear-gradient(135deg, var(--blue-soft), color-mix(in srgb, var(--orange) 10%, transparent));
  border:1px solid var(--line);
  border-radius:1.25rem; padding:2rem;
  color:var(--ink);
}
.panel-soft p:last-child{margin-bottom:0}

.figure-frame{
  background:#fff; border:1px solid var(--line);
  border-radius:1.25rem; padding:1rem; box-shadow:var(--shadow-md); margin:0;
}
.figure-frame img{width:100%;height:auto;display:block;border-radius:.8rem}

/* Bloque de código */
.code-block{
  background:var(--code-bg); color:#eaf2f8;
  border:1px solid var(--code-line);
  border-radius:1.1rem; padding:1.5rem;
  font-size:.92rem; line-height:1.65; margin:0;
  white-space:pre-wrap; overflow-wrap:anywhere;
  box-shadow:var(--shadow-md);
}
.code-block code{color:inherit; font-size:inherit}

/* Cierre */
.closing{
  background:linear-gradient(135deg, var(--navy), color-mix(in srgb, var(--blue) 35%, var(--navy)));
  border-radius:1.5rem; padding:3rem 2rem; text-align:center; color:#fff;
}
.closing .kicker{color:var(--orange)}
.formula{
  font-family:Archivo, sans-serif; font-weight:800; letter-spacing:-.025em;
  font-size:clamp(1.35rem,2.6vw,2.1rem); line-height:1.3; color:#fff; margin:0;
}
.formula .f-part{white-space:nowrap}
.closing .lead{color:#d7e6f2; margin-inline:auto}

/* Footer */
footer{background:var(--navy); color:#9fb6c6; padding:2.5rem 0}
footer a{color:#cfe1ee; text-decoration:none}
footer a:hover{color:#fff; text-decoration:underline}
.footer-brand{color:#fff; font-family:Archivo, sans-serif; font-weight:800; letter-spacing:-.02em}

/* =========================================================
   7b. PASO A PASO · CREAR PLANTILLA HIJA
   ========================================================= */
.howto{margin-top:4.5rem}
.section-alt .stepper-num{box-shadow:0 0 0 6px var(--alt)}
.howto-head{text-align:center; margin-bottom:2.25rem}
.howto-head h3{font-size:clamp(1.35rem,2.4vw,1.85rem); font-weight:800; margin:.85rem auto 0; max-width:30ch}

.stepper{list-style:none; margin:0; padding:0; display:grid; gap:1rem}
.stepper-item{position:relative; display:flex; gap:1rem; align-items:stretch}
.stepper-num{
  width:2.75rem; height:2.75rem; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center;
  background:var(--blue); color:#fff;
  font-family:Archivo, sans-serif; font-weight:800; font-size:1.1rem;
  box-shadow:0 0 0 6px var(--paper);         /* separa el número de la línea */
  position:relative; z-index:1;
}
.stepper-item:last-child .stepper-num{background:linear-gradient(135deg, var(--cta-from), var(--cta-to))}
/* Línea vertical (móvil y tablet) */
.stepper-item:not(:last-child)::after{
  content:""; position:absolute;
  left:calc(1.375rem - 1px); top:2.75rem; bottom:-1rem;
  width:2px; background:linear-gradient(var(--blue), color-mix(in srgb, var(--blue) 30%, transparent));
}
.stepper-card{
  flex:1; min-width:0;
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line);
  border-radius:1.1rem; padding:1.25rem;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.stepper-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.stepper-icon{
  width:2.5rem; height:2.5rem; border-radius:.75rem;
  display:grid; place-items:center; margin-bottom:.85rem;
  background:var(--blue-soft); color:var(--blue);
}
.stepper-icon svg{width:1.25rem; height:1.25rem}
.stepper-text{color:var(--ink); font-weight:600; line-height:1.45; margin:0}

/* Mini interfaz decorativa de cada paso */
.ui-mock{margin-top:auto; padding-top:1rem; display:flex; flex-wrap:wrap; align-items:center; gap:.35rem}
.ui-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.78rem; font-weight:600; line-height:1.2;
  background:var(--alt); color:var(--ink);
  border:1px solid var(--line); border-radius:.5rem; padding:.35rem .55rem;
}
.ui-chip.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight:500}
.ui-sep{color:var(--muted); font-weight:700; font-size:.85rem}
.ui-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:700; line-height:1.2;
  background:var(--blue); color:#fff;
  border-radius:.5rem; padding:.45rem .7rem;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--orange) 55%, transparent);  /* botón "señalado" */
}
.ui-btn svg{width:.85rem; height:.85rem}
.ui-form{
  width:100%; border:1px solid var(--line); border-radius:.65rem;
  background:var(--alt); overflow:hidden;
}
.ui-form-bar{height:.55rem; background:var(--blue); opacity:.85}
.ui-form-body{padding:.6rem; display:grid; gap:.4rem}
.ui-line{height:.55rem; border-radius:.3rem; background:var(--line)}
.ui-input{height:1.35rem; border-radius:.35rem; border:1px solid var(--line); background:var(--panel)}
.ui-submit{justify-self:end; width:42%; height:1.2rem; border-radius:.35rem; background:linear-gradient(135deg, var(--cta-from), var(--cta-to))}

.howto-done{
  display:flex; align-items:center; gap:.9rem;
  max-width:44rem; margin:2rem auto 0;
  background:var(--blue-soft); color:var(--ink);
  border-radius:1rem; padding:1rem 1.25rem; font-weight:600;
}
.howto-done .ok{
  width:2.25rem; height:2.25rem; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; background:var(--blue); color:#fff;
}
.howto-done .ok svg{width:1.1rem; height:1.1rem}

/* Escritorio: pasos en horizontal con línea que los une */
@media (min-width: 992px){
  .stepper{grid-template-columns:repeat(5, minmax(0,1fr)); gap:1.25rem}
  .stepper-item{flex-direction:column; gap:1rem}
  .stepper-item:not(:last-child)::after{
	left:2.75rem; right:-1.25rem; top:calc(1.375rem - 1px); bottom:auto;
	width:auto; height:2px;
	background:linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--blue) 30%, transparent));
  }
}
@media (max-width: 575.98px){
  .stepper-item{gap:.8rem}
  .stepper-num{width:2.4rem; height:2.4rem; font-size:1rem}
  .stepper-item:not(:last-child)::after{left:calc(1.2rem - 1px); top:2.4rem}
  .stepper-card{padding:1.1rem}
  .howto{margin-top:3rem}
}
@media (min-width: 992px){ .stepper-text{font-size:.98rem} }
@media (prefers-reduced-motion: reduce){ .stepper-card:hover{transform:none} }

/* Modo oscuro: números sobre azul claro con texto oscuro para mantener el contraste */
[data-bs-theme="dark"] .num:not(.num-orange),
[data-bs-theme="dark"] .stepper-item:not(:last-child) .stepper-num,
[data-bs-theme="dark"] .howto-done .ok{color:#07111a}
[data-bs-theme="dark"] .ui-btn{background:#0b72b5}

/* =========================================================
   7c. EXTENSIONES BUILDER
   ========================================================= */
.builder-card{display:flex; flex-direction:column}
.builder-top{display:flex; align-items:center; gap:.85rem; margin-bottom:1rem}
.monogram{
  width:3rem; height:3rem; border-radius:.9rem; flex-shrink:0;
  display:grid; place-items:center;
  background:var(--navy); color:#fff;
  font-family:Archivo, sans-serif; font-weight:800; font-size:1.05rem; letter-spacing:-.02em;
}
[data-bs-theme="dark"] .monogram{background:var(--blue-soft); color:var(--ink)}
.builder-top h3{margin:0; font-size:1.2rem}
.builder-dev{display:block; font-size:.88rem; color:var(--muted); margin-top:.1rem}
.lic{
  display:inline-flex; align-items:center; align-self:flex-start;
  font-size:.78rem; font-weight:700; letter-spacing:.02em;
  border-radius:999px; padding:.3rem .7rem; margin-bottom:.85rem;
}
.lic-free{background:var(--blue-soft); color:var(--blue)}
.lic-freemium{background:var(--alt); color:var(--ink); border:1px solid var(--line)}
.lic-paid{background:color-mix(in srgb, var(--orange) 16%, transparent); color:#9a3f05}
[data-bs-theme="dark"] .lic-paid{color:#f7b27a}
.builder-desc{margin-bottom:1rem}
.feat{list-style:none; padding:0; margin:0 0 1.25rem; display:flex; flex-wrap:wrap; gap:.4rem}
.feat li{
  font-size:.8rem; font-weight:600; color:var(--ink);
  background:var(--alt); border:1px solid var(--line);
  border-radius:.5rem; padding:.3rem .55rem;
}
.builder-link{
  margin-top:auto; align-self:flex-start;
  display:inline-flex; align-items:center; gap:.4rem;
  min-height:2.75rem; font-weight:700; color:var(--blue); text-decoration:none;
}
.builder-link:hover{text-decoration:underline; text-underline-offset:.2em}
.builder-link svg{width:1rem; height:1rem; transition:transform .18s ease}
.builder-link:hover svg{transform:translate(2px,-2px)}
.fineprint{font-size:.88rem; color:var(--muted); text-align:center; margin:1.5rem auto 0; max-width:60ch}
@media (prefers-reduced-motion: reduce){ .builder-link:hover svg{transform:none} }

/* =========================================================
   7d. PROS Y CONTRAS
   ========================================================= */
.vs-card{
  height:100%; display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line);
  border-radius:1.25rem; overflow:hidden; box-shadow:var(--shadow-sm);
}
.vs-head{
  display:flex; align-items:center; gap:1rem;
  padding:1.5rem 1.6rem; color:#fff;
}
.vs-ia .vs-head{background:linear-gradient(135deg, #0b72b5, #095d94)}
.vs-builder .vs-head{background:linear-gradient(135deg, #0d2233, #1b3a52)}
.vs-icon{
  width:3rem; height:3rem; border-radius:.9rem; flex-shrink:0;
  display:grid; place-items:center; background:rgba(255,255,255,.14);
}
.vs-icon svg{width:1.5rem; height:1.5rem}
.vs-head h3{color:#fff; margin:0; font-size:1.3rem}
.vs-head p{margin:.15rem 0 0; font-size:.92rem; color:rgba(255,255,255,.82)}
.vs-body{padding:1.5rem 1.6rem 1.75rem; display:grid; gap:1.5rem}
.vs-body h4{
  display:flex; align-items:center; gap:.5rem;
  font-family:Inter, sans-serif; font-size:.8rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; margin:0 0 .6rem;
}
.vs-body h4.pro{color:var(--blue)}
.vs-body h4.con{color:#b04a06}
[data-bs-theme="dark"] .vs-body h4.con{color:#f7b27a}
.pc-list{list-style:none; margin:0; padding:0}
.pc-list li{
  position:relative; padding:.5rem 0 .5rem 2.1rem;
  color:var(--ink); line-height:1.5;
  border-bottom:1px solid var(--line);
}
.pc-list li:last-child{border-bottom:0}
.pc-list li::before{
  content:""; position:absolute; left:0; top:.6rem;
  width:1.4rem; height:1.4rem; border-radius:50%;
  background-repeat:no-repeat; background-position:center; background-size:.8rem;
}
.pc-pro li::before{background-color:var(--blue-soft); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b72b5' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.pc-con li::before{background-color:color-mix(in srgb, var(--orange) 16%, transparent); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b04a06' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E")}
[data-bs-theme="dark"] .pc-pro li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363b5ec' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
[data-bs-theme="dark"] .pc-con li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7b27a' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E")}

.choose{
  height:100%; display:flex; gap:1rem; align-items:flex-start;
  background:var(--alt); border:1px solid var(--line);
  border-radius:1.1rem; padding:1.4rem 1.5rem;
}
.choose-title{font-size:clamp(1.35rem,2.4vw,1.85rem); font-weight:800}
.choose .num{border-radius:50%}
.choose h3{font-size:1.1rem; margin:0 0 .35rem}
.choose p{margin:0}
@media (max-width: 575.98px){
  .vs-head{padding:1.25rem}
  .vs-body{padding:1.25rem 1.25rem 1.4rem}
  .choose{padding:1.2rem}
}

/* =========================================================
   8. MODAL DEL PROMPT
   ========================================================= */
.prompt-actions{display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.2rem; margin-top:1.5rem}
.prompt-actions .hint{color:var(--muted); font-size:.95rem; margin:0}
.prompt-modal .modal-content{
  background:var(--paper); color:var(--body);
  border:1px solid var(--line); border-radius:1.25rem;
}
.prompt-modal .modal-header,
.prompt-modal .modal-footer{border-color:var(--line); gap:.75rem}
.prompt-modal .modal-title{font-size:1.4rem; font-weight:800}
.prompt-modal .modal-subtitle{color:var(--muted); font-size:.95rem; margin:.3rem 0 0}
.prompt-modal .btn-close{min-width:2.75rem;min-height:2.75rem;background-size:.9rem}
.prompt-full{
  background:var(--code-bg); color:#eaf2f8;
  border:1px solid var(--code-line); border-radius:1rem; padding:1.35rem;
  font-size:.86rem; line-height:1.65; margin:0;
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.copy-status{margin:0 auto 0 0; font-size:.92rem; color:var(--muted)}
.copy-status.is-error{color:var(--ink); font-weight:600}
.btn-cta .icon-check,.btn-ghost .icon-check{display:none}
.is-copied .icon-copy{display:none}
.is-copied .icon-check{display:block}

/* =========================================================
   9. RESPONSIVE
   ========================================================= */
@media (max-width: 991.98px){
  .navbar-brand{flex:1 1 0; margin-right:.5rem}
  .navbar-collapse{border-top:1px solid var(--line); margin-top:.85rem; padding-top:.35rem}
  .navbar .nav-link{
	margin:0; padding:.8rem .2rem; min-height:2.75rem; font-size:1.02rem;
	border-bottom:1px solid var(--line);
  }
  .navbar .nav-link::after{display:none}
  .navbar .nav-link.active{box-shadow:inset 3px 0 0 var(--orange); padding-left:.8rem}
  .navbar .btn-cta{width:100%; margin:1rem 0 .5rem}
  .section{padding:4.5rem 0}
  .hero{padding:7.5rem 0 4rem}
  .section-head{margin-bottom:2.25rem}
}

@media (max-width: 767.98px){
  body{font-size:1rem}
  .section{padding:3.5rem 0}
  .hero{padding:6.5rem 0 3rem}
  .card-x{padding:1.35rem}
  .panel-soft{padding:1.5rem; border-radius:1.1rem}
  .closing{padding:2.25rem 1.35rem; border-radius:1.25rem}
  .code-block{font-size:.84rem; padding:1.15rem}
  .prompt-modal .modal-content{border-radius:0}
  .prompt-full{font-size:.82rem; padding:1rem}
  .hero-actions .btn-cta,
  .hero-actions .btn-ghost{width:100%}
  .agenda{padding:1.35rem}
}

@media (max-width: 575.98px){
  h1{font-size:clamp(2.1rem, 10.5vw, 2.8rem)}
  h2{font-size:clamp(1.6rem, 7.4vw, 2rem)}
  h3{font-size:1.1rem}
  .kicker{font-size:.72rem; letter-spacing:.14em}
  .kicker::before,.kicker::after{width:1.1rem}
  .quote-bar{font-size:1.05rem}
  .formula{font-size:1.25rem}
  .prompt-actions .btn-cta,.prompt-actions .btn-ghost{width:100%}
  .prompt-modal .modal-footer{flex-direction:column-reverse; align-items:stretch}
  .prompt-modal .modal-footer .btn-cta,
  .prompt-modal .modal-footer .btn-ghost{width:100%; margin:0}
  .copy-status{margin:0; text-align:center}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .card-x:hover,.btn-cta:hover{transform:none}
}