/* Layout y componentes del site. Tokens en styles.css. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.container { width: min(1200px, 100% - 2 * var(--space-6)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--space-3); top: -60px; z-index: 100; padding: var(--space-2) var(--space-3); background: var(--color-text); color: #fff; border-radius: var(--radius); }
.skip:focus { top: var(--space-3); }
h1 { font-size: clamp(39px, 4.8vw, 63px); text-wrap: balance; line-height: 1.08; letter-spacing: -0.03em; }
h2 { font-size: clamp(29px, 3.2vw, 41px); text-wrap: balance; }
h3 { font-size: 21px; }
.h2 { font-size: clamp(23px, 2.6vw, 29px); }
p, li { text-wrap: pretty; }
.lead { font-size: 19px; line-height: 1.65; max-width: 62ch; color: var(--color-muted); }
.kicker { font-size: 14px; font-weight: 500; color: var(--color-muted); margin-bottom: var(--space-3); }
.note { font-size: 14px; color: var(--color-muted); max-width: 70ch; }
.trust { color: var(--color-muted); max-width: 58ch; font-size: 16px; }
.icon.inline { vertical-align: -2px; }
.gradient-text { background: linear-gradient(90deg, var(--color-text), #64748b); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* fondo con brillos suaves */
.bg-glow { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg-glow i { position: absolute; border-radius: 50%; filter: blur(100px); }
.bg-glow i:first-child { top: -10%; left: 50%; transform: translateX(-50%); width: 800px; height: 800px; background: rgba(219, 234, 254, 0.35); }
.bg-glow i:last-child { bottom: -10%; right: -10%; width: 600px; height: 600px; background: rgba(226, 232, 240, 0.4); filter: blur(80px); }

/* secciones */
.section { padding-block: clamp(57px, 7vw, 97px); position: relative; }
.section-alt { background: var(--color-surface); border-block: 1px solid var(--color-divider); }
.section-head { max-width: 72ch; margin-bottom: clamp(var(--space-8), 4vw, 56px); }
.section-head .lead { margin-top: var(--space-3); }
.sub-h { font-size: 14px; font-weight: 500; color: var(--color-muted); margin: var(--space-8) 0 var(--space-3); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); align-items: center; }
.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--space-8), 6vw, 80px); align-items: center; }
.split + .grid { margin-top: clamp(var(--space-8), 5vw, 64px); }
@media (max-width: 960px) { .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); } .split { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; } }

