@charset "UTF-8";
/* =========================================================================
   Natal Travel — hoja de estilos principal
   Paleta e identidad tomadas del proyecto original (src/index.css):
   crema #F9EAD7, marrón #3F211F, teal #009F93, terracota #C39B82.
   Estilo "neo-brutalista": bordes gruesos + sombras sólidas.
   ========================================================================= */

:root {
	--background: 34 74% 91%;
	--foreground: 4 34% 18%;
	--card: 33 45% 88%;
	--primary: 175 100% 31%;
	--primary-foreground: 0 0% 100%;
	--secondary: 23 35% 64%;
	--secondary-foreground: 4 34% 18%;
	--muted: 33 30% 85%;
	--muted-foreground: 4 20% 35%;
	--accent: 23 35% 64%;
	--destructive: 0 72% 45%;
	--destructive-foreground: 0 0% 98%;
	--border: 4 34% 18%;
	--radius: 0.75rem;

	--c-bg: hsl(var(--background));
	--c-fg: hsl(var(--foreground));
	--c-card: hsl(var(--card));
	--c-primary: hsl(var(--primary));
	--c-primary-fg: hsl(var(--primary-foreground));
	--c-secondary: hsl(var(--secondary));
	--c-secondary-fg: hsl(var(--secondary-foreground));
	--c-muted: hsl(var(--muted));
	--c-muted-fg: hsl(var(--muted-foreground));
	--c-destructive: hsl(var(--destructive));
	--c-border: hsl(var(--border));

	--shadow-sm: 3px 3px 0px 0px hsl(var(--foreground));
	--shadow-md: 6px 6px 0px 0px hsl(var(--foreground));
	--shadow-lg: 8px 8px 0px 0px hsl(var(--foreground));

	--font-display: "Cormorant", Georgia, serif;
	--font-body: "Josefin Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- Reset básico ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-fg);
	font-family: var(--font-body);
	line-height: 1.6;
	overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; }
p { margin: 0 0 1em; }
input, textarea, select { font-family: inherit; font-size: 1rem; }

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--c-fg); color: var(--c-bg); padding: 0.75em 1.25em;
}
.skip-link:focus { left: 1rem; top: 1rem; }
.screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; }

/* ---------- Utilidades de layout ---------- */
.natal-container { max-width: 90rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .natal-container { padding: 0 2rem; } }
.natal-section { padding: 4rem 0; }
.natal-narrow { max-width: 56rem; }
.natal-section-dark { padding: 4rem 0; background: var(--c-fg); color: var(--c-bg); border-top: 4px solid var(--c-fg); border-bottom: 4px solid var(--c-fg); }
.natal-section-head { text-align: center; max-width: 42rem; margin: 0 auto 2.5rem; }
.natal-section-head-light { color: var(--c-bg); }
.natal-section-cta { text-align: center; margin-top: 2.5rem; }
.natal-eyebrow { display: block; font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--c-primary); margin-bottom: 0.4rem; }
.natal-h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.05; letter-spacing: -0.01em; }
.natal-h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.1; }
.natal-h3 { font-size: 1.5rem; display: flex; align-items: center; gap: 0.5rem; }
.natal-prose { max-width: 65ch; }
.natal-prose p { color: var(--c-muted-fg); }

/* ---------- Botones ---------- */
.natal-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	border: 2px solid var(--c-fg); border-radius: var(--radius);
	font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.03em; font-size: 0.9rem; padding: 0.85rem 1.5rem;
	box-shadow: var(--shadow-md); transition: transform .12s ease, box-shadow .12s ease, background .2s ease, color .2s ease;
	white-space: nowrap;
}
.natal-btn:active { transform: translate(2px, 2px); box-shadow: none; }
.natal-btn-primary { background: var(--c-primary); color: var(--c-primary-fg); }
.natal-btn-primary:hover { background: var(--c-fg); color: var(--c-bg); }
.natal-btn-secondary { background: var(--c-secondary); color: var(--c-secondary-fg); }
.natal-btn-secondary:hover { filter: brightness(0.95); }
.natal-btn-block { width: 100%; }
.natal-btn-lg { padding: 1rem 1.75rem; font-size: 1rem; }
.natal-btn-whatsapp { margin-top: 0.75rem; }

/* ---------- Barra ticker ---------- */
.natal-ticker { background: var(--c-fg); color: var(--c-bg); overflow: hidden; }
.natal-ticker-track { display: flex; width: max-content; animation: natal-scroll 26s linear infinite; }
.natal-ticker-group { display: flex; gap: 2rem; padding: 0.5rem 1rem; }
.natal-ticker-group span { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
@keyframes natal-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .natal-ticker-track { animation: none; } }

