/**
 * Tokens compartidos por todos los widgets Cinco-Cero Premium Widgets.
 *
 * :root contiene únicamente medidas neutrales. Los aliases que consumen
 * Global Colors/Fonts de Elementor viven en el wrapper del widget, donde las
 * variables declaradas por `.elementor-kit-*` en body ya son heredables. Esto
 * funciona igual en frontend y dentro del iframe de vista previa del editor.
 */
:root {
	--ccpw-radius-sm: 2px;
	--ccpw-radius-md: 4px;
	--ccpw-radius-lg: 10px;

	--ccpw-space-1: 8px;
	--ccpw-space-2: 16px;
	--ccpw-space-3: 24px;
	--ccpw-space-4: 40px;
	--ccpw-space-5: 64px;
	--ccpw-space-6: 96px;

	--ccpw-shadow-soft: 0 1px 2px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.06);
	--ccpw-shadow-medium: 0 2px 4px rgba(0,0,0,0.06), 0 16px 40px rgba(0,0,0,0.10);

	--ccpw-container: 1280px;
	--ccpw-container-lg: 1440px;

	--ccpw-transition-fast: 160ms ease;
	--ccpw-transition-base: 260ms ease;
	--ccpw-transition-slow: 420ms ease;

	--ccpw-btn-h-sm: 38px;
	--ccpw-btn-h-md: 48px;
	--ccpw-btn-h-lg: 56px;
}

/* Scope compartido de los wrappers nativos de Elementor. No se asignan
   colores de marca obligatorios: sin Global Styles, color y tipografía
   heredan del tema y los fondos permanecen transparentes. */
.elementor-widget[class*="elementor-widget-ccpw-"] {
	--ccpw-ink: var(--e-global-color-secondary, currentColor);
	--ccpw-charcoal: var(--e-global-color-text, currentColor);
	--ccpw-ivory: var(--e-global-color-background, transparent);
	--ccpw-ivory-light: var(--e-global-color-background, transparent);
	--ccpw-white-warm: var(--e-global-color-background, #fff);
	--ccpw-gold: var(--e-global-color-primary, currentColor);
	--ccpw-gold-light: var(--e-global-color-accent, var(--e-global-color-primary, currentColor));
	--ccpw-warm-gray: var(--e-global-color-text, currentColor);
	--ccpw-border: color-mix(in srgb, currentColor 22%, transparent);
	--ccpw-font-serif: var(--e-global-typography-primary-font-family, inherit);
	--ccpw-font-sans: var(--e-global-typography-text-font-family, inherit);
}
/* Utilidades compartidas mínimas usadas por varios widgets (no un framework). */
.ccpw-container {
	max-width: var(--ccpw-container);
	margin-inline: auto;
	padding-inline: var(--ccpw-space-3);
}
.ccpw-container--lg { max-width: var(--ccpw-container-lg); }

.ccpw-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

.ccpw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	height: var(--ccpw-btn-h-md);
	padding-inline: 1.6em;
	border-radius: var(--ccpw-radius-md);
	font-family: var(--ccpw-font-sans);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background-color var(--ccpw-transition-base), color var(--ccpw-transition-base), border-color var(--ccpw-transition-base), transform var(--ccpw-transition-fast);
	white-space: normal;
	max-width: 100%;
}
.ccpw-btn:focus-visible {
	outline: 2px solid var(--ccpw-gold);
	outline-offset: 2px;
}
.ccpw-btn--primary {
	background: var(--ccpw-gold);
	color: var(--ccpw-white-warm);
}
.ccpw-btn--primary:hover { background: var(--ccpw-ink); color: var(--ccpw-white-warm); }
.ccpw-btn--outline {
	background: transparent;
	color: var(--ccpw-ink);
	border-color: var(--ccpw-border);
}
.ccpw-btn--outline:hover { border-color: var(--ccpw-ink); }
.ccpw-btn--ghost-light {
	background: transparent;
	color: var(--ccpw-white-warm);
	border-color: rgba(255,255,255,0.4);
}
.ccpw-btn--ghost-light:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.7); }
.ccpw-btn--sm { height: var(--ccpw-btn-h-sm); font-size: 0.85rem; padding-inline: 1.2em; }
.ccpw-btn--lg { height: var(--ccpw-btn-h-lg); font-size: 1.02rem; padding-inline: 2em; }
.ccpw-btn--block { width: 100%; }

@media (prefers-reduced-motion: reduce) {
	.ccpw-btn { transition: none; }
}

.ccpw-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--ccpw-font-sans);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--ccpw-gold);
}

.ccpw-img {
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	line-height: 0;
}
/* El selector lleva el combinador de hijo a propósito: Elementor declara
   ".elementor img { height: auto }" (especificidad 0-1-1), que vencía a un
   ".ccpw-img__el" suelto (0-1-0) y dejaba la fotografía a su alto intrínseco.
   El resultado era que object-fit/object-position no llegaban a recortar nada
   en NINGÚN widget que use ccpw_get_image_html(), no solo en el Hero.
   ".ccpw-img > .ccpw-img__el" (0-2-0) gana sin recurrir a !important. */
.ccpw-img > .ccpw-img__el {
	display: block;
	width: 100%;
	height: 100%;
	object-position: center center;
}
.ccpw-img--fit-cover > .ccpw-img__el { object-fit: cover; }
.ccpw-img--fit-contain > .ccpw-img__el { object-fit: contain; }
.ccpw-img--fit-fill > .ccpw-img__el { object-fit: fill; }
.ccpw-img--fit-none > .ccpw-img__el { object-fit: none; }
.ccpw-img--fit-scale-down > .ccpw-img__el { object-fit: scale-down; }

.ccpw-bg-dark { --ccpw-section-bg: var(--ccpw-ink); --ccpw-section-fg: var(--ccpw-white-warm); --ccpw-section-border: rgba(255,255,255,0.14); }
.ccpw-bg-ivory { --ccpw-section-bg: var(--ccpw-ivory); --ccpw-section-fg: var(--ccpw-ink); --ccpw-section-border: var(--ccpw-border); }
.ccpw-bg-ivory-dim { --ccpw-section-bg: var(--ccpw-ivory-light); --ccpw-section-fg: var(--ccpw-ink); --ccpw-section-border: var(--ccpw-border); }
.ccpw-bg-transparent { --ccpw-section-bg: transparent; --ccpw-section-fg: inherit; --ccpw-section-border: var(--ccpw-border); }

.ccpw-empty-state {
	border: 1px dashed var(--ccpw-border);
	border-radius: var(--ccpw-radius-md);
	padding: var(--ccpw-space-3);
	color: var(--ccpw-warm-gray);
	font-family: var(--ccpw-font-sans);
	font-size: 0.9rem;
}

.ccpw-spinner {
	display: inline-block; width: 1em; height: 1em; margin-right: 0.5em;
	border: 2px solid var(--ccpw-border); border-top-color: var(--ccpw-gold);
	border-radius: 50%; animation: ccpw-spin 0.8s linear infinite; vertical-align: -0.15em;
}
@keyframes ccpw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.ccpw-spinner { animation-duration: 2.4s; }
}

.ccpw-booking-error {
	font-family: var(--ccpw-font-sans); font-size: 0.85rem; color: #9C3B2E;
	background: rgba(156,59,46,0.08); border-left: 3px solid #9C3B2E;
	padding: 0.7em 1em; border-radius: var(--ccpw-radius-sm); margin-top: 0.6em;
}