/* =========================================================
   DavidConvierte — Estilos páginas interiores
   ========================================================= */

/* ── Breadcrumbs ── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-4);
  font-family: var(--f-mono);
  letter-spacing: 0.04em;
  padding: 14px 0;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--ink-3); transition: color .2s; }
.breadcrumb a:hover { color: var(--c-purple); }
.breadcrumb__sep { color: var(--line-strong); }
.breadcrumb__current { color: var(--ink); font-weight: 500; }

/* ── Page hero (inner pages) ── */
.page-hero {
  padding: clamp(52px, 7vw, 100px) 0 clamp(48px, 6vw, 88px);
  position: relative;
  overflow: hidden;
}
.page-hero--soft { background: var(--bg-soft); }
.page-hero--dark {
  background: #07091A;
  color: #F4F5FA;
}
.page-hero--dark h1 { color: #fff; }
.page-hero--dark .lead { color: rgba(244,245,250,0.75); }
.page-hero--dark .breadcrumb { color: rgba(244,245,250,0.45); }
.page-hero--dark .breadcrumb a { color: rgba(244,245,250,0.6); }
.page-hero__bg {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}
.page-hero__bg::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(106,71,255,0.2), transparent 65%);
  filter: blur(60px);
}
.page-hero__bg::after {
  content: "";
  position: absolute;
  bottom: -80px; left: -60px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(33,114,229,0.15), transparent 65%);
  filter: blur(70px);
}
.page-hero__content { position: relative; z-index: 1; }
.page-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-purple);
  background: var(--grad-soft);
  border: 1px solid rgba(106,71,255,0.2);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.page-hero--dark .page-hero__tag {
  color: #C9B9FF;
  background: rgba(106,71,255,0.15);
  border-color: rgba(106,71,255,0.3);
}
.page-hero__meta {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.page-hero__meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--ink-3);
}
.page-hero__meta-item svg { color: var(--c-purple); }
.page-hero--dark .page-hero__meta-item { color: rgba(244,245,250,0.6); }
.page-hero--dark .page-hero__meta-item svg { color: #C9B9FF; }

/* ── Page 2-col layout ── */
.page-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 960px) { .page-grid { grid-template-columns: 1fr; } }

/* ── Sidebar sticky CTA ── */
.sidebar-cta {
  position: sticky;
  top: 86px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 28px;
  box-shadow: var(--sh-1);
}
.sidebar-cta__title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin-bottom: 12px;
}
.sidebar-cta__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 22px;
}
.sidebar-cta__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--ink-2);
}
.sidebar-cta__item svg { color: var(--c-purple); flex-shrink: 0; margin-top: 2px; }
.sidebar-cta .btn { width: 100%; justify-content: center; }
.sidebar-cta__note {
  text-align: center;
  font-size: 12px;
  color: var(--ink-4);
  margin-top: 10px;
}
.sidebar-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-soft);
  border-radius: var(--r-md);
  margin-top: 16px;
  border: 1px solid var(--line);
}
.sidebar-stat__v { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sidebar-stat__l { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* ── Article / Blog ── */
.article {
  max-width: 740px;
}
.article h2 { font-size: clamp(22px, 2.5vw, 30px); margin: 42px 0 14px; }
.article h3 { font-size: clamp(18px, 2vw, 22px); margin: 32px 0 10px; }
.article p { margin: 0 0 18px; color: var(--ink-2); line-height: 1.7; font-size: 17px; }
.article ul, .article ol { margin: 0 0 18px; padding-left: 22px; }
.article li { margin-bottom: 8px; color: var(--ink-2); line-height: 1.6; }
.article strong { color: var(--ink); }
.article a:not(.btn):not([class*="btn"]):not(.related-card):not(.dc-link-btn) { color: var(--c-purple); text-decoration: underline; }
.article .btn, .article .btn-primary, .article .btn-ghost, .article .btn-lg, .article .related-card { text-decoration: none; color: inherit; -webkit-text-fill-color: inherit; }
.article blockquote {
  margin: 28px 0;
  padding: 22px 28px;
  border-left: 4px solid var(--c-purple);
  background: var(--bg-soft);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 18px;
  font-style: italic;
  color: var(--ink);
}
.article-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-4);
}
.article-meta .author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.article-meta img {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
}
.article-tag {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--grad-soft);
  color: var(--c-purple);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Blog grid ── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 960px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
  display: flex;
  flex-direction: column;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.blog-card__img {
  aspect-ratio: 16/9;
  background: var(--grad-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: var(--c-purple);
  border-bottom: 1px solid var(--line);
}
.blog-card__body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.blog-card__cat {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-purple);
  margin-bottom: 10px;
}
.blog-card h3 { font-size: 18px; letter-spacing: -0.015em; margin-bottom: 10px; }
.blog-card h3 a { color: var(--ink); transition: color .2s; }
.blog-card h3 a:hover { color: var(--c-purple); }
.blog-card p { font-size: 14px; color: var(--ink-3); margin: 0 0 16px; flex: 1; }
.blog-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-4);
}
.blog-card__read { color: var(--c-purple); font-weight: 500; }
.blog-card--featured { grid-column: span 2; }
@media (max-width: 960px) { .blog-card--featured { grid-column: span 1; } }
.blog-card--featured .blog-card__img { aspect-ratio: 21/9; font-size: 60px; }

