/* ====================================================================
 * DESEGURID — CONTENT CSS
 *
 * Complementary stylesheet for page content, per the design system decision.
 * The design tokens live in theme.json and, for the chrome, in chrome.css.
 *
 * Deliberately separate from chrome.css: that file is the DOM contract the
 * chrome CPT posts are built against. Changing its structure breaks the
 * sticky offset and the 1320px padding with no error reported anywhere, so
 * nothing in here reaches into the header or the footer.
 * ==================================================================== */

/* --------------------------------------------------------------------
 * SERVICE GRID — bloque dinámico dg/service-grid
 *
 * Markup: lo imprime el render_callback en inc/blocks/service-grid.php
 * (ver .dg-service-grid__placeholder en el editor). El layout vive aquí.
 * Tokens: Manual de Marca cap. 3, espejados en chrome.css.
 * -------------------------------------------------------------------- */
.dg-service-grid-container {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

.tis-frontpage-content > .dg-service-grid-container,
.tis-page-content > .dg-service-grid-container,
.entry-content > .dg-service-grid-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.dg-service-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    margin: 2rem 0 3rem 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 640px) and (max-width: 959px) {
    .dg-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

@media (min-width: 960px) {
    .dg-service-grid {
        grid-template-columns: repeat(var(--dg-grid-columns, 3), minmax(0, 1fr));
        gap: 1.75rem;
    }
}

/* Utilities para grillas responsivas canónicas */
.dg-responsive-grid-2col {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2.5rem !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

@media (min-width: 768px) {
    .dg-responsive-grid-2col {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 3.5rem !important;
    }
}

.dg-responsive-grid-3col {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.5rem !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

@media (min-width: 640px) and (max-width: 1023px) {
    .dg-responsive-grid-3col {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1024px) {
    .dg-responsive-grid-3col {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 2rem !important;
    }
}

.dg-service-grid__placeholder {
    padding: 2rem;
    border: 1px dashed var(--dg-primary-dark);
    border-radius: 8px;
    color: var(--dg-text-muted);
    text-align: center;
}

.dg-card {
    display: flex;
    flex-direction: column;
    /* Manual 5.3: rectangulos con bordes ligeramente redondeados. */
    border: 1px solid rgba(0, 72, 67, 0.12);
    border-radius: 8px;
    background: var(--dg-white);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dg-card:hover,
.dg-card:focus-within {
    border-color: var(--dg-primary);
    box-shadow: 0 8px 24px rgba(0, 72, 67, 0.12);
}

/* Media: alto FIJO por proporcion. Esto es lo que evita las tarjetas altas
 * del primer piloto: la imagen ya no empuja la altura de la tarjeta, y todas
 * quedan alineadas entre si. */
.dg-card__media {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--dg-bg-subtle);
}

.dg-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0;
    transition: transform 0.3s ease;
}

.dg-card:hover .dg-card__media img {
    transform: scale(1.04);
}

.dg-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.25rem;
}

.dg-card__title {
    font-family: var(--dg-font-sans);
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.3;
    margin: 0 0 0.5rem;
}

.dg-card__title a {
    color: var(--dg-primary-dark);
    text-decoration: none;
}

.dg-card__title a:hover {
    color: var(--dg-primary);
    text-decoration: underline;
}

.dg-card__desc {
    font-family: var(--dg-font-body);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--dg-text-muted);
    margin: 0 0 1rem;
}

.dg-card__cta {
    align-self: flex-start;
    margin-top: auto;
    font-family: var(--dg-font-sans);
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--dg-white);
    background: var(--dg-secondary);
    border-radius: 4px;
    padding: 0.55rem 1.1rem;
    text-decoration: none;
    transition: background 0.2s ease;
}

.dg-card__cta:hover {
    background: var(--dg-secondary-dark);
}

/* ---- Variante hover: la descripcion esta oculta y aparece al pasar el mouse.
 * El titulo queda siempre visible, que es lo que mantiene la tarjeta legible.
 *
 * ACCESIBILIDAD: una descripcion que solo existe en :hover es inalcanzable con
 * teclado y no existe en tactil. Por eso :focus-within la revela tambien (el
 * enlace de la tarjeta es alcanzable con Tab) y el bloque @media (hover: none)
 * la muestra siempre, porque en un telefono no existe hover. Si se quita esta
 * ultima regla, la mitad del publico no lee la descripcion. */
.dg-card--hover .dg-card__desc {
    display: none;
}

.dg-card--hover:hover .dg-card__desc,
.dg-card--hover:focus-within .dg-card__desc {
    display: block;
}

@media (hover: none) {
    .dg-card--hover .dg-card__desc {
        display: block;
    }
}

