/* =============================================================
   PISO E TIERRA — Capa de vida del sitio (global)
   Archivo: assets/css/pt-site.css
   Contiene: scroll-reveal, footer, to-top, transición de página,
   microinteracciones (header dinámico, spotlight, blur-up,
   parallax), entrada animada del hero, subrayado de menú,
   microinteracción de botones, selector de idioma, pulso del
   botón de WhatsApp, scroll suave a anclas, insignia de confianza
   en testimonios, y accesibilidad (focus-visible, contraste del
   hero).
   Todo respeta prefers-reduced-motion y nunca oculta contenido si
   JS falla (ver pt-site.js).
   ============================================================= */

/* -------------------------------------------------------------
   0. SCROLL SUAVE A ANCLAS
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; scroll-padding-top: 100px; }
}

/* -------------------------------------------------------------
   1. SCROLL REVEAL (antes duplicado en home + 3 archivos)
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.pt-anim {
		opacity: 0;
		transform: translateY(34px) scale(.97);
		will-change: opacity, transform;
	}
	.pt-anim.is-in { opacity: 1; transform: none; }
}

.pt-exp-card, .pt-blog-card, .pt-card, .pt-testimonio {
	transition: opacity .7s ease, transform .6s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease;
}
.pt-exp-card:hover, .pt-blog-card:hover, .pt-card:hover, .pt-testimonio:hover {
	transform: translateY(-8px);
	box-shadow: 0 22px 48px rgba(46,56,37,0.18);
}
.pt-exp-card__media, .pt-blog-card__media, .pt-card__img-wrap { overflow: hidden; }
.pt-exp-card__img, .pt-blog-card__img, .pt-card__img { transition: transform 1s cubic-bezier(.22,.61,.36,1); }
.pt-exp-card:hover .pt-exp-card__img,
.pt-blog-card:hover .pt-blog-card__img,
.pt-card:hover .pt-card__img { transform: scale(1.08); }

.pt-section-header { transition: opacity .7s ease, transform .55s cubic-bezier(.22,.61,.36,1); }
.pt-section-header__title { position: relative; }
.pt-section-header__title::after {
	content: ""; display: block; width: 60px; height: 2px; margin: .95rem auto 0;
	background: var(--pt-verde-medio); transform: scaleX(0); transform-origin: center;
	transition: transform .9s cubic-bezier(.22,.61,.36,1) .15s;
}
.pt-section-header.is-in .pt-section-header__title::after { transform: scaleX(1); }

.pt-categorias__item { transition: opacity .7s ease, transform .45s cubic-bezier(.22,.61,.36,1); }
.pt-categorias__icon { transition: transform .4s ease, color .4s ease; }
.pt-categorias__item:hover .pt-categorias__icon {
	transform: translateY(-4px) scale(1.08); color: var(--pt-verde-acento);
}

.pt-testimonio__stars { transition: transform .4s ease; transform-origin: left center; }
.pt-testimonio:hover .pt-testimonio__stars { transform: scale(1.07); }
.pt-testimonio__source {
	display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem;
	font-family: var(--pt-sans); font-size: .7rem; font-weight: 600;
	letter-spacing: .04em; color: var(--pt-verde-medio);
	background: var(--pt-crema); border: 1.5px solid rgba(110,122,78,.3);
	padding: .25rem .6rem; border-radius: 999px;
	box-shadow: 0 2px 8px rgba(110,122,78,.15);
}

/* -------------------------------------------------------------
   1b. MICROINTERACCIÓN: tarjetas y bloques secundarios del sitio
   (oferta gastronómica, reglas del chef, detalles de alojamiento,
   beneficios de transporte, galería, coberturas)
   ------------------------------------------------------------- */
.pt-oferta-card, .pt-chef__rule, .pt-detalle-item, .pt-transp-benefit, .pt-cobertura-card {
	transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
}
.pt-oferta-card:hover, .pt-transp-benefit:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 34px rgba(46,56,37,0.12);
}
.pt-galeria__item { transition: transform .3s cubic-bezier(.22,.61,.36,1); }

