/* Cinco-Cero Premium Hero
   -------------------------------------------------------------------------
   Todo valor visual relevante se expresa como custom property con fallback
   igual al comportamiento histórico del widget, de modo que cada propiedad
   pueda quedar bajo un control de Elementor sin cambiar el render por defecto
   de las instancias ya guardadas. */
.ccpw-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	background: var(--ccpw-section-bg, var(--ccpw-ivory));
	color: var(--ccpw-section-fg, var(--ccpw-ink));
	min-height: var(--ccpw-hero-min-h, 60vh);
	--ccpw-hero-media-w: 50%;
	/* Tabla de traducción alineación-de-texto → alineación-flex. Permite que un
	   ÚNICO control de Elementor ("Alineación del contenido", cuyo valor es
	   left/center/right) resuelva a la vez text-align y align-items/justify-content
	   escribiendo var(--ccpw-map-{{VALUE}}), sin obligar al usuario a configurar
	   dos controles separados ni a que los bloques flex (insignia, kicker,
	   descripción, botones) queden anclados a la izquierda al centrar el texto. */
	--ccpw-map-left: flex-start;
	--ccpw-map-center: center;
	--ccpw-map-right: flex-end;
	/* Misma tabla, para cajas con max-width propio (margin-inline: inicio fin). */
	--ccpw-map-mi-left: 0 auto;
	--ccpw-map-mi-center: auto;
	--ccpw-map-mi-right: auto 0;
}

.ccpw-hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: var(--ccpw-hero-content-valign, flex-start);
	gap: var(--ccpw-hero-content-gap, var(--ccpw-space-2));
	padding-block: var(--ccpw-space-5);
	width: 100%;
	max-width: var(--ccpw-hero-content-maxw, none);
}
/* La alineación horizontal del control "Alineación del contenido" fija
   text-align; los hijos que son flex (insignia, monograma, botones) no se
   alinean solos con text-align, así que se derivan de él vía align-items. */
.ccpw-hero__content { align-items: var(--ccpw-hero-content-halign, stretch); }
/* La descripción tiene un max-width propio: al centrar hay que centrar además
   su caja, no solo su texto, o el párrafo queda pegado a la izquierda dentro
   de una columna centrada (defecto observado en la demo de identidad
   alternativa antes de este cambio). */
.ccpw-hero__description { margin-inline: var(--ccpw-hero-block-margin, 0 auto); }

