/*
 * La cara pública de CitaBot.
 *
 * Sobria a propósito: quien llega aquí o va a entrar a su panel, o es un
 * revisor de Google comprobando qué hace la aplicación con los datos de sus
 * usuarios. Ninguno de los dos viene a que le vendan nada — eso pasa en
 * maherassw.es/citabot, que sí es una página de ventas.
 *
 * Sin estilos en línea: la CSP del sitio es `style-src 'self'`.
 */

:root {
    --tinta: #1c2430;
    --tinta-suave: #4a5568;
    --fondo: #f7f8fa;
    --papel: #ffffff;
    --borde: #e2e6ec;
    --acento: #8a6d3b;
    --oscuro: #1c2430;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.inicio {
    max-width: 46rem;
    margin: 0 auto;
    padding: 3rem 1.25rem 4rem;
}

/* ── Portada ─────────────────────────────────────────────────────────── */

.marca {
    margin: 0 0 1.5rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.marca span { color: var(--acento); }

.portada h1 {
    margin: 0 0 1rem;
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    line-height: 1.15;
    letter-spacing: -.02em;
}

.entradilla {
    margin: 0 0 1.75rem;
    font-size: 1.1rem;
    color: var(--tinta-suave);
}

.acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 0 0 3.5rem;
}

.boton {
    display: inline-block;
    padding: .7rem 1.25rem;
    background: var(--oscuro);
    border: 1px solid var(--oscuro);
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.boton:hover { opacity: .9; }

.boton.segundo {
    background: transparent;
    border-color: var(--borde);
    color: var(--tinta);
}

.boton.segundo:hover { border-color: var(--acento); }

/* ── Secciones ───────────────────────────────────────────────────────── */

section {
    margin: 0 0 2rem;
    padding: 1.75rem;
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: 12px;
}

h2 {
    margin: 0 0 1rem;
    font-size: 1.3rem;
    line-height: 1.3;
}

p { margin: 0 0 1rem; }

/*
 * Acotado a `section` a propósito. Suelto, `p:last-child` gana por
 * especificidad a `.acciones` —una pseudoclase pesa más que nada— y como los
 * botones de la portada son el último hijo de su cabecera, se comía su margen
 * inferior entero: la primera tarjeta quedaba pegada a los botones.
 */
section p:last-child { margin-bottom: 0; }

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

/* ── Los pasos ───────────────────────────────────────────────────────── */

.pasos {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pasos li {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--borde);
}

.pasos li:first-child { border-top: 0; padding-top: 0; }
.pasos li:last-child { padding-bottom: 0; }

.numero {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: 50%;
    font-size: .85rem;
    font-weight: 700;
    color: var(--acento);
}

.pasos h3 {
    margin: 0 0 .25rem;
    font-size: 1rem;
}

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

/*
 * ── Los permisos ─────────────────────────────────────────────────────
 *
 * En <dl> y no en tabla: no son datos que se comparen entre sí, son un
 * permiso y su explicación. Y apilados en móvil, que es donde más se lee
 * esto — el cliente abre el enlace desde el WhatsApp donde se lo mandaste.
 */
.permisos {
    display: grid;
    gap: 0;
    margin: 0 0 1.25rem;
}

.permisos dt {
    padding: 1rem 0 .25rem;
    border-top: 1px solid var(--borde);
    font-weight: 600;
}

.permisos dt:first-of-type { border-top: 0; padding-top: 0; }

.permisos dd {
    margin: 0 0 .25rem;
    color: var(--tinta-suave);
    font-size: .95rem;
}

.menudo {
    font-size: .875rem;
    color: var(--tinta-suave);
}

/* ── Pie ─────────────────────────────────────────────────────────────── */

footer {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--borde);
    font-size: .875rem;
    color: var(--tinta-suave);
}

footer p { margin: 0 0 .5rem; }

@media (prefers-color-scheme: dark) {
    :root {
        --tinta: #e8ecf2;
        --tinta-suave: #a8b2c1;
        --fondo: #12171f;
        --papel: #1a2029;
        --borde: #2a323d;
        --acento: #d4b483;
        --oscuro: #d4b483;
    }
    .boton { color: #12171f; }
    .boton.segundo { color: var(--tinta); }
    .numero { background: #12171f; }
}