/* ==========================================================================
   CORTECERO — CAPA VISUAL PREMIUM
   Academia de barbería · negro / azul eléctrico · editorial brutalista
   Todo va acotado a .cortecero-premium para no afectar al editor ni a wp-admin.
   ========================================================================== */

.cortecero-premium {
	--cc-black: #000000;
	--cc-ink: #0a0a0a;
	--cc-secondary: #1a1a10;
	--cc-paper: #f7f7f9;
	--cc-accent: #f5252f;            /* rojo eléctrico de marca */
	--cc-accent-bright: #ff4d57;     /* realce / glow */
	--cc-accent-deep: #b00c1a;       /* profundidad para degradados */
	--cc-accent-soft: rgba(245, 37, 47, 0.14);
	--cc-muted: #686874;
	--cc-line: #b6b6be;
	--cc-line-dim: rgba(182, 182, 190, 0.18);

	--cc-ease: cubic-bezier(0.22, 1, 0.36, 1);          /* easeOutExpo suave */
	--cc-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
	--cc-dur: 0.5s;
}

/* --------------------------------------------------------------------------
   1. BASE · render de fuentes, scroll y selección
   -------------------------------------------------------------------------- */
html {
	scroll-behavior: smooth;
}

.cortecero-premium {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
	overflow-x: hidden;
}

.cortecero-premium ::selection {
	background: var(--cc-accent);
	color: #fff;
	text-shadow: none;
}

/* Scrollbar fina y a tono (no destructiva en navegadores que la ignoran) */
.cortecero-premium {
	scrollbar-width: thin;
	scrollbar-color: var(--cc-accent) transparent;
}
.cortecero-premium::-webkit-scrollbar { width: 10px; height: 10px; }
.cortecero-premium::-webkit-scrollbar-track { background: var(--cc-black); }
.cortecero-premium::-webkit-scrollbar-thumb {
	background: linear-gradient(var(--cc-accent), var(--cc-accent-deep));
	border: 2px solid var(--cc-black);
	border-radius: 0;
}

/* Foco accesible y de marca */
.cortecero-premium :focus-visible {
	outline: 2px solid var(--cc-accent);
	outline-offset: 3px;
}

/* Grano de película sutil sobre todo el sitio = sensación analógica premium */
.cortecero-premium::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.035;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. TIPOGRAFÍA · más editorial y afinada
   -------------------------------------------------------------------------- */
/* Titulares display (Anton) — más tensión y aire óptico */
.cortecero-premium h1,
.cortecero-premium h2,
.cortecero-premium .elementor-widget-heading h1,
.cortecero-premium .elementor-widget-heading h2 {
	letter-spacing: -0.015em;
	line-height: 0.96;
	text-wrap: balance;
}

.cortecero-premium h1 { letter-spacing: -0.02em; }

/* Etiquetas técnicas mono ("REF // 00", "MES 01", eyebrows) */
.cortecero-premium .elementor-widget-heading h3,
.cortecero-premium .elementor-widget-heading h4,
.cortecero-premium .elementor-widget-heading h5,
.cortecero-premium .elementor-widget-heading h6 {
	font-feature-settings: "tnum" 1;
}

/* Cuerpo de texto: medida y ritmo de lectura más cómodos */
.cortecero-premium .elementor-widget-text-editor {
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   3. BOTONES · electric blue con relleno deslizante
   -------------------------------------------------------------------------- */
.cortecero-premium .elementor-button {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: color 0.4s var(--cc-ease),
		transform 0.4s var(--cc-ease),
		box-shadow 0.4s var(--cc-ease),
		border-color 0.4s var(--cc-ease);
	will-change: transform;
}

/* Capa de relleno que sube desde abajo */
.cortecero-premium .elementor-button::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--cc-accent);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 0.45s var(--cc-ease);
}
.cortecero-premium .elementor-button:hover::after,
.cortecero-premium .elementor-button:focus-visible::after {
	transform: scaleY(1);
}
.cortecero-premium .elementor-button:hover,
.cortecero-premium .elementor-button:focus-visible {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 34px -12px var(--cc-accent);
}
.cortecero-premium .elementor-button:active {
	transform: translateY(0);
}
/* La flecha/iconos del botón acompañan */
.cortecero-premium .elementor-button .elementor-button-icon {
	transition: transform 0.4s var(--cc-ease);
}
.cortecero-premium .elementor-button:hover .elementor-button-icon {
	transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   4. ENLACES · subrayado animado
   -------------------------------------------------------------------------- */
.cortecero-premium .elementor-widget-text-editor a:not(.elementor-button),
.cortecero-premium .elementor-widget-heading a:not(.elementor-button) {
	background-image: linear-gradient(var(--cc-accent), var(--cc-accent));
	background-size: 0% 1.5px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.4s var(--cc-ease), color 0.3s var(--cc-ease);
	text-decoration: none;
}
.cortecero-premium .elementor-widget-text-editor a:not(.elementor-button):hover,
.cortecero-premium .elementor-widget-heading a:not(.elementor-button):hover {
	background-size: 100% 1.5px;
	color: var(--cc-accent);
}

/* --------------------------------------------------------------------------
   5. IMÁGENES · tratamiento editorial + zoom sutil al hover
   -------------------------------------------------------------------------- */
.cortecero-premium .elementor-widget-image {
	overflow: hidden;
}
.cortecero-premium .elementor-widget-image img {
	display: block;
	transition: transform 0.9s var(--cc-ease), filter 0.6s var(--cc-ease);
	will-change: transform;
	backface-visibility: hidden;
}
.cortecero-premium .elementor-widget-image:hover img {
	transform: scale(1.045);
}

/* Brillo que cruza la imagen al pasar (efecto "barrido de luz") */
.cortecero-premium .elementor-widget-image .elementor-widget-container {
	position: relative;
	overflow: hidden;
}
.cortecero-premium .elementor-widget-image .elementor-widget-container::after {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 60%;
	height: 100%;
	pointer-events: none;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.18), transparent);
	transform: skewX(-18deg);
	transition: left 0.85s var(--cc-ease);
	z-index: 2;
}
.cortecero-premium .elementor-widget-image:hover .elementor-widget-container::after {
	left: 130%;
}

