/* SmartDent Master — estilos del front (banner classic + countdown) */

/* -------------------------------------------------------------------------
   Sin scroll horizontal en pantallas angostas
   ------------------------------------------------------------------------
   El drawer de navegacion movil (#navLinks del tema smartdent-v3) esta en
   position:fixed y, cuando esta cerrado, parkeado en translateX(ancho) justo
   fuera de pantalla a la derecha. El tema ya pone overflow-x:hidden en <html>,
   pero los navegadores NO recortan un position:fixed por overflow de un
   ancestro que no sea su containing block: el elemento sigue contando para el
   scrollWidth del documento. Resultado: en celular la pagina se podia arrastrar
   lateralmente 304px, dejando un franja vacia al Scrollear.

   overflow-x en <body> SI lo respeta para los fixed, porque body es el
   containing block inicial del viewport. Se aplica solo en <=900px (donde el
   drawer existe) y !important para ganar del CSS del tema.

   No se usa overflow-x:hidden en desktop: sin drawer no hay nada que recortar y
   en pantallas anchas podria recortar algo legitimo del tema.
   ---------------------------------------------------------------------- */
@media (max-width: 900px) {
	body {
		overflow-x: hidden !important;
	}
}

/* -------------------------------------------------------------------------
   Grillas con numero de columnas variable
   ------------------------------------------------------------------------
   Antes cada grilla llevaba style="grid-template-columns:repeat(N,1fr)" inline.
   Un estilo inline gana a CUALQUIER regla de CSS, incluidos los
   @media: por eso en movil las grillas se partian en 3 o 4 columnas de un
   tercio de ancho. Solo se veian bien de rebote, porque el CSS del tema se
   carga despues y su .card-grid gana por orden de cascada. Eso es fragil:
   depende del orden de carga, no de la intencion.

   Ahora el numero viaja como custom property (--sdm-cols), que SI puede ser
   sobrescrita por media queries. Solo se limita el ancho en pantallas
   estrechas, que es donde el problema existia.
   ---------------------------------------------------------------------- */
