/*
 * TreeTrek Gamboa - main.css
 *
 * Réplica fiel del diseño original (tema Divi). Los valores de color,
 * fondos y tipografía de cada sección fueron verificados directamente
 * contra el HTML/CSS exportado del sitio en producción - no son
 * aproximaciones. Ver README.txt para el detalle de cada valor.
 *
 * Variables sobreescribibles en vivo desde el Customizer -> inc/customizer.php
 */

:root {
	--ttg-primary: #033d20;      /* Bienvenidos, bordes, botones outline */
	--ttg-primary-2: #246501;    /* Ítem de menú activo */
	--ttg-accent: #fcb815;       /* Botón "Reservar Tour" */
	--ttg-light: #ecffe5;        /* Fondo del body y topbar */
	--ttg-cta: #12441f;          /* Botón "Reserva Ahora" del menú */
	--ttg-cta-hover: #0f3819;
	--ttg-strip: #033d20;        /* Franja de datos del tour */
	--ttg-footer: #222222;
	--ttg-footer-bottom: rgba(0, 0, 0, .32);
	--ttg-overlay: rgba(0, 0, 0, .24);
	--ttg-tour-heading: #003300;
	--ttg-text: #333333;
	--ttg-font: "Open Sans", Arial, Helvetica, sans-serif;
	--ttg-container: 1140px;

	/* ---------------------------------------------------------
	   Alturas del header. Son la referencia única: el header,
	   el padding-top del contenido y los elementos "sticky"
	   (ej. la tarjeta de precios) leen estas variables, así que
	   cambiar el alto del header en un solo sitio lo cambia todo.

	   Medidas verificadas contra el sitio en producción:
	     - #top-header  -> 30px  (font-size 12px + padding .75em)
	     - #main-header -> 66px  (atributo data-height-onload="66")
	     - total        -> 96px
	     - el logo se renderiza a 81px de alto y SOBRESALE hacia
	       arriba, invadiendo la franja del topbar: su borde inferior
	       queda 4px por encima del borde inferior del header.
	   --------------------------------------------------------- */
	--ttg-topbar-h: 30px;
	--ttg-header-row-h: 66px;
	--ttg-logo-h: 81px;
	--ttg-logo-gap: 4px;
	--ttg-header-h: 96px;
}

body {
	font-family: var(--ttg-font);
	background: var(--ttg-light);
	font-size: 15px;
	line-height: 1.6;
}

.ttg-container {
	max-width: var(--ttg-container);
	margin: 0 auto;
	padding: 0 20px;
}

/* -----------------------------------------------------------
   Botones
----------------------------------------------------------------- */
.ttg-btn {
	display: inline-block;
	padding: 10px 22px;
	font-size: 13px;
	font-weight: 600;
	border-radius: 3px;
	transition: all .25s ease;
	cursor: pointer;
	border: none;
	line-height: 1.4;
}
.ttg-btn--lg { padding: 14px 32px; font-size: 14px; }
.ttg-btn--block { display: block; text-align: center; width: 100%; }