/* ---------- Header ---------- */
.natal-header { position: sticky; top: 0; z-index: 40; background: hsla(34, 74%, 91%, 0.96); backdrop-filter: blur(6px); border-bottom: 2px solid var(--c-fg); }
.natal-header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; }
.natal-logo { display: flex; flex-direction: column; line-height: 1; }
.natal-logo-link { display: flex; flex-direction: column; line-height: 1; text-decoration: none; color: inherit; }
.natal-logo-main { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; letter-spacing: 0.12em; }
.natal-logo-sub { font-size: 0.65rem; letter-spacing: 0.4em; color: var(--c-primary); font-weight: 600; }
.natal-logo img { max-height: 60px; width: auto; }

.natal-nav-desktop { display: none; }
.natal-nav-desktop ul { display: flex; align-items: center; gap: 2rem; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.natal-nav-desktop a { padding: 0.25rem 0; color: hsla(4, 34%, 18%, 0.8); transition: color 0.2s; }
.natal-nav-desktop a:hover { color: var(--c-primary); }
.natal-nav-desktop li.is-button a,
.natal-nav-desktop a.is-button {
	border: 2px solid var(--c-fg); border-radius: 999px; background: var(--c-primary); color: var(--c-primary-fg);
	padding: 0.5rem 1.25rem; font-size: 0.75rem;
}
.natal-nav-desktop li.is-button a:hover, .natal-nav-desktop a.is-button:hover { background: var(--c-fg); color: var(--c-bg); }

.natal-header-actions { display: flex; align-items: center; gap: 0.75rem; }
.natal-lang-switch { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; }
.natal-lang-switch a { color: var(--c-fg); opacity: 0.5; text-decoration: none; padding: 2px 3px; }
.natal-lang-switch a.is-active { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.natal-lang-switch span { opacity: 0.35; }
.natal-btn-reservar {
	display: inline-flex; align-items: center; gap: 0.5rem; height: 2.75rem; padding: 0 1rem;
	border-radius: 999px; background: var(--c-fg); color: var(--c-bg);
	font-weight: 600; font-size: 0.85rem; white-space: nowrap;
}
.natal-menu-toggle { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 2px solid var(--c-fg); border-radius: 0.75rem; background: transparent; color: var(--c-fg); }

.natal-nav-movil { border-top: 1px solid hsla(4,34%,18%,0.2); padding: 1rem; }
.natal-nav-movil ul { display: flex; flex-direction: column; gap: 0.25rem; text-transform: uppercase; font-weight: 600; font-size: 0.9rem; }
.natal-nav-movil a { display: block; padding: 0.65rem 0.25rem; border-bottom: 1px solid hsla(4,34%,18%,0.15); }
.natal-nav-movil a.is-button, .natal-nav-movil li.is-button a { background: var(--c-primary); color: var(--c-primary-fg); border-radius: 0.6rem; text-align: center; border-bottom: none; margin-top: 0.5rem; }

@media (min-width: 1024px) {
	.natal-nav-desktop { display: block; }
	.natal-menu-toggle, .natal-nav-movil { display: none; }
}

/* ---------- Footer ---------- */
.natal-footer { background: var(--c-fg); color: hsla(34,74%,91%,0.7); border-top: 2px solid var(--c-fg); font-size: 0.9rem; }
.natal-footer-grid { display: grid; gap: 2rem; padding: 3rem 0; grid-template-columns: 1fr; }
@media (min-width: 640px) { .natal-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .natal-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.natal-footer-brand { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--c-bg); letter-spacing: 0.08em; margin: 0 0 0.75rem; }
.natal-footer-logo { height: auto; max-width: 170px; margin-bottom: 1rem; }
.natal-footer-desc { max-width: 24rem; }
.natal-footer-heading { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--c-bg); margin-bottom: 0.75rem; }
.natal-footer-grid ul { display: flex; flex-direction: column; gap: 0.5rem; }
.natal-footer-grid a:hover { color: var(--c-primary); }
.natal-footer-menu { margin-top: 0.75rem; border-top: 1px solid hsla(34,74%,91%,0.2); padding-top: 0.75rem; }
.natal-footer-bottom { border-top: 1px solid hsla(34,74%,91%,0.2); text-align: center; padding: 1.2rem 1rem; font-size: 0.75rem; }

.natal-whatsapp-float {
	position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50;
	width: 56px; height: 56px; border-radius: 999px; background: #25D366; color: #fff;
	display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); border: 2px solid var(--c-fg);
}

