/* ============================================================
   dentistaarequipa27 · components — cards, silo, CTA, price, trust,
   rating, FAQ, chips, phases, urgencia.

   Design-system semantic aliases and scales only (see base.css
   and tokens.css). Never a raw ramp step, never a bare hex.
   ============================================================ */

/* ---------- cards ---------- */
.dt-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-control);
}
.dt-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.dt-card__media img {
  border-radius: var(--radius-media);
  inline-size: 100%;
  object-fit: cover;
}
.dt-card h3 {
  margin-block: var(--space-3) var(--space-1);
}
.dt-card__link a {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  text-decoration: none;
}
.dt-card--post {
  margin-block-end: var(--space-5);
}
.dt-card--post .wp-block-post-title a {
  text-decoration: none;
  color: var(--text-strong);
}
.dt-card--post .wp-block-post-title a:hover {
  color: var(--text-link-hover);
}

/* phase cards (landing port) */
.dt-card--phase__num {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-xl);
  color: var(--accent-ink);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* team */
.dt-card--member {
  text-align: center;
}
.dt-card--member__photo img {
  border-radius: var(--radius-pill);
  aspect-ratio: 1;
  max-inline-size: 140px;
  margin-inline: auto;
}

/* ---------- hero ---------- */
.dt-hero {
  padding-block: var(--section-y-tight);
}
.dt-hero__title {
  font: var(--type-hero);
  letter-spacing: var(--tracking-tight);
}
.dt-hero__lead {
  font: var(--type-lead);
  color: var(--text-muted);
  max-inline-size: 46ch;
}
.dt-hero__media img {
  border-radius: var(--radius-media);
  box-shadow: var(--shadow-lg);
}

/* chips */
.dt-chips {
  gap: var(--space-2);
  margin-block-start: var(--space-5);
}
.dt-chip {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--accent-ink);
  background: var(--surface-accent);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 0.3em 0.9em;
  margin: 0;
}

/* ---------- silo nav ---------- */
.dt-silo {
  margin-block: var(--section-y-tight);
  padding-block-start: var(--space-8);
  border-top: 1px solid var(--border-subtle);
}
.dt-silo__title {
  font: var(--type-h3);
  margin-block: 0 var(--space-3);
}
.dt-silo__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
  padding: 0;
  margin: 0 0 var(--space-6);
}
.dt-silo__card {
  display: block;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--text-body);
  transition: var(--transition-control);
}
.dt-silo__card:hover {
  border-color: var(--border-brand);
  color: var(--text-link);
  transform: translateY(-1px);
}
.dt-silo__twin {
  margin: 0;
}

/* ---------- CTA strip ---------- */
.dt-cta {
  border-radius: var(--radius-card);
  padding: var(--section-y-tight) var(--space-8);
  margin-block: var(--section-y-tight);
}
.dt-cta__lead {
  opacity: 0.9;
  max-inline-size: 52ch;
  margin-inline: auto;
}

/* ---------- price card ---------- */
.dt-price-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  max-inline-size: 380px;
  box-shadow: var(--shadow-sm);
}
.dt-price-card__price {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  color: var(--brand-ink);
  margin-block: var(--space-1) var(--space-3);
  font-variant-numeric: tabular-nums;
}
.dt-price-card__per {
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--text-muted);
}
.dt-price-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
}
.dt-price-card__features li {
  padding-inline-start: var(--space-6);
  position: relative;
  margin-block: var(--space-2);
}
.dt-price-card__features li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  color: var(--status-success);
  font-weight: var(--weight-bold);
}

/* ---------- trust strip ---------- */
.dt-trust {
  border-block: 1px solid var(--border-subtle);
  padding-block: var(--space-8);
  margin-block: var(--section-y-tight);
}
.dt-trust__grid {
  text-align: center;
}
.dt-trust__num {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  color: var(--brand-ink);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.dt-trust__key {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted);
  margin: var(--space-1) 0 0;
}

/* ---------- rating ---------- */
.dt-rating {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  max-inline-size: 420px;
}
.dt-rating__score {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0;
}
.dt-rating__score strong {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  font-variant-numeric: tabular-nums;
}
.dt-rating__stars {
  color: var(--status-warning);
  letter-spacing: var(--tracking-caps);
}
.dt-rating__count {
  color: var(--text-muted);
  margin-block: var(--space-1) var(--space-4);
}
.dt-rating__quote {
  border-inline-start: 3px solid var(--border-brand);
  margin: 0;
  padding-inline-start: var(--space-4);
  font-size: var(--text-sm);
}