/* --------------------------------------------------------------------------
   6. TARJETAS / CONTENEDORES CON BORDE · elevación + tics de esquina
   -------------------------------------------------------------------------- */
.cortecero-premium .e-con-inner > .elementor-element,
.cortecero-premium .e-con.e-child {
	transition: transform 0.5s var(--cc-ease),
		border-color 0.5s var(--cc-ease),
		box-shadow 0.5s var(--cc-ease),
		background-color 0.5s var(--cc-ease);
}

/* Contenedores que ya tienen borde visible: realce premium al hover */
.cortecero-premium .e-con[style*="border"]:hover {
	border-color: var(--cc-accent) !important;
	box-shadow: 0 24px 60px -30px rgba(46, 61, 255, 0.55);
}

/* --------------------------------------------------------------------------
   7. ACORDEÓN / FAQ · transición suave + acento
   -------------------------------------------------------------------------- */
.cortecero-premium .elementor-accordion .elementor-tab-title,
.cortecero-premium .e-n-accordion-item-title {
	transition: color 0.35s var(--cc-ease), background-color 0.35s var(--cc-ease),
		border-color 0.35s var(--cc-ease), padding 0.35s var(--cc-ease);
	position: relative;
}
.cortecero-premium .elementor-accordion .elementor-tab-title:hover,
.cortecero-premium .e-n-accordion-item-title:hover {
	color: var(--cc-accent);
}
/* Barra de acento a la izquierda del item activo */
.cortecero-premium .elementor-accordion .elementor-tab-title::before,
.cortecero-premium details[open] > .e-n-accordion-item-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 3px;
	height: 0;
	background: var(--cc-accent);
	transform: translateY(-50%);
	transition: height 0.4s var(--cc-ease);
}
.cortecero-premium .elementor-accordion .elementor-tab-title.elementor-active::before,
.cortecero-premium details[open] > .e-n-accordion-item-title::before {
	height: 70%;
}
.cortecero-premium .elementor-tab-content {
	transition: all 0.4s var(--cc-ease);
}

/* --------------------------------------------------------------------------
   8. FORMULARIO · inputs estilo "ficha técnica"
   -------------------------------------------------------------------------- */
.cortecero-premium .elementor-field-group input:not([type="submit"]),
.cortecero-premium .elementor-field-group textarea,
.cortecero-premium .elementor-field-group select {
	transition: border-color 0.35s var(--cc-ease),
		box-shadow 0.35s var(--cc-ease),
		background-color 0.35s var(--cc-ease);
}
.cortecero-premium .elementor-field-group input:not([type="submit"]):focus,
.cortecero-premium .elementor-field-group textarea:focus,
.cortecero-premium .elementor-field-group select:focus {
	border-color: var(--cc-accent) !important;
	box-shadow: 0 0 0 3px var(--cc-accent-soft);
	outline: none;
}
.cortecero-premium .elementor-field-group input::placeholder,
.cortecero-premium .elementor-field-group textarea::placeholder {
	transition: color 0.35s var(--cc-ease), transform 0.35s var(--cc-ease);
}
.cortecero-premium .elementor-field-group input:focus::placeholder,
.cortecero-premium .elementor-field-group textarea:focus::placeholder {
	color: var(--cc-accent);
}

/* --------------------------------------------------------------------------
   9. HEADER · difuminado con el hero + cristal esmerilado al hacer scroll
      La barra real es el contenedor sticky .elementor-element-c77b046 (fondo
      negro sólido por defecto). Lo volvemos transparente y lo fundimos con el
      hero mediante un scrim degradado + blur que se desvanece hacia abajo.
   -------------------------------------------------------------------------- */
.cortecero-premium .elementor-location-header .elementor-element-c77b046 {
	background-color: transparent !important;
	position: sticky;
	top: 0;
	z-index: 9999;
	transition: max-width 0.5s var(--cc-ease),
		margin 0.5s var(--cc-ease),
		top 0.5s var(--cc-ease),
		padding 0.5s var(--cc-ease),
		border-radius 0.5s var(--cc-ease),
		border-color 0.5s var(--cc-ease),
		background-color 0.45s var(--cc-ease),
		backdrop-filter 0.45s var(--cc-ease),
		box-shadow 0.45s var(--cc-ease),
		transform 0.55s var(--cc-ease);
	border: 1px solid transparent;
	border-radius: 0;
}

/* TOP · scrim degradado limpio que funde el header con el hero (un solo
   pseudo-elemento; sin la capa de blur extra que daba el efecto raro) */
.cortecero-premium .elementor-location-header .elementor-element-c77b046::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 230%;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(to bottom,
		rgba(0, 0, 0, 0.82) 0%,
		rgba(0, 0, 0, 0.5) 40%,
		rgba(0, 0, 0, 0.16) 72%,
		transparent 100%);
	-webkit-mask-image: linear-gradient(to bottom, #000 44%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 44%, transparent 100%);
	transition: opacity 0.4s var(--cc-ease);
}

/* SCROLL · header flotante tipo "píldora": más estrecho, compacto, redondeado
   y con cristal limpio que envuelve logo + menú + botón de forma profesional */