/* ---------- Hero (portada) ---------- */
/*
 * Rediseño para que la FOTO sea la protagonista (es turismo — vende con la
 * imagen, no con el texto): ya no hay una tarjeta grande tapando la mitad
 * de la foto ("Nuestra promesa" se movió a una franja aparte debajo del
 * hero). El contenido ahora es una sola columna angosta, apoyada abajo a
 * la izquierda, y el degradado oscuro solo oscurece la franja de abajo
 * donde va el texto — el resto de la foto (la parte de arriba, que suele
 * ser la más vistosa: montaña, paisaje) queda casi sin oscurecer.
 */
.natal-hero { position: relative; overflow: hidden; border-bottom: 2px solid var(--c-fg); background:
	radial-gradient(circle at 15% 15%, hsla(175,100%,31%,0.18), transparent 50%),
	radial-gradient(circle at 85% 75%, hsla(23,35%,64%,0.28), transparent 50%),
	var(--c-bg);
}
.natal-hero-grid { position: relative; z-index: 1; padding: 3rem 0; }
.natal-hero-copy { max-width: 40rem; }

/*
 * Imagen del hero: administrable desde Apariencia > Personalizar (opcional).
 * Es una <img> real (no CSS background) para que WordPress/el navegador
 * puedan optimizarla como LCP; se posiciona a pantalla completa detrás del
 * contenido con `object-fit: cover` para que se adapte a cualquier
 * proporción de pantalla sin deformarse.
 */
.natal-hero-bg { position: absolute; inset: 0; z-index: 0; }
.natal-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.natal-hero-bg::after {
	content: ""; position: absolute; inset: 0;
	/* Casi transparente arriba (la foto se ve limpia) y solo se oscurece
	   hacia abajo, donde se apoya el texto — lo justo para que siga siendo
	   legible sin taparle protagonismo a la imagen. */
	background: linear-gradient(180deg, hsla(4, 34%, 8%, 0.06) 0%, hsla(4, 34%, 8%, 0.12) 40%, hsla(4, 34%, 8%, 0.72) 100%);
}
/* La altura quedó demasiado alta al quitar la tarjeta (llegaba a ocupar casi
   toda la pantalla) — se vuelve a una altura moderada, parecida a la que
   tenía el hero originalmente, en vez de escalar hasta casi 100vh. */
.natal-hero-con-imagen { min-height: 24rem; display: flex; align-items: flex-end; }
@media (min-width: 640px) { .natal-hero-con-imagen { min-height: 28rem; } }
@media (min-width: 1024px) { .natal-hero-con-imagen { min-height: 32rem; } }
.natal-hero-con-imagen .natal-hero-grid { padding: 2.5rem 0 2.75rem; }
.natal-hero-con-imagen .natal-hero-title,
.natal-hero-con-imagen .natal-hero-texto { color: var(--c-bg); }
.natal-hero-con-imagen .natal-hero-texto { color: hsla(34, 74%, 91%, 0.85); }
.natal-hero-title { font-size: clamp(2.2rem, 5.5vw, 3.6rem); line-height: 0.98; }
.natal-hero-texto { margin-top: 1rem; max-width: 32rem; font-size: 1.05rem; color: var(--c-muted-fg); }
.natal-hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }

.natal-meta-box { display: flex; align-items: center; gap: 0.5rem; border: 2px solid var(--c-fg); border-radius: 0.75rem; background: var(--c-card); padding: 0.65rem 0.9rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; }
.natal-meta-box svg { color: var(--c-primary); flex-shrink: 0; }

/* Franja "Nuestra promesa": fuera de la foto, debajo del hero — reemplaza
   la tarjeta que antes tapaba parte de la imagen. */
.natal-promesa-franja { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.25rem; padding: 1.1rem 1rem; }
.natal-promesa-franja svg { color: var(--c-primary); flex-shrink: 0; }
.natal-promesa-franja p { margin: 0; font-size: 0.92rem; }
.natal-promesa-franja strong { color: var(--c-primary); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.08em; }
.natal-promesa-ubicacion { margin-left: auto; display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--c-muted-fg); white-space: nowrap; }

/* ---------- Tarjetas genéricas ---------- */
.natal-card { border: 2px solid var(--c-fg); border-radius: 1.1rem; background: var(--c-card); box-shadow: var(--shadow-sm); }

