/**
 * DERMAMEDIC INTERNATIONAL — light companion (extends dermamedic-landing.css)
 * Mobile-first: every rule below assumes a small screen by default; desktop
 * only gets extra columns/spacing/ornaments inside `@media (min-width: 901px)`.
 * Ivory / white canvas, emerald for headings, gold as the star accent.
 */

/* Display titles: geometricPrecision keeps Bebas Neue edges crisp when scaled
   (default optimizeLegibility can soften large display faces on Windows). */
.dm-page .dm-title,
.dm-page .dm-landing-hero-title,
.dm-page .dm-btn {
    text-rendering: geometricPrecision;
}

/* Small uppercase eyebrow label (see .dm-page .dm-script for taglines —
   this is for the brief's longer ALL-CAPS section labels). */
.dm-page .dm-kicker {
    margin: 0 0 8px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #7E5A3A;
}

.dm-closing .dm-kicker { text-align: center; }
.dm-section-emerald .dm-kicker { color: #F7CB8B; }

/* Give the plain sections a touch of gold sparkle instead of flat color */
.dm-section-white {
    background:
        radial-gradient(760px 420px at 14% 0%, rgba(247, 203, 139, 0.16), transparent 55%),
        #ffffff;
}

.dm-section-ivory {
    background:
        radial-gradient(760px 420px at 86% 100%, rgba(247, 203, 139, 0.22), transparent 55%),
        #E7DFC8;
}

/* Gold-forward section — the centerpiece moments (method, plans, testimonials) */
.dm-section-gold {
    background:
        radial-gradient(1000px 480px at 50% -10%, rgba(247, 203, 139, 0.4), transparent 60%),
        linear-gradient(160deg, #fbf3e3 0%, #f5e8c9 55%, #efdfb8 100%);
}

.dm-section-gold .dm-subtitle { color: #6b5a3f; }

/* Comfortable mobile section rhythm; desktop restores the generous spacing
   defined upstream in dermamedic-landing.css. */
.dm-page .dm-section {
    padding: 56px 20px;
}

.dm-page .dm-section-head {
    margin-bottom: 30px;
}

/* Hero photography — always the full 4K WebP (~429 KB). Smaller variants
   looked soft on mobile because cover-scaling a 16:9 shot into a tall 100vh
   hero needs height resolution; the master already caches well and is light
   enough to ship everywhere. JPEG is only a rare non-WebP fallback. */
.dm-page .dm-landing-hero {
    --dm-hero-overlay:
        linear-gradient(180deg, rgba(10, 32, 33, 0.1) 0%, rgba(10, 32, 33, 0.35) 55%, rgba(8, 26, 27, 0.72) 100%),
        radial-gradient(900px 520px at 78% 18%, rgba(247, 203, 139, 0.16), transparent 55%);
    background-image:
        var(--dm-hero-overlay),
        var(--dm-hero-3840, var(--dm-hero-fallback));
    background-size: auto, auto, cover;
    background-position: center, center, 72% 22%;
    background-repeat: no-repeat, no-repeat, no-repeat;
}

.dm-page .dm-landing-hero::before { display: none; }

/* Hero copy takes the full width on mobile; the base theme's 50% max-width
   is a desktop-only refinement. */
.dm-page .dm-landing-hero-copy {
    max-width: 100%;
}

.dm-landing-hero-indicators {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 24px;
}

.dm-landing-hero-indicators li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}

.dm-landing-hero-indicators li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #F7CB8B;
    box-shadow: 0 0 10px rgba(247, 203, 139, 0.7);
    flex: none;
}

/* Trust bar — light ivory band right under the emerald hero */
.dm-trustbar {
    padding: 22px 20px;
    background: linear-gradient(180deg, #f7f1e2 0%, #efe4c8 100%);
    border-top: 1px solid rgba(126, 90, 58, 0.3);
    border-bottom: 1px solid rgba(126, 90, 58, 0.3);
}

.dm-trustbar-inner {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.dm-trustbar-text {
    margin: 0;
    max-width: 34em;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.6;
    color: #5c6d6d;
}

.dm-trustbar-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 0;
    padding: 0;
}

.dm-trustbar-list li {
    list-style: none;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #7E5A3A;
    white-space: nowrap;
}

/* Dimension cards */
.dm-dimensions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: rgba(126, 90, 58, 0.3);
    border: 1px solid rgba(126, 90, 58, 0.3);
}

.dm-dimension-card {
    background: linear-gradient(165deg, #ffffff 0%, #faf5ea 100%);
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dm-dimension-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.dm-dimension-code {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px;
    color: #7E5A3A;
}

.dm-dimension-name {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #6b7c7c;
}

.dm-dimension-title {
    margin: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 23px;
    text-transform: uppercase;
    color: #195E5F;
}

.dm-dimension-text {
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.7;
    color: #4d5f5f;
}

.dm-dimension-areas-label,
.dm-dimension-clarification-label {
    margin: 6px 0 0;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #7E5A3A;
}

.dm-dimension-areas,
.dm-dimension-clarifications {
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 7px 10px;
}

.dm-dimension-areas li,
.dm-dimension-clarifications li {
    list-style: none;
    font-size: 12px;
    color: #4d5f5f;
}

.dm-dimension-areas li::before { content: '— '; color: #7E5A3A; }
.dm-dimension-clarifications li::before { content: '✕ '; color: #a6654c; }

.dm-dimension-highlight {
    margin: 4px 0 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 17px;
    color: #195E5F;
}

.dm-section-emerald .dm-dimension-highlight { color: #F7CB8B; }

.dm-dimension-cta {
    margin-top: auto;
    padding-top: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #7E5A3A;
    text-decoration: none;
}

.dm-dimension-cta:hover { color: #124849; }

/* Journeys / step grids — used both on light (international steps) and
   on the dark emerald signature-journey section, so both variants exist. */
.dm-journey {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid rgba(126, 90, 58, 0.3);
    border-bottom: 1px solid rgba(126, 90, 58, 0.3);
}

.dm-journey-item {
    padding: 24px 20px;
    border-right: 0;
    border-bottom: 1px solid rgba(126, 90, 58, 0.22);
}

.dm-journey-item:last-child { border-bottom: 0; }

.dm-journey-num {
    display: block;
    margin-bottom: 10px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px;
    color: #7E5A3A;
}

.dm-journey-title {
    margin: 0 0 6px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    text-transform: uppercase;
    color: #195E5F;
}

.dm-journey-text {
    margin: 0;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.6;
    color: #5c6d6d;
}

.dm-section-emerald .dm-journey {
    border-top-color: rgba(247, 203, 139, 0.3);
    border-bottom-color: rgba(247, 203, 139, 0.3);
}
.dm-section-emerald .dm-journey-item { border-color: rgba(247, 203, 139, 0.22); }
.dm-section-emerald .dm-journey-num { color: #F7CB8B; }
.dm-section-emerald .dm-journey-title { color: #fff; }
.dm-section-emerald .dm-journey-text { color: rgba(255, 255, 255, 0.72); }

/* Plan tiers */
.dm-plans {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.dm-plan-card {
    background: linear-gradient(160deg, #ffffff 0%, #fbf6ec 100%);
    border: 1px solid rgba(126, 90, 58, 0.3);
    padding: 26px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    box-shadow: 0 18px 40px rgba(126, 90, 58, 0.08);
}

.dm-plan-card.is-featured {
    border-color: rgba(126, 90, 58, 0.55);
    background: linear-gradient(160deg, #fff9ee 0%, #f7ecd4 100%);
}

.dm-plan-card::before {
    content: '';
    position: absolute;
    top: 0; left: 24px; right: 24px; height: 2px;
    background: linear-gradient(105deg, #7E5A3A, #F7CB8B, #7E5A3A);
}

.dm-plan-name {
    margin: 4px 0 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    color: #7E5A3A;
}

.dm-plan-text {
    margin: 0;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.65;
    color: #4d5f5f;
}

.dm-plan-items-label {
    margin: 4px 0 0;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #7E5A3A;
}

.dm-plan-items { margin: 4px 0 0; padding: 0; }
.dm-plan-items li {
    list-style: none;
    font-size: 12px;
    color: #4d5f5f;
    padding: 4px 0;
    border-bottom: 1px solid rgba(126, 90, 58, 0.14);
}
.dm-plan-items li:last-child { border-bottom: 0; }

.dm-plan-ideal {
    margin: 6px 0 0;
    font-size: 12px;
    font-style: italic;
    color: #6b7c7c;
}

.dm-plan-clarification {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.6;
    color: #7E5A3A;
    border-left: 2px solid rgba(126, 90, 58, 0.4);
    padding-left: 10px;
}

.dm-plan-cta { margin-top: auto; }

/* Naturalness section */
.dm-natural-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px 32px;
    margin: 8px 0 0;
    padding: 0;
}

.dm-natural-grid li {
    list-style: none;
    font-size: 13px;
    color: #3d4f4f;
    padding: 8px 0;
    border-bottom: 1px solid rgba(126, 90, 58, 0.2);
}

/* Capture form — a light panel that pops against the dark emerald section */
.dm-form-wrap {
    background: linear-gradient(160deg, #ffffff 0%, #faf5ea 100%);
    border: 1px solid rgba(126, 90, 58, 0.3);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    padding: 24px 18px;
}

.dm-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 16px;
}

.dm-form-grid .dm-field-full { grid-column: 1 / -1; }

.dm-field { display: flex; flex-direction: column; gap: 6px; }

.dm-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #6b7c7c;
    min-height: 27px;
    display: flex;
    align-items: flex-end;
    line-height: 1.3;
}

.dm-input,
.dm-select,
.dm-textarea {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-bottom: 1px solid rgba(25, 94, 95, 0.25);
    background: transparent;
    color: #2a3d3d;
    padding: 0 2px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    outline: 0;
    box-sizing: border-box;
}

.dm-select { -webkit-appearance: none; appearance: none; background-color: transparent; }

.dm-textarea { min-height: 96px; padding: 10px 2px; resize: vertical; }

.dm-input::placeholder,
.dm-textarea::placeholder { color: #9aa8a8; }

.dm-input:focus,
.dm-select:focus,
.dm-textarea:focus { border-bottom-color: #7E5A3A; }

.dm-field-combo {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.dm-field-combo .dm-select-code {
    flex: 0 0 128px;
    min-width: 0;
    padding-right: 0;
}

.dm-field-combo .dm-input {
    flex: 1 1 auto;
    min-width: 0;
}

.dm-file-input {
    width: 100%;
    font-size: 12px;
    color: #6b7c7c;
}

.dm-checkbox-group { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 4px; }

.dm-checkbox-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #3d4f4f;
    border: 1px solid rgba(25, 94, 95, 0.2);
    padding: 9px 12px;
    cursor: pointer;
}

.dm-checkbox-pill input { accent-color: #7E5A3A; }

.dm-consents { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }

.dm-consent-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 12px;
    line-height: 1.55;
    color: #4d5f5f;
}

.dm-consent-row input { margin-top: 3px; accent-color: #7E5A3A; flex: none; }

.dm-form-note {
    margin: 16px 0 0;
    font-size: 11px;
    color: #8a9494;
}

.dm-form-actions { margin-top: 22px; }

.dm-form-confirmation {
    display: none;
    margin-top: 20px;
    padding: 16px 18px;
    border: 1px solid rgba(126, 90, 58, 0.4);
    background: rgba(247, 203, 139, 0.16);
    color: #124849;
    font-size: 13px;
}

.dm-form-confirmation.is-visible { display: block; }

.dm-form-section-title {
    margin: 24px 0 6px;
    padding-top: 16px;
    border-top: 1px solid rgba(25, 94, 95, 0.14);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    color: #7E5A3A;
}

.dm-form-section-title:first-child,
#form-optional-fields > .dm-form-section-title:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* Date fields: our own MM/DD/YYYY overlay (native rendering follows OS/
   browser locale and can't be forced to a fixed format otherwise), and a
   click anywhere on the control opens the native picker. ----------------- */
.dm-date-field {
    position: relative;
    cursor: pointer;
}

.dm-date-input {
    position: relative;
    z-index: 2;
    color: transparent;
    cursor: pointer;
}

.dm-date-input::-webkit-datetime-edit,
.dm-date-input::-webkit-datetime-edit-fields-wrapper { color: transparent; }

.dm-date-display {
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #2a3d3d;
}

.dm-date-display.is-empty { color: #9aa8a8; }

.dm-section-emerald .dm-date-display { color: #2a3d3d; }

/* Team */
.dm-team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.dm-team-card {
    border: 1px solid rgba(126, 90, 58, 0.25);
    background: #fff;
    padding: 20px;
    display: flex;
    gap: 16px;
    box-shadow: 0 14px 34px rgba(25, 94, 95, 0.06);
}

.dm-team-avatar {
    flex: none;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(247, 203, 139, 0.35), rgba(255, 255, 255, 0.9));
    border: 1px solid rgba(126, 90, 58, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 11px;
    text-align: center;
    color: #7E5A3A;
}

.dm-team-name {
    margin: 0 0 2px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 17px;
    color: #195E5F;
}

.dm-team-role {
    margin: 0 0 10px;
    font-size: 11px;
    text-transform: uppercase;
    color: #7E5A3A;
}

.dm-team-meta { margin: 0; padding: 0; font-size: 12px; color: #6b7c7c; line-height: 1.7; }
.dm-team-meta li { list-style: none; }

.dm-team-body { display: flex; flex-direction: column; gap: 4px; }
.dm-team-body .dm-team-meta { margin-top: 8px; }

.dm-placeholder-note {
    margin-top: 16px;
    font-size: 11px;
    color: #8a9494;
    font-style: italic;
}

/* Gallery — light "photo" placeholders on the ivory section */
.dm-gallery-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 20px;
    padding: 0;
}

.dm-gallery-filters li {
    list-style: none;
    font-size: 11px;
    text-transform: uppercase;
    color: #7E5A3A;
    border: 1px solid rgba(126, 90, 58, 0.4);
    background: rgba(255, 255, 255, 0.5);
    padding: 7px 14px;
}

.dm-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.dm-gallery-slot {
    aspect-ratio: 3 / 4;
    background: #fff;
    border: 1px dashed rgba(126, 90, 58, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a6874e;
    font-size: 10px;
    text-transform: uppercase;
    text-align: center;
    padding: 10px;
}

.dm-gallery-extra { display: none; }
.dm-gallery-grid.is-expanded .dm-gallery-extra { display: flex; }

/* Testimonials */
.dm-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.dm-testimonial-card {
    border: 1px solid rgba(126, 90, 58, 0.3);
    padding: 22px;
    background: #fff;
}

.dm-testimonial-quote {
    margin: 0 0 14px;
    font-size: 15px;
    font-style: italic;
    line-height: 1.7;
    color: #2a3d3d;
}

.dm-testimonial-quote::before { content: '\201C'; color: #7E5A3A; }
.dm-testimonial-quote::after { content: '\201D'; color: #7E5A3A; }

.dm-testimonial-author {
    margin: 0;
    font-size: 11px;
    text-transform: uppercase;
    color: #6b7c7c;
}

/* FAQ accordion */
.dm-faq-list { border-top: 1px solid rgba(126, 90, 58, 0.3); }

.dm-faq-item { border-bottom: 1px solid rgba(126, 90, 58, 0.3); }

.dm-faq-extra { display: none; }
.dm-faq-list.is-expanded .dm-faq-extra { display: block; }

.dm-faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: none;
    border: 0;
    padding: 18px 2px;
    text-align: left;
    cursor: pointer;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    color: #195E5F;
}

.dm-faq-question:hover { color: #7E5A3A; }

.dm-faq-icon {
    flex: none;
    font-family: Georgia, serif;
    font-size: 20px;
    color: #7E5A3A;
    transition: transform .2s ease;
}

.dm-faq-item.is-open .dm-faq-icon { transform: rotate(45deg); }

.dm-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
}

.dm-faq-answer-inner {
    padding: 0 2px 18px;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.7;
    color: #5c6d6d;
    max-width: 46em;
}

/* Dark-emerald contrast overrides for reused light components ------------- */
.dm-section-emerald .dm-faq-item { border-bottom-color: rgba(247, 203, 139, 0.3); }
.dm-section-emerald .dm-faq-list { border-top-color: rgba(247, 203, 139, 0.3); }
.dm-section-emerald .dm-faq-question { color: #fff; }
.dm-section-emerald .dm-faq-question:hover { color: #F7CB8B; }
.dm-section-emerald .dm-faq-icon { color: #F7CB8B; }
.dm-section-emerald .dm-faq-answer-inner { color: rgba(255, 255, 255, 0.75); }
.dm-section-emerald .dm-toggle-btn { color: #F7CB8B; }
.dm-section-emerald .dm-form-note { color: rgba(255, 255, 255, 0.6); }

/* Ghost buttons sitting directly on the dark emerald background (Signature,
   Location, CTA final) were rendering near-invisible: the base .dm-btn-ghost
   variant is tuned for light backgrounds (dark emerald border/text). */
.dm-section-emerald .dm-btn-ghost {
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
}

.dm-section-emerald .dm-btn-ghost:hover {
    border-color: #F7CB8B;
    color: #F7CB8B;
    background: rgba(255, 255, 255, 0.1);
}

/* Safety */
.dm-safety-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px 30px;
    margin: 16px 0 0;
    padding: 0;
}

.dm-safety-list li {
    list-style: none;
    font-size: 13px;
    color: #3d4f4f;
    padding: 7px 0;
    border-bottom: 1px solid rgba(126, 90, 58, 0.18);
}

/* Location */
.dm-location-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
}

.dm-location-info dt {
    margin: 14px 0 2px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #F7CB8B;
}

.dm-location-info dt:first-child { margin-top: 0; }

.dm-location-info dd {
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    color: #fff;
    line-height: 1.6;
}

.dm-map-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 1px solid rgba(247, 203, 139, 0.4);
    background: #fff;
    overflow: hidden;
}

.dm-map-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.dm-map-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 20px;
}

.dm-map-placeholder-icon {
    font-size: 30px;
    color: #7E5A3A;
}

.dm-map-frame.is-loaded .dm-map-placeholder { display: none; }

/* WhatsApp floating button (mobile) — brand green stays regardless of theme */
.dm-whatsapp-float {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    height: 50px;
    border-radius: 999px;
    background: linear-gradient(105deg, #1f7a4d, #29c96b);
    color: #06170f;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.dm-whatsapp-float:hover { filter: brightness(1.05); color: #06170f; }

/* Footer disclaimer — continues the dark emerald footer band */
.dm-footer-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.dm-footer-disclaimer {
    padding: 20px;
    background: linear-gradient(180deg, #124849 0%, #0f3536 100%);
    border-top: 1px solid rgba(247, 203, 139, 0.25);
    font-size: 11px;
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.65);
    max-width: none;
    margin: 0;
}

.dm-footer-disclaimer p { max-width: 1120px; margin: 0 auto 10px; }
.dm-footer-disclaimer p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Desktop/mobile copy swap helpers — mobile shows the .dm-show-mobile*
   variants by default; desktop swaps to the .dm-hide-mobile* long-form copy.
   ========================================================================== */
.dm-hide-mobile,
.dm-hide-mobile-inline,
.dm-hero-lead-desktop,
.dm-hero-indicators-desktop { display: none; }

.dm-show-mobile,
.dm-hero-lead-mobile,
.dm-hero-indicators-mobile,
.dm-natural-mobile { display: block; }

.dm-show-mobile-flex,
ul.dm-show-mobile-flex { display: flex; }

.dm-step-accordion-mobile { display: block; }

.dm-hero-line { display: block; }
.dm-hero-secondary { display: none; }

.dm-hero-indicators-mobile {
    margin: 20px 0 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
}

/* Idea central — quiet statement strip between hero and positioning */
.dm-idea-central {
    max-width: 760px;
    margin: 0 auto;
    padding: 26px 20px;
    text-align: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: #195E5F;
    background: #fff;
}

/* Signature: subtitle under the title */
.dm-signature-subtitle {
    margin: 6px 0 0;
    font-size: 15px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.78);
}

/* Treatments (ácido hialurónico, toxina, bioestimuladores, rinomodelación) */
.dm-treatments-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: rgba(126, 90, 58, 0.3);
    border: 1px solid rgba(126, 90, 58, 0.3);
}

.dm-treatment-card {
    background: linear-gradient(165deg, #ffffff 0%, #faf5ea 100%);
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dm-treatment-title {
    margin: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 19px;
    color: #195E5F;
}

.dm-treatment-text {
    margin: 0;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.65;
    color: #4d5f5f;
}

.dm-treatment-microtext {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.6;
    color: #7E5A3A;
}

/* Equipo médico — profile cards */
.dm-team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 28px;
}

.dm-team-card {
    display: flex;
    gap: 16px;
    padding: 22px 20px;
    background: linear-gradient(165deg, #ffffff 0%, #faf5ea 100%);
    border: 1px solid rgba(126, 90, 58, 0.22);
}

.dm-team-avatar {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(25, 94, 95, 0.08);
    color: #195E5F;
}

.dm-team-body { flex: 1; min-width: 0; }

.dm-team-name {
    margin: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    color: #195E5F;
}

.dm-team-role {
    margin: 4px 0 10px;
    font-size: 12.5px;
    font-weight: 300;
    color: #4d5f5f;
}

.dm-team-meta {
    margin: 10px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid rgba(126, 90, 58, 0.2);
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #4d5f5f;
}

/* Generic "Ver más / Read more" toggle (dimensions, treatments, team, form).
   Mobile-only affordance; desktop shows everything expanded, no button. */
.dm-toggle-btn {
    display: inline-flex;
    align-self: flex-start;
    margin: 2px 0 0;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #7E5A3A;
    text-decoration: underline;
}

.dm-form-optional-toggle { margin: 6px 0 20px; }

.dm-toggle-target { display: block; }
.dm-toggle-target[hidden] { display: none; }

/* Confianza institucional — verifiable list */
.dm-trust-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 16px 0 0;
    padding: 0;
}

.dm-trust-list li {
    list-style: none;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #7E5A3A;
    padding: 8px 0;
    border-bottom: 1px solid rgba(126, 90, 58, 0.2);
}

/* Fixed, shrinking header (international page only) ----------------------- */
.dm-page .dm-topbar {
    position: fixed;
    padding: 16px 20px;
    background: rgba(15, 53, 54, 0.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(247, 203, 139, 0.14);
    transition: padding .25s ease, background .25s ease;
}

.dm-page .dm-topbar.is-scrolled {
    padding-top: 10px;
    padding-bottom: 10px;
    background: rgba(10, 41, 42, 0.96);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.dm-page .dm-topbar-logo { height: 34px; width: auto; }
.dm-page .dm-topbar.is-scrolled .dm-topbar-logo { height: 28px; }

.dm-page .dm-topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
    z-index: 2;
}

.dm-page .dm-topbar-logo-mark {
    width: 40px;
    height: 40px;
    max-width: 40px;
    object-fit: contain;
}

.dm-page .dm-topbar.is-scrolled .dm-topbar-logo-mark {
    width: 32px;
    height: 32px;
    max-width: 32px;
}

.dm-page .dm-topbar-tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(247, 203, 139, 0.88);
    white-space: nowrap;
}

.dm-page .dm-section,
.dm-page .dm-landing-hero,
.dm-page .dm-closing { scroll-margin-top: 76px; }

.dm-page .dm-landing-hero {
    padding-top: 100px;
    padding-bottom: 60px;
}

/* Mobile topbar only shows the CTA button between the logo and the
   hamburger — center it with insets (no translate) so the label stays
   sharp on Windows, where transform layers soften glyphs. */
.dm-page .dm-topbar-nav {
    position: absolute;
    inset: 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    pointer-events: none;
}

.dm-page .dm-topbar-nav > * {
    pointer-events: auto;
}

/* Mobile nav toggle + drawer */
.dm-nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 34px;
    height: 34px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
}

.dm-nav-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: #F7CB8B;
}

.dm-mobile-nav {
    display: none;
    flex-direction: column;
    gap: 4px;
    position: fixed;
    top: 62px;
    right: 14px;
    left: 14px;
    z-index: 30;
    background: rgba(10, 41, 42, 0.97);
    border: 1px solid rgba(247, 203, 139, 0.3);
    padding: 10px 16px;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
}

.dm-topbar.is-nav-open .dm-mobile-nav { display: flex; }

.dm-mobile-nav a {
    padding: 13px 2px;
    border-bottom: 1px solid rgba(247, 203, 139, 0.14);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.dm-mobile-nav a:last-child,
.dm-mobile-nav .dm-lang-switch { border-bottom: 0; }

.dm-mobile-nav .dm-lang-switch {
    padding: 13px 2px 6px;
    display: flex;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
}

.dm-mobile-nav .dm-lang-switch a { padding: 0; border-bottom: 0; color: rgba(255, 255, 255, 0.55); }
.dm-mobile-nav .dm-lang-switch a.is-active { color: #F7CB8B; }

/* On mobile the language switch already lives in the drawer (.dm-mobile-nav
   .dm-lang-switch below) — hiding it here removes the stray "|" that was
   throwing the centered CTA button off balance in the topbar. */
.dm-topbar-nav .dm-lang-switch { display: none; }

/* Desktop topbar lang switch — the wrapping <span> inherits the body's
   larger line-height by default, which sits its "ES | EN" text lower than
   the sibling nav links; match their box exactly so it lines up. */
.dm-topbar-nav .dm-lang-switch {
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.dm-topbar-nav .dm-lang-switch a {
    padding-bottom: 3px;
    color: rgba(255, 255, 255, 0.55);
}

.dm-topbar-nav .dm-lang-switch a.is-active {
    color: #F7CB8B;
    border-bottom-color: rgba(247, 203, 139, 0.7);
}

.dm-topbar-nav .dm-lang-switch span { color: rgba(255, 255, 255, 0.35); }

/* Respect reduced-motion preferences and keep mobile lightweight --------- */
@media (prefers-reduced-motion: reduce) {
    .dm-reveal,
    .dm-topbar {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

.dm-reveal { transition-duration: .35s; }

/* ==========================================================================
   Desktop enhancements (≥901px): extra columns, the hero ornament, wider
   copy blocks, restored section spacing and the long-form copy swap.
   ========================================================================== */
@media (min-width: 901px) {
    .dm-page .dm-section {
        padding: 96px 48px;
    }

    .dm-page .dm-section-head {
        margin-bottom: 48px;
    }

    .dm-page .dm-landing-hero {
        padding-top: 0;
        padding-bottom: 72px;
    }

    .dm-page .dm-landing-hero-copy {
        max-width: 50%;
    }

    .dm-page .dm-topbar {
        padding: 22px 48px;
    }

    .dm-page .dm-topbar.is-scrolled {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .dm-page .dm-topbar-logo { height: 42px; }
    .dm-page .dm-topbar.is-scrolled .dm-topbar-logo { height: 32px; }

    .dm-page .dm-topbar-logo-mark {
        width: 44px;
        height: 44px;
        max-width: 44px;
    }

    .dm-page .dm-topbar.is-scrolled .dm-topbar-logo-mark {
        width: 34px;
        height: 34px;
        max-width: 34px;
    }

    .dm-page .dm-section,
    .dm-page .dm-landing-hero,
    .dm-page .dm-closing { scroll-margin-top: 88px; }

    .dm-nav-toggle,
    .dm-mobile-nav { display: none !important; }

    .dm-topbar-nav .dm-lang-switch { display: inline-flex; }

    .dm-page .dm-topbar-nav {
        position: static;
        transform: none;
    }

    .dm-whatsapp-float { display: none; }

    /* Long-form desktop copy replaces the mobile-first summaries */
    .dm-hide-mobile,
    .dm-hide-mobile-inline,
    .dm-hero-lead-desktop { display: block; }

    .dm-hero-indicators-desktop { display: flex; }

    .dm-show-mobile,
    .dm-hero-lead-mobile,
    .dm-hero-indicators-mobile,
    .dm-natural-mobile,
    .dm-step-accordion-mobile { display: none; }

    /* .dm-actions carries its own `display: flex` at higher specificity
       than the plain .dm-show-mobile rule above — match it explicitly so
       "ver más / ver todas" mobile-only triggers actually hide on desktop. */
    .dm-page .dm-actions.dm-show-mobile { display: none; }

    .dm-show-mobile-flex,
    ul.dm-show-mobile-flex { display: none; }

    .dm-hero-secondary { display: inline-flex; }

    /* Toggle buttons only make sense as a mobile progressive-disclosure
       affordance; desktop shows everything expanded. */
    .dm-toggle-btn { display: none; }
    .dm-toggle-target[hidden] { display: block; }

    .dm-gallery-extra { display: flex; }
    .dm-faq-extra { display: block; }

    /* Grids gain their columns back */
    .dm-dimensions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dm-dimension-card { padding: 40px 36px; }
    .dm-dimension-code { font-size: 30px; }
    .dm-dimension-title { font-size: 26px; }

    .dm-journey { grid-template-columns: repeat(3, 1fr); }
    .dm-journey-item {
        padding: 32px 26px;
        border-right: 1px solid rgba(126, 90, 58, 0.22);
        border-bottom: 1px solid rgba(126, 90, 58, 0.22);
    }
    .dm-journey-item:nth-child(3n) { border-right: 0; }
    .dm-section-emerald .dm-journey-item { border-color: rgba(247, 203, 139, 0.22); }

    .dm-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .dm-plan-card { padding: 32px 28px; }
    .dm-plan-name { font-size: 26px; }

    .dm-natural-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; }

    .dm-form-wrap { padding: 44px; }
    .dm-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin-top: 20px; }
    .dm-form-section-title { margin: 30px 0 6px; padding-top: 18px; }

    .dm-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .dm-team-card { padding: 26px; gap: 20px; }
    .dm-team-avatar { width: 84px; height: 84px; font-size: 12px; }
    .dm-team-name { font-size: 18px; }

    .dm-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .dm-testimonials-grid { gap: 20px; }
    .dm-testimonial-card { padding: 28px; }

    .dm-safety-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 30px; }

    .dm-location-grid { grid-template-columns: 1fr 1fr; gap: 40px; }

    .dm-trustbar { padding: 30px 48px; }
    .dm-trustbar-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 22px 32px; }

    .dm-treatments-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .dm-treatment-card { padding: 30px 24px; }
    .dm-treatment-title { font-size: 21px; }

    .dm-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
    .dm-team-card { padding: 28px 26px; }

    .dm-idea-central { font-size: 19px; padding: 34px 24px; }

    .dm-footer-disclaimer { padding: 22px 48px; }
}