.sdm-grid {
	grid-template-columns: repeat(var(--sdm-cols, 3), minmax(0, 1fr));
}
@media (max-width: 1100px) {
	.sdm-grid {
		grid-template-columns: repeat(min(var(--sdm-cols, 3), 2), minmax(0, 1fr));
	}
}
@media (max-width: 640px) {
	.sdm-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Los items necesitan ancho minimo 0: sin esto, un contenido largo (URL, texto
   sin cortes) expande la columna y rompe la grilla. */
.sdm-grid > * {
	min-width: 0;
}

/* -------------------------------------------------------------------------
   Grilla de clinicas en detalle
   ------------------------------------------------------------------------
   El tema define solo `.clinic-detail-grid{display:grid;gap:1.5rem}`, sin
   grid-template-columns: sin valor explicito, CSS usa none y el navegador cae
   al auto-flow de UNA sola columna, asi que en desktop las 4 clinicas se
   apilaban a lo ancho completo (1180px) en vez de ir en 2 columnas.

   Ademas el tema tiene `@media (max-width:768px){ .clinic-detail{grid-template-columns:1fr} }`,
   apuntando a .clinic-detail, una clase que no existe en el markup: un typo, por
   lo que ese breakpoint nunca hizo nada.

   Se define la grilla aca. 2 columnas en desktop, 1 en movil. El tema sigue
   mandando en gap y en todo lo demas.
   ---------------------------------------------------------------------- */
.clinic-detail-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}
@media (max-width: 900px) {
	.clinic-detail-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* La variante compacta (Home) ya usa .card-grid, que el tema si define en
   columnas. Se asegura un ancho minimo de 0 para que un item con contenido
   largo no rompa la grilla. */
.clinic-detail-grid > *,
.card-grid > * {
	min-width: 0;
}

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

/* -------------------------------------------------------------------------
   Banner "classic" — banner azul actual (debe verse EXACTAMENTE igual a hoy)
   ---------------------------------------------------------------------- */
.sc-ob-hero {
	background: radial-gradient(1200px 500px at 80% -10%, rgba(0, 180, 216, .25), transparent), linear-gradient(135deg, #042f40, #0B6E8F);
	color: #fff;
	padding: 3.2rem 1rem;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.sc-ob-hero .eyebrow {
	color: #7fd4e8;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-size: .8rem;
}
.sc-ob-hero h1 {
	font-size: clamp(1.55rem, 3.2vw, 3rem);
	margin: .5rem 0 .6rem;
	line-height: 1.15;
}
.sc-ob-hero p {
	max-width: 640px;
	margin: 0 auto;
	opacity: .92;
	font-size: 1.02rem;
}
.sc-ob-hero .sc-ob-cta {
	color: #fff;
	text-decoration: underline;
}
@media (max-width: 480px) {
	.sc-ob-hero {
		padding: 2.4rem .7rem;
	}
}

/* -------------------------------------------------------------------------
   Banner "countdown" — imagen de fondo (o gradiente de respaldo) + contador
   ---------------------------------------------------------------------- */
.sdm-banner--countdown {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 360px;
	overflow: hidden;
	color: #fff;
	isolation: isolate;
}

/* Fondo de respaldo: gradiente naranja/oscuro + formas geométricas sutiles.
   Sólo se muestra cuando NO hay imagen cargada. */
.sdm-banner--no-img {
	background: linear-gradient(120deg, #1a0a02 0%, #3d1200 35%, #c2410c 75%, #f97316 100%);
}
.sdm-countdown__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.sdm-countdown__bg::before,
.sdm-countdown__bg::after {
	content: "";
	position: absolute;
	opacity: .14;
}
.sdm-countdown__bg::before {
	width: 340px;
	height: 340px;
	border-radius: 50%;
	border: 2px solid #fff;
	top: -110px;
	left: -70px;
}
.sdm-countdown__bg::after {
	width: 0;
	height: 0;
	border-left: 170px solid transparent;
	border-right: 170px solid transparent;
	border-bottom: 260px solid #fff;
	bottom: -60px;
	left: 34%;
	transform: rotate(18deg);
}

/* Capa de imagen de fondo (cuando hay imagen, la imagen manda). */
.sdm-countdown__media,
.sdm-countdown__media-mobile {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.sdm-countdown__media-mobile {
	display: none;
}
@media (max-width: 700px) {
	.sdm-banner--has-img .sdm-countdown__media {
		display: none;
	}
	.sdm-banner--has-img .sdm-countdown__media-mobile {
		display: block;
	}
}

/* Layout interno */
.sdm-countdown__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 2.4rem 1.4rem;
	display: flex;
	align-items: center;
	gap: 2rem;
}
.sdm-banner--has-img .sdm-countdown__inner {
	justify-content: flex-end;
}
.sdm-banner--no-img .sdm-countdown__inner {
	justify-content: space-between;
	flex-wrap: wrap;
}

/* Lado izquierdo (sólo se imprime cuando NO hay imagen). */
.sdm-countdown__left {
	display: flex;
	flex-direction: column;
	gap: .9rem;
	max-width: 560px;
	position: relative;
}
.sdm-countdown__badge {
	color: #f7e7d3;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-size: .8rem;
}
.sdm-countdown__title-wrap {
	position: relative;
	display: inline-block;
}
.sdm-countdown__hex {
	position: absolute;
	inset: -14px -26px;
	border: 2px solid rgba(255, 255, 255, .35);
	transform: rotate(12deg) skewX(-6deg);
	border-radius: 8px;
	z-index: -1;
}
.sdm-countdown__title {
	margin: 0;
	font-size: clamp(2rem, 6vw, 4.2rem);
	line-height: 1;
	color: #fff;
	text-transform: uppercase;
}
.sdm-title__main {
	font-weight: 800;
	font-style: normal;
}
.sdm-title__script {
	font-style: italic;
	font-weight: 500;
	text-transform: none;
}
.sdm-countdown__offer {
	align-self: flex-start;
	background: #8f1d0d;
	color: #fff;
	font-weight: 700;
	padding: .45rem 1rem;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: .06em;
}

/* Lado derecho: contador. */
.sdm-countdown__right {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	width: 100%;
	max-width: 640px;
}
.sdm-countdown__aprovecha {
	font-size: clamp(1.8rem, 4.2vw, 3rem);
	font-style: italic;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .02em;
	transform: rotate(-3deg);
	color: #fff;
	text-shadow: 0 3px 12px rgba(0, 0, 0, .35);
}

/* Contador estilo flip-clock. */
.sdm-clock {
	display: flex;
	gap: .9rem;
	justify-content: center;
	flex-wrap: wrap;
}
.sdm-clock__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .55rem;
}
.sdm-clock__box {
	position: relative;
	background: #f2ece1;
	border-radius: 14px;
	padding: 1rem 1.3rem;
	min-width: 96px;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
	overflow: hidden;
	perspective: 500px;
}
.sdm-clock__num {
	display: block;
	font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	font-weight: 900;
	font-size: clamp(2rem, 5vw, 3.6rem);
	line-height: 1;
	color: #1c1917;
	text-align: center;
	font-variant-numeric: tabular-nums;
	backface-visibility: hidden;
}
/* Línea horizontal central que simula el split-flap del reloj mecánico. */
.sdm-clock__split {
	position: absolute;
	left: 8%;
	right: 8%;
	top: 50%;
	height: 2px;
	background: linear-gradient(90deg, rgba(28, 25, 23, 0), rgba(28, 25, 23, .22), rgba(28, 25, 23, 0));
	transform: translateY(-50%);
	pointer-events: none;
}
.sdm-clock__label {
	color: #fff;
	font-style: italic;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .72rem;
	text-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}
.sdm-countdown__foot {
	margin: 0;
	color: rgba(255, 255, 255, .92);
	font-size: .85rem;
	text-align: center;
	text-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}
.sdm-countdown__link {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
}

/* Estado finalizado. */
.sdm-countdown--ended .sdm-clock__num {
	opacity: .55;
}

/* Animaciones del contador (configurables por data-anim). */
.sdm-clock__num.sdm-anim-flip {
	animation: sdm-flip .5s ease;
}
@keyframes sdm-flip {
	0% { transform: rotateX(-90deg); }
	100% { transform: rotateX(0deg); }
}
.sdm-clock__num.sdm-anim-fade {
	animation: sdm-fade .4s ease;
}
@keyframes sdm-fade {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}
.sdm-clock__num.sdm-anim-pulse {
	animation: sdm-pulse .45s ease;
}
@keyframes sdm-pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.14); }
	100% { transform: scale(1); }
}

