/*
 * Estilos del carrusel. Todo va bajo .ccar-carousel para que Astra
 * (u otro tema) no pise los estilos ni al revés.
 *
 * Breakpoints (deben coincidir con Slides::MOBILE_MAX):
 *   Escritorio  > 1024px
 *   Tablet      768px – 1024px
 *   Móvil       <= 767px
 *
 * Todas las medidas que cambian por dispositivo son variables --ccar-*
 * definidas aquí arriba y reasignadas en cada @media, para que se pueda
 * ver de un vistazo qué tamaño tiene cada cosa en cada pantalla.
 */

/* ======================================================================
   Escala tipográfica y espaciado — ESCRITORIO
   ====================================================================== */

.ccar-carousel {
	--ccar-height: var( --ccar-h-desktop, 550px );
	--ccar-pad-y: 48px;
	--ccar-pad-x: 80px;          /* Deja hueco a las flechas. */
	--ccar-content-max: 640px;
	--ccar-accent: #ffffff;      /* Flechas y puntos. */

	position: relative;
	width: 100%;
	margin: 0 0 1.5em;
}

/*            mini título   título   descripción   botón   nota */
/* Pequeño    12px          32px     16px          14px    12px */
/* Mediano    13px          44px     18px          15px    13px */
/* Grande     14px          60px     20px          16px    14px */
.ccar-carousel .ccar-size--s { --ccar-eyebrow: 12px; --ccar-title: 32px; --ccar-body: 16px; --ccar-btn: 14px; --ccar-note: 12px; }
.ccar-carousel .ccar-size--m { --ccar-eyebrow: 13px; --ccar-title: 44px; --ccar-body: 18px; --ccar-btn: 15px; --ccar-note: 13px; }
.ccar-carousel .ccar-size--l { --ccar-eyebrow: 14px; --ccar-title: 60px; --ccar-body: 20px; --ccar-btn: 16px; --ccar-note: 14px; }

/* ======================================================================
   TABLET
   ====================================================================== */

@media ( max-width: 1024px ) {
	.ccar-carousel {
		--ccar-height: var( --ccar-h-tablet, 450px );
		--ccar-pad-y: 40px;
		--ccar-pad-x: 64px;
		--ccar-content-max: 520px;
	}

	.ccar-carousel .ccar-size--s { --ccar-eyebrow: 12px; --ccar-title: 28px; --ccar-body: 15px; --ccar-btn: 14px; --ccar-note: 12px; }
	.ccar-carousel .ccar-size--m { --ccar-eyebrow: 12px; --ccar-title: 36px; --ccar-body: 17px; --ccar-btn: 15px; --ccar-note: 13px; }
	.ccar-carousel .ccar-size--l { --ccar-eyebrow: 13px; --ccar-title: 46px; --ccar-body: 18px; --ccar-btn: 15px; --ccar-note: 13px; }
}

/* ======================================================================
   MÓVIL
   ====================================================================== */

@media ( max-width: 767px ) {
	.ccar-carousel {
		--ccar-height: var( --ccar-h-mobile, 500px );
		--ccar-pad-y: 32px;
		--ccar-pad-x: 20px;           /* Sin flechas: aprovechamos el ancho. */
		--ccar-content-max: 100%;
	}

	/* Mínimo 15px en la descripción para que se lea sin hacer zoom. */
	.ccar-carousel .ccar-size--s { --ccar-eyebrow: 11px; --ccar-title: 22px; --ccar-body: 15px; --ccar-btn: 14px; --ccar-note: 12px; }
	.ccar-carousel .ccar-size--m { --ccar-eyebrow: 12px; --ccar-title: 28px; --ccar-body: 16px; --ccar-btn: 14px; --ccar-note: 12px; }
	.ccar-carousel .ccar-size--l { --ccar-eyebrow: 12px; --ccar-title: 34px; --ccar-body: 17px; --ccar-btn: 15px; --ccar-note: 13px; }
}

/* ======================================================================
   Ancho completo: se sale del contenedor de Astra hasta los bordes.
   --ccar-sbw (ancho de la barra de scroll) lo calcula carousel.js; sin él,
   100vw incluiría la barra y aparecería scroll horizontal.
   ====================================================================== */

.ccar-carousel--full {
	--ccar-vw: calc( 100vw - var( --ccar-sbw, 0px ) );
	width: var( --ccar-vw );
	max-width: none;
	margin-left: calc( 50% - var( --ccar-vw ) / 2 );
	margin-right: calc( 50% - var( --ccar-vw ) / 2 );
}

/* ======================================================================
   Estructura
   ====================================================================== */

.ccar-carousel .swiper {
	height: var( --ccar-height );
}

.ccar-carousel .ccar-slide {
	position: relative;
	display: flex;
	overflow: hidden;
	padding: var( --ccar-pad-y ) var( --ccar-pad-x );
	box-sizing: border-box;
	color: var( --ccar-text, #fff );
}

.ccar-carousel .ccar-slide__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.ccar-carousel .ccar-slide__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var( --ccar-focal, center );
}