/* -------------------------------------------------------------
   1c. INSIGNIA DE CONFIANZA (testimonios)
   Refuerzo puramente visual y genérico — no usa logos de marcas
   ni implica asociación con ninguna plataforma externa. Es un
   sello circular con una marca de verificación, apoyado en el
   texto que ya existía ("Reseña verificada").
   ------------------------------------------------------------- */
.pt-testimonio { position: relative; }
.pt-testimonio::after {
	content: "";
	position: absolute; top: -10px; right: 18px;
	width: 28px; height: 28px; border-radius: 50%;
	background-color: var(--pt-verde-medio);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; background-size: 14px 14px;
	box-shadow: 0 3px 10px rgba(46,56,37,0.28), 0 0 0 3px var(--pt-crema);
}

/* -------------------------------------------------------------
   2. HEADER DINÁMICO AL HACER SCROLL
   ------------------------------------------------------------- */
#pt-header.pt-header {
	transition: box-shadow .3s ease, background-color .3s ease, padding .3s ease;
}
#pt-header.pt-header--scrolled {
	box-shadow: 0 6px 24px rgba(46,56,37,0.12);
}
@media (prefers-reduced-motion: no-preference) {
	#pt-header.pt-header--scrolled .pt-header__inner { padding-block: .35rem; }
}

/* -------------------------------------------------------------
   2b. MENÚ PRINCIPAL: subrayado animado en hover/foco
   (no altera el layout: usa un degradado en vez de un ::after)
   ------------------------------------------------------------- */
#pt-main-nav .pt-main-nav__list > li > a {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0% 2px;
	transition: background-size .35s cubic-bezier(.22,.61,.36,1);
	padding-bottom: 2px;
}
#pt-main-nav .pt-main-nav__list > li > a:hover,
#pt-main-nav .pt-main-nav__list > li > a:focus-visible {
	background-size: 100% 2px;
}

/* -------------------------------------------------------------
   2c. BOTONES: microinteracción de elevación + presión
   ------------------------------------------------------------- */
.pt-btn { transition: box-shadow .3s ease, filter .25s ease; }
@media (prefers-reduced-motion: no-preference) {
	.pt-btn { transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, filter .25s ease; }
	.pt-btn:hover { transform: translateY(-3px); }
	.pt-btn:active { transform: translateY(-1px) scale(.97); }
}
.pt-btn:hover { box-shadow: 0 12px 28px rgba(46,56,37,0.16); }

/* -------------------------------------------------------------
   2d. SELECTOR DE IDIOMA (header, a la izquierda del CTA)
   Fix reforzado: en vez de solo "ocultar" el bullet con list-style,
   se cambia el 'display' real de <li> a inline-flex, que por
   definición del estándar CSS ya no puede generar caja de marcador
   (::marker) sin importar qué otra hoja de estilos del tema/plugins
   intente ponerle un bullet. También se cubren TODOS los
   pseudo-elementos (::before/::after) de ul, li y a, y se oculta
   cualquier imagen/ícono de bandera que Polylang pudiera insertar.
   ------------------------------------------------------------- */
.pt-lang-switch { display: flex; align-items: center; margin-inline-end: .5rem; flex: 0 0 auto; }

.pt-lang-switch,
.pt-lang-switch * {
	list-style: none !important;
	list-style-type: none !important;
	list-style-image: none !important;
}

.pt-lang-switch::before,
.pt-lang-switch::after,
.pt-lang-switch ul::before,
.pt-lang-switch ul::after,
.pt-lang-switch li::before,
.pt-lang-switch li::after,
.pt-lang-switch li::marker,
.pt-lang-switch a::before,
.pt-lang-switch a::after {
	content: none !important;
	display: none !important;
	background: none !important;
	width: 0 !important;
	height: 0 !important;
}