/* Responsive. */
@media (max-width: 900px) {
	.sdm-banner--countdown .sdm-countdown__inner {
		flex-direction: column;
		justify-content: center;
		text-align: center;
		gap: 1.4rem;
	}
	.sdm-countdown__left {
		align-items: center;
		text-align: center;
	}
	.sdm-countdown__offer {
		align-self: center;
	}
	.sdm-countdown__right {
		align-items: center;
	}
}
@media (max-width: 600px) {
	.sdm-countdown__inner {
		padding: 1.6rem 1rem;
	}
	.sdm-clock {
		gap: .5rem;
	}
	.sdm-clock__box {
		min-width: 64px;
		padding: .7rem;
		border-radius: 10px;
	}
	.sdm-clock__num {
		font-size: 2rem;
	}
	.sdm-countdown__aprovecha {
		font-size: 1.6rem;
	}
}

/* ---------------------------------------------------------------------------
 * [sd_postular] — formulario de postulación
 * ------------------------------------------------------------------------ */
.sdm-postular {
	max-width: 900px;
	margin: 2.6rem auto 0;
	padding: clamp(1.6rem, 4vw, 2.6rem);
	background: #fff;
	border: 1px solid #e5eaf0;
	border-radius: 16px;
	font-family: "Inter", "Source Sans Pro", system-ui, sans-serif;
}
.sdm-postular__head {
	text-align: center;
	margin-bottom: 1.6rem;
}
.sdm-postular__title {
	margin: 0 0 .5rem;
	font-size: clamp(1.35rem, 3vw, 1.9rem);
	color: #0c1622;
	font-family: "Inter", "Montserrat", sans-serif;
	font-weight: 800;
}
.sdm-postular__sub {
	margin: 0;
	color: #5b6b7b;
}
.sdm-postular__form {
	display: grid;
	gap: 1.05rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* La vacante se mantiene arriba a ancho completo */
.sdm-postular__form > .sdm-postular__row:first-of-type {
	grid-column: 1 / -1;
}
@media (max-width: 620px) {
	.sdm-postular__form {
		grid-template-columns: 1fr;
	}
}
.sdm-postular__row {
	display: grid;
	gap: .38rem;
}
/* Filas a dos columnas: nombre/email, telefono/ciudad, cargo/pretensiones,
   disponibilidad. Los campos "full" (motivacion, CV) ocupan el ancho completo. */
.sdm-postular__row--full {
	grid-column: 1 / -1;
}
.sdm-postular__help {
	font-size: .78rem;
	color: #6b7a8a;
	line-height: 1.4;
}
/* input[type=file]: el padding nativo produce un input desalineado, se normaliza */
.sdm-postular__file {
	padding: .55rem .7rem;
	background: #f5f9fc;
	cursor: pointer;
}
.sdm-postular__file::file-selector-button {
	margin-right: .7rem;
	padding: .45rem .9rem;
	border: 1px solid #cfd8e3;
	border-radius: 8px;
	background: #fff;
	color: #26323d;
	font: inherit;
	font-weight: 600;
	font-size: .85rem;
	cursor: pointer;
}
.sdm-postular__file::file-selector-button:hover {
	border-color: #00b4d8;
	color: #0b6e8f;
}
.sdm-postular__file.is-loaded {
	border-color: #00b4d8;
	background: #f0fbfe;
}
.sdm-postular__ok .sdm-postular__file,
.sdm-postular__file-note {
	font-size: .85rem;
	color: #3d4a57;
}
.sdm-postular__label {
	font-size: .88rem;
	font-weight: 700;
	color: #26323d;
}
.sdm-postular__input {
	width: 100%;
	padding: .78rem .9rem;
	font: inherit;
	color: #0c1622;
	background: #fbfdfe;
	border: 1px solid #cfd8e3;
	border-radius: 10px;
	transition: border-color .15s, box-shadow .15s;
}
.sdm-postular__input:focus {
	outline: none;
	border-color: #00b4d8;
	box-shadow: 0 0 0 3px rgba(0, 180, 216, .18);
}
textarea.sdm-postular__input {
	resize: vertical;
	min-height: 120px;
}
.sdm-postular__actions {
	margin-top: .5rem;
	display: flex;
	justify-content: center;
}
.sdm-postular--ok,
.sdm-postular--error {
	text-align: center;
	border-left: 4px solid #00b4d8;
}
.sdm-postular--error {
	border-left-color: #d9534f;
}
@media (max-width: 600px) {
	.sdm-postular {
		margin: 1.8rem 0 0;
		border-radius: 14px;
	}
	.sdm-postular__actions .btn {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * Banner estilo "split" — imagen en panel izquierdo + contador en panel derecho.
 * A diferencia de "countdown", aquí NADA se superpone sobre la imagen.
 * ------------------------------------------------------------------------ */
.sdm-banner--split {
	position: relative;
	margin: 0 auto 2.6rem;
	max-width: 1180px;
	padding: 0 clamp(1rem, 3vw, 2rem);
	font-family: "Inter", "Source Sans Pro", system-ui, sans-serif;
}
.sdm-banner--split .sdm-banner__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: clamp(1rem, 2.4vw, 2rem);
	align-items: stretch;
}
.sdm-banner--split .sdm-banner__media {
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	min-height: 260px;
	background: #0b0d12;
	box-shadow: 0 18px 46px rgba(8, 14, 22, .22);
}
.sdm-banner--split .sdm-banner__img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 260px;
	object-fit: cover;
}
.sdm-banner--split .sdm-banner__fallback {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(900px 380px at 18% 0%, rgba(255, 122, 0, .45), transparent 62%),
		linear-gradient(135deg, #1a0f06 0%, #2a1508 46%, #07080d 100%);
}
/* Panel derecho */
.sdm-banner--split .sdm-banner__panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1rem, 2.4vw, 1.8rem);
	text-align: center;
	border-radius: 18px;
	background:
		radial-gradient(700px 320px at 50% 0%, rgba(255, 122, 0, .22), transparent 68%),
		linear-gradient(160deg, #14181f 0%, #0a0c11 100%);
	border: 1px solid rgba(255, 255, 255, .08);
	box-shadow: 0 18px 46px rgba(8, 14, 22, .26);
}
.sdm-banner--split .sdm-banner__aprovecha {
	font-size: clamp(.9rem, 1.5vw, 1.05rem);
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #ffb066;
}
.sdm-banner--split .sdm-banner__texts {
	display: grid;
	gap: .45rem;
}
.sdm-banner--split .sdm-banner__badge {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #ffcf9a;
}
.sdm-banner--split .sdm-banner__title {
	margin: 0;
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	line-height: 1.08;
	color: #fff;
	font-weight: 800;
}
.sdm-banner--split .sdm-banner__offer {
	font-size: .95rem;
	color: #c3ccd8;
}
.sdm-banner--split .sdm-banner__foot {
	margin: 0;
	font-size: .82rem;
	line-height: 1.5;
	color: #97a3b2;
	max-width: 34ch;
}
/* El enlace envuelve los dos paneles: no debe romper el layout */
.sdm-banner--split a.sdm-banner__link {
	display: block;
	text-decoration: none;
	color: inherit;
}
.sdm-banner--split a.sdm-banner__link:hover .sdm-banner__media,
.sdm-banner--split a.sdm-banner__link:hover .sdm-banner__panel {
	transform: translateY(-2px);
}
.sdm-banner--split .sdm-banner__media,
.sdm-banner--split .sdm-banner__panel {
	transition: transform .22s ease, box-shadow .22s ease;
}
@media (max-width: 900px) {
	.sdm-banner--split .sdm-banner__inner {
		grid-template-columns: minmax(0, 1fr);
	}
	.sdm-banner--split .sdm-banner__media,
	.sdm-banner--split .sdm-banner__img {
		min-height: 190px;
	}
}
@media (max-width: 560px) {
	.sdm-banner--split {
		margin-bottom: 1.9rem;
		padding: 0 .85rem;
	}
	.sdm-banner--split .sdm-banner__media,
	.sdm-banner--split .sdm-banner__panel {
		border-radius: 14px;
	}
	.sdm-banner--split .sdm-banner__panel {
		padding: 1.3rem 1rem;
	}
}

/* ===========================================================================
 * SEGUNDO SLIDER DEL HOME  ·  .sdm-b2
 *
 * Carrusel de promos: la imagen ocupa la mayor parte (izquierda) y el contador
 * flip-clock vive en un panel lateral (derecha), al estilo del banner
 * SmartClick. Todo el bloque es clicable y hay flechas, dots y autoplay.
 * ========================================================================= */
.sdm-b2 {
	position: relative;
	margin: 0 auto 2.8rem;
	max-width: 1180px;
	padding: 0 clamp(1rem, 3vw, 2rem);
	font-family: "Inter", "Source Sans Pro", system-ui, sans-serif;
}

/* --- Viewport: recorta el track para que solo se vea el slide activo ------ */
.sdm-b2__viewport {
	position: relative;
	overflow: hidden;
	border-radius: 22px;
	background: #07080d;
	box-shadow:
		0 26px 60px rgba(6, 12, 20, .3),
		0 0 0 1px rgba(255, 255, 255, .05);
	/* Aisla el hover: el scale del slide no debe chocar con el hero de arriba */
	isolation: isolate;
}
.sdm-b2__track {
	display: flex;
	align-items: stretch;
	will-change: transform;
}
.sdm-b2--slide .sdm-b2__track {
	transition: transform .68s cubic-bezier(.22, .82, .28, 1);
}
.sdm-b2--fade .sdm-b2__track {
	transition: none;
}
.sdm-b2--zoom .sdm-b2__track {
	transition: transform .78s cubic-bezier(.22, .82, .28, 1);
}

/* --- Slide ---------------------------------------------------------------- */
.sdm-b2__slide {
	position: relative;
	flex: 0 0 100%;
	min-width: 0;
	display: grid;
	grid-template-columns: minmax(0, 1.62fr) minmax(0, .9fr);
	align-items: stretch;
	opacity: 1;
}
.sdm-b2--fade .sdm-b2__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .55s ease, visibility 0s linear .55s;
}
.sdm-b2--fade .sdm-b2__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .55s ease, visibility 0s linear 0s;
	z-index: 2;
}
/* En modo fade el viewport necesita altura propia */
.sdm-b2--fade .sdm-b2__viewport {
	display: grid;
}
.sdm-b2--fade .sdm-b2__track {
	display: block;
	position: relative;
}

