/* ==========================================================================
   Estilo visual del sitio
   --------------------------------------------------------------------------
   Antes esto era una opción entre varias, bajo la clase .estilo-editorial.
   La clase se conserva porque la ponen las plantillas y hay reglas que la
   usan, pero ya no hay alternativa: el sitio tiene una sola cara.

   Lo que se quitó de la versión anterior y por qué:

   - La portada partida. Cortaba el video por la mitad, y un video que se
     ve a medias no es un video.

   - Las tarjetas horizontales. La regla ponía .tc-card en fila y la grilla
     en dos columnas. Funcionaba en una grilla suelta, que es lo único que
     llegué a probar, y rompía todo lo demás: dentro del slider las
     diapositivas quedaban en 24 píxeles de ancho, y la grilla de
     categorías salía con las columnas en cero.
   ========================================================================== */

/* Las esquinas rectas son del resto del sitio: botones, campos, sellos.
   Las tarjetas son la excepción y llevan las suyas, más abajo. */
.estilo-editorial {
	--tc-radius: 0px;
	--tc-shadow: none;
	--tc-shadow-hover: none;
}

/* ==========================================================================
   1. Tarjetas: foto completa, degradado y texto encima
   --------------------------------------------------------------------------
   La foto ocupa la tarjeta entera y el texto se apoya sobre un degradado
   del color de marca. Un solo tratamiento para los cuatro tipos de tarjeta
   que hay en el sitio: tours, categorías, términos y entradas del blog.

   Clave: nada de flex-direction ni de tocar las columnas de la grilla.
   La tarjeta se maqueta por dentro y no toca su entorno, así da igual si
   la mete una grilla de tres, una de cuatro o un slider.
   ========================================================================== */

.estilo-editorial .tc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/* Solo alto mínimo, sin aspect-ratio.
	    Con los dos juntos, un alto mínimo de 400px y una proporción 3/4
	    obligan a la tarjeta a medir 300px de ancho aunque su columna sea
	    más angosta: la tarjeta se salía de la columna y la página ganaba
	    scroll horizontal a 1024px. Con solo el alto mínimo, la tarjeta se
	    adapta al ancho que le den y crece hacia abajo si hace falta. */
	min-height: 430px;
	overflow: hidden;
	border: 0;
	border-radius: 14px;
	background: var(--tc-primary-dark, #241208);
	transition: none;
}

/* La foto pasa a ser el fondo de la tarjeta. */
.estilo-editorial .tc-card__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	aspect-ratio: auto;
	display: block;
}

.estilo-editorial .tc-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* El velo que hace legible el texto.
   Antes era del marrón de la marca y cerraba casi opaco: teñía la foto
   entera y abajo la tapaba del todo. Ahora es negro neutro, arranca más
   abajo y no llega a opaco, así la foto se sigue viendo debajo del texto
   y conserva su color. */
.estilo-editorial .tc-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	transform: none;
	background: linear-gradient(180deg,
		rgba(0, 0, 0, 0) 38%,
		rgba(0, 0, 0, .28) 58%,
		rgba(0, 0, 0, .62) 80%,
		rgba(0, 0, 0, .80) 100%);
}

/* El fondo de la tarjeta deja de ser marrón: solo se ve mientras la foto
   carga, o si un tour no tiene imagen. */
.estilo-editorial .tc-card {
	background: #2a2724;
}

/* ---------- El texto, encima ---------- */

/* flex: 0 0 auto es lo que apoya el texto abajo.
   La tarjeta normal le da flex:1 al cuerpo para que ocupe lo que sobra y
   el pie quede pegado al fondo. Aquí estorba: el cuerpo se comía la altura
   entera, el texto arrancaba arriba —sobre la parte clara de la foto, donde
   el degradado todavía no tapa— y el sello se montaba sobre la línea de
   duración. Encogiéndolo a su contenido, el justify-content: flex-end de la
   tarjeta lo baja al degradado. */
.estilo-editorial .tc-card__body,
.estilo-editorial .tc-card__cta {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	padding: 18px 17px 17px;
	gap: 5px;
}

/* Texto más chico que en el resto del sitio: aquí compite con la foto y
   cuanto menos sitio ocupe, más foto se ve. */
.estilo-editorial .tc-card__title {
	font-size: .98rem;
	line-height: 1.3;
}

.estilo-editorial .tc-card__meta {
	font-size: .72rem;
}

.estilo-editorial .tc-card__text {
	font-size: .84rem;
	line-height: 1.45;
}

.estilo-editorial .tc-card__badge {
	font-size: .66rem;
}

.estilo-editorial .tc-card .tc-price { font-size: .8rem; }
.estilo-editorial .tc-card .tc-price__amount { font-size: 1.1rem; }