.cortecero-premium.cc-scrolled .elementor-location-header .elementor-element-c77b046 {
	max-width: min(920px, calc(100% - 48px)) !important;
	margin-inline: auto !important;
	top: 14px !important;
	padding-block: 7px !important;
	border-radius: 16px !important;
	border-color: rgba(255, 255, 255, 0.10) !important;
	background-color: rgba(12, 12, 12, 0.6) !important;
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	box-shadow: 0 12px 36px -16px rgba(0, 0, 0, 0.92),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.cortecero-premium.cc-scrolled .elementor-location-header .elementor-element-c77b046::before {
	opacity: 0;
}

/* Logo se reduce un punto al hacer scroll (acompaña a la barra compacta) */
.cortecero-premium .elementor-location-header .elementor-element-61af653 {
	transition: transform 0.5s var(--cc-ease);
	transform-origin: left center;
}
.cortecero-premium.cc-scrolled .elementor-location-header .elementor-element-61af653 {
	transform: scale(0.86);
}

/* Auto-ocultar al bajar / mostrar al subir (sobre la barra sticky real) */
.cortecero-premium.cc-hide-header .elementor-location-header .elementor-element-c77b046 {
	transform: translateY(-160%);
}

/* Barra de progreso de lectura en el borde superior */
.cortecero-premium .cc-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	z-index: 100000;
	background: linear-gradient(90deg, var(--cc-accent), var(--cc-accent-bright));
	box-shadow: 0 0 12px var(--cc-accent);
	pointer-events: none;
	transition: width 0.1s linear;
}

/* --------------------------------------------------------------------------
   10. SCROLL REVEAL · aparición con desplazamiento + stagger
       (se activa sólo cuando JS añade .cc-js al <html>)
   -------------------------------------------------------------------------- */
.cc-js .cortecero-premium .cc-reveal {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity 0.8s var(--cc-ease), transform 0.8s var(--cc-ease);
	transition-delay: var(--cc-delay, 0s);
	will-change: opacity, transform;
}
.cc-js .cortecero-premium .cc-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Variante para imágenes: revelado con máscara vertical */
.cc-js .cortecero-premium .cc-reveal-mask {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1s var(--cc-ease);
	transition-delay: var(--cc-delay, 0s);
}
.cc-js .cortecero-premium .cc-reveal-mask.is-in {
	clip-path: inset(0 0 0 0);
}

/* --------------------------------------------------------------------------
   11. CONTADOR DE CIFRAS · estado mientras anima
   -------------------------------------------------------------------------- */
.cortecero-premium .cc-count.is-counting {
	color: var(--cc-accent);
}

/* --------------------------------------------------------------------------
   12. CURSOR PERSONALIZADO · punto + halo (sólo puntero fino)
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
	.cc-cursor .cortecero-premium { cursor: none; }
	.cc-cursor .cortecero-premium a,
	.cc-cursor .cortecero-premium button,
	.cc-cursor .cortecero-premium .elementor-button { cursor: none; }

	.cc-cursor-dot,
	.cc-cursor-ring {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100060;   /* por encima del popup (100050) para que se vea siempre */
		pointer-events: none;
		border-radius: 50%;
		margin: -3.5px 0 0 -3.5px;       /* centra el punto sin transform extra */
		will-change: transform;
		mix-blend-mode: difference;
	}
	/* El punto sigue al ratón SIN transición = cero retraso */
	.cc-cursor-dot {
		width: 7px;
		height: 7px;
		background: #fff;
		transition: opacity 0.3s;
	}
	.cc-cursor-ring {
		width: 38px;
		height: 38px;
		margin: -19px 0 0 -19px;
		border: 1.5px solid rgba(255, 255, 255, 0.7);
		transition: width 0.3s var(--cc-ease), height 0.3s var(--cc-ease),
			margin 0.3s var(--cc-ease), border-color 0.3s, background-color 0.3s, opacity 0.3s;
	}
	.cc-cursor-ring.is-hot {
		width: 58px;
		height: 58px;
		margin: -29px 0 0 -29px;
		border-color: var(--cc-accent);
		background: var(--cc-accent-soft);
	}
	.cc-cursor-ring.is-down { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
}

/* --------------------------------------------------------------------------
   13. MARQUEE · cinta infinita (para tiras de marcas / claim)
   -------------------------------------------------------------------------- */
.cortecero-premium .cc-marquee {
	display: flex;
	gap: 3rem;
	width: max-content;
	animation: cc-marquee 26s linear infinite;
}
.cortecero-premium .cc-marquee:hover { animation-play-state: paused; }
@keyframes cc-marquee {
	to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   14. ACCESIBILIDAD · respetar "reducir movimiento"
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.cc-js .cortecero-premium .cc-reveal,
	.cc-js .cortecero-premium .cc-reveal-mask {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
	}
	.cortecero-premium .elementor-widget-image:hover img { transform: none; }
	.cortecero-premium .cc-marquee { animation: none; }
}

/* ==========================================================================
   15. NAVEGACIÓN ESCRITORIO · enlaces con subrayado animado + estado activo
   ========================================================================== */
.cortecero-premium .elementor-location-header .elementor-widget-heading a {
	position: relative;
	display: inline-block;
	letter-spacing: 0.04em;
	transition: color 0.35s var(--cc-ease);
	text-decoration: none;
}
.cortecero-premium .elementor-location-header .elementor-widget-heading a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 100%;
	height: 2px;
	background: var(--cc-accent);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.4s var(--cc-ease);
}
.cortecero-premium .elementor-location-header .elementor-widget-heading a:hover {
	color: var(--cc-accent);
}
.cortecero-premium .elementor-location-header .elementor-widget-heading a:hover::after,
.cortecero-premium .elementor-location-header .elementor-widget-heading a.cc-active::after {
	transform: scaleX(1);
	transform-origin: left;
}
.cortecero-premium .elementor-location-header .elementor-widget-heading a.cc-active { color: var(--cc-accent); }
.cortecero-premium .cc-menu li a.cc-active { color: var(--cc-accent); }

/* ==========================================================================
   16. MENÚ MÓVIL · hamburguesa + overlay a pantalla completa (construido por JS)
   ========================================================================== */
