:root {
  --brand: #5B3B9C;
  --brand-dark: #1C1233;
  --brand-soft: #EFE9FA;
  --accent: #FFB547;
  --bg: #FBFAFD;
  --surface: #FFFFFF;
  --text-primary: #17122A;
  --text-secondary: #5F5A72;
  --text-on-dark: #F4F0FC;
  --text-on-dark-muted: #B9AED4;
  --border: #E4DEF0;
  --font-heading: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --container: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; font-family: var(--font-body); color: var(--text-primary); background: var(--bg); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
[data-lucide], svg.lucide { width: 18px; height: 18px; flex-shrink: 0; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 40px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 20px; border-radius: 12px; font-size: 15px; font-weight: 600; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible, .link-btn:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.btn--lg { padding: 18px 28px; font-size: 16px; border-radius: 14px; }
.btn--block { width: 100%; }
.btn--brand { background: var(--brand); color: #fff; }
.btn--brand:hover { background: #4D3186; }
.btn--shadow { box-shadow: 0 10px 24px #5B3B9C40; }
.btn--outline { background: var(--surface); border: 1px solid var(--border); color: var(--text-primary); padding: 18px 24px; }
.btn--accent { background: var(--accent); color: var(--brand-dark); font-weight: 700; }
.btn--accent:hover { background: #FFA826; }
.btn--soft { background: var(--brand-soft); color: var(--brand); padding: 16px 24px; }
.btn--soft:hover { background: #E3D9F6; }
.btn--white { background: #fff; color: var(--brand); padding: 16px 24px; }
.btn--ghost-dark { border: 1px solid #FFFFFF4D; color: var(--text-on-dark); padding: 18px 24px; }
.btn--ghost-dark:hover { background: #FFFFFF14; }
.icon-brand { color: var(--brand); }
.icon-accent { color: var(--accent); }
.link-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-size: 15px; font-weight: 600; }
.link-btn [data-lucide], .link-btn svg { width: 16px; height: 16px; transition: transform .15s ease; }
.link-btn:hover svg { transform: translateX(3px); }

/* Icon tiles */
.icon-tile { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon-tile--sm { width: 32px; height: 32px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); }
.icon-tile--sm svg { width: 16px; height: 16px; }
.icon-tile--md { width: 48px; height: 48px; border-radius: 14px; }
.icon-tile--md svg { width: 22px; height: 22px; }
.icon-tile--lg { width: 56px; height: 56px; border-radius: 16px; }
.icon-tile--lg svg { width: 26px; height: 26px; }
.icon-tile--xl { width: 56px; height: 56px; border-radius: 16px; }
.icon-tile--xl svg { width: 26px; height: 26px; }
.icon-tile--brand { background: var(--brand); color: #fff; }
.icon-tile--soft { background: var(--brand-soft); color: var(--brand); }
.icon-tile--white { background: var(--surface); color: var(--brand); }
.icon-tile--glass { width: 40px; height: 40px; border-radius: 12px; background: #FFFFFF14; color: var(--text-on-dark); }

/* Eyebrows & section heads */
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 2px; color: var(--brand); }
.eyebrow--accent { color: var(--accent); font-weight: 600; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.section-head__title { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.section-head h2 { font-family: var(--font-heading); font-size: 44px; font-weight: 800; line-height: 1.12; letter-spacing: -1.2px; }
.section-head__lead { max-width: 420px; font-size: 17px; line-height: 1.6; color: var(--text-secondary); }
.section-head--dark h2 { color: var(--text-on-dark); font-size: 48px; font-weight: 700; line-height: 1.1; letter-spacing: -1px; }
.section-head--dark .section-head__lead { color: var(--text-on-dark-muted); max-width: 380px; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--border); }
.nav__inner { max-width: var(--container); margin: 0 auto; padding: 10px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__logo img { width: 190px; height: 72px; object-fit: contain; }
.nav__links { display: flex; align-items: center; gap: 40px; }
.nav__links a { font-size: 15px; font-weight: 500; color: var(--text-secondary); transition: color .15s; }
.nav__links a:hover { color: var(--brand); }
.nav__cta-mobile, .nav__toggle { display: none; }

/* Hero */
.hero { background: radial-gradient(ellipse 80% 90% at 82% 35%, var(--brand-soft), #FBFAFD00 70%); }
.hero__inner { display: flex; align-items: center; gap: 64px; padding-top: 72px; padding-bottom: 104px; }
.hero__copy { flex: 1; display: flex; flex-direction: column; gap: 36px; min-width: 0; }
.eyebrow-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--text-secondary); margin-bottom: -12px; }
.eyebrow-pill__tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 13px; font-weight: 600; }
.eyebrow-pill__tag svg { width: 14px; height: 14px; }
.hero__title { font-family: var(--font-heading); font-size: 64px; font-weight: 800; line-height: 1.08; letter-spacing: -2px; margin-bottom: -12px; }
.hero__title span { color: var(--brand); }
.hero__sub { max-width: 540px; font-size: 18px; line-height: 1.6; color: var(--text-secondary); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.stats { display: flex; align-items: center; gap: 32px; padding-top: 28px; border-top: 1px solid var(--border); }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat strong { font-family: var(--font-heading); font-size: 30px; font-weight: 700; letter-spacing: -.5px; }
.stat span { font-size: 14px; color: var(--text-secondary); }
.stat__divider { width: 1px; height: 44px; background: var(--border); }

.hero__visual { position: relative; width: 540px; height: 580px; flex-shrink: 0; }
.hero__block { position: absolute; left: 80px; top: 60px; width: 460px; height: 520px; border-radius: 32px; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); }
.hero__image { position: absolute; left: 40px; top: 0; width: 460px; height: 520px; border-radius: 28px; border: 6px solid #fff; overflow: hidden; box-shadow: 0 24px 48px #1C123333; }
.hero__image img { width: 100%; height: 100%; object-fit: cover; }
.chip-speed { position: absolute; left: 330px; top: 36px; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; background: var(--surface); border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: 0 12px 28px #1C123326; }
.chip-speed__badge { width: 32px; height: 32px; border-radius: 999px; background: var(--brand-dark); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.chip-speed__badge svg { width: 16px; height: 16px; }
.metric-card { position: absolute; left: 0; top: 368px; width: 236px; padding: 20px; display: flex; flex-direction: column; gap: 14px; background: var(--surface); border-radius: 20px; box-shadow: 0 16px 40px #1C123330; }
.metric-card__head { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.metric-card__value { display: flex; align-items: flex-end; gap: 8px; }
.metric-card__value strong { font-family: var(--font-heading); font-size: 32px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.metric-card__value span { font-size: 13px; color: var(--text-secondary); }
.metric-card__bars { display: flex; align-items: flex-end; gap: 6px; height: 44px; }
.metric-card__bars i { flex: 1; border-radius: 4px; background: var(--brand-soft); }
.metric-card__bars i.is-active { background: var(--brand); }

/* Services */
.services { background: var(--surface); border-top: 1px solid var(--border); padding: 104px 0 112px; }
.services .container { display: flex; flex-direction: column; gap: 56px; }
.services__grid { display: flex; gap: 24px; }
.featured { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 36px; padding: 48px; border-radius: 28px; color: var(--text-on-dark); background: radial-gradient(ellipse 140% 160% at 100% 0%, #5B3B9CCC, #5B3B9C00 50%), var(--brand-dark); }
.featured__top { display: flex; justify-content: space-between; align-items: center; }
.badge-outline { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid #FFFFFF33; border-radius: 999px; font-size: 13px; font-weight: 600; }
.badge-outline svg { width: 14px; height: 14px; }
.featured__copy { display: flex; flex-direction: column; gap: 14px; }
.featured__copy h3 { font-family: var(--font-heading); font-size: 40px; font-weight: 800; letter-spacing: -1px; }
.featured__copy p { max-width: 600px; font-size: 17px; line-height: 1.6; color: var(--text-on-dark-muted); }
.offerings { display: flex; gap: 16px; }
.offering { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 18px; background: #FFFFFF0D; border: 1px solid #FFFFFF1F; }
.offering h4 { font-family: var(--font-heading); font-size: 18px; font-weight: 700; }
.offering p { font-size: 14px; line-height: 1.5; color: var(--text-on-dark-muted); }
.includes { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.includes li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.includes svg { width: 16px; height: 16px; color: var(--accent); }
.featured__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.featured__actions .btn--lg { padding: 16px 24px; }
.muted-on-dark { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-on-dark-muted); }
.muted-on-dark svg { width: 16px; height: 16px; }
.secondary { width: 440px; flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; }
.service-card { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 36px; background: var(--bg); border: 1px solid var(--border); border-radius: 24px; }
.service-card__content { display: flex; flex-direction: column; gap: 16px; }
.service-card h3 { font-family: var(--font-heading); font-size: 24px; font-weight: 700; letter-spacing: -.4px; }
.service-card p { font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 13px; font-weight: 500; color: var(--text-secondary); }

/* Process */
.process { background: var(--brand-dark); padding: 112px 0; }
.process .container { display: flex; flex-direction: column; gap: 64px; }
.steps { display: flex; }
.step { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 32px 32px 8px; border-left: 1px solid #FFFFFF1F; }
.step:first-child { padding-left: 0; border-left: 0; }
.step__num { font-family: var(--font-heading); font-size: 56px; font-weight: 800; letter-spacing: -2px; color: #FFFFFF33; line-height: 1.1; }
.step__num--accent { color: var(--accent); }
.step h3 { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--text-on-dark); }
.step p { font-size: 15px; line-height: 1.6; color: var(--text-on-dark-muted); }
.time-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 100px; background: #FFFFFF14; font-size: 13px; font-weight: 500; color: var(--text-on-dark); }
.time-tag svg { width: 14px; height: 14px; color: var(--text-on-dark-muted); }

/* Plans */
.plans { padding: 112px 0; }
.plans .container { display: flex; flex-direction: column; align-items: center; gap: 56px; }
.plans__head { max-width: 720px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.plans__head .eyebrow { font-weight: 600; }
.plans__head h2 { font-family: var(--font-heading); font-size: 48px; font-weight: 700; letter-spacing: -1px; line-height: 1.15; }
.plans__head p:last-child { font-size: 17px; line-height: 1.6; color: var(--text-secondary); }
.plans__grid { width: 100%; display: flex; align-items: center; gap: 24px; }
.plan { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 28px; padding: 40px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); }
.plan__top { display: flex; flex-direction: column; gap: 10px; }
.plan__name-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.plan h3 { font-family: var(--font-heading); font-size: 22px; font-weight: 700; }
.plan__top p { font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
.plan__price { display: flex; align-items: flex-end; gap: 8px; }
.plan__price span { font-size: 14px; color: var(--text-secondary); padding-bottom: 8px; }
.plan__price strong { font-family: var(--font-heading); font-size: 44px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.plan__features { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 1px solid var(--border); }
.plan__features li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.plan__features svg { color: var(--brand); }
.plan--featured { padding: 48px 40px; background: var(--brand); border: 0; color: var(--text-on-dark); box-shadow: 0 24px 48px #5B3B9C40; }
.plan--featured .plan__top p, .plan--featured .plan__price span { color: var(--text-on-dark-muted); }
.plan--featured .plan__features { border-top-color: #FFFFFF2E; }
.plan--featured .plan__features svg { color: var(--accent); }
.badge-accent { padding: 5px 10px; border-radius: 100px; background: var(--accent); color: var(--brand-dark); font-size: 12px; font-weight: 700; white-space: nowrap; }
.addon { width: 100%; display: flex; align-items: center; gap: 32px; padding: 28px 36px; border-radius: 20px; background: var(--brand-soft); }
.addon__text { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.addon h3 { font-family: var(--font-heading); font-size: 20px; font-weight: 700; }
.addon p { font-size: 15px; line-height: 1.5; color: var(--text-secondary); }

/* CTA */
.cta-wrap { padding-bottom: 112px; }
.cta { display: flex; align-items: center; gap: 64px; padding: 72px; border-radius: 28px; background: linear-gradient(135deg, #2A1A4F, #5B3B9C); color: var(--text-on-dark); overflow: hidden; }
.cta__left { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.cta__left h2 { font-family: var(--font-heading); font-size: 44px; font-weight: 700; line-height: 1.12; letter-spacing: -1px; }
.cta__left p { font-size: 17px; line-height: 1.6; color: var(--text-on-dark-muted); }
.cta__buttons { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 8px; }
.commitments { width: 420px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; padding: 32px; border-radius: 20px; background: #FFFFFF14; border: 1px solid #FFFFFF26; }
.commitments h3 { font-family: var(--font-heading); font-size: 20px; font-weight: 700; }
.commitments ul { display: flex; flex-direction: column; gap: 20px; }
.commitments li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.5; }
.commitments li span { width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; background: #FFFFFF14; color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.commitments li svg { width: 16px; height: 16px; }

/* Footer */
.footer { background: var(--surface); border-top: 1px solid var(--border); padding: 64px 0 32px; }
.footer .container { display: flex; flex-direction: column; gap: 48px; }
.footer__top { display: flex; justify-content: space-between; gap: 48px; }
.footer__brand { max-width: 320px; display: flex; flex-direction: column; gap: 16px; }
.footer__brand img { width: 170px; height: 82px; object-fit: contain; }
.footer__brand p { font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.footer__cols { display: flex; gap: 80px; }
.footer__cols div { display: flex; flex-direction: column; gap: 14px; }
.footer__cols h4 { font-family: var(--font-heading); font-size: 15px; font-weight: 700; }
.footer__cols a, .footer__cols span { font-size: 14px; color: var(--text-secondary); }
.footer__cols a:hover { color: var(--brand); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 24px; border-top: 1px solid var(--border); }
.footer__bottom p { font-size: 13px; color: var(--text-secondary); }
.social { display: flex; gap: 12px; }
.social a { width: 36px; height: 36px; border-radius: 100px; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s; }
.social a:hover { background: #E3D9F6; }
.social svg { width: 16px; height: 16px; }

.footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.footer__legal a, .footer__legal button { font-size: 13px; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.footer__legal a:hover, .footer__legal button:hover { color: var(--brand); }


/* Proyecto propio */
.showcase { padding: 112px 0; }
.showcase__inner { display: flex; align-items: center; gap: 72px; }
.showcase__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.showcase__text { display: flex; flex-direction: column; gap: 16px; }
.showcase__text h2 { font-family: var(--font-heading); font-size: 44px; font-weight: 800; line-height: 1.12; letter-spacing: -1.2px; }
.showcase__text p:last-child { font-size: 17px; line-height: 1.6; color: var(--text-secondary); }
.showcase__features { display: flex; flex-direction: column; gap: 14px; }
.showcase__features li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; }
.showcase__features .icon-tile { width: 36px; height: 36px; border-radius: 10px; }
.showcase__features svg { width: 18px; height: 18px; }
.showcase__buttons { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
.showcase__buttons .btn--lg { padding: 16px 24px; }
.browser-mock { flex: 0 0 700px; display: block; overflow: hidden; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 24px 56px #1C123326; transition: transform .2s ease, box-shadow .2s ease; }
.browser-mock:hover { transform: translateY(-4px); box-shadow: 0 32px 64px #1C123333; }
.browser-mock__bar { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: #F5F2FB; border-bottom: 1px solid var(--border); }
.browser-mock__dots { display: flex; gap: 6px; }
.browser-mock__dots i { width: 10px; height: 10px; border-radius: 999px; background: #FF5F57; }
.browser-mock__dots i:nth-child(2) { background: #FEBC2E; }
.browser-mock__dots i:nth-child(3) { background: #28C840; }
.browser-mock__url { flex: 1; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; background: var(--surface); font-size: 13px; color: var(--text-secondary); }
.browser-mock__url svg { width: 12px; height: 12px; }
.browser-mock img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
@media (max-width: 1200px) {
  .showcase__inner { gap: 48px; }
  .browser-mock { flex-basis: 540px; }
}
@media (max-width: 1024px) {
  .showcase__inner { flex-direction: column; align-items: stretch; }
  .browser-mock { flex-basis: auto; }
}
@media (max-width: 680px) {
  .showcase { padding: 72px 0; }
  .showcase__text h2 { font-size: 32px; letter-spacing: -.6px; }
  .showcase__buttons .btn { flex: 1 1 100%; }
  .browser-mock__bar { padding: 10px 12px; gap: 10px; }
}

/* Preguntas frecuentes */
.faq { padding: 96px 0 112px; }
.faq__inner { display: flex; gap: 96px; align-items: flex-start; }
.faq__head { flex: 0 0 400px; position: sticky; top: 120px; display: flex; flex-direction: column; gap: 20px; }
.faq__head h2 { font-family: var(--font-heading); font-size: 44px; font-weight: 800; line-height: 1.12; letter-spacing: -1.2px; }
.faq__lead { font-size: 17px; line-height: 1.6; color: var(--text-secondary); }
.faq__contact { display: flex; gap: 16px; padding-top: 24px; border-top: 1px solid var(--border); }
.faq__contact div { display: flex; flex-direction: column; gap: 4px; }
.faq__contact strong { font-size: 15px; font-weight: 600; }
.faq__list { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.faq-item { border: 1px solid transparent; border-bottom-color: var(--border); transition: background-color .2s, box-shadow .2s; }
.faq-item:has([aria-expanded="true"]) { background: var(--surface); border-color: var(--border); border-radius: 20px; box-shadow: 0 12px 32px #1C12330D; }
.faq-item h3 { font: inherit; }
.faq-item__btn { width: 100%; display: flex; align-items: flex-start; gap: 20px; padding: 24px 32px; text-align: left; }
.faq-item__num { padding-top: 3px; font-size: 14px; font-weight: 700; color: var(--text-secondary); }
[aria-expanded="true"] .faq-item__num { color: var(--brand); }
.faq-item__q { flex: 1; padding-top: 1px; font-family: var(--font-heading); font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--text-primary); }
.faq-item__toggle { position: relative; width: 32px; height: 32px; flex-shrink: 0; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); transition: background-color .2s; }
.faq-item__toggle::before, .faq-item__toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: var(--brand); transform: translate(-50%, -50%); transition: transform .2s; }
.faq-item__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
[aria-expanded="true"] .faq-item__toggle { background: var(--brand); border-color: var(--brand); }
[aria-expanded="true"] .faq-item__toggle::before, [aria-expanded="true"] .faq-item__toggle::after { background: #fff; transform: translate(-50%, -50%); }
.faq-item__a { padding: 0 32px 28px 72px; margin-top: -8px; }
.faq-item__a p { font-size: 16px; line-height: 1.65; color: var(--text-secondary); }

/* WhatsApp flotante */
.wa-fab { position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 60px; height: 60px; border-radius: 999px; background: #25D366; color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px #1C123340; transition: transform .15s ease; }
.wa-fab:hover { transform: scale(1.06); }
.wa-fab svg { width: 32px; height: 32px; }
body.cookie-visible .wa-fab { bottom: 120px; }

/* Aviso de cookies */
.btn--sm { padding: 12px 18px; font-size: 14px; border-radius: 12px; }
.cookie { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70; width: calc(100% - 48px); max-width: 880px; display: flex; align-items: center; gap: 24px; padding: 20px 24px; border-radius: 20px; background: var(--brand-dark); color: var(--text-on-dark); box-shadow: 0 16px 40px #1C123359; }
.cookie[hidden] { display: none; }
.cookie__icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: #FFFFFF14; color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.cookie__icon svg { width: 22px; height: 22px; }
.cookie p { flex: 1; font-size: 14px; line-height: 1.5; }
.cookie p a { text-decoration: underline; text-underline-offset: 3px; }
.cookie__actions { display: flex; gap: 12px; }
.cookie .btn--ghost-dark { padding: 12px 18px; }

/* Páginas legales */
.legal-header { padding: 56px 0 64px; border-bottom: 1px solid var(--border); background: radial-gradient(ellipse 70% 120% at 85% 0%, var(--brand-soft), #FBFAFD00 70%); }
.legal-header .container { display: flex; flex-direction: column; gap: 24px; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.breadcrumb a { color: var(--brand); }
.breadcrumb svg { width: 14px; height: 14px; }
.breadcrumb [aria-current] { color: var(--text-primary); }
.legal-header h1 { font-family: var(--font-heading); font-size: 56px; font-weight: 800; letter-spacing: -1.5px; line-height: 1.1; }
.legal-header__intro { max-width: 780px; font-size: 18px; line-height: 1.6; color: var(--text-secondary); }
.legal-header__meta { display: flex; flex-wrap: wrap; gap: 12px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 14px; font-weight: 500; }
.pill svg { width: 16px; height: 16px; color: var(--brand); }
.legal-main { display: flex; gap: 96px; align-items: flex-start; padding-top: 72px; padding-bottom: 112px; }
.toc-side { flex: 0 0 280px; position: sticky; top: 120px; display: flex; flex-direction: column; gap: 28px; }
.toc__label { font-size: 12px; font-weight: 600; letter-spacing: 1.5px; color: var(--text-secondary); }
.toc__list { margin-top: 16px; border-left: 1px solid var(--border); }
.toc__list a { display: flex; gap: 12px; padding: 9px 14px; margin-left: -1px; border-left: 2px solid transparent; border-radius: 0 8px 8px 0; font-size: 14px; font-weight: 500; color: var(--text-secondary); transition: background-color .15s, color .15s; }
.toc__list a span { font-size: 12px; font-weight: 700; color: #9A93AE; padding-top: 1px; }
.toc__list a:hover, .toc__list a.is-active { color: var(--brand); background: var(--brand-soft); border-left-color: var(--brand); font-weight: 600; }
.toc__list a.is-active span, .toc__list a:hover span { color: var(--brand); }
.promise-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.promise-card .icon-tile { width: 36px; height: 36px; border-radius: 10px; }
.promise-card .icon-tile svg { width: 18px; height: 18px; }
.promise-card strong { font-family: var(--font-heading); font-size: 16px; }
.promise-card p { font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.legal-content { flex: 1; max-width: 720px; min-width: 0; display: flex; flex-direction: column; gap: 48px; }
.legal-section { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 110px; }
.legal-section + .legal-section { padding-top: 48px; border-top: 1px solid var(--border); }
.legal-section__num { font-size: 14px; font-weight: 700; color: var(--brand); }
.legal-section h2 { font-family: var(--font-heading); font-size: 28px; font-weight: 700; letter-spacing: -.5px; margin-top: -12px; }
.legal-section p, .legal-list li { font-size: 16px; line-height: 1.7; color: var(--text-secondary); }
.legal-section a { color: var(--brand); font-weight: 600; }
.legal-list { display: flex; flex-direction: column; gap: 14px; }
.legal-list li { position: relative; padding-left: 20px; }
.legal-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 999px; background: var(--brand); }
.legal-list strong { display: block; color: var(--text-primary); font-weight: 600; }
.legal-tag { display: inline-block; margin-left: 8px; padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; vertical-align: 2px; }
.legal-tag--ok { background: #E7F6EE; color: #1E7A4C; }
.legal-tag--opt { background: var(--brand-soft); color: var(--brand); }
.info-table { padding: 8px 24px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.info-table div { display: flex; gap: 24px; padding: 14px 0; }
.info-table div + div { border-top: 1px solid var(--border); }
.info-table dt { flex: 0 0 180px; font-size: 14px; font-weight: 500; color: var(--text-secondary); }
.info-table dd { margin: 0; font-size: 15px; font-weight: 600; }
.note { display: flex; gap: 14px; padding: 16px 20px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-dark); font-size: 15px; line-height: 1.6; }
.note svg { width: 20px; height: 20px; color: var(--brand); margin-top: 2px; }
.legal-section { min-width: 0; }
.table-wrap { max-width: 100%; min-width: 0; overflow-x: auto; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); }
.providers { width: 100%; min-width: 600px; border-collapse: collapse; text-align: left; }
.providers th { padding: 12px 20px; background: #F5F2FB; font-size: 12px; font-weight: 600; letter-spacing: 1px; color: var(--text-secondary); }
.providers td { padding: 18px 20px; border-top: 1px solid var(--border); font-size: 14px; line-height: 1.5; color: var(--text-secondary); vertical-align: top; }
.providers td:first-child { width: 200px; }
.providers td strong { display: block; font-size: 15px; color: var(--text-primary); }
.providers td small { font-size: 13px; }
.rights { display: flex; gap: 16px; }
.right-card { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.right-card .icon-tile { width: 36px; height: 36px; border-radius: 10px; }
.right-card .icon-tile svg { width: 18px; height: 18px; }
.right-card strong { font-family: var(--font-heading); font-size: 17px; }
.right-card p { font-size: 14px; line-height: 1.55; }
.contact-card { display: flex; flex-direction: column; gap: 24px; padding: 32px; border-radius: 20px; background: var(--brand-dark); color: var(--text-on-dark); }
.contact-card h3 { font-family: var(--font-heading); font-size: 24px; font-weight: 700; }
.contact-card p { color: var(--text-on-dark-muted) !important; font-size: 15px !important; margin-top: 8px; }
.contact-card__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.contact-card .btn--accent { color: var(--brand-dark) !important; }
.contact-card .btn--ghost-dark { color: var(--text-on-dark) !important; }
@media (max-width: 1024px) {
  .legal-main { flex-direction: column; gap: 40px; padding-top: 48px; }
  .toc-side { position: static; flex-basis: auto; width: 100%; }
  .legal-content { width: 100%; max-width: 720px; }
  .toc__list { display: none; }
  .toc__label { display: none; }
}
@media (max-width: 680px) {
  .legal-header { padding: 40px 0 48px; }
  .legal-header h1 { font-size: 36px; letter-spacing: -.8px; }
  .legal-header__intro { font-size: 16px; }
  .legal-section h2 { font-size: 24px; }
  .info-table { padding: 4px 16px; }
  .info-table div { flex-direction: column; gap: 4px; }
  .info-table dt { flex-basis: auto; }
  .rights { flex-direction: column; }
  .contact-card { padding: 24px; }
  .contact-card__actions .btn { flex: 1 1 100%; white-space: normal; }
}

/* 404 */
.page-404 { min-height: 100vh; display: flex; flex-direction: column; }
.not-found { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 64px 24px; text-align: center; background: radial-gradient(ellipse 60% 70% at 50% 45%, var(--brand-soft), #FBFAFD00 70%); }
.not-found__code { display: flex; align-items: center; gap: 4px; font-family: var(--font-heading); font-size: 180px; font-weight: 800; letter-spacing: -6px; line-height: 1; }
.not-found__zero { width: 150px; height: 150px; border-radius: 999px; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.not-found__zero svg { width: 76px; height: 76px; }
.not-found h1 { font-family: var(--font-heading); font-size: 40px; font-weight: 700; letter-spacing: -1px; }
.not-found p { max-width: 520px; font-size: 17px; line-height: 1.6; color: var(--text-secondary); }
.not-found__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-top: 8px; }
@media (max-width: 680px) {
  .not-found__code { font-size: 110px; letter-spacing: -3px; }
  .not-found__zero { width: 92px; height: 92px; }
  .not-found__zero svg { width: 48px; height: 48px; }
  .not-found h1 { font-size: 28px; }
}

/* Modal */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: #1C1233B3; backdrop-filter: blur(4px); }
.modal__panel { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow-y: auto; padding: 40px; background: var(--surface); border-radius: 24px; box-shadow: 0 24px 64px #1C123366; display: flex; flex-direction: column; gap: 12px; }
.modal__panel h2 { font-family: var(--font-heading); font-size: 30px; font-weight: 800; letter-spacing: -.6px; line-height: 1.15; }
.modal__lead { font-size: 15px; line-height: 1.55; color: var(--text-secondary); margin-bottom: 8px; }
.modal__close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); }
.modal__close:hover { background: var(--brand-soft); color: var(--brand); }
#quote-form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 14px; font: inherit; font-size: 15px; color: var(--text-primary); background: var(--bg); border: 1px solid var(--border); border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px #5B3B9C26; }
.field__error { display: none; font-size: 13px; color: #C2410C; }
.field.is-invalid input, .field.is-invalid select { border-color: #C2410C; }
.field.is-invalid .field__error { display: block; }
body.modal-open { overflow: hidden; }

/* Responsive */
@media (max-width: 1200px) {
  .hero__inner { gap: 40px; }
  .hero__visual { transform: scale(.85); transform-origin: right center; margin-left: -80px; }
  .secondary { width: 380px; }
}

@media (max-width: 1024px) {
  .container, .nav__inner { padding-left: 24px; padding-right: 24px; }
  .nav__logo img { width: 150px; height: 56px; }
  .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; color: var(--text-primary); }
  .nav__toggle svg { width: 24px; height: 24px; }
  .nav__links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 24px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: 0 16px 32px #1C12331A; display: none; }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 16px; }
  .nav__cta-mobile { display: inline-flex; margin-top: 16px; }

  .hero__inner { flex-direction: column; align-items: stretch; padding-top: 48px; padding-bottom: 72px; }
  .hero__visual { transform: none; margin: 0 auto; width: 100%; max-width: 540px; height: auto; aspect-ratio: 540 / 580; }
  .hero__block { left: 15%; top: 10%; width: 85%; height: 90%; }
  .hero__image { left: 7%; width: 85%; height: 90%; }
  .chip-speed { left: auto; right: 0; top: 6%; }
  .metric-card { top: auto; bottom: 6%; }

  .section-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .services__grid { flex-direction: column; }
  .secondary { width: 100%; flex-direction: row; }

  .steps { flex-wrap: wrap; row-gap: 24px; }
  .step { flex: 1 1 50%; }
  .step:nth-child(3) { padding-left: 0; border-left: 0; }

  .plans__grid { flex-direction: column; align-items: stretch; max-width: 560px; }
  .cta { flex-direction: column; align-items: stretch; padding: 48px; }
  .commitments { width: 100%; }
  .footer__top { flex-direction: column; }
}

@media (max-width: 680px) {
  .services, .process, .plans { padding: 72px 0; }
  .cta-wrap { padding-bottom: 72px; }
  .hero__title { font-size: 44px; letter-spacing: -1.2px; }
  .hero__sub { font-size: 16px; }
  .eyebrow-pill > span:last-child { display: none; }
  .hero__ctas .btn { flex: 1 1 100%; }
  .stats { gap: 16px; justify-content: space-between; }
  .stat strong { font-size: 24px; }
  .stat span { font-size: 13px; }
  .metric-card { width: 200px; padding: 16px; }
  .chip-speed { font-size: 13px; }

  .section-head h2, .section-head--dark h2, .plans__head h2, .cta__left h2 { font-size: 32px; letter-spacing: -.6px; }
  .featured { padding: 28px; gap: 28px; }
  .featured__copy h3 { font-size: 30px; }
  .offerings { flex-direction: column; }
  .secondary { flex-direction: column; }
  .service-card { padding: 28px; }

  .step { flex-basis: 100%; padding: 24px 0 0; border-left: 0; border-top: 1px solid #FFFFFF1F; }
  .step:first-child { border-top: 0; padding-top: 0; }
  .step__num { font-size: 44px; }

  .plan, .plan--featured { padding: 32px 24px; }
  .addon { flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px; }
  .cta { padding: 32px 24px; gap: 32px; }
  .cta__buttons .btn { flex: 1 1 100%; }
  .commitments { padding: 24px; }

  .footer__cols { flex-wrap: wrap; gap: 32px 48px; }
  .footer__bottom { flex-direction: column-reverse; align-items: flex-start; }
  .modal__panel { padding: 32px 24px; }
  .wa-fab { right: 16px; bottom: 16px; width: 56px; height: 56px; }
  .cookie { flex-direction: column; align-items: stretch; gap: 16px; bottom: 16px; width: calc(100% - 32px); padding: 20px; }
  .cookie__icon { display: none; }
  .cookie__actions .btn { flex: 1; }
  body.cookie-visible .wa-fab { bottom: 220px; }
}

/* Responsive: proyecto propio y preguntas frecuentes */
@media (max-width: 1200px) {
  .faq__inner { gap: 56px; }
  .faq__head { flex-basis: 340px; }
}

@media (max-width: 1024px) {
  .faq__inner { flex-direction: column; gap: 40px; }
  .faq__head { position: static; flex-basis: auto; }
}

@media (max-width: 680px) {
  .faq { padding: 72px 0; }
  .faq__head h2 { font-size: 32px; letter-spacing: -.6px; }
  .faq-item__btn { gap: 12px; padding: 20px 16px; }
  .faq-item__q { font-size: 16px; }
  .faq-item__a { padding: 0 16px 24px 46px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}