/* ============================================================
   cookies.css
   El aviso de cookies y la ventana para gestionarlas.

   El marcado de referencia venia escrito con utilidades de
   Tailwind (w-[32.552vw], bg-customBlack/60, md:rounded-[2.031vw]...).
   Este sitio no carga Tailwind, asi que esas clases no existirian y
   el bloque saldria sin ningun estilo. Aqui esta cada utilidad
   traducida a CSS, respetando las medidas originales.

   Una diferencia deliberada respecto al original: alli TODO se mide
   en vw, incluida la letra. A 1536px de ancho eso da 12,8px y se lee
   bien, pero a 768px -justo donde entra el punto de corte md- la
   misma formula da 6,4px, ilegible. Cada medida de texto y de altura
   va aqui dentro de un clamp() con un minimo y un maximo: la
   proporcion es la misma en los tamaños para los que se diseño, y
   deja de romperse en los extremos.

   Todo cuelga de .ck-: no hay ni una regla que toque etiquetas
   sueltas, para que esto no pueda afectar a nada del blog.
   ============================================================ */

/* Bulma ya pone border-box en todo, pero esto no depende de que Bulma
   siga cargandose ni de en que orden: las medidas de aqui abajo estan
   pensadas contando el relleno dentro, y con content-box la barra se
   iria 46px mas ancha de lo dibujado. */
[class^="ck-"],
[class*=" ck-"] {
    box-sizing: border-box;
}

:root {
    --ck-ink: #16181d;
    --ck-ink-soft: #707070;
    --ck-line: rgb(128 112 112 / 33%);
    --ck-gray: #f0f1f4;      /* customRegularGray: los botones del pie */
    --ck-gray-off: #c9cdd6;  /* customSemiboldGray: el interruptor apagado */
    --ck-on: #22c55e;
    --ck-ease: cubic-bezier(0.32, 0.08, 0.24, 1);
}

/* ------------------------------------------------------------
   1. La barra del aviso
   ------------------------------------------------------------ */

/* Sale de la maquetacion (fixed) y se pega abajo a la derecha. El
   fondo es negro al 60% con desenfoque por detras: sobre un articulo
   claro se lee, y sobre las ondas de color tambien, sin tener que
   cambiar de color por tema. */
.ck-bar {
    position: fixed;
    right: 4vw;
    bottom: 5vw;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5vw;
    width: 90vw;
    min-height: clamp(2.9rem, 10vw, 3.4rem);
    padding: 0.5rem 2vw;
    background-color: rgb(22 24 29 / 60%);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 5vw;
}

/* Mientras no se decida nada, el aviso no debe existir para el raton
   ni para el lector de pantalla. Se usa el atributo hidden del propio
   HTML y no una clase: asi el estado vive en el marcado. */
.ck-bar[hidden],
.ck-modal[hidden],
.ck-backdrop[hidden] {
    display: none;
}

.ck-text {
    margin: 0;
    font-family: 'satoshiregular';
    font-size: clamp(0.72rem, 2.5vw, 0.9rem);
    line-height: 1.35;
    color: rgb(255 255 255 / 70%);
}

/* La palabra "cookies" abre la ventana. Es un <button> y no un <span>
   con onclick: asi se alcanza tabulando y responde al Enter sin que
   haya que programar nada. Estas cuatro lineas son las que le quitan
   la apariencia de boton. */
.ck-link {
    padding: 0;
    font: inherit;
    color: #fff;
    background: none;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.3s var(--ck-ease);
}

    .ck-link:hover {
        color: rgb(255 255 255 / 70%);
    }

.ck-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: 1.2vw;
}

/* ---------- Los dos botones ---------- */

.ck-gear,
.ck-accept {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ck-ink);
    background-color: #fff;
    border: 0;
    cursor: pointer;
    transition: opacity 0.3s var(--ck-ease);
}

    .ck-gear:hover,
    .ck-accept:hover {
        opacity: 0.65;
    }

.ck-gear {
    width: clamp(2.1rem, 7.108vw, 2.6rem);
    height: clamp(2.1rem, 7vw, 2.6rem);
    padding: 0;
    border-radius: 999px;
}

    .ck-gear svg {
        width: 45%;
        height: 45%;
        fill: currentColor;
    }

