/* ============================================================
   DISTRIFARMA — Estilos del sitio (clases para el tema WordPress)
   Porte en CSS del design system (botones, tarjetas, layout, header/footer).
   ============================================================ */

/* ---------- Layout primitives ---------- */
.df-container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.df-container--narrow { max-width: var(--container-narrow); }
.df-section { padding: var(--section-y) 0; position: relative; }
.df-section--subtle { background: var(--surface-subtle); }
.df-section--deep { background: var(--grad-deep); color: var(--text-on-dark); }
.df-section--petrol { background: var(--surface-petrol); color: var(--text-on-dark); }
.df-section--trust { background: var(--surface-trust); }
.df-section--deep h1, .df-section--deep h2, .df-section--deep h3, .df-section--petrol h1, .df-section--petrol h2 { color: #fff; }

.df-kicker { font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--brand-secondary); margin-bottom: 14px; display: block; }
.df-kicker--on-dark { color: var(--petrol-100); }

.df-lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-muted); }
.df-grid { display: grid; gap: 18px; }
.df-flex { display: flex; }
.df-eyebrow-tag { display:inline-block; font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: .1em; text-transform: uppercase; color: var(--brand-secondary); }

/* ---------- Buttons ---------- */
.df-btn { -webkit-tap-highlight-color: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: var(--control-h); padding: 0 22px; font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: 1; letter-spacing: .005em; border-radius: var(--radius-md); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease); }
.df-btn svg { width: 18px; height: 18px; }
.df-btn:hover { transform: translateY(-1px); text-decoration: none; }
.df-btn:active { transform: translateY(0) scale(.985); }
.df-btn--sm { height: var(--control-h-sm); padding: 0 16px; font-size: var(--fs-sm); }
.df-btn--lg { height: var(--control-h-lg); padding: 0 30px; font-size: var(--fs-h5); }
.df-btn--block { display: flex; width: 100%; }
.df-btn--cta { background: var(--brand-cta); color: #fff; box-shadow: var(--shadow-cta); }
.df-btn--cta:hover { background: var(--brand-cta-hover); color:#fff; box-shadow: 0 10px 24px -6px rgba(217,85,26,.5); }
.df-btn--primary { background: var(--brand-primary); color: #fff; }
.df-btn--primary:hover { background: var(--blue-800); color:#fff; }
.df-btn--secondary { background: var(--petrol-700); color: #fff; }
.df-btn--secondary:hover { background: var(--petrol-600); color:#fff; }
.df-btn--outline { background: transparent; color: var(--brand-primary-2); border-color: var(--border-strong); }
.df-btn--outline:hover { border-color: var(--brand-primary-2); background: var(--blue-50); }
.df-btn--ghost { background: transparent; color: var(--brand-primary-2); }
.df-btn--ghost:hover { background: var(--blue-50); }
.df-btn--on-dark { background: rgba(255,255,255,.10); color: var(--text-on-dark); border-color: var(--border-on-dark); }
.df-btn--on-dark:hover { background: rgba(255,255,255,.18); color:#fff; }
.df-btn--wa { background: var(--green-600); color: #fff; }
.df-btn--wa:hover { background: var(--green-700); color:#fff; }

/* ---------- Badges ---------- */
.df-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .03em; padding: 5px 11px; border-radius: var(--radius-pill); white-space: nowrap; }
.df-badge__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.df-badge--trust { background: var(--green-50); color: var(--green-700); } .df-badge--trust .df-badge__dot { background: var(--green-600); }
.df-badge--info { background: var(--blue-50); color: var(--blue-700); } .df-badge--info .df-badge__dot { background: var(--blue-600); }
.df-badge--petrol { background: var(--petrol-50); color: var(--petrol-700); } .df-badge--petrol .df-badge__dot { background: var(--petrol-600); }
.df-badge--accent { background: var(--amber-100); color: #8A5A00; } .df-badge--accent .df-badge__dot { background: var(--amber-500); }
.df-badge--neutral { background: var(--mist); color: var(--slate-700); } .df-badge--neutral .df-badge__dot { background: var(--slate-500); }
.df-badge--on-dark { background: rgba(255,255,255,.12); color: var(--text-on-dark); } .df-badge--on-dark .df-badge__dot { background: var(--green-500); }

/* ---------- Cards ---------- */
.df-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6); }
.df-card--trust { background: var(--surface-trust); border-color: var(--green-100); }
.df-card--link { transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.df-card--link:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-2px); }

/* Category card */
.df-cat { display: flex; flex-direction: column; gap: 12px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5); text-decoration: none; transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.df-cat:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-2px); text-decoration:none; }
.df-cat__ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--blue-50); color: var(--brand-primary-2); flex: none; }
.df-cat__ico svg { width: 24px; height: 24px; }
.df-cat h3, .df-cat h4 { margin: 0 0 4px; font-family: var(--font-display); font-size: var(--fs-h5); font-weight: 700; color: var(--text-strong); }
.df-cat p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-muted); }
.df-cat__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 6px; }
.df-cat__meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-faint); letter-spacing: .04em; }
.df-cat__arrow { color: var(--text-faint); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); display: inline-flex; }
.df-cat:hover .df-cat__arrow { transform: translateX(3px); color: var(--brand-cta); }

