/* AutomateK · aviso de cookies. Hoja aparte para que se pueda quitar el aviso
   borrando dos líneas de cada página, sin tocar ninguna otra hoja.

   ACTUALIZADA EL 2026-08-26. Hasta hoy el aviso era informativo y tenía un solo
   botón, porque la web no ponía cookies. Ahora mide con Google Analytics, que
   sí las pone, así que es una petición de consentimiento y hay DOS botones.

   La regla que manda sobre el aspecto: rechazar tiene que costar lo mismo que
   aceptar. Mismo tamaño, misma fila, misma tipografía, mismo peso. Lo único que
   los distingue es el color, y el de rechazar no es más apagado ni más pequeño.
   Si algún día alguien hace el botón de rechazar más discreto para que se pulse
   menos, el consentimiento deja de ser libre y no vale.

   Lo que gobierna esta hoja es un problema de alto, no de ancho: el aviso va
   anclado abajo y el héroe de la portada ocupa la pantalla entera, así que en
   cualquier ventana baja el borde superior del aviso cae sobre el botón y la
   línea de la garantía. De ahí las dos reglas de base que valen en TODOS los
   anchos —tope de alto con desplazamiento propio en el párrafo— y el cambio de
   forma a partir de 900 px: ahí el aviso es una franja de una fila, no una
   tarjeta en columna, y por eso no llega al héroe. */

.ck-aviso{
  position:fixed;z-index:90;
  left:16px;right:16px;bottom:16px;
  max-width:430px;
  display:flex;flex-direction:column;gap:12px;
  background:#FFFFFF;color:#101114;
  border:1px solid #E3E4E8;border-radius:16px;
  padding:18px 20px;
  box-shadow:0 1px 2px rgba(16,17,20,.06), 0 18px 40px -22px rgba(16,17,20,.35);
  font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:13.5px;line-height:1.55;
  text-wrap:pretty;
}

/* Tope de alto: solo como red de seguridad en ventanas diminutas. El texto del
   consentimiento no se recorta — dice quién recibe los datos, que salen de la
   UE, cuánto duran las cookies y cómo cambiar de idea, y sin eso el
   consentimiento no está informado. Se le hace sitio, no se le esconde. */