.ccpw-hero__breadcrumb { margin-bottom: var(--ccpw-space-1); font-size: 0.82rem; opacity: 0.85; }
.ccpw-hero__badge {
	display: inline-flex; align-items: center; gap: 0.5em;
	font-family: var(--ccpw-font-sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
	color: var(--ccpw-gold); border: 1px solid var(--ccpw-gold); border-radius: 100px;
	padding: 0.35em 0.9em; width: fit-content;
}
.ccpw-hero__badge .ccpw-icon { width: 1.1em; height: 1.1em; display: inline-flex; }
.ccpw-hero__badge svg { width: 100%; height: 100%; }

.ccpw-hero__kicker { margin-bottom: 0.25em; }
/* Regla decorativa junto al antetítulo: "trailing" la coloca en línea a
   continuación del texto (geometría del arte editorial de referencia);
   "underline" la coloca debajo como bloque. Ambas son opcionales. */
.ccpw-hero__kicker-rule {
	display: none;
	flex: 0 0 auto;
	background: var(--ccpw-hero-rule-color, currentColor);
	opacity: var(--ccpw-hero-rule-opacity, 1);
}
.ccpw-hero--kicker-rule-trailing .ccpw-hero__kicker-rule {
	display: block;
	width: var(--ccpw-hero-rule-length, 120px);
	height: var(--ccpw-hero-rule-thickness, 1px);
	margin-inline-start: var(--ccpw-hero-rule-gap, 16px);
}
.ccpw-hero--kicker-rule-underline .ccpw-hero__kicker { display: flex; flex-direction: column; align-items: flex-start; }
.ccpw-hero--kicker-rule-underline .ccpw-hero__kicker-rule {
	display: block;
	width: var(--ccpw-hero-rule-length, 56px);
	height: var(--ccpw-hero-rule-thickness, 2px);
	margin-block-start: var(--ccpw-hero-rule-gap, 10px);
}

.ccpw-hero__title {
	font-family: var(--ccpw-font-serif);
	font-weight: 400;
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
	line-height: 1.12;
	margin: 0;
	color: var(--ccpw-section-fg, var(--ccpw-ink));
	text-wrap: balance;
}
/* Divisor bajo el título (regla corta de acento del arte de referencia). */
.ccpw-hero__title-divider {
	display: block;
	width: var(--ccpw-hero-divider-length, 56px);
	height: var(--ccpw-hero-divider-thickness, 2px);
	background: var(--ccpw-hero-divider-color, var(--ccpw-gold));
	margin-block: var(--ccpw-hero-divider-space-top, 8px) var(--ccpw-hero-divider-space-bottom, 8px);
	border: 0;
}
.ccpw-hero__subtitle {
	font-family: var(--ccpw-font-sans);
	font-size: 1.1rem; font-weight: 600;
	margin: 0; color: var(--ccpw-section-fg, var(--ccpw-ink));
}
.ccpw-hero__description {
	font-family: var(--ccpw-font-sans);
	font-size: 1rem; line-height: 1.65;
	max-width: var(--ccpw-hero-description-maxw, 52ch);
	margin: 0; opacity: 0.88; color: var(--ccpw-section-fg, var(--ccpw-ink));
}
/* Los botones pasaron de márgenes sueltos a un contenedor flex con gap real:
   permite un control "Espacio entre botones" y una alineación propia sin que
   el último botón arrastre un margen fantasma. */
.ccpw-hero__buttons {
	margin-top: var(--ccpw-space-2);
	display: flex;
	flex-wrap: wrap;
	/* Ocupa siempre el ancho de la columna aunque el contenido esté centrado o
	   a la derecha: así el control "Botones a ancho completo" (width:100% sobre
	   cada .ccpw-btn) sigue midiendo contra la columna y no contra el texto. */
	align-self: stretch;
	gap: var(--ccpw-hero-buttons-gap, var(--ccpw-space-2));
	justify-content: var(--ccpw-hero-buttons-justify, flex-start);
}
.ccpw-hero__buttons .ccpw-btn { transition-duration: var(--ccpw-hero-btn-transition, var(--ccpw-transition-base)); }
.ccpw-hero__btn-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--ccpw-hero-btn-icon-size, 1.1em); height: var(--ccpw-hero-btn-icon-size, 1.1em); }
.ccpw-hero__btn-icon svg,
.ccpw-hero__btn-icon img { width: 100%; height: 100%; display: block; }
.ccpw-hero__btn-icon i { font-size: var(--ccpw-hero-btn-icon-size, 1.1em); line-height: 1; }
.ccpw-hero__btn--icon-right { flex-direction: row-reverse; }

/* ---------- Medio (imagen/video) ---------- */
.ccpw-hero__media {
	position: absolute; inset: 0; z-index: 0;
	overflow: var(--ccpw-hero-media-overflow, hidden);
	border-radius: var(--ccpw-hero-media-radius, 0);
}
.ccpw-hero__media .ccpw-img,
.ccpw-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.ccpw-hero__video { object-fit: cover; }
.ccpw-hero__overlay { position: absolute; inset: 0; background: var(--ccpw-hero-overlay, transparent); pointer-events: none; z-index: 2; }
.ccpw-hero__media-glow { display: none; }