/* Stat */
.df-stat__value { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); letter-spacing: -.02em; line-height: 1; color: var(--brand-metric); }
.df-stat__value sup { font-size: .6em; }
.df-stat__label { margin-top: 8px; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.df-stat--on-dark .df-stat__label { color: var(--text-on-dark-muted); }

/* ---------- Header ---------- */
.df-topbar { background: var(--blue-950); color: var(--text-on-dark-muted); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .02em; }
.df-topbar a { color: inherit; text-decoration: none; }
.df-topbar__row { display: flex; align-items: center; justify-content: space-between; min-height: 38px; gap: 16px; flex-wrap: wrap; }
.df-topbar__row span { display: inline-flex; align-items: center; gap: 7px; }
.df-topbar svg { width: 14px; height: 14px; }

.df-header { position: sticky; top: 0; z-index: 50; }
.df-nav-wrap { background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--border); }
.df-nav { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 24px; }
.df-nav__menu { display: flex; align-items: center; gap: 4px; margin-left: auto; list-style: none; margin-block: 0; padding: 0; }
.df-nav__menu a { padding: 9px 14px; border-radius: var(--radius-sm); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; color: var(--slate-600); }
.df-nav__menu a:hover { background: var(--blue-50); color: var(--brand-primary); text-decoration:none; }
.df-nav__menu .current-menu-item > a, .df-nav__menu .current_page_item > a { color: var(--brand-primary); background: var(--blue-50); }
.df-burger { display: none; background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; color: var(--slate-700); }

/* ---------- Logo ---------- */
.df-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.df-logo svg { flex: none; }
.df-logo__text { display: flex; flex-direction: column; line-height: 1; }
.df-logo__name { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; color: var(--text-strong); }
.df-logo__sub { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-secondary); margin-top: 3px; }
.df-logo--on-dark .df-logo__name { color: var(--text-on-dark); }
.df-logo--on-dark .df-logo__sub { color: var(--text-on-dark-muted); }

/* ---------- Footer ---------- */
.df-footer { background: var(--blue-950); color: var(--text-on-dark); }
.df-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; padding-top: var(--space-10); padding-bottom: var(--space-8); }
.df-footer h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-on-dark-muted); margin: 0 0 16px; font-weight: 500; }
.df-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.df-footer a { color: var(--text-on-dark); text-decoration: none; font-size: var(--fs-sm); opacity: .85; }
.df-footer a:hover { opacity: 1; text-decoration: underline; }
.df-footer__contact li { display: flex; gap: 11px; font-size: var(--fs-sm); color: var(--text-on-dark-muted); align-items: flex-start; }
.df-footer__contact svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--petrol-100); }
.df-footer__legal { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--border-on-dark); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; color: var(--text-on-dark-muted); }
.df-footer__legal a { color: inherit; opacity: .85; }
.df-footer__cities { font-size: 13px; line-height: 1.9; color: var(--text-on-dark-muted); }
.df-footer__cities a { font-size: 13px; opacity: .8; }

/* ---------- Hero ---------- */
.df-hero { background: var(--surface-page); border-bottom: 1px solid var(--border); padding: var(--space-9) 0; }
.df-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.df-hero h1 { font-size: var(--fs-display-xl); margin: 0; color: var(--text-strong); }
.df-hero--deep { background: var(--grad-deep); color: var(--text-on-dark); border-bottom: none; }
.df-hero--deep h1 { color: #fff; }
.df-chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Photo placeholder ---------- */
.df-photo { aspect-ratio: 4 / 3; width: 100%; border-radius: var(--radius-lg); background: repeating-linear-gradient(135deg, var(--mist) 0 14px, var(--paper) 14px 28px); border: 1px dashed var(--border-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--slate-400); text-align: center; }
.df-photo--dark { background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 14px, rgba(255,255,255,.02) 14px 28px), var(--petrol-900); border-color: var(--border-on-dark); color: var(--text-on-dark-muted); }
.df-photo span { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; padding: 0 16px; }
.df-photo svg { width: 26px; height: 26px; }