.ttg-btn--accent {
	background: var(--ttg-accent);
	color: #fff;
	box-shadow: 0 2px 18px rgba(0, 0, 0, .3);
}
.ttg-btn--accent:hover { filter: brightness(0.94); color: #fff; }

.ttg-btn--outline {
	background: transparent;
	color: var(--ttg-primary);
	border: 2px solid var(--ttg-primary);
}
.ttg-btn--outline:hover { background: var(--ttg-primary); color: #fff; }

.ttg-btn--ghost {
	background: rgba(255, 255, 255, .12);
	color: #fff;
	border: 2px solid #fff;
}
.ttg-btn--ghost:hover { background: #fff; color: var(--ttg-primary); }

/* -----------------------------------------------------------
   Topbar (verde claro #ecffe5, igual al fondo del sitio)

   Altura controlada por --ttg-topbar-h: el original mide 30px de
   alto en escritorio. Antes se dejaba "crecer" con el padding + el
   line-height del texto y terminaba midiendo ~45px, que es una de
   las dos razones por las que el header del dev quedaba más alto
   que el original.
----------------------------------------------------------------- */
.ttg-topbar {
	background: var(--ttg-light);
	font-size: 12px;
	line-height: 1.2;
	padding: 0;
	height: var(--ttg-topbar-h);
	display: flex;
	align-items: center;
}
.ttg-topbar__inner {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: nowrap;
	gap: clamp(12px, 2vw, 24px);
	width: 100%;
}
.ttg-topbar__contact { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 20px); min-width: 0; }
.ttg-topbar__contact a {
	display: inline-flex; align-items: center; gap: 6px;
	color: rgba(0,0,0,.6);
	white-space: nowrap;
	max-width: 100%;
}
.ttg-topbar__contact a span { overflow: hidden; text-overflow: ellipsis; }
.ttg-topbar__contact svg { flex: 0 0 auto; width: 14px; height: 14px; }
.ttg-topbar__social { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.ttg-topbar__social a {
	color: var(--ttg-primary);
	display: flex; align-items: center; justify-content: center;
}
.ttg-topbar__social svg { width: 18px; height: 18px; }

/* -----------------------------------------------------------
   Header principal
----------------------------------------------------------------- */
/* Fallback de padding-top mientras carga el JS que calcula la altura
   real del header fijo (evita que el contenido arranque tapado).
   El JS reescribe --ttg-header-h con la altura medida real. */
.ttg-content { padding-top: var(--ttg-header-h); }

/* -----------------------------------------------------------
   Header fijo (topbar + nav juntos) - el original usa position:fixed
   permanentemente, no "sticky tras bajar".
----------------------------------------------------------------- */
.ttg-header-fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .07);
}
/* Cuando hay sesión iniciada en WordPress, la barra de admin ocupa el
   top real del viewport - hay que empujar el header debajo de ella. */
body.admin-bar .ttg-header-fixed { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .ttg-header-fixed { top: 46px; }
}

.ttg-header {
	background: var(--ttg-light);
	padding: 0;
}
.ttg-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: clamp(10px, 2vw, 28px);
	min-height: var(--ttg-header-row-h);
}

/* Logo.
   El truco del original: el logo mide 81px pero la fila solo 66px, así
   que sobresale por arriba (sobre el topbar, que es del mismo color) y
   queda anclado 4px por encima del borde inferior del header. Por eso
   .ttg-header__logo lleva una altura FIJA igual a la fila: así el logo
   puede desbordar sin estirar el header. */
.ttg-header__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-end;
	height: var(--ttg-header-row-h);
}
.ttg-header__logo a { display: block; line-height: 0; }
.ttg-header__logo img,
.ttg-header__logo .ttg-logo-img,
.ttg-header__logo .custom-logo {
	max-height: var(--ttg-logo-h);
	width: auto;
	height: auto;
	display: block;
	margin-bottom: var(--ttg-logo-gap);
}

/* Menú: NUNCA debe partir un ítem en dos líneas ("Tour de / Canopy").
   nowrap + flex:0 0 auto impide que flexbox lo encoja; el gap y el
   tamaño de fuente se ajustan solos con clamp() entre 992px y 1400px. */
.ttg-nav { flex: 0 1 auto; min-width: 0; }
.ttg-nav__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(11px, 1.2vw, 15px);
	font-size: clamp(13px, 1.1vw, 14px);
	color: rgba(0,0,0,.6);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ttg-nav__list > li { flex: 0 0 auto; }
.ttg-nav__list a {
	display: block;
	padding: 6px 0;
	white-space: nowrap;
	line-height: 1.3;
}
.ttg-nav__list .current-menu-item > a,
.ttg-nav__list .current_page_item > a,
.ttg-nav__list a:hover {
	color: var(--ttg-primary-2);
	font-weight: 700;
}

.ttg-header__actions {
	display: flex;
	align-items: center;
	gap: clamp(8px, 1.2vw, 16px);
	flex: 0 0 auto;
}

/* Botón "Reserva Ahora" - estilo real: verde #12441F, radio 8px */
/* Medidas exactas del original (CSS propio del sitio en producción):
   background #12441F, padding 10px 15px, radius 8px, weight 600,
   alto 40px y el rótulo en mayúsculas. */
.ttg-header__actions .ttg-btn--accent {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ttg-cta);
	color: #fff;
	box-shadow: none;
	height: 40px;
	padding: 10px 15px;
	border-radius: 8px;
	white-space: nowrap;
	font-size: clamp(12px, 1.1vw, 14px);
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
}
.ttg-header__actions .ttg-btn--accent:hover { background: var(--ttg-cta-hover); }

