/* ============================================================
 * Diagnóstico de Cumplimiento — estilos de la landing del servicio
 * Reutiliza las variables de marca (variables.css) y las clases
 * front-* del sistema. Sólo agrega lo específico de esta página.
 * ============================================================ */

/* ---- Hero ---- */
.dg-hero {
    /* La página no tiene canvas de partículas como el home: compensamos con
       menos altura muerta y un fondo con más presencia visual. */
    min-height: auto;
    padding-top: clamp(4rem, 10vh, 7rem);
    padding-bottom: var(--space-16);
    position: relative;
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(244,216,0,0.12), transparent 60%),
        linear-gradient(180deg, #0a0c0c 0%, var(--color-bg-primary) 50%, var(--color-bg-secondary) 100%);
}

.dg-hero__glow {
    position: absolute;
    top: -15%;
    left: 50%;
    transform: translateX(-50%);
    width: 44rem;
    height: 44rem;
    max-width: 140vw;
    background: radial-gradient(circle, rgba(244,216,0,0.16), transparent 65%);
    filter: blur(10px);
    animation: dg-hero-glow-pulse 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes dg-hero-glow-pulse {
    0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.08); }
}

.dg-hero__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(244,216,0,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(244,216,0,0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, #000 0%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

.dg-hero__icon {
    position: absolute;
    top: -6%;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(10rem, 26vw, 18rem);
    height: auto;
    color: var(--color-accent-primary);
    opacity: 0.035;
    pointer-events: none;
    z-index: 0;
}

.dg-hero__content {
    animation: dg-hero-fade-up 0.7s ease-out both;
}

.dg-hero__pretitle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.dg-hero__pretitle-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--color-accent-primary);
    box-shadow: 0 0 0 0 rgba(244,216,0,0.5);
    animation: dg-pretitle-ping 1.8s ease-out infinite;
}

@keyframes dg-pretitle-ping {
    0% { box-shadow: 0 0 0 0 rgba(244,216,0,0.5); }
    70% { box-shadow: 0 0 0 8px rgba(244,216,0,0); }
    100% { box-shadow: 0 0 0 0 rgba(244,216,0,0); }
}

.dg-hero__content > * {
    position: relative;
    opacity: 0;
    animation: dg-hero-fade-up 0.6s ease-out both;
}

.dg-hero__content > *:nth-child(1) { animation-delay: 0.05s; }
.dg-hero__content > *:nth-child(2) { animation-delay: 0.15s; }
.dg-hero__content > *:nth-child(3) { animation-delay: 0.25s; }
.dg-hero__content > *:nth-child(4) { animation-delay: 0.35s; }
.dg-hero__content > *:nth-child(5) { animation-delay: 0.45s; }

@keyframes dg-hero-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dg-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
    margin: var(--space-6) 0 var(--space-2);
}
.dg-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}

/* ---- Disclaimer / honestidad ---- */
.dg-disclaimer {
    max-width: 860px;
    margin: 0 auto var(--space-10);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent-primary);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    font-size: var(--text-base);
}
.dg-disclaimer strong { color: var(--color-text-primary); }

/* ---- Entregables ---- */
.dg-deliverables { margin-top: var(--space-4); }
.dg-feature {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
}
.dg-feature__ico { font-size: 1.4rem; line-height: 1; }

/* ---- Planes ---- */
.dg-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    align-items: stretch;
}
.dg-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-8) var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-bg-card);
}
.dg-plan--featured {
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 1px var(--color-accent-primary), var(--shadow-xl);
}
.dg-plan__ribbon {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-full);
    background: var(--color-accent-primary);
    color: var(--color-text-on-dark);
    font-size: var(--text-xs);
    font-weight: var(--font-extrabold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.dg-plan__tag {
    display: inline-block;
    color: var(--color-accent-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.dg-plan__name {
    font-family: var(--font-family-headings);
    font-size: var(--text-2xl);
    color: var(--color-text-primary);
    margin: var(--space-2) 0;
}
.dg-plan__for {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    min-height: 3.2em;
}
.dg-plan__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: var(--space-5) 0 var(--space-1);
}
.dg-plan__amount {
    font-family: var(--font-family-headings);
    font-size: var(--text-4xl);
    font-weight: var(--font-extrabold);
    color: var(--color-text-primary);
}
.dg-plan__iva { color: var(--color-text-secondary); font-size: var(--text-base); }
.dg-plan__delivery {
    color: var(--color-text-accent);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-5);
}
.dg-plan__list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex-grow: 1;
}
.dg-plan__list li {
    position: relative;
    padding-left: var(--space-6);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}