.cortecero-premium .cc-burger {
	display: none;
	position: fixed;
	top: 22px;
	right: 22px;
	z-index: 100002;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 1px solid var(--cc-line-dim);
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	cursor: pointer;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 6px;
	transition: border-color 0.3s var(--cc-ease), background-color 0.3s var(--cc-ease);
}
.cortecero-premium .cc-burger span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--cc-paper);
	transition: transform 0.4s var(--cc-ease), opacity 0.3s var(--cc-ease), background-color 0.3s;
}
/* El realce rojo SOLO en dispositivos con ratón real (evita que se quede
   "pegado" en rojo al tocar en móvil táctil). */
@media (hover: hover) {
	.cortecero-premium .cc-burger:hover { border-color: var(--cc-accent); }
	.cortecero-premium .cc-burger:hover span { background: var(--cc-accent); }
}
.cortecero-premium .cc-burger:focus { outline: none; }
.cortecero-premium .cc-burger:focus:not(:focus-visible) { border-color: var(--cc-line-dim); }

/* Estado abierto: hamburguesa -> X */
.cc-menu-open .cortecero-premium .cc-burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.cc-menu-open .cortecero-premium .cc-burger span:nth-child(2) { opacity: 0; }
.cc-menu-open .cortecero-premium .cc-burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Overlay */
.cortecero-premium .cc-menu {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 7vh 8vw;
	background: radial-gradient(120% 90% at 100% 0%, #170406 0%, #000 55%);
	clip-path: circle(0% at calc(100% - 48px) 48px);
	transition: clip-path 0.7s var(--cc-ease);
	pointer-events: none;
	overflow-y: auto;
}
.cc-menu-open .cortecero-premium .cc-menu {
	clip-path: circle(150% at calc(100% - 48px) 48px);
	pointer-events: auto;
}
.cortecero-premium .cc-menu::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cortecero-premium .cc-menu-eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--cc-muted);
	margin-bottom: 6vh;
}
.cortecero-premium .cc-menu ul { list-style: none; margin: 0; padding: 0; }
.cortecero-premium .cc-menu li {
	display: flex;
	align-items: baseline;
	gap: 18px;
	border-bottom: 1px solid var(--cc-line-dim);
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.5s var(--cc-ease), transform 0.5s var(--cc-ease);
	transition-delay: var(--cc-delay, 0s);
}
.cc-menu-open .cortecero-premium .cc-menu li { opacity: 1; transform: none; }
.cortecero-premium .cc-menu .cc-menu-num {
	font-family: "JetBrains Mono", monospace;
	font-size: 12px;
	color: var(--cc-accent);
	letter-spacing: 0.1em;
}
.cortecero-premium .cc-menu li a {
	flex: 1;
	display: block;
	padding: 3.2vh 0;
	font-family: "Anton", "Oswald", sans-serif;
	font-size: clamp(1.9rem, 8.4vw, 3.6rem);
	line-height: 1.02;
	letter-spacing: -0.01em;
	overflow-wrap: break-word;
	text-transform: uppercase;
	color: var(--cc-paper);
	text-decoration: none;
	transition: color 0.3s var(--cc-ease), transform 0.4s var(--cc-ease), padding-left 0.4s var(--cc-ease);
}
.cortecero-premium .cc-menu li a:hover {
	color: var(--cc-accent);
	padding-left: 14px;
}
.cortecero-premium .cc-menu .cc-menu-cta {
	margin-top: 6vh;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	align-self: flex-start;
	padding: 18px 34px;
	background: var(--cc-accent);
	color: #fff !important;
	font-family: "Space Grotesk", sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.5s var(--cc-ease) 0.45s, transform 0.5s var(--cc-ease) 0.45s,
		background-color 0.3s var(--cc-ease), box-shadow 0.3s var(--cc-ease);
}
.cc-menu-open .cortecero-premium .cc-menu .cc-menu-cta { opacity: 1; transform: none; }
.cortecero-premium .cc-menu .cc-menu-cta:hover {
	background: var(--cc-accent-bright);
	box-shadow: 0 16px 40px -14px var(--cc-accent);
}
.cortecero-premium .cc-menu-footer {
	margin-top: auto;
	padding-top: 6vh;
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.18em;
	color: var(--cc-muted);
}

/* Bloquear scroll del body con el menú abierto */
.cc-menu-open, .cc-menu-open body { overflow: hidden; }

/* Activar móvil/tablet: ocultar nav cableada, mostrar hamburguesa.
   IMPORTANTE: la ocultación SÓLO se aplica cuando el JS ha construido la
   hamburguesa (clase .cc-has-burger). Así, dentro del editor de Elementor o si
   el JS no carga, los enlaces NO desaparecen (no quedaría nada en su lugar). */
@media (max-width: 1024px) {
	.cortecero-premium .cc-burger { display: flex; }
	.cortecero-premium.cc-has-burger .elementor-location-header .elementor-widget-heading,
	.cortecero-premium.cc-has-burger .elementor-location-header .elementor-widget-button {
		display: none !important;
	}
	/* En móvil no auto-ocultamos: el logo y la hamburguesa quedan siempre */
	.cortecero-premium.cc-hide-header .elementor-location-header .elementor-element-c77b046 { transform: none; }

	/* En móvil NO usamos la "píldora" flotante de escritorio (quedaba un trozo
	   suelto con solo el logo). Al hacer scroll mantenemos una barra COMPLETA
	   de cristal, limpia y alineada con la hamburguesa. */
	.cortecero-premium.cc-scrolled .elementor-location-header .elementor-element-c77b046 {
		max-width: 100% !important;
		margin-inline: 0 !important;
		top: 0 !important;
		border-radius: 0 !important;
		border-color: transparent !important;
		/* El logo (~59px) desbordaba una barra corta y "pegaba" arriba. Fijamos
		   una altura mínima real y centramos: el logo queda con aire arriba y
		   abajo por igual. Sin padding vertical (la altura la da min-height). */
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		min-height: 84px !important;       /* misma altura que el estado top: no salta */
		align-items: center !important;    /* logo centrado verticalmente en la barra */
		overflow: visible !important;
		background-color: rgba(8, 8, 8, 0.66) !important;
		backdrop-filter: blur(16px) saturate(150%);
		-webkit-backdrop-filter: blur(16px) saturate(150%);
		box-shadow: 0 1px 0 var(--cc-line-dim);
	}
	/* El logo no se encoge en móvil (mantiene presencia junto al menú) */
	.cortecero-premium.cc-scrolled .elementor-location-header .elementor-element-61af653 {
		transform: none;
	}
}