.pt-lang-switch img,
.pt-lang-switch .flag,
.pt-lang-switch svg:not(.pt-header__logo-svg) {
	display: none !important;
}

.pt-lang-switch ul {
	display: flex !important; align-items: center; gap: .4rem;
	margin: 0 !important; padding: 0 !important;
}
.pt-lang-switch li {
	display: inline-flex !important; align-items: center;
	margin: 0 !important; padding: 0 !important;
}
.pt-lang-switch a {
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--pt-sans); font-size: .72rem; font-weight: 700;
	letter-spacing: .04em; text-transform: uppercase;
	color: var(--pt-verde-oscuro); text-decoration: none;
	padding: .4rem .65rem; border-radius: 999px;
	border: 1px solid rgba(46,56,37,0.18);
	transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.pt-lang-switch a:hover { background: rgba(110,122,78,0.14); transform: translateY(-1px); }
.pt-lang-switch li.current-lang a {
	background: var(--pt-verde-oscuro); color: var(--pt-crema); border-color: var(--pt-verde-oscuro);
}

/* -------------------------------------------------------------
   3. SPOTLIGHT: realce sutil que sigue el cursor en tarjetas
   ------------------------------------------------------------- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.pt-exp-card, .pt-blog-card, .pt-card {
		position: relative;
		isolation: isolate;
	}
	.pt-exp-card::before, .pt-blog-card::before, .pt-card::before {
		content: "";
		position: absolute; inset: 0; z-index: 3; pointer-events: none;
		border-radius: inherit;
		background: radial-gradient(220px circle at var(--pt-mx, 50%) var(--pt-my, 50%),
			rgba(243,240,231,0.18), transparent 70%);
		opacity: 0; transition: opacity .35s ease;
	}
	.pt-exp-card:hover::before, .pt-blog-card:hover::before, .pt-card:hover::before { opacity: 1; }
}

/* -------------------------------------------------------------
   4. BLUR-UP: carga progresiva de imágenes (evita salto visual)
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	img[loading="lazy"].pt-fade { opacity: 0; filter: blur(8px); transform: scale(1.02);
		transition: opacity .5s ease, filter .6s ease, transform .6s ease; }
	img[loading="lazy"].pt-fade.pt-fade--in { opacity: 1; filter: blur(0); transform: none; }
}

/* -------------------------------------------------------------
   5. PARALLAX SUTIL DEL HERO + ENTRADA ANIMADA AL CARGAR
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.pt-hero__slide { will-change: transform; }

	@keyframes ptFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

	.pt-hero__eyebrow, .pt-archive-hero__eyebrow, .pt-exp-hero__eyebrow, .pt-tour-hero__eyebrow {
		animation: ptFadeUp .8s cubic-bezier(.22,.61,.36,1) both;
	}
	.pt-hero__title, .pt-archive-hero__title, .pt-exp-hero__title, .pt-tour-hero__title {
		animation: ptFadeUp .9s cubic-bezier(.22,.61,.36,1) .13s both;
	}
	.pt-hero__subtitle, .pt-archive-hero__subtitle, .pt-exp-hero__sub {
		animation: ptFadeUp .9s cubic-bezier(.22,.61,.36,1) .26s both;
	}
	.pt-hero__cta-group, .pt-hero .pt-btn {
		animation: ptFadeUp .9s cubic-bezier(.22,.61,.36,1) .38s both;
	}
}

/* -------------------------------------------------------------
   6. ACCESIBILIDAD: foco visible + contraste del hero
   ------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.pt-btn:focus-visible {
	outline: 3px solid var(--pt-verde-medio);
	outline-offset: 3px;
	border-radius: 4px;
}
/* El header usa fondo claro: un foco verde oscuro se ve mejor ahí */
#pt-header a:focus-visible,
#pt-header button:focus-visible {
	outline-color: var(--pt-verde-oscuro);
}
/* Mejor legibilidad del texto sobre las imágenes del hero */
.pt-hero__title, .pt-hero__subtitle, .pt-hero__eyebrow,
.pt-archive-hero__title, .pt-archive-hero__subtitle, .pt-archive-hero__eyebrow,
.pt-exp-hero__title, .pt-exp-hero__sub, .pt-exp-hero__eyebrow,
.pt-tour-hero__title, .pt-tour-hero__eyebrow {
	text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}