.ck-accept {
    gap: 2vw;
    width: clamp(7.5rem, 25vw, 9rem);
    height: clamp(2.1rem, 7vw, 2.6rem);
    padding: 0;
    font-family: 'satoshimedium';
    font-size: clamp(0.7rem, 2vw, 0.85rem);
    border-radius: 999px;
}

    .ck-accept svg {
        width: clamp(0.55rem, 2.5vw, 0.7rem);
        height: auto;
        fill: currentColor;
    }

.ck-accept p {
    margin: 0;
}

/* ---------- De tableta hacia arriba ---------- */

@media screen and (min-width: 768px) {
    .ck-bar {
        /* El clamp del original: no se pega al borde en pantallas
           estrechas ni se va al centro en las muy anchas. */
        right: clamp(1.6rem, 3.5vw, 13rem);
        bottom: 2vw;
        gap: 1.5vw;
        width: clamp(26rem, 32.552vw, 40rem);
        min-height: clamp(3.2rem, 4.01vw, 4.4rem);
        padding: 0.4rem 1vw 0.4rem 2vw;
        border-radius: 999px;
    }

    .ck-text {
        font-size: clamp(0.78rem, 0.833vw, 0.95rem);
    }

    .ck-actions {
        gap: 0.5vw;
    }

    .ck-gear {
        width: clamp(2.3rem, 2.708vw, 2.9rem);
        height: clamp(2.3rem, 2.708vw, 2.9rem);
    }

    .ck-accept {
        gap: 0.5vw;
        width: clamp(6.6rem, 7.708vw, 8.4rem);
        height: clamp(2.3rem, 2.708vw, 2.9rem);
        font-size: clamp(0.72rem, 0.633vw, 0.85rem);
    }

        .ck-accept svg {
            width: clamp(0.5rem, 0.897vw, 0.62rem);
        }
}

/* ------------------------------------------------------------
   2. La ventana
   ------------------------------------------------------------ */

/* El velo. Ademas de apartar la pagina, es lo que impide seguir usandola
   mientras la ventana esta abierta: sin el se puede hacer clic en
   cualquier enlace de detras.

   Los mismos valores exactos que .navbar-search-backdrop, para que abrir
   esta ventana y abrir el buscador se sientan como la misma accion del
   mismo sitio. Antes era negro al 45%, que funcionaba pero era un
   segundo idioma para decir lo mismo.

   Aqui el trabajo no lo hace el color sino backdrop-filter, que
   difumina lo que hay pintado por detras: por eso el relleno puede ser
   claro y casi transparente y aun asi la pagina se aparta. Con un color
   solido a la misma opacidad el texto de detras seguiria leyendose. */
.ck-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
    background-color: rgb(238 241 246 / 45%);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

/* Y el respaldo para quien no tenga backdrop-filter: sin el, ese relleno
   al 45% dejaria la pagina perfectamente legible por detras de la
   ventana. Se sube la opacidad para que el velo tape por si solo. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .ck-backdrop {
        background-color: rgb(238 241 246 / 88%);
    }
}

/* El centrado va con inset:0 + margin:auto y NO con
   top:50%/left:50%/translate(-50%,-50%), que es como estaba en la
   referencia. El motivo es que GSAP anima la entrada con un scale, y
   scale se escribe en la misma propiedad transform que ese translate:
   la primera vez que GSAP toca el elemento se lleva por delante el
   centrado y la ventana salta a la esquina inferior derecha. Con
   margin:auto el centrado no vive en transform y las dos cosas dejan
   de pisarse.

   Para que margin:auto centre hace falta que el alto no sea automatico
   del todo, de ahi height: fit-content con su tope. */
.ck-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 50rem;
    height: -moz-fit-content;
    height: fit-content;
    max-height: 75dvh;
    margin: auto;
    background-color: #fff;
    border-radius: 5vw;
    /* La linea de pelo es la misma que separa el panel del buscador de la
       pagina. Con el velo oscuro el borde de la ventana lo dibujaba el
       contraste; ahora que el velo es claro, blanco contra gris claro se
       queda sin filo y hace falta decirlo explicitamente. */
    border: 1px solid rgb(55 56 73 / 8%);
    box-shadow: 0 24px 60px -20px rgb(22 24 29 / 30%);
    overflow: hidden;
}