/* HEADER MÓVIL · logo con presencia + hamburguesa proporcionada y centrada
   (la posición vertical exacta de la hamburguesa la fija el JS = placeBurger) */
@media (max-width: 1024px) {
	/* Especificidad alta + object-fit para que NUNCA se deforme: el widget
	   forzaba una altura fija (28px) que aplastaba el logo a lo ancho. */
	.cortecero-premium .elementor-location-header .elementor-widget-image.elementor-element-61af653 img {
		width: 54px !important;
		height: 57px !important;       /* altura FIJA (proporción del logo) para que
		                                  no colapse a 0 mientras la imagen lazy carga */
		max-width: none !important;
		max-height: none !important;
		min-height: 0 !important;
		object-fit: contain !important;
		object-position: left center;
		aspect-ratio: auto !important;
	}
	.cortecero-premium .cc-burger {
		width: 46px;
		height: 46px;
		gap: 5px;
	}
	.cortecero-premium .cc-burger span { width: 22px; }
}
@media (max-width: 767px) {
	.cortecero-premium .elementor-location-header .elementor-widget-image.elementor-element-61af653 img {
		width: 50px !important;
		height: 53px !important;
	}
	.cortecero-premium .cc-burger { right: 16px; }
}

/* "Donde se forja el criterio": el titular llevaba un margin-left de diseño
   (pensado para escritorio) que en móvil lo dejaba descentrado respecto al
   resto de la sección. Lo neutralizamos para que quede alineado. */
@media (max-width: 1024px) {
	.cortecero-premium .elementor-element-5ff1ea9 { margin-left: 0 !important; }
}

/* No usar cursor personalizado sobre el overlay si está táctil — ya cubierto por media query de puntero */

/* ==========================================================================
   17. REFINADO DE SECCIONES · jerarquía y aire premium
   ========================================================================== */
/* H1 del hero: encaje perfecto en móvil (evita desbordes) */
@media (max-width: 767px) {
	.cortecero-premium h1,
	.cortecero-premium .elementor-widget-heading h1 {
		font-size: clamp(2rem, 10vw, 3.2rem) !important;
		line-height: 1 !important;
		overflow-wrap: break-word;   /* sólo parte si una palabra no cabe, nunca a mitad si cabe */
		hyphens: none;
	}
}

/* Divisores con aire de "ficha técnica" */
.cortecero-premium .elementor-widget-divider .elementor-divider-separator {
	transition: border-color 0.4s var(--cc-ease);
}

/* Acento sutil al pasar por bloques de cifras grandes */
.cortecero-premium .cc-count {
	transition: color 0.4s var(--cc-ease), text-shadow 0.4s var(--cc-ease);
}
.cortecero-premium .cc-count:hover {
	color: var(--cc-accent);
	text-shadow: 0 0 26px var(--cc-accent-soft);
}

@media (prefers-reduced-motion: reduce) {
	.cortecero-premium .cc-menu { transition: none; }
	.cortecero-premium .cc-menu li,
	.cortecero-premium .cc-menu .cc-menu-cta { transition: none; opacity: 1; transform: none; }
}

/* ==========================================================================
   18. ERRADICACIÓN TOTAL DE AZULES · todos los estados interactivos -> rojo
       (el azul del FAQ era el anillo de foco por defecto del navegador al hacer clic)
   ========================================================================== */
.cortecero-premium {
	accent-color: var(--cc-accent);                       /* checkboxes/radios/range nativos */
	-webkit-tap-highlight-color: rgba(245, 37, 47, 0.18); /* highlight táctil en móvil */
}

/* Color de foco de marca en todo; sin anillo azul al hacer clic con ratón,
   pero se conserva un anillo rojo accesible al navegar con teclado. */
.cortecero-premium :focus { outline-color: var(--cc-accent); }
.cortecero-premium a:focus:not(:focus-visible),
.cortecero-premium button:focus:not(:focus-visible),
.cortecero-premium [role="button"]:focus:not(:focus-visible),
.cortecero-premium .elementor-tab-title:focus:not(:focus-visible),
.cortecero-premium summary:focus:not(:focus-visible),
.cortecero-premium input:focus:not(:focus-visible),
.cortecero-premium textarea:focus:not(:focus-visible) {
	outline: none;
}

/* ACORDEÓN / FAQ · estados de marca completos (hover, foco y activo) */
.cortecero-premium .elementor-tab-title:hover,
.cortecero-premium .elementor-tab-title:focus,
.cortecero-premium .elementor-tab-title.elementor-active,
.cortecero-premium .elementor-tab-title:hover .elementor-accordion-title,
.cortecero-premium .elementor-tab-title:focus .elementor-accordion-title,
.cortecero-premium .elementor-tab-title.elementor-active .elementor-accordion-title {
	color: var(--cc-accent);
}
.cortecero-premium .elementor-tab-title:hover .elementor-accordion-icon i:before,
.cortecero-premium .elementor-tab-title:focus .elementor-accordion-icon i:before {
	color: var(--cc-accent);
}

/* Widgets Atómicos V4 de Elementor (su azul por defecto es #375EFB) -> rojo */
.cortecero-premium .e-button-base,
.cortecero-premium .e-form-base .e-button-base { background-color: var(--cc-accent) !important; }
.cortecero-premium .e-tab-base.e--selected,
.cortecero-premium .e-tab-base:focus,
.cortecero-premium .e-heading-link-base:hover,
.cortecero-premium .e-paragraph-link-base:hover,
.cortecero-premium .e-link:hover { color: var(--cc-accent) !important; border-color: var(--cc-accent) !important; }

