/* Estilos propios de la migración, presentes en todas las páginas:
   consentimiento del formulario de leads y aviso de cookies. */

/* --- rejillas del tema: quitarles el sangrado de lista ---------------------
   Las rejillas de Litho son `ul.grid` maquetadas por Isotope, y su ancho de
   columna se calcula desde el `.grid-sizer`.

   index.html trae —heredado del sitio anterior— un `<style>` con
   `ul, ol { padding-left: 40px }`. En el sitio anterior era inofensivo porque
   el bloque del blog llegaba vacío y las tarjetas las inyectaba JavaScript;
   aquí se renderizan en el servidor con el marcado del tema, y la regla sí
   alcanza a la rejilla.

   El daño no se ve venir: Isotope posiciona los items en `absolute`, así que
   su `width: 33.33%` se resuelve contra la caja de relleno del `ul` (1170 px)
   mientras el `.grid-sizer`, que sigue en el flujo, la resuelve contra la caja
   de contenido (1130 px). Los 13 px de diferencia bastan para que cada tarjeta
   ocupe más de una columna al redondear, y las tres acaban apiladas en la
   primera. En /blog.html no pasaba porque esa página no lleva ese `<style>`.

   Basta con devolver el sangrado a cero. La clase gana por especificidad al
   `ul, ol` incrustado, así que no hace falta `!important`. Se aplica a
   `ul.grid` y no solo al blog para que cualquier rejilla del tema quede a
   salvo de lo mismo.
-------------------------------------------------------------------------- */

ul.grid {
    padding-left: 0;
}

/* --- formulario de contacto: consentimiento y errores --- */

.contacto__consentimiento label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.5;
    color: #777;
    cursor: pointer;
}

.contacto__consentimiento input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: #424345;
}

.contacto__consentimiento a { color: #212121; text-decoration: underline; }

.contacto__error {
    margin: 0 0 18px;
    padding: 12px 16px;
    border-left: 3px solid #c0392b;
    background: #fdf3f2;
    color: #a33227;
    font-size: 14px;
}

/* --- aviso de cookies --- */

.aviso-cookies {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1200;
    max-width: 720px;
    margin: 0 auto;
    padding: 18px 20px;
    background: #212121;
    color: #f4f4f4;
    border-radius: 4px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}

.aviso-cookies[hidden] { display: none; }

.aviso-cookies p {
    margin: 0;
    flex: 1 1 280px;
    font-size: 13px;
    line-height: 1.55;
}

.aviso-cookies a { color: #fff; text-decoration: underline; }

.aviso-cookies__acciones { display: flex; gap: 10px; flex: 0 0 auto; }

.aviso-cookies__si,
.aviso-cookies__no {
    height: 40px;
    padding: 0 20px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid #f4f4f4;
}

.aviso-cookies__si { background: #f4f4f4; color: #212121; }
.aviso-cookies__no { background: transparent; color: #f4f4f4; }

/* El botón flotante de WhatsApp no debe quedar tapado por el aviso. */
@media (max-width: 767px) {
    .aviso-cookies { bottom: 96px; }
}