/* ═══════════════════════════════════════════════════════════════════════════
   dg.css — Sistema visual del directorio de desguaces.

   Mobile-first. Hereda la estructura del sistema del proyecto de grúas —tokens,
   barra fija, rejillas, tarjetas— con una paleta propia: verde de reciclaje
   para la confianza y naranja para la acción de llamar.

   Todos los colores viven en las variables de :root. Cambiar la marca del sitio
   es cambiar estas siete líneas, no buscar códigos hexadecimales por el archivo:
   ninguna regla de más abajo lleva un color escrito a mano.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tipografía ───────────────────────────────────────────────────────────────
   Inter servida desde este mismo dominio, y no desde fonts.googleapis.com, por
   dos razones que van juntas.

   Rendimiento: el `@import` a Google encadenaba tres saltos antes de pintar una
   letra —HTML → dg.css → la hoja de Google → el archivo de la fuente—, y cada
   salto incluye su propia resolución de DNS y su apretón de manos TLS. Aquí el
   navegador ya está conectado a este servidor: se ahorra la conexión entera y
   un nivel completo de la cadena, que es de lo que vive el LCP.

   Privacidad: cargar una fuente de Google envía la IP de cada visitante a un
   tercero en todas y cada una de las páginas, sin que haya forma de consentirlo
   ni de evitarlo. Sirviéndola nosotros, ese tratamiento simplemente no existe —
   y la política de privacidad puede decir la verdad sin matices.

   Solo se incluyen las particiones latin y latin-ext. El navegador descarga
   únicamente aquella cuyos caracteres aparecen en la página, así que el griego
   o el cirílico serían archivos que nadie llegaría a pedir nunca.

   Generado por scripts/descargar-fuente.py — no editar a mano.
   ─────────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/inter-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/inter-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/inter-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/inter-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/inter-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/inter-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/inter-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/inter-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/inter-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
    --dg-ink:         #10241a;   /* titulares */
    --dg-body:        #46584f;   /* texto corrido */
    --dg-muted:       #77897f;   /* etiquetas, apoyos */
    --dg-green:       #0f7a45;   /* marca, enlaces */
    --dg-green-dark:  #0a5732;
    --dg-green-soft:  #e8f5ee;
    --dg-green-line:  #c2e2d1;
    --dg-orange:      #e2650f;   /* acción: llamar */
    --dg-orange-dark: #c25109;
    --dg-orange-soft: #fff3e9;
    --dg-orange-line: #f7d3b6;
    --dg-star:        #f59e0b;
    --dg-cream:       #f3f8f5;   /* fondo de página */
    --dg-line:        #e0eae4;
    --dg-r-sm:        10px;
    --dg-r:           14px;
    --dg-r-lg:        20px;
    --dg-shadow-1:    0 1px 2px rgba(16,36,26,.05);
    --dg-shadow-2:    0 10px 30px rgba(16,36,26,.08);
    --dg-shadow-3:    0 18px 48px rgba(16,36,26,.15);
    --dg-pad:         clamp(16px, 4vw, 56px);
    --dg-max:         1400px;
    /* Geometría de la banda de pilares. La de contadores se alinea con ella
       (ver más abajo), así que las dos medidas viven aquí y no repartidas. */
    --dg-pilar-x:     22px;   /* sangrado lateral de la celda */
    --dg-pilar-icono: 44px;   /* lado del icono */
    --dg-pilar-gap:   13px;   /* separación entre el icono y el texto */
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--dg-cream);
    color: var(--dg-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* `clip` y no `hidden`: con hidden el body pasa a ser contenedor de scroll y
       eso anula el position:sticky de la barra, que se iría con la página. */
    overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
    color: var(--dg-ink);
    margin: 0;
    line-height: 1.18;
    letter-spacing: -.02em;
    font-weight: 700;
}
p, ul, ol { margin: 0; }
button, input, select { font: inherit; }
:focus-visible { outline: 2px solid var(--dg-green); outline-offset: 2px; border-radius: 6px; }
/* La barra fija taparía el destino de cada ancla sin este margen. */
[id] { scroll-margin-top: 78px; }

.dg-sr {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
/* El `display` del atributo `hidden` lo pisa cualquier regla de clase que fije
   uno propio, y quedaban píldoras vacías flotando. Con `!important` el atributo
   vuelve a significar lo que dice. */
[hidden] { display: none !important; }

/* ── Textos plegables ─────────────────────────────────────────────────────────
   La clase la pone gr.js, nunca el HTML: si el recorte viniera de serie, quien
   navegue sin JS vería el texto cortado y sin botón para abrirlo. */
.dg-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--dg-lineas, 3);
            line-clamp: var(--dg-lineas, 3);
    overflow: hidden;
}
.dg-more {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 7px; padding: 0; cursor: pointer;
    background: none; border: 0;
    font-size: 13px; font-weight: 600; color: var(--dg-green);
}
.dg-more:hover { color: var(--dg-green-dark); text-decoration: underline; }
.dg-more-ico {
    width: 17px; height: 17px; flex: 0 0 auto;
    display: grid; place-items: center;
    background: var(--dg-green-soft); border: 1px solid var(--dg-green-line);
    border-radius: 50%; font-size: 13px; line-height: 1; font-weight: 700;
}
.dg-wrap { max-width: var(--dg-max); margin: 0 auto; padding: 0 var(--dg-pad); }
/* Solo el eje vertical: `padding: 40px 0` borraría el relleno lateral de
   .dg-wrap en los bloques que llevan las dos clases. */