/* ---------- Diferenciales ---------- */
.natal-diferenciales-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .natal-diferenciales-grid { grid-template-columns: repeat(3, 1fr); } }
.natal-diferencial { padding: 1.75rem; }
.natal-diferencial svg { color: var(--c-primary); }
.natal-diferencial h3 { font-size: 1.15rem; margin-top: 1rem; font-family: var(--font-body); }
.natal-diferencial p { margin-top: 0.5rem; color: var(--c-muted-fg); font-size: 0.9rem; }

/* ---------- Galería de fotos del home (mosaico tipo bento) ---------- */
.natal-home-galeria-grid {
	display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 9rem; gap: 0.85rem;
}
@media (min-width: 640px) { .natal-home-galeria-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 8.5rem; } }
@media (min-width: 1024px) { .natal-home-galeria-grid { grid-auto-rows: 10rem; gap: 1.1rem; } }

.natal-home-galeria-item {
	position: relative; display: block; overflow: hidden;
	border: 2px solid var(--c-fg); border-radius: 1rem; box-shadow: var(--shadow-sm);
	background: var(--c-fg);
}
.natal-home-galeria-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.natal-home-galeria-item:hover img, .natal-home-galeria-item:focus-visible img { transform: scale(1.08); }
.natal-home-galeria-item::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, transparent 60%, hsla(4, 34%, 10%, 0.45) 100%);
	opacity: 0; transition: opacity 0.25s ease;
}
.natal-home-galeria-item:hover::after, .natal-home-galeria-item:focus-visible::after { opacity: 1; }

/* La primera foto ocupa un bloque más grande (2×2) para dar impacto. */
.natal-home-galeria-item:first-child { grid-column: span 2; grid-row: span 2; }
@media (min-width: 640px) { .natal-home-galeria-item:nth-child(6) { grid-column: span 2; } }

/* ---------- Grid de tours ---------- */
.natal-tours-grid, .natal-blog-grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .natal-tours-grid, .natal-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .natal-tours-grid, .natal-blog-grid { grid-template-columns: repeat(3, 1fr); } }

.natal-tour-card, .natal-blog-card { overflow: hidden; display: flex; flex-direction: column; background: var(--c-card); }
.natal-tour-card-thumb, .natal-blog-card-thumb { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 2px solid var(--c-fg); background: var(--c-fg); }
.natal-tour-card-thumb img, .natal-blog-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.natal-tour-card:hover img { transform: scale(1.04); }
.natal-thumb-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--c-bg); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; text-align: center; padding: 1rem; }
.natal-badge-oferta { position: absolute; top: 0.75rem; right: 0.75rem; background: var(--c-primary); color: var(--c-primary-fg); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: 999px; border: 2px solid var(--c-fg); }

.natal-card-body { padding: 1.25rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.natal-card-title { font-size: 1.25rem; line-height: 1.2; }
.natal-card-title a:hover { color: var(--c-primary); }
.natal-card-rating { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; }
.natal-rating-numero { font-weight: 700; }
.natal-rating-count { color: var(--c-muted-fg); }
.natal-card-excerpt { color: var(--c-muted-fg); font-size: 0.88rem; flex: 1; }
.natal-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.25rem; }
.natal-card-meta { display: flex; gap: 0.5rem; font-size: 0.75rem; color: var(--c-muted-fg); }
.natal-meta-item { display: inline-flex; align-items: center; gap: 0.3rem; }
.natal-card-precio { text-align: right; font-size: 0.75rem; color: var(--c-muted-fg); }
.natal-card-precio strong { display: block; font-size: 1.15rem; color: var(--c-primary); font-family: var(--font-display); }
.natal-precio-desde { text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- Estrellas ---------- */
.natal-stars { display: inline-flex; gap: 1px; color: var(--c-primary); }
.natal-star { fill: none; stroke: currentColor; stroke-width: 1; }
.natal-star.is-full { fill: currentColor; }
.natal-star.is-half { fill: currentColor; opacity: 0.5; }
.natal-star.is-empty { fill: hsla(4,34%,18%,0.15); stroke: hsla(4,34%,18%,0.3); }

/* ---------- Archivo de tours ---------- */
.natal-archive-header { text-align: center; margin-bottom: 2.5rem; }
.natal-filtros-categoria { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 1.5rem; }
.natal-filtro { border: 2px solid var(--c-fg); border-radius: 999px; padding: 0.5rem 1.1rem; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; background: var(--c-bg); }
.natal-filtro.is-active, .natal-filtro:hover { background: var(--c-primary); color: var(--c-primary-fg); }
.natal-pagination { margin-top: 3rem; display: flex; justify-content: center; gap: 0.5rem; }
.natal-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; border: 2px solid var(--c-fg); border-radius: 0.6rem; padding: 0 0.6rem; font-weight: 600; }
.natal-pagination .page-numbers.current { background: var(--c-fg); color: var(--c-bg); }

