/*
 * GSC Novedades Slider — v1.1.0
 * Figma Desktop: XZFlWcXZwxPWYiZV2lIPoD / node 6879:15543
 * Figma Mobile:  XZFlWcXZwxPWYiZV2lIPoD / node 6879:15923
 *
 * Tokens: Beige #F6F5F2 · Azul #2F3BE4 · Azul oscuro #171669 · Blanco #FAFAFA · Gris #99A6B7
 */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');

/* ═══════════════════════════════════════════
   BASE — Sección contenedor
═══════════════════════════════════════════ */
.nc-novedades {
	position:    relative;
	background:  #F6F5F2;
	padding:     56px 72px;
	box-sizing:  border-box;
	overflow:    hidden;
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
}

/* ── Shapes decorativas (absolutas, derecha) ── */
.nc-novedades__shapes {
	position:       absolute;
	right:          0;
	top:            0;
	width:          854px;
	height:         570px;
	overflow:       hidden;
	pointer-events: none;
	z-index:        0;
}
.nc-novedades__shapes img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

/* ── Columna principal ── */
.nc-novedades__inner {
	position:       relative;
	z-index:        1;
	display:        flex;
	flex-direction: column;
	gap:            56px;
	align-items:    center;
}

/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */
.nc-novedades__header {
	display:         flex;
	align-items:     flex-end;
	justify-content: space-between;
	width:           100%;
}

.nc-novedades__title {
	font-family:    'Quicksand', sans-serif;
	font-weight:    500;
	font-size:      40px;
	line-height:    44px;
	letter-spacing: -0.8px;
	color:          #2F3BE4;
	margin:         0;
	padding:        0;
	max-width:      526px;
}

/* Botón base */
.nc-novedades__btn-all {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	padding:         12px 24px;
	border-radius:   100px;
	background:      #2F3BE4;
	color:           #ffffff;
	font-family:     'Quicksand', sans-serif;
	font-weight:     500;
	font-size:       16px;
	line-height:     20px;
	letter-spacing:  -0.2px;
	text-decoration: none;
	white-space:     nowrap;
	flex-shrink:     0;
	box-sizing:      border-box;
	transition:      background 0.2s ease;
}
.nc-novedades__btn-all:hover,
.nc-novedades__btn-all:focus {
	background: #1E2BC5;
	color:      #ffffff;
}

/* Desktop: btn en header visible, btn mobile oculto */
.nc-novedades__btn-all--desktop { display: inline-flex; }
.nc-novedades__btn-all--mobile  { display: none; }

/* ═══════════════════════════════════════════
   SLIDER DESKTOP
═══════════════════════════════════════════ */
.nc-novedades__slider-viewport {
	width:    100%;
	overflow: hidden;
}
.nc-novedades__slider-track {
	display:    flex;
	flex-direction: row;
	gap:        24px;
	transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform;
}

/* ═══════════════════════════════════════════
   CARD — layout compartido desktop + mobile
═══════════════════════════════════════════ */
.nc-novedades__card {
	display:         flex;
	flex-direction:  row;
	gap:             24px;
	align-items:     stretch;
	width:           496px;
	flex-shrink:     0;
	padding:         24px;
	border-radius:   24px;
	background:      #FAFAFA;
	text-decoration: none;
	color:           inherit;
	box-sizing:      border-box;
	transition:      box-shadow 0.2s ease;
}
.nc-novedades__card:hover {
	box-shadow: 0 4px 24px rgba(47, 59, 228, 0.12);
}

/* Foto */
.nc-novedades__card-photo {
	width:         164px;
	height:        200px;
	flex-shrink:   0;
	border-radius: 16px;
	overflow:      hidden;
}
.nc-novedades__card-photo img {
	width:           100%;
	height:          100%;
	object-fit:      cover;
	object-position: center;
	display:         block;
}

/* Cuerpo */
.nc-novedades__card-body {
	flex:            1;
	display:         flex;
	flex-direction:  column;
	justify-content: space-between;
	min-width:       0;
}
.nc-novedades__card-top {
	display:        flex;
	flex-direction: column;
	gap:            8px;
}
.nc-novedades__card-date {
	font-size:      12px;
	line-height:    12px;
	color:          #99A6B7;
	text-transform: uppercase;
}
.nc-novedades__card-title {
	font-family:    'Quicksand', sans-serif;
	font-weight:    500;
	font-size:      20px;
	line-height:    24px;
	color:          #171669;
	margin:         0;
	padding:        0;
}

/* Footer de la card */
.nc-novedades__card-footer {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	margin-top:      16px;
}
.nc-novedades__card-tag {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	padding:         6px 12px;
	border:          1px solid #99A6B7;
	border-radius:   8px;
	font-size:       12px;
	line-height:     12px;
	color:           #171669;
	text-transform:  uppercase;
	white-space:     nowrap;
}