.ccar-carousel .ccar-focal--center { --ccar-focal: center; }
.ccar-carousel .ccar-focal--top    { --ccar-focal: center top; }
.ccar-carousel .ccar-focal--bottom { --ccar-focal: center bottom; }
.ccar-carousel .ccar-focal--left   { --ccar-focal: left center; }
.ccar-carousel .ccar-focal--right  { --ccar-focal: right center; }

.ccar-carousel .ccar-slide__overlay {
	position: absolute;
	inset: 0;
	background: #000;
	opacity: var( --ccar-overlay, 0.5 );
	z-index: 1;
}

/*
 * Degradado: oscurece solo donde está el texto y deja la foto limpia en el
 * resto. La dirección la marca el layout (--ccar-grad-dir).
 */
.ccar-carousel .ccar-overlay--gradient .ccar-slide__overlay {
	opacity: 1;
	background: linear-gradient(
		var( --ccar-grad-dir, to right ),
		rgb( 0 0 0 / var( --ccar-overlay, 0.5 ) ) 0%,
		rgb( 0 0 0 / calc( var( --ccar-overlay, 0.5 ) * 0.6 ) ) 45%,
		rgb( 0 0 0 / 0 ) 85%
	);
}

.ccar-carousel .ccar-layout--left        { --ccar-grad-dir: to right; }
.ccar-carousel .ccar-layout--right       { --ccar-grad-dir: to left; }
.ccar-carousel .ccar-layout--bottom-left { --ccar-grad-dir: to top; }

/* Texto centrado: no hay un lado "del texto", así que el degradado es uniforme. */
.ccar-carousel .ccar-overlay--gradient.ccar-layout--center .ccar-slide__overlay {
	background: rgb( 0 0 0 / var( --ccar-overlay, 0.5 ) );
}

.ccar-carousel .ccar-slide__content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var( --ccar-content-max );
}

/* ======================================================================
   Texto: mini título → título → descripción → CTA → nota
   ====================================================================== */