.ttg-lang-switch { font-size: 13px; white-space: nowrap; }
.ttg-lang-switch--static { color: #333; cursor: default; user-select: none; }

/* Dropdown de idioma propio - bandera + idioma actual + flecha */
.ttg-lang-dropdown { position: relative; font-size: 13px; }
.ttg-lang-dropdown__toggle {
	display: flex; align-items: center; gap: 6px;
	background: none; border: none; cursor: pointer;
	color: #333; font-size: 13px; padding: 4px 2px;
	white-space: nowrap;
}
.ttg-lang-dropdown__toggle img { display: block; border-radius: 1px; }
.ttg-lang-dropdown__toggle svg { transition: transform .2s ease; color: #666; flex: 0 0 auto; }
.ttg-lang-dropdown.is-open .ttg-lang-dropdown__toggle svg { transform: rotate(180deg); }
.ttg-lang-dropdown__menu {
	position: absolute; top: 100%; right: 0; margin-top: 8px;
	background: #fff; border: 1px solid #e3e3e3; border-radius: 4px;
	box-shadow: 0 6px 18px rgba(0,0,0,.12);
	min-width: 150px; padding: 6px 0;
	list-style: none;
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 300;
}
.ttg-lang-dropdown.is-open .ttg-lang-dropdown__menu {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.ttg-lang-dropdown__menu li.is-current { display: none; } /* no repetir el idioma actual en la lista */
.ttg-lang-dropdown__menu a {
	display: flex; align-items: center; gap: 8px;
	padding: 8px 14px; font-size: 13px; color: #333;
}
.ttg-lang-dropdown__menu a:hover { background: var(--ttg-light); }

.ttg-footer__lang { text-align: center; padding: 14px 0; background: var(--ttg-light); }
.ttg-footer__lang .ttg-lang-dropdown { display: inline-block; }
.ttg-footer__lang .ttg-lang-dropdown__menu { left: 50%; right: auto; transform: translate(-50%, -6px); }
.ttg-footer__lang .ttg-lang-dropdown.is-open .ttg-lang-dropdown__menu { transform: translate(-50%, 0); }

/* Hamburguesa */
.ttg-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px 4px;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
}
.ttg-burger span {
	width: 24px; height: 2px; background: #222; display: block;
	transition: transform .25s ease, opacity .2s ease;
}
.ttg-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ttg-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ttg-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Elementos que solo existen dentro del panel móvil */
.ttg-nav__close { display: none; }
.ttg-nav__mobile-extra { display: none; }
.ttg-nav-overlay { display: none; }

/* -----------------------------------------------------------
   Header responsive
----------------------------------------------------------------- */

/* Portátiles / tablets horizontales: se compacta pero sigue siendo
   el menú de escritorio (igual que el original, que aguanta hasta ~980px). */
/* Tablet y móvil: menú lateral. A partir de aquí el logo YA NO
   desborda (en pantallas chicas chocaría con el texto del topbar),
   así que se centra dentro de su fila. */
@media (max-width: 991px) {
	:root {
		--ttg-topbar-h: 30px;
		--ttg-header-row-h: 62px;
		--ttg-logo-h: 54px;
		--ttg-logo-gap: 0px;
		--ttg-header-h: 92px;
	}

	.ttg-header__logo { align-items: center; }

	.ttg-burger { display: flex; }

	.ttg-nav {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(330px, 86vw);
		background: #fff;
		box-shadow: -6px 0 26px rgba(0,0,0,.18);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform .3s ease, visibility .3s;
		padding: 64px 24px 40px;
		z-index: 1200;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		display: flex;
		flex-direction: column;
	}
	.ttg-nav.is-open { transform: translateX(0); visibility: visible; }
	body.admin-bar .ttg-nav { top: 46px; }

	.ttg-nav__list {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 0;
		font-size: 15px;
	}
	.ttg-nav__list > li { border-bottom: 1px solid #eee; }
	.ttg-nav__list a { padding: 14px 2px; white-space: normal; }

	.ttg-nav__close {
		display: block;
		position: absolute;
		top: 14px;
		right: 16px;
		width: 36px;
		height: 36px;
		background: none;
		border: none;
		font-size: 30px;
		line-height: 1;
		color: #333;
		cursor: pointer;
	}

	.ttg-nav__mobile-extra { display: block; margin-top: 24px; }
	.ttg-nav__mobile-extra .ttg-btn--accent {
		display: block; text-align: center;
		background: var(--ttg-cta); color: #fff;
		box-shadow: none; border-radius: 8px;
		padding: 13px 16px; font-weight: 600; text-transform: uppercase;
	}
	.ttg-nav__mobile-extra .ttg-btn--accent:hover { background: var(--ttg-cta-hover); filter: none; }
	.ttg-nav__mobile-extra a[href^="tel"],
	.ttg-nav__mobile-extra a[href^="mailto"] {
		display: flex; align-items: center; gap: 8px;
		font-size: 13px; color: #555; padding: 8px 0;
		word-break: break-word;
	}
	.ttg-nav__mobile-extra svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--ttg-primary); }

	/* z-index 990: por DEBAJO de .ttg-header-fixed (1000). Como el
	   panel vive dentro del header (que crea su propio contexto de
	   apilamiento), si el fondo estuviera por encima taparía también
	   el panel y ningún enlace sería clicable. */
	.ttg-nav-overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,.45);
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s ease, visibility .3s;
		z-index: 990;
	}
	.ttg-nav-overlay.is-visible { opacity: 1; visibility: visible; }

	body.ttg-nav-open { overflow: hidden; }
}