/* Flecha — desktop: círculo azul bordeado */
.nc-novedades__card-arrow {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           48px;
	height:          48px;
	border-radius:   50%;
	border:          1px solid #2F3BE4;
	flex-shrink:     0;
	color:           #2F3BE4;
	transition:      background 0.2s ease, color 0.2s ease;
}
.nc-novedades__card:hover .nc-novedades__card-arrow {
	background: #2F3BE4;
	color:      #ffffff;
}

/* ═══════════════════════════════════════════
   DOTS DE PAGINACIÓN (desktop)
═══════════════════════════════════════════ */
.nc-novedades__dots {
	display:     flex;
	align-items: center;
	gap:         6px;
}
.nc-novedades__dot {
	display:            block;
	height:             10px;
	border-radius:      5px;
	background:         rgba(47, 59, 228, 0.25);
	border:             none;
	padding:            0;
	cursor:             pointer;
	transition:         width 0.3s ease, background 0.3s ease;
	appearance:         none;
	-webkit-appearance: none;
}
.nc-novedades__dot--active                       { background: #2F3BE4; width: 24px; }
.nc-novedades__dot:not(.nc-novedades__dot--active) { width: 10px; }
.nc-novedades__dot:focus { outline: 2px solid rgba(47,59,228,0.5); outline-offset: 2px; }


/* ═══════════════════════════════════════════
   RESPONSIVE — 1200px
═══════════════════════════════════════════ */
@media (max-width: 1200px) {
	.nc-novedades { padding: 48px 40px; }
	.nc-novedades__card   { width: 420px; }
	.nc-novedades__title  { font-size: 32px; line-height: 36px; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — 1024px
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
	.nc-novedades { padding: 40px 32px; }
	.nc-novedades__card  { width: 360px; }
	.nc-novedades__title { font-size: 28px; line-height: 32px; max-width: 380px; }
	.nc-novedades__shapes { width: 600px; }
}

/* ═══════════════════════════════════════════
   MOBILE — ≤767px
   Fiel al diseño Figma node 6879:15923
   - Cards apiladas verticalmente (sin slider)
   - Foto pequeña 76×80px
   - Flecha: fondo beige sin borde
   - Botón "Ver todas" al pie, full-width
   - Título: 24px / -0.48px
═══════════════════════════════════════════ */
@media (max-width: 767px) {

	/* Sección */
	.nc-novedades {
		padding: 64px 16px;
	}
	.nc-novedades__inner {
		gap: 48px;
	}

	/* Shapes — desplazadas a la derecha, más pequeñas */
	.nc-novedades__shapes {
		width:  560px;
		height: 559px;
		right:  -210px; /* parcialmente fuera del borde */
		top:    50%;
		transform: translateY(-50%);
	}

	/* Header: solo muestra el título, el btn desktop se oculta */
	.nc-novedades__header {
		flex-direction: column;
		align-items:    flex-start;
		gap:            0;
	}
	.nc-novedades__title {
		font-size:      24px;
		line-height:    24px;
		letter-spacing: -0.48px;
		max-width:      295px;
	}
	.nc-novedades__btn-all--desktop { display: none; }

	/* Slider → lista vertical (desactiva la animación horizontal) */
	.nc-novedades__slider-viewport {
		overflow: visible;  /* no recortar */
	}
	.nc-novedades__slider-track {
		flex-direction: column;
		gap:            24px;
		transform:      none !important; /* bloquea cualquier translateX del JS */
		transition:     none;
	}

	/* Card full-width */
	.nc-novedades__card {
		width:   100%;
		padding: 16px;
		gap:     24px;
	}

	/* Foto: 76×80px (diseño Figma mobile) */
	.nc-novedades__card-photo {
		width:  76px;
		height: 80px;
	}

	/* Flecha mobile: fondo beige (#F6F5F2), sin borde, 52px */
	.nc-novedades__card-arrow {
		width:      52px;
		height:     52px;
		border:     none;
		background: #F6F5F2;
		color:      #2F3BE4;
		padding:    20px;
		/* anular hover de desktop */
	}
	.nc-novedades__card:hover .nc-novedades__card-arrow {
		background: #F6F5F2;
		color:      #2F3BE4;
	}

	/* Dots: ocultar en mobile */
	.nc-novedades__dots { display: none; }

	/* Botón "Ver todas" al pie — full-width */
	.nc-novedades__btn-all--mobile {
		display: flex;
		width:   100%;
		text-align: center;
	}
}

/* ═══════════════════════════════════════════
   RESPONSIVE — 480px
═══════════════════════════════════════════ */
@media (max-width: 480px) {
	.nc-novedades { padding: 48px 16px; }
}