.dg-plan__list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: var(--color-accent-primary);
    font-weight: var(--font-bold);
}
.dg-plan__list li strong { color: var(--color-text-primary); }
.dg-plan__legal {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-5);
}
.dg-plan__legal strong { color: var(--color-text-primary); }
.dg-plan__legal--tech {
    background: rgba(168, 168, 168, 0.10);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}
.dg-plan__legal--law {
    background: rgba(244, 216, 0, 0.10);
    border: 1px solid rgba(244, 216, 0, 0.35);
    color: var(--color-text-secondary);
}
.dg-plan__cta { width: 100%; text-align: center; margin-top: auto; }
.dg-plan__ctas {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: auto;
}
.dg-plan__ctas .dg-plan__cta { margin-top: 0; }
.dg-plan__cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-4);
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color var(--transition-fast);
}
.dg-plan__cta-secondary:hover { color: var(--color-text-accent); }
.dg-plan__cta-secondary-ico { font-size: 1rem; text-decoration: none; }

/* ---- Modal de contratación (T&C inline + firma electrónica + pago) ---- */
.dg-contract__intro {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-5);
}
/* Bloque scrollable con el texto completo de los T&C. El usuario los lee
   dentro del propio modal antes de firmar. */
.dg-contract__terms {
    max-height: 15rem;
    overflow-y: auto;
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.2);
    scrollbar-width: thin;
    scrollbar-color: rgba(244, 216, 0, 0.3) transparent;
}
.dg-contract__terms::-webkit-scrollbar { width: 6px; }
.dg-contract__terms::-webkit-scrollbar-thumb { background: rgba(244, 216, 0, 0.3); border-radius: 4px; }
/* El texto legal ya trae sus propios estilos vía .dg-legal en las páginas;
   acá lo compactamos un poco para el contexto del modal. */
.dg-contract__terms h2 {
    font-family: var(--font-family-headings);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    margin: var(--space-4) 0 var(--space-2);
}
.dg-contract__terms h2:first-child { margin-top: 0; }
.dg-contract__terms p,
.dg-contract__terms li {
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}
.dg-contract__terms ul { margin: 0 0 var(--space-2) var(--space-5); }
.dg-contract__terms strong { color: var(--color-text-primary); }
.dg-contract__terms a { color: var(--color-text-accent); text-decoration: underline; }

/* Los bloques ocultos del formulario (empresa/cargo/autorización) usan el
   atributo [hidden]; forzamos que gane sobre display:flex/block de las clases. */
.dg-contract__form [hidden] { display: none !important; }

.dg-contract__signed {
    margin-top: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--color-accent-primary);
    border-radius: var(--radius-md);
    background: rgba(244, 216, 0, 0.06);
    text-align: center;
}
.dg-contract__signed-msg {
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}
.dg-contract__signed-pay { width: 100%; justify-content: center; }

.dg-contract__step-label {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}
.dg-contract__type {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.dg-contract__type-opt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.dg-contract__type-opt input { position: absolute; opacity: 0; pointer-events: none; }
.dg-contract__type-opt:has(input:checked) {
    border-color: var(--color-accent-primary);
    background: rgba(244, 216, 0, 0.08);
    color: var(--color-text-primary);
}

.dg-contract__field { margin-bottom: var(--space-4); }
.dg-contract__field label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
}
.dg-contract__field input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: var(--text-base);
}
.dg-contract__field input:focus {
    outline: none;
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 2px rgba(244, 216, 0, 0.15);
}
.dg-contract__checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--color-text-secondary);
    cursor: pointer;
}
.dg-contract__checkbox input { margin-top: 2px; width: 1.1rem; height: 1.1rem; flex-shrink: 0; cursor: pointer; }
.dg-contract__legal-note {
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
    color: var(--color-text-muted);
    margin-bottom: var(--space-5);
}
.dg-contract__legal-note strong { color: var(--color-text-secondary); }
.dg-contract__submit { width: 100%; justify-content: center; align-items: center; gap: 0.6rem; }
.dg-contract__submit:disabled { opacity: 0.85; cursor: progress; }
.dg-contract__submit-spinner {
    display: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    flex-shrink: 0;
    animation: dg-spin 0.7s linear infinite;
}
.dg-contract__submit.is-loading .dg-contract__submit-spinner { display: inline-block; }
@keyframes dg-spin {
    to { transform: rotate(360deg); }
}
.dg-contract__error {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: rgba(230, 57, 70, 0.12);
    border: 1px solid rgba(230, 57, 70, 0.4);
    color: #ff8890;
    font-size: var(--text-sm);
    text-align: center;
}
.dg-plans__note {
    text-align: center;
    margin-top: var(--space-8);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}