.ccpw-hero--gradient-bottom-dark .ccpw-hero__overlay { background-image: linear-gradient(to top, rgba(20,16,13,0.72) 0%, rgba(20,16,13,0.18) 45%, transparent 75%); }
.ccpw-hero--gradient-radial-warm .ccpw-hero__overlay { background-image: radial-gradient(ellipse at 30% 70%, rgba(182,138,58,0.28), transparent 60%); }

.ccpw-hero--cc-warm .ccpw-hero__photo .ccpw-img__el,
.ccpw-hero--cc-warm .ccpw-hero__video { filter: saturate(0.9) sepia(0.14) contrast(1.03); }
.ccpw-hero--cc-cool .ccpw-hero__photo .ccpw-img__el,
.ccpw-hero--cc-cool .ccpw-hero__video { filter: saturate(0.92) hue-rotate(-6deg) contrast(1.02); }
.ccpw-hero--cc-muted .ccpw-hero__photo .ccpw-img__el,
.ccpw-hero--cc-muted .ccpw-hero__video { filter: saturate(0.55) contrast(0.98); }

/* "Fundido", "resplandor" y "arco" son interruptores independientes
   (pueden combinarse los tres a la vez, como en el diseño original: glow +
   fade + arc simultáneos) -- ya no son un SELECT mutuamente excluyente.
   Las paradas del degradado del fundido son configurables: el arte de
   referencia corta la fotografía a filo (sin fundido), mientras otras
   composiciones necesitan una transición larga. */
.ccpw-hero--treatment-fade .ccpw-hero__photo .ccpw-img__el {
	-webkit-mask-image: linear-gradient(to bottom, black 0%, black var(--ccpw-hero-fade-start, 82%), transparent var(--ccpw-hero-fade-end, 98%));
	mask-image: linear-gradient(to bottom, black 0%, black var(--ccpw-hero-fade-start, 82%), transparent var(--ccpw-hero-fade-end, 98%));
}
.ccpw-hero--treatment-glow .ccpw-hero__media-glow {
	display: block;
	position: absolute; z-index: 0;
	inset: 8% -18% -12% -18%;
	background: radial-gradient(
		ellipse var(--ccpw-hero-glow-w, 60%) var(--ccpw-hero-glow-h, 55%)
		at var(--ccpw-hero-glow-x, 50%) var(--ccpw-hero-glow-y, 65%),
		var(--ccpw-hero-glow, rgba(182,138,58,0.34)), transparent 75%);
	filter: blur(var(--ccpw-hero-glow-blur, 30px));
	pointer-events: none;
}

/* ---------- Arco decorativo (opcional, detrás de la foto) ----------
   Un anillo parcial (solo trazo), no una forma rellena: reproduce la
   geometría del arco del diseño original (aro circular sangrando por la
   esquina superior derecha), ahora con color/grosor/posición/tamaño y
   opacidad configurables. */
.ccpw-hero__arc { display: none; }
.ccpw-hero--treatment-arc .ccpw-hero__arc {
	display: block;
	position: absolute; z-index: 0;
	top: var(--ccpw-hero-arc-y, 8%);
	right: var(--ccpw-hero-arc-x, -12%);
	width: var(--ccpw-hero-arc-size, 70%); aspect-ratio: 1;
	border-radius: 50%;
	border: var(--ccpw-hero-arc-width, 1px) solid var(--ccpw-hero-arc, rgba(182,138,58,0.55));
	opacity: var(--ccpw-hero-arc-opacity, 1);
	pointer-events: none;
}

/* ---------- Monograma de marca (opcional, genérico) ---------- */
.ccpw-hero__monogram {
	--ccpw-hero-monogram-size: 88px;
	width: var(--ccpw-hero-monogram-size);
	height: var(--ccpw-hero-monogram-size);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	transform: rotate(var(--ccpw-hero-monogram-rotate, 0deg));
}
.ccpw-hero__monogram--media {
	position: absolute;
	z-index: 3;
	--ccpw-hero-monogram-inset: 24px;
}
/* Separación por eje independiente: X e Y caen al valor único heredado
   (--ccpw-hero-monogram-inset) si no se configura un eje por separado, con lo
   que el comportamiento previo se conserva intacto. */