/* Móvil: el topbar se queda, pero compacto y centrado */
@media (max-width: 767px) {
	:root {
		--ttg-topbar-h: 28px;
		--ttg-header-row-h: 58px;
		--ttg-logo-h: 46px;
		--ttg-header-h: 86px;
	}
	.ttg-topbar { font-size: 11px; }
	.ttg-topbar__inner { justify-content: space-between; gap: 10px; }
	.ttg-topbar__contact { gap: 12px; min-width: 0; overflow: hidden; }
	.ttg-topbar__contact a { min-width: 0; }
	/* El correo es demasiado largo para un móvil: queda solo el ícono */
	.ttg-topbar__contact a[href^="mailto"] span { display: none; }
	.ttg-topbar__social { gap: 10px; }
	.ttg-topbar__social svg { width: 16px; height: 16px; }
	.ttg-header__actions .ttg-btn--accent { height: 36px; padding: 8px 12px; font-size: 12px; }
}

/* Móviles pequeños: el CTA y el selector de idioma se van al panel
   lateral para que el header no se amontone. */
@media (max-width: 480px) {
	:root { --ttg-logo-h: 42px; --ttg-header-row-h: 54px; --ttg-header-h: 82px; }
	.ttg-header__actions > .ttg-btn--accent { display: none; }
	.ttg-lang-dropdown__toggle .ttg-lang-dropdown__name { display: none; }
	.ttg-topbar__contact a[href^="tel"] span { font-size: 11px; }
}

@media (max-width: 360px) {
	.ttg-topbar__contact a[href^="tel"] span { display: none; }
}

/* -----------------------------------------------------------
   Hero - video de fondo real, sin texto encima (igual al original)
----------------------------------------------------------------- */
.ttg-hero {
	position: relative;
	height: clamp(220px, 36vw, 413px);
	max-height: 60vh;
	overflow: hidden;
	background: #001a0d;
}
.ttg-hero__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ttg-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 100%);
}
.ttg-hero__content {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #fff;
	text-align: center;
}
.ttg-eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: 13px; opacity: .85; margin: 0 0 10px; }
.ttg-hero__content h1 { font-family: "Poppins", sans-serif; font-size: clamp(28px, 5vw, 48px); margin: 0 0 16px; font-weight: 700; }
.ttg-hero__content h1 span { color: var(--ttg-accent); }
.ttg-hero__lead { max-width: 640px; margin: 0 auto 26px; font-size: 16px; }
.ttg-hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ttg-hero__scroll { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 22px; z-index: 2; animation: ttg-bounce 1.8s infinite; }
@keyframes ttg-bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* -----------------------------------------------------------
   Secciones genéricas
----------------------------------------------------------------- */
.ttg-section { padding: 60px 0; }
.ttg-section--alt { background: #fff; }
.ttg-tag {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--ttg-primary-2);
	margin-bottom: 10px;
}