/* ── Caso de éxito (inner page) ── */
.caso-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 880px) { .caso-hero { grid-template-columns: 1fr; } }
.caso-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.caso-metrics--4col { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) { .caso-metrics--4col { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .caso-metrics--4col { grid-template-columns: 1fr 1fr; } }
.caso-metric {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px 22px;
}
.caso-metric__v {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.caso-metric__l { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.caso-timeline {
  position: relative;
  padding-left: 32px;
  border-left: 2px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.caso-timeline__item {
  position: relative;
}
.caso-timeline__item::before {
  content: "";
  position: absolute;
  left: -40px; top: 6px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--c-purple) 15%, transparent);
}
.caso-timeline__period {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-purple);
  margin-bottom: 6px;
}
.caso-timeline__title { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.caso-timeline__desc { font-size: 14.5px; color: var(--ink-3); }

/* ── Zona SEO page ── */
.zona-map {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 880px) { .zona-map { grid-template-columns: 1fr 1fr; } }
.zona-card {
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform .25s, box-shadow .25s;
  text-decoration: none;
  color: var(--ink);
}
.zona-card:hover { transform: translateY(-2px); box-shadow: var(--sh-1); }
.zona-card.current { background: var(--grad-soft); border-color: rgba(106,71,255,0.3); }
.zona-card__name { font-size: 15px; font-weight: 600; }
.zona-card__sub { font-size: 12px; color: var(--ink-3); }

/* ── Servicio page ── */
.service-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 640px) { .service-features { grid-template-columns: 1fr; } }
.service-feature {
  display: flex;
  gap: 14px;
  padding: 22px;
  border-radius: var(--r-lg);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  align-items: flex-start;
  transition: transform .3s ease, box-shadow .3s ease;
}
.service-feature:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.service-feature__ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--grad-soft);
  display: grid;
  place-items: center;
  color: var(--c-purple);
  flex-shrink: 0;
}
.service-feature h3 { font-size: 16px; margin-bottom: 6px; }
.service-feature p { font-size: 14px; color: var(--ink-3); margin: 0; }
.price-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  padding: 36px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.price-card--featured {
  background: var(--ink);
  border-color: var(--ink);
  color: white;
}
.price-card--featured h3 { color: white; }
.price-card--featured p { color: rgba(255,255,255,0.7); }
.price-card__badge {
  position: absolute; top: 16px; right: 16px;
  background: var(--grad);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--f-mono);
  letter-spacing: 0.08em;
}
.price-from {
  font-size: 12px;
  color: var(--ink-4);
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}
.price-card--featured .price-from { color: rgba(255,255,255,0.5); }
.price-value {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.price-card--featured .price-value {
  background: linear-gradient(135deg, #fff, #C9B9FF);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ── Nav dropdown ── */
.nav__dropdown-wrap { position: relative; }
.nav__chevron { transition: transform .25s; vertical-align: middle; margin-left: 2px; }
.nav__dropdown-wrap:hover .nav__chevron,
.nav__dropdown-wrap:focus-within .nav__chevron { transform: rotate(180deg); }
.nav__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: 8px;
  min-width: 240px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity .2s ease, transform .2s ease;
  z-index: 100;
}
.nav__dropdown-wrap:hover .nav__dropdown,
.nav__dropdown-wrap:focus-within .nav__dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink-2);
  transition: background .15s, color .15s;
  text-decoration: none;
}
.nav__dropdown a:hover { background: var(--bg-soft); color: var(--ink); }
.dd-icon { font-size: 16px; line-height: 1; flex-shrink: 0; }
.dd-badge {
  display: inline-block;
  font-size: 9px;
  font-family: var(--f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--grad);
  color: white;
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: 6px;
}

