/* =============================================================================
   Dentaláser — Banner de consentimiento de cookies + bloqueo previo de terceros
   Añadido el 08/09/2026 (bloqueante SEO-P0-5 de 13-SEO-WEB.md).

   Paleta: exclusivamente los colores de marca de CLAUDE.md
     --navy #184566 · --navy-dark #0d2a3d · --cyan #44D4E4 · --cyan-light #6BEDFB
     --white #FDFFFF · --steel #59879E
   Tipografías: las dos de marca (var(--f-d) Cottorway Pro, var(--f-b) Polly),
   con fallback explícito porque las landings no cargan css/styles.css.

   NO se toca css/styles.css (regla permanente de CLAUDE.md).
   Sin @import, sin fuentes externas, sin CSS en línea (compatible con CSP).
   ============================================================================= */

.dl-ck {
  --dl-ck-navy: #184566;
  --dl-ck-navy-dark: #0d2a3d;
  --dl-ck-cyan: #44D4E4;
  --dl-ck-cyan-light: #6BEDFB;
  --dl-ck-white: #FDFFFF;
  --dl-ck-steel: #59879E;

  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 9500;              /* por encima de nav (900) y de la barra CTA móvil (850) */
  width: min(420px, calc(100vw - 40px));
  box-sizing: border-box;
  padding: 22px 22px 18px;
  border-radius: 18px;
  border: 1px solid rgba(68, 212, 228, .28);
  background: linear-gradient(135deg, #0d2a3d 0%, #184566 60%, #10344f 100%);
  box-shadow: 0 18px 60px rgba(13, 42, 61, .45), 0 0 0 1px rgba(68, 212, 228, .08);
  color: var(--dl-ck-white);
  font-family: var(--f-b, 'Polly', 'DM Sans', system-ui, sans-serif);
  transform: translateY(14px);
  opacity: 0;
  transition: opacity .32s cubic-bezier(.16, 1, .3, 1),
              transform .32s cubic-bezier(.16, 1, .3, 1);
}
.dl-ck[hidden] { display: none !important; }
.dl-ck.dl-ck-in { opacity: 1; transform: translateY(0); }

.dl-ck-title {
  font-family: var(--f-d, 'CottorwayPro', 'DM Sans', system-ui, sans-serif);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--dl-ck-white);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.dl-ck-title svg { flex: 0 0 auto; color: var(--dl-ck-cyan); }

.dl-ck-text {
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 300;
  color: rgba(253, 255, 255, .82);
  margin: 0 0 16px;
}
.dl-ck-text a {
  color: var(--dl-ck-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dl-ck-text a:hover { color: var(--dl-ck-cyan-light); }

.dl-ck-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.dl-ck-btn {
  font-family: var(--f-d, 'CottorwayPro', 'DM Sans', system-ui, sans-serif);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .01em;
  border-radius: 999px;
  padding: 11px 20px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1),
              box-shadow .3s cubic-bezier(.16, 1, .3, 1),
              background-color .2s, color .2s, border-color .2s;
}
.dl-ck-btn:focus-visible { outline: 3px solid var(--dl-ck-cyan-light); outline-offset: 2px; }

.dl-ck-accept {
  flex: 1 1 auto;
  background: var(--dl-ck-cyan);
  color: var(--dl-ck-navy-dark);
}
.dl-ck-accept:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 40px rgba(68, 212, 228, .5), 0 0 80px rgba(107, 237, 251, .2);
}

.dl-ck-reject {
  background: transparent;
  color: var(--dl-ck-white);
  border-color: rgba(89, 135, 158, .55);
}
.dl-ck-reject:hover {
  transform: translateY(-3px);
  border-color: var(--dl-ck-cyan);
  color: var(--dl-ck-cyan);
}

/* — Botón discreto para volver a abrir el panel (retirada del consentimiento,
     obligatoria por RGPD). Aparece sólo cuando ya hay una decisión tomada. — */
.dl-ck-reopen {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 890;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(68, 212, 228, .3);
  background: rgba(13, 42, 61, .82);
  color: var(--cyan, #44D4E4);
  cursor: pointer;
  opacity: .42;
  transition: opacity .25s, transform .3s cubic-bezier(.16, 1, .3, 1);
}
.dl-ck-reopen:hover { opacity: 1; transform: translateY(-3px); }
.dl-ck-reopen:focus-visible { opacity: 1; outline: 3px solid var(--cyan, #44D4E4); outline-offset: 2px; }
.dl-ck-reopen[hidden] { display: none !important; }

/* — Marcador de posición de los iframes bloqueados (Google Maps) — */
.dl-ck-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  min-height: 220px;
  box-sizing: border-box;
  padding: 28px 22px;
  text-align: center;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(68, 212, 228, .08), rgba(24, 69, 102, .12)), #0d2a3d;
  color: var(--dl-ck-white, #FDFFFF);
  font-family: var(--f-b, 'Polly', 'DM Sans', system-ui, sans-serif);
}
.dl-ck-placeholder svg { color: #44D4E4; }
.dl-ck-ph-title {
  font-family: var(--f-d, 'CottorwayPro', 'DM Sans', system-ui, sans-serif);
  font-weight: 700;
  font-size: 15px;
  color: #FDFFFF;
}
.dl-ck-ph-text {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  max-width: 340px;
  color: rgba(253, 255, 255, .75);
}
.dl-ck-ph-btn {
  font-family: var(--f-d, 'CottorwayPro', 'DM Sans', system-ui, sans-serif);
  font-weight: 700;
  font-size: 13px;
  border: 0;
  border-radius: 999px;
  padding: 10px 20px;
  background: #44D4E4;
  color: #0d2a3d;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s cubic-bezier(.16, 1, .3, 1);
}
.dl-ck-ph-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 40px rgba(68, 212, 228, .5);
}
.dl-ck-ph-btn:focus-visible { outline: 3px solid #6BEDFB; outline-offset: 2px; }

/* — Enlace de gestión dentro de la política de privacidad (§10) — */
.dl-ck-manage-wrap { margin: 18px 0 6px; }
.dl-ck-manage {
  font-family: var(--f-d, 'CottorwayPro', 'DM Sans', system-ui, sans-serif);
  font-weight: 700;
  font-size: 14px;
  border: 1px solid #184566;
  border-radius: 999px;
  padding: 11px 22px;
  background: #184566;
  color: #FDFFFF;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s cubic-bezier(.16, 1, .3, 1);
}
.dl-ck-manage:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(24, 69, 102, .28);
}
.dl-ck-manage:focus-visible { outline: 3px solid #44D4E4; outline-offset: 2px; }

/* — Móvil: el panel ocupa el ancho y se coloca sobre la barra CTA fija (60 px) — */
@media (max-width: 768px) {
  .dl-ck {
    left: 12px;
    right: 12px;
    bottom: 72px;
    width: auto;
    padding: 18px 18px 16px;
    border-radius: 16px;
  }
  .dl-ck-actions .dl-ck-btn { flex: 1 1 100%; }
  .dl-ck-reopen { bottom: 68px; left: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .dl-ck, .dl-ck-btn, .dl-ck-reopen, .dl-ck-ph-btn, .dl-ck-manage { transition: opacity .01s linear; }
  .dl-ck-btn:hover, .dl-ck-reopen:hover, .dl-ck-ph-btn:hover, .dl-ck-manage:hover { transform: none; }
}