/* ---------- FAQ ---------- */
.dt-faq__item {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  padding: 0;
  margin-block-end: var(--space-2);
  overflow: hidden;
}
.dt-faq__item summary {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: color var(--duration-base) var(--ease-standard);
}
.dt-faq__item summary::-webkit-details-marker {
  display: none;
}
.dt-faq__item summary::after {
  content: "＋";
  position: absolute;
  inset-inline-end: var(--space-4);
  color: var(--brand-ink);
  transition: transform var(--duration-base) var(--ease-standard);
}
.dt-faq__item[open] summary::after {
  transform: rotate(45deg);
}
.dt-faq__item[open] summary {
  color: var(--brand-ink);
}
.dt-faq__item > :not(summary) {
  padding: 0 var(--space-4) var(--space-4);
  margin: 0;
  font-size: var(--text-base);
}

/* ---------- urgencia banner ---------- */
.dt-urgencia {
  background: var(--surface-promo);
  border: 1px solid var(--border-strong);
  border-inline-start: 4px solid var(--status-danger);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-5);
  align-items: center;
  margin-block: var(--space-8);
}
.dt-urgencia__text {
  margin: 0;
}

/* ---------- progress steps (brief) ---------- */
.dt-steps {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0;
  margin: 0 0 var(--space-8);
  counter-reset: step;
}
.dt-steps__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  position: relative;
  text-align: center;
}
.dt-steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15px;
  inset-inline-start: calc(50% + 22px);
  inline-size: calc(100% - 44px);
  block-size: 2px;
  background: var(--border-subtle);
}
.dt-steps__item.is-done:not(:last-child)::after {
  background: var(--surface-brand);
}
.dt-steps__num {
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  background: var(--surface-control);
  border: 2px solid var(--border-subtle);
  color: var(--text-muted);
  transition: var(--transition-control);
}
.dt-steps__item.is-active .dt-steps__num {
  border-color: var(--border-brand);
  color: var(--brand-ink);
}
.dt-steps__item.is-done .dt-steps__num {
  background: var(--surface-brand);
  border-color: var(--surface-brand);
  color: var(--on-brand);
}
.dt-steps__label {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.dt-steps__item.is-active .dt-steps__label {
  color: var(--text-body);
  font-weight: var(--weight-semibold);
}

@media (max-width: 600px) {
  .dt-steps__label {
    display: none;
  }
}

/* ==========================================================================
   ENTRADA — the conversion band under a treatment/pillar H1.
   Rendered by inc/conversion.php; empty outside landing contexts.
   ========================================================================== */
.dt-entrada {
  margin-block: var(--space-4) var(--space-10);
  padding-block-end: var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}
.dt-entrada__lead {
  font: var(--type-lead);
  color: var(--text-body);
  max-width: 60ch;
  margin-block: 0 var(--space-6);
}
.dt-entrada__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--gap-buttons);
}
.dt-entrada__actions .dt-btn {
  font: var(--type-button);
  letter-spacing: -0.006em;
  text-decoration: none;
  border-radius: var(--radius-control);
  padding: 13px 22px;
  display: inline-block;
}
.dt-entrada__actions .dt-btn--primary {
  box-shadow: var(--shadow-button);
}
.dt-entrada__phone {
  font-weight: var(--weight-bold);
  font-size: var(--text-ui);
  color: var(--brand-ink);
  text-decoration: none;
}
.dt-entrada__phone:hover {
  color: var(--accent-ink);
}
.dt-entrada__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block: var(--space-5) 0;
  font-size: var(--text-meta);
  color: var(--text-muted);
}
.dt-entrada__twin {
  color: var(--accent-ink);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dt-entrada__twin:hover {
  color: var(--text-link-hover);
}
.dt-entrada__stars {
  color: var(--rating-star);
}
.dt-entrada__sep {
  color: var(--border-strong);
}

/* ==========================================================================
   STICKY MOBILE CTA — phone + WhatsApp + booking, thumb-reachable.
   Mobile only; desktop keeps the header CTA. Safe-area aware.
   ========================================================================== */
.dt-sticky-cta {
  display: none;
}
@media (max-width: 781px) {
  .dt-sticky-cta {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    gap: 1px;
    background: var(--border-subtle);
    border-top: 1px solid var(--border-subtle);
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: var(--shadow-panel);
  }
  .dt-sticky-cta__item {
    flex: 1;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: var(--type-button);
    text-decoration: none;
    background: var(--surface-card);
    color: var(--brand-ink);
    transition: var(--transition-control);
  }
  .dt-sticky-cta__item--primary {
    background: var(--surface-brand);
    color: var(--on-brand);
  }
  .dt-sticky-cta__item--primary:hover {
    background: var(--surface-brand-hover);
  }
  /* keep the bar from covering the page's last content */
  body {
    padding-bottom: 52px;
  }
}

/* ==========================================================================
   CALCULADORA — ungated estimate + conversion row. DS: card surfaces,
   hairlines, teal action, slate-tinted shadows, no entrance animation.
   ========================================================================== */
.dt-calc {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-band);
  padding: var(--pad-card);
  margin-block: var(--space-12);
  box-shadow: var(--shadow-sm);
}
.dt-calc__title {
  margin-block: 0 var(--space-2);
}
.dt-calc__intro {
  color: var(--text-muted);
  margin-block: 0 var(--space-8);
}
.dt-calc__grid {
  display: grid;
  gap: var(--space-8);
}
@media (min-width: 900px) {
  .dt-calc__grid {
    grid-template-columns: 1fr 1.15fr;
    gap: var(--space-10);
  }
}
.dt-calc__label {
  display: block;
  font-size: var(--text-meta);
  font-weight: var(--weight-black);
  color: var(--text-strong);
  margin-block: var(--space-5) var(--space-2);
}
.dt-calc__select,
.dt-calc__email-form input {
  width: 100%;
  min-height: 42px;
  padding: 0 var(--space-4);
  font: var(--type-body);
  color: var(--text-strong);
  background: var(--surface-control);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
}
.dt-calc__select:focus-visible,
.dt-calc__email-form input:focus-visible,
.dt-calc__chip:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}
.dt-calc__chips {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.dt-calc__chip {
  min-height: 37px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface-control);
  color: var(--text-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: var(--transition-control);
}
.dt-calc__chip.is-active {
  background: var(--surface-brand);
  border-color: var(--surface-brand);
  color: var(--on-brand);
}
.dt-calc__result {
  background: var(--surface-accent);
  border: 1px solid var(--border-accent, var(--border-subtle));
  border-radius: var(--radius-card);
  padding: var(--pad-card);
}
.dt-calc__price {
  font: var(--type-stat);
  color: var(--text-strong);
  margin-block: 0 var(--space-1);
}
.dt-calc__range {
  font-size: var(--text-meta);
  color: var(--text-muted);
  margin-block: 0 var(--space-5);
}
.dt-calc__breakdown {
  list-style: none;
  padding: 0;
  margin-block: 0 var(--space-4);
  border-top: 1px solid var(--border-subtle);
}
.dt-calc__breakdown li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-ui);
  color: var(--text-body);
}
.dt-calc__cuotas {
  color: var(--accent-ink);
  font-weight: var(--weight-bold);
}
.dt-calc__disclaimer {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-block: 0 var(--space-5);
}
.dt-calc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.dt-calc__actions .dt-btn {
  font: var(--type-button);
  text-decoration: none;
  border-radius: var(--radius-control);
  padding: 13px 22px;
  display: inline-block;
}
.dt-calc__email {
  margin-block-start: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  padding-block-start: var(--space-4);
}
.dt-calc__email summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--accent-ink);
}
.dt-calc__email-form button {
  margin-block-start: var(--space-4);
  cursor: pointer;
  border: 1px solid var(--border-button, var(--border-strong));
}
.dt-calc__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
}
.dt-calc__error {
  color: var(--status-danger);
  font-size: var(--text-sm);
}
.dt-calc__ok {
  color: var(--status-success);
  font-weight: var(--weight-bold);
}