/* ── Nav mobile groups ── */
.nav__mobile-group { display: flex; flex-direction: column; }
.nav__mobile-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 14px 4px 4px;
}

/* ── Section narrow ── */
.section--narrow { max-width: 800px; margin-inline: auto; }
.section--xs { max-width: 640px; margin-inline: auto; }

/* ── Related pages grid ── */
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 880px) { .related-grid { grid-template-columns: 1fr; } }
.related-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.related-card:hover { transform: translateY(-2px); box-shadow: var(--sh-1); border-color: var(--line-strong); }
.related-card__ic {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--grad-soft);
  display: grid;
  place-items: center;
  color: var(--c-purple);
  flex-shrink: 0;
  font-size: 18px;
}
.related-card__title { font-size: 15px; font-weight: 600; }
.related-card__sub { font-size: 12.5px; color: var(--ink-3); }

/* ── Check list ── */
.check-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.check-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15.5px;
  color: var(--ink-2);
}
.check-list .ck-ic {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--grad-soft);
  border: 1.5px solid rgba(106,71,255,0.25);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--c-purple);
  font-size: 11px;
  margin-top: 1px;
}

/* ── In-page CTA band ── */
.cta-mid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 28px 32px;
  border-radius: var(--r-xl);
  background: var(--grad);
  color: white;
  margin: 48px 0;
}
.cta-mid h3 { color: white; font-size: clamp(18px, 2.5vw, 24px); }
.cta-mid p { color: rgba(255,255,255,0.85); font-size: 15px; margin: 4px 0 0; }
.cta-mid .btn-ghost-white {
  color: white;
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 999px;
  padding: 13px 24px;
  font-size: 15px;
  font-weight: 500;
  transition: background .2s, border-color .2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.cta-mid .btn-ghost-white:hover { background: rgba(255,255,255,0.15); border-color: white; }

/* ── Sector badge grid ── */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
@media (max-width: 880px) { .sector-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .sector-grid { grid-template-columns: 1fr 1fr; } }
.sector-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px;
  border-radius: var(--r-lg);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  text-align: center;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.sector-badge:hover { transform: translateY(-3px); box-shadow: var(--sh-1); border-color: rgba(106,71,255,0.3); }
.sector-badge__ic { font-size: 28px; line-height: 1; }
.sector-badge__name { font-size: 13.5px; font-weight: 600; }

/* ── Autor box ── */
.author-box {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 28px;
  background: var(--bg-soft);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  margin-top: 48px;
}
.author-box img {
  width: 70px; height: 70px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  flex-shrink: 0;
}
.author-box__name { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.author-box__role { font-size: 13px; color: var(--c-purple); font-family: var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.author-box p { font-size: 14px; color: var(--ink-3); margin: 0; }