/* ---------- Ficha de tour ---------- */
.natal-tour-hero { padding: 1.5rem 0; }
.natal-breadcrumb { font-size: 0.78rem; color: var(--c-muted-fg); margin-bottom: 1rem; }
.natal-breadcrumb a:hover { color: var(--c-primary); }

/*
 * La galería usa `aspect-ratio` en vez de una altura fija en vw: así el alto
 * del contenedor se calcula a partir de su propio ancho (que varía con el
 * layout de cada página) y no del ancho total de la ventana. Con la altura
 * fija anterior, en monitores anchos el contenedor terminaba MUCHO más
 * ancho que alto (hasta ~3:1) mientras que las fotos reales son ~3:2 o
 * 16:10, así que `object-fit: cover` recortaba una gran parte de cada foto
 * para rellenar ese hueco panorámico — las imágenes "no encajaban" con el
 * contenedor.
 *
 * En escritorio (≥1024px), en vez de una sola foto ocupando TODO el ancho
 * del contenedor (que en monitores anchos se sentía como una imagen enorme
 * y dominante), la galería se divide en dos columnas: la foto principal a
 * la izquierda y, a la derecha, una cuadrícula 2x2 con las siguientes 4
 * fotos (mismas miniaturas que ya existían, solo que ahora se ven grandes
 * en vez de una fila angosta debajo). Si hay más de 4 fotos, la última
 * casilla se vuelve un botón "+N" que abre el lightbox. El resultado es
 * una galería que impacta por la CANTIDAD y variedad de fotos visibles a
 * la vez, no por el tamaño de una sola imagen. En mobile/tablet, donde no
 * hay espacio para dos columnas, se mantiene la foto principal a todo el
 * ancho con la fila de miniaturas deslizable debajo.
 */
.natal-galeria-principal {
	border: 2px solid var(--c-fg); border-radius: 1.25rem; overflow: hidden;
	box-shadow: var(--shadow-lg); background: var(--c-fg);
	position: relative; touch-action: pan-y;
	aspect-ratio: 4 / 3; max-height: 26rem;
}
@media (min-width: 640px) {
	.natal-galeria-principal { aspect-ratio: 16 / 10; max-height: 32rem; }
}
@media (min-width: 1024px) {
	/* El layout de dos columnas solo aplica cuando hay miniaturas para
	   mostrar al lado (tours con 1 sola foto conservan la foto principal a
	   todo el ancho, tal como antes). */
	.natal-galeria:has(.natal-galeria-thumbs) { display: grid; grid-template-columns: 1.6fr 1fr; gap: 0.85rem; align-items: stretch; }
	.natal-galeria:has(.natal-galeria-thumbs) .natal-galeria-principal { aspect-ratio: auto; height: 30rem; max-height: none; }
}
.natal-galeria-slide {
	position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0;
	background: none; cursor: zoom-in; opacity: 0; pointer-events: none; z-index: 0;
	transition: opacity 0.5s ease;
}
.natal-galeria-slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
.natal-galeria-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

.natal-galeria-arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 2px solid var(--c-fg);
	background: hsla(34, 74%, 96%, 0.9); display: flex; align-items: center; justify-content: center;
	cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; padding: 0;
}
.natal-galeria-arrow:hover { background: var(--c-bg); transform: translateY(-50%) scale(1.06); }
.natal-galeria-prev { left: 0.7rem; }
.natal-galeria-next { right: 0.7rem; }

.natal-galeria-counter {
	position: absolute; bottom: 0.7rem; right: 0.7rem; z-index: 3;
	background: hsla(4, 34%, 12%, 0.62); color: #fff; font-size: 0.72rem; font-weight: 700;
	letter-spacing: 0.03em; padding: 0.3rem 0.65rem; border-radius: 999px;
}

.natal-galeria-dots { position: absolute; bottom: 0.85rem; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 0.4rem; }
.natal-galeria-dot { width: 0.45rem; height: 0.45rem; padding: 0; border-radius: 999px; border: 1px solid hsla(4, 34%, 12%, 0.35); background: hsla(34, 74%, 96%, 0.75); cursor: pointer; transition: all 0.2s ease; }
.natal-galeria-dot.is-active { width: 1.15rem; background: var(--c-primary); border-color: var(--c-primary); }