/* The CTA band sits on the ink hero-gradient in BOTH themes — its text must
   stay light in both. --on-brand pairs with the button FILL (which flips
   light in dark mode), so inside the band the PRESET VARIABLE itself is
   rescoped to the constant: core's .has-on-brand-color rules carry
   !important, so overriding the variable (not the property) is the only
   clean win. Buttons inside re-pin their own fill/text pair. */
.dt-cta {
  --wp--preset--color--on-brand: var(--text-on-dark);
  color: var(--text-on-dark);
}
.dt-cta .dt-cta__lead {
  color: var(--text-on-dark-soft);
}
.dt-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--surface-brand);
  color: var(--surface-page);
}
.wp-block-button.is-style-outline.dt-btn--ghost .wp-block-button__link {
  border-color: var(--text-on-dark);
  color: var(--text-on-dark);
  background: transparent;
}
.wp-block-button.is-style-outline.dt-btn--ghost .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-on-dark);
}

/* ==========================================================================
   PORTADA — the DS hero: copy left, masked photo right, quick-booking panel
   on the seam, trust stats overlapping below. Mobile-first: photo banner on
   top, panel in flow; the asymmetric composition assembles at >=1100px.
   ========================================================================== */
.dt-portada-band {
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-subtle);
}
.dt-portada {
  position: relative;
  padding-block: var(--space-8) var(--space-12);
}
.dt-portada__photo {
  margin: 0 0 var(--space-6);
}
.dt-portada__photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 340px;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-card);
}
.dt-portada__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 8px 17px;
  border-radius: var(--radius-pill);
  background: var(--surface-accent);
  border: 1px solid var(--accent-100);
  color: var(--accent-ink);
  font-size: var(--text-meta);
  font-weight: var(--weight-black);
}
.dt-portada__title {
  margin: 0 0 var(--space-6);
  font-size: clamp(34px, 4.6vw, 50px);
  line-height: 1.28;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  text-wrap: balance;
}
.dt-portada__title span { display: block; }
.dt-portada__title em {
  font-style: normal;
  color: var(--accent-500);
}
.dt-portada__lead {
  font: var(--type-lead);
  color: var(--text-body);
  max-width: 46ch;
  margin: 0 0 var(--space-8);
}
.dt-portada__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--gap-buttons);
  margin-bottom: var(--space-10);
}
.dt-portada__actions .dt-btn {
  font: var(--type-button);
  text-decoration: none;
  border-radius: 9px;
  padding: 15px 24px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.dt-portada__actions .dt-btn--primary { box-shadow: var(--shadow-button); }
.dt-portada__actions .dt-btn--secondary { border: 1px solid var(--border-button, var(--border-strong)); }
.dt-portada__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-bold);
  font-size: var(--text-ui);
  color: var(--brand-ink);
  text-decoration: none;
}
.dt-portada__phone:hover { color: var(--accent-ink); }
.dt-portada__features {
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-8);
}
.dt-portada__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.dt-portada__feat-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--surface-accent);
  border: 1px solid var(--accent-100);
  color: var(--accent-ink);
}
.dt-portada__feat-text { min-width: 0; }
.dt-portada__features strong {
  display: block;
  font-size: var(--text-ui);
  font-weight: var(--weight-black);
  color: var(--text-strong);
}
.dt-portada__features span {
  font-size: var(--text-meta);
  color: var(--text-muted);
}
.dt-portada__panel {
  background: var(--surface-card);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  padding: var(--space-7);
  max-width: 420px;
  margin-bottom: var(--space-8);
}
.dt-portada__panel-title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  color: var(--text-strong);
}
.dt-portada__panel-label {
  display: block;
  font-size: var(--text-meta);
  font-weight: var(--weight-black);
  color: var(--text-strong);
  margin: var(--space-4) 0 var(--space-1);
}
.dt-portada__field {
  position: relative;
  display: block;
}
.dt-portada__field-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  z-index: 1;
}
.dt-portada__panel select,
.dt-portada__panel input {
  width: 100%;
  /* The theme has no global border-box reset. The UA stylesheet gives <select>
     and <button> `border-box` but leaves <input> on `content-box`, so an input
     with `width:100%` plus this padding measured 403px inside a 344px panel and
     hung 35px past the card's right edge — visible on desktop AND phone
     (measured on prod: select/button right 1296, date input right 1355). */
  box-sizing: border-box;
  min-height: 42px;
  padding: 0 var(--space-4);
  font: var(--type-body);
  color: var(--text-strong);
  background: var(--surface-control);
  border: 1px solid var(--border-input, var(--border-strong));
  border-radius: var(--radius-control);
  transition: var(--transition-control);
}
/* Room for the leading icon. Declared AFTER the rule above because that one
   sets the `padding` shorthand, which would reset a padding-left set earlier. */