/* Dentro de un cuerpo que ya no crece, el margen automático del pie no
   tiene espacio que repartir y solo añadiría un hueco. */
.estilo-editorial .tc-card__footer {
	margin-top: 14px;
}

.estilo-editorial .tc-card__meta,
.estilo-editorial .tc-card__text {
	color: rgba(255, 255, 255, .82);
}

.estilo-editorial .tc-card__title a,
.estilo-editorial .tc-card__title {
	color: #fff;
}

.estilo-editorial .tc-card__title a:hover {
	color: var(--tc-accent, #FCB424);
}

/* Dos líneas de resumen: más que eso empuja el precio fuera de la tarjeta
   en las columnas angostas. */
.estilo-editorial .tc-card__text {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* El pie se parte en dos líneas antes que partir el botón.
   En la grilla de cuatro la tarjeta mide 300px: descontado el relleno
   quedan 260 útiles, y precio más botón suman 248. Con tan poco margen,
   cualquier precio algo más largo hacía que "Ver detalle" se partiera en
   dos renglones dentro del botón. Ahora el texto del botón no se parte
   nunca y, si no cabe al lado del precio, baja entero a su propia línea. */
.estilo-editorial .tc-card__footer {
	border-top: 1px solid rgba(255, 255, 255, .22);
	padding-top: 13px;
	flex-wrap: wrap;
	gap: 10px 12px;
}

.estilo-editorial .tc-card .tc-btn {
	white-space: nowrap;
	flex: 0 0 auto;
}

/* El precio en blanco SOLO dentro de la tarjeta, que es donde va sobre la
   foto. Sin el .tc-card delante, estas reglas alcanzaban también al precio
   de la ficha del tour, que vive en un recuadro blanco: texto blanco sobre
   fondo blanco, invisible hasta que se seleccionaba con el mouse. */
.estilo-editorial .tc-card .tc-price,
.estilo-editorial .tc-card .tc-price__label,
.estilo-editorial .tc-card .tc-price__unit,
.estilo-editorial .tc-card .tc-price__before {
	color: rgba(255, 255, 255, .75);
}

.estilo-editorial .tc-card .tc-price__amount {
	color: #fff;
}

.estilo-editorial .tc-card .tc-price--quote {
	color: var(--tc-accent, #FCB424);
}

/* El botón de la tarjeta, del acento, que sobre la foto oscura es lo
   primero que se ve. */
.estilo-editorial .tc-card .tc-btn {
	background: var(--tc-accent, #FCB424);
	color: var(--tc-primary-dark, #241208) !important;
}

.estilo-editorial .tc-card .tc-btn:hover {
	background: #fff;
	box-shadow: none;
}

/* ---------- El sello ---------- */

.estilo-editorial .tc-card__badge {
	top: 0;
	left: 0;
	z-index: 3;
	border-radius: 0;
	padding: 7px 13px;
}

/* ---------- Al pasar el mouse ---------- */

/* La foto se acerca un poco. No hay salto ni sombra: la tarjeta es una
   foto, y una foto no flota. */
.estilo-editorial .tc-card:hover {
	transform: none;
}

.estilo-editorial .tc-card:hover .tc-card__img {
	transform: scale(1.05);
}

/* ---------- Tarjeta de categoría, que solo lleva un botón ---------- */

.estilo-editorial .tc-card--simple {
	min-height: 330px;
	border-radius: 14px;
}

.estilo-editorial .tc-card--simple .tc-card__cta {
	display: flex;
	justify-content: center;
	padding-bottom: 24px;
}

/* ---------- Dentro del slider ---------- */

/* El slider fija el ancho de cada diapositiva; la tarjeta solo tiene que
   ocupar el alto entero y no imponer el suyo. */
.estilo-editorial .tc-slider__slide .tc-card {
	height: 100%;
}

/* ==========================================================================
   2. Encabezados de sección a la izquierda
   ========================================================================== */

.estilo-editorial .tc-section__head {
	position: relative;
	max-width: 720px;
	margin-left: 0;
	margin-right: auto;
	padding-top: 22px;
	text-align: left;
}

.estilo-editorial .tc-section__head::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 52px;
	height: 4px;
	background: var(--tc-accent, #FCB424);
}

.estilo-editorial .home-more {
	text-align: left;
}

/* ==========================================================================
   3. Botones y detalles
   ========================================================================== */

.estilo-editorial .tc-btn {
	border-radius: 0;
	font-size: .86rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 14px 24px;
}

.estilo-editorial .tc-btn--sm {
	padding: 11px 18px;
	font-size: .78rem;
}

.estilo-editorial .tc-btn:hover {
	transform: none;
	box-shadow: inset 0 -3px 0 var(--tc-accent, #FCB424);
}

.estilo-editorial .tc-btn--ghost {
	border-width: 2px;
}

.estilo-editorial .lr__campo input,
.estilo-editorial .lr__campo select,
.estilo-editorial .lr__campo textarea,
.estilo-editorial .search-form .search-field,
.estilo-editorial .search-form .search-submit,
.estilo-editorial .prosa img,
.estilo-editorial .prosa code,
.estilo-editorial .e404__buscar,
.estilo-editorial .e404__bloque,
.estilo-editorial .pag__etiquetas a,
.estilo-editorial .prosa > p:first-child > em:only-child {
	border-radius: 0;
}

/* Las fotos redondas del equipo y de los testimonios se quedan redondas. */

/* ==========================================================================
   4. Pie de página
   --------------------------------------------------------------------------
   Cuatro columnas de igual peso: la agencia (logo y descripción), los
   enlaces, el contacto y los datos de la empresa.

   Antes el bloque de marca ocupaba una banda propia de ancho completo con
   un tono más claro detrás. Se quitó: partía el pie en dos rectángulos y
   dejaba una columna vacía al lado de los enlaces. Ahora el logo encabeza
   su columna y el texto va debajo, como cualquier otra.

   Las dos listas de enlaces comparten la segunda columna, "La agencia"
   arriba y "Nuestros viajes" debajo, y las redes bajan al final de la
   cuarta.
   ========================================================================== */

/* Dentro de su columna: logo arriba, texto debajo, alineado a la
   izquierda. Sin la banda, no hay nada que centrar. */
.estilo-editorial .sf__col--marca {
	display: block;
	text-align: left;
	grid-column: auto;
	border-bottom: 0;
	padding-bottom: 0;
}

.estilo-editorial .sf__col--marca .custom-logo-link,
.estilo-editorial .sf__col--marca .sf__nombre {
	display: block;
	margin: 0 0 16px;
}

.estilo-editorial .sf__col--marca .custom-logo {
	margin: 0;
	height: 72px;
	width: auto;
}

.estilo-editorial .sf__texto {
	margin: 0;
	max-width: 36ch;
	margin-left: 0;
}

/* El nombre de la agencia, más presente. */
.estilo-editorial .sf__nombre {
	font-size: 1.35rem;
	letter-spacing: -.01em;
}

/* La barra de acento sobre cada título de columna, como en las secciones. */
.estilo-editorial .sf__titulo {
	position: relative;
	padding-top: 16px;
}

.estilo-editorial .sf__titulo::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 34px;
	height: 3px;
	background: var(--tc-accent, #FCB424);
}

/* El segundo título de la columna de enlaces necesita aire por encima:
   si no, la barra de acento queda pegada al último enlace de la lista. */
.estilo-editorial .sf__titulo--segundo {
	margin-top: 30px;
}

/* Las redes cierran la columna de la empresa. */
.estilo-editorial .sf__redes {
	justify-content: flex-start;
	margin-top: 22px;
}

.estilo-editorial .sf__redes a {
	border-color: rgba(255, 255, 255, .34);
}

.estilo-editorial .sf__redes a:hover {
	background: var(--tc-accent, #FCB424);
	border-color: var(--tc-accent, #FCB424);
	color: var(--tc-primary-dark, #241208);
}

/* Los sellos van con esquina recta, como el resto del sitio. */
.estilo-editorial .sf__sellos li {
	border-radius: 0;
	box-shadow: none;
}

/* ==========================================================================
   6. Ajustes pedidos sobre el conjunto
   ========================================================================== */

/* ---------- El velo del video ----------
   Era el marrón de la marca y teñía toda la portada. Pasa a negro neutro y
   mucho más suave: la foto conserva su color.

   No se quita del todo a propósito. El titular es blanco sobre un video que
   cambia de fotograma: sin nada debajo, en cuanto pasa una toma clara el
   texto deja de leerse. Esto es lo mínimo que lo sostiene. */
.estilo-editorial .home-hero::after {
	background: linear-gradient(180deg,
		rgba(0, 0, 0, .34) 0%,
		rgba(0, 0, 0, .20) 38%,
		rgba(0, 0, 0, .52) 100%);
}

@media (min-width: 1025px) {
	.estilo-editorial .home-hero::after {
		background:
			linear-gradient(100deg,
				rgba(0, 0, 0, .62) 0%,
				rgba(0, 0, 0, .44) 32%,
				rgba(0, 0, 0, .16) 58%,
				rgba(0, 0, 0, 0) 80%),
			linear-gradient(180deg,
				rgba(0, 0, 0, .16) 0%,
				rgba(0, 0, 0, 0) 34%,
				rgba(0, 0, 0, .28) 100%);
	}
}

/* ---------- La línea sobre el menú ----------
   Era un borde del acento al 30% que separaba el bloque del logo de la
   barra del menú. Sobre el fondo oscuro se leía como una línea clara
   cruzando la cabecera. */
.estilo-editorial .sh__barra {
	border-top: 0;
}

/* ---------- Tarjetas: velo más suave y más altas ---------- */

.estilo-editorial .tc-card__media::after {
	background: linear-gradient(180deg,
		rgba(0, 0, 0, 0) 42%,
		rgba(0, 0, 0, .18) 60%,
		rgba(0, 0, 0, .50) 80%,
		rgba(0, 0, 0, .70) 100%);
}

.estilo-editorial .tc-card {
	min-height: 480px;
}

/* Las de categoría crecen más: son solo foto y botón, y la foto es el
   argumento entero. */
.estilo-editorial .tc-card--simple {
	min-height: 440px;
}

.estilo-editorial .tc-card--simple .tc-card__media::after {
	background: linear-gradient(180deg,
		rgba(0, 0, 0, 0) 52%,
		rgba(0, 0, 0, .14) 70%,
		rgba(0, 0, 0, .42) 100%);
}

/* ---------- Sin el resumen bajo el título ----------
   La tarjeta se queda con duración, título y precio. El resumen se lee en
   la ficha del tour, que es donde hay sitio para leerlo. */
.estilo-editorial .tc-card__text {
	display: none;
}

/* ---------- Las flechas del slider, fuera de las fotos ----------
   Estaban encima de la primera y la última tarjeta. Ahora el carrusel deja
   un carril a cada lado y las flechas viven ahí. */
@media (min-width: 1100px) {

	.estilo-editorial .tc-slider {
		padding-inline: 62px;
	}

	.estilo-editorial .tc-slider .tc-slider__nav--prev { left: 0; }
	.estilo-editorial .tc-slider .tc-slider__nav--next { right: 0; }

	.estilo-editorial .tc-slider .tc-slider__nav {
		top: 50%;
		transform: translateY(-50%);
	}

	.estilo-editorial .tc-slider .tc-slider__nav:hover,
	.estilo-editorial .tc-slider .tc-slider__nav:focus {
		transform: translateY(-50%) scale(1.06);
	}
}

/* En pantallas donde no sobra ancho, las flechas se quedan donde estaban:
   quitarles sitio al carrusel dejaría las tarjetas demasiado angostas. */

/* ==========================================================================
   7. Pie: columnas de contacto y de empresa
   --------------------------------------------------------------------------
   La columna de datos sueltos se parte en dos: contacto con iconos, y la
   información legal de la agencia como lista de pares etiqueta/valor, que
   es lo que mira quien compara agencias antes de transferir dinero.
   ========================================================================== */

@media (min-width: 900px) {
	.estilo-editorial .sf__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------- Contacto ---------- */

.estilo-editorial .sf__contacto {
	display: grid;
	gap: 16px;
}

.estilo-editorial .sf__contacto li {
	display: block;
	line-height: 1.5;
}

.estilo-editorial .sf__dato-tit {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 3px;
	color: #fff;
	font-weight: 700;
	font-size: .9rem;
}

.estilo-editorial .sf__dato-tit .ico {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	color: var(--tc-accent, #FCB424);
}

/* ---------- Información de la empresa ---------- */

.estilo-editorial .sf__empresa {
	margin: 0;
	display: grid;
	gap: 0;
}

.estilo-editorial .sf__empresa dt {
	margin: 0;
	padding-top: 13px;
	border-top: 1px solid rgba(255, 255, 255, .14);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}

.estilo-editorial .sf__empresa dt:first-child {
	padding-top: 0;
	border-top: 0;
}

.estilo-editorial .sf__empresa dd {
	margin: 2px 0 13px;
	color: #fff;
	font-weight: 600;
	line-height: 1.45;
}

.estilo-editorial .sf__mas {
	margin: 4px 0 0;
}

.estilo-editorial .sf__mas a {
	color: var(--tc-accent, #FCB424);
	font-weight: 700;
	text-decoration: none;
}

.estilo-editorial .sf__mas a:hover {
	text-decoration: underline;
}

/* ---------- Medios de pago ----------
   Llevaban un recuadro blanco detrás. Los logotipos ya son blancos y se
   leen bien sobre el marrón: el recuadro solo metía tres rectángulos
   claros en un pie oscuro. */

.estilo-editorial .sf__pagos img {
	display: block;
	max-width: 100%;
	height: auto;
	padding: 0;
	border-radius: 0;
	background: none;
}

.estilo-editorial .sf__pagos-texto {
	margin-top: 10px;
	font-size: .84rem;
	color: rgba(255, 255, 255, .7);
}