/* --- Columna de la imagen ------------------------------------------------- */
.sdm-b2__media {
	position: relative;
	overflow: hidden;
	background: #0b0d12;
	min-height: 300px;
}
.sdm-b2__img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 300px;
	object-fit: cover;
	/* El Ken-Burns se anima solo en el slide visible (ver JS .is-active) */
	transform: scale(1.001);
	transition: transform 1.1s cubic-bezier(.2, .7, .3, 1);
}
.sdm-b2__slide.is-active .sdm-b2__img {
	transform: scale(1.045);
}
.sdm-b2--zoom .sdm-b2__slide.is-active .sdm-b2__img {
	transform: scale(1.09);
}
/* Velo inferior: da contraste y profundidad al arte sin taparlo */
.sdm-b2__media::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 42%;
	background: linear-gradient(to top, rgba(4, 6, 10, .72), transparent);
	pointer-events: none;
}
.sdm-b2__fallback {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(900px 420px at 16% 8%, rgba(255, 122, 0, .42), transparent 62%),
		radial-gradient(700px 380px at 88% 96%, rgba(0, 180, 216, .26), transparent 64%),
		linear-gradient(135deg, #1a0f06 0%, #2a1508 48%, #07080d 100%);
}

/* --- Panel del contador --------------------------------------------------- */
.sdm-b2__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(.7rem, 1.6vw, 1.05rem);
	padding: clamp(1.5rem, 3vw, 2.3rem) clamp(1rem, 2.2vw, 1.7rem);
	text-align: center;
	background:
		radial-gradient(680px 340px at 50% 0%, rgba(255, 122, 0, .24), transparent 66%),
		linear-gradient(160deg, #14181f 0%, #0a0c11 100%);
	border-left: 1px solid rgba(255, 255, 255, .07);
	overflow: hidden;
}
/* Halo animado: da vida al panel sin distraer */
.sdm-b2__glow {
	position: absolute;
	inset: -30% -30% auto -30%;
	height: 60%;
	background: radial-gradient(closest-side, rgba(255, 150, 60, .30), transparent);
	opacity: .7;
	animation: sdm-b2-glow 6.5s ease-in-out infinite;
	pointer-events: none;
}
@keyframes sdm-b2-glow {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .45; }
	50%      { transform: translate3d(0, 12%, 0) scale(1.18); opacity: .85; }
}
.sdm-b2__aprovecha {
	position: relative;
	display: inline-block;
	padding: .38rem 1rem;
	border-radius: 999px;
	font-size: clamp(.74rem, 1.3vw, .86rem);
	font-weight: 800;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: #0b0d12;
	background: linear-gradient(96deg, #ffc078 0%, #ff9a3c 100%);
	box-shadow: 0 8px 22px rgba(255, 140, 50, .3);
	animation: sdm-b2-bob 3.4s ease-in-out infinite;
}
@keyframes sdm-b2-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-4px); }
}
.sdm-b2__foot {
	position: relative;
	margin: 0;
	max-width: 30ch;
	font-size: .82rem;
	line-height: 1.5;
	color: #9aa6b5;
}