.ck-close {
    position: absolute;
    top: 5vw;
    right: 4.5vw;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    transition: opacity 0.3s var(--ck-ease);
}

    .ck-close:hover {
        opacity: 0.6;
    }

    .ck-close svg {
        width: 0.9rem;
        height: 0.9rem;
    }

.ck-head {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-height: clamp(3.4rem, 20vw, 4.6rem);
    padding-left: 4.7vw;
}

    .ck-head h2 {
        margin: 0;
        font-family: 'satoshibold';
        font-size: clamp(1rem, 3.4vw, 1.25rem);
        color: var(--ck-ink);
    }

.ck-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;   /* sin esto el hijo con scroll no se encoge */
    padding: 4.6vw;
}

/* ---------- La lista ---------- */

/* data-lenis-prevent en el original evita que el scroll suave de la
   pagina se coma el de aqui dentro. Aqui no hay Lenis, pero
   overscroll-contain hace la otra mitad del trabajo: al llegar al
   final de la lista, la rueda no sigue moviendo la pagina de fondo. */
.ck-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 1.742vw;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.ck-row {
    display: flex;
    flex-direction: row;
    gap: 5vw;
}

.ck-copy {
    display: flex;
    flex-direction: column;
    gap: 3vw;
    flex: 1;
    padding-bottom: 4.8vw;
    margin-right: 1vw;
    border-bottom: 1px solid var(--ck-line);
}

/* A la ultima le sobra la linea: no separa de nada. */
.ck-list > .ck-row:last-child .ck-copy {
    border-bottom: 0;
    padding-bottom: 0;
}

.ck-row-title {
    margin: 0;
    font-family: 'satoshibold';
    font-size: clamp(0.95rem, 3vw, 1.15rem);
    color: var(--ck-ink);
}

.ck-row-desc {
    margin: 0;
    font-family: 'satoshiregular';
    font-size: clamp(0.8rem, 2.333vw, 0.95rem);
    line-height: 1.5;
    color: var(--ck-ink-soft);
}

/* ---------- El interruptor ---------- */

.ck-toggle {
    display: flex;
    align-items: center;
    gap: 1vw;
    height: -moz-fit-content;
    height: fit-content;
}

/* El carril. Es un <button role="switch">: el navegador y el lector de
   pantalla ya saben que es un interruptor y que aria-checked dice si
   esta encendido, sin necesidad de explicarlo. */
.ck-switch {
    position: relative;
    display: flex;
    align-items: center;
    width: clamp(2.6rem, 8.5vw, 3.1rem);
    height: clamp(1.35rem, 4vw, 1.6rem);
    padding: 0;
    background-color: var(--ck-gray-off);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.3s var(--ck-ease);
}

    .ck-switch[aria-checked="true"] {
        background-color: var(--ck-on);
    }

    /* Las obligatorias no se pueden apagar. Se marcan con
       aria-disabled y no con disabled a secas para que sigan
       recibiendo el foco: quien navega con teclado tiene derecho a
       leer que existen y que estan encendidas. */
    .ck-switch[aria-disabled="true"] {
        background-color: rgb(34 197 94 / 50%);
        cursor: not-allowed;
    }

/* La bolita. Se mueve con translateX y no cambiando left, que
   obligaria a recalcular la maquetacion en cada fotograma. */
.ck-knob {
    position: absolute;
    left: 0.15rem;
    width: clamp(1.05rem, 3.6vw, 1.25rem);
    height: clamp(1.05rem, 3.6vw, 1.25rem);
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgb(22 24 29 / 20%);
    transition: transform 0.3s var(--ck-ease);
}

.ck-switch[aria-checked="true"] .ck-knob {
    /* Ancho del carril, menos el de la bolita, menos los dos huecos.
       Escrito asi y no con un numero fijo, el recorrido sigue siendo
       correcto cuando el clamp cambia de tamaño. */
    transform: translateX(calc(clamp(2.6rem, 8.5vw, 3.1rem)
                              - clamp(1.05rem, 3.6vw, 1.25rem)
                              - 0.3rem));
}