.dt-portada__field select,
.dt-portada__field input {
  padding-left: calc(var(--space-4) + 18px + var(--space-3));
}
/* Service select. The UA arrow is a hairline glyph drawn by the OS: it does not
   take the icon set's 1.7 stroke, its own shape changes per platform, and next
   to the 18px rounded icons on the other side of the same field it reads as a
   different family. `appearance:none` removes it and the sprite's chevron takes
   its place, with matching room reserved on the right. Still a real <select>,
   so phones keep the native wheel and the keyboard/AT behaviour is untouched. */
.dt-portada__field--select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(var(--space-4) + 18px + var(--space-3));
  cursor: pointer;
}
.dt-portada__field-arrow {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  z-index: 1;
  transition: var(--transition-control);
}
/* The whole field reacts, not just the border the pointer happens to be over —
   the icon, the arrow and the edge move together so it reads as one control. */
.dt-portada__field:hover select,
.dt-portada__field:hover input {
  border-color: var(--border-brand);
}
.dt-portada__field:hover .dt-portada__field-icon,
.dt-portada__field:hover .dt-portada__field-arrow,
.dt-portada__field:focus-within .dt-portada__field-icon,
.dt-portada__field:focus-within .dt-portada__field-arrow {
  color: var(--accent-ink);
}
/* No open/closed flip on the arrow: CSS cannot see a native select's popup, and
   `:focus-within` is still true AFTER the popup closes — the arrow would stay
   pointing up at a shut menu. Colour change only, which is a state that is real. */
/* Date field. Chrome paints the native picker button solid black, which fought
   the leading icon, and renders the empty mm/dd/yyyy mask in full-strength text
   so an EMPTY field looked filled. Mute the mask, soften the button.
   `:in-range` cannot tell empty from filled on a date input (both match — it was
   measured), so the filled state is flagged from JS via .has-value. Without JS a
   chosen date simply stays muted: lighter, never broken. */