/* El contador flip hereda su estilo del banner; aquí sólo se centra y ajusta */
.sdm-b2__panel .sdm-clock {
	justify-content: center;
}

/* --- Capa de enlace ------------------------------------------------------- */
.sdm-b2__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	text-decoration: none;
	color: inherit;
}
/* El panel del contador queda por encima del overlay para que el reloj sea legible */
.sdm-b2__panel {
	z-index: 2;
}
.sdm-b2__slide:hover .sdm-b2__media .sdm-b2__img {
	transform: scale(1.075);
}

/* --- Flechas -------------------------------------------------------------- */
.sdm-b2__arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	width: 46px;
	height: 46px;
	margin-top: -23px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 999px;
	background: rgba(10, 13, 18, .55);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: background .2s ease, transform .2s ease, border-color .2s ease, opacity .2s ease;
}
.sdm-b2__arrow:hover {
	background: rgba(255, 140, 50, .9);
	border-color: rgba(255, 190, 120, .8);
	color: #0b0d12;
	transform: translateY(-50%) scale(1.06);
}
.sdm-b2__arrow:focus-visible {
	outline: 3px solid rgba(255, 170, 80, .85);
	outline-offset: 3px;
}
.sdm-b2__arrow--prev { left: 14px; }
.sdm-b2__arrow--next { right: 14px; }
/* Flechas siempre presionables: el hover las mueve con translateY(-50%). */
.sdm-b2__arrow--prev, .sdm-b2__arrow--next {
	transform: translateY(-50%);
}
.sdm-b2__arrow--prev:hover, .sdm-b2__arrow--next:hover {
	transform: translateY(-50%) scale(1.06);
}