.dg-section { padding-top: 44px; padding-bottom: 44px; }
.dg-section--tight { padding-top: 30px; padding-bottom: 30px; }
.dg-section--white { background: #fff; border-block: 1px solid var(--dg-line); }
.dg-section-head { margin-bottom: 22px; }
.dg-section-head p { margin-top: 8px; font-size: 15px; color: var(--dg-muted); max-width: 66ch; }

/* ── Encabezados ──────────────────────────────────────────────────────────────
   El h2/h3 lleva la keyword y se pinta pequeño, como antetítulo; el titular
   grande es un <p>, porque es lenguaje de producto y no la etiqueta de la
   sección. Así el esquema de encabezados es el que quiere el buscador sin que
   el diseño quede a merced de él. */
.dg-seo {
    font-size: 13px; font-weight: 600; line-height: 1.35;
    letter-spacing: 0; color: var(--dg-green); margin: 0 0 5px;
}
.dg-title {
    font-size: clamp(21px, 3.6vw, 27px); font-weight: 700;
    line-height: 1.18; letter-spacing: -.02em; color: var(--dg-ink);
}
.dg-subtitle { font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--dg-ink); }
/* Un icono dentro de un titular o de un párrafo tiene que ir en línea. La regla
   base pone `display: block` a todos los svg —que es lo que hace falta en los
   que ocupan su propia caja, como la ilustración del hero o las estrellas— y en
   un encabezado eso partía el título en dos renglones, con el icono solo arriba. */
.dg-title svg, .dg-subtitle svg, .dg-prose p > svg {
    display: inline-block; vertical-align: -2px; margin-right: 5px;
}

/* ── Franja superior ──────────────────────────────────────────────────────── */
.dg-topbar {
    background: var(--dg-ink); color: #cbdcd2;
    font-size: 12.5px;
}
.dg-topbar-inner {
    max-width: var(--dg-max); margin: 0 auto;
    padding: 7px var(--dg-pad);
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 6px 18px;
}
.dg-topbar-item { display: inline-flex; align-items: center; gap: 7px; }
.dg-topbar-item svg { flex: 0 0 auto; color: var(--dg-orange); }
.dg-topbar-sep { display: none; color: #3f5a4b; }

/* Por debajo de 720px la franja solo lleva el aviso corto, en una línea. Con
   los tres elementos se iba a 80px de alto —tres líneas, una de ellas con una
   palabra suelta— y empujaba el contenido fuera de la primera pantalla. La
   fecha no se pierde: está en el pie y en cada ficha de ciudad. */
@media (max-width: 719px) {
    .dg-topbar-inner { padding-top: 6px; padding-bottom: 6px; }
    .dg-topbar-item  { font-size: 11.5px; text-align: center; }
    .dg-topbar-largo,
    .dg-topbar-fecha { display: none; }
}
@media (min-width: 720px) { .dg-topbar-sep { display: inline; } }

/* ── Barra de navegación ──────────────────────────────────────────────────── */
/* El <header> no genera caja: un sticky solo se pega mientras su padre está a
   la vista, y el header mide lo que ocupa la barra. */
body > header { display: contents; }

.dg-nav {
    position: sticky; top: 0; z-index: 1200;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--dg-line);
}
.dg-nav-inner {
    max-width: var(--dg-max); margin: 0 auto;
    padding: 11px var(--dg-pad);
    display: flex; align-items: center; gap: 16px;
}
.dg-brand { display: inline-flex; align-items: center; gap: 10px; }
.dg-brand-mark {
    /* El fondo y el redondeo los trae la propia imagen, con las esquinas ya
       en transparencia: pintarlos aquí además dejaría un halo del color del
       tema asomando por detrás del borde curvo. */
    width: 38px; height: 38px; flex: 0 0 auto;
}
.dg-brand-name {
    font-size: 17px; font-weight: 800; color: var(--dg-ink);
    line-height: 1.05; letter-spacing: -.03em;
}
.dg-brand-name span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--dg-muted); }

.dg-nav-links { display: none; }
@media (min-width: 1040px) {
    .dg-nav-links { display: flex; align-items: center; gap: 28px; margin: 0 auto; padding: 0; list-style: none; }
    .dg-nav-links > li { position: relative; }
    .dg-nav-links a, .dg-nav-drop-btn {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: 15px; font-weight: 500; color: var(--dg-body);
        background: none; border: 0; padding: 6px 0; cursor: pointer;
    }
    .dg-nav-links a:hover, .dg-nav-drop-btn:hover { color: var(--dg-green); }
    .dg-nav-drop {
        position: absolute; top: calc(100% + 10px); left: -14px;
        min-width: 240px; padding: 8px; margin: 0;
        background: #fff; border: 1px solid var(--dg-line);
        border-radius: var(--dg-r); box-shadow: var(--dg-shadow-2);
        list-style: none; display: none;
    }
    .dg-nav-drop.is-open { display: block; }
    .dg-nav-drop--cols.is-open { display: grid; grid-template-columns: 1fr 1fr; min-width: 430px; }
    .dg-nav-drop a { display: block; padding: 8px 12px; border-radius: var(--dg-r-sm); font-size: 14.5px; }
    .dg-nav-drop a:hover { background: var(--dg-green-soft); }
}
.dg-nav-cta { margin-left: auto; white-space: nowrap; }
@media (min-width: 1040px) { .dg-nav-cta { margin-left: 0; } }

/* El rótulo largo del botón y el subtítulo de la marca solo caben en pantallas
   anchas: en móvil partían en dos líneas y hacían de la barra el bloque más
   alto de la página. */
@media (max-width: 1039px) {
    .dg-nav-cta-mas { display: none; }
}
@media (max-width: 519px) {
    .dg-brand-name span { display: none; }
    .dg-brand-name { font-size: 16px; }
}
@media (max-width: 419px) {
    .dg-brand-name { font-size: 15px; }
    .dg-nav-cta { padding: 9px 14px; font-size: 13.5px; }
}

.dg-burger {
    margin-left: 4px; width: 42px; height: 42px;
    display: grid; place-items: center;
    background: #fff; border: 1px solid var(--dg-line);
    border-radius: var(--dg-r-sm); cursor: pointer; color: var(--dg-ink);
}
@media (min-width: 1040px) { .dg-burger { display: none; } }