/* hero */
.hero-section { padding-block: clamp(49px, 7vw, 105px) clamp(49px, 6vw, 81px); }
.hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(var(--space-8), 6vw, 72px); align-items: center; }
.hero .tag { margin-bottom: var(--space-8); }
.hero .tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5); animation: ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite; }
@keyframes ping { 75%, 100% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0); } }
.hero .lead { font-size: clamp(18px, 1.4vw, 20px); margin-bottom: var(--space-4); }
.hero .actions { margin-top: var(--space-8); }
.hero-media { transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.hero-media:hover { transform: scale(1.02); }
.spec-plate { margin: clamp(var(--space-10), 6vw, 80px) 0 0; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.spec-plate > div { padding: var(--space-6) var(--space-5); border-right: 1px solid var(--color-divider); display: grid; gap: 2px; text-align: center; }
.spec-plate > div:last-child { border-right: 0; }
.spec-plate dd { margin: 0; font-weight: 600; font-size: clamp(25px, 2.2vw, 33px); letter-spacing: -0.02em; line-height: 1.1; color: var(--color-text); }
.spec-plate dt { font-size: 14px; color: var(--color-muted); }
@media (max-width: 960px) { .hero { grid-template-columns: 1fr; } .spec-plate { grid-template-columns: repeat(6, 1fr); } .spec-plate > div { grid-column: span 2; } .spec-plate > div:nth-child(3) { border-right: 0; } .spec-plate > div:nth-child(n+4) { border-top: 1px solid var(--color-divider); grid-column: span 3; } .spec-plate > div:last-child { border-right: 0; } }
@media (max-width: 560px) { .spec-plate { grid-template-columns: 1fr 1fr; } .spec-plate > div { grid-column: span 1 !important; border-right: 0 !important; } .spec-plate > div:nth-child(odd) { border-right: 1px solid var(--color-divider) !important; } .spec-plate > div:nth-child(n+3) { border-top: 1px solid var(--color-divider); } .spec-plate > div:last-child { grid-column: 1 / -1 !important; border-right: 0 !important; } }

/* tarjetas */
.card { padding: var(--space-8); gap: var(--space-2); transition: box-shadow 0.3s, border-color 0.3s, transform 0.3s; }
.card:hover { box-shadow: var(--shadow-md); border-color: #cbd5e1; }
.card-title { font-size: 20px; }
.card-icon { width: 40px; height: 40px; padding: 10px; border: 1px solid var(--color-line); border-radius: var(--radius); background: #f8fafc; color: var(--color-text); margin-bottom: var(--space-4); box-shadow: var(--shadow-sm); transition: transform 0.3s; }
.card:hover .card-icon { transform: scale(1.05); }
.card.topic { padding: var(--space-5) var(--space-6); }
.card.topic .card-title { font-size: 16px; font-weight: 500; margin: 0; }
.card .h2 { margin-top: var(--space-1); }
.card .links { font-size: 15px; }

/* media */
.media { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-divider); box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media.hero-media { aspect-ratio: auto; display: grid; grid-template-rows: auto 1fr; }
.window-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: rgba(255, 255, 255, 0.7); border-bottom: 1px solid #f1f5f9; }
.window-bar i { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; }
.window-bar b { margin-left: auto; width: 96px; height: 6px; border-radius: 3px; background: rgba(226, 232, 240, 0.9); }
.hero-media img { aspect-ratio: 4 / 3; }
.placeholder { position: absolute; inset: 0; display: grid; place-content: center; gap: var(--space-2); text-align: center; padding: var(--space-6); background: repeating-linear-gradient(135deg, #f1f5f9 0 10px, transparent 10px 22px); }
.placeholder span, .placeholder small { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; color: var(--color-muted); }
.placeholder small { font-size: 11px; opacity: 0.7; }

/* listas */
.checklist, .bullets, .links, .chips, .contact-list { padding: 0; margin: 0; }
.checklist { list-style: none; display: grid; gap: var(--space-3); }
.checklist li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 15px; color: var(--color-body); }
.checklist svg { flex: none; margin-top: 1px; width: 20px; height: 20px; color: #16a34a; }
.bullets { padding-left: 1.2em; display: grid; gap: var(--space-2); }
.links { list-style: none; display: grid; gap: var(--space-2); font-size: 16px; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chips .tag { font-size: 15px; padding: var(--space-2) var(--space-4); min-height: 40px; text-decoration: none; box-shadow: var(--shadow-sm); transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; }
.chips a.tag:hover { background: var(--color-text); color: #fff; border-color: var(--color-text); transform: translateY(-1px); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.steps li { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6); display: grid; grid-template-columns: 40px 1fr; gap: var(--space-1) var(--space-4); }
.steps li h3 { font-size: 18px; margin: 0; grid-column: 2; }
.steps li p { margin: 0; grid-column: 2; font-size: 15px; color: var(--color-muted); }
.step-n { grid-row: 1 / span 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius); background: #f8fafc; border: 1px solid var(--color-line); font-size: 13px; font-weight: 600; color: var(--color-text); }
.datasheet { margin: 0; display: grid; gap: var(--space-3); }
.datasheet div { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-divider); }
.datasheet div:last-child { border-bottom: 0; padding-bottom: 0; }
.datasheet dt { font-size: 13px; font-weight: 500; color: var(--color-muted); padding-top: 2px; }
.datasheet dd { margin: 0; font-size: 15px; color: var(--color-text); overflow-wrap: anywhere; }
@media (max-width: 480px) { .datasheet div { grid-template-columns: 1fr; gap: 2px; } }

/* sección oscura + numerados */
.section-dark { background: var(--color-dark); color: #94a3b8; overflow: hidden; }
.section-dark::before { content: ""; position: absolute; inset: 0; opacity: 0.03; background-image: linear-gradient(to right, #fff 1px, transparent 1px), linear-gradient(to bottom, #fff 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; }
.section-dark .container { position: relative; }
.section-dark .kicker { color: #cbd5e1; display: inline-block; border: 1px solid var(--color-dark-3); background: rgba(15, 23, 42, 0.5); padding: 4px 12px; border-radius: var(--radius-pill); }
.section-dark h2 { color: #fff; }
.section-dark .lead { color: #94a3b8; }
.numbered { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
.numbered li { background: var(--color-dark-2); border: 1px solid var(--color-dark-3); border-radius: var(--radius-lg); padding: var(--space-6); display: grid; gap: var(--space-3); align-content: start; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset; transition: border-color 0.3s; }
.numbered li:hover { border-color: #334155; }
.numbered .num { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius); border: 1px solid var(--color-dark-3); background: var(--color-dark); color: #fff; font-size: 14px; font-weight: 600; }
.numbered h3 { font-size: 18px; margin: 0; color: #fff; }
.numbered p { margin: 0; font-size: 15px; color: #94a3b8; }
@media (max-width: 1000px) { .numbered { grid-template-columns: repeat(2, 1fr); } .numbered li:last-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .numbered { grid-template-columns: 1fr; } }

/* FAQ */
.faq-layout { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(var(--space-8), 6vw, 80px); align-items: start; }
.faq-side { display: grid; gap: var(--space-4); position: sticky; top: 96px; }
@media (max-width: 960px) { .faq-layout { grid-template-columns: 1fr; } .faq-side { position: static; grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .faq-side { grid-template-columns: 1fr; } }
.faq { display: grid; gap: var(--space-3); }
.faq-item { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: border-color 0.2s, box-shadow 0.2s; }
.faq-item:hover, .faq-item[open] { border-color: #cbd5e1; box-shadow: var(--shadow-md); }
.faq-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 32px 1fr 18px; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-n { font-size: 13px; font-weight: 600; color: var(--color-faint); }
.faq-q { font-size: 17px; font-weight: 500; margin: 0; }
.faq-mark { position: relative; flex: none; width: 18px; height: 18px; }
.faq-mark::before, .faq-mark::after { content: ""; position: absolute; background: var(--color-muted); border-radius: 1px; transition: transform 0.25s ease; }
.faq-mark::before { left: 8px; top: 3px; width: 1.5px; height: 12px; }
.faq-mark::after { top: 8px; left: 3px; width: 12px; height: 1.5px; }
.faq-item[open] .faq-mark::before { transform: rotate(90deg); }
.faq-a { padding: 0 var(--space-5) var(--space-5) calc(32px + var(--space-4) + var(--space-5)); font-size: 16px; color: var(--color-muted); }
.faq-item[open] .faq-a { animation: faq-in 0.3s ease; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .faq-item summary { grid-template-columns: 1fr 18px; } .faq-n { display: none; } .faq-a { padding-left: var(--space-5); } }

/* planes / tabla */
.plans { align-items: stretch; gap: var(--space-5); }
.plan { position: relative; padding-top: var(--space-10); }
.plan h3 { font-size: 25px; margin: 0 0 var(--space-4); }
.plan .card-kicker { margin-bottom: var(--space-1); }
.plan .checklist { flex: 1; align-content: start; }
.plan .price { margin-top: var(--space-6); display: grid; gap: 4px; padding-top: var(--space-5); border-top: 1px solid var(--color-divider); text-align: center; justify-items: center; }
.price-value { font-weight: 600; font-size: 33px; letter-spacing: -0.02em; line-height: 1; color: var(--color-text); }
.plan .price small { font-size: 13px; color: var(--color-muted); }
.plan .btn { margin-top: var(--space-5); align-self: stretch; }
.plan-featured { border-color: var(--color-text); box-shadow: var(--shadow-lg); padding-top: calc(var(--space-10) + var(--space-6)); }
.plan-featured .price-value { font-size: 41px; }
.plan-flag { position: absolute; top: var(--space-4); left: var(--space-8); font-size: 12px; font-weight: 500; background: var(--color-accent-100); color: var(--color-accent-800); border: 1px solid var(--color-accent-200); padding: 3px 10px; border-radius: var(--radius-pill); }
@media (min-width: 961px) { .plan-featured { margin-block: calc(-1 * var(--space-4)); } }
.table-wrap { overflow-x: auto; margin-top: clamp(var(--space-8), 5vw, 64px); }
.table { font-size: 15px; }
.table th, .table td { padding: var(--space-4) var(--space-4); vertical-align: top; }
.table tbody th { text-align: left; font-weight: 600; font-size: 16px; color: var(--color-text); }
.td-price { font-weight: 600; font-size: 17px; color: var(--color-text); background: #f8fafc; }
.table-wrap + .note { margin-top: var(--space-4); }
@media (max-width: 760px) {
  .table { border: 0; background: transparent; box-shadow: none; }
  .table-responsive thead { display: none; }
  .table-responsive tr { display: block; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); box-shadow: var(--shadow-sm); }
  .table-responsive th, .table-responsive td { display: flex; justify-content: space-between; gap: var(--space-4); border: 0; padding: var(--space-2) 0; text-align: right; }
  .table-responsive th { text-align: left; border-bottom: 1px solid var(--color-divider); }
  .table-responsive td::before { content: attr(data-label); font-size: 13px; color: var(--color-muted); text-align: left; }
  .td-price { background: transparent; }
}

/* header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--color-divider); }
.site-nav { display: flex; align-items: center; gap: var(--space-6); height: 64px; position: relative; }
.brand { text-decoration: none; color: inherit; margin-right: auto; display: inline-flex; }
.brand:hover { text-decoration: none; }
.brand-text { display: flex; align-items: center; gap: 10px; line-height: 1.1; }
.brand-text > span { display: flex; flex-direction: column; }
.brand-mark { width: 32px; height: 32px; border-radius: var(--radius); background: var(--color-text); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 16px; box-shadow: var(--shadow-sm); transition: transform 0.2s; }
.brand:hover .brand-mark { transform: scale(1.05); }
.brand-text strong { font-weight: 600; font-size: 18px; letter-spacing: -0.02em; color: var(--color-text); }
.brand-text small { font-size: 11px; color: var(--color-muted); }
.nav-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--space-1); }
.nav-menu > li:not(.nav-cta) > a, .has-sub > button { display: inline-flex; align-items: center; gap: 4px; padding: var(--space-2) var(--space-3); min-height: 40px; font: inherit; font-size: 15px; color: var(--color-muted); text-decoration: none; background: none; border: 0; cursor: pointer; border-radius: var(--radius); transition: color 0.2s, background 0.2s; }
.nav-menu > li:not(.nav-cta) > a:hover, .has-sub > button:hover { color: var(--color-text); text-decoration: none; }
.nav-menu li:not(.nav-cta) a[aria-current="page"], .has-sub.active > button { color: var(--color-text); font-weight: 500; }
.has-sub { position: relative; }
.has-sub > button svg { transition: transform 0.2s; }
.has-sub.open > button svg { transform: rotate(180deg); }
.sub { list-style: none; margin: 0; padding: var(--space-2); position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); display: none; flex-direction: column; z-index: 60; }
.has-sub:hover .sub, .has-sub:focus-within .sub, .has-sub.open .sub { display: flex; }
.sub a { display: block; padding: var(--space-2) var(--space-3); color: var(--color-body); text-decoration: none; font-size: 15px; border-radius: var(--radius-sm); }
.sub a:hover, .sub a[aria-current="page"] { background: #f8fafc; color: var(--color-text); text-decoration: none; }
.nav-cta .btn { min-height: 38px; padding: var(--space-2) var(--space-4); margin-left: var(--space-3); }
.nav-toggle { display: none; }
.nav-toggle svg:last-child { display: none; }
.site-nav.open .nav-toggle svg:first-child { display: none; }
.site-nav.open .nav-toggle svg:last-child { display: block; }
@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; width: 40px; height: 40px; }
  .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--color-surface); border-bottom: 1px solid var(--color-divider); padding: var(--space-3) var(--space-3) var(--space-6); box-shadow: var(--shadow-lg); }
  .site-nav.open .nav-menu { display: flex; }
  .nav-menu > li:not(.nav-cta) > a, .has-sub > button { width: 100%; justify-content: space-between; font-size: 17px; padding: var(--space-3); min-height: 44px; }
  .sub { position: static; display: none; box-shadow: none; border: 0; padding: 0 0 var(--space-2) var(--space-6); }
  .has-sub:hover .sub, .has-sub:focus-within .sub { display: none; }
  .has-sub.open .sub { display: flex; }
  .nav-cta { margin-top: var(--space-3); }
  .nav-cta .btn { width: 100%; margin-left: 0; min-height: 44px; }
}

/* banda CTA final */
.band { padding-block: clamp(57px, 7vw, 113px); }
.band-inner { position: relative; overflow: hidden; background: var(--color-bg); border: 1px solid var(--color-divider); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: clamp(49px, 6vw, 81px) var(--space-8); text-align: center; display: grid; justify-items: center; gap: var(--space-8); max-width: 1000px; }
.band-inner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, #f1f5f9, transparent 60%); opacity: 0.7; pointer-events: none; }
.band-inner > * { position: relative; }
.band h2 { font-size: clamp(31px, 4vw, 49px); margin-bottom: var(--space-4); }
.band .lead { margin: 0 auto; }
.band .actions { margin-top: 0; justify-content: center; }
@media (max-width: 600px) { .band-inner { padding-inline: var(--space-5); } }

/* breadcrumbs */
.breadcrumbs { font-size: 14px; padding-block: var(--space-4); }
.breadcrumbs ol { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--color-muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--space-2); opacity: 0.4; }
.breadcrumbs a { color: inherit; }
.breadcrumbs li[aria-current] { color: var(--color-text); }

/* contacto */
.contact-layout { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(var(--space-8), 6vw, 80px); align-items: start; }
.contact-aside { display: grid; gap: var(--space-4); position: sticky; top: 90px; }
.contact-list { list-style: none; display: grid; gap: var(--space-3); font-size: 15px; }
.contact-list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.contact-list svg { flex: none; margin-top: 2px; color: var(--color-text); }
.contact-form { margin-top: var(--space-8); display: grid; gap: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-xl); padding: clamp(var(--space-6), 3vw, var(--space-10)); box-shadow: var(--shadow-md); }
.contact-form .grid { gap: var(--space-5); }
.field-full { grid-column: 1 / -1; }
.input[aria-invalid="true"] { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1); }
.field-msg { font-size: 14px; color: #b91c1c; margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.check { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 15px; cursor: pointer; color: var(--color-body); }
.check input { width: 18px; height: 18px; flex: none; margin: 3px 0 0; accent-color: var(--color-text); }
.form-error { font-size: 15px; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; padding: var(--space-3) var(--space-4); border-radius: var(--radius); }
.form-error ul { margin: var(--space-2) 0 0; padding-left: 1.2em; }
.form-success { background: #f0fdf4; border: 1px solid #bbf7d0; padding: var(--space-6); border-radius: var(--radius-md); }
.form-success h3 { margin: 0 0 var(--space-1); color: #166534; }
.form-success p { margin: 0; color: #15803d; }
.contact-form .actions { margin-top: 0; }
.privacy-layer { margin-top: var(--space-6); font-size: 13px; line-height: 1.5; color: var(--color-muted); }
.privacy-layer summary { cursor: pointer; padding: var(--space-2) 0; font-size: 14px; font-weight: 500; color: var(--color-body); list-style: none; display: flex; justify-content: space-between; }
.privacy-layer summary::-webkit-details-marker { display: none; }
.privacy-layer summary::after { content: "+"; font-size: 17px; }
.privacy-layer[open] summary::after { content: "−"; }
.privacy-layer p { margin: var(--space-2) 0 0; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } .contact-aside { position: static; } }
@media (max-width: 600px) { .contact-form .grid-2 { grid-template-columns: 1fr; } }

/* legal */
.legal { max-width: 76ch; }
.legal header { margin-bottom: var(--space-10); }
.legal section { margin-top: var(--space-10); }
.legal h2 { font-size: 23px; }
.legal p, .legal li { font-size: 16px; }
.holder { font-style: normal; line-height: 1.7; font-size: 16px; }

/* footer */
.site-footer { background: var(--color-surface); border-top: 1px solid var(--color-divider); padding-block: clamp(var(--space-10), 5vw, 80px) var(--space-10); font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-12); }
.footer-brand p { margin: var(--space-6) 0; max-width: 36ch; color: var(--color-muted); line-height: 1.65; }
.footer-entity { font-style: normal; line-height: 1.6; color: var(--color-muted); display: grid; gap: 2px; font-size: 14px; }
.footer-entity strong { font-weight: 500; font-size: 15px; color: var(--color-text); margin-bottom: 2px; }
.footer-h { font-size: 15px; font-weight: 500; color: var(--color-text); margin: 0 0 var(--space-4); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.site-footer a { color: var(--color-muted); text-decoration: none; transition: color 0.2s; }
.site-footer a:hover { color: var(--color-text); text-decoration: none; }
.footer-bottom { margin-top: clamp(var(--space-10), 5vw, 64px); padding-top: var(--space-8); border-top: 1px solid var(--color-divider); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); color: var(--color-faint); font-size: 13px; }
.footer-bottom p { margin: 0; }
.social { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-3); }
.social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius); color: var(--color-faint); border: 1px solid transparent; transition: color 0.2s, border-color 0.2s, background 0.2s; }
.social a:hover { color: var(--color-text); border-color: var(--color-line); background: #f8fafc; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* — movimiento — */
:root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); }
.bg-glow i:first-child { animation: drift 18s ease-in-out infinite alternate; }
.bg-glow i:last-child { animation: drift 22s ease-in-out infinite alternate-reverse; }
@keyframes drift { from { transform: translate(-50%, 0) scale(1); } to { transform: translate(-44%, 6%) scale(1.08); } }
.bg-glow i:last-child { transform: none; }
@keyframes drift-b { from { transform: translate(0, 0); } to { transform: translate(-6%, -8%) scale(1.06); } }
.bg-glow i:last-child { animation-name: drift-b; }

.site-header { transition: box-shadow 0.3s, background 0.3s; }
.site-header.scrolled { box-shadow: 0 1px 0 var(--color-divider), 0 8px 24px -12px rgba(15, 23, 42, 0.12); background: rgba(255, 255, 255, 0.85); }

/* entrada del hero (al cargar) */
html.js .hero-copy > *, html.js .hero-media, html.js .spec-plate { opacity: 0; transform: translateY(18px); }
html.js.hero-in .hero-copy > *, html.js.hero-in .hero-media, html.js.hero-in .spec-plate.in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
html.js.hero-in .hero-copy > *:nth-child(1) { transition-delay: 0.05s; }
html.js.hero-in .hero-copy > *:nth-child(2) { transition-delay: 0.15s; }
html.js.hero-in .hero-copy > *:nth-child(3) { transition-delay: 0.25s; }
html.js.hero-in .hero-copy > *:nth-child(4) { transition-delay: 0.35s; }
html.js.hero-in .hero-copy > *:nth-child(n+5) { transition-delay: 0.45s; }
html.js.hero-in .hero-media { transition-delay: 0.3s; transition-duration: 1.1s; }
html.js.hero-in .hero-media:hover { transition-duration: 0.7s; }
html.js .spec-plate.in { transition-delay: 0.1s; }

/* aparición al hacer scroll */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
html.js .reveal.in { opacity: 1; transform: none; }
html.js .grid.reveal { opacity: 1; transform: none; }
html.js .grid.reveal > *, html.js .stagger > * { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), box-shadow 0.3s, border-color 0.3s; transition-delay: calc(var(--i, 0) * 0.08s); }
html.js .grid.reveal.in > *, html.js .stagger.in > * { opacity: 1; transform: none; }
html.js .stagger.checklist > * { transform: translateX(-10px); }
html.js .stagger.checklist.in > * { transform: none; }
html.js .checklist.in svg { animation: pop 0.5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 0.08s + 0.2s); }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* detalles */
.spec-plate dd, .price-value { font-variant-numeric: tabular-nums; }
.card, .steps li, .numbered li, .faq-item { will-change: transform; }
.card:hover { transform: translateY(-3px); }
.steps li { transition: transform 0.3s var(--ease-out), box-shadow 0.3s; }
.steps li:hover { transform: translateX(4px); box-shadow: var(--shadow-md); }
.numbered li:hover .num { background: #fff; color: var(--color-dark); }
.numbered .num { transition: background 0.3s, color 0.3s; }
.btn-primary svg, .btn-ghost svg { transition: transform 0.25s var(--ease-out); }
.btn-primary:hover svg, .btn-ghost:hover svg { transform: translateX(3px); }
.media img { transition: transform 1.2s var(--ease-out); }
.media:hover img { transform: scale(1.03); }
.faq-item[open] .faq-a { animation: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal, html.js .grid.reveal > *, html.js .stagger > *, html.js .hero-copy > *, html.js .hero-media, html.js .spec-plate { opacity: 1; transform: none; transition: none; }
  .bg-glow i, .checklist.in svg { animation: none; }
  .card, .btn, .hero-media, .steps li, .media img, .faq-mark::before, .faq-mark::after { transition: none; }
  .hero .tag::before { animation: none; }
}

/* calculadora FUNDAE (tarjeta Microgrupo) */
.price-prefix { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.calc { margin-top: var(--space-5); padding: var(--space-5); display: grid; gap: var(--space-4); background: #f8fafc; border: 1px solid var(--color-line); border-radius: var(--radius-md); }
.calc-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--color-text); }
.calc-form { display: grid; gap: var(--space-4); }
.calc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-3); }
.calc-fields .field { min-width: 0; }
.calc .field label { font-size: 13px; }
.calc select.input { font-size: 14px; padding: 10px 28px 10px 10px; background-position: right 8px center; }
.plan .calc .btn { margin-top: 0; width: 100%; }
.plan .checklist + .calc { margin-top: var(--space-6); position: relative; }
.plan .checklist + .calc::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--space-5)); border-top: 1px solid var(--color-divider); }
.plan .checklist { flex: 0 0 auto; }
.plan .calc { margin-bottom: auto; }
.plan .price + .btn { margin-top: auto; }
.plan .price:has(+ .btn) { margin-bottom: var(--space-5); }
.calc-result[hidden] { display: none; }
.calc-result { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.calc-result-label { margin: 0; font-size: 13px; font-weight: 500; color: var(--color-muted); }
.calc-result-value { margin: 0; font-size: 27px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--color-accent-700); font-variant-numeric: tabular-nums; }
.calc-result-meta { margin: 0; display: grid; gap: var(--space-2); }
.calc-result-meta div { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 14px; }
.calc-result-meta dt { color: var(--color-body); }
.calc-result-meta dd { margin: 0; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--color-muted); }
@media (max-width: 600px) { .calc-fields { grid-template-columns: 1fr; } }
.calc-details { margin: 0; font-size: 12px; line-height: 1.5; color: var(--color-muted); }
.calc-details summary { cursor: pointer; font-weight: 500; color: var(--color-body); }
.calc-details summary:hover { color: var(--color-text); }
.calc-details p { margin: var(--space-2) 0 0; }
.calc-details strong { color: var(--color-body); font-weight: 600; }
.calc-field-full { grid-column: 1 / -1; }
.calc .field-msg { font-size: 13px; }
.calc .field-msg[hidden] { display: none; }

/* botones de solicitud (verde) */
.btn-cta, .btn-cta.btn-primary, .btn-cta.btn-secondary { background: #16a34a; color: #fff; border-color: #16a34a; box-shadow: var(--shadow-sm); }
.btn-cta:hover, .btn-cta.btn-primary:hover, .btn-cta.btn-secondary:hover { background: #15803d; color: #fff; border-color: #15803d; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-cta:focus-visible { outline-color: #16a34a; }

/* botón "Ver resultado" (naranja) */
.calc #calc-submit.btn-primary, .calc #icalc-submit.btn-primary { background: #ea580c; border-color: #ea580c; color: #fff; }
.calc #calc-submit.btn-primary:hover, .calc #icalc-submit.btn-primary:hover { background: #c2410c; border-color: #c2410c; color: #fff; }
.calc #calc-submit:focus-visible, .calc #icalc-submit:focus-visible { outline-color: #ea580c; }

/* chips de cursos: color distinto por curso al pasar el puntero */
.chips li:nth-child(1) a.tag:hover { background: #2563eb; border-color: #2563eb; }
.chips li:nth-child(2) a.tag:hover { background: #0f766e; border-color: #0f766e; }
.chips li:nth-child(3) a.tag:hover { background: #dc2626; border-color: #dc2626; }
.chips li:nth-child(4) a.tag:hover { background: #ea580c; border-color: #ea580c; }
.chips li:nth-child(5) a.tag:hover { background: #7c3aed; border-color: #7c3aed; }

.chips li span.tag { transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s; }
.chips li span.tag:hover { color: #fff; transform: translateY(-1px); }
.chips li:nth-child(1) span.tag:hover { background: #2563eb; border-color: #2563eb; }
.chips li:nth-child(2) span.tag:hover { background: #0f766e; border-color: #0f766e; }
.chips li:nth-child(3) span.tag:hover { background: #dc2626; border-color: #dc2626; }
.chips li:nth-child(4) span.tag:hover { background: #ea580c; border-color: #ea580c; }
.chips li:nth-child(5) span.tag:hover { background: #7c3aed; border-color: #7c3aed; }


/* guía práctica FUNDAE (bajo el bloque FUNDAE de la landing) */
.guide { margin-top: clamp(var(--space-10), 6vw, 80px); padding-top: clamp(var(--space-8), 5vw, 64px); border-top: 1px solid var(--color-divider); }
.guide-head { max-width: 72ch; margin-bottom: clamp(var(--space-6), 3vw, 40px); }
.guide-head h3 { font-size: clamp(25px, 2.6vw, 33px); margin: 0 0 var(--space-3); letter-spacing: -0.02em; text-wrap: balance; }
.guide-head .lead { font-size: 17px; }
.guide-item summary { padding: var(--space-5) var(--space-6); }
.guide-sum { display: grid; gap: 2px; min-width: 0; }
.guide-sum .faq-q { font-size: 19px; }
.guide-sum-note { font-size: 14px; color: var(--color-muted); }
.guide-body { padding: 0 var(--space-6) var(--space-6) calc(32px + var(--space-4) + var(--space-6)); display: grid; gap: var(--space-5); font-size: 16px; color: var(--color-body); }
.guide-item[open] .guide-body { animation: faq-in 0.3s ease; }
.guide-body p { margin: 0; }
.guide-answer { padding: var(--space-4) var(--space-5); background: #f8fafc; border: 1px solid var(--color-line); border-radius: var(--radius-md); }
.guide-answer strong, .guide-clar strong, .guide-example strong { color: var(--color-text); font-weight: 600; }
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.guide-grid article { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-1); align-content: start; box-shadow: var(--shadow-sm); }
.guide-kicker { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.guide-grid strong { font-size: 16px; font-weight: 600; color: var(--color-text); }
.guide-grid p { font-size: 14px; color: var(--color-muted); }
.guide-formula { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 14px; }
.guide-formula span { padding: var(--space-2) var(--space-3); background: #f8fafc; border: 1px solid var(--color-line); border-radius: var(--radius); font-weight: 500; color: var(--color-text); }
.guide-formula b { font-weight: 500; font-size: 16px; color: var(--color-muted); padding: 0 var(--space-1); }
.guide-table { overflow-x: auto; }
.guide-table .table { font-size: 15px; }
.guide-table caption { caption-side: top; text-align: left; font-weight: 600; font-size: 15px; color: var(--color-text); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); }
.guide-table th, .guide-table td { padding: var(--space-3) var(--space-4); vertical-align: middle; }
.guide-table tbody th { text-align: left; font-weight: 500; color: var(--color-text); }
.guide-table .tag { font-size: 13px; }
.guide-clar { font-size: 14px; line-height: 1.6; color: var(--color-muted); max-width: 80ch; }
.guide-h { font-size: 19px; font-weight: 600; margin: var(--space-2) 0 0; color: var(--color-text); }
.guide-consult { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.guide-consult .card { padding: var(--space-5); gap: 0; }
.guide-consult .card-title { font-size: 18px; }
.guide-consult .card-body { font-size: 15px; color: var(--color-muted); flex: 1; }
.guide-consult .btn { margin-top: var(--space-4); align-self: flex-start; }
.guide-card-accent { background: #f8fafc; border-color: var(--color-line); }
.guide-example { padding: var(--space-4) var(--space-5); border: 1px dashed var(--color-line); border-radius: var(--radius-md); font-size: 15px; }
.guide-body .actions { margin-top: 0; }
.guide-final { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 14px; line-height: 1.6; color: var(--color-muted); }
.guide-final .icon { flex: none; margin-top: 3px; }
.guide-sources { margin: var(--space-6) 0 0; font-size: 13px; color: var(--color-muted); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.guide-sources a { color: var(--color-body); }
@media (max-width: 960px) {
  .guide-grid, .guide-consult { grid-template-columns: 1fr; }
  .guide-item summary { padding: var(--space-4) var(--space-5); }
  .guide-body { padding: 0 var(--space-5) var(--space-5); }
  .guide-sum-note { display: none; }
}

/* calculadora FUNDAE del Programa Individual */
.icalc-intro { margin: calc(-1 * var(--space-2)) 0 0; font-size: 14px; color: var(--color-muted); }
.icalc-help { margin: var(--space-2) 0 0; font-size: 12px; line-height: 1.5; color: var(--color-muted); }
.icalc-aviso { margin: 0; padding: var(--space-3) var(--space-4); font-size: 13px; line-height: 1.55; color: var(--color-body); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); }
.icalc-aviso[hidden] { display: none; }
.calc-note strong { color: var(--color-body); font-weight: 600; }

/* Subrayado fluorescente en títulos */
.hl { color: var(--color-text); background-color: transparent; background-image: linear-gradient(100deg, transparent 0.6%, var(--hl) 2.4%, var(--hl) 97.4%, transparent 99.2%); background-repeat: no-repeat; background-size: 100% 46%; background-position: 0 74%; padding: 0 0.12em; margin: 0 -0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl-yellow { --hl: #fde68a; }
.hl-green { --hl: #bbf7d0; }
.hl-blue { --hl: #bae6fd; }
.hl-pink { --hl: #fbcfe8; }
.hl-orange { --hl: #fed7aa; }
.section-dark h1 .hl, .section-dark h2 .hl, .section-dark .hl { color: #1d1f20; background-size: 100% 88%; background-position: 0 60%; padding: 0.02em 0.18em; margin: 0 -0.06em; border-radius: 0.12em; }
.contact-embed { min-height: 480px; }
.contact-embed iframe { max-width: 100%; }