/* Cualquier enlace genérico no cubierto antes: hover rojo de marca
   (los botones mantienen su estilo propio por mayor especificidad) */
.cortecero-premium a:not(.elementor-button):not(.cc-menu-cta):hover {
	color: var(--cc-accent);
}

/* ==========================================================================
   19. ACORDEÓN / FAQ · pulido UX premium
   ========================================================================== */
.cortecero-premium .elementor-tab-title {
	cursor: pointer;
	padding-inline: 4px;
}
.cortecero-premium .elementor-tab-title:hover { padding-inline-start: 12px; }
.cortecero-premium .elementor-accordion-icon i,
.cortecero-premium .elementor-accordion-icon svg {
	transition: transform 0.4s var(--cc-ease), color 0.3s var(--cc-ease);
}
.cortecero-premium .elementor-tab-title.elementor-active .elementor-accordion-icon i {
	transform: rotate(90deg);
}
.cortecero-premium .elementor-tab-content {
	animation: cc-fade-in 0.5s var(--cc-ease);
}
@keyframes cc-fade-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   20. PULIDO UX GLOBAL
   ========================================================================== */
/* Las anclas (#secciones) no quedan ocultas bajo el header fijo */
.cortecero-premium [id] { scroll-margin-top: 110px; }

/* Mapa Google en blanco y negro de marca; recupera color al interactuar */
.cortecero-premium .elementor-widget-google_maps iframe {
	filter: grayscale(1) contrast(1.05) brightness(0.92);
	transition: filter 0.6s var(--cc-ease);
}
.cortecero-premium .elementor-widget-google_maps:hover iframe {
	filter: grayscale(0) contrast(1) brightness(1);
}

/* Imágenes: contraste B/N coherente y foco rojo */
.cortecero-premium .elementor-widget-image img { transition: transform 0.9s var(--cc-ease), filter 0.6s var(--cc-ease); }

/* Botón de envío del formulario hereda el estilo premium del botón */
.cortecero-premium .elementor-field-type-submit button:hover {
	box-shadow: 0 14px 34px -12px var(--cc-accent);
}

/* Texto resaltado / marcas */
.cortecero-premium mark,
.cortecero-premium .has-inline-color a { color: var(--cc-accent); }

/* ==========================================================================
   21. BOTÓN FLOTANTE DE WHATSAPP · contacto directo siempre accesible
   ========================================================================== */
.cortecero-premium .cc-wa {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 99998;
	display: inline-flex;
	align-items: center;
	gap: 0;
	height: 60px;
	width: 60px;
	padding: 0;
	border-radius: 50px;
	background: #1faf54;
	color: #fff;
	text-decoration: none;
	overflow: hidden;
	box-shadow: 0 14px 34px -10px rgba(31, 175, 84, 0.7);
	transition: width 0.45s var(--cc-ease), background-color 0.3s var(--cc-ease),
		box-shadow 0.3s var(--cc-ease), transform 0.3s var(--cc-ease);
}
.cortecero-premium .cc-wa svg {
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
	padding: 16px;
	box-sizing: border-box;
}
.cortecero-premium .cc-wa-tip {
	white-space: nowrap;
	font-family: "Space Grotesk", sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
	padding-right: 22px;
	opacity: 0;
	transition: opacity 0.3s var(--cc-ease);
}
.cortecero-premium .cc-wa:hover {
	width: 188px;
	background: #25c462;
	box-shadow: 0 18px 40px -8px rgba(31, 175, 84, 0.85);
}
.cortecero-premium .cc-wa:hover .cc-wa-tip { opacity: 1; }
/* Halo pulsante para llamar la atención sin molestar */
.cortecero-premium .cc-wa::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 rgba(31, 175, 84, 0.55);
	animation: cc-wa-pulse 2.6s var(--cc-ease) infinite;
	pointer-events: none;
}
@keyframes cc-wa-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(31, 175, 84, 0.5); }
	70%  { box-shadow: 0 0 0 18px rgba(31, 175, 84, 0); }
	100% { box-shadow: 0 0 0 0 rgba(31, 175, 84, 0); }
}
@media (max-width: 767px) {
	.cortecero-premium .cc-wa { right: 16px; bottom: 16px; height: 54px; width: 54px; }
	.cortecero-premium .cc-wa svg { flex-basis: 54px; width: 54px; height: 54px; padding: 14px; }
}

/* ==========================================================================
   22. COUNTDOWN · urgencia para la Generación 01 (inyectado en el CTA final)
   ========================================================================== */
.cortecero-premium .cc-countdown {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 34px 0 8px;
	justify-content: center;
}
.cortecero-premium .cc-cd-unit {
	min-width: 92px;
	padding: 18px 10px 12px;
	border: 1px solid var(--cc-line-dim);
	background: rgba(255, 255, 255, 0.02);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.cortecero-premium .cc-cd-unit::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 2px;
	background: var(--cc-accent);
	transform: scaleX(0.4);
	transform-origin: left;
}
.cortecero-premium .cc-cd-num {
	display: block;
	font-family: "Anton", "Oswald", sans-serif;
	font-size: clamp(2.2rem, 6vw, 3.4rem);
	line-height: 1;
	color: var(--cc-paper);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}
.cortecero-premium .cc-cd-label {
	display: block;
	margin-top: 8px;
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--cc-muted);
}
.cortecero-premium .cc-cd-sep { display: none; }
@media (prefers-reduced-motion: reduce) {
	.cortecero-premium .cc-wa::after { animation: none; }
}

/* ==========================================================================
   23. RUTA DE 5 MESES · timeline vertical con progreso al hacer scroll
       (wrapper y filas se marcan por JS con ancestro común; degrada sin romper)
   ========================================================================== */