/* -------------------------------------------------------------
   7a. CIFRAS DESTACADAS (contador animado, Home — opcional)
   ------------------------------------------------------------- */
.pt-cifras { background: var(--pt-verde-oscuro); padding: 3.5rem 0; }
.pt-cifras__grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 2rem; text-align: center; list-style: none; margin: 0; padding: 0;
}
.pt-cifra__num-wrap {
	font-family: var(--pt-serif); font-weight: 600; font-style: italic;
	font-size: clamp(2.4rem, 5vw, 3.4rem); color: var(--pt-crema); line-height: 1;
	display: inline-flex; align-items: baseline; gap: .1rem;
}
.pt-cifra__sufijo { font-size: .55em; }
.pt-cifra__label {
	display: block; margin-top: .6rem; font-family: var(--pt-sans);
	font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
	color: rgba(243,240,231,0.75);
}

/* -------------------------------------------------------------
   7. FOOTER (antes incrustado en footer.php)
   ------------------------------------------------------------- */
#pt-footer.pt-footer {
	position: relative; overflow: hidden;
	background: var(--pt-verde-oscuro);
	color: rgba(243,240,231,0.82);
	padding: 4.5rem 0 0;
}
#pt-footer .pt-footer__inner {
	display: grid; grid-template-columns: 1.3fr 1fr 1.2fr; gap: 3rem;
	align-items: start; padding-bottom: 3.5rem; position: relative; z-index: 2;
}
#pt-footer .pt-footer__logo-svg { width: 160px; height: auto; color: var(--pt-crema); display: block; }
#pt-footer .pt-footer__tagline {
	font-family: var(--pt-sans); font-size: .95rem; font-weight: 300; line-height: 1.6;
	color: rgba(243,240,231,0.7); margin: 1.1rem 0 1.5rem; max-width: 30ch;
}
#pt-footer .pt-footer__social { display: flex; gap: .7rem; }
#pt-footer .pt-footer__social a {
	width: 40px; height: 40px; border-radius: 50%;
	display: grid; place-items: center;
	background: rgba(243,240,231,0.08); color: var(--pt-crema);
	transition: background .25s ease, color .25s ease, transform .2s ease;
}
#pt-footer .pt-footer__social a:hover { background: var(--pt-crema); color: var(--pt-verde-oscuro); transform: translateY(-3px); }
#pt-footer .pt-footer__col-title {
	font-family: var(--pt-sans); font-size: .72rem; font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase; color: var(--pt-crema); margin: 0 0 1.3rem;
}
#pt-footer .pt-footer__nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
#pt-footer .pt-footer__nav-list a {
	color: rgba(243,240,231,0.78); text-decoration: none;
	font-family: var(--pt-sans); font-size: .93rem; transition: color .2s ease, padding-left .2s ease;
}
#pt-footer .pt-footer__nav-list a:hover { color: var(--pt-crema); padding-left: 5px; }
#pt-footer .pt-footer__address { font-style: normal; display: grid; gap: .85rem; }
#pt-footer .pt-footer__address p {
	display: flex; align-items: flex-start; gap: .6rem; margin: 0;
	font-family: var(--pt-sans); font-size: .93rem; line-height: 1.5; color: rgba(243,240,231,0.78);
}
#pt-footer .pt-footer__address svg { margin-top: 3px; color: var(--pt-verde-medio); flex: 0 0 auto; }