.ccar-carousel .ccar-slide__eyebrow {
	margin: 0 0 0.9em;
	color: var( --ccar-eyebrow-color, #4da3ff );
	font-size: var( --ccar-eyebrow );
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* h2, o h1 en el primer slide si así se configura. Hereda la fuente de títulos de Astra. */
.ccar-carousel .ccar-slide__title {
	margin: 0 0 0.45em;
	color: inherit;
	font-size: var( --ccar-title );
	font-weight: 700;
	line-height: 1.12;
	overflow-wrap: break-word;
}

.ccar-carousel .ccar-slide__text {
	font-size: var( --ccar-body );
	line-height: 1.6;
}

.ccar-carousel .ccar-slide__text p {
	margin: 0 0 0.75em;
	color: inherit;
	font-size: inherit;
}

.ccar-carousel .ccar-slide__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.75em;
	padding: 1em 1.75em;
	min-height: 44px;            /* Área táctil mínima recomendada. */
	box-sizing: border-box;
	border: 2px solid transparent;
	border-radius: 4px;
	font-size: var( --ccar-btn );
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, filter 0.2s;
}

.ccar-carousel .ccar-btn--filled {
	background: var( --ccar-accent-slide, #2563eb );
	border-color: var( --ccar-accent-slide, #2563eb );
	color: #fff;
}

.ccar-carousel .ccar-btn--filled:hover,
.ccar-carousel .ccar-btn--filled:focus-visible {
	color: #fff;
	filter: brightness( 1.12 );
}

.ccar-carousel .ccar-btn--outline {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

.ccar-carousel .ccar-btn--outline:hover,
.ccar-carousel .ccar-btn--outline:focus-visible {
	background: var( --ccar-text, #fff );
	border-color: var( --ccar-text, #fff );
	color: #000;
}

.ccar-carousel .ccar-slide__note {
	margin: 1.1em 0 0;
	color: inherit;
	font-size: var( --ccar-note );
	line-height: 1.4;
	opacity: 0.7;
}

/* ======================================================================
   Animación de entrada del texto (desde el primer cambio de slide)
   ====================================================================== */

@keyframes ccar-fade-up {
	from {
		opacity: 0;
		transform: translateY( 18px );
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.ccar-anim--fade-up.ccar-has-changed .swiper-slide-active .ccar-slide__content > * {
	/* "both": el elemento espera invisible durante su retardo. */
	animation: ccar-fade-up 0.6s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
}

/* Uno detrás de otro: mini título → título → descripción → CTA → nota. */
.ccar-anim--fade-up.ccar-has-changed .swiper-slide-active .ccar-slide__content > :nth-child( 1 ) { animation-delay: 0.15s; }
.ccar-anim--fade-up.ccar-has-changed .swiper-slide-active .ccar-slide__content > :nth-child( 2 ) { animation-delay: 0.25s; }
.ccar-anim--fade-up.ccar-has-changed .swiper-slide-active .ccar-slide__content > :nth-child( 3 ) { animation-delay: 0.35s; }
.ccar-anim--fade-up.ccar-has-changed .swiper-slide-active .ccar-slide__content > :nth-child( 4 ) { animation-delay: 0.45s; }
.ccar-anim--fade-up.ccar-has-changed .swiper-slide-active .ccar-slide__content > :nth-child( 5 ) { animation-delay: 0.55s; }

@media ( prefers-reduced-motion: reduce ) {
	.ccar-carousel .ccar-slide__content > * {
		animation: none !important;
	}
}

/* ======================================================================
   Layouts — escritorio y tablet
   ====================================================================== */

.ccar-carousel .ccar-layout--center {
	align-items: center;
	justify-content: center;
	text-align: center;
}

.ccar-carousel .ccar-layout--left {
	align-items: center;
	justify-content: flex-start;
	text-align: left;
}

.ccar-carousel .ccar-layout--right {
	align-items: center;
	justify-content: flex-end;
	text-align: right;
}

.ccar-carousel .ccar-layout--bottom-left {
	align-items: flex-end;
	justify-content: flex-start;
	text-align: left;
}

/* ======================================================================
   Layouts — móvil ("inherit" no necesita reglas: mantiene el de escritorio)
   ====================================================================== */

@media ( max-width: 767px ) {
	.ccar-carousel .ccar-mlayout--center {
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	/* Deja sitio a los puntos de paginación. */
	.ccar-carousel .ccar-mlayout--bottom {
		--ccar-grad-dir: to top;
		align-items: flex-end;
		justify-content: center;
		text-align: center;
		padding-bottom: calc( var( --ccar-pad-y ) + 16px );
	}

	/* En móvil el texto ocupa todo el ancho: un degradado lateral dejaría
	   parte del texto sobre zona clara. */
	.ccar-carousel .ccar-overlay--gradient.ccar-mlayout--center .ccar-slide__overlay,
	.ccar-carousel .ccar-overlay--gradient.ccar-mlayout--inherit.ccar-layout--left .ccar-slide__overlay,
	.ccar-carousel .ccar-overlay--gradient.ccar-mlayout--inherit.ccar-layout--right .ccar-slide__overlay {
		background: rgb( 0 0 0 / var( --ccar-overlay, 0.5 ) );
	}

	.ccar-carousel .ccar-mlayout--image-only .ccar-slide__content,
	.ccar-carousel .ccar-mlayout--image-only .ccar-slide__overlay {
		display: none;
	}
}

/* ======================================================================
   Controles
   ====================================================================== */

.ccar-carousel .swiper-button-prev,
.ccar-carousel .swiper-button-next {
	/* Astra da estilos a <button>: los neutralizamos. */
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var( --ccar-accent );
}

/*
 * Puntos: se ven de 10px, pero el área táctil es de 24×24px
 * (mínimo de WCAG 2.5.8). El punto visible es el ::before.
 */
.ccar-carousel .swiper-pagination {
	--swiper-pagination-bullet-horizontal-gap: 0px;
	line-height: 0;
}

.ccar-carousel .swiper-pagination-bullet {
	position: relative;
	width: 24px;
	height: 24px;
	background: transparent;
	opacity: 1;
}

.ccar-carousel .swiper-pagination-bullet::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	transform: translate( -50%, -50% );
	background: var( --ccar-accent );
	opacity: 0.5;
	transition: opacity 0.2s;
}

.ccar-carousel .swiper-pagination-bullet-active::before {
	opacity: 1;
}

.ccar-carousel .swiper-pagination-bullet:focus-visible,
.ccar-carousel .swiper-button-prev:focus-visible,
.ccar-carousel .swiper-button-next:focus-visible,
.ccar-carousel .ccar-pause:focus-visible,
.ccar-carousel .ccar-slide__button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Botón pausa / reanudar. Iconos dibujados con CSS (sin imágenes). */
.ccar-carousel .ccar-pause {
	position: absolute;
	right: 16px;
	bottom: 14px;
	z-index: 10;
	width: 32px;
	height: 32px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb( 0 0 0 / 0.35 );
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.2s;
}

.ccar-carousel .ccar-pause:hover {
	background: rgb( 0 0 0 / 0.6 );
}

/* Pausa: dos barras. */
.ccar-carousel .ccar-pause::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 12px;
	transform: translate( -50%, -50% );
	border-left: 3px solid #fff;
	border-right: 3px solid #fff;
	box-sizing: border-box;
}

/* Reanudar: triángulo. */
.ccar-carousel .ccar-pause[aria-pressed="true"]::before {
	width: 0;
	height: 0;
	margin-left: 1px;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent #fff;
}

@media ( max-width: 767px ) {
	/* En móvil las flechas tapan el texto: se navega deslizando y con los puntos. */
	.ccar-carousel .swiper-button-prev,
	.ccar-carousel .swiper-button-next {
		display: none;
	}
}