.natal-galeria-thumbs { display: flex; gap: 0.5rem; margin-top: 0.65rem; overflow-x: auto; padding-bottom: 0.25rem; scroll-snap-type: x proximity; }
.natal-galeria-thumb { flex-shrink: 0; scroll-snap-align: start; position: relative; width: 56px; height: 56px; border-radius: 0.55rem; overflow: hidden; border: 2px solid transparent; opacity: 0.55; padding: 0; transition: opacity 0.15s ease, border-color 0.15s ease; }
@media (min-width: 640px) { .natal-galeria-thumb { width: 72px; height: 72px; } }
.natal-galeria-thumb.is-active, .natal-galeria-thumb:hover { border-color: var(--c-primary); opacity: 1; }
.natal-galeria-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/*
 * Cuadrícula grande de fotos junto a la foto principal (ver nota arriba).
 * `natal_travel_get_gallery_ids()` puede traer 2, 3 o 4+ fotos, así que el
 * acomodo cambia según cuántas miniaturas haya realmente — evitar casillas
 * vacías es lo que hace ver la cuadrícula como un mosaico cuidado y no como
 * un error de maquetación.
 */
@media (min-width: 1024px) {
	.natal-galeria-thumbs {
		display: grid; grid-template-columns: repeat(2, 1fr);
		gap: 0.85rem; margin-top: 0; overflow: visible; padding-bottom: 0; height: 30rem;
	}
	.natal-galeria-thumb {
		width: 100%; height: 100%; border-radius: 1.1rem; opacity: 1; border-width: 3px;
	}
	.natal-galeria-thumb:nth-child(n + 5) { display: none; }

	/* 2 fotos: una sola fila, una casilla por foto. */
	.natal-galeria-thumbs-2 { grid-template-rows: 1fr; }

	/* 3 fotos: la primera ocupa las dos filas (casilla grande) y las otras
	   dos se apilan al lado — nada de espacio vacío. */
	.natal-galeria-thumbs-3 { grid-template-rows: repeat(2, 1fr); }
	.natal-galeria-thumbs-3 .natal-galeria-thumb:first-child { grid-row: 1 / span 2; }

	/* 4 o más fotos: cuadrícula 2x2 clásica (la 4ta casilla es el botón "+N"
	   cuando sobran fotos, ver single-tour.php). */
	.natal-galeria-thumbs-4 { grid-template-rows: repeat(2, 1fr); }
}

.natal-galeria-thumb-mas-cifra { display: none; }

/* El overlay "+N" solo se ve en la cuadrícula de escritorio: en el celular
   las miniaturas ya se recorren todas deslizando, así que taparla con el
   overlay no aporta — ahí el botón se ve como una miniatura normal. */
@media (min-width: 1024px) {
	.natal-galeria-thumb-mas { cursor: pointer; }
	.natal-galeria-thumb-mas img { filter: brightness(0.55); }
	.natal-galeria-thumb-mas-cifra {
		position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
		color: #fff; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.01em;
		text-shadow: 0 1px 3px hsla(4, 34%, 12%, 0.5);
	}
}

@media (prefers-reduced-motion: reduce) {
	.natal-galeria-slide { transition: none; }
}

/* Lightbox */
.natal-lightbox { position: fixed; inset: 0; z-index: 100; background: hsla(4,34%,18%,0.92); display: flex; align-items: center; justify-content: center; padding: 2rem; }
.natal-lightbox[hidden] { display: none; }
.natal-lightbox img { max-width: 100%; max-height: 85vh; border-radius: 0.5rem; }
.natal-lightbox-close { position: absolute; top: 1.5rem; right: 1.5rem; width: 3rem; height: 3rem; border-radius: 999px; background: var(--c-bg); color: var(--c-fg); display: flex; align-items: center; justify-content: center; border: 2px solid var(--c-fg); }
.natal-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 999px; background: var(--c-bg); border: 2px solid var(--c-fg); display: flex; align-items: center; justify-content: center; }
.natal-lightbox-prev { left: 1.5rem; }
.natal-lightbox-next { right: 1.5rem; }

.natal-tour-layout { display: grid; gap: 3rem; padding: 2.5rem 0 5rem; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .natal-tour-layout { grid-template-columns: 7fr 5fr; align-items: start; } }

.natal-tour-header { border-bottom: 2px solid var(--c-fg); padding-bottom: 1.75rem; margin-bottom: 1.75rem; }
.natal-tour-subtitulo { margin-top: 0.5rem; font-size: 1.05rem; color: var(--c-muted-fg); }
.natal-tour-meta-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }
.natal-tour-ubicacion { display: flex; align-items: center; gap: 0.4rem; margin-top: 1rem; font-size: 0.85rem; color: var(--c-muted-fg); }