.ccpw-hero__monogram--corner-top-right {
	top: var(--ccpw-hero-monogram-inset-y, var(--ccpw-hero-monogram-inset));
	right: var(--ccpw-hero-monogram-inset-x, var(--ccpw-hero-monogram-inset));
}
.ccpw-hero__monogram--corner-top-left {
	top: var(--ccpw-hero-monogram-inset-y, var(--ccpw-hero-monogram-inset));
	left: var(--ccpw-hero-monogram-inset-x, var(--ccpw-hero-monogram-inset));
}
.ccpw-hero__monogram--corner-bottom-right {
	bottom: var(--ccpw-hero-monogram-inset-y, var(--ccpw-hero-monogram-inset));
	right: var(--ccpw-hero-monogram-inset-x, var(--ccpw-hero-monogram-inset));
}
.ccpw-hero__monogram--corner-bottom-left {
	bottom: var(--ccpw-hero-monogram-inset-y, var(--ccpw-hero-monogram-inset));
	left: var(--ccpw-hero-monogram-inset-x, var(--ccpw-hero-monogram-inset));
}
.ccpw-hero__monogram--content { position: relative; width: auto; height: auto; margin-bottom: var(--ccpw-space-1); justify-content: flex-start; }
.ccpw-hero__monogram-icon,
.ccpw-hero__monogram-icon--image,
.ccpw-hero__monogram-icon--svg { display: block; width: 100%; height: 100%; }
.ccpw-hero__monogram-icon--image img,
.ccpw-hero__monogram-icon--svg svg,
.ccpw-hero__monogram-icon--svg img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ccpw-hero__monogram-icon--text {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%;
	font-family: var(--ccpw-font-serif);
	font-size: calc(var(--ccpw-hero-monogram-size, 88px) * 0.42);
	line-height: 1;
	color: var(--ccpw-gold);
}
.ccpw-hero__monogram--content .ccpw-hero__monogram-icon--text { font-size: calc(var(--ccpw-hero-monogram-size, 48px) * 0.5); }

/* ---------- Variante: full-width ---------- */
/* Nota de arquitectura: los controles con prefix_class de Elementor agregan
   la clase al WRAPPER (.elementor-widget-ccpw-hero), no al <section class="ccpw-hero">
   que renderiza este widget (un descendiente). Por eso toda regla de
   variante/preset usa el combinador descendiente ".ccpw-hero--x .ccpw-hero"
   en vez de intentar aplicar el estilo directamente sobre ".ccpw-hero--x". */
.ccpw-hero--variant-full-width .ccpw-hero__content { max-width: var(--ccpw-hero-content-maxw, var(--ccpw-container)); margin-inline: auto; padding-inline: var(--ccpw-space-3); }
.ccpw-hero--variant-full-width .ccpw-hero.ccpw-hero--has-media { color: var(--ccpw-white-warm); }
.ccpw-hero--variant-full-width .ccpw-hero.ccpw-hero--has-media .ccpw-hero__title,
.ccpw-hero--variant-full-width .ccpw-hero.ccpw-hero--has-media .ccpw-hero__subtitle,
.ccpw-hero--variant-full-width .ccpw-hero.ccpw-hero--has-media .ccpw-hero__description { color: var(--ccpw-white-warm); }

