/* ==========================================================================
   consent.css · Banner y panel de consentimiento
   soynoeliajimenez.com — Versens, septiembre 2026

   Se carga siempre después de lp.css: usa sus tokens de marca.
   Nada se muestra hasta que consent.js decide que hace falta preguntar.
   ========================================================================== */

.cmp{
  position:fixed;left:0;right:0;bottom:0;z-index:9999;
  padding:16px;
  display:none;
}
.cmp.on{display:block}

.cmp-caja{
  max-width:1020px;margin:0 auto;
  background:var(--crema-claro,#FBF8F1);
  border:1px solid var(--borde,#E3D9C4);
  border-top:3px solid var(--burdeos,#622128);
  border-radius:3px;
  box-shadow:0 10px 34px rgba(37,40,42,.18);
  padding:22px 24px;
}

.cmp h2{
  font-family:var(--serif,Georgia),serif;
  font-size:20px;color:var(--burdeos,#622128);
  margin:0 0 8px;font-weight:600;line-height:1.2;
}
.cmp p{
  margin:0 0 16px;
  font-family:var(--sans,Arial),sans-serif;
  font-size:14.5px;line-height:1.55;color:var(--texto,#3c4043);
  max-width:78ch;
}
.cmp a{color:var(--burdeos,#622128);font-weight:600}

/* Los tres botones al mismo nivel: rechazar cuesta lo mismo que aceptar. */
.cmp-botones{display:flex;flex-wrap:wrap;gap:10px}
.cmp-btn{
  font-family:var(--sans,Arial),sans-serif;
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:13px 22px;border-radius:3px;cursor:pointer;
  border:1.5px solid var(--burdeos,#622128);
  background:var(--blanco,#fff);color:var(--burdeos,#622128);
  flex:1 1 auto;min-width:150px;
  transition:background .15s ease,color .15s ease;
}
.cmp-btn:hover{background:var(--arena-suave,#EAE0C4)}
.cmp-btn:focus-visible{outline:3px solid var(--rojo,#A6192E);outline-offset:2px}
.cmp-btn.principal{background:var(--burdeos,#622128);color:var(--crema,#F5F0E3)}
.cmp-btn.principal:hover{background:var(--burdeos-claro,#7d3037)}

/* --- panel de detalle ---------------------------------------------------- */
.cmp-panel{display:none;margin:18px 0 4px;border-top:1px solid var(--borde,#E3D9C4);padding-top:18px}
.cmp-panel.on{display:block}

.cmp-cat{
  display:flex;gap:14px;align-items:flex-start;
  padding:14px 0;border-bottom:1px solid var(--borde,#E3D9C4);
}
.cmp-cat:last-of-type{border-bottom:0}
.cmp-cat h3{
  font-family:var(--sans,Arial),sans-serif;
  font-size:14px;font-weight:700;color:var(--tinta,#25282A);
  margin:0 0 4px;letter-spacing:0;text-transform:none;
}
.cmp-cat p{margin:0;font-size:13.5px;color:var(--gris,#6b6f72)}
.cmp-cat .texto{flex:1 1 auto;min-width:0}

/* Interruptor. Es un checkbox de verdad debajo. */
.cmp-sw{flex:none;position:relative;width:46px;height:26px;margin-top:2px}
.cmp-sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.cmp-sw .pista{
  display:block;width:46px;height:26px;border-radius:13px;
  background:#c8ccce;transition:background .15s ease;pointer-events:none;
}
.cmp-sw .bola{
  position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .15s ease;pointer-events:none;
}
.cmp-sw input:checked ~ .pista{background:var(--burdeos,#622128)}
.cmp-sw input:checked ~ .bola{transform:translateX(20px)}
.cmp-sw input:focus-visible ~ .pista{outline:3px solid var(--rojo,#A6192E);outline-offset:2px}
.cmp-sw input:disabled{cursor:default}
.cmp-sw input:disabled ~ .pista{background:var(--arena,#DFD1A7)}

.cmp-fijo{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris,#6b6f72);font-weight:600;margin-top:4px;
}

/* --- enlace de revocación en el pie -------------------------------------- */
.cmp-revocar{
  background:none;border:0;padding:0;
  font-family:inherit;font-size:inherit;color:var(--arena,#DFD1A7);
  text-decoration:underline;cursor:pointer;
}
.cmp-revocar:hover{color:var(--blanco,#fff)}

@media (max-width:640px){
  .cmp{padding:0}
  .cmp-caja{border-radius:0;border-left:0;border-right:0;padding:20px 18px}
  .cmp-btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .cmp-btn,.cmp-sw .pista,.cmp-sw .bola{transition:none}
}