/* Turista X — estilos base, header y footer. */
:root {
	--tx-ink: #161310;
	--tx-ink-soft: #5c5850;
	--tx-red: #d1392c;
	--tx-red-dark: #a92c22;
	--tx-yellow: #f6d65a;
	--tx-yellow-soft: #fbf0cf;
	--tx-line: #e9e1cd;
	--tx-paper: #faf6ec;
	--tx-surface: #ffffff;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; }
body {
	margin: 0;
	background: var(--tx-paper);
	color: var(--tx-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
.tx-display {
	font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 900;
	letter-spacing: -.025em;
}
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap;
}

/* ------------------------------------------------------------------
   Header / navegación principal
   ------------------------------------------------------------------ */
.tx-site-header {
	background: var(--tx-surface);
	border-bottom: 1px solid var(--tx-line);
	position: relative;
	z-index: 20;
}
.tx-site-header-in {
	max-width: 1120px;
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	gap: 28px;
}
.tx-wordmark {
	font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 900;
	font-size: 19px;
	letter-spacing: -.02em;
	text-decoration: none;
	color: var(--tx-ink);
	flex: 0 0 auto;
}
.tx-wordmark span { color: var(--tx-red); }

.tx-nav { display: flex; align-items: center; gap: 22px; flex: 1; }
.tx-nav > a {
	font-weight: 700;
	font-size: 14.5px;
	color: var(--tx-ink);
	text-decoration: none;
	letter-spacing: -.01em;
}
.tx-nav > a:hover { color: var(--tx-red); }

.tx-nav-item { position: relative; }
.tx-nav-parent {
	font-family: inherit;
	font-weight: 700;
	font-size: 14.5px;
	color: var(--tx-ink);
	letter-spacing: -.01em;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}
.tx-nav-item:hover > .tx-nav-parent,
.tx-nav-item:focus-within > .tx-nav-parent { color: var(--tx-red); }
.tx-nav-caret {
	width: 13px;
	height: 13px;
	transition: transform .15s ease;
}
.tx-nav-item:hover .tx-nav-caret,
.tx-nav-item:focus-within .tx-nav-caret,
.tx-nav-item.tx-dd-open .tx-nav-caret { transform: rotate(180deg); }

.tx-nav-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 10px;
	background: #fff;
	border: 1px solid var(--tx-line);
	border-radius: 10px;
	box-shadow: 0 16px 32px -18px rgba(22, 19, 16, .28);
	padding: 16px;
	display: none;
	gap: 24px;
	min-width: 520px;
}
/* Puente invisible sobre la separación de 10px: mantiene el hover continuo
   entre "Destinos" y el submenú al bajar el cursor, sin mover el diseño. */
.tx-nav-dropdown::before {
	content: "";
	position: absolute;
	top: -11px;
	left: 0;
	right: 0;
	height: 11px;
}
.tx-nav-item:hover .tx-nav-dropdown,
.tx-nav-item:focus-within .tx-nav-dropdown,
.tx-nav-item.tx-dd-open .tx-nav-dropdown { display: flex; }
.tx-nav-col { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.tx-nav-col-title {
	font-family: "SFMono-Regular", Consolas, monospace;
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--tx-ink-soft);
	margin: 0 0 6px;
	font-weight: 700;
}
.tx-nav-col a {
	padding: 7px 8px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	color: var(--tx-ink);
}
.tx-nav-col a:hover { background: var(--tx-yellow-soft); color: var(--tx-red-dark); }

.tx-nav-search {
	display: flex;
	gap: 6px;
	background: var(--tx-paper);
	border: 1px solid var(--tx-line);
	border-radius: 9px;
	padding: 5px;
	flex: 0 0 auto;
}
.tx-nav-search input {
	border: 0;
	background: transparent;
	font-size: 13.5px;
	padding: 6px 8px;
	outline: none;
	width: 150px;
}
.tx-nav-search button {
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0 7px;
	display: inline-flex;
	align-items: center;
	color: var(--tx-ink-soft);
	transition: color .15s ease;
}
.tx-nav-search button:hover { color: var(--tx-red); }
.tx-nav-search button svg { width: 17px; height: 17px; display: block; }
/* Botón hamburguesa — solo visible en mobile */
.tx-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 38px;
	height: 34px;
	padding: 0 7px;
	background: transparent;
	border: 1px solid var(--tx-line);
	border-radius: 8px;
	cursor: pointer;
	flex: 0 0 auto;
}
.tx-nav-toggle span {
	display: block;
	height: 2px;
	background: var(--tx-ink);
	border-radius: 2px;
}
.tx-nav-toggle:hover span { background: var(--tx-red); }