/* ---------- Variante: split ---------- */
.ccpw-hero--variant-split .ccpw-hero { flex-direction: row; align-items: stretch; gap: var(--ccpw-hero-col-gap, 0px); }
.ccpw-hero--variant-split .ccpw-hero__media {
	position: relative; inset: auto;
	width: var(--ccpw-hero-media-w, 50%);
	flex: 0 0 var(--ccpw-hero-media-w, 50%);
	order: 2;
	height: var(--ccpw-hero-media-h, auto);
	align-self: var(--ccpw-hero-media-align, stretch);
}
.ccpw-hero--variant-split .ccpw-hero__content {
	width: calc(100% - var(--ccpw-hero-media-w, 50%));
	flex: 1; padding-inline: var(--ccpw-space-4); justify-content: var(--ccpw-hero-content-valign, center); order: 1;
}
.ccpw-hero--variant-split.ccpw-hero--media-left .ccpw-hero__media { order: 1; }
.ccpw-hero--variant-split.ccpw-hero--media-left .ccpw-hero__content { order: 2; }

/* ---------- Variante: editorial ---------- */
/* La proporción editorial usa su PROPIA custom property (no la de Split), para
   que su reparto histórico 46/54 siga siendo el valor por defecto exacto y el
   control de proporción de cada variante no contamine a la otra. */
.ccpw-hero--variant-editorial .ccpw-hero { flex-direction: row; align-items: center; gap: var(--ccpw-hero-col-gap, var(--ccpw-space-4)); padding-inline: var(--ccpw-space-4); }
.ccpw-hero--variant-editorial .ccpw-hero__content { width: calc(100% - var(--ccpw-hero-media-w-ed, 54%)); flex: 0 0 calc(100% - var(--ccpw-hero-media-w-ed, 54%)); }
.ccpw-hero--variant-editorial .ccpw-hero__media {
	position: relative; inset: auto;
	width: var(--ccpw-hero-media-w-ed, 54%); flex: 1;
	align-self: var(--ccpw-hero-media-align, stretch);
	height: var(--ccpw-hero-media-h, auto);
	border-radius: var(--ccpw-hero-media-radius, var(--ccpw-radius-lg));
}
.ccpw-hero--variant-editorial .ccpw-hero__title { font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4rem); }
/* Regla decorativa histórica de la variante editorial (línea bajo el
   antetítulo). Se conserva intacta para las instancias ya guardadas y se
   desactiva sola en cuanto la instancia elige una regla explícita. */
.ccpw-hero--variant-editorial .ccpw-hero__kicker::after { content: ''; display: block; width: 56px; height: 2px; background: var(--ccpw-gold); margin-top: 0.6em; }
.ccpw-hero--kicker-rule-trailing .ccpw-hero__kicker::after,
.ccpw-hero--kicker-rule-underline .ccpw-hero__kicker::after { display: none; }

/* ---------- Variante: minimal ---------- */
.ccpw-hero--variant-minimal .ccpw-hero { min-height: auto; padding-block: var(--ccpw-space-5); }
.ccpw-hero--variant-minimal .ccpw-hero__media { display: none; }
.ccpw-hero--variant-minimal .ccpw-hero__content { max-width: var(--ccpw-hero-content-maxw, 64ch); margin-inline: auto; text-align: center; padding-inline: var(--ccpw-space-3); }
.ccpw-hero--variant-minimal .ccpw-hero__title { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); }
.ccpw-hero--variant-minimal .ccpw-hero__buttons { justify-content: var(--ccpw-hero-buttons-justify, center); }

/* ---------- Presets visuales (4 familias, ver ccpw-presets.css) ----------
   El fondo/color de texto se resuelven vía --ccpw-section-bg/--ccpw-section-fg
   (las mismas custom properties que ya consumen .ccpw-hero y sus hijos), así
   que basta con redefinirlas a nivel del wrapper — se heredan solas. El resto
   de tokens (--ccpw-preset-*) se aplican explícitamente donde correspondan. */
.ccpw-preset-editorial-dorado { --ccpw-section-bg: var(--ccpw-preset-bg); --ccpw-section-fg: var(--ccpw-preset-fg); }
.ccpw-preset-alto-contraste-carbon { --ccpw-section-bg: var(--ccpw-preset-bg); --ccpw-section-fg: var(--ccpw-preset-fg); }
.ccpw-preset-marfil-calido { --ccpw-section-bg: var(--ccpw-preset-bg); --ccpw-section-fg: var(--ccpw-preset-fg); }
.ccpw-preset-minimal-sobrio { --ccpw-section-bg: var(--ccpw-preset-bg); --ccpw-section-fg: var(--ccpw-preset-fg); }