/*
 * Motion is a short fade with a 20px rise.
 *
 * These are scroll-driven, not time-based. There is no duration to set: the
 * animation's position is a function of how far the element has travelled
 * through the viewport, so "400ms" is not expressible. The perceived speed
 * comes from how much of the entry range is covered, and a short range reads
 * as quick. That is why this is 5% to 45% rather than the full entry range.
 *
 * THE GUARD IS THE POINT. Everything sits inside
 * @supports (animation-timeline: view()). Browsers without scroll-driven
 * animation support never see the animation declaration, so they render the
 * content fully visible. If the animation were declared unconditionally, those
 * browsers would apply the `from` keyframe, sit the content at opacity:0, and
 * never resolve it — the page would look empty. Production declares
 * prefers-reduced-motion in zero places, so there was no guard to inherit.
 *
 * The prefers-reduced-motion check is a second, independent guard: even in a
 * browser that supports scroll-driven animations, someone who asked the OS to
 * reduce motion gets none.
 *
 * Granularity is one section at a time, taken from the content container
 * rather than from .site-main. In this theme the markup is
 *
 *   main.site-main > div.tis-container > article > h1 + div.tis-page-content
 *
 * so .site-main has a single child and targeting it would animate the entire
 * page as one block on load. Sibling sections enter at almost the same scroll
 * position, so a heading and the paragraph under it resolve together and read
 * as one unit rather than as separate fades.
 *
 * Opt out per element with the `no-anim` class.
 * -------------------------------------------------------------------- */

@keyframes dg-rise-in {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .tis-page-content > *:not(.no-anim),
        .entry-content > *:not(.no-anim) {
            animation-name: dg-rise-in;
            animation-duration: 1ms; /* ignored when the timeline is view() */
            animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
            animation-fill-mode: both;
            animation-timeline: view();
            /* Rango mas notorio: 0% a 80% de la entrada. Antes era 5% a 45%,
             * demasiado estrecho para que el usuario percibiera el fade. */
            animation-range: entry 0% entry 80%;
        }

        /* Media should not slide: a parallax nudge on a photo or a video reads
         * as a rendering bug, and a cover block already animates on reveal. */
        .tis-page-content .wp-block-cover,
        .tis-page-content .wp-block-video,
        .tis-page-content .wp-block-image,
        .tis-page-content video,
        .tis-page-content iframe {
            animation-name: none;
        }
    }
}

/* Fallback para navegadores SIN scroll-driven animations (Firefox, Safari
 * viejos). theme.js agrega .dg-fade-pending al cargar y .dg-fade-in cuando
 * el elemento entra al viewport. El stagger via transition-delay da
 * sensacion de cascada. */
.dg-fade-pending {
    opacity: 0;
    transform: translateY(30px);
    will-change: opacity, transform;
}
.dg-fade-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
    .dg-fade-pending {
        opacity: 1;
        transform: none;
    }
    .dg-fade-in {
        transition: none;
    }
}

/* content-visibility: auto skipea el rendering (layout + paint) de cada
 * seccion que no este cerca del viewport. En paginas largas con
 * secciones pesadas (imagenes, grids), esto baja el LCP y el INP de forma
 * agresiva. contain-intrinsic-size reserva el espacio para evitar
 * layout shift cuando la seccion entra a la vista.
 * Opt-out: anadir clase no-cv a la seccion que no deba participar. */
.tis-page-content > *,
.entry-content > * {
    content-visibility: auto;
    contain-intrinsic-size: 1px 600px;
}

/* Espaciado entre secciones de las paginas migradas (renderizadas como
 * <section class="wp-block-group ..."> via tagName: section en el block
 * markup). clamp() da un padding generoso que escala suave entre
 * mobile y desktop. 5rem arriba + 5rem abajo cumple el principio
 * "generous separation" del craft floor de Impeccable.
 * Opt-out: clase tight-section. */