.ck-state {
    font-family: 'satoshimedium';
    font-size: clamp(0.62rem, 2vw, 0.75rem);
    color: #6b7280;
}

    .ck-state.is-on {
        color: var(--ck-on);
    }

/* ---------- Los botones del pie ---------- */

.ck-foot {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    flex-shrink: 0;
    gap: 1vw;
    padding-top: 6dvw;
}

.ck-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
    width: 45vw;
    height: clamp(2.1rem, 7vw, 2.6rem);
    padding: 0;
    font-family: 'satoshimedium';
    font-size: clamp(0.7rem, 2vw, 0.85rem);
    text-align: center;
    color: var(--ck-ink);
    background-color: var(--ck-gray);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: opacity 0.3s var(--ck-ease);
}

    .ck-btn:hover {
        opacity: 0.65;
    }

    .ck-btn svg {
        flex-shrink: 0;
        width: clamp(0.6rem, 2.8vw, 0.8rem);
        height: auto;
        fill: currentColor;
    }

/* ---------- De tableta hacia arriba ---------- */

@media screen and (min-width: 768px) {
    .ck-modal {
        width: 95vw;
        max-height: 42.458vw;
        border-radius: 1rem;
    }

    .ck-close {
        top: 1.2vw;
        right: 1vw;
    }

    .ck-head {
        min-height: clamp(3.4rem, 6.5vw, 5.4rem);
        padding-left: 2.5vw;
        padding-top: 1vw;
    }

        .ck-head h2 {
            font-size: clamp(1rem, 1.042vw, 1.3rem);
        }

    .ck-body {
        padding: 2.6vw;
    }

    .ck-row {
        gap: 2vw;
    }

    .ck-copy {
        gap: 1vw;
        padding-bottom: 2.5vw;
    }

    .ck-row-title {
        font-size: clamp(0.95rem, 1.042vw, 1.25rem);
    }

    .ck-row-desc {
        font-size: clamp(0.8rem, 0.833vw, 1rem);
        line-height: 1.55;
    }

    .ck-switch {
        width: clamp(2.4rem, 2.213vw, 3rem);
        height: clamp(1.3rem, 1.533vw, 1.6rem);
    }

    .ck-knob {
        width: clamp(1rem, 1.243vw, 1.25rem);
        height: clamp(1rem, 1.243vw, 1.25rem);
    }

    .ck-switch[aria-checked="true"] .ck-knob {
        transform: translateX(calc(clamp(2.4rem, 2.213vw, 3rem)
                                  - clamp(1rem, 1.243vw, 1.25rem)
                                  - 0.3rem));
    }

    .ck-state {
        font-size: clamp(0.62rem, 0.625vw, 0.8rem);
    }

    .ck-foot {
        gap: 0.5vw;
        padding: 1.3vw 0vw 0vw 0vw;
    }

    .ck-btn {
        gap: 0.5vw;
        width: clamp(11rem, 15.5vw, 16rem);
        height: clamp(2.1rem, 2.108vw, 2.7rem);
        font-size: clamp(0.72rem, 0.729vw, 0.9rem);
    }

        .ck-btn svg {
            width: clamp(0.6rem, 1.127vw, 0.85rem);
        }
}

@media screen and (min-width: 1024px) {
    .ck-modal {
        width: 55vw;
        max-width: none;
    }
}

/* ------------------------------------------------------------
   3. Estados de partida y menos movimiento
   ------------------------------------------------------------ */

/* Igual que en animations.css: lo que empieza invisible solo se
   esconde si .js-anim esta puesta, o sea si hay JavaScript y el
   sistema no pide menos movimiento. Si no, aparece sin animacion en
   vez de quedarse en blanco para siempre. */
.js-anim .ck-bar,
.js-anim .ck-modal,
.js-anim .ck-backdrop {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .ck-link,
    .ck-gear,
    .ck-accept,
    .ck-btn,
    .ck-close,
    .ck-switch,
    .ck-knob {
        transition: none;
    }
}