.ccpw-preset-editorial-dorado .ccpw-hero__title,
.ccpw-preset-marfil-calido .ccpw-hero__title { font-style: var(--ccpw-preset-title-style); }
.ccpw-preset-alto-contraste-carbon .ccpw-hero__title { font-style: var(--ccpw-preset-title-style); font-weight: var(--ccpw-preset-title-weight); }
.ccpw-preset-alto-contraste-carbon .ccpw-hero__description { opacity: 0.78; }

.ccpw-preset-editorial-dorado .ccpw-hero__kicker,
.ccpw-preset-alto-contraste-carbon .ccpw-hero__kicker,
.ccpw-preset-marfil-calido .ccpw-hero__kicker,
.ccpw-preset-minimal-sobrio .ccpw-hero__kicker { color: var(--ccpw-preset-eyebrow-color); letter-spacing: var(--ccpw-preset-eyebrow-tracking); }

.ccpw-preset-editorial-dorado .ccpw-hero__badge,
.ccpw-preset-alto-contraste-carbon .ccpw-hero__badge,
.ccpw-preset-marfil-calido .ccpw-hero__badge {
	color: var(--ccpw-preset-accent); border-color: var(--ccpw-preset-accent); border-radius: var(--ccpw-preset-radius);
}

.ccpw-preset-minimal-sobrio .ccpw-hero__title { font-family: var(--ccpw-preset-title-font); font-weight: var(--ccpw-preset-title-weight); letter-spacing: -0.01em; }
.ccpw-preset-minimal-sobrio .ccpw-hero__kicker::after { display: none; }
.ccpw-preset-minimal-sobrio .ccpw-hero__badge { border: none; background: transparent; color: var(--ccpw-preset-fg); border-radius: 0; padding-left: 0; }
.ccpw-preset-minimal-sobrio .ccpw-hero__description { opacity: 1; color: var(--ccpw-preset-fg-muted); }

@media (max-width: 1024px) {
	/* El orden y la altura al apilar son configurables por instancia vía los
	   controles responsive "Orden al apilar" y "Altura de la fotografía al
	   apilar" (ver register_controls) -- se leen aquí solo como custom
	   properties heredadas desde .ccpw-hero, con el mismo valor por defecto
	   que tenía esta regla antes de ser configurable (foto primero, 320px). */
	.ccpw-hero--variant-split .ccpw-hero,
	.ccpw-hero--variant-editorial .ccpw-hero { flex-direction: column; }
	.ccpw-hero--variant-split .ccpw-hero__media,
	.ccpw-hero--variant-editorial .ccpw-hero__media {
		width: 100%; flex-basis: auto;
		height: auto;
		min-height: var(--ccpw-hero-stacked-media-h, 320px);
		order: calc(1 + var(--ccpw-hero-stack-order, 0));
	}
	.ccpw-hero--variant-split .ccpw-hero__content,
	.ccpw-hero--variant-editorial .ccpw-hero__content {
		width: 100%; flex-basis: auto; padding-inline: var(--ccpw-space-3);
		order: calc(2 - var(--ccpw-hero-stack-order, 0));
	}
}

/* Ancho de botones por dispositivo: resuelto por el control responsive
   "buttons_full_width" (por defecto: ancho completo solo en móvil). */
@media (max-width: 767px) {
	/* El gap ya lo controla exclusivamente el control responsive "content_gap"
	   (ver register_controls) — no se fija aquí para no competir por
	   especificidad con la regla de instancia que genera Elementor. */
	.ccpw-hero__content { padding-block: var(--ccpw-space-4); }
}

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