.dg-plans__note a { color: var(--color-text-accent); text-decoration: underline; }

/* ---- Tabla comparativa ---- */
/* .front-container es flex + align-items:center: sin un ancho explícito
   acá, el navegador dimensiona este bloque a su contenido (la tabla,
   min-width 640px) y lo CENTRA — dejando la mitad izquierda fuera de
   vista desde el primer render, sin forma de scrollearla. */
.dg-table-outer {
    width: 100%;
    align-self: stretch;
}
.dg-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.dg-table {
    width: 100%;
    min-width: 640px;
    /* separate + border-spacing:0 en vez de collapse: con collapse, Chrome
       tiene un bug conocido que rompe position:sticky en celdas de tabla. */
    border-collapse: separate;
    border-spacing: 0;
    color: var(--color-text-secondary);
}
.dg-table th, .dg-table td {
    padding: var(--space-4);
    text-align: center;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
}
.dg-table thead th {
    color: var(--color-text-primary);
    font-family: var(--font-family-headings);
    font-size: var(--text-base);
}
.dg-table thead th span { color: var(--color-text-secondary); font-size: var(--text-xs); font-weight: var(--font-normal); }
.dg-table tbody td:first-child, .dg-table thead th:first-child {
    text-align: left;
    color: var(--color-text-primary);
}
.dg-table__hl { background: rgba(244, 216, 0, 0.07); }
.dg-table thead .dg-table__hl { border-top: 2px solid var(--color-accent-primary); }
.dg-table__foot td { font-weight: var(--font-bold); color: var(--color-text-primary); }

/* En pantallas angostas la tabla scrollea horizontal: la primera columna
   (el nombre de cada fila) queda fija para que no se pierda de vista. */
@media (max-width: 720px) {
    /* Antes había un degradado ::after como "hint" de que hay más columnas
       a la derecha, pero al ser absolute dentro del wrap queda fijo en
       pantalla y flota sobre el contenido que scrollea debajo — se ve como
       una sombra "pegada". Se saca; el scrollbar visible ya cumple ese rol. */
    /* table-layout:fixed para poder limitar la columna 1 a un ancho fijo —
       con layout auto el navegador la agranda según su contenido más largo
       y deja casi sin espacio a las demás columnas. Un % acá se calcula
       sobre el ancho de la TABLA (560px), no sobre lo visible en pantalla,
       así que usamos un valor fijo pensado para el viewport, no la tabla. */
    .dg-table { min-width: 560px; table-layout: fixed; }
    .dg-table th, .dg-table td { padding: var(--space-3); font-size: var(--text-xs); }
    /* Scroll-snap: al soltar el dedo, el scroll se engancha al borde de la
       columna más cercana. Sin esto, es fácil quedar "a medio camino" entre
       dos columnas, con la anterior semi-escondida detrás de la columna
       fija — se ve como si el contenido estuviera roto/cortado. */
    .dg-table-wrap { scroll-snap-type: x proximity; }
    .dg-table th, .dg-table td { scroll-snap-align: start; }
    .dg-table tbody td:first-child, .dg-table thead th:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        width: 8.5rem;
        background: var(--color-bg-secondary);
        /* Este box-shadow sí es correcto: pertenece a la columna sticky
           misma (no a un ::after aparte en el contenedor), así que se
           mueve CON ella como es esperable — el problema real era el
           degradado ::after separado, ya eliminado. */
        border-right: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow: 4px 0 8px rgba(255, 255, 255, 0.06);
    }
    .dg-table thead th:first-child { background: var(--color-bg-secondary); }
}

/* ---- Proceso ---- */
.dg-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-5);
}
.dg-step {
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-card);
}
.dg-step__n {
    font-family: var(--font-family-headings);
    font-size: var(--text-3xl);
    font-weight: var(--font-extrabold);
    color: var(--color-accent-primary);
    margin-bottom: var(--space-2);
}
.dg-step h3 { color: var(--color-text-primary); font-size: var(--text-lg); margin-bottom: var(--space-2); }
.dg-step p { color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-snug); }
.dg-proceso__cta,
.dg-comparativa__cta,
.dg-faq__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    text-align: center;
    margin-top: var(--space-10);
}