/* --- Dots ----------------------------------------------------------------- */
.sdm-b2__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	margin-top: 1.05rem;
}
.sdm-b2__dot {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	max-width: 15rem;
	padding: .42rem .95rem;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 999px;
	background: rgba(255, 255, 255, .04);
	color: #b6c2d1;
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	overflow: hidden;
	transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
}
/* El texto del dot se revela al pasar el cursor o al estar activo */
.sdm-b2__dot > span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 0;
	opacity: 0;
	transition: max-width .32s cubic-bezier(.3, .8, .3, 1), opacity .25s ease;
}
.sdm-b2__dot:hover,
.sdm-b2__dot.is-active {
	color: #fff;
	border-color: rgba(255, 165, 80, .75);
	background: rgba(255, 140, 50, .16);
	transform: translateY(-1px);
}
.sdm-b2__dot:hover > span,
.sdm-b2__dot.is-active > span {
	max-width: 13rem;
	opacity: 1;
}
.sdm-b2__dot:focus-visible {
	outline: 3px solid rgba(255, 170, 80, .85);
	outline-offset: 2px;
}

/* --- Un solo slide: sin carrusel, sin dots ------------------------------- */
.sdm-b2--single .sdm-b2__dots,
.sdm-b2--single .sdm-b2__arrow {
	display: none;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1000px) {
	.sdm-b2__slide {
		grid-template-columns: minmax(0, 1fr);
	}
	.sdm-b2__media,
	.sdm-b2__img {
		min-height: 250px;
	}
	.sdm-b2__panel {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .07);
		padding: 1.5rem 1.1rem 1.7rem;
	}
	/* Sin flechas en touch: estorban al scroll */
	.sdm-b2__arrow {
		display: none;
	}
}
@media (max-width: 620px) {
	.sdm-b2 {
		margin-bottom: 2rem;
		padding: 0 .8rem;
	}
	.sdm-b2__viewport {
		border-radius: 16px;
	}
	.sdm-b2__media,
	.sdm-b2__img {
		min-height: 190px;
	}
	.sdm-b2__dots {
		gap: .38rem;
	}
	.sdm-b2__dot {
		padding: .34rem .6rem;
	}
	.sdm-b2__dot > span {
		display: none;
	}
}

/* --- Accesibilidad: respeta usuarios que piden menos movimiento ----------- */
@media (prefers-reduced-motion: reduce) {
	.sdm-b2 *,
	.sdm-b2 *::before,
	.sdm-b2 *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}