.ck-txt{
  margin:0;color:#565D6B;
  max-height:clamp(84px,calc(100dvh - 280px),480px);
  overflow-y:auto;overscroll-behavior:contain;
}
.ck-txt strong{color:#101114;font-weight:600}
.ck-txt a{color:#565D6B;text-decoration:underline;text-underline-offset:3px}
.ck-txt a:hover{color:#1C4BD8}

/* Redacción larga en escritorio, corta en móvil. Las dos van en el HTML y la
   que no toca se oculta: sin JavaScript de por medio y sin dos avisos. */
.ck-corto{display:none}

/* Los dos botones van SIEMPRE en la misma fila, repartidos al 50 %. En fila y
   no apilados a propósito: apilados, el de arriba se lee como la opción y el de
   abajo como la alternativa, y aquí las dos valen igual. */
.ck-bts{align-self:flex-start;display:flex;gap:10px}

.ck-ok,
.ck-si{
  flex:1 1 0;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:10px 20px;
  border-radius:999px;
  font-family:inherit;font-size:13.5px;font-weight:600;
  line-height:1.2;
  cursor:pointer;
}

/* Rechazar */
.ck-ok{
  border:1px solid #E3E4E8;
  background:#F5F5F7;color:#101114;
}
.ck-ok:hover{background:#101114;color:#FFFFFF;border-color:#101114}

/* Aceptar */
.ck-si{
  border:1px solid #1C4BD8;
  background:#1C4BD8;color:#FFFFFF;
}
.ck-si:hover{background:#163CAE;border-color:#163CAE}

.ck-ok:focus-visible,
.ck-si:focus-visible{outline:2px solid #1C4BD8;outline-offset:2px}

/* «Preferencias de cookies» del pie. Cuando hay un enlace legal del que
   colgarse, el enlace hereda la clase de su vecino y esto no se aplica: esto es
   para las páginas cuyo pie no tiene ningún enlace al lado. */
.ck-pref-caja{margin-top:12px;font-size:13.5px}
.ck-pref-caja a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.ck-pref-caja a:hover{color:#1C4BD8}

/* ── Escritorio y tablet apaisado: franja de una fila ────────────
   Con el texto a lo ancho, el aviso mide dos líneas y no llega al héroe:
   a 1024 × 768 su borde superior queda en 668 y la garantía termina en 643. */
@media (min-width:900px){
  .ck-aviso{
    max-width:none;
    flex-direction:row;align-items:center;gap:20px;
    padding:14px 20px;
  }
  .ck-txt{flex:1 1 auto;min-width:0}
  .ck-bts{flex:0 0 auto;align-self:auto}
  .ck-ok,
  .ck-si{flex:0 0 auto}
}

/* Ventana de portátil o más baja: la franja flotante no cabe — su suelo son los
   dos botones de 44 px más el aire — así que se pega al borde inferior y pierde
   el aire que le sobra. La tarjeta flotante con esquinas queda para ventanas de
   más de 820 px de alto, que son las que tienen sitio de verdad. */
@media (min-width:900px) and (max-height:820px){
  .ck-aviso{
    left:0;right:0;bottom:0;
    border-radius:0;border-left:0;border-right:0;border-bottom:0;
    padding:10px 20px;gap:16px;
  }
}

/* El botón flotante de WhatsApp va fijo abajo a la derecha — 56 px de alto y
   unos 146 de ancho con su rótulo — y en una capa por encima del aviso (121
   contra 90), así que la franja le reserva su columna: ni el texto ni los
   botones pasan nunca por debajo. Separación del borde + ancho del botón +
   16 px de aire.

   La reserva se activa por clase, no siempre: el WhatsApp no está al cargar
   (sale al bajar), y reservarle sitio antes de tiempo le quita al párrafo justo
   el ancho que necesita. cookies.js pone `ck-wa` cuando el botón se hace
   visible de verdad. Va después de los dos bloques de arriba a propósito: tiene
   que ganar al `padding` abreviado de la ventana de portátil. */
@media (min-width:900px){
  .ck-aviso.ck-wa{padding-right:calc(28px + 146px + 16px)}
}

/* ── Móvil ───────────────────────────────────────────────────────────
   Aquí el aviso se juega el sitio con tres cosas: el par «botón + línea de la
   garantía» del héroe, la barra de acción de abajo y el botón de WhatsApp.

   Al cargar la página la barra y el WhatsApp no están (salen al bajar), así que
   el aviso va pegado abajo. Cuando salen, cookies.js le pone `ck-arriba` y el
   aviso se aparta por encima de los dos.

   Suelo de 16 px y botones de 48 px, como el resto del sitio. Al haber dos, se
   reparten el ancho en lugar de ocupar cada uno la línea entera. */
@media (max-width:899px){
  .ck-aviso{
    left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom));
    max-width:none;
    padding:14px 16px;gap:10px;
    font-size:16px;line-height:1.5;
  }
  .ck-aviso.ck-arriba{bottom:calc(148px + env(safe-area-inset-bottom))}
  .ck-largo{display:none}
  .ck-corto{display:inline}
  .ck-txt{
    font-size:16px;
    max-height:clamp(96px,calc(100dvh - 420px),320px);
    -webkit-overflow-scrolling:touch;
  }
  .ck-txt a{font-size:16px}
  .ck-bts{align-self:stretch}
  .ck-ok,
  .ck-si{
    min-height:48px;padding:12px 12px;font-size:16px;
  }
}

/* Por debajo de 360 px el titular del héroe ocupa una línea más, así que la
   garantía baja y el aviso tiene que ceder otro tanto. Y los dos botones se
   quedan sin holgura: se baja el texto a 15 px para que «Rechazar» no parta. */
@media (max-width:359px){
  .ck-txt{max-height:clamp(96px,calc(100dvh - 470px),280px)}
  .ck-ok,
  .ck-si{font-size:15px;padding:12px 8px}
}

/* Pantalla de móvil corta — con el cromo del navegador, casi todas: el aviso se
   pega al borde inferior y aprieta el aire, igual que hace en portátil. Son los
   últimos píxeles que hay entre la línea de la garantía y el borde. */
@media (max-width:899px) and (max-height:740px){
  .ck-aviso{
    left:0;right:0;bottom:0;
    border-radius:0;border-left:0;border-right:0;border-bottom:0;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));gap:8px;
  }
}