.dt-portada__field input[type="date"]::-webkit-datetime-edit {
  color: var(--text-muted);
}
.dt-portada__field.has-value input[type="date"]::-webkit-datetime-edit,
.dt-portada__field input[type="date"]:focus::-webkit-datetime-edit {
  color: var(--text-strong);
}
.dt-portada__field input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .5;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: var(--transition-control);
}
.dt-portada__field input[type="date"]::-webkit-calendar-picker-indicator:hover,
.dt-portada__field input[type="date"]::-webkit-calendar-picker-indicator:focus-visible {
  opacity: 1;
  background: var(--surface-accent);
}
/* ==========================================================================
   DATE PICKER — only present when theme.js enhanced the field on a fine
   pointer (.dt-datepick). Touch devices keep the native picker, which is
   better there, so none of this applies to them.
   ========================================================================== */
/* The native indicator is replaced by our own trigger; hide it rather than
   leaving two calendar buttons in one field. */
.dt-datepick input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}
/* The enhanced field is readonly (theme.js) so Chrome cannot open its own
   picker from any gesture. It still opens ours, so it reads as a control. */
.dt-datepick input[type="date"] {
  cursor: pointer;
}
.dt-datepick__trigger {
  position: absolute;
  right: calc(var(--space-4) - 5px);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-control);
}
.dt-datepick__trigger:hover { background: var(--surface-accent); color: var(--accent-ink); }
.dt-datepick__trigger:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.dt-datepick__pop {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  /* The gate is pointer TYPE, not width, so a desktop window dragged to phone
     width still gets this popup — and a fixed 296px ran off the left edge below
     ~360px (measured: left -10 at 360, -50 at 320). Clamping against the
     VIEWPORT was not enough: the popup hangs off the field's right edge, which
     is itself inset from the viewport, so at 320px it still started at -20.
     Clamp to the field instead (100% is the field, the positioning container) —
     that can never be wider than what holds it. border-box because the theme
     has no global reset, so the padding would otherwise sit outside the width
     the min() just capped. */
  box-sizing: border-box;
  width: min(296px, 100%);
  padding: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
}
.dt-datepick__pop[hidden] { display: none; }
.dt-datepick__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.dt-datepick__caption {
  font-size: var(--text-ui);
  font-weight: var(--weight-black);
  color: var(--text-strong);
  white-space: nowrap;
}
/* Intl gives "setiembre de 2026" lowercase. `capitalize` would title-case the
   "de" as well, so lift only the first letter. */
.dt-datepick__caption::first-letter { text-transform: uppercase; }
.dt-datepick__nav {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-control);
}
.dt-datepick__nav:hover:not(:disabled) { background: var(--surface-accent); color: var(--accent-ink); }
.dt-datepick__nav:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.dt-datepick__nav:disabled { opacity: .3; cursor: default; }
.dt-datepick__dow,
.dt-datepick__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.dt-datepick__dow {
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}
.dt-datepick__day {
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-body);
  font: inherit;
  font-size: var(--text-meta);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: var(--transition-control);
}
.dt-datepick__day:hover:not(:disabled) { background: var(--surface-accent); color: var(--accent-ink); }
.dt-datepick__day:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.dt-datepick__day:disabled { color: var(--text-muted); opacity: .38; cursor: default; }
/* Today is an outline, the selection is a fill — so a selected today still
   reads as selected rather than losing to its own marker. */
.dt-datepick__day.is-today { box-shadow: inset 0 0 0 1px var(--border-brand); }
.dt-datepick__day.is-selected,
.dt-datepick__day.is-selected:hover {
  background: var(--surface-brand);
  color: var(--on-brand);
  font-weight: var(--weight-black);
  box-shadow: none;
}

.dt-portada__panel select:focus-visible,
.dt-portada__panel input:focus-visible,
.dt-portada__panel button:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}
/* Scoped to the submit button. Written when the panel held exactly one button,
   this matched EVERY button inside it — and `.dt-portada__panel button` (0,1,1)
   outranks a single class, so the date picker's day cells came out 48px tall,
   full width and brand-filled. */
.dt-portada__panel button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-6);
  min-height: 48px;
  font: var(--type-button);
  border: 0;
  border-radius: var(--radius-control);
  cursor: pointer;
  background: var(--surface-brand);
  color: var(--on-brand);
  transition: var(--transition-control);
}
.dt-portada__panel button[type="submit"]:hover { background: var(--surface-brand-hover); }
/* Secondary path out of the panel: the wizard is the primary action, but a
   good share of local traffic would rather open a chat than pick a slot, and
   the number is already operator data. Quiet link, never a second button — it
   must not compete with "Ver horarios disponibles". */