/* ---- Dominios ---- */
.dg-domains {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
}
.dg-domain {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}

/* ---- Dos columnas: garantía / exclusiones ---- */
.dg-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
}
.dg-col {
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-card);
}
.dg-col__title {
    font-family: var(--font-family-headings);
    font-size: var(--text-xl);
    margin-bottom: var(--space-4);
}
.dg-col__title--ok { color: var(--color-success); }
.dg-col__title--no { color: var(--color-accent-secondary); }
.dg-col__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.dg-col__list li {
    position: relative;
    padding-left: var(--space-6);
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
}
.dg-col__list li::before { content: "✔"; position: absolute; left: 0; color: var(--color-success); font-weight: var(--font-bold); }
.dg-col__list--no li::before { content: "✕"; color: var(--color-accent-secondary); }
.dg-col__list strong { color: var(--color-text-primary); }
.dg-col__note { margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); font-style: italic; }

/* ---- FAQ ---- */
.dg-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); }
.dg-faq__item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    overflow: hidden;
}
.dg-faq__item summary {
    cursor: pointer;
    padding: var(--space-4) var(--space-5);
    color: var(--color-text-primary);
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
}
.dg-faq__item summary::-webkit-details-marker { display: none; }
.dg-faq__item summary::after { content: "+"; color: var(--color-accent-primary); font-size: var(--text-2xl); line-height: 1; }
.dg-faq__item[open] summary::after { content: "−"; }
.dg-faq__item p { padding: 0 var(--space-5) var(--space-5); color: var(--color-text-secondary); line-height: var(--leading-relaxed); font-size: var(--text-sm); }

/* ---- Reserva (booking) ---- */
.dg-booking__pointer {
    max-width: 760px;
    margin: 0 auto var(--space-3);
    color: var(--color-text-accent);
    font-weight: var(--font-bold);
    font-size: var(--text-lg);
    text-align: center;
}
.dg-booking { max-width: 760px; margin: 0 auto var(--space-5); }
.dg-booking__placeholder {
    padding: var(--space-8);
    border: 1px dashed var(--color-border-hover);
    border-radius: var(--radius-lg);
    background: rgba(0, 0, 0, 0.15);
    color: var(--color-text-secondary);
    text-align: center;
    line-height: var(--leading-relaxed);
}
.dg-booking__placeholder strong { color: var(--color-text-primary); font-size: var(--text-lg); }

/* ============================================================
 * Responsive
 * ============================================================ */
@media (max-width: 960px) {
    .dg-plans { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
    .dg-plan__for { min-height: 0; }
    .dg-steps { grid-template-columns: repeat(2, 1fr); }
    .dg-two-col { grid-template-columns: 1fr; gap: var(--space-5); }
    .dg-deliverables { }
}
@media (max-width: 560px) {
    .dg-steps { grid-template-columns: 1fr; }
}

/* ============================================================
 * Términos y Condiciones (documento legal)
 * ============================================================ */
.dg-legal { max-width: 820px; margin: 0 auto; color: var(--color-text-secondary); }
.dg-legal__head { margin-bottom: var(--space-8); }
.dg-legal__head h1 {
    font-family: var(--font-family-headings);
    font-size: var(--text-3xl);
    color: var(--color-text-primary);
    line-height: var(--leading-tight);
    margin: var(--space-3) 0;
}
.dg-legal__meta { color: var(--color-text-muted); font-size: var(--text-sm); }
.dg-legal h2 {
    font-family: var(--font-family-headings);
    font-size: var(--text-xl);
    color: var(--color-text-primary);
    margin: var(--space-8) 0 var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}
.dg-legal p { line-height: var(--leading-relaxed); margin-bottom: var(--space-4); font-size: var(--text-base); }
.dg-legal ul { margin: 0 0 var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.dg-legal li { line-height: var(--leading-snug); }
.dg-legal strong { color: var(--color-text-primary); }
.dg-legal__back { margin-top: var(--space-10); }
.dg-legal__back a { color: var(--color-text-accent); text-decoration: underline; }

/* ---- Footer: link legal del Diagnóstico (solo aparece en estas páginas) ---- */
.front-footer__legal { margin-top: var(--space-2); font-size: var(--text-xs); }
.front-footer__legal a { color: inherit; text-decoration: underline; opacity: 0.75; }
.front-footer__legal a:hover { opacity: 1; }