.dg-mobile-menu {
    display: none;
    border-top: 1px solid var(--dg-line); background: #fff;
    padding: 8px var(--dg-pad) 18px;
    /* Con las ciudades dentro el menú mide más que la pantalla y, siendo la
       barra fija, lo que sobresale queda inalcanzable: se desplaza por dentro.
       El alto exacto lo pone gr.js al abrirlo; esto es el respaldo. */
    max-height: calc(100dvh - 128px);
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.dg-mobile-menu.is-open { display: block; }
@media (min-width: 1040px) { .dg-mobile-menu, .dg-mobile-menu.is-open { display: none; } }
.dg-mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.dg-mobile-menu > ul > li > a, .dg-mobile-menu > ul > li > span {
    display: block; padding: 13px 2px; font-size: 16px; font-weight: 600;
    color: var(--dg-ink); border-bottom: 1px solid var(--dg-line);
}
.dg-mobile-menu > ul > li > span {
    color: var(--dg-muted); font-size: 12px; letter-spacing: .08em;
    text-transform: uppercase; font-weight: 700; border: 0; padding-bottom: 4px;
}
.dg-mobile-sub li a { display: block; padding: 9px 2px; font-size: 15px; color: var(--dg-body); }

/* ── Botones ──────────────────────────────────────────────────────────────── */
.dg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 18px; border-radius: 999px; border: 1px solid transparent;
    font-size: 15px; font-weight: 600; cursor: pointer;
    transition: background-color .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}