.dt-portada__panel-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  min-height: 24px;
  font-size: var(--text-meta);
  font-weight: var(--weight-bold);
  color: var(--brand-ink);
  text-decoration: none;
}
.dt-portada__panel-alt:hover { color: var(--accent-ink); text-decoration: underline; }
.dt-portada__panel-alt .dt-icon { flex: none; }
.dt-portada__panel-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.dt-portada__panel-note .dt-icon { flex: none; }
.dt-portada__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  border-radius: var(--radius-band);
  background: var(--surface-card);
  box-shadow: var(--shadow-stats);
  padding: var(--space-7) var(--space-3);
}
.dt-portada__stat {
  flex: 1 1 150px;
  padding: 0 var(--space-8);
  border-left: 1px solid var(--border-subtle);
}
.dt-portada__stat:first-child { border-left: 0; }
.dt-portada__stat strong {
  display: block;
  font: var(--type-stat);
  letter-spacing: -0.02em;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-1);
}
.dt-portada__stat span {
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
/* `.dt-portada__stat span` (0,1,1) would otherwise win over a bare
   `.dt-portada__stars` (0,1,0) and paint the stars muted grey. */
.dt-portada__stat .dt-portada__stars {
  color: var(--rating-star);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  vertical-align: middle;
}
.dt-portada__stat--rating strong {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
/* .dt-icon sets `fill: none` for the outline set; a filled star has to opt back
   in — the symbol's own fill attribute does not survive that (measured). */
.dt-portada__stars .dt-icon.is-on { fill: currentColor; }
.dt-portada__review-plats {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-1);
}
.dt-portada__review-plats a {
  color: var(--text-muted);
  line-height: 0;
  transition: var(--transition-control);
}
.dt-portada__review-plats a:hover { color: var(--brand-ink); }

/* Below the desktop composition the hero is normal flow, so the booking panel
   lands BELOW the four feature chips — measured at y=1263 on a 390x844 phone,
   a screen and a half down, while the panel is the highest-intent element in
   the band. On phones it moves directly under the CTAs instead. `display:
   contents` dissolves the copy wrapper (it carries no box of its own under
   1100px — its only rules live in the desktop query) so the copy's children and
   the panel can be ordered inside one flex column. */
@media (max-width: 1099.98px) {
  .dt-portada { display: flex; flex-direction: column; }
  .dt-portada__copy { display: contents; }
  .dt-portada__panel { order: 1; }
  .dt-portada__features { order: 2; }
  .dt-portada__stats { order: 3; }
}

@media (min-width: 1100px) {
  .dt-portada {
    min-height: 620px;
    padding-block: var(--space-12) var(--space-12);
  }
  .dt-portada__photo {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(46%, 620px);
    margin: 0;
  }
  .dt-portada__photo img {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
    /* The source (972x940) is wider than this tall narrow box, so `cover` crops
       ~38% of the WIDTH and nothing vertically. The subject sits centre-right,
       and the booking panel covers the right ~70% of the box — so the crop is
       shifted until her SMILE clears the panel's left edge. 60% is the minimum
       that does at 1100px, the tightest width; lower and the panel cuts her
       mouth, higher and it needlessly slices her face. */
    object-position: 60% top;
    -webkit-mask-image: var(--mask-photo-left);
    mask-image: var(--mask-photo-left);
  }
  .dt-portada__copy { max-width: 54%; position: relative; z-index: 2; }
  .dt-portada__features { grid-template-columns: repeat(2, minmax(0, 250px)); }
  .dt-portada__panel {
    position: absolute;
    /* Flush with the content gutter, so the panel's right edge lines up with the
       header's "Reservar cita" button. The old 11px inset read as a near-miss. */
    right: 0;
    top: var(--space-16);
    width: 344px;
    margin: 0;
    z-index: 3;
  }
  .dt-portada__stats {
    position: relative;
    z-index: 2;
    max-width: 72%;
    background: linear-gradient(90deg, var(--surface-card) 0%, var(--surface-card) 76%, transparent 100%);
    box-shadow: var(--shadow-stats);
  }
}

/* From 1280 the copy column gives width back to the photo, which is what decides
   how much of the room survives `cover`: the box is tall and narrow against a
   972x940 source, so `cover` discards WIDTH and nothing vertically, and every
   pixel of box width is scene kept rather than cropped. Measured on the rendered
   page at 1440 (the percentages are of the 1200px content container, not the
   viewport) — share of the photo actually visible, and how far the headline's
   longest line reaches into the photo box:

     54/46            648px box   72% shown   h1 50px   0
     60/42            720px box   80% shown   h1 50px   11px into the photo
     60/42 + h1 46px  720px box   81% shown   h1 46px   0
     60/42 + h1 42px  720px box   83% shown   h1 42px   0

   60/42 at 46px is the one taken: it keeps the headline leading the band, which
   42px does not. The share moves with the h1 size because a shorter headline
   shortens the hero, which lowers the cover scale.

   Two things measured here that are easy to get wrong. The headline already
   wraps to "Top Odontologo / en Arequipa / para tu mejor sonrisa" at BOTH
   splits, so forcing that break is a no-op — the overrun is line 3 alone. And
   the overrun must be read from Range rects over the TEXT NODES: the h1's own
   bounding rect is its max-width box and reports the same figure at any font
   size. Below 1280 the headline keeps its 50px scale; this tier is the only
   place it changes. object-position drops 60% -> 52% because a wider box needs
   less shift to keep the smile clear of the booking panel. */
@media (min-width: 1280px) {
  .dt-portada__photo { width: min(60%, 720px); }
  .dt-portada__copy { max-width: 42%; }
  .dt-portada__photo img { object-position: 52% top; }
  .dt-portada__title { font-size: clamp(38px, 3.4vw, 46px); }
}

/* ==========================================================================
   HERO BAND — pillar/treatment landing head: eyebrow + H1 + entrada on a
   card ground, the featured photo dissolving in from the right on desktop.
   ========================================================================== */
.dt-hero-band {
  position: relative;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
  padding-block: var(--space-8) var(--space-2);
  overflow: hidden;
}
.dt-eyebrow {
  margin: var(--space-4) 0 var(--space-2);
  font-size: 11.5px;
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-ink);
}
.dt-hero-band .dt-page-title { margin-top: 0; }
.dt-hero-band .dt-entrada {
  border-bottom: 0;
  margin-block-end: var(--space-4);
  padding-block-end: 0;
}
.dt-hero-band__photo {
  display: none;
  margin: 0;
}
@media (min-width: 1000px) {
  .dt-hero-band:has(.dt-hero-band__photo) .dt-hero-band__copy {
    max-width: 55%;
    /* core's constrained layout pins children margin auto !important; this
       re-creates the 1180px well's left edge while keeping the copy pinned
       left of the photo instead of centered under it. */
    margin-left: max(0px, calc((100% - 1180px) / 2)) !important;
    margin-right: auto !important;
  }
  .dt-hero-band__photo {
    display: block;
    position: absolute;
    inset: 0 0 0 auto;
    width: 40%;
    z-index: 1;
  }
  .dt-hero-band__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    -webkit-mask-image: var(--mask-photo-left);
    mask-image: var(--mask-photo-left);
  }
  .dt-hero-band__copy { position: relative; z-index: 2; }
}

