/* ============================================================
   TestCoches - Portada (solo homepage)
   Header/ticker/footer viven en global.css
   ============================================================ */

/* ============================================================
   TestCoches - Portada custom v1.1 (sin Elementor)
   Identidad: antracita #1a1a1a / rojo #dc1616
   Display: Barlow Condensed (sustituta de Provicali)
   Patrones: sticky header, stretched-link cards, fluid type
   ============================================================ */


.tc-home {
	margin: 0;
	background: #fff;
	color: var(--tc-ink);
	font-family: var(--tc-body);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.tc-home img { max-width: 100%; height: auto; display: block; }
.tc-home a { color: inherit; text-decoration: none; }
.tc-home :focus-visible { outline: 3px solid var(--tc-rojo); outline-offset: 2px; border-radius: 2px; }

/* ---------------- Hero ---------------- */
.tc-hero {
	display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 28px; padding: 28px 0 8px; align-items: stretch;
}
.tc-hero__side {
	display: grid; gap: 22px;
	grid-template-rows: 1fr 1fr auto; align-content: stretch;
}

/* Lead: titular sobre la imagen con degradado */
.tc-card--lead {
	position: relative; overflow: hidden; border-radius: var(--tc-radius);
	box-shadow: var(--tc-shadow);
}
.tc-card--lead { display: flex; flex-direction: column; }
.tc-card--lead .tc-card__media { flex: 1; min-height: 0; }
.tc-card--lead .tc-card__media img {
	width: 100%; height: 100%; object-fit: cover;
	min-height: 480px;
	transition: transform .35s ease;
}
@media (max-width: 980px) {
	.tc-card--lead .tc-card__media img {
		height: auto; min-height: 0; aspect-ratio: 16 / 9;
	}
}
.tc-card--lead:hover .tc-card__media img { transform: scale(1.025); }
.tc-card--lead .tc-card__body {
	position: absolute; inset: auto 0 0 0;
	padding: 96px 24px 22px;
	background: linear-gradient(180deg, rgba(26,26,26,0) 0%, rgba(26,26,26,.82) 62%, rgba(26,26,26,.94) 100%);
	color: #fff;
}
.tc-card--lead .tc-card__title {
	font-size: clamp(26px, 3.4vw, 42px);
	line-height: 1.05; margin: 6px 0 8px;
}
.tc-card--lead .tc-card__title a:hover { color: #fff; }
.tc-card--lead .tc-card__date { color: #cfcfcf; }
.tc-card--lead .tc-kicker {
	background: var(--tc-rojo); color: #fff;
	border: 0; padding: 4px 10px; border-radius: 4px;
}

/* Variante horizontal (hero lateral) */
.tc-card--row {
	display: grid; grid-template-columns: 178px 1fr; gap: 16px;
	align-items: center;
}
.tc-card--row .tc-card__media { border-radius: 8px; height: 100%; }
.tc-card--row .tc-card__media img { aspect-ratio: 3 / 2; height: 100%; }
.tc-card--row .tc-card__body { padding: 0; }
.tc-card--row .tc-card__title { font-size: clamp(19px, 1.8vw, 23px); margin: 2px 0 6px; }
.tc-card--row .tc-kicker { font-size: 12.5px; }

@media (max-width: 980px) {
	.tc-card--row { grid-template-columns: 132px 1fr; }
	.tc-hero__side { grid-template-rows: none; }
}

/* ---------------- Operadores (banda oscura) ---------------- */
.tc-section--dark {
	background: var(--tc-antracita); color: #fff;
	border-top: 0;
	margin: 34px calc(50% - 50vw); padding: 38px calc(50vw - 50%);
}
.tc-section--dark .tc-section__more { color: #9a9a9a; }
.tc-section--dark .tc-section__more:hover { color: #fff; }

.tc-operadores {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
	gap: 14px; margin-top: 22px; align-items: stretch;
}
.tc-operador {
	display: flex; align-items: center; justify-content: center;
	background: #242424; padding: 18px; min-height: 84px;
	border-radius: var(--tc-radius);
	transition: background .15s ease, transform .15s ease;
}
.tc-operador:hover { background: #2e2e2e; transform: translateY(-2px); }
.tc-operador img { max-height: 44px; width: auto; }
.tc-operador span {
	font-family: var(--tc-display); font-weight: 600; font-size: 18px;
	text-transform: uppercase; color: #e4e4e4;
}

/* ---------------- Marcas ---------------- */
.tc-marcas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
	gap: 12px; margin-top: 18px;
}
.tc-marca {
	display: flex; align-items: center; justify-content: center;
	background: var(--tc-surface); border: 1px solid var(--tc-line);
	padding: 14px; aspect-ratio: 1; border-radius: var(--tc-radius);
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.tc-marca:hover {
	border-color: var(--tc-rojo); transform: translateY(-3px);
	box-shadow: var(--tc-shadow);
}
.tc-marca img { max-height: 50px; width: auto; }

/* ---------------- Responsive ---------------- */
@media (max-width: 980px) {
	.tc-hero { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
	.tc-card--lead .tc-card__body { padding: 72px 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.tc-home *, .tc-home *::before, .tc-home *::after {
		transition: none !important; animation: none !important;
	}
}

/* ============================================================
   Pasada mobile-first
   ============================================================ */
@media (max-width: 760px) {
	/* Hero a sangre completa, estilo app */
	.tc-hero { padding-top: 14px; gap: 18px; }
	.tc-card--lead {
		margin: 0 -20px; border-radius: 0; box-shadow: none;
	}
	.tc-card--lead .tc-card__body { padding: 64px 20px 16px; }
	.tc-card--lead .tc-card__title { font-size: clamp(27px, 7.4vw, 36px); }

	/* Marcas: carrusel horizontal de 2 filas con snap */
	.tc-marcas {
		display: grid;
		grid-auto-flow: column;
		grid-template-rows: repeat(2, auto);
		grid-auto-columns: 86px;
		gap: 10px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		padding: 2px 2px 8px;
		margin-right: -20px;
		scrollbar-width: none;
	}
	.tc-marcas::-webkit-scrollbar { display: none; }
	.tc-marca { scroll-snap-align: start; }

	/* Operadores: carrusel horizontal con snap */
	.tc-operadores {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 148px;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		padding-bottom: 8px;
		scrollbar-width: none;
	}
	.tc-operadores::-webkit-scrollbar { display: none; }
	.tc-operador { scroll-snap-align: start; }
}

/* ============================================================
   Blindaje anti-CLS de la portada: cada bloque reserva su
   espacio ANTES de que lleguen imágenes y fuentes
   ============================================================ */

/* El contenedor del medio reserva el ratio aunque la imagen tarde
   SOLO en tarjetas verticales (rejillas y hero). Las tarjetas
   horizontales (--row) dimensionan su media por columna de grid. */
.tc-grid .tc-card__media,
.tc-hero .tc-card__media { aspect-ratio: 16 / 9; }
.tc-grid .tc-card__media img,
.tc-hero .tc-card__media img { height: 100%; }
.tc-card--row .tc-card__media { aspect-ratio: auto; }

/* Carruseles: altura mínima reservada (logo 80px + texto + padding) */
.tc-marcas { min-height: 132px; }
.tc-operadores { min-height: 118px; }
/* Los logos conservan su proporción natural dentro de su carril */

/* El hero nunca colapsa mientras carga */
.tc-hero { min-height: 200px; }
@media (min-width: 768px) {
	.tc-hero { min-height: 340px; }
}

/* La métrica de la fuente de respaldo se ajusta a Barlow Condensed
   para que el swap tipográfico no mueva los titulares */
@supports (font-size-adjust: 0.5) {
	.tc-card__title, .tc-hero .tc-card__title { font-size-adjust: 0.52; }
}