/* ---------- Trust strip ---------- */
.df-trust { background: var(--surface-subtle); border-block: 1px solid var(--border); padding: var(--space-7) 0; }
.df-trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.df-trust__item { display: flex; gap: 14px; }
.df-trust__ico { flex: none; width: 42px; height: 42px; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--border); color: var(--brand-secondary); display: flex; align-items: center; justify-content: center; }
.df-trust__ico svg { width: 20px; height: 20px; }
.df-trust__item h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text-strong); margin: 0; }
.df-trust__item p { font-size: 13.5px; line-height: 1.45; color: var(--text-muted); margin: 3px 0 0; }

/* ---------- Steps ---------- */
.df-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.df-step { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-xs); }
.df-step__n { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--brand-cta); letter-spacing: .1em; }
.df-step__ico { display: inline-flex; margin: 14px 0 12px; color: var(--brand-secondary); }
.df-step__ico svg { width: 26px; height: 26px; }
.df-step h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text-strong); margin: 0; }
.df-step p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }

/* ---------- Tables ---------- */
.df-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-xs); }
.df-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.df-table thead tr { background: var(--blue-950); color: var(--text-on-dark); }
.df-table th { text-align: left; padding: 14px 18px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.df-table td { padding: 14px 18px; border-top: 1px solid var(--border); font-size: 15px; color: var(--text-body); }
.df-table td:first-child { font-weight: 600; color: var(--text-strong); }

/* ---------- Breadcrumbs ---------- */
.df-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .02em; color: var(--text-muted); }
.df-crumbs a { color: var(--text-muted); text-decoration: none; }
.df-crumbs a:hover { color: var(--text-strong); }
.df-crumbs .sep { color: var(--slate-400); }
.df-crumbs--on-dark { color: var(--text-on-dark-muted); }
.df-crumbs--on-dark a { color: var(--text-on-dark-muted); }

/* ---------- Article / guide ---------- */
.df-prose { max-width: var(--container-narrow); }
.df-prose h2 { margin-top: 36px; }
.df-prose h3 { margin-top: 28px; }
.df-prose p, .df-prose li { font-size: 17px; line-height: 1.75; color: var(--text-body); }
.df-prose ul { padding-left: 22px; }
.df-prose li { margin-bottom: 6px; }
.df-callout { display: flex; gap: 16px; background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--radius-lg); padding: 20px 22px; margin: 28px 0; }
.df-callout svg { width: 24px; height: 24px; flex: none; color: var(--brand-primary-2); }
.df-callout h4 { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text-strong); margin: 0 0 4px; }
.df-callout p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--slate-700); }
.df-toc { position: sticky; top: 110px; }
.df-toc__title { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; }
.df-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; border-left: 2px solid var(--border); }
.df-toc a { display: block; padding-left: 16px; margin-left: -2px; border-left: 2px solid transparent; color: var(--text-muted); font-size: 14px; font-weight: 500; text-decoration: none; }
.df-toc a:hover, .df-toc a.is-active { color: var(--text-strong); border-left-color: var(--brand-cta); }

/* ---------- FAQ accordion ---------- */
.df-faq { border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; overflow: hidden; }
.df-faq + .df-faq { margin-top: 12px; }
.df-faq summary { display: flex; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--text-strong); }
.df-faq summary::-webkit-details-marker { display: none; }
.df-faq summary::after { content: "+"; margin-left: auto; font-size: 22px; color: var(--brand-secondary); font-weight: 400; }
.df-faq[open] summary::after { content: "\2212"; }
.df-faq__body { padding: 0 20px 20px; font-size: 15px; line-height: 1.6; color: var(--text-body); }

/* ---------- Coverage hub ---------- */
.df-region { margin-top: var(--space-7); }
.df-region__h { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text-strong); margin-bottom: 16px; }
.df-region__h .df-badge { margin-left: auto; }
.df-citygrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.df-citycard { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; text-decoration: none; box-shadow: var(--shadow-xs); transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.df-citycard:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-2px); text-decoration:none; }
.df-citycard__city { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text-strong); display:flex; align-items:center; gap:7px; }
.df-citycard__city svg { width: 15px; height: 15px; color: var(--brand-secondary); }
.df-citycard__dept { font-size: 13px; color: var(--text-muted); }
.df-citycard__tier { margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--brand-secondary); letter-spacing: .03em; }

/* ---------- Floating WhatsApp + mobile bar ---------- */
.df-wa-fab { position: fixed; right: 18px; bottom: 84px; z-index: 60; width: 56px; height: 56px; border-radius: 50%; background: var(--green-600); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); }
.df-wa-fab svg { width: 26px; height: 26px; }
.df-mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: none; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-top: 1px solid var(--border); padding: 10px var(--gutter); }