.cortecero-premium .cc-timeline { position: relative; }
.cortecero-premium .cc-timeline::before,
.cortecero-premium .cc-timeline::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 10px;
	width: 2px;
	pointer-events: none;
}
.cortecero-premium .cc-timeline::before {
	bottom: 10px;
	background: var(--cc-line-dim);
}
.cortecero-premium .cc-timeline::after {
	height: var(--cc-tl-progress, 0%);
	background: linear-gradient(var(--cc-accent), var(--cc-accent-deep));
	box-shadow: 0 0 14px var(--cc-accent);
	transition: height 0.25s var(--cc-ease-soft);
}
.cortecero-premium .cc-tl-row {
	position: relative;
	padding-left: 38px;
	transition: opacity 0.4s var(--cc-ease);
}
.cortecero-premium .cc-tl-row::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid var(--cc-line);
	background: #0a0a0a;
	z-index: 1;
	transition: border-color 0.45s var(--cc-ease), background-color 0.45s var(--cc-ease),
		box-shadow 0.45s var(--cc-ease), transform 0.45s var(--cc-ease);
}
.cortecero-premium .cc-tl-row.cc-tl-on::before {
	border-color: var(--cc-accent);
	background: var(--cc-accent);
	box-shadow: 0 0 0 6px var(--cc-accent-soft), 0 0 18px var(--cc-accent);
	transform: scale(1.08);
}
@media (max-width: 767px) {
	.cortecero-premium .cc-tl-row { padding-left: 28px; }
	.cortecero-premium .cc-timeline::before,
	.cortecero-premium .cc-timeline::after { left: 5px; }
}

/* ==========================================================================
   24. POPUP DE CONTACTO (30s) · tarjeta premium → WhatsApp
   ========================================================================== */
.cortecero-premium .cc-popup {
	position: fixed;
	inset: 0;
	z-index: 100050;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(0, 0, 0, 0.62);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s var(--cc-ease), visibility 0.4s var(--cc-ease);
}
.cortecero-premium .cc-popup.is-open { opacity: 1; visibility: visible; }
.cortecero-premium .cc-popup-card {
	position: relative;
	width: min(440px, 100%);
	padding: 40px 34px 30px;
	background: radial-gradient(120% 90% at 100% 0%, #1b0608 0%, #0a0a0a 60%);
	border: 1px solid var(--cc-line-dim);
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9);
	transform: translateY(24px) scale(0.97);
	transition: transform 0.5s var(--cc-ease);
	overflow: hidden;
}
.cortecero-premium .cc-popup.is-open .cc-popup-card { transform: none; }
.cortecero-premium .cc-popup-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, var(--cc-accent), var(--cc-accent-bright));
}
.cortecero-premium .cc-popup-eyebrow {
	font-family: "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--cc-accent);
	margin-bottom: 14px;
}
.cortecero-premium .cc-popup-title {
	font-family: "Anton", "Oswald", sans-serif;
	font-size: clamp(2rem, 7vw, 2.6rem);
	line-height: 1;
	color: var(--cc-paper);
	margin: 0 0 12px;
	text-transform: uppercase;
}
.cortecero-premium .cc-popup-text {
	font-family: "Inter", sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #c9c9d2;
	margin: 0 0 24px;
}
.cortecero-premium .cc-popup-cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	justify-content: center;
	padding: 16px 24px;
	background: #1faf54;
	color: #fff;
	font-family: "Space Grotesk", sans-serif;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-decoration: none;
	transition: background-color 0.3s var(--cc-ease), transform 0.3s var(--cc-ease), box-shadow 0.3s var(--cc-ease);
}
.cortecero-premium .cc-popup-cta:hover {
	background: #25c462;
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -12px rgba(31, 175, 84, 0.7);
}
.cortecero-premium .cc-popup-dismiss {
	display: block;
	margin: 16px auto 0;
	padding: 6px 10px;
	background: none;
	border: 0;
	color: var(--cc-muted);
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.3s var(--cc-ease);
}
.cortecero-premium .cc-popup-dismiss:hover { color: var(--cc-paper); }
.cortecero-premium .cc-popup-x {
	position: absolute;
	top: 12px;
	right: 14px;
	width: 34px;
	height: 34px;
	background: none;
	border: 0;
	color: var(--cc-muted);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.3s var(--cc-ease), transform 0.3s var(--cc-ease);
}
.cortecero-premium .cc-popup-x:hover { color: var(--cc-accent); transform: rotate(90deg); }

/* ==========================================================================
   25. HEADER MÓVIL · más aire (vertical y a los lados, que no vaya al límite)
   ========================================================================== */
@media (max-width: 1024px) {
	.cortecero-premium .elementor-location-header .elementor-element-c77b046 {
		/* Misma altura y centrado que el estado scrolled, para que al volver
		   arriba del todo NO salte (solo cambia el fondo: transparente aquí,
		   cristal al hacer scroll). */
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		padding-left: 20px !important;    /* logo ~31px del borde izquierdo */
		padding-right: 20px !important;
		min-height: 84px !important;
		align-items: center !important;   /* logo centrado verticalmente */
		overflow: visible !important;     /* que el logo no se recorte */
	}
	/* el logo respira y no se ve cortado */
	.cortecero-premium .elementor-location-header .elementor-element-61af653,
	.cortecero-premium .elementor-location-header .elementor-element-61af653 img {
		overflow: visible !important;
	}
	/* la hamburguesa también más separada del borde derecho (simétrico) */
	.cortecero-premium .cc-burger { right: 30px !important; }
}
@media (prefers-reduced-motion: reduce) {
	.cortecero-premium .cc-popup,
	.cortecero-premium .cc-popup-card { transition: opacity 0.2s linear; transform: none; }
}

/* ==========================================================================
   26. "DONDE SE FORJA EL CRITERIO" · espaciado móvil más ajustado
   ========================================================================== */
@media (max-width: 767px) {
	.cortecero-premium .elementor-element-bba7f4b {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
		row-gap: 16px !important;
	}
	/* columnas internas (imágenes / texto) más juntas al apilarse */
	.cortecero-premium .elementor-element-bba7f4b .e-con-inner { row-gap: 18px !important; }
	.cortecero-premium .elementor-element-bba7f4b .elementor-widget-image { margin-bottom: 0 !important; }
}