/* ============================================================
   Portada sections — the DS HomeScreen below the hero
   (servicios band · por qué + oferta · testimonios · desde el
   blog · CTA bar). Mobile-first; the 1000px breakpoint matches
   the hero band's.
   ============================================================ */

.dt-home > * {
  margin-block-start: var(--space-10);
}

/* scroll reveal — additive only: without JS (html lacks .js-reveal) or with
   reduced motion, sections render fully visible. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .dt-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
  }
  .js-reveal .dt-reveal.is-in {
    opacity: 1;
    transform: none;
  }
}

/* ---------- servicios band ---------- */
.dt-band {
  background: var(--surface-band);
  border-radius: var(--radius-band);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-8);
}
@media (min-width: 700px) {
  .dt-band {
    padding: var(--pad-band) var(--pad-band) var(--space-10);
  }
}
.dt-band__title {
  margin: 0;
  font: var(--type-h2);
  color: var(--text-strong);
}
.dt-band__intro .dt-btn--navy {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
}
.dt-band__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--gap-cards);
}
.dt-service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 135px;
  padding: var(--space-4);
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid transparent;
  text-decoration: none;
  text-align: center;
  transition: var(--transition-control);
}
.dt-service-card:hover {
  border-color: var(--border-brand);
  box-shadow: var(--shadow-md);
}
.dt-service-card__icon {
  position: relative;
  display: flex;
  color: var(--accent-ink);
}
.dt-service-card__spark {
  position: absolute;
  inset: 0;
}
.dt-service-card__label {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  letter-spacing: -0.004em;
  color: var(--text-strong);
}
@media (min-width: 1000px) {
  .dt-band {
    grid-template-columns: 300px 1fr;
    align-items: center;
    /* DS: the band tucks under the hero stats bar */
    margin-block-start: calc(-1 * var(--space-4));
    position: relative;
    z-index: 1;
  }
  .dt-band__grid {
    /* 6 cards → a clean 3×2; auto-fill would orphan the sixth */
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- por qué elegirnos + oferta ---------- */
.dt-why-row {
  display: grid;
  gap: var(--space-6);
}
.dt-why {
  background: var(--surface-accent-strong);
  border-radius: var(--radius-band);
  color: var(--text-on-dark);
  padding: var(--space-8) var(--space-8) var(--space-10);
}
.dt-why__title {
  margin: var(--space-3) 0 0;
  font: var(--type-h3);
  font-size: var(--text-lg);
  color: var(--text-on-dark);
}
.dt-why__title em {
  font-style: normal;
  color: var(--accent-200);
}
.dt-why__copy {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-on-dark-soft);
  max-width: 34ch;
}
.dt-why .dt-btn--on-dark-ghost {
  margin-top: var(--space-4);
}
.dt-why__stats {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-6);
  text-align: center;
}
.dt-why__stats li {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  position: relative;
}
.dt-why__stats li + li::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(-0.5 * var(--space-6));
  width: 1px;
  background: rgba(255, 255, 255, 0.24);
}
.dt-why__stats strong {
  font: var(--type-stat);
  font-size: 22px;
  color: var(--text-on-dark);
}
.dt-why__stats span {
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: rgba(255, 255, 255, 0.9);
}
.dt-why__stats .dt-icon {
  color: var(--text-on-dark);
  opacity: 0.9;
}
@media (max-width: 560px) {
  .dt-why__stats li + li::before {
    display: none;
  }
}