/* ---------- CTA band ---------- */
.df-ctaband { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; }
.df-ctaband__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Labs carousel (trust) ---------- */
.df-labs { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.df-labs__track { display: flex; align-items: center; gap: 16px; width: max-content; animation: df-marquee 40s linear infinite; }
.df-labs:hover .df-labs__track { animation-play-state: paused; }
.df-lab-link { text-decoration: none; }
.df-lab { flex: none; display: inline-flex; align-items: center; gap: 11px; height: 64px; padding: 0 22px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-pill); box-shadow: var(--shadow-xs); transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.df-lab:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-2px); }
.df-lab__logo { width: 30px; height: 30px; object-fit: contain; border-radius: 6px; flex: none; }
.df-lab__name { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--slate-700); letter-spacing: -.01em; white-space: nowrap; }
.df-lab:hover .df-lab__name { color: var(--brand-primary); }
.df-lab__badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .02em; color: var(--green-700); background: var(--green-50); padding: 3px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
.df-labs--dark .df-lab { background: rgba(255,255,255,.07); border-color: var(--border-on-dark); }
.df-labs--dark .df-lab__name { color: #fff; }
.df-labs--dark .df-lab__logo { background: #fff; padding: 2px; }
@keyframes df-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .df-labs__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } .df-labs { -webkit-mask-image: none; mask-image: none; } }

/* ---------- Forms ---------- */
.df-field { display: flex; flex-direction: column; gap: 6px; }
.df-field label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-strong); }
.df-field .req { color: var(--brand-cta); margin-left: 3px; }
.df-field .hint { font-size: var(--fs-xs); color: var(--text-muted); }
.df-input, .df-textarea, .df-select { width: 100%; height: var(--control-h); padding: 0 14px; font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-strong); background: #fff; border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.df-textarea { height: auto; min-height: 110px; padding: 12px 14px; line-height: 1.55; resize: vertical; }
.df-input:focus, .df-textarea:focus, .df-select:focus { outline: none; border-color: var(--focus-ring); box-shadow: var(--focus-shadow); }
.df-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---------- Utilities ---------- */
.df-mt-2 { margin-top: var(--space-2); } .df-mt-4 { margin-top: var(--space-4); } .df-mt-5 { margin-top: var(--space-5); } .df-mt-6 { margin-top: var(--space-6); } .df-mt-7 { margin-top: var(--space-7); }
.df-center { text-align: center; }
.df-mobile-only { display: none; }
.df-icon-inline { display: inline-flex; vertical-align: middle; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .df-footer__grid { grid-template-columns: 1fr 1fr; }
  .df-citygrid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .df-nav__menu, .df-nav .df-btn { display: none; }
  .df-burger { display: flex; }
  .df-hero__grid, .df-ctaband { grid-template-columns: 1fr; }
  .df-hero__grid { gap: 32px; }
  .df-trust__grid, .df-steps, .df-citygrid { grid-template-columns: repeat(2, 1fr); }
  .df-mobile-bar { display: block; }
  .df-toc { display: none; }
  /* Splits de layout (cuerpo+sidebar, guía+TOC, contacto) apilan en móvil.
     Sobre-escriben los grid-template-columns inline. */
  .df-grid[style*="1.4fr"], .df-grid[style*="0.28fr"], .df-grid[style*="1.3fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Sidebars sticky dejan de ser sticky al apilar. */
  .df-grid[style*="1.4fr"] aside, .df-grid[style*="1.3fr"] aside { position: static !important; }
  /* Rejillas de tarjetas: 2 columnas en tablet. */
  .df-grid[style*="repeat(4"], .df-grid[style*="repeat(3"] { grid-template-columns: 1fr 1fr !important; }
  .df-hero h1 { font-size: clamp(1.9rem, 5.5vw, 2.6rem); }
}
@media (max-width: 620px) {
  .df-trust__grid, .df-steps, .df-citygrid, .df-footer__grid, .df-form-grid { grid-template-columns: 1fr; }
  .df-hide-sm { display: none !important; }
  /* Todas las rejillas a una sola columna en teléfono. */
  .df-grid[style*="repeat(4"], .df-grid[style*="repeat(3"] { grid-template-columns: 1fr !important; }
  .df-section { padding: var(--space-8) 0; }
  .df-container { padding: 0 18px; }
  .df-hero { padding: var(--space-7) 0; }
  .df-wa-fab { bottom: 76px; }
  /* CTA band botones a ancho completo. */
  .df-ctaband__actions { width: 100%; }
  .df-ctaband__actions .df-btn { flex: 1 1 auto; }
}

/* WP admin bar offset for sticky header */
.admin-bar .df-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .df-header { top: 46px; } }