.natal-tour-descripcion { margin-bottom: 2.5rem; }

.natal-incluye-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 2.5rem; }
@media (min-width: 560px) { .natal-incluye-grid { grid-template-columns: 1fr 1fr; } }
.natal-incluye-box { border: 2px solid var(--c-fg); border-radius: 0.9rem; background: var(--c-card); padding: 1.25rem; }
.natal-incluye-box h3 { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.9rem; text-transform: uppercase; margin-bottom: 0.75rem; }
.natal-incluye-box svg { color: var(--c-primary); }
.natal-no-incluye-box svg { color: var(--c-destructive); }
.natal-incluye-box ul { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem; color: var(--c-muted-fg); }
.natal-incluye-box li::before { content: '• '; }

.natal-itinerario { margin-bottom: 2.5rem; }
.natal-itinerario-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
@media (min-width: 640px) { .natal-itinerario-grid { grid-template-columns: 1fr 1fr; } }
.natal-itinerario-item { border: 2px solid var(--c-fg); border-radius: 0.9rem; padding: 1.25rem; background: var(--c-card); }
.natal-itinerario-paso { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--c-primary); }
.natal-itinerario-item h4 { margin-top: 0.5rem; font-family: var(--font-body); font-size: 1rem; text-transform: uppercase; }
.natal-itinerario-duracion { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--c-muted-fg); margin-top: 0.15rem; }
.natal-itinerario-item p { margin-top: 0.6rem; font-size: 0.85rem; color: var(--c-muted-fg); }

.natal-acordeones { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 3rem; }
.natal-acordeon { border: 2px solid var(--c-fg); border-radius: 0.9rem; overflow: hidden; }
.natal-acordeon-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; background: var(--c-secondary); color: var(--c-secondary-fg); padding: 1rem 1.25rem; border: 0; font-family: var(--font-body); font-weight: 700; text-transform: uppercase; font-size: 0.85rem; }
.natal-acordeon-btn svg { transition: transform .2s ease; }
.natal-acordeon-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.natal-acordeon-panel { padding: 1rem 1.25rem; font-size: 0.85rem; color: var(--c-muted-fg); background: var(--c-bg); }

/* ---------- Reseñas (comentarios de blog — comments.php; las reseñas de
   tours ya no se listan en la ficha del tour, ver single-tour.php) ---------- */
.natal-comment-list { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 2.5rem; }
.natal-review-item { border: 2px solid var(--c-fg); border-radius: 0.9rem; padding: 1.25rem; background: var(--c-card); }
.natal-review-head { display: flex; align-items: center; gap: 0.75rem; }
.natal-review-head img { border-radius: 999px; border: 2px solid var(--c-fg); }
.natal-review-autor { display: block; font-weight: 700; }
.natal-review-fecha { display: block; font-size: 0.75rem; color: var(--c-muted-fg); }
.natal-review-rating { margin-left: auto; }
.natal-review-texto { margin-top: 0.75rem; font-size: 0.9rem; }
.natal-review-pendiente { color: var(--c-destructive); }
.natal-comments-pagination { margin-bottom: 2rem; }

/* Formulario de comentarios / reseñas */
#respond, .comment-respond { border: 2px solid var(--c-fg); border-radius: 1rem; padding: 1.5rem; background: var(--c-card); }
#respond .comment-reply-title, .comment-respond .comment-reply-title { font-size: 1.4rem; display: block; margin-bottom: 1rem; }
.comment-form-rating { margin-bottom: 1rem; }
.natal-rating-input { display: inline-flex; flex-direction: row-reverse; gap: 0.2rem; font-size: 1.8rem; }
.natal-rating-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.natal-rating-input label { color: hsla(4,34%,18%,0.25); cursor: pointer; transition: color .15s; }
.natal-rating-input input:checked ~ label,
.natal-rating-input label:hover,
.natal-rating-input label:hover ~ label { color: var(--c-primary); }
.comment-form-comment label, .comment-form-author label, .comment-form-email label, .comment-form-url label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.35rem; }
.comment-form-comment textarea, .comment-form-author input, .comment-form-email input, .comment-form-url input {
	width: 100%; border: 2px solid var(--c-fg); border-radius: 0.6rem; padding: 0.6rem 0.8rem; background: var(--c-bg); margin-bottom: 1rem;
}
.form-submit input[type="submit"] { border: 2px solid var(--c-fg); background: var(--c-primary); color: var(--c-primary-fg); border-radius: 0.6rem; padding: 0.8rem 1.6rem; font-weight: 700; text-transform: uppercase; box-shadow: var(--shadow-sm); }
.form-submit input[type="submit"]:hover { background: var(--c-fg); color: var(--c-bg); }
.required { color: var(--c-destructive); }