/* Ancla del formulario (#inscripcion): al saltar desde "RESERVA TU PLAZA" que
   el header fijo no tape el título del formulario. */
#inscripcion { scroll-margin-top: 100px; }

/* ==========================================================================
   29. EL MÉTODO · "LA DIRECCIÓN" (Ramón / Manuel) en la misma línea
       Las columnas al 48%+48% con column-gap 60px sumaban >100% y hacían
       wrap (se apilaban incluso en escritorio). flex:1 + nowrap = siempre
       lado a lado en tablet/desktop; en móvil (<768px) se apilan.
   ========================================================================== */
@media (min-width: 768px) {
	.cortecero-premium .elementor-element-aff3133 {
		flex-wrap: nowrap !important;
		align-items: flex-start !important;   /* nombres alineados arriba */
	}
	.cortecero-premium .elementor-element-4729b36,
	.cortecero-premium .elementor-element-8af6a9b {
		width: auto !important;
		flex: 1 1 0 !important;
	}
}

/* ==========================================================================
   27. PANTALLAS ANCHAS · el contenido "boxed" aprovecha más el ancho
       (en monitores grandes 1200px dejaba demasiado vacío a los lados)
   ========================================================================== */
@media (min-width: 1700px) {
	.cortecero-premium .e-con-boxed > .e-con-inner {
		max-width: 1340px !important;   /* ligero extra sobre 1200 sin romper las
		                                   secciones de dos columnas (antes 1440/1600
		                                   dejaban "El Programa" demasiado separado) */
		margin-inline: auto !important; /* centrado perfecto */
	}
}

/* ==========================================================================
   28. HERO · imágenes de convocatoria a sangre completa (cover)
       Desktop: hero-desktop.jpg (1920×1080, 16:9).
       Móvil/tablet ≤1024px: hero-mobile.jpg (1080×1920, 9:16).
       El texto va quemado en la propia imagen ("NUEVA CONVOCATORIA…"); se
       ocultan titular/subtítulo/eyebrow y se dejan solo los botones abajo.
   ========================================================================== */
.cortecero-premium .elementor-element-8be1ba2 {
	background-image: none !important;
	background-color: #0a0a0a !important;
	position: relative;
	overflow: hidden;
	justify-content: flex-end !important;   /* botones anclados abajo */
	padding-bottom: 6vh !important;
}
/* Sin capa difuminada: la imagen llena todo a sangre completa (cover). */
.cortecero-premium .elementor-element-8be1ba2::before { content: none !important; }
/* Imagen a ancho completo (cover). La imagen de desktop deja libre la franja
   inferior, así los botones caen ahí sin pisar el texto quemado. */
.cortecero-premium .elementor-element-8be1ba2::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: url("/wp-content/uploads/2026/06/hero-desktop.jpg") center center / cover no-repeat;
	pointer-events: none;
}
/* Contenido (botones + scroll) por encima de la imagen */
.cortecero-premium .elementor-element-8be1ba2 > .elementor-element {
	position: relative;
	z-index: 2;
}
/* Ocultar titular, subtítulo, eyebrow y el "↓ SCROLL" (la imagen ya lleva su
   mensaje); dejamos solo los botones, centrados y anclados abajo. */
.cortecero-premium .elementor-element-a8c6f08,
.cortecero-premium .elementor-element-d821c7b,
.cortecero-premium .elementor-element-eb8d0b6,
.cortecero-premium .elementor-element-c7e0951 { display: none !important; }

/* Botones: posición determinista abajo-centro del hero (evita que una
   animación de entrada los deje fuera de pantalla / invisibles). */
.cortecero-premium .elementor-element-8be1ba2 > .elementor-element-6415e6a {
	position: absolute !important;
	bottom: 4vh;
	left: 50% !important;
	transform: translateX(-50%) !important;   /* gana al estilo inline de la animación */
	z-index: 3;
	width: auto !important;
	max-width: 92%;
	justify-content: center !important;
	opacity: 1 !important;
	animation: none !important;
}
/* Scrim inferior sutil para que los botones se lean sobre la imagen */
.cortecero-premium .elementor-element-8be1ba2 > .elementor-element-6415e6a::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 220px;
	z-index: -1;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
	pointer-events: none;
}

/* Móvil/tablet: imagen a pantalla completa (cover, sin banda). Los botones
   van apilados y compactos al fondo, sobre el scrim, encima de la zona
   oscura de la imagen. */
@media (max-width: 1024px) {
	/* Móvil: la imagen se FUNDE con el menú superior (sube bajo el header
	   transparente) para ganar todo el alto y que el CTA quede libre de texto. */
	.cortecero-premium .elementor-element-8be1ba2 {
		margin-top: calc(-1 * var(--cc-headerH, 84px)) !important;
		/* Compensa el fuse: el hero VISIBLE = viewport completo (si no, quedaba
		   más corto y la imagen se recortaba metiendo el texto bajo el botón). */
		min-height: calc(100dvh + var(--cc-headerH, 84px)) !important;
	}
	.cortecero-premium .elementor-element-8be1ba2::before { display: none; }
	.cortecero-premium .elementor-element-8be1ba2::after {
		inset: 0;
		background-image: url("/wp-content/uploads/2026/06/hero-mobile.jpg");
		background-size: cover;
	}
	.cortecero-premium .elementor-element-8be1ba2 > .elementor-element-6415e6a {
		bottom: 4vh;
		width: 86% !important;
		max-width: 340px;
	}
	/* En móvil, un solo CTA primario (el secundario está en el resto de la web) */
	.cortecero-premium .elementor-element-8be1ba2 .elementor-element-1f95372 {
		display: none !important;
	}
	.cortecero-premium .elementor-element-6415e6a .elementor-button {
		width: 100%;
		padding: 16px 22px !important;
	}
}