#pt-footer .pt-footer__bottom { position: relative; z-index: 2; border-top: 1px solid rgba(243,240,231,0.12); }
#pt-footer .pt-footer__bottom .pt-container {
	display: flex; justify-content: space-between; align-items: center;
	gap: 1rem; flex-wrap: wrap; padding-block: 1.4rem;
}
#pt-footer .pt-footer__copy { font-family: var(--pt-sans); font-size: .8rem; color: rgba(243,240,231,0.6); margin: 0; }
#pt-footer .pt-footer__legal { display: flex; gap: .6rem; align-items: center; }
#pt-footer .pt-footer__legal a { color: rgba(243,240,231,0.7); text-decoration: none; font-family: var(--pt-sans); font-size: .8rem; transition: color .2s ease; }
#pt-footer .pt-footer__legal a:hover { color: var(--pt-crema); }
#pt-footer .pt-footer__legal span { color: rgba(243,240,231,0.3); }

#pt-footer .pt-footer__wordmark {
	position: relative; z-index: 1;
	font-family: var(--pt-serif); font-weight: 600; font-style: italic;
	font-size: clamp(3.5rem, 15vw, 16rem); line-height: .82;
	text-align: center; white-space: nowrap; letter-spacing: -.01em;
	color: rgba(243,240,231,0.06);
	margin: -1rem 0 -.04em; padding: 0 1rem;
	user-select: none; pointer-events: none;
}

@media (max-width: 900px) {
	#pt-footer .pt-footer__inner { grid-template-columns: 1fr 1fr; gap: 2.2rem; }
	#pt-footer .pt-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
	#pt-footer .pt-footer__inner { grid-template-columns: 1fr; }
	#pt-footer .pt-footer__bottom .pt-container { flex-direction: column; text-align: center; }
}

/* -------------------------------------------------------------
   7b. BOTÓN FLOTANTE DE WHATSAPP: pulso sutil (anillo)
   No toca la posición/forma existente del botón (ya es "position:
   fixed" con border-radius en style.css, lo cual también sirve de
   contexto de posicionamiento para el pseudo-elemento): solo agrega
   un anillo que respira cada pocos segundos.
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.pt-whatsapp-float::before {
		content: ""; position: absolute; inset: 0; z-index: -1;
		border-radius: inherit; pointer-events: none;
		box-shadow: 0 0 0 0 rgba(37,211,102,.55);
		animation: ptWaPulseRing 2.8s ease-out infinite;
	}
	@keyframes ptWaPulseRing {
		0% { box-shadow: 0 0 0 0 rgba(37,211,102,.55); opacity: 1; }
		70% { box-shadow: 0 0 0 18px rgba(37,211,102,0); opacity: 0; }
		100% { box-shadow: 0 0 0 18px rgba(37,211,102,0); opacity: 0; }
	}
}

/* -------------------------------------------------------------
   8. BOTÓN "VOLVER ARRIBA"
   ------------------------------------------------------------- */
.pt-to-top {
	position: fixed; right: 1.4rem; bottom: 5.4rem; z-index: 998;
	width: 46px !important; height: 46px !important; min-width: 0 !important; max-width: 46px !important;
	padding: 0 !important; margin: 0 !important; line-height: 0 !important;
	border: none !important; border-radius: 50% !important; cursor: pointer;
	background: var(--pt-verde-oscuro) !important; color: var(--pt-crema) !important;
	-webkit-appearance: none; appearance: none; box-sizing: border-box;
	display: flex !important; align-items: center; justify-content: center;
	box-shadow: 0 6px 20px rgba(46,56,37,0.28);
	opacity: 0; visibility: hidden; transform: translateY(12px);
	transition: opacity .3s ease, transform .3s ease, visibility .3s, background .2s ease;
}
.pt-to-top svg { width: 20px; height: 20px; display: block; }
.pt-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.pt-to-top:hover { background: #5a6b3e !important; transform: translateY(-3px); }
@media (max-width: 600px) { .pt-to-top { right: 1rem; bottom: 5rem; width: 42px !important; height: 42px !important; max-width: 42px !important; } }

/* -------------------------------------------------------------
   9. TRANSICIÓN DE PÁGINA (telón)
   ------------------------------------------------------------- */
#pt-