/* Bienvenidos: degradado radial (blanco en el centro -> verde claro en bordes), igual al original */
.ttg-welcome {
	background-image: radial-gradient(circle at center, #ffffff 0%, var(--ttg-light) 100%);
	margin-top: -33px;
	position: relative;
	z-index: 2;
}
.ttg-welcome__inner { text-align: center; max-width: 860px; margin: 0 auto; padding-top: 30px; }

/* Intro de texto en "Nosotros": fondo plano (sin degradado ni margen
   negativo, eso es exclusivo de la portada), padding real 73px. */
.ttg-nosotros-intro { padding-top: 73px; }
.ttg-welcome h2 { color: var(--ttg-primary); font-size: 26px; margin: 0 0 22px; font-weight: 700; }
.ttg-welcome p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.85; }

/* Conservación: foto real de fondo + caja overlay semitransparente.
   Padding real del original: sección usa el default de Divi (50px 0)
   sin override específico, más el padding propio del texto. */
.ttg-conservation {
	background-image: url('../images/conservation.jpg');
	background-size: cover;
	background-position: center;
	padding: 50px 0;
}
.ttg-conservation .ttg-container { max-width: 760px; }
.ttg-conservation p {
	background: var(--ttg-overlay);
	color: #fff;
	text-align: center;
	padding: 20px 30px;
	margin: 0 0 6px;
	font-size: 18px;
	line-height: 1.8em;
}
.ttg-conservation p:first-child { padding-bottom: 6px; margin-bottom: 0; }
.ttg-conservation p:last-child { padding-top: 6px; }

