/* CantikCRM Legal — barra, modal y cookies */
.cl-bar, .cl-modal, .cl-cookies {
	--cl-burgundy: #A9165E; --cl-burgundy-deep: #86114A;
	--cl-ink: #26141C; --cl-ink-soft: #6B5860;
	--cl-cream: #FBF8F6; --cl-cream2: #F4ECEA; --cl-plum: #2A0E1C;
	--cl-blush: #FBEAF1; --cl-line: rgba(38,20,28,.12);
	font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
	-webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------- Barra */
.cl-bar { background: #1B0C13; color: rgba(251,248,246,.72); font-size: 14.5px; }
.cl-bar-in {
	max-width: 1400px; margin-inline: auto; padding: 14px 24px;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px;
}
.cl-bar-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.cl-bar-nav a, .cl-bar-c { color: inherit; }
.cl-bar-nav a { text-decoration: none; transition: color .2s; cursor: pointer; }
.cl-bar-nav a:hover { color: #fff; text-decoration: underline; }
.cl-bar-nav a:focus-visible { outline: 2px solid var(--cl-blush); outline-offset: 3px; }
@media (max-width: 720px) { .cl-bar-in { flex-direction: column; align-items: flex-start; } }

/* ---------------------------------------------------------------- Modal */
.cl-modal[hidden] { display: none; }
.cl-modal {
	position: fixed; inset: 0; z-index: 100000;
	display: flex; align-items: center; justify-content: center;
	padding: clamp(12px, 3vw, 40px);
	background: rgba(30,16,24,.72); backdrop-filter: blur(6px);
	animation: clFade .25s ease;
}
@keyframes clFade { from { opacity: 0 } to { opacity: 1 } }
.cl-dialog {
	display: flex; flex-direction: column;
	width: min(980px, 100%); max-height: min(88vh, 900px);
	background: #fff; border-radius: 20px; overflow: hidden;
	box-shadow: 0 40px 90px -30px rgba(30,10,20,.55);
}
.cl-head {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 20px 24px; background: var(--cl-cream2); border-bottom: 1px solid var(--cl-line);
}
.cl-head h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--cl-ink); }
.cl-x {
	flex: none; width: 40px; height: 40px; border-radius: 50%;
	border: 1px solid var(--cl-line); background: #fff; color: var(--cl-ink);
	display: grid; place-items: center; cursor: pointer;
	transition: background .2s, color .2s, transform .2s;
}
.cl-x:hover { background: var(--cl-ink); color: #fff; transform: rotate(90deg); }
.cl-x svg { width: 20px; height: 20px; }

.cl-tabs {
	display: flex; gap: 4px; padding: 12px 16px 0; overflow-x: auto;
	background: var(--cl-cream2); border-bottom: 1px solid var(--cl-line);
	scrollbar-width: thin;
}
.cl-tab {
	flex: none; font: inherit; font-size: 13.5px; font-weight: 600;
	color: var(--cl-ink-soft); background: none; border: 0;
	padding: 10px 14px; border-radius: 10px 10px 0 0; cursor: pointer; white-space: nowrap;
	border-bottom: 2px solid transparent; transition: color .2s, background .2s, border-color .2s;
}
.cl-tab:hover { color: var(--cl-burgundy); background: rgba(255,255,255,.6); }
.cl-tab.active { color: var(--cl-burgundy); background: #fff; border-bottom-color: var(--cl-burgundy); }
.cl-tab:focus-visible { outline: 2px solid var(--cl-burgundy); outline-offset: -2px; }

.cl-body { overflow-y: auto; padding: 26px clamp(20px, 4vw, 40px) 40px; }
.cl-doc { display: none; }
.cl-doc.active { display: block; animation: clUp .3s ease; }
@keyframes clUp { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

.cl-doc-title { margin: 0 0 8px; font-size: 26px; font-weight: 700; color: var(--cl-ink); }
.cl-updated { margin: 0 0 24px; font-size: 14px; color: var(--cl-ink-soft); }
.cl-doc h3 { margin: 28px 0 10px; font-size: 19px; font-weight: 700; color: var(--cl-ink); }
.cl-doc h4 { margin: 20px 0 8px; font-size: 16.5px; font-weight: 700; color: var(--cl-burgundy-deep); }
.cl-doc p { margin: 0 0 14px; font-size: 16px; line-height: 1.7; color: #3A2028; }
.cl-doc ul { margin: 0 0 14px; padding-left: 20px; list-style: disc; }
.cl-doc li { margin-bottom: 8px; font-size: 16px; line-height: 1.65; color: #3A2028; }
.cl-doc a { color: var(--cl-burgundy); }
.cl-doc strong { color: var(--cl-ink); }

.cl-table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: 15px; }
.cl-table th, .cl-table td { border: 1px solid var(--cl-line); padding: 8px 10px; text-align: left; }
.cl-table th { background: var(--cl-cream2); font-weight: 600; }

.cl-form-box {
	background: var(--cl-cream); border: 1px dashed var(--cl-line);
	border-radius: 12px; padding: 18px 20px; margin: 12px 0 18px;
}
.cl-form-box p { margin-bottom: 10px; }

/* --------------------------------------------------------------- Cookies */
.cl-cookies[hidden] { display: none; }
.cl-cookies {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 99999;
	padding: 14px; animation: clSlide .35s ease;
}
@keyframes clSlide { from { transform: translateY(100%) } to { transform: none } }
.cl-cookies-in {
	max-width: 1100px; margin-inline: auto;
	background: #fff; border: 1px solid var(--cl-line); border-radius: 16px;
	box-shadow: 0 24px 60px -20px rgba(30,10,20,.35);
	padding: 20px 22px;
	display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
}
.cl-cookies-txt { flex: 1; min-width: 260px; }
.cl-cookies-txt strong { display: block; font-size: 15px; color: var(--cl-ink); margin-bottom: 4px; }
.cl-cookies-txt p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--cl-ink-soft); }
.cl-cookies-txt a { color: var(--cl-burgundy); }
.cl-cookies-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* Aceptar y rechazar con el MISMO peso visual (guía AEPD) */
.cl-btn {
	font: inherit; font-size: 14px; font-weight: 600;
	padding: .7em 1.5em; border-radius: 999px; cursor: pointer;
	border: 1px solid transparent; min-width: 120px;
	transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.cl-btn-primary { background: var(--cl-burgundy); color: #fff; border-color: var(--cl-burgundy); }
.cl-btn-primary:hover { background: var(--cl-burgundy-deep); border-color: var(--cl-burgundy-deep); transform: translateY(-1px); }
.cl-btn-ghost { background: #fff; color: var(--cl-ink); border-color: rgba(38,20,28,.28); }
.cl-btn-ghost:hover { background: var(--cl-ink); color: #fff; border-color: var(--cl-ink); transform: translateY(-1px); }
.cl-btn:focus-visible { outline: 2.5px solid var(--cl-burgundy); outline-offset: 3px; }

.cl-cookies-config { flex-basis: 100%; border-top: 1px solid var(--cl-line); padding-top: 16px; }
.cl-switch { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; cursor: pointer; }
.cl-switch input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--cl-burgundy); }
.cl-switch strong { display: block; font-size: 14px; color: var(--cl-ink); }
.cl-switch small { display: block; font-size: 14px; color: var(--cl-ink-soft); margin-top: 2px; }

@media (max-width: 640px) {
	.cl-cookies-in { flex-direction: column; align-items: stretch; }
	.cl-cookies-btns { display: grid; grid-template-columns: 1fr 1fr; }
	.cl-cookies-btns .cl-btn-primary { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
	.cl-modal, .cl-cookies, .cl-doc.active { animation: none; }
	.cl-btn:hover, .cl-x:hover { transform: none; }
}

/* ==========================================================================
   LEGIBILIDAD EN MÓVIL: los textos legales, a 16px
   ========================================================================== */
@media (max-width: 782px) {
	.cl-bar, .cl-bar-nav a, .cl-bar-c { font-size: 15px; }
	.cl-doc p, .cl-doc li, .cl-doc td, .cl-doc th,
	.cl-cookies-txt p { font-size: 16px !important; line-height: 1.7; }
	.cl-updated, .cl-switch small { font-size: 14px !important; }
	.cl-table { font-size: 15px; }
	.cl-doc-title { font-size: 22px; }
	.cl-doc h3 { font-size: 18px; }
	.cl-doc h4 { font-size: 16px; }
	.cl-switch strong { font-size: 16px; }
	.cl-btn { font-size: 16px; }
	.cl-doc .cl-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ==========================================================================
   Modal: pestañas legibles (antes se cortaban por abajo)
   ========================================================================== */
.cl-modal .cl-tabs {
	display: flex;
	flex-wrap: wrap;              /* que bajen de línea en vez de cortarse */
	gap: 6px;
	padding: 14px 16px 0 !important;
	overflow: visible;            /* el scroll horizontal recortaba el texto */
	background: var(--cl-cream2);
	border-bottom: 1px solid var(--cl-line);
	max-height: none;
}
.cl-modal .cl-tab {
	flex: 0 0 auto;
	font-size: 14px;
	line-height: 1.3;
	padding: 10px 14px 12px !important;
	border-radius: 10px 10px 0 0;
	border-bottom: 3px solid transparent;
	white-space: nowrap;
	margin-bottom: -1px;          /* que el borde inferior encaje con la línea */
}
.cl-modal .cl-tab.active {
	background: #fff;
	border-bottom-color: var(--cl-burgundy);
}

/* En pantallas estrechas, las pestañas ocupan el ancho disponible */
@media (max-width: 900px) {
	.cl-modal .cl-tabs { gap: 4px; padding: 12px 12px 0 !important; }
	.cl-modal .cl-tab { font-size: 13.5px; padding: 9px 11px 11px !important; }
}
@media (max-width: 620px) {
	.cl-modal .cl-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 12px !important; border-bottom: 1px solid var(--cl-line); }
	.cl-modal .cl-tab {
		white-space: normal;
		text-align: center;
		border-radius: 10px;
		border: 1px solid var(--cl-line);
		border-bottom-width: 1px;
		background: #fff;
		margin-bottom: 0;
		font-size: 14px !important;
	}
	.cl-modal .cl-tab.active {
		background: var(--cl-burgundy);
		border-color: var(--cl-burgundy);
		color: #fff;
	}
	.cl-modal .cl-dialog { max-height: 94vh; }
}