/* El naranja de acción va con texto blanco: a este tono llega de sobra a 4.5:1. */
.dg-btn--call { background: var(--dg-orange); color: #fff; box-shadow: var(--dg-shadow-1); }
.dg-btn--call:hover { background: var(--dg-orange-dark); }
.dg-btn--primary { background: var(--dg-green); color: #fff; box-shadow: var(--dg-shadow-1); }
.dg-btn--primary:hover { background: var(--dg-green-dark); }
.dg-btn--ghost { background: #fff; color: var(--dg-ink); border-color: var(--dg-line); }
.dg-btn--ghost:hover { border-color: var(--dg-green); color: var(--dg-green); }
.dg-btn:active { transform: translateY(1px); }
.dg-btn--sm { padding: 9px 15px; font-size: 14px; }
.dg-btn--block { width: 100%; }
.dg-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; color: var(--dg-green); }
.dg-link:hover { color: var(--dg-green-dark); }

/* ── Migas ────────────────────────────────────────────────────────────────── */
.dg-crumbs { background: #fff; border-bottom: 1px solid var(--dg-line); font-size: 13px; }
.dg-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 10px 0; }
.dg-crumbs li + li::before { content: '›'; margin-right: 6px; color: var(--dg-muted); }
.dg-crumbs a { color: var(--dg-green); }
.dg-crumbs a:hover { text-decoration: underline; }
.dg-crumbs span { color: var(--dg-muted); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.dg-hero {
    position: relative;
    background:
        radial-gradient(120% 90% at 88% 6%, #dbeee2 0%, rgba(219,238,226,0) 62%),
        linear-gradient(180deg, #f9fcfa 0%, var(--dg-cream) 100%);
    overflow: hidden;
}
.dg-hero-inner { max-width: var(--dg-max); margin: 0 auto; }
.dg-hero-copy { padding: 30px var(--dg-pad) 30px; }

@media (min-width: 1000px) {
    /* Dos columnas: el texto manda, la foto acompaña. La imagen queda dentro
       del contenedor y no sangra hasta el borde de la ventana, para que respire
       igual que el resto de la página. */
    .dg-hero-inner {
        display: grid; grid-template-columns: 55% 45%;
        align-items: stretch; gap: 0;
    }
    .dg-hero-copy {
        display: flex; flex-direction: column; justify-content: center;
        padding: 40px 20px 44px var(--dg-pad);
    }
}

/* ── Imagen del hero ──────────────────────────────────────────────────────────
   Sustituye a la ilustración en SVG que llevaba el sitio al principio.

   El fondo de la imagen es casi blanco y el del hero, un verde muy claro: puesta
   sin más, se recortaba como un rectángulo pegado encima de la página. En vez de
   disimularlo con un marco —que lo subraya— los cuatro bordes se disuelven con
   dos máscaras cruzadas, una horizontal y otra vertical, combinadas con
   `mask-composite`. El resultado es que la imagen flota sobre el fondo en lugar
   de estar apoyada en él.

   Los dos degradados no son simétricos: el lado que toca al texto se difumina
   mucho más que los otros tres, porque es donde el corte se vería. En móvil ese
   lado es el de arriba y en escritorio el de la izquierda, así que cada tamaño
   lleva su propio par. */
.dg-hero-media { position: relative; padding: 0 var(--dg-pad) 22px; }
.dg-hero-photo { display: block; position: relative; }
.dg-hero-photo img {
    width: 100%; height: auto; max-width: 620px; margin: 0 auto;
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
}

@media (max-width: 999px) {
    .dg-hero-photo img {
        -webkit-mask-image:
            linear-gradient(180deg, transparent 0, rgba(0,0,0,.5) 6%, #000 18%, #000 94%, transparent 100%),
            linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
                mask-image:
            linear-gradient(180deg, transparent 0, rgba(0,0,0,.5) 6%, #000 18%, #000 94%, transparent 100%),
            linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    }
}
@media (min-width: 1000px) {
    .dg-hero-media {
        padding: 0 var(--dg-pad) 0 0;
        display: flex; align-items: center;
    }
    .dg-hero-photo img {
        max-width: 100%;
        -webkit-mask-image:
            linear-gradient(90deg, transparent 0, rgba(0,0,0,.4) 7%, #000 22%, #000 95%, transparent 100%),
            linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
                mask-image:
            linear-gradient(90deg, transparent 0, rgba(0,0,0,.4) 7%, #000 22%, #000 95%, transparent 100%),
            linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    }
}

.dg-hero-badge {
    /* `align-self` explícito: al pasar .dg-hero-copy a columna flexible, un
       inline-flex se estira a todo el ancho y la píldora dejaba de serlo. */
    display: inline-flex; align-self: flex-start; align-items: center; gap: 8px;
    padding: 6px 13px 6px 10px; margin-bottom: 18px;
    background: #fff; border: 1px solid var(--dg-green-line);
    border-radius: 999px; box-shadow: var(--dg-shadow-1);
    font-size: 13px; font-weight: 600; color: var(--dg-green-dark);
}
.dg-hero-badge svg { color: var(--dg-orange-dark); }
.dg-hero-title {
    max-width: 19ch;
    font-size: clamp(30px, 5vw, 46px); font-weight: 800;
    letter-spacing: -.035em; line-height: 1.06; color: var(--dg-ink);
}
.dg-hero-title em { font-style: normal; color: var(--dg-green); }
.dg-hero-sub { margin-top: 16px; max-width: 56ch; font-size: clamp(15px, 2vw, 16.5px); }

/* Buscador de ciudad */
.dg-search { margin-top: 24px; max-width: 620px; }
.dg-search-box {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1.5px solid var(--dg-green);
    border-radius: 14px; padding: 11px 13px; box-shadow: var(--dg-shadow-2);
}
.dg-search-box svg { color: var(--dg-green); flex: 0 0 auto; }
.dg-search-box input {
    flex: 1; min-width: 0; border: 0; background: transparent;
    font-size: 16px; color: var(--dg-ink); padding: 6px 0;
}
.dg-search-box input::placeholder { color: #93a89b; }
.dg-search-box input:focus { outline: none; }
.dg-search-hint { font-size: 12.5px; color: var(--dg-muted); }
.dg-search-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    margin-top: 12px;
}

/* Mensajes de la geolocalización. Ocupan sitio propio: si aparecieran dentro
   del botón, el texto de error lo deformaría. */
.dg-geo-msg {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    margin-top: 10px; font-size: 13px; color: var(--dg-green-dark);
    background: var(--dg-green-soft); border: 1px solid var(--dg-green-line);
    border-radius: var(--dg-r-sm); padding: 10px 12px; max-width: 68ch;
}
.dg-geo-msg > span { flex: 1; min-width: 12ch; }
.dg-geo-msg strong { color: var(--dg-ink); }
.dg-geo-msg.is-error {
    color: #8a4208; background: var(--dg-orange-soft); border-color: var(--dg-orange-line);
}

/* Distancia calculada en el navegador, junto a la valoración. */
.dg-dist {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 999px;
    background: var(--dg-green-soft); border: 1px solid var(--dg-green-line);
    color: var(--dg-green-dark); font-size: 11.5px; font-weight: 600;
}
.dg-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.dg-chip {
    padding: 5px 12px; background: #fff; border: 1px solid var(--dg-line);
    border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--dg-body);
    white-space: nowrap; cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.dg-chip:hover { border-color: var(--dg-green); color: var(--dg-green); background: var(--dg-green-soft); }

/* ── Pilares ──────────────────────────────────────────────────────────────── */
.dg-pillars { background: #fff; border-block: 1px solid var(--dg-line); }
.dg-pillars-grid {
    display: grid; grid-template-columns: 1fr;
    max-width: var(--dg-max); margin: 0 auto; padding: 4px var(--dg-pad);
}
@media (min-width: 640px)  { .dg-pillars-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .dg-pillars-grid { grid-template-columns: repeat(4, 1fr); } }
.dg-pillar { display: flex; align-items: flex-start; gap: var(--dg-pilar-gap); padding: 19px var(--dg-pilar-x); border-bottom: 1px solid var(--dg-line); }
.dg-pillar:last-child { border-bottom: 0; }
@media (min-width: 640px) {
    .dg-pillar { border-bottom: 0; border-right: 1px solid var(--dg-line); }
    .dg-pillar:nth-child(2n) { border-right: 0; }
    .dg-pillar:nth-child(-n+2) { border-bottom: 1px solid var(--dg-line); }
}
@media (min-width: 1040px) {
    .dg-pillar { border-right: 1px solid var(--dg-line); border-bottom: 0; }
    .dg-pillar:nth-child(2n) { border-right: 1px solid var(--dg-line); }
    .dg-pillar:last-child { border-right: 0; }
    .dg-pillar:nth-child(-n+2) { border-bottom: 0; }
}
.dg-pillar-icon {
    width: var(--dg-pilar-icono); height: var(--dg-pilar-icono);
    flex: 0 0 auto; display: grid; place-items: center;
    border: 1px solid var(--dg-green-line); border-radius: 12px;
    color: var(--dg-green); background: #fbfefc;
}
.dg-pillar-title { font-size: 15px; }
.dg-pillar p { margin-top: 4px; font-size: 13px; color: var(--dg-muted); }

/* ── Contadores ───────────────────────────────────────────────────────────────
   Van pegados a los pilares, sin nada en medio, así que el ojo los lee como una
   sola tabla de cuatro columnas: si no coinciden, se nota.

   Y no coincidían por dos motivos a la vez. El primero, un hueco de 12 px entre
   columnas que los pilares no tienen: bastaba para desviar la segunda columna
   3 px, la tercera 6 y la cuarta 9, un descuadre que crece hacia la derecha y
   que es justo el que peor se ve. El segundo, que el contenido del pilar empieza
   pasado el icono y el del contador arrancaba en el borde de la celda.

   Se corrige con las dos medidas: sin hueco de columna —la separación ya la dan
   las propias celdas— y sangrando el contador hasta donde empieza el título del
   pilar, que es el elemento con el que se compara. Solo a partir de 1040 px,
   que es donde los pilares se ponen en cuatro columnas; por debajo son dos
   contra cuatro y no hay alineación posible. */
.dg-stats { background: var(--dg-ink); color: #fff; }
.dg-stats-inner {
    max-width: var(--dg-max); margin: 0 auto; padding: 26px var(--dg-pad);
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 0;
}
.dg-stats-inner > div { padding-right: var(--dg-pilar-x); }
@media (min-width: 780px) { .dg-stats-inner { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1040px) {
    /* El sangrado solo cuando los contadores van justo debajo de los pilares,
       que es la única situación en la que hay algo con lo que alinearse. En la
       ficha de provincia, en la de pieza y en la metodología la banda va sola
       tras el hero: ahí ese hueco a la izquierda no lo justificaría nada y se
       leería como un descuadre. */
    .dg-pillars + .dg-stats .dg-stats-inner > div {
        padding-left: calc(var(--dg-pilar-x) + var(--dg-pilar-icono) + var(--dg-pilar-gap));
    }
}
.dg-stat-n { font-size: clamp(24px, 4vw, 32px); font-weight: 800; letter-spacing: -.03em; color: #fff; line-height: 1; }
.dg-stat-l { margin-top: 6px; font-size: 13px; color: #9db4a6; }

/* ── Rejilla de ciudades ──────────────────────────────────────────────────── */
.dg-cities { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px)  { .dg-cities { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .dg-cities { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .dg-cities { grid-template-columns: repeat(4, 1fr); } }
.dg-city {
    display: flex; flex-direction: column; gap: 4px;
    padding: 15px 16px; background: #fff;
    border: 1px solid var(--dg-line); border-radius: var(--dg-r);
    box-shadow: var(--dg-shadow-1);
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.dg-city:hover { border-color: var(--dg-green-line); transform: translateY(-2px); box-shadow: var(--dg-shadow-2); }
.dg-city-name { font-size: 16px; font-weight: 700; color: var(--dg-ink); }
.dg-city-state { font-size: 12.5px; color: var(--dg-muted); }
.dg-city-foot {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 8px; padding-top: 9px; border-top: 1px solid var(--dg-line);
    font-size: 12.5px; color: var(--dg-body);
}
.dg-city-foot b { color: var(--dg-ink); }
.dg-city.is-hidden { display: none; }
/* Coincidencia señalada por el buscador o por la ubicación. Solo la marca:
   quien pulsa sigue siendo el usuario. */
.dg-city.is-nearest {
    border-color: var(--dg-green);
    box-shadow: 0 0 0 3px rgba(16,80,140,.12), var(--dg-shadow-2);
}
.dg-noresults { padding: 22px; text-align: center; color: var(--dg-muted); font-size: 15px; }

/* ── Ficha de empresa ─────────────────────────────────────────────────────── */
.dg-list { display: grid; gap: 14px; }
.dg-biz {
    position: relative; display: grid; gap: 14px;
    padding: 18px; background: #fff;
    border: 1px solid var(--dg-line); border-radius: var(--dg-r-lg);
    box-shadow: var(--dg-shadow-1);
}
@media (min-width: 800px) { .dg-biz { grid-template-columns: 1fr 240px; align-items: start; } }
.dg-biz.is-hidden { display: none; }
/* La primera de la lista se distingue sin gritar: un filo naranja a la izquierda. */
.dg-biz--top { border-color: var(--dg-orange-line); box-shadow: var(--dg-shadow-2); }
.dg-biz--top::before {
    content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px;
    background: var(--dg-orange); border-radius: 0 3px 3px 0;
}
.dg-biz-head { display: flex; align-items: flex-start; gap: 11px; }
.dg-biz-rank {
    width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center;
    background: var(--dg-green-soft); color: var(--dg-green-dark);
    border-radius: 8px; font-size: 13px; font-weight: 700;
}
.dg-biz--top .dg-biz-rank { background: var(--dg-orange-soft); color: var(--dg-orange-dark); }
.dg-biz-name { font-size: 18px; line-height: 1.25; }
.dg-biz-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 5px; font-size: 13px; color: var(--dg-muted); }
.dg-stars { display: inline-flex; gap: 1px; color: var(--dg-star); }
.dg-stars svg { width: 14px; height: 14px; }
.dg-rating-n { font-weight: 700; color: var(--dg-ink); font-size: 14px; }

.dg-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.dg-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
    background: var(--dg-green-soft); color: var(--dg-green-dark);
    border: 1px solid var(--dg-green-line);
}
.dg-badge--es  { background: var(--dg-green-soft); color: var(--dg-green-dark); border-color: var(--dg-green-line); }

.dg-biz-meta { display: grid; gap: 7px; margin-top: 12px; font-size: 14px; }
.dg-biz-meta div { display: flex; align-items: flex-start; gap: 8px; }
.dg-biz-meta svg { flex: 0 0 auto; margin-top: 3px; color: var(--dg-muted); width: 15px; height: 15px; }
.dg-biz-desc { margin-top: 11px; font-size: 14px; color: var(--dg-body); }

/* Lo que destacan las reseñas de esa empresa concreta. */
.dg-biz-actions { display: grid; gap: 8px; align-content: start; }
@media (min-width: 800px) {
    .dg-biz-actions { padding-left: 18px; border-left: 1px solid var(--dg-line); }
}
.dg-biz-note { font-size: 11.5px; color: var(--dg-muted); text-align: center; }

/* ── Barra de filtros ─────────────────────────────────────────────────────── */
.dg-filters {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 12px 14px; margin-bottom: 16px;
    background: #fff; border: 1px solid var(--dg-line); border-radius: var(--dg-r);
}
.dg-filters-label { font-size: 13px; font-weight: 600; color: var(--dg-ink); margin-right: 2px; }
.dg-filters select {
    padding: 7px 11px; border: 1px solid var(--dg-line); border-radius: 999px;
    background: #fff; font-size: 13.5px; color: var(--dg-ink); cursor: pointer;
}
.dg-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--dg-body); cursor: pointer; }
.dg-toggle input { accent-color: var(--dg-green); width: 16px; height: 16px; }
.dg-filters-count { margin-left: auto; font-size: 13px; color: var(--dg-muted); }

/* ── Bloque de datos / E-E-A-T ────────────────────────────────────────────── */
.dg-note {
    display: flex; gap: 12px; padding: 15px 17px;
    background: var(--dg-green-soft); border: 1px solid var(--dg-green-line);
    border-radius: var(--dg-r); font-size: 13.5px; color: #234a6b;
}
.dg-note svg { flex: 0 0 auto; margin-top: 2px; color: var(--dg-green); }
/* Solo el <strong> que hace de titular pasa a bloque. Sin `:first-child`, la
   regla alcanzaba a cualquier negrita del cuerpo —un teléfono, un importe— y la
   partía a una línea suelta en mitad de la frase. */
.dg-note > div > strong:first-child { display: block; color: var(--dg-ink); margin-bottom: 3px; font-size: 14px; }
.dg-note strong { color: var(--dg-ink); }
.dg-note a { color: var(--dg-green); text-decoration: underline; }
.dg-note--warn { background: var(--dg-orange-soft); border-color: var(--dg-orange-line); color: #6f4a00; }
.dg-note--warn svg { color: var(--dg-orange-dark); }

.dg-updated {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--dg-muted);
}
.dg-updated svg { color: var(--dg-green); }

/* ── Prosa ────────────────────────────────────────────────────────────────── */
.dg-prose { max-width: 74ch; }
.dg-prose h2 { font-size: clamp(20px, 3vw, 24px); margin-top: 34px; }
.dg-prose h3 { font-size: 17px; margin-top: 24px; }
.dg-prose h2:first-child, .dg-prose h3:first-child { margin-top: 0; }
.dg-prose p { margin-top: 12px; }
.dg-prose ul, .dg-prose ol { margin-top: 12px; padding-left: 20px; display: grid; gap: 7px; }
.dg-prose li::marker { color: var(--dg-green); }
.dg-prose a { color: var(--dg-green); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.dg-prose strong { color: var(--dg-ink); }

/* ── Tabla ────────────────────────────────────────────────────────────────── */
.dg-table-wrap { overflow-x: auto; margin-top: 16px; border: 1px solid var(--dg-line); border-radius: var(--dg-r); background: #fff; }
.dg-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 480px; }
.dg-table th, .dg-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--dg-line); }
.dg-table th { background: var(--dg-green-soft); color: var(--dg-ink); font-size: 13px; font-weight: 700; white-space: nowrap; }
.dg-table tr:last-child td { border-bottom: 0; }
.dg-table td b { color: var(--dg-ink); }

/* ── Preguntas frecuentes ─────────────────────────────────────────────────── */
.dg-faqs { display: grid; gap: 9px; max-width: 80ch; }
.dg-faq { background: #fff; border: 1px solid var(--dg-line); border-radius: var(--dg-r); overflow: hidden; }
.dg-faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 15px 17px; cursor: pointer; list-style: none;
    font-size: 15.5px; font-weight: 600; color: var(--dg-ink);
}
.dg-faq summary::-webkit-details-marker { display: none; }
.dg-faq summary::after {
    content: ''; flex: 0 0 auto; width: 10px; height: 10px;
    border-right: 2px solid var(--dg-muted); border-bottom: 2px solid var(--dg-muted);
    transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease;
}
.dg-faq[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.dg-faq-body { padding: 0 17px 16px; font-size: 14.5px; }
.dg-faq-body p + p { margin-top: 10px; }
.dg-faq-body a { color: var(--dg-green); text-decoration: underline; }

/* ── Enlaces relacionados ─────────────────────────────────────────────────── */
.dg-related { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 600px)  { .dg-related { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .dg-related { grid-template-columns: repeat(3, 1fr); } }
.dg-rel {
    display: flex; align-items: center; gap: 11px;
    padding: 13px 15px; background: #fff;
    border: 1px solid var(--dg-line); border-radius: var(--dg-r);
    transition: border-color .18s ease, transform .18s ease;
}
.dg-rel:hover { border-color: var(--dg-green-line); transform: translateY(-2px); }
.dg-rel-icon { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; background: var(--dg-green-soft); color: var(--dg-green); border-radius: 10px; }
.dg-rel-body { flex: 1; min-width: 0; }
.dg-rel-title { font-size: 14.5px; font-weight: 600; color: var(--dg-ink); }
.dg-rel-sub { font-size: 12.5px; color: var(--dg-muted); margin-top: 1px; }

/* ── Barra fija de llamada (móvil) ────────────────────────────────────────── */
.dg-callbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
    display: flex; align-items: center; gap: 10px;
    padding: 10px var(--dg-pad) calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.97); border-top: 1px solid var(--dg-line);
    box-shadow: 0 -6px 24px rgba(16,36,26,.10);
}
@media (min-width: 800px) { .dg-callbar { display: none; } }
.dg-callbar-txt { flex: 1; min-width: 0; font-size: 12.5px; color: var(--dg-muted); line-height: 1.35; }
.dg-callbar-txt b { display: block; color: var(--dg-ink); font-size: 14px; font-weight: 700; }
/* Con la barra abajo, el pie necesita hueco para no quedar tapado. */
@media (max-width: 799px) { body.has-callbar { padding-bottom: 72px; } }

/* ── Mapa ─────────────────────────────────────────────────────────────────── */
.dg-map {
    height: 380px; border-radius: var(--dg-r-lg); overflow: hidden;
    border: 1px solid var(--dg-line); background: #e8eef4;
    /* Por debajo de la barra fija: Leaflet apila sus paneles en 400 y sin esto
       los marcadores pasaban por delante de la navegación al desplazarse. */
    position: relative; z-index: 0;
}
.dg-map iframe, .dg-map img { width: 100%; height: 100%; border: 0; }
@media (min-width: 900px) { .dg-map { height: 440px; } }

/* Marcador numerado: el mismo número que la empresa lleva en el listado. */
.dg-pin-wrap { background: none; border: 0; }
.dg-pin {
    display: grid; place-items: center;
    width: 28px; height: 28px;
    background: var(--dg-green); color: #fff;
    border: 2px solid #fff; border-radius: 50%;
    box-shadow: 0 2px 6px rgba(16,36,26,.35);
    font: 700 13px/1 'Inter', sans-serif;
}
.dg-pin--top { background: var(--dg-orange); color: var(--dg-ink); }
/* Punto del usuario: más pequeño y de otro color, para que no se confunda con
   una empresa del listado. */
.dg-pin--yo {
    width: 20px; height: 20px;
    background: #d92d20; border-width: 3px;
    box-shadow: 0 0 0 4px rgba(217,45,32,.22), 0 2px 6px rgba(16,36,26,.35);
}

.leaflet-popup-content-wrapper { border-radius: var(--dg-r-sm); }
.leaflet-popup-content { margin: 12px 14px; font-family: 'Inter', sans-serif; }
.dg-pop-name { display: block; font-size: 14.5px; color: var(--dg-ink); margin-bottom: 4px; }
.dg-pop-meta { display: block; font-size: 12.5px; color: var(--dg-muted); }
.dg-pop-call {
    display: inline-block; margin-top: 9px; padding: 6px 12px;
    background: var(--dg-orange); color: var(--dg-ink) !important;
    border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none !important;
}
.dg-pop-route {
    display: block; width: 100%; margin-top: 10px; padding: 6px 12px;
    background: #fff; color: var(--dg-green); cursor: pointer;
    border: 1px solid var(--dg-green-line); border-radius: 999px;
    font-size: 13px; font-weight: 600;
}
.dg-pop-route:hover { background: var(--dg-green-soft); }

/* Resultado del cálculo de ruta, encima del mapa. */
.dg-route-info {
    margin-top: 12px; padding: 13px 15px;
    background: var(--dg-green-soft); border: 1px solid var(--dg-green-line);
    border-radius: var(--dg-r); color: #234a6b; font-size: 14px;
}
.dg-route-info.is-error {
    background: var(--dg-orange-soft); border-color: var(--dg-orange-line); color: #6f4a00;
}
.dg-route-info strong { color: var(--dg-ink); }
.dg-route-note { display: block; margin-top: 6px; font-size: 12px; color: var(--dg-muted); }
.dg-route-clear {
    margin-top: 10px; padding: 5px 12px; cursor: pointer;
    background: #fff; color: var(--dg-body);
    border: 1px solid var(--dg-line); border-radius: 999px; font-size: 12.5px; font-weight: 600;
}
.dg-route-clear:hover { border-color: var(--dg-green); color: var(--dg-green); }

/* ── Pie ──────────────────────────────────────────────────────────────────── */
.dg-footer { background: var(--dg-ink); color: #a8bccf; padding: 40px 0 22px; margin-top: 20px; font-size: 14px; }
.dg-footer-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .dg-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1000px) { .dg-footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; } }
.dg-footer .dg-brand-name { color: #fff; }
.dg-footer .dg-brand-name span { color: #7f95ab; }
.dg-footer .dg-brand-mark { background: #1b2d3f; }
.dg-footer-about p { margin-top: 12px; max-width: 42ch; font-size: 13.5px; }
.dg-footer-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin-bottom: 11px; }
.dg-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dg-footer-col a { font-size: 13.5px; }
.dg-footer-col a:hover { color: #fff; text-decoration: underline; }
.dg-footer-note {
    grid-column: 1 / -1; display: flex; gap: 12px;
    margin-top: 6px; padding: 15px 17px;
    background: #16273a; border: 1px solid #24384c; border-radius: var(--dg-r);
    font-size: 13px;
}
.dg-footer-note svg { flex: 0 0 auto; margin-top: 2px; color: var(--dg-orange); }
.dg-footer-note > div > strong:first-child { display: block; margin-bottom: 4px; }
.dg-footer-note strong { color: #fff; }
.dg-footer-note a { color: var(--dg-orange); text-decoration: underline; }
.dg-footer-legal {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px;
    margin-top: 26px; padding-top: 18px; border-top: 1px solid #24384c;
    font-size: 12.5px; color: #7f95ab;
}

/* ── Volver arriba ────────────────────────────────────────────────────────── */
.dg-up {
    position: fixed; right: 16px; bottom: 88px; z-index: 1050;
    width: 42px; height: 42px; display: none; place-items: center;
    background: #fff; color: var(--dg-ink);
    border: 1px solid var(--dg-line); border-radius: 50%;
    box-shadow: var(--dg-shadow-2); cursor: pointer;
}
.dg-up.is-visible { display: grid; }
@media (min-width: 800px) { .dg-up { bottom: 24px; } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ── Etiquetas de la ficha de centro ───────────────────────────────────────── */
/* La localidad real del centro. Verde cuando está en el municipio buscado y
   neutra cuando está en otro: el color hace el trabajo de un vistazo, y el
   texto lo dice igualmente para quien no distingue los dos tonos. */
.dg-badge--aqui  { background: var(--dg-green-soft); color: var(--dg-green-dark); border-color: var(--dg-green-line); }
.dg-badge--fuera { background: #fff; color: var(--dg-body); border-color: var(--dg-line); }
.dg-badge--web   { background: var(--dg-orange-soft); color: #8a4208; border-color: var(--dg-orange-line); }
.dg-biz-sinnota  { font-size: 13px; color: var(--dg-muted); }

/* ── Pasos numerados ──────────────────────────────────────────────────────── */
.dg-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dg-step {
    display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start;
    background: #fff; border: 1px solid var(--dg-line); border-radius: var(--dg-r);
    padding: 18px; box-shadow: var(--dg-shadow-1);
}
.dg-step-n {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
    background: var(--dg-green-soft); border: 1px solid var(--dg-green-line);
    color: var(--dg-green-dark); font-weight: 700; font-size: 16px;
}
.dg-step-title { font-size: 17px; margin-bottom: 5px; }
.dg-step p { font-size: 14.5px; }

/* ── Tarjetas de contenido ────────────────────────────────────────────────── */
.dg-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.dg-card {
    background: #fff; border: 1px solid var(--dg-line); border-radius: var(--dg-r);
    padding: 18px; box-shadow: var(--dg-shadow-1);
}
.dg-card-icon {
    display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
    background: var(--dg-green-soft); color: var(--dg-green-dark); margin-bottom: 11px;
}
.dg-card-title { font-size: 16px; margin-bottom: 6px; }
.dg-card-price { font-size: 14px; font-weight: 700; color: var(--dg-green-dark); margin-bottom: 6px; }
.dg-card p { font-size: 14px; }

/* ── Lista de comprobaciones ──────────────────────────────────────────────── */
.dg-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dg-checklist li {
    display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start;
    background: #fff; border: 1px solid var(--dg-line); border-radius: var(--dg-r-sm);
    padding: 13px 15px; font-size: 14.5px;
}
.dg-checklist svg { color: var(--dg-green); margin-top: 2px; }

/* ── Calculadora ──────────────────────────────────────────────────────────── */
.dg-calc { display: grid; gap: 18px; }
@media (min-width: 900px) { .dg-calc { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.dg-calc-form {
    display: grid; gap: 16px;
    background: #fff; border: 1px solid var(--dg-line); border-radius: var(--dg-r);
    padding: 20px; box-shadow: var(--dg-shadow-1);
}
.dg-field { display: block; border: 0; margin: 0; padding: 0; }
.dg-field > span, .dg-field > legend {
    display: block; font-size: 13px; font-weight: 600; color: var(--dg-ink);
    margin-bottom: 8px; padding: 0;
}
.dg-field select {
    /* El hueco de la derecha es para la flecha que dibuja el propio navegador:
       sin él, en móvil la opción más larga se lee por debajo del desplegable. */
    width: 100%; padding: 11px 34px 11px 13px; border-radius: var(--dg-r-sm);
    border: 1px solid var(--dg-line); background: #fff; color: var(--dg-ink); font-size: 14.5px;
}
.dg-check {
    display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start;
    padding: 9px 0; font-size: 14px; cursor: pointer;
}
.dg-check + .dg-check { border-top: 1px solid var(--dg-line); }
.dg-check input { margin: 2px 0 0; accent-color: var(--dg-green); }
.dg-check small { display: block; color: var(--dg-muted); font-size: 12.5px; }
.dg-calc-out {
    background: var(--dg-green-soft); border: 1px solid var(--dg-green-line);
    border-radius: var(--dg-r); padding: 22px; text-align: center;
}
.dg-calc-label { font-size: 13px; font-weight: 600; color: var(--dg-green-dark); }
.dg-calc-n {
    font-size: clamp(28px, 6vw, 38px); font-weight: 800; letter-spacing: -.02em;
    color: var(--dg-ink); margin: 8px 0 12px; line-height: 1.1;
}
.dg-calc-note { font-size: 12.5px; color: var(--dg-body); margin-bottom: 16px; text-align: left; }

/* ── Nube de enlaces ──────────────────────────────────────────────────────── */
.dg-taglist { display: flex; flex-wrap: wrap; gap: 8px; }
.dg-taglink {
    display: inline-flex; padding: 8px 14px; border-radius: 999px;
    background: #fff; border: 1px solid var(--dg-line);
    font-size: 13.5px; font-weight: 500; color: var(--dg-ink);
    transition: border-color .18s ease, color .18s ease;
}
.dg-taglink:hover { border-color: var(--dg-green); color: var(--dg-green); }

/* ── Desglose de reseñas ──────────────────────────────────────────────────────
   Sustituye al enlace «ver reseñas en Google», que se llevaba al visitante justo
   cuando iba a decidir. Cerrado ocupa una línea; abierto, el reparto completo. */
.dg-resenas { margin-top: 14px; border-top: 1px solid var(--dg-line); padding-top: 12px; }
.dg-resenas > summary {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    font-size: 13.5px; font-weight: 600; color: var(--dg-green);
    list-style: none;
}
.dg-resenas > summary::-webkit-details-marker { display: none; }
.dg-resenas > summary::after {
    content: ''; width: 7px; height: 7px; margin-left: 2px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease;
}
.dg-resenas[open] > summary::after { transform: rotate(-135deg) translate(-1px, -1px); }
.dg-resenas > summary:hover { color: var(--dg-green-dark); }
.dg-resenas > summary svg { display: inline-block; color: var(--dg-star); }
.dg-resenas-body { margin-top: 12px; }
.dg-resenas-verdict {
    font-size: 13.5px; line-height: 1.55; color: var(--dg-body);
    background: var(--dg-green-soft); border: 1px solid var(--dg-green-line);
    border-radius: var(--dg-r-sm); padding: 11px 13px; margin-bottom: 12px;
}

.dg-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.dg-bars li { display: grid; grid-template-columns: 34px 1fr 74px; align-items: center; gap: 9px; }
.dg-bars-k {
    display: inline-flex; align-items: center; gap: 2px; justify-content: flex-end;
    font-size: 12.5px; font-weight: 600; color: var(--dg-ink);
}
.dg-bars-k svg { display: inline-block; color: var(--dg-star); }
.dg-bars-track { height: 9px; border-radius: 999px; background: var(--dg-line); overflow: hidden; }
.dg-bars-track > span {
    display: block; height: 100%; border-radius: 999px; background: var(--dg-green);
    /* Un tramo con reseñas nunca debe verse como cero: por debajo de este ancho
       la barra desaparece y el 1 % parecería un 0 %. */
    min-width: 3px;
}
.dg-bars-track > span[style*="width:0%"] { min-width: 0; }
.dg-bars-track > span.is-medio { background: var(--dg-star); }
.dg-bars-track > span.is-mal   { background: var(--dg-orange); }
.dg-bars-v { font-size: 12.5px; color: var(--dg-ink); font-weight: 600; text-align: right; }
.dg-bars-v small { font-weight: 500; color: var(--dg-muted); }

.dg-resenas-fuente { margin-top: 11px; font-size: 11.5px; line-height: 1.5; color: var(--dg-muted); }
.dg-resenas-fuente a { color: var(--dg-green); text-decoration: underline; }
.dg-resenas-fuente--sola { margin-top: 14px; border-top: 1px solid var(--dg-line); padding-top: 11px; }

/* Resultado «sin distintivo»: es la única respuesta del comprobador que obliga
   a hacer algo, así que deja de ser un dato y pasa a ser un aviso. */
.dg-calc.is-sin .dg-calc-out {
    background: var(--dg-orange-soft); border-color: var(--dg-orange-line);
}
.dg-calc.is-sin .dg-calc-label { color: #8a4208; }