/* Tour de Canopy: degradado claro -> blanco, título #003300 */
.ttg-tour {
	background: linear-gradient(180deg, var(--ttg-light) 0%, #ffffff 100%);
	padding: 55px 0 50px;
}
.ttg-tour__intro { text-align: center; max-width: 900px; margin: 0 auto 34px; }
.ttg-tour__intro h2 { font-size: 17px; font-weight: 700; color: #000; line-height: 1.8; margin: 0; }
.ttg-tour__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	margin-bottom: 36px;
}
.ttg-tour__card { text-align: center; }
.ttg-tour__card img { margin: 0 auto 14px; }
.ttg-tour__card h3 { color: var(--ttg-tour-heading); font-size: 17px; margin: 0 0 8px; }
.ttg-tour__card p { font-size: 13.5px; color: #444; margin: 0; }
.ttg-tour__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 900px) {
	.ttg-tour__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Franja de datos - fondo sólido #033d20 */
.ttg-strip { background: var(--ttg-strip); color: #fff; padding: 40px 0; }
.ttg-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; gap: 20px; }
.ttg-strip__grid strong { display: block; font-size: 26px; font-family: "Poppins", sans-serif; }
.ttg-strip__grid span { font-size: 13px; opacity: .85; }
@media (max-width: 700px) { .ttg-strip__grid { grid-template-columns: repeat(2, 1fr); } }

/* Galería preview en home */
.ttg-gallery-preview { text-align: center; }
.ttg-gallery-preview__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin: 30px 0;
}
.ttg-gallery-preview__item { overflow: hidden; border-radius: 4px; aspect-ratio: 4 / 3; }
.ttg-gallery-preview__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ttg-gallery-preview__item:hover img { transform: scale(1.06); }
@media (max-width: 700px) { .ttg-gallery-preview__grid { grid-template-columns: repeat(2, 1fr); } }

/* Contacto: degradado radial real del original -
   circle at TOP (verde claro arriba -> blanco abajo), distinto del
   degradado "circle at center" de la sección Bienvenidos. */
.ttg-contact-gradient {
	background-image: radial-gradient(circle at top, var(--ttg-light) 0%, #ffffff 100%);
}

/* Contacto - fondo hereda el body, título negro */
.ttg-contact-section__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.ttg-contact-section h2 { color: #000; font-size: 22px; margin: 0 0 10px; }
.ttg-contact-section__map iframe,
.ttg-contact-page__map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; border-radius: 4px; }
@media (max-width: 900px) { .ttg-contact-section__inner { grid-template-columns: 1fr; } }

/* -----------------------------------------------------------
   Formulario de contacto (nativo)
----------------------------------------------------------------- */
.ttg-form { max-width: 900px; margin: 0 auto; }
.ttg-form__row { display: flex; gap: 16px; }
.ttg-form__field { flex: 1; margin-bottom: 16px; }
.ttg-form__field label { display: block; font-size: 13px; margin-bottom: 6px; color: #333; text-align: left; }
.ttg-form__field input,
.ttg-form__field textarea {
	width: 100%;
	padding: 14px;
	border: 1px solid #e2e2e2;
	font-size: 13.5px;
	background: #fff;
	font-family: inherit;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.ttg-form__field textarea { min-height: 140px; resize: vertical; }
.ttg-form__honeypot { position: absolute; left: -9999px; opacity: 0; }
.ttg-form__submit-row { text-align: right; }
.ttg-form .ttg-btn {
	border: 2px solid var(--ttg-cta);
	background: transparent;
	color: var(--ttg-cta);
}
.ttg-form .ttg-btn:hover { background: var(--ttg-cta); color: #fff; }
.ttg-form__response { margin-top: 14px; font-size: 13.5px; text-align: right; }
.ttg-form__response.is-success { color: #1a7a34; }
.ttg-form__response.is-error { color: #b3261e; }
@media (max-width: 700px) { .ttg-form__row { flex-direction: column; gap: 0; } }

/* -----------------------------------------------------------
   Banner interior de página (Nosotros/Tour/Galería/Contacto)
----------------------------------------------------------------- */
/* Banner interior: solo la foto (el texto ya viene en la imagen).
   La altura real la define el aspect-ratio inline (calculado según
   la proporción real de cada imagen) - no un alto fijo. */
.ttg-banner {
	background-size: cover;
	background-position: center;
	width: 100%;
}

/* -----------------------------------------------------------
   Contenido de página genérica (page.php)
----------------------------------------------------------------- */
.ttg-prose { max-width: 860px; margin: 0 auto; font-size: 14.5px; line-height: 1.85; }
.ttg-prose h2 { color: var(--ttg-primary); margin-top: 2em; }
.ttg-prose img { border-radius: 4px; margin: 20px 0; }

/* -----------------------------------------------------------
   Tour de Canopy - página interior
----------------------------------------------------------------- */
.ttg-tour-intro-gradient {
	background-image: radial-gradient(circle at center, #ffffff 0%, var(--ttg-light) 100%);
}
.ttg-tour-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }
.ttg-tour-detail__info p { font-size: 14px; line-height: 1.9; margin: 12px 0; }
.ttg-tour-detail__booking #form-widget { min-height: 300px; }
@media (max-width: 900px) { .ttg-tour-detail { grid-template-columns: 1fr; } }

/* Franja verde sólida con los 4 íconos reales del recorrido */
.ttg-tour-icons { background: #00550f; padding: 50px 0; }
.ttg-tour-icons__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.ttg-tour-icons__grid img { margin: 0 auto 16px; }
.ttg-tour-icons__grid p { color: #fff; font-size: 13.5px; line-height: 1.75; margin: 0; }
@media (max-width: 900px) { .ttg-tour-icons__grid { grid-template-columns: repeat(2, 1fr); } }
.ttg-tour-detail { display: grid; grid-template-columns: 2fr 1fr; gap: 46px; align-items: start; }
.ttg-price-card { background: #fff; border: 1px solid #e3e3e3; border-radius: 6px; padding: 26px; position: sticky; top: calc(var(--ttg-header-h) + 16px); }
.ttg-price-card h3 { margin: 0 0 16px; color: var(--ttg-primary); font-size: 17px; }
.ttg-price-card ul { list-style: none; margin: 0 0 16px; padding: 0; }
.ttg-price-card li { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px dashed #ddd; font-size: 13.5px; }
.ttg-price-card li span { color: #666; display: flex; align-items: center; }
.ttg-price-card__note { font-size: 12.5px; color: #777; margin-bottom: 18px; }
@media (max-width: 900px) { .ttg-tour-detail { grid-template-columns: 1fr; } .ttg-price-card { position: static; } }

.ttg-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 30px; }
.ttg-steps__item { text-align: center; }
.ttg-steps__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--ttg-strip); color: #fff; font-weight: 700; margin-bottom: 14px;
}
.ttg-steps__item p { font-size: 13.5px; line-height: 1.8; color: #444; }
@media (max-width: 900px) { .ttg-steps { grid-template-columns: 1fr; } }

.ttg-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; }
.ttg-two-col h2 { color: var(--ttg-primary); font-size: 19px; }
.ttg-two-col p { font-size: 14px; line-height: 1.85; color: #444; }
.ttg-checklist { list-style: none; margin: 0; padding: 0; }
.ttg-checklist li { padding: 8px 0 8px 26px; position: relative; font-size: 14px; color: #444; }
.ttg-checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--ttg-primary-2); font-weight: 700; }
@media (max-width: 900px) { .ttg-two-col { grid-template-columns: 1fr; } }

/* -----------------------------------------------------------
   Galería + Lightbox nativo
----------------------------------------------------------------- */
.ttg-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ttg-gallery__item { position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 4 / 3; display: block; }
.ttg-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ttg-gallery__item:hover img { transform: scale(1.08); }

/* Overlay con "+" y nombre de archivo, igual al efecto hover del original */
.ttg-gallery__overlay {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, .55);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}
.ttg-gallery__item:hover .ttg-gallery__overlay { opacity: 1; }
.ttg-gallery__plus {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ttg-primary);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (max-width: 900px) { .ttg-gallery { grid-template-columns: repeat(2, 1fr); } }

.ttg-lightbox {
	position: fixed; inset: 0; background: rgba(0,0,0,.9);
	display: none; align-items: center; justify-content: center; z-index: 999; padding: 20px;
}
.ttg-lightbox.is-open { display: flex; }
.ttg-lightbox img { max-width: 90vw; max-height: 88vh; border-radius: 4px; }
.ttg-lightbox__close {
	position: absolute; top: 20px; right: 30px; background: none; border: none;
	color: #fff; font-size: 34px; cursor: pointer; line-height: 1;
}

/* Contenedor del widget real de reseñas de Google (Trustindex) */
.ttg-reviews-target { min-height: 60px; }

/* -----------------------------------------------------------
   Página de Contacto - texto simple centrado + mapa full-bleed
----------------------------------------------------------------- */
.ttg-map-full { width: 100%; line-height: 0; }
.ttg-map-full iframe { width: 100%; height: 400px; display: block; }

/* -----------------------------------------------------------
   Blog / index.php / single.php
----------------------------------------------------------------- */
.ttg-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 30px; }
.ttg-blog-card { background: #fff; border-radius: 6px; overflow: hidden; border: 1px solid #eee; }
.ttg-blog-card__thumb img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.ttg-blog-card__body { padding: 18px; }
.ttg-blog-card__body h2 { font-size: 16px; margin: 0 0 10px; }
.ttg-blog-card__body p { font-size: 13.5px; color: #555; }
.ttg-pagination { margin-top: 30px; text-align: center; }
@media (max-width: 900px) { .ttg-blog-grid { grid-template-columns: 1fr; } }

/* 404 */
.ttg-404 { text-align: center; padding: 100px 0; }
.ttg-404 h1 { font-size: 90px; color: var(--ttg-primary); margin: 0; font-family: "Poppins", sans-serif; }

/* -----------------------------------------------------------
   Footer (bg #222, footer-bottom rgba negro .32)
----------------------------------------------------------------- */
.ttg-footer { background: var(--ttg-footer); color: #cfcfcf; padding: 44px 0 0; font-size: 13px; }
.ttg-footer__grid { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 30px; padding-bottom: 30px; align-items: start; }
.ttg-footer__col h4 { color: #fff; font-size: 15px; margin: 0 0 14px; }
.ttg-footer__col--logo { display: flex; align-items: center; justify-content: center; }
.ttg-footer__social { display: flex; gap: 10px; margin-top: 14px; }
.ttg-footer__social a { width: 28px; height: 28px; border-radius: 50%; background: #333; display: flex; align-items: center; justify-content: center; color: #fff; }
.ttg-footer p { margin: 4px 0 10px; line-height: 1.7; }
.ttg-footer a:hover { color: #fff; }
.ttg-footer__bottom { background: var(--ttg-footer-bottom); text-align: center; padding: 16px 0; font-size: 12px; color: #999; margin-top: 10px; }
@media (max-width: 900px) { .ttg-footer__grid { grid-template-columns: 1fr 1fr; } .ttg-footer__col--logo { grid-column: span 2; order: -1; } }
@media (max-width: 560px) { .ttg-footer__grid { grid-template-columns: 1fr; } .ttg-footer__col--logo { grid-column: span 1; } }

/* -----------------------------------------------------------
   Responsive general del sitio
   (el responsive propio del header vive junto al header, arriba)

   Enfoque mobile-friendly sin tocar el diseño de escritorio:
   se reducen paddings verticales, se bajan las tipografías grandes
   y se pasan las rejillas a 1-2 columnas.
----------------------------------------------------------------- */
@media (max-width: 991px) {
	.ttg-section { padding: 46px 0; }
	.ttg-welcome__inner { padding-top: 24px; }
	.ttg-welcome h2 { font-size: 23px; }
	.ttg-conservation p { font-size: 16px; padding: 18px 22px; }
	.ttg-tour { padding: 44px 0 40px; }
	.ttg-tour__intro { margin-bottom: 26px; }
	.ttg-strip { padding: 32px 0; }
	.ttg-strip__grid strong { font-size: 23px; }
	.ttg-tour-icons { padding: 40px 0; }
	.ttg-map-full iframe { height: 320px; }
}

@media (max-width: 767px) {
	body { font-size: 14.5px; }
	.ttg-container { padding: 0 18px; }
	.ttg-section { padding: 38px 0; }
	.ttg-welcome { margin-top: -20px; }
	.ttg-welcome h2 { font-size: 21px; }
	.ttg-welcome p,
	.ttg-prose { font-size: 14px; }
	.ttg-conservation { padding: 40px 0; }
	.ttg-conservation p { font-size: 15px; line-height: 1.7em; padding: 16px 18px; }
	.ttg-nosotros-intro { padding-top: 46px; }
	.ttg-tour__intro h2 { font-size: 15.5px; line-height: 1.7; }
	.ttg-tour__grid { gap: 22px; }
	.ttg-two-col,
	.ttg-tour-detail { gap: 30px; }
	.ttg-contact-section__map iframe,
	.ttg-contact-page__map iframe { min-height: 260px; }
	.ttg-map-full iframe { height: 260px; }
	.ttg-form__field input,
	.ttg-form__field textarea { font-size: 16px; } /* 16px evita el zoom automático de iOS */
	.ttg-form__submit-row { text-align: center; }
	.ttg-form .ttg-btn { width: 100%; }
	.ttg-form__response { text-align: center; }
	.ttg-hero__actions .ttg-btn { width: 100%; max-width: 280px; }
	.ttg-lightbox__close { top: 10px; right: 14px; }
	.ttg-404 { padding: 60px 0; }
	.ttg-404 h1 { font-size: 64px; }
}

@media (max-width: 560px) {
	.ttg-section { padding: 32px 0; }
	.ttg-tour__grid,
	.ttg-tour-icons__grid,
	.ttg-steps { grid-template-columns: 1fr; }
	.ttg-tour__actions { flex-direction: column; align-items: stretch; }
	.ttg-tour__actions .ttg-btn { width: 100%; text-align: center; }
	.ttg-gallery,
	.ttg-gallery-preview__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.ttg-strip__grid { gap: 16px; }
	.ttg-price-card { padding: 20px; }
	.ttg-footer { padding-top: 34px; }
	.ttg-footer__grid { text-align: center; }
	.ttg-footer__social { justify-content: center; }
}

/* Respeta la preferencia del sistema de reducir animaciones */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* -----------------------------------------------------------
   Bloque de reseñas de Google

   El contenido lo pinta el plugin que se elija (o Trustindex);
   aquí solo se centra y se le pone un ancho máximo sensato para
   que no se desparrame ni se pegue a los bordes en móvil.
----------------------------------------------------------------- */
.ttg-reviews-embed,
.ttg-reviews-target { max-width: 1000px; margin: 0 auto; text-align: left; }
.ttg-reviews-embed img { display: inline-block; }
.ttg-reviews-empty {
	max-width: 560px; margin: 0 auto;
	padding: 18px 20px;
	border: 1px dashed #c9c9c9; border-radius: 6px;
	background: #fafafa; color: #666;
	font-size: 13.5px; text-align: center;
}
.ttg-reviews-empty a { color: var(--ttg-primary-2); text-decoration: underline; }
@media (max-width: 767px) {
	.ttg-reviews-embed,
	.ttg-reviews-target { text-align: center; }
}