/* =============================================================================
   Sitio institucional de DIADOLOS.
   Todo en una hoja: son tres páginas estáticas, no hace falta más.

   Sin tipografías externas ni ningún recurso de terceros a propósito: el sitio no
   debe hacer que el navegador de un visitante hable con nadie más que con nosotros.
   Eso vale doble en un sitio cuya política de privacidad dice justamente eso.

   Paleta propia de la PLATAFORMA, deliberadamente distinta del amarillo y azul de
   TodoPollo: diadolos.com no es la página de ningún cliente.
   ============================================================================= */

:root {
    --tinta: #12141a;
    --tinta-suave: #5a6172;
    --papel: #ffffff;
    --papel-suave: #f7f8fa;
    --borde: #e4e7ee;
    --acento: #2f5bea;
    --acento-oscuro: #1e3fa8;
    --radio: 14px;
    --ancho: 68rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --tinta: #eef1f6;
        --tinta-suave: #9aa3b5;
        --papel: #101218;
        --papel-suave: #171a22;
        --borde: #262b36;
        --acento: #7d9bff;
        --acento-oscuro: #a9bdff;
    }
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-text-size-adjust: 100%;
}

.envoltorio {
    width: 100%;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* --- Cabecera --------------------------------------------------------------- */
.cabecera {
    border-bottom: 1px solid var(--borde);
}

.cabecera__interior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    max-width: var(--ancho);
    margin: 0 auto;
}

.marca {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: var(--tinta);
    text-decoration: none;
}

.marca__punto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--acento);
    flex: none;
}

.cabecera__nav {
    display: flex;
    gap: 1.4rem;
    font-size: 0.93rem;
}

.cabecera__nav a {
    color: var(--tinta-suave);
    text-decoration: none;
}

.cabecera__nav a:hover { color: var(--tinta); }

/* --- Portada ---------------------------------------------------------------- */
.portada {
    padding: 5rem 0 4rem;
    border-bottom: 1px solid var(--borde);
}

.portada h1 {
    margin: 0 0 1rem;
    font-size: clamp(2.3rem, 6vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
    font-weight: 800;
    max-width: 18ch;
}

.portada__bajada {
    margin: 0;
    max-width: 58ch;
    font-size: clamp(1.05rem, 2.2vw, 1.22rem);
    color: var(--tinta-suave);
}

/* --- Bloques ---------------------------------------------------------------- */
.seccion {
    padding: 4rem 0;
}

.seccion + .seccion { border-top: 1px solid var(--borde); }

.seccion h2 {
    margin: 0 0 0.6rem;
    font-size: 1.45rem;
    letter-spacing: -0.02em;
}

.seccion__intro {
    margin: 0 0 2.25rem;
    max-width: 60ch;
    color: var(--tinta-suave);
}

.grilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.1rem;
}

.tarjeta {
    padding: 1.4rem;
    background: var(--papel-suave);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}

.tarjeta h3 {
    margin: 0 0 0.4rem;
    font-size: 1.02rem;
    font-weight: 700;
}

.tarjeta p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--tinta-suave);
}

/* --- Documentos legales ----------------------------------------------------- */
.documento {
    padding: 3.5rem 0 4.5rem;
    max-width: 46rem;
}

.documento h1 {
    margin: 0 0 0.35rem;
    font-size: clamp(1.9rem, 4.5vw, 2.4rem);
    letter-spacing: -0.03em;
}

.documento__fecha {
    margin: 0 0 2.5rem;
    color: var(--tinta-suave);
    font-size: 0.92rem;
}

.documento h2 {
    margin: 2.5rem 0 0.7rem;
    font-size: 1.18rem;
    letter-spacing: -0.015em;
}

.documento h3 {
    margin: 1.6rem 0 0.4rem;
    font-size: 1rem;
}

.documento p, .documento li { color: var(--tinta); }

.documento ul { padding-left: 1.2rem; }

.documento li { margin-bottom: 0.4rem; }

.documento table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2rem 0;
    font-size: 0.94rem;
}

.documento th, .documento td {
    text-align: left;
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid var(--borde);
    vertical-align: top;
}

.documento th { font-weight: 700; }

/* Aviso de dato legal sin definir. Deliberadamente IMPOSIBLE de pasar por alto:
   estas páginas no se pueden publicar con un pendiente adentro. */
.pendiente {
    margin: 2rem 0;
    padding: 1.1rem 1.25rem;
    border: 2px dashed #d97706;
    border-radius: var(--radio);
    background: rgba(217, 119, 6, 0.08);
    font-size: 0.95rem;
}

.pendiente strong { color: #b45309; }

@media (prefers-color-scheme: dark) {
    .pendiente strong { color: #fbbf24; }
}

.pendiente ul { margin: 0.6rem 0 0; }

/* --- Pie -------------------------------------------------------------------- */
.pie {
    border-top: 1px solid var(--borde);
    padding: 2.25rem 0 3rem;
    color: var(--tinta-suave);
    font-size: 0.9rem;
}

.pie__interior {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    justify-content: space-between;
    align-items: center;
}

.pie a { color: var(--tinta-suave); }

.pie a:hover { color: var(--tinta); }

.pie__enlaces {
    display: flex;
    gap: 1.4rem;
}

a { color: var(--acento); }

a:hover { color: var(--acento-oscuro); }

:focus-visible {
    outline: 3px solid var(--acento);
    outline-offset: 2px;
}