.tis-page-content section.wp-block-group,
.entry-content section.wp-block-group {
    padding-top: clamp(3.5rem, 6vw, 5.5rem);
    padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
}
.tis-page-content section.wp-block-group.tight-section,
.entry-content section.wp-block-group.tight-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Texto blanco automatico sobre fondos oscuros. Antes el texto heredaba
 * #333333 del theme.json styles.color.text y quedaba invisible (contraste
 * 1.2:1) si el editor olvidaba agregar style.color.text:#ffffff inline.
 * Con esta regla cualquier wrapper con has-primary-dark-background-color
 * fuerza blanco en todos sus descendientes, sin depender del inline style.
 * Reglas hijas: listas y parrafos con #fff, links usan --dg-primary-light
 * (cyan claro, contraste 9.4:1 sobre #004843). */
.tis-page-content .wp-block-group.has-primary-dark-background-color,
.entry-content .wp-block-group.has-primary-dark-background-color {
    color: #fff !important;
}
.tis-page-content .wp-block-group.has-primary-dark-background-color h1,
.tis-page-content .wp-block-group.has-primary-dark-background-color h2,
.tis-page-content .wp-block-group.has-primary-dark-background-color h3,
.tis-page-content .wp-block-group.has-primary-dark-background-color h4,
.tis-page-content .wp-block-group.has-primary-dark-background-color h5,
.tis-page-content .wp-block-group.has-primary-dark-background-color h6,
.tis-page-content .wp-block-group.has-primary-dark-background-color p,
.tis-page-content .wp-block-group.has-primary-dark-background-color li,
.entry-content .wp-block-group.has-primary-dark-background-color h1,
.entry-content .wp-block-group.has-primary-dark-background-color h2,
.entry-content .wp-block-group.has-primary-dark-background-color h3,
.entry-content .wp-block-group.has-primary-dark-background-color h4,
.entry-content .wp-block-group.has-primary-dark-background-color h5,
.entry-content .wp-block-group.has-primary-dark-background-color h6,
.entry-content .wp-block-group.has-primary-dark-background-color p,
.entry-content .wp-block-group.has-primary-dark-background-color li {
    color: #fff !important;
}
.tis-page-content .wp-block-group.has-primary-dark-background-color a,
.entry-content .wp-block-group.has-primary-dark-background-color a {
    color: var(--dg-primary-light, #AFFFF9) !important;
}

/* --------------------------------------------------------------------
 * LAYOUT CONTAINMENT & FULLWIDTH BREAKOUTS (100vw backgrounds, 1320px content)
 * -------------------------------------------------------------------- */
html, body {
    overflow-x: clip;
}

.tis-frontpage-content,
.tis-page-content,
.entry-content {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(1rem, 4vw, 2.5rem);
    padding-right: clamp(1rem, 4vw, 2.5rem);
    box-sizing: border-box;
    width: 100%;
}

/* Breakout para secciones hero y scroll de MotionKit */
.tis-frontpage-content > .tmk-hero,
.tis-frontpage-content > .tmk-scroll,
.tis-page-content > .tmk-hero,
.tis-page-content > .tmk-scroll {
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    max-width: none !important;
}

/* Breakout para fondos de sección FULLWIDTH (100vw de borde a borde) */
.tis-frontpage-content > .dg-section,
.tis-page-content > .dg-section,
.entry-content > .dg-section,
.tis-frontpage-content > section.wp-block-group,
.tis-page-content > section.wp-block-group,
.entry-content > section.wp-block-group {
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    max-width: none !important;
    box-sizing: border-box;
    padding-left: max(1.5rem, calc((100vw - 1320px) / 2)) !important;
    padding-right: max(1.5rem, calc((100vw - 1320px) / 2)) !important;
    padding-top: clamp(3.5rem, 6vw, 5.5rem);
    padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
}

/* --------------------------------------------------------------------
 * VARIACIONES DE FONDO Y TIPOGRAFÍA DE SECCIÓN
 * -------------------------------------------------------------------- */
.dg-section--light {
    background-color: #f4f8f7;
    color: #2b3938;
}

.dg-section--white {
    background-color: #ffffff;
    color: #2b3938;
}

.dg-section--dark {
    background-color: #004843;
    color: #ffffff;
}

.dg-section--dark h1,
.dg-section--dark h2,
.dg-section--dark h3,
.dg-section--dark h4,
.dg-section--dark p,
.dg-section--dark li {
    color: #ffffff !important;
}

.dg-section--accent {
    background-color: #fbf6f0;
    color: #2b3938;
}

/* Header de Sección Centrado */
.dg-section-header {
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.dg-badge {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border-radius: 50px;
    background: rgba(0, 145, 136, 0.12);
    color: var(--dg-primary, #009188);
    margin-bottom: 0.75rem;
}

.dg-section--dark .dg-badge {
    background: rgba(175, 255, 249, 0.15);
    color: #AFFFF9;
}

.dg-title {
    font-family: var(--dg-font-sans, 'Mulish', sans-serif);
    font-weight: 800;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

.dg-subtitle {
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    line-height: 1.6;
    color: var(--dg-text-muted, #596b69);
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.dg-section--dark .dg-subtitle {
    color: rgba(255, 255, 255, 0.85);
}

/* Grillas Adaptativas */
.dg-grid {
    display: grid;
    gap: 1.75rem;
}

.dg-grid--2cols {
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .dg-grid--2cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

.dg-grid--3cols {
    grid-template-columns: 1fr;
}
@media (min-width: 640px) and (max-width: 1023px) {
    .dg-grid--3cols {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .dg-grid--3cols {
        grid-template-columns: repeat(3, 1fr);
    }
}

.dg-grid--4cols {
    grid-template-columns: 1fr;
}
@media (min-width: 600px) and (max-width: 1023px) {
    .dg-grid--4cols {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .dg-grid--4cols {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --------------------------------------------------------------------
 * TARJETAS OVERLAY ESTILO ELEMENTOR (.dg-card--overlay)
 * -------------------------------------------------------------------- */
.dg-card--overlay {
    position: relative;
    min-height: 360px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--dg-primary-dark, #004843);
    border: 1px solid rgba(0, 72, 67, 0.15);
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dg-card--overlay:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 72, 67, 0.25);
}

.dg-card--overlay .dg-card__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.45s ease;
}

.dg-card--overlay:hover .dg-card__bg {
    transform: scale(1.08);
}

.dg-card--overlay .dg-card__overlay-content {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding: 1.5rem;
    background: linear-gradient(180deg, rgba(0, 72, 67, 0) 0%, rgba(0, 72, 67, 0.88) 40%, rgba(0, 72, 67, 0.98) 100%);
    transition: all 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dg-card--overlay:hover .dg-card__overlay-content,
.dg-card--overlay:focus-within .dg-card__overlay-content {
    background: linear-gradient(180deg, rgba(0, 72, 67, 0.75) 0%, rgba(0, 45, 42, 0.92) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 1.5rem;
}

.dg-card--overlay .dg-card__title,
.dg-card--overlay .dg-card__title a,
.dg-card--overlay h3,
.dg-card--overlay h3 a,
.dg-service-grid .dg-card--overlay .dg-card__title,
.dg-service-grid .dg-card--overlay .dg-card__title a {
    color: #ffffff !important;
    font-family: var(--dg-font-sans, 'Mulish', sans-serif);
    font-weight: 800;
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8) !important;
    text-decoration: none !important;
}

.dg-card--overlay .dg-card__excerpt,
.dg-card--overlay .dg-card__excerpt p,
.dg-card--overlay .dg-card__desc,
.dg-service-grid .dg-card--overlay .dg-card__excerpt,
.dg-service-grid .dg-card--overlay .dg-card__excerpt p {
    color: rgba(255, 255, 255, 0.95) !important;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.35s ease, margin 0.3s ease;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.dg-card--overlay:hover .dg-card__excerpt,
.dg-card--overlay:focus-within .dg-card__excerpt,
.dg-card--overlay:hover .dg-card__excerpt p,
.dg-card--overlay:focus-within .dg-card__excerpt p,
.dg-card--overlay:hover .dg-card__desc,
.dg-card--overlay:focus-within .dg-card__desc {
    opacity: 1 !important;
    max-height: 250px !important;
    margin-top: 0.5rem;
}

.dg-btn {
    display: inline-block;
    padding: 0.65rem 1.3rem;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.dg-btn--primary {
    background: var(--dg-primary, #009188);
    color: #ffffff !important;
}

.dg-btn--primary:hover {
    background: var(--dg-secondary-hover, #ea580c);
    transform: translateY(-1px);
}

.dg-btn--small {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

/* --------------------------------------------------------------------
 * TARJETAS DE SITUACIONES Y TESTIMONIOS (.dg-situation-card, .dg-testimonial-card)
 * -------------------------------------------------------------------- */
.dg-situation-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid rgba(0, 72, 67, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dg-situation-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 72, 67, 0.12);
}

.dg-situation-card__tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--dg-secondary, #B35524);
    background: rgba(179, 85, 36, 0.1);
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.dg-situation-card__title {
    font-family: var(--dg-font-sans, 'Mulish', sans-serif);
    font-weight: 800;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--dg-primary-dark, #004843);
}

.dg-situation-card__text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #596b69;
}

.dg-testimonial-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid rgba(0, 72, 67, 0.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.dg-testimonial-card__stars {
    color: #ffb400;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.dg-testimonial-card__quote {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #334442;
    font-style: italic;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.dg-testimonial-card__author {
    font-weight: 800;
    color: var(--dg-primary-dark, #004843);
    font-size: 0.95rem;
}

.dg-testimonial-card__role {
    font-size: 0.85rem;
    color: #728482;
}

/* --------------------------------------------------------------------
 * CONTADORES Y BANDA CTA (.dg-counter, .dg-cta-box)
 * -------------------------------------------------------------------- */
.dg-counter-item {
    padding: 1.5rem 1rem;
}

.dg-counter-val {
    font-family: var(--dg-font-sans, 'Mulish', sans-serif);
    font-weight: 900;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    color: #AFFFF9;
    line-height: 1.1;
}

.dg-counter-label {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 0.5rem;
    font-weight: 600;
}

.dg-cta-box {
    background: linear-gradient(135deg, #004843 0%, #009188 100%);
    border-radius: 16px;
    padding: clamp(2.5rem, 5vw, 4rem) 2rem;
    color: #ffffff;
    box-shadow: 0 12px 32px rgba(0, 72, 67, 0.2);
}