@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));

	/* Colores de las franjas oscuras del home ("Tours disponibles" y
	   "Gallery"): variables APARTE de --foreground/--background para que se
	   puedan elegir por separado desde Personalizar (ver
	   inc/template-tags.php, natal_travel_generar_css_personalizado). Estos
	   valores por defecto igualan el comportamiento que tenía el tema antes
	   de existir esos controles (fondo oscuro = --foreground, texto claro =
	   --background), así que si nunca se tocan, no cambia nada. */
	--seccion-oscura-bg: var(--foreground);
	--seccion-oscura-fg: var(--background);

	--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: hsl(var(--seccion-oscura-bg)); color: hsl(var(--seccion-oscura-fg)); 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; }
/* El bloque de contacto siempre alineado a la izquierda (nunca centrado),
   incluso si algo en la página lo hereda centrado por accidente. */
.natal-footer-contacto,
.natal-footer-contacto ul,
.natal-footer-contacto li { text-align: left; }
.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. Un poco
   más alta que antes (v1.13.0) para que la foto tenga más presencia ahora
   que el texto ya no le tapa el centro. */
.natal-hero-con-imagen { min-height: 26rem; display: flex; align-items: flex-end; }
@media (min-width: 640px) { .natal-hero-con-imagen { min-height: 32rem; } }
@media (min-width: 1024px) { .natal-hero-con-imagen { min-height: 38rem; align-items: flex-end; } }
.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; }

/*
 * Texto del hero en el lateral derecho (v1.13.0), abajo (v1.14.2) y sin
 * recuadro (v1.14.1): el título + texto se apoyan en la esquina inferior
 * derecha de la imagen — abajo, y no a la mitad de la foto, para no quedar
 * encima de las caras/torso de las personas que suelen estar ahí — sin caja
 * ni fondo propio detrás (se probó con una tarjeta oscura semitransparente,
 * pero se veía como un recuadro/sombra flotando sobre la foto, así que se
 * quitó). En su lugar, el texto lleva una sombra propia para que se siga
 * leyendo bien encima de cualquier foto. En celular no hay espacio para un
 * lateral, así que se mantiene el mismo comportamiento (bloque de ancho
 * completo, apoyado abajo).
 */
@media (min-width: 1024px) {
	.natal-hero-con-imagen .natal-hero-grid { display: flex; justify-content: flex-end; padding: 3rem 0; }
	.natal-hero-copy-derecha { max-width: 25rem; text-align: right; }
}
.natal-hero-con-imagen .natal-hero-title,
.natal-hero-con-imagen .natal-hero-texto { text-shadow: 0 2px 10px hsla(4, 34%, 8%, 0.55); }

.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: franja horizontal con flechas
   (v1.14.0) — reemplaza al mosaico tipo bento, al estilo de la sección
   "GALLERY" del sitio original (nataltravel.com). Va después de "Tours
   disponibles" (ver front-page.php), sobre fondo oscuro (.natal-section-dark). */
.natal-home-galeria-scroll-section { padding-bottom: 3.5rem; }
.natal-home-galeria-scroll-wrap { position: relative; }
.natal-home-galeria-scroll {
	display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
	padding: 0 1.25rem 0.5rem; -webkit-overflow-scrolling: touch;
	scrollbar-width: none; -ms-overflow-style: none;
}
.natal-home-galeria-scroll::-webkit-scrollbar { display: none; height: 0; }
.natal-home-galeria-scroll-item {
	position: relative; flex: 0 0 auto; display: block; overflow: hidden;
	width: 15rem; height: 11rem; border-radius: 1rem; scroll-snap-align: start;
	border: 2px solid hsla(34, 74%, 91%, 0.25); box-shadow: var(--shadow-sm);
	/* Es un <button>, no un <a>: se le quita el estilo nativo del navegador
	   para que se vea igual que antes. */
	padding: 0; margin: 0; background: none; font: inherit; cursor: pointer;
}
@media (min-width: 768px) { .natal-home-galeria-scroll-item { width: 19rem; height: 13.5rem; } }
.natal-home-galeria-scroll-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.natal-home-galeria-scroll-item:hover img, .natal-home-galeria-scroll-item:focus-visible img { transform: scale(1.08); }