/* ---------- Sidebar de reserva ---------- */
.natal-tour-sidebar { position: relative; }
.natal-booking-card { position: sticky; top: 6.5rem; border: 2px solid var(--c-fg); border-radius: 1.25rem; background: var(--c-fg); color: var(--c-bg); padding: 1.75rem; box-shadow: var(--shadow-lg); }
.natal-booking-precio { border-bottom: 2px solid hsla(34,74%,91%,0.2); padding-bottom: 1.25rem; margin-bottom: 1.25rem; }
.natal-booking-precio strong { display: block; font-family: var(--font-display); font-size: 2.2rem; color: var(--c-primary); }
.natal-precio-tachado { text-decoration: line-through; opacity: 0.5; font-size: 0.9rem; }
.natal-booking-precio span:last-child { font-size: 0.75rem; opacity: 0.7; }

.natal-booking-form { display: flex; flex-direction: column; gap: 0.9rem; }
.natal-form-row-group { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.natal-form-row label { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.35rem; }
.natal-form-row input, .natal-form-row textarea {
	width: 100%; border: 2px solid hsla(34,74%,91%,0.4); border-radius: 0.6rem; padding: 0.65rem 0.8rem;
	background: hsla(34,74%,91%,0.08); color: var(--c-bg);
}
.natal-form-row input::placeholder, .natal-form-row textarea::placeholder { color: hsla(34,74%,91%,0.5); }
.natal-form-row input:focus, .natal-form-row textarea:focus { outline: 2px solid var(--c-primary); background: hsla(34,74%,91%,0.14); }
.natal-honeypot { position: absolute; left: -9999px; }
.natal-form-feedback { font-size: 0.85rem; min-height: 1.2em; }
.natal-form-feedback.is-success { color: #7CE0C6; }
.natal-form-feedback.is-error { color: #FF9C9C; }

/* ---------- Bienestar / CTA ---------- */
.natal-bienestar-grid { display: grid; gap: 2rem; padding: 2.5rem; grid-template-columns: 1fr; box-shadow: var(--shadow-lg); }
@media (min-width: 768px) { .natal-bienestar-grid { grid-template-columns: 1fr 1fr; padding: 3rem; } }
.natal-bienestar-grid svg { color: var(--c-primary); }
.natal-bienestar-grid h3 { margin-top: 1rem; }
.natal-bienestar-grid p { margin-top: 0.75rem; color: var(--c-muted-fg); }

.natal-resenas-destacadas-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .natal-resenas-destacadas-grid { grid-template-columns: repeat(3, 1fr); } }
.natal-resena-destacada { padding: 1.5rem; }
.natal-resena-destacada p { margin-top: 0.75rem; font-style: italic; }
.natal-resena-destacada-autor { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.25rem; }
.natal-resena-destacada-autor img { border-radius: 999px; }
.natal-resena-destacada-autor span { display: block; font-size: 0.75rem; color: var(--c-muted-fg); }

.natal-cta-final { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; justify-content: space-between; padding: 2.25rem; background: var(--c-secondary); }
@media (min-width: 768px) { .natal-cta-final { flex-direction: row; align-items: center; } }
.natal-cta-final p { margin-top: 0.25rem; }
.natal-vacio-light { color: hsla(34,74%,91%,0.7); text-align: center; }

/* ---------- Blog / entradas ---------- */
.natal-single-header { margin-bottom: 1.5rem; }
.natal-single-thumb { border: 2px solid var(--c-fg); border-radius: 1.1rem; overflow: hidden; margin-bottom: 2rem; box-shadow: var(--shadow-md); }
.natal-link-arrow { font-size: 0.85rem; font-weight: 700; color: var(--c-primary); }
.natal-404 { text-align: center; padding: 6rem 0; }
.natal-404 .natal-h1 { font-size: 6rem; }
.natal-404 .natal-btn { margin: 0.5rem; }

/* Formulario de búsqueda por defecto de WP */
.search-form { display: flex; gap: 0.5rem; margin-top: 1rem; }
.search-form input[type="search"] { flex: 1; border: 2px solid var(--c-fg); border-radius: 0.6rem; padding: 0.6rem 0.9rem; background: var(--c-bg); }
.search-form input[type="submit"] { border: 2px solid var(--c-fg); background: var(--c-primary); color: var(--c-primary-fg); border-radius: 0.6rem; padding: 0 1.25rem; font-weight: 700; text-transform: uppercase; }