@media (max-width: 800px) {
	.tx-site-header-in { flex-wrap: wrap; gap: 12px; }
	.tx-nav-toggle { display: flex; order: 2; margin-left: auto; }
	.tx-nav-search { order: 3; flex: 1 1 100%; }
	.tx-nav-search input { width: 100%; }

	/* El menú se despliega COMO CAPA POR ENCIMA del contenido, no dentro del
	   flujo del header: si estuviera en flujo, al abrirlo empujaría el hero y
	   todo el resto de la página hacia abajo. Con position:absolute el panel
	   flota sobre la página y nada se mueve al abrir/cerrar. */
	.tx-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--tx-surface);
		border-top: 1px solid var(--tx-line);
		border-bottom: 1px solid var(--tx-line);
		box-shadow: 0 18px 30px -18px rgba(22, 19, 16, .38);
		padding: 6px 24px 14px;
		/* Con 21 países el panel supera la altura de un teléfono: se hace
		   scrolleable en sí mismo, y `contain` evita que el scroll se
		   propague a la página de atrás al llegar al final. */
		max-height: 70vh;
		max-height: calc(100dvh - 130px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.tx-site-header.tx-nav-open .tx-nav { display: flex; }

	.tx-nav > a { padding: 11px 4px; }
	.tx-nav-parent {
		padding: 11px 4px;
		width: 100%;
		justify-content: space-between;
		text-align: left;
	}

	/* El dropdown deja de flotar: se despliega en línea, siempre visible
	   dentro del panel abierto (en touch no existe :hover). */
	.tx-nav-dropdown {
		position: static;
		display: flex;
		flex-direction: column;
		min-width: 0;
		margin-top: 0;
		padding: 4px 0 8px 10px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		gap: 12px;
		background: transparent;
	}
	.tx-nav-caret { display: none; }
}

/* ------------------------------------------------------------------
   Anuncios (AdSense)
   ------------------------------------------------------------------ */
.tx-ad {
	margin: 22px auto;
	text-align: center;
	overflow: hidden;
}
/* AdSense marca cada unidad con data-ad-status="filled"/"unfilled" al cargar.
   Si no se llena (o mientras la cuenta empieza a servir), se oculta el bloque
   entero —etiqueta incluida— para no dejar huecos ni un "Publicidad" suelto. */
.tx-ad:has(ins[data-ad-status="unfilled"]) { display: none; }
.tx-ad-label {
	display: block;
	font-family: "SFMono-Regular", Consolas, monospace;
	font-size: 9.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--tx-ink-soft);
	opacity: .6;
	margin-bottom: 4px;
}
.tx-ad .adsbygoogle { display: block; }
/* anuncio que ocupa todo el ancho dentro de una grilla de tarjetas */
.tx-ad-ingrid { grid-column: 1 / -1; }
.tx-ad-ingrid .tx-ad { margin: 6px auto; }
/* Los anuncios dentro del cuerpo del artículo: un poco más de aire y una
   línea sutil que los separa del texto editorial. */
.tx-a-content .tx-ad {
	margin: 30px 0;
	padding-top: 4px;
}
/* Sidebar pegajoso (solo aporta en escritorio; en móvil el sidebar se apila
   abajo, donde igual se muestra pero con menos peso). */
@media (min-width: 901px) {
	.tx-ad-sticky { position: sticky; top: 84px; }
}

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */
.tx-site-footer {
	background: var(--tx-ink);
	color: #d8d6cc;
	margin-top: 24px;
}
.tx-site-footer-in {
	max-width: 1120px;
	margin: 0 auto;
	padding: 40px 24px;
}
.tx-site-footer .tx-wordmark { color: #fbfaf5; }
.tx-site-footer .tx-wordmark span { color: var(--tx-yellow); }
.tx-site-footer-in p { max-width: 60ch; font-size: 13.5px; line-height: 1.6; margin: 12px 0 0; }
.tx-footer-copy { color: #9a988e; font-size: 12px; margin-top: 20px; }