.natal-home-galeria-scroll-arrow {
	position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 999px;
	background: var(--c-primary); color: var(--c-primary-fg); border: 2px solid var(--c-bg); display: flex;
	align-items: center; justify-content: center; box-shadow: var(--shadow-md); z-index: 2; transition: opacity 0.2s ease;
}
.natal-home-galeria-scroll-arrow:hover { background: var(--c-bg); color: var(--c-fg); }
.natal-home-galeria-scroll-arrow-prev { left: 0.5rem; }
.natal-home-galeria-scroll-arrow-next { right: 0.5rem; }
.natal-home-galeria-scroll-arrow[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 639px) { .natal-home-galeria-scroll-arrow { display: none; } }

/* ---------- 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);
	/* Corrige que el título/texto de la tarjeta heredara el color de texto
	   claro de la franja oscura cuando la tarjeta vive dentro de una sección
	   ".natal-section-dark" (ej. "Tours disponibles" en el home): sin este
	   color explícito, el título quedaba casi invisible sobre la propia
	   tarjeta clara. Ahora el texto de la tarjeta siempre usa el color de
	   texto general del sitio, sin importar en qué sección esté. */
	color: var(--c-fg);
}
.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.3rem; line-height: 1.25; font-weight: 700; margin: 0.1rem 0 0.15rem; }
.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; }

/* ---------- Página de Galería (page-galeria.php) ---------- */
.natal-galeria-ui-hero { text-align: center; padding: 3.5rem 0 1rem; max-width: 42rem; margin: 0 auto; }
.natal-galeria-ui-subheading { margin-top: 0.75rem; color: var(--c-muted-fg); font-size: 1.05rem; }
.natal-galeria-ui-wrap { padding: 1.5rem 0 5rem; }
/* Mosaico estilo "masonry" con columnas CSS: cada foto conserva su propia
   proporción (nada se recorta a la fuerza) y las columnas se auto-ajustan
   al ancho de pantalla — look de galería moderna sin depender de JS para el
   layout, solo para el lightbox. */
.natal-galeria-ui-grid { column-count: 2; column-gap: 1rem; }
@media (min-width: 640px) { .natal-galeria-ui-grid { column-count: 3; } }
@media (min-width: 1024px) { .natal-galeria-ui-grid { column-count: 4; column-gap: 1.25rem; } }
.natal-galeria-ui-item {
	display: block; width: 100%; margin: 0 0 1rem; padding: 0; border: 2px solid var(--c-fg);
	border-radius: 1rem; overflow: hidden; background: var(--c-fg); break-inside: avoid;
	box-shadow: var(--shadow-sm); cursor: zoom-in; transition: box-shadow .15s ease, transform .15s ease;
}
.natal-galeria-ui-item:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.natal-galeria-ui-item img { display: block; width: 100%; height: auto; transition: transform .35s ease; }
.natal-galeria-ui-item:hover img { transform: scale(1.03); }
.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-lightbox-contenido { display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 100%; }
.natal-lightbox-contenido img { max-width: 100%; max-height: 78vh; border-radius: 0.5rem; }
.natal-lightbox-enlace {
	background: var(--c-primary); color: var(--c-primary-fg); font-weight: 700; font-size: 0.85rem;
	padding: 0.55rem 1.25rem; border-radius: 999px; border: 2px solid var(--c-bg); box-shadow: var(--shadow-sm);
}
.natal-lightbox-enlace[hidden] { display: none; }

.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; }

/* Formulario de reserva al final de la ficha del tour (ya no va en el
   sidebar/hero — ver nota en single-tour.php): misma tarjeta oscura, pero
   centrada, ancha y sin quedar "pegada" (sticky) mientras se hace scroll. */
.natal-tour-reserva-final { padding: 0 0 5rem; }
.natal-booking-card-final { position: static; max-width: 40rem; margin: 0 auto; padding: 2.5rem; }
.natal-tour-reserva-final-head { text-align: center; margin-bottom: 1.75rem; }
.natal-tour-reserva-final-head .natal-h2 { color: var(--c-bg); }
.natal-tour-reserva-final-head .natal-booking-precio { border-bottom: none; padding-bottom: 0; margin-bottom: 0; margin-top: 0.75rem; }

/* ---------- 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; }