.dt-offer {
  position: relative;
  overflow: hidden;
  background: var(--surface-offer);
  border-radius: var(--radius-band);
  padding: var(--space-6) var(--space-6) var(--space-6);
  display: grid;
  align-content: space-between;
  gap: var(--space-6);
}
.dt-offer__orb {
  position: absolute;
  right: -46px;
  top: -34px;
  width: 190px;
  height: 190px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.42);
}
:root[data-theme="dark"] .dt-offer__orb {
  background: rgba(255, 255, 255, 0.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dt-offer__orb {
    background: rgba(255, 255, 255, 0.06);
  }
}
.dt-offer__head {
  position: relative;
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.dt-offer__disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--accent-ink);
  box-shadow: var(--shadow-sm);
}
.dt-offer__kicker {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-body);
}
.dt-offer__title {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: -0.022em;
  color: var(--text-strong);
}
.dt-offer__note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.dt-offer .dt-btn--compact {
  position: relative;
  justify-self: start;
  font-size: var(--text-sm);
}
@media (min-width: 1000px) {
  .dt-why-row {
    grid-template-columns: 1fr 320px;
    align-items: stretch;
  }
}

/* ---------- testimonios ---------- */
.dt-testimonios__title {
  margin: 0;
  font: var(--type-h2);
  text-align: center;
  color: var(--text-strong);
}
.dt-testimonios__title em {
  font-style: normal;
  color: var(--accent-ink);
}
.dt-testimonios__grid {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  max-width: 900px;
  margin-inline: auto;
}
.dt-testimonial {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6) var(--space-5);
  box-shadow: var(--shadow-md);
  text-align: left;
}
.dt-testimonial__mark {
  position: absolute;
  left: var(--space-4);
  top: var(--space-3);
  font-family: var(--font-quote);
  font-size: 32px;
  line-height: 1;
  font-weight: var(--weight-black);
  color: var(--accent-ink);
}
.dt-testimonial blockquote {
  margin: 0;
  padding: 0;
  border: 0;
}
.dt-testimonial blockquote p {
  margin: 0 0 0 var(--space-7);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-body);
}
.dt-testimonial footer {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: var(--space-4) 0 0 var(--space-7);
}
.dt-testimonial footer strong {
  font-size: var(--text-sm);
  font-weight: var(--weight-black);
  color: var(--text-strong);
}
.dt-testimonial footer span {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ---------- desde el blog ---------- */
.dt-fromblog__title {
  margin: 0;
  font: var(--type-h2);
}
.dt-fromblog__grid {
  display: grid;
  gap: var(--gap-cards);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
}
.dt-fromblog__grid > li {
  margin: 0;
}
.dt-fromblog__card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-control);
}
.dt-fromblog__card:hover {
  border-color: var(--border-brand);
  box-shadow: var(--shadow-md);
}
.dt-fromblog__date {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.dt-fromblog__posttitle {
  margin: var(--space-2) 0 0;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  font-weight: var(--weight-bold);
}
.dt-fromblog__posttitle a {
  color: var(--text-strong);
  text-decoration: none;
}
.dt-fromblog__posttitle a:hover {
  color: var(--accent-ink);
}
.dt-fromblog__more {
  margin: var(--space-6) 0 0;
}
.dt-fromblog__more a {
  color: var(--accent-ink);
  font-weight: var(--weight-bold);
}

/* ---------- CTA bar (DS CTABar) ---------- */
.dt-ctabar {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-8);
}
.dt-ctabar__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  flex: none;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-brand);
  color: var(--accent-ink);
}
.dt-ctabar__copy {
  flex: 1 1 260px;
}
.dt-ctabar__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-md);
  letter-spacing: -0.014em;
  color: var(--text-strong);
}
.dt-ctabar__text {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  max-width: 44ch;
}
.